Discussion :

[yehoudaT]

Bonjour à tous,

Je réalise mon premier programme sous Qt et ma question est dans ce cas peut-être un peu simple...

Je souhaite réaliser une interface homme machine IHM avec plusieurs menus du type:
- musique
- contacts
- téléphone
- radio, etc... etc...

Ma méthode est de travailler avec des éléments qml.

J'ai d'abord "construit" dans mon MainPanel, un rectangle qui fait la taille de ma fenêtre. Dans ce rectangle, j'ai un ListModel d'image .png (icones des différents menus) qui correspondent à chaque menus.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
        ListModel {
            id: list_icone
            ListElement {name: "Musique";       icon: "Music.png"}
            ListElement {name: "Navigation";    icon: "Computer.png"}
            ListElement {name: "Radio";         icon: "Run.png" }
            ListElement {name: "Climatisation"; icon: "Custom.png"}
            ListElement {name: "Téléphone";     icon: "Picture.png"}
            ListElement {name: "Système";       icon: "Network.png"}
        }

Je crée ensuite un type Item qui intègre chaque image avec son texte en dessous (musique, téléphone, etc...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
        Component {
            id:icone
            Item {
                width: 130
                height: 130
                scale: PathView.iconScale
                opacity: PathView.iconOpacity
 
                Image {
                    width: 120
                    height: 120
                    //color: PathView.iconColor
                    source: icon
                    smooth: true
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                }
                Text {
                    color: "white"
                    text: name
                    smooth: true
                    font.pointSize: 11
                    font.family: "Arial"
                    font.bold: true
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.bottom: parent.bottom
                }
            }
        }

Enfin, j'affiche ces items dans un premier Pathview avec une animation PathQuad qui réagit aux commande clavier ← et →.
j'ai ajouter la commande clavier Entrée qui me renvois (dans le fenetre Sortie de l'application) le numéro de chaque menu; je les identifie donc chacun.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Keys.onLeftPressed: decrementCurrentIndex()
            Keys.onRightPressed: incrementCurrentIndex()
            Keys.onReturnPressed: { ... ...

Je souhaite maintenant développer les différents menus, mais je ne vois pas trop comment m'y prendre.

Dois-je garder le même raisonnement et créer des Componant avec des Pathview ?
Dans ce cas il faut alterner l'affichage de ces PathView (cacher le menu principal/afficher le menu selectionné avec Entrée) à chaque fois que je rentre ou que je sorte de chaque menus.

[Jiyuu]

Tu as deux possibilités :

• soit tu pars du principe que tous tes items sont chargés au démarrage de ton appli et tu joues avec l'attribut visible pour les afficher ou non ;
• soit tu les charges à la demande en créant des components.

Pour la deuxième solution, voici un extrait de l'une de mes appli :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
RowLayout{
            Layout.fillWidth: true
            Common.P_Button {
                text : "Ajouter une écriture"
                //Layout.fillWidth: true
                implicitWidth: 100
                implicitHeight: 30
                onClicked: loader.sourceComponent = add
            }
 
        }
 
        Loader {
            id : loader
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
 
        Component {
            id : add
            Accounting {
                title: "Ajouter une écriture"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }

Par contre, je ne sais pas comment tu veux gérer la position avec "ta barre de menu personnalisée", car à un moment ou un autre il faudra bien que tu puisses y ré-accéder.

@+


J

[yehoudaT]

Bonjour et merci pour ta réponse Jiyuu !

J'ai pu avancer dans mon code en effet avec l'utilisation d'un Loader.
Ma méthode est de créer autant de fichier .qml que j'ai de menus, puis (dans le MainPanel) à l'évènement Entrée je charge mes Items en fonction du menu sélectionné

Codes par parties:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
Loader  {
        id:  uiLoader
        function handleGoBack() {
            source = "";
            interaction_zone.visible = true;
        }
        onItemChanged: {
            if (item.goBack)
                item.goBack.connect(handleGoBack)
        }
    }

puis dans mon PathView:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Keys.onReturnPressed: {
                    if(main_menu_view.currentIndex == 0) {
                        console.log(main_menu_view.currentIndex)
                    }
                    if(main_menu_view.currentIndex == 1) {
                        console.log(main_menu_view.currentIndex)
                    }
                    if  (main_menu_view.currentIndex == 2) {
                        console.log(main_menu_view.currentIndex)
                        uiLoader.source = "Radio.qml";
                        interaction_zone.visible = false;
                    }
                    if(main_menu_view.currentIndex == 3) {
                        console.log(main_menu_view.currentIndex)
                    }
                    if(main_menu_view.currentIndex == 4) {
                        console.log(main_menu_view.currentIndex)
                    }
                    if(main_menu_view.currentIndex == 5) {
                        console.log(main_menu_view.currentIndex)
                    }
                }

• Je charge ici mon fichier .qml du menu radio avec mes différents Items.
• Je cache bonnement mon menu principal sans désactiver les fonctions de clavier qui lui avaient été attribuées: Keys.onLeftPressed: decrementCurrentIndex() et Keys.onRightPressed: incrementCurrentIndex().

Mon problème est maintenant celui qui vient logiquement après: avec l'instruction visible
Comment "passer les commandes" aux nouveaux fichier .qml que je charge et lui dédier les fonctions du clavier ?

Autrement dis (et avec maladresse ), n'y aurait-il pas une fonction du genre : disable (dans l'ancien menu)/enable (du nouveau) ??

Cordialement.

[Jiyuu]

Mon problème est maintenant celui qui vient logiquement après: avec l'instruction visible
Comment "passer les commandes" aux nouveaux fichier .qml que je charge et lui dédier les fonctions du clavier ?

Autrement dis (et avec maladresse ), n'y aurait-il pas une fonction du genre : disable (dans l'ancien menu)/enable (du nouveau) ??

Tu pourrais donner plus d'infos car je ne comprends pas vraiment ce que tu cherches à faire là

[yehoudaT]

J'ai trouvé la solution à mon problème avec l'utilisation de la commande visible, que je passe de true à false (ou inversement de false à true) selon le Pathview que je veux afficher. Je fais de même avec la commande interactive, qui me permet de controler les widgets (Component) du Pathview sélectionné.

Pour ré-expliquer mon problème:
Je développe une IHM.
Un Pathview principal affiche 6 menus (ListElement/Component) que je peux faire défiler avec les flèches Droite et Gauche du clavier.
Je peux aussi entrer dans le menu désiré à l'aide de la touche Entrée.
Chaque menu comporte ses propres widgets (Component).

PROBLEME:
Tous mes widgets de tous mes menus s'affichaient aléatoirement voir en même temps, sans que j'entre ou non dans le menu qui est sensé les afficher.
Je n'arrivait pas à attribuer les commandes clavier lorsque j'étais dans les différents menus.

SOLUTION:
Au départ, seul le Pathview principal qui affiche les 6 menus ne doit etre visible et controlabel avec les commande visible et interactive à true.
Il faut bien initialisé à false les commandes visible et interactive dans chacun des autres menus (dans mon cas: 1 Pathview pour 1 menu).
Puis avec l'utilisation de states tout à la fin de mon code, j'alterne l'affichage et la commande ainsi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
//à l'appui de la touche entree je choisi de rentrer dans le menu radio
               Keys.onReturnPressed: {
                     if  (main_menu_view.currentIndex == 2) {
                        rootPanel.state == '' ? rootPanel.state = "state_radio_panel" : rootPanel.state = '';
                    }
 
...
...
 
states: [
        State {
            name: "state_radio_panel"
            PropertyChanges{
                target: main_menu_view
// je cache le menu principal et tous ses widgets
                focus: false
                visible: false
// je retire les commande clavier
                interactive: false
            }
            PropertyChanges{
                target: radio_menu_view
                focus: true
// je montre le menu et tous les widgets du menu radio
                visible: true
// j'attribue au menu radio les commandes claviers
                interactive: true
            }
        }
    ]