Intégrer le clavier virtuel de Pegasus

A ce jour, nous proposons dans Pegasus un clavier virtuel dans les menus :

Mais il est aussi utilisable à partir des thèmes :

Comment l’activer ou pas dans Pegasus ?

En fait, dans les « settings », un option est dédiée est permet de l’activer ou pas. Si il n’est pas activé, il sera néanmoins possible d’utiliser un clavier physique et celui-ci pourra intéragir aussi avec les éditions et l’interface sans pour autant demandé de rajouter du code supplémentaire si on utilise les composants/fonctions proposés par Pegasus.

Comment l’intéger dans un thème ou dans le front-end ?

Pour simplifier son intégration et pouvoir fonctionner avec le plus grand nombre de cas d’implémentation, 2 fonctions « standard » sont proposées par Pegasus et à intégrer respectivement dans « Keys.OnPress » and « Keys.OnReleased » d’un textinput, textfield, textarea… de la manière suivante :

    property bool active : false //set to false by default
    Keys.onPressed: {
        event.accepted, mytextfield.focus, active = virtualKeyboardOnPressed(event,mytextfield,active);
    }

Keys.onReleased:{
        event.accepted = virtualKeyboardOnReleased(event);
    }

Ici dans cet exemple, mytextfield est l’id d’une TextField et on créé juste un booléen « active » que l’on initialise à « false ».

Attention: mytextfield doit être changé par le nom de l’objet qui va prendre le focus lors de la saisie qui est habituellement l’objet qui affiche le curseur de saisie

C’est le strict minimum.

Mais si vous le souhaitez vous pouvez aussi vouloir gérer des choses en plus du virtual keyboard ou du clavier en général, donc vous pouvez avoir ce type d’implémentation aussi:

property bool active : false //set to false by default
Keys.onPressed: {
						
	// Accept
        if (api.keys.isAccept(event) && !event.isAutoRepeat) {
		event.accepted = true;
		sfxToggle.play();
		nextSetting();
		saveSetting();
		//to activate edition (and potantially virtual keyboard)
		if (setting === "to edit" && settingtextfield.readOnly === true ) {
			settingtextfield.readOnly = false;
			settingtextfield.focus = true;
		}
        }
        // Back
        else if (api.keys.isCancel(event) && !event.isAutoRepeat) {
            event.accepted = true;
            sfxBack.play();
	    //to deactivate edition (and potantially virtual keyboard)
	    if (setting === "to edit" && settingtextfield.readOnly === false ) {
	        settingtextfield.readOnly = true;
	        settingList.focus = true;
                active = false; //to force to reset to false in this case
	    }
    	    //else we come back to parent menu
	    else if (settingsList.model === myCollections.listmodel){
                collectionslist.focus = true;
	    else pagelist.focus = true;
        }
	if (setting === "to edit" && settingtextfield.readOnly === false ) {
	    event.accepted, settingtextfield.focus, active = virtualKeyboardOnPressed(event,settingtextfield,active);
	}
     }

Keys.onReleased:{
    if (setting === "to edit" && settingtextfield.readOnly === true ) {
	event.accepted = virtualKeyboardOnReleased(event);
	//to reset demo if needed
	if (event.accepted) resetDemo();
     }
}

Conseils à suivre pour un meilleur fonctionnement ?

1. ne pas vouloir mettre trop de chose sur les « Keys.OnPress » et « Keys.onRelease« , le module virtual keyboard gére déjà beaucoup de cas. Par exemple, il va géré pour que si vous avez un liste, la valeur en cours d’édition soit toujours visible.
2. Pour les « Flickable » et autre « Listview », faire attention à comment on gère le contentY. Il faut implémenter de la façon suivante et vérifier si le clavier virtuel est demandé voir visible:

 Behavior on contentY { PropertyAnimation { duration: 100 } }

 boundsBehavior: api.internal.settings.virtualKeyboardSupport ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds
 boundsMovement: api.internal.settings.virtualKeyboardSupport ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds

 readonly property int yBreakpoint: height * 0.7
 readonly property int maxContentY: contentHeight - height

 function onFocus(item) {
     if (item.focus && !(Qt.inputMethod.visible && api.internal.settings.virtualKeyboardSupport))
          contentY = Math.min(Math.max(0, item.y - yBreakpoint), maxContentY);
 }

Parce que si on ne fait pas attention, la liste ne va pas se décaler dans le cas où on veut éditer avec le virtual keyboard.

Dans Pegasus…

Dans Pegasus, l’objet TextFieldOption.qml supporte déjà le virtual keyboard, donc on peut le réutiliser dans les menus et autres interfaces par la suite.

Les fonctions virtualKeyboardOnReleased & virtualKeyboardOnPressed sont dans le main.qml, le loader de l’inputPanel du virtual keyboard est aussi chargé dans le main.

On utilise un Autoscroller .qml avec le clavier pour géré le bon affichage dans les listes déroulantes et avoir toujours la boite d’édition visible.

Enjoy the QML 😉 !