Paint with Qml

[yan_]

Hi.

I would like draw an image and display it with QML.
But i don't find painter, canvas, image, ... to build it.
Do you know if its possible? Maybe in a futur version?

[Guest]

if i understand correctly, u want qml to display an image? is it right or ... ?

[yan_]

No. I want manipulate an image pixel by pixel.
Somethig like this example :
"http://doc.qt.nokia.com/4.7-snapshot/script-context2d.html":http://doc.qt.nokia.com/4.7-snapshot/script-context2d.html

Directly with QML.

[edit: fixed hyperlink / $chetankjain ]

[mbrasser]

Hi,

Pixel-level manipulations from QML aren't possible with any of the elements shipped in 4.7. You could try writing your own element that does this (the "Writing QML extensions with C++":http://doc.qt.nokia.com/4.7-snapshot/qml-extending-tutorial-index.html tutorial gives a good overview of this), or have a play with the (possibly out of date) painter element at "http://gitorious.org/qml-painterplugin":http://gitorious.org/qml-painterplugin.

Regards,
Michael

[yan_]

Thank for information.

I test a funny possibility with WebView and it's evaluateJavaScript method to manipulate html5 canvas in QML :D
It's work but code is not fully QML and i don't find how de-activate WebView right mouse key.

qml-painterplugin could be very interesting.

[Jens]

I tried out something similar, but use a html5 context directly in QML without using a webview.

You can try it out here:
"http://gitorious.org/qmlcanvas/qmlcanvas":http://gitorious.org/qmlcanvas/qmlcanvas

[edit: fixed hyperlink / $chetankjain]

[yan_]

Your example are very impressive !!!!

If i understand you code, you create an object which propose html5 canva interface and use it to draw.

You use Context2D example?

[Jens]

Thanks. Yes I used that as a starting point. I have a different approach too, one that doesn't require a paint method but can give you access to the context object from anywhere, like in html5. But I think this onPaint signal is a simpler use case.

[yan_]

Interesing feature could be capability :

• to use context in a thread with WorkerScript éléments.
• to redraw on last paint

[yan_]

I've modified context2D from your code and i make 2 new examples with chromeExperience example code. I think you will be interested ^^
"qmlcanvas-modified":http://ftp-developpez.com/yan-verdavaine/qml-canvas/qmlcanvas-modified.7z

[Jens]

yah_: really cool! I want some more examples showing mixing qml and canvas though and not just show pure javascript apps.

I modified the canvas so its possible (but less optimal) to paint outside the paintEvent now so you may have to do a few changes. Now that I get contributions and some attention within Nokia I think I will re-host my example to allow for accepting contributions and perhaps keep the examples in a separate repository. That way you can hopefully assign copyright and I can merge your changes upstream if you are interested?

[yan_]

[quote author="Jens" date="1283848465"]yah_: really cool! I want some more examples showing mixing qml and canvas though and not just show pure javascript apps.[/quote]
Few other chrome example could be adapted from "chromeexperiments":http://www.chromeexperiments.com/
like "plasmatree":http://www.chromeexperiments.com/detail/plasmatree/

[quote author="Jens" date="1283848465"]That way you can hopefully assign copyright and I can merge your changes upstream if you are interested?[/quote]
You can get changes of course. But it must be cleaned (i do it with an axe ^^).
I'll begin a qml plugin for "QExtend":http://gitorious.com/qextend#more lib and i'll begin with Context2D too.

With last result, create HTML5 canvas api to qml is a very powerful feature.

It's interested to see that QPainter and HTML5 canvas api are very similare

[Jens]

If I create an official Qt Labs repository the project might end up in Qt itself just like Rectangle and Text elements. If you are interested in cleaning up the patch and submitting merge requests after that let me know and I'll send you the new link once its available.

[yan_]

I begin plugin for QExtend. Result are really cool. If you want "look video":http://www.developpez.net/forums/d906429-2/c-cpp/bibliotheques/qt/qextend-sortie-v0-0-1-a/#post5457024

If you are intrested, i've add a global Object from plugin which give setTimeout and setInterval function. So plamaTree example work with very small change :D

You can get code with svn on "http://subversion.developpez.com/projets/qextend/branches/dev":http://subversion.developpez.com/projets/qextend/branches/dev

[quote]If I create an official Qt Labs repository the project might end up in Qt itself just like Rectangle and Text elements. If you are interested in cleaning up the patch and submitting merge requests after that let me know and I’ll send you the new link once its available.[/quote]
When our dev become mature, merge our version could be very interesting.

[edit: fixed hyperlink / $chetankjain]

[Jens]

Hey I wanted to let you know that I now have an official Qt repository for my qmlcanvas.
It would be great if you posted merge requests for the features you added. Otherwise I will have to duplicate these efforts. This way they can become part of the official Qt. I also started working on an initial test framework so we can start work towards stability.

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

[edit: fixed hyperlink / $chetankjain]

[yan_]

If i found time, i'll help you. But actually it's just for fun. It's to study qml and i'm not sure canvas api interest people. Anymore, i write another plugin with another approach with a begin of webGl api support.
I think it's better to develop different approach and merge later.

"If you want look new Video":http://www.developpez.net/forums/d906429-2/c-cpp/bibliotheques/qt/qextend-sortie-v0-0-1-a/#post5459209