Feasability study: Displaying a graph coded in C++ with QML ?

[Zaxy]

Hello guys,

I am starting working with QML and want to know if the following is feasable:

I want to display a graph coded in C++ with QML in the following way:
– nodes are represented by an icon (image file)
– you can right click on an node and do some simple stuff like rename the node’s name
– nodes are connected with lines and the graph is drawn in a suitable easy to visualize way

I saw that there is GridView in QML, but not sure that you can draw lines between the elements or arrange them on the screen in a suitable way.

Can you please give me an oppinion if this is feaseable with QML and which elements should I use ?

Many thanks in advance !

[amleto]

google found this example
http://qt.gitorious.org/qt-labs/qmlc...examples/graph

[Zaxy]

Seems interesting ...

But where to find that Canvas QML component:


import "../../Canvas"

import Qt 4.7

Canvas {

width:600
...
...

?

[amleto]

same website

[Zaxy]

Thanks, Yes I found it, run qmake on the src project, but still cannot run the graph.qml example with qmlviewer.
It's not working ... Did you managed to run it ?

[wysota]

google found this example
http://qt.gitorious.org/qt-labs/qmlc...examples/graph

The thing is this has nothing to do with QML. The graph is drawn using regular imperative code.

[Zaxy]

Any ideas if I could do it with QML ?

[wysota]

If you implement all the elements you need in C++, export them to QML and use them then probably yes.

[Zaxy]

Here you can find the source code of the example:

SourceCode_QML_Cpp.zip

Hello,

I have the following example - a QList of Nodes in ConfigurationModel .
I want to bind the properties "QString nodeID" and "QString iconFilePath" beween the QML component Node and the C++ class Node.

Unfortunetly the binding is not working - when you create the Node instances from C++, the properties of the correspondingly generated QML objects don't have the given values. They are empty. I cannot find where the issue comes from ... Could you please advise me, what I do wrong ?


main.qml

import QtQuick 1.0
 
Rectangle {
    width:  500
    height: 500
 
    Repeater {
        anchors.fill: parent
        model: configModel
        delegate: Node {}
    }
}

import QtQuick 1.0

Rectangle {
    width:  500
    height: 500

    Repeater {
        anchors.fill: parent
        model: configModel
        delegate: Node {}
    }
}

To copy to clipboard, switch view to plain text mode 

Node.qml

import QtQuick 1.0
import NodeLib 1.0
 
Node {
    id: nodeDelegate
 
    Image{
        id : nodeIcon
        source: nodeDelegate.iconFilePath
    }
 
    Text {
       anchors.top: nodeIcon.bottom
       text: nodeDelegate.nodeID
    }
 
    MouseArea {
       anchors.fill: parent
    }
}

import QtQuick 1.0
import NodeLib 1.0

Node {
    id: nodeDelegate

    Image{
        id : nodeIcon
        source: nodeDelegate.iconFilePath
    }

    Text {
       anchors.top: nodeIcon.bottom
       text: nodeDelegate.nodeID
    }

    MouseArea {
       anchors.fill: parent
    }
}

To copy to clipboard, switch view to plain text mode 

main.cpp

#include <QApplication>
#include "qmlapplicationviewer.h"
#include <QDeclarativeContext>
#include <QtDeclarative>
 
#include "ConfigurationModel.h"
 
Q_DECL_EXPORT int main(int argc, char *argv[])
{
    QScopedPointer<QApplication> app(createApplication(argc, argv));
 
    QDeclarativeView    declarativeView;
    qmlRegisterType<Node>("NodeLib", 1, 0, "Node");
 
    ConfigurationModel* p_configModel = ConfigurationModel::GetConfigModelInstance();
    p_configModel->addNodeInConfigurationModel(new Node("PanelXXXX", PLUG_IN, EVALUATION_BLOCK, "./ui-images/cutetube.png"));
    p_configModel->addNodeInConfigurationModel(new Node("PanelYYYY", PLUG_IN, EVALUATION_BLOCK, "./ui-images/cutetube.png"));
    Node *p_nodeZ = new Node("PanelZZZZ", PLUG_IN, EVALUATION_BLOCK, "./ui-images/cutetube.png");
    p_nodeZ->setNodeID("NODE ZZZZ");
    p_configModel->addNodeInConfigurationModel(p_nodeZ);
 
    // if the configuration has been changed, you need to call setContextProperty() again to update the QML view
 
    declarativeView.rootContext()->setContextProperty("configModel", ConfigurationModel::GetConfigModelInstance());
 
    declarativeView.setSource(QUrl::fromLocalFile("qml/ConfigurationView/main.qml"));
    declarativeView.show();
 
    return app->exec();
}

#include <QApplication>
#include "qmlapplicationviewer.h"
#include <QDeclarativeContext>
#include <QtDeclarative>

#include "ConfigurationModel.h"

Q_DECL_EXPORT int main(int argc, char *argv[])
{
    QScopedPointer<QApplication> app(createApplication(argc, argv));

    QDeclarativeView    declarativeView;
    qmlRegisterType<Node>("NodeLib", 1, 0, "Node");

    ConfigurationModel* p_configModel = ConfigurationModel::GetConfigModelInstance();
    p_configModel->addNodeInConfigurationModel(new Node("PanelXXXX", PLUG_IN, EVALUATION_BLOCK, "./ui-images/cutetube.png"));
    p_configModel->addNodeInConfigurationModel(new Node("PanelYYYY", PLUG_IN, EVALUATION_BLOCK, "./ui-images/cutetube.png"));
    Node *p_nodeZ = new Node("PanelZZZZ", PLUG_IN, EVALUATION_BLOCK, "./ui-images/cutetube.png");
    p_nodeZ->setNodeID("NODE ZZZZ");
    p_configModel->addNodeInConfigurationModel(p_nodeZ);

    // if the configuration has been changed, you need to call setContextProperty() again to update the QML view

    declarativeView.rootContext()->setContextProperty("configModel", ConfigurationModel::GetConfigModelInstance());

    declarativeView.setSource(QUrl::fromLocalFile("qml/ConfigurationView/main.qml"));
    declarativeView.show();

    return app->exec();
}

To copy to clipboard, switch view to plain text mode 

Node.h

#ifndef NODE_H
#define NODE_H
 
#include <QString>
#include <QList>
#include <QDeclarativeItem>
 
#include "GlobalDeclarations.h"
 
// Inherit from QDeclarativeItem in order to override paint() method and to display links to parent nodes
class Node : public QDeclarativeItem
{
    Q_OBJECT
    Q_PROPERTY(QString iconFilePath  READ getIconFilePath WRITE setIconFilePath NOTIFY iconFilePathChanged)
    Q_PROPERTY(QString nodeID  READ getNodeID WRITE setNodeID NOTIFY nodeIDchanged)
 
 
public:
    // Constructors
    Node();
    Node(QString nodeID, NodeType nodeType, PlugInType plugInType, QString iconFilePath);
 
     QHash<int, QByteArray> roleNames() const;
    // Destructor
    ~Node();
 
    QString getNodeID() const;
    Q_INVOKABLE bool setNodeID(const QString &nodeID);
 
    QString  getIconFilePath() const;
    Q_INVOKABLE bool setIconFilePath(const QString &iconFilePath);
 
    void hide();
    void show();
 
    void connectTo(Node* p_toNode);
    void disconnectFrom(Node* p_toNode);
    void removeNode();
 
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0);
 
signals:
    void nodeIDchanged(QString data);
    void iconFilePathChanged(QString data);
    void dataChanged();
 
protected:
    void addParent(Node* p_parentNode);
    const QList<Node*>& getParents() const;
    QList<Node*>& accessParents();
 
    void addChild(Node* p_childNode);
    const QList<Node*>& getChildren() const;
    QList<Node*>& accessChildren();
 
 
private:
    QString         _nodeID;
    NodeType        _nodeType;
    PlugInType      _plugInType;
    QString         _iconFilePath;
 
    QList<Node*>    _parents;
    QList<Node*>    _children;
};
 
#endif // NODE_H

#ifndef NODE_H
#define NODE_H

#include <QString>
#include <QList>
#include <QDeclarativeItem>

#include "GlobalDeclarations.h"

// Inherit from QDeclarativeItem in order to override paint() method and to display links to parent nodes
class Node : public QDeclarativeItem
{
    Q_OBJECT
    Q_PROPERTY(QString iconFilePath  READ getIconFilePath WRITE setIconFilePath NOTIFY iconFilePathChanged)
    Q_PROPERTY(QString nodeID  READ getNodeID WRITE setNodeID NOTIFY nodeIDchanged)


public:
    // Constructors
    Node();
    Node(QString nodeID, NodeType nodeType, PlugInType plugInType, QString iconFilePath);

     QHash<int, QByteArray> roleNames() const;
    // Destructor
    ~Node();

    QString getNodeID() const;
    Q_INVOKABLE bool setNodeID(const QString &nodeID);

    QString  getIconFilePath() const;
    Q_INVOKABLE bool setIconFilePath(const QString &iconFilePath);

    void hide();
    void show();

    void connectTo(Node* p_toNode);
    void disconnectFrom(Node* p_toNode);
    void removeNode();

    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0);

signals:
    void nodeIDchanged(QString data);
    void iconFilePathChanged(QString data);
    void dataChanged();

protected:
    void addParent(Node* p_parentNode);
    const QList<Node*>& getParents() const;
    QList<Node*>& accessParents();

    void addChild(Node* p_childNode);
    const QList<Node*>& getChildren() const;
    QList<Node*>& accessChildren();


private:
    QString         _nodeID;
    NodeType        _nodeType;
    PlugInType      _plugInType;
    QString         _iconFilePath;

    QList<Node*>    _parents;
    QList<Node*>    _children;
};

#endif // NODE_H

To copy to clipboard, switch view to plain text mode