L’idée de cet article est pas forcement de vous apprendre le QML et le Javascript que vous permettra de coder dans le thème mais plutôt vous donner des clés, des outils, des astuces pour commencer.
Même si le développeur de Pegasus à fait des efforts de documentations sur le sujet (super boulot !!!) que l’on peut trouver ici: https://pegasus-frontend.org/docs/#theme-development
Il y a quelques principes à suivre à notre avis pour développer un nouveau thème dans Pegasus.
Avoir un projet en tête, réfléchir avant de se lancer
Se faire un plan sur papier est déjà un bon départ mais c’est bien aussi de se faire des maquettes sur PC et noter toutes ses idées dans un document électronique, même une fiche excel avec toutes les idées pour commencer à se faire un plan… On pourra aussi par la suite utiliser un Kanban Board dans un Gitkraken par exemple 😉
Ne pas partir de zéro, c’est bien de commencer avec un thème existant
On peut par exemple choisir un partir d’un des thèmes que l’on a dans son « share »:
On duplique le répertoire comme ici de gameOS-master vers gameOS-dev
Il faudra aussi modifier le nom du thème pour s’y retrouver dans Pegasus comme ci-après:
On va donc modifier le fichier ‘theme.cfg’ à la base du thème et on va mettre par exemple ‘(Dev version)’ pour le voir apparaitre dans le menu, il faurda relancer pegasus ou relancer la box:
Commencer avec des objectifs simples
Comme par exemple, on va changer des couleurs, du texte, des images, des logos et commencer à enlever des choses (que l’on pourra mettre en commentaire pour pouvoir revenir en arrière surtout quand on a pas de gestion de configuration (pas de projet dans gitlab ou github par exemple)
On peut modifier la page principal pour commencer, pour GameOS c’est
ShowcaseView\ShowcaseViewMenu.qml:
On peut enlever des éléments pour tester le résultat, on modifie, on sauvegarde et on fait F5 dans Pegasus
Et voilà le logo à disparu 😉
Pour mettre en commentaires des parties:
1) Utiliser // pour mettre juste la ligne en commentaire
2) Utiliser /* puis */ pour mettre une zone en commentaire
Comprendre la structure des « views/pages »
Il est important de comprendre que le QML est finalement un fichier descriptif « à étage » où on vient imbriquer des éléments
- En haut, on retrouve les import (lien vers les autres objects QML et autre lib QT & Javascript)
2. On a un objet root comme « FocuScope » dans ce cas:
On y retrouve tout les objects QML (Text, Image, Rectangle, ListView, Property, Repeater…) mais aussi du javascript (function et aussi inclu dans les properties des objets pour les mettres à jour oui suite à un evenement)
Comprendre le principe des « models/views »
Les datas sont dans les models, la repésentation est dans les views.
Exemple de model static direcement dispo dans le qml: mais le model peut être fourni par un autre objet ou api venant de pegasus comme pour la collection de jeux :
Ainsi on peut mettre à jour les datas indépendamment de la présentation, et par « binding » les views/pages peuvent se mettre à jour automatiquement
Exemple utilisant un model qui sera mis à jour par une fonction bluetooth et qui va conditionner le contenu d’un repeater de « SimpleButton » qui est un object button custom.
Chercher ce que fait un objet QML
Pour chercher aller dans google est taper toujours « QML » suivi de l’objet que l’on cherche… Text, Image, ListView, ListModel…
On clique la plus part du temps sur le premier lien proposé pour tomber sur la doc de QML:
To be continued…. 😉
