Faisabilité : afficher un graphe depuis C++ avec QML

[Zaxy_]

Ok, mais je veux avoir la creation des Nodes dans la coté C++.

Et en plus, je ne veux rélier tout le monde, je veux lier certain nodes et modifier ces connections dynamically.

Sinon, mon model est QList<Node*> _allNodes, qui se trouve dans la classe ConfigurationModel.cpp

J-ai essayé d'avoir la liste _parents du Node comme role dans QML et l'acceder dans QML, mais ca marche pas.

Je voulais a partir de cette liste _parents créer les lignes avec Path/PathLine, mais je ne sais pas comment le faire comm syntax. Je pense, que je mélange QML et javascript et ca marche pas ...

[Amnell]

Bonsoir,

Désolé pour le temps de réponse.

Path et PathLine sont des éléments permettant de déterminer les animations d'un PathView, ça n'a rien à voir avec du dessin de lignes.

Voici une solution, je n'aime pas du tout vu que ça casse ce pour quoi QML existe (gérer la partie graphique, etc.), mais bon, c'est vous qui voyez.

L'exemple que je vous propose permet d'afficher des carrés rouges à l'écran. Ces carrés sont créés depuis le C++ et sont ajoutés dans la scène QML. Depuis QML, on récupère les informations via un signal d'une classe Notifier et on modifie la position des carrés à l'écran.

Code :

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
62
63
64
#ifndef LINK_H
#define LINK_H
 
#include <QtGui>
#include <QtDeclarative>
 
class Link : public QDeclarativeItem
{
    Q_OBJECT
    Q_PROPERTY(int xPos READ xPos WRITE setXPos NOTIFY xPosChanged)
    Q_PROPERTY(int yPos READ yPos WRITE setYPos NOTIFY yPosChanged)
 
public:
    explicit Link(QDeclarativeItem* const parent = NULL)
        : QDeclarativeItem(parent), _xPos(0), _yPos(0)
    {
        setFlag(ItemHasNoContents, false);
    }
 
private slots:
    int xPos() const { return _xPos; }
    int yPos() const { return _yPos; }
    void setXPos(const int v) { _xPos = v; emit xPosChanged(); update(); }
    void setYPos(const int v) { _yPos = v; emit yPosChanged(); update(); }
 
protected:
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
    {
        Q_UNUSED(option);
        Q_UNUSED(widget);
 
        painter->setBrush(QBrush(Qt::red));
        painter->drawRect(_xPos, _yPos, 20, 20);
    }
 
signals:
    void xPosChanged();
    void yPosChanged();
 
private:
    int _xPos;
    int _yPos;
};
 
class Notifier : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QList<QObject*> linkList READ linkList WRITE setLinkList NOTIFY linkListChanged)
 
public:
    Notifier() {}
 
public slots:
    const QList<QObject*>& linkList() const { return _linkList; }
    void setLinkList(const QList<QObject*> &v) { _linkList = v; emit linkListChanged(_linkList); }
 
signals:
    void linkListChanged(const QList<QObject*> &v);
 
private:
    QList<QObject*> _linkList;
};
 
#endif // LINK_H

Le main.cpp :

Code :

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
#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
#include "link.h"
 
Q_DECL_EXPORT int main(int argc, char *argv[])
{
    QScopedPointer<QApplication> app(createApplication(argc, argv));
 
    qmlRegisterType<Link>("MyLib", 1, 0, "Link");
 
    QmlApplicationViewer viewer;
 
    QList<QObject *> list;
    Notifier notifier;
 
    viewer.rootContext()->setContextProperty("notifier", &notifier);
    viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    viewer.setMainQmlFile(QLatin1String("qml/DVPHelp/main.qml"));
    viewer.showExpanded();
 
    Link link1;
    link1.setProperty("xPos", 10);
    link1.setProperty("yPos", 40);
    link1.setParentItem(qobject_cast<QDeclarativeItem*>(viewer.rootObject()));
 
    Link link2;
    link2.setProperty("xPos", 72);
    link2.setProperty("yPos", 12);
    link2.setParentItem(qobject_cast<QDeclarativeItem*>(viewer.rootObject()));
 
    // La liste va contenir les Links créés depuis le C++ :
    list.append(&link1);
    list.append(&link2);
 
    // Cela va permettre d'envoyer un signal que le QML va catcher :
    notifier.setLinkList(list);
 
    return app->exec();
}

main.qml :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import QtQuick 1.1
import MyLib 1.0
import "script.js" as Scr
 
Rectangle {
    id: main
    width: 1024
    height: 800
 
    Connections {
        target: notifier
        onLinkListChanged: {
            Scr.clearLinks();
            Scr.addLinks(notifier.linkList);
        }
    }
}

script.js :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var links = new Array();
 
function clearLinks() {
    links = new Array();
}
 
function addLinks(v) {
    // Récupération de la liste des Links et modification de leur
    // position à l'écran. La variable "links" va contenir des pointeurs
    // vers les éléments graphiques des Nodes :
    for (var i = 0; i < v.length; ++i) {
        links.push(v[i]);
        v[i].xPos += 120;
    }
}

On peut aussi ne pas s'embêter avec le fichier .js et utiliser directement la liste "notifier.linkList".

À noter que vous ne pourrez pas (du moins, pas simplement) avoir une QList<Node*>. Le plus simple et de passer par la classe tout en haut de l'arbre, QObject* : QList<QObject*>.

Si vous retirez le v[i].xPos += 120, vous constaterez que les carrés seront positionnés ailleurs. Cet exemple devrait correspondre à ce que vous demandez et vous permettre d'adapter votre code avec vos objets.

Bonne continuation,
Amnell.

[Zaxy_]

Merci beaucoup