QML 2D Graph Elements?

[fonzi337]

Hi all,

I'm wondering if anyone has developed or if there are plans to develop 2D graphing elements in QML/C++. I've heard of the QWT graphing library, but that seems to be QWidget-based. I am looking for something that has been implemented in QML/C++. Does anyone know if one exists, or is this something I would have to develop?

Thanks!

[diro]

Have you tried QML Canvas?

"http://qt.gitorious.org/qt-labs/qmlcanvas":http://qt.gitorious.org/qt-labs/qmlcanvas

We have integrated it with our project for some weeks and it works well.

[fonzi337]

Thanks diro, QML Canvas seems interesting. I tried downloading it and followed the installation instructions in the README file (i.e., run qmake and followed by nmake). Unfortunately, when I try running any of the example qml files in qmlviewer through Qt Creator, I get the following message:

file:///C:/qmlcanvas/examples/ellipse/Ellipse.qml:28:1: plugin cannot be loaded for module "C:.qmlcanvas.Canvas": The file 'C:/qmlcanvas/Canvas/canvasplugin.dll' is not a valid Qt plugin.
import "../../Canvas"

I've confirmed the canvasplugin.dll file exists. Am I missing a step to get this to work?

Thanks!

[diro]

It is a simple but complex problem :)
It usually could be solved by the following:

1. Checking the DLL dependencies.
2. Checking if the compiler is the same and also the configuration (Debug/Release).

[fonzi337]

Thanks diro. I ended up trying this on my Ubuntu virtual machine and it worked just as described in the README file. I may have some environment variable issues on my Windows PC given the various versions of Qt that I have installed on there.

I ran the examples, and I'm amazed at how much can be accomplished with so little code! What I don't quite understand is how the QML canvas fits in with the rest of Qt (perhaps when I look at the Canvas source code tomorrow things will be come clearer).

The Canvas element seems to expose some fairly low-level painting API; is this API essentially using the QPainter API behind-the-scenes? If so, I'm not sure I understand the benefit of using the Canvas element as opposed to implementing my own custom QML element in C++ (by deriving from QDeclarativeItem) and overriding the Paint method. If you (or anyone else) could shed some light on the high-level objectives of the QML Canvas and how it's similar or different from implementing a custom QML element in C++ that would be very helpful.

Thanks again!

[diro]

Yes, the Canvas element is based on the QPainter API.
About the benefit, I think it is very clear - the reusability.

With Canvas element, you can draw arbitrary graphics in QML without C++.
With QDeclarativeItem, every time you want to change the graphics, you have to modify the C++ code and re-compile it.

If you want to draw an Arc, a Line, a Polygon, and a Circle in the QML, you only need ONE canvas plugin. And you can think how many custom C++ plugins you need..

[fonzi337]

Thanks diro, that helps to clarify things. I had not thought about the recompilation point, but I can see how that is a substantial benefit of using QML Canvas. Does the fact that the painting logic is implemented in Javascript instead of C++ impose any significant performance penalties (in particular for embedded systems), or is this a non-issue? I find that the QPainter API is higher level and easier to read than the Canvas API, but perhaps I just need to familiarize myself a bit more with the Canvas API.

At this point, is the QML Canvas the only available element that allows for custom drawing in the QML environment, or are there other ways to expose QPainter to QML? Also, how does QML Canvas line up with Qt's roadmap? Will QML Canvas become a standard component of Qt (perhaps for Qt 5)?

[diro]

The performance depends on how you use the Canvas.
The process [JavaScript -> QMLEngine -> C++ ] is slower than [QMLEngine -> C++] of course, but with few function calls, I don't think it would be problem. But if you draw some complex graphics with many function calls, it may get bad performance.
The performance cannot be inferred in a simple way, the best way is JUST DO IT and see the result.

For the Qt5 roadmap, it should be a official elements, you can refer to QtQuick 2.0
"http://doc.qt.nokia.com/qt5-snapshot/qtquick2-whatsnew.html":http://doc.qt.nokia.com/qt5-snapshot/qtquick2-whatsnew.html
"http://doc.qt.nokia.com/qt5-snapshot/qml-qtquick2-context2d.html":http://doc.qt.nokia.com/qt5-snapshot/qml-qtquick2-context2d.html

[andre]

You may be interested that user ZapB is working on a graphing library. Have a read through the "topic":http://developer.qt.nokia.com/forums/viewthread/4209/ he started on this for feedback.

[Roan88]

Hi Fonzi337,

I am also interested in learning canvas element in qml. I downloaded canvas from http://qt.gitorious.org/qt-labs/qmlcanvas but having some problem with installation. I read above that you have installed it. So can you please provide me step by step guidance about installation.
I am very eager to learn it. Please help me I am new to qml. I know how to run qmake but dnt know how to run nmake.
Looking forward to your reply.

[fonzi337]

Hi Roan88,

The instructions in the README file should get you up and running (simply qmake followed by nmake in the project directory). Keep in mind that if you're using nmake you need to use the appropriate Visual Studio Command Prompt and not the regular command prompt (Visual Studio command prompt is typically accessible under Start --> Programs --> Microsoft Visual Studio --> Visual Studio Tools --> Visual Studio Command Prompt).

Hope this helps!