PDA

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



Zaxy
5th December 2012, 12:35
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
5th December 2012, 14:27
google found this example
http://qt.gitorious.org/qt-labs/qmlcanvas/trees/404aafe2f2f82440643be555b5952091177ea791/examples/graph

Zaxy
5th December 2012, 15:00
Seems interesting ...

But where to find that Canvas QML component:


import "../../Canvas"

import Qt 4.7

Canvas {

width:600
...
...

?

amleto
5th December 2012, 15:10
same website

Zaxy
5th December 2012, 16:06
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
5th December 2012, 16:18
google found this example
http://qt.gitorious.org/qt-labs/qmlcanvas/trees/404aafe2f2f82440643be555b5952091177ea791/examples/graph

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

Zaxy
6th December 2012, 08:40
Any ideas if I could do it with QML ?

wysota
6th December 2012, 10:53
If you implement all the elements you need in C++, export them to QML and use them then probably yes.

Zaxy
7th December 2012, 15:02
Here you can find the source code of the example:

8491

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 {}
}
}



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
}
}



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();
}




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