Discussion :

[Zaxy_]

Bonjour

Je viens de commencer de travailler avec QML et je voudrais savoir si le cas suivant est faisable avec QML:

Je veux faire afficher un graph depuis C++ avec QML dans la facon suivante:
- chaque noeud est répresant par une image graphique - par exemple une icone grahique .png
- on peut clicker (right mouse click) sur un noeud et pouvoir faire des actions simples sur le noeud (changer son nom, afficher/cacher son apparance)
- les noeuds sont connectés avec des lignes graphique et le graph est affiché dans une facon simple à visualiser.


J'ai vu qu'il existe GridView dans QML, mais je ne sais pas si je peux peindre des lignes graphique entre les elements. Et aussi, si je peux re-arranger les noeuds dans une facon simple à visualiser.

Est-ce que vous pouvez me donner votre avis SVP si cela est faisable avec QML et si oui avec lequels elements QML on pourrait le realiser ?

Merci beaucoup d'avance !

[Amnell]

Bonsoir,

C'est possible avec le module Qt Declarative de Qt (qui englobe QML) en réalisant du côté du C++ l'élément QML puis en l'exploitant du côté du QML. Pour les nœuds, il s'agirait d'un ListModel avec dedans les informations, affiché par un Repeater par-dessus l'élément QML du graphe. Je peux vous fournir un exemple si cette méthode vous intéresse.

Pour la classe C++ du graphe elle-même, je vous propose d'étudier un code que j'avais donné précédemment :

http://www.developpez.net/forums/d12...s/#post6744642

Bonne continuation,
Amnell.

[Zaxy_]

Bonjour,

Oui, je suis intéressé pour cette solution. J'aimerais avoir un exemple Stp.

P.S. et surtout comment créer dynamiquement les objets QML Node a partir de C++ et les connecter avec des lignes ?

Merci

[Amnell]

Bonsoir,

Rapidement :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
    Component.onCompleted: {
        console.log("");
 
        nodeModel.append({"posX": 10, "posY": 5, "name": "Node 1", "opened": true});
        nodeModel.append({"posX": 2, "posY": 12, "name": "Node 2", "opened": false});
    }
 
    Graph {
        id: graph
        anchors.fill: parent
        // ...
 
        property int scaleX: 50
        property int scaleY: 50
 
        MouseArea {
            anchors.fill: parent
            onClicked: {
                nodeModel.append({"posX": mouseX / graph.scaleX, "posY": mouseY / graph.scaleY,
                                     "name": "Node " + (nodeModel.count + 1), "opened": true});
            }
        }
 
        Repeater {
            model: nodeModel
            delegate: Rectangle {
                x: graph.scaleX * posX
                y: graph.scaleY * posY
                width: contentText.width + 10
                height: opened ? 50 : 25
                border.width: 1
                border.color: "black"
 
                Text {
                    id: contentText
                    visible: opened
                    text: name
                    anchors.centerIn: parent
                }
 
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        nodeModel.get(index).opened = !opened;
                    }
                }
            }
        }
    }
 
    ListModel {
        id: nodeModel
    }

Les propriétés scaleX et scaleY devront correspondre à l'échelle du graphe (en gros, 1 en abscisses équivaut à 50px, dans le cas présent). Cette propriété sera à définir dans la classe C++ du Graphe. Là, j'ai fait en sorte que lors qu'on clique sur une zone du graphe, ça ajoute un Node à la position du clic. De plus, le fait de cliquer sur un Node permet de l'ouvrir/le fermer, selon son état courant. Bref, voilà pour l'exemple.

Par rapport à votre question : comment créer des éléments directement depuis le C++, l'idéal serait de passer par une contextProperty() :

Code C++ :

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

1
2
3
4
5
6
7
8
9
class MyNotifier
{
    Q_OBJECT
public:
    // ...
 
signals:
    void createNodeRequest(int x, int y, const QString &name);
};

La définition de la propriété :

Code C++ :

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

1
2
3
MyNotifier notifier;
// ...
viewer.rootContext()->setContextProperty("notifier", &notifier);

Et dans le QML :

Code :

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

1
2
3
4
5
6
    Connections {
        target: notifier
        onCreateNodeRequest: {
            nodeModel.append({"posX": x, "posY": y, "name": name, "opened": true});
        }
    }

Avec cette méthode, pour créer un Node depuis le C++, il suffit donc d'émettre le signal createNodeRequest() de l'instance "notifier".

Il y a bien sûr d'autres solutions mais j'ai préféré vous présenter celle-ci.

Bonne continuation,
Amnell.

[Zaxy_]

Merci beaucoup.

Comment tu peindre des lignes qui connectent les noeud ?

[Amnell]

Bonjour,

L'objectif est d'avoir ceci ?

Code :

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

1
2
3
4
5
6
7
8
9
 
     ______
    | Node |
    |______|    /
       |   ____/
       |__/
      /
     /
/\__/

Dans ce cas, on connaît déjà le point de la courbe :

Code :

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

1
2
x: graph.scaleX * posX
y: graph.scaleY * posY

D'où un petit exemple rapide qui reprend mon précédent code

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
Rectangle {
    id: graph
    width: 1024
    height: 800
 
    property int scaleX: 50
    property int scaleY: 50
 
    MouseArea {
        anchors.fill: parent
        onClicked: {
            nodeModel.append({"posX": mouseX / graph.scaleX, "posY": mouseY / graph.scaleY,
                "name": "Node " + (nodeModel.count + 1), "opened": true});
        }
    }
 
    Repeater {
        model: nodeModel
        delegate: Item {
            x: graph.scaleX * posX
            y: graph.scaleY * posY
            width: nodeArea.width
            height: nodeArea.height + 75
 
            Rectangle {
                width: 1
                height: 75
                y: -75
                color: "black"
            }
 
            Rectangle {
                id: nodeArea
                x: -Math.round(width / 2)
                y: -75
                width: contentText.width + 10
                height: opened ? 50 : 25
                border.width: 1
                border.color: "black"
 
                Text {
                    id: contentText
                    visible: opened
                    text: name
                    anchors.centerIn: parent
                }
 
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        nodeModel.get(index).opened = !opened;
                    }
                }
            }
        }
    }
 
    ListModel {
        id: nodeModel
    }
}

Bonne continuation,
Amnell.