Feasability study: Displaying a graph with QML ?
-
I would use QML Rectangle for that. If you want to detect things like previousnode.right, you need to implement it yourself. You could base this on meta object's parent and children properties if you wish.
Or, of course, you can use your own paint function.
-
So , to use the paint function to draw a line between two nodes.
And about displaying the QList<Node*> in a customized way - for example in a tree view, what could I do ? I think, whan a new node is added to the list, it is automatically displayed, but I want somehow to re-order the graphical representation. I have also additional llist, containing the root Node(s), so I could visit all tree nodes, but don't know how to display them node by node and place them on the screen.
Thanks
-
I'm afraid some custom x and y setting is the way to go. You could try anchoring, but it would be too rigid.
-
yes, I think so as well, I will add posX, posY as roles in my model, in the Repeater will have something like x: posX, y: posY ... and use the paint function to draw a line.
thanks
-
just one question: when is the paint() function called ? Always, when a change on the Node object has been done ?
-
I implemented the paint() function of Node in the following way:
@void Node::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
QPen pen;
pen.setColor(Qt::blue);
pen.setStyle(Qt::SolidLine);
pen.setWidth(2);
painter->setPen(pen);
painter->setRenderHints(QPainter::Antialiasing, true);for (QList<Node*>::const_iterator itParent = _parents.constBegin(); itParent != _parents.constEnd(); itParent++) { QPoint startPoint(this->posX(), this->posY()); QPoint endPoint((*itParent)->posX(), (*itParent)->posY()); painter->drawLine(startPoint, endPoint); }
}@
Than in the main.cpp I create 3 Nodes, and two of them as connected (Node3 has as parent Node2). But I don't see the line in the DeclarativeView window.
Do I need to emit a signal that the line should be painted or how could I call the paint function explicitly ? I'd like to know how does it work and when is it called this paint function ?
Thanks in advance
-
Once again the main.qml and Node.qml:
main.qml:
@import QtQuick 1.0Rectangle {
width: 500
height: 500Repeater { anchors.fill: parent model: configModel delegate: Node {} }
}
@Node.qml:
@import QtQuick 1.0
import NodeLib 1.0Node {
id: nodeDelegate
x: posX
y: posY
visible: isDisplayedImage{ id : nodeIcon source: iconFilePath } Text { anchors.top: nodeIcon.bottom text: nodeID } MouseArea { anchors.fill: parent }
}
@ -
xCharts and D3 are pretty nice ...
but how can I use these scripts from within QML?
simply including the javascript files doesn't seem to work ...with "try porting some small js library", you suggest to translate js to QML?
is there a way to leave the javascript files unchanged?
then one could also use the same code in webkit ...any ideas?
thx[quote author="nizeguy" date="1354837502"]Try porting some small js library that already does that to html canvas and tell us about it.
If it can't be done easily in javascript qml for some reason, it can surely be done in QtQuick in C++ .
ps: just found this one in reddit/programming : http://tenxer.github.com/xcharts/examples/[/quote]
-
Hi,
If you want to use a third-party js library which does charting/graphing, you most likely want to follow the following steps:
- use the QML Canvas type (QtQuick2 only) and pass this object to a compatibility JavaScript resource via an init function call.
eg:
@
import QtQuick 2.0
import "compat.js" as 3rdPartyWrapperItem {
Canvas { id: c }
Component.onCompleted: { 3rdPartyWrapper.init(c) }
}
@- import your compatibility js resource, which sets up the context as required (eg, has the var properties defined which the 3rd party js lib expects) and then does a Qt.include("3rdParty.js")
eg:
@
// compat.js
var Window = []
var Canvas = {}
Qt.include("3rdParty.js")function init(canvasObject c) {
Canvas = c
drawGraph();
}function drawGraph(/* params ... */) {
// call necessary functionality from 3rdParty.js
}
@In general, using 3rd party js libs is possible, but can be tricky, mainly because of the fact that it is impossible (currently) to modify the evaluation context of a script at import time. This is a well known issue, which used to be scheduled for 5.1, but now will most likely be addressed for some later release.
When it comes to graphing (or anything which requires drawing lines) in QML, just use the Canvas element. Take a look at the StocQt example for some inspiration.
Cheers,
Chris. -
Im guessing you could also just use D3 via QtWebKit and have the javascript communicate with qml. I myself have this problem and am working on it.
-
Hi, all!
Any successful results on integrating 3rd-party JavaScript libraries (i.e. D3.js) into QML or JavaScript resources so far? I am unable to find any concrete info on this topic, except for the example of "modifying QChart.js":http://jwintz.me/blog/2014/02/15/qchart-dot-js-qml-binding-for-chart-dot-js/ library's source code to make it work inside QML.
Regards,
Dmitrii.