Porting QML to JS/HTML5

qtnext · wrote on 9 Mar 2011, 20:15

and a signal slot system between qml on the client side and the server app done in Qt ... and it rocks :)

2beers · wrote on 14 Mar 2011, 16:05

I just test it. It's nice but you have a lot of work to do.

It would be nice if you can port my qml+javascript application to html5+javascript .

zanettea · wrote on 14 Mar 2011, 17:06

Yes, true! There is huge lot of work work to do ;-)

The small example posted is just an hack to prove to myself it is possible and valuable and to collect ideas and comments. Next step will be to organize the work and write a roadmap.

Useless to say that volunteers are so welcome!

pjoe · wrote on 5 May 2011, 11:44

Have you looked at backbone.js? They've got a lot of stuff about binding to property changes, that might be useful.

zanettea · wrote on 5 May 2011, 13:12

Not yet: it looks interesting, in particular the model view. As to property binding, I prefer my hand crafted solution since it is more close to QML behavior. In fact in QML you state that a (sink) property is binded to one or more other (source) properties. For example

QML: x: z+w
JS: x : new Binding(["z","w"],function(){return z+w;})

On the countrary backbone bindings let you bind a (source) property to other (sink) properties.

pjoe · wrote on 5 May 2011, 13:28

Would be nice if those binding dependencies (z,w in the example) could be calculated automatically, but guess that would require access to the JS parser. I wonder if somebody made a JS parser in JS, could be useful to automatically convert from QML

zanettea · wrote on 5 May 2011, 14:37

Yes, I agree with you and it is how is implemented the javascript core of the QML interpreter. As you suggest, my idea is to write a QML parser that generates the JS equivalent of the QML file, and I hope to write it in JS too.

lpaimen · wrote on 6 May 2011, 06:58

I've been coding QML engine for Javascript/browser, too. It currently has quite bizarre --though working-- binding and scoping model and some classes implemented partially, for demoing. Text, Rectangle, Image, MouseArea, Timer, SequentialAnimation, NumberAnimation, and their parent classes, to be exact.

I also started implementing QML parser on top of parser from UglifyJS (yes, there are JS parsers made with JS, see crockford too). It can now parse the most basic stuff and is very prone to infinite loops :P

Engine is bit ahead of parser currently, and to play with it, you can try feeding parse tree for it (think JSON while writing it). Parse tree is intermediate format between the parser and the engine. Bindings in tree can be made with QMLBinding. Currently works with Opera and Chrome. Firefox works almost but it doesn't count length of text (in Text element) correctly, should be easy to fix.

Developer testpad is available at http://lauri.paimen.info/pub/dev/qmlweb/test/testpad/testpad.html (works in opera and chrome). Source is minified, sorry. Please remember it's in alpha stage. You can try adding QML to textfield and parse&run it with "Run as QML" button. Alternatively, you can put parse tree to textfield and run it with "Run as parse tree", as the QML parser is not yet very advanced.

zanettea · wrote on 6 May 2011, 10:39

So wonderful! Exactly what I have in mind. Is it a public project? I would really like to contribute to it.

lpaimen · wrote on 6 May 2011, 12:28

It is a hobby project initiated by the other guy and mostly coded by me. We are idling at #qmlweb on ircnet. One of the targets is to publish an article of the effort, which we are on currently (the deadline is in 2 weeks, all too soon). Currently the sources are not publicly available.

lpaimen · wrote on 10 May 2011, 06:18

Yesterday (it's now morning in Finland) I added support for element methods as shown on example1.qml. It will take this week to finish the paper (the deadline is on Monday), after which I'm hoping to update the project to support Firefox, too...

zanettea · wrote on 10 May 2011, 07:49

Good morning! Nice to hear you will finalize the paper: I would be glad if could you send me a copy of it.
As to the project, are you going to open it to external contributions when the paper deadline is over? Since I am interested in the matter, I would like to know if I have to keep writing my own solution, or if I can help you on your code base. Obviously I would prefer the second option: I think it is stupid not to join our efforts.

lpaimen · wrote on 27 May 2011, 04:56

The paper is now done, I hope the reviewers like it.

Some other project news:

The project will soon be open to contributions. I'm still figuring out what is the right license for this. GPLv3 perhaps.
Firefox is now supported. There is still minor issue with calculating text height, which is approximated in FF.
New QML Viewer page, which simply runs the QML given to it. Essentially it is Testpad with cleaned up UI. The neat thing about web implementation is that you can stretch the render surface to fit your screen without affecting the QML app, making it easier to deploy QML apps to different resolutions on web.
I also made a presentation about the project. The slideset is actually a QML application (who needs powerpoint anyway), and as we now have QML Viewer, you can view the presentation with it at http://lauri.paimen.info/pub/dev/qmlweb/test/testpad/viewer.html#../presentation.qml . If you want, you can download the qml (and two images it uses) and run it in native Qt QML Viewer, too.
Most of development tests/examples are now converted to QML (from parse tree). The examples are listed on (redesigned) testpad at http://lauri.paimen.info/pub/dev/qmlweb/test/testpad/testpad.html

andre · wrote on 27 May 2011, 10:08

Quite impressive!
One small glitch that I noticed in your presentation, is that it seems to flicker at the beginning of a transition to the next or previous page.

lpaimen · wrote on 28 May 2011, 07:36

True.

Drawing, timing and animations were using independent timers resulting to rather undeterministic behavior. Now those all use tick from the engine, currently set to 25fps. AFAIK this is the approach of native QML engine, too. Animations now run "better" -- not faster as in fps, but faster as in real time/impression, as they now animate against the actual time elapsed and thus follow the duration given to them. Implementation also simplified a bit.

Syncronizing Timer with the 25fps (40ms) ticker may break "high-frequency" Timers expecting 60fps (16ms) resolution, but that is really an issue of QML Timer specification. And well, there's nothing stopping to make the ticker 60fps, just sed "s/fps=25;/fps=60;/" qtcore.js

lpaimen · wrote on 22 Jun 2011, 17:16

The weather in Finland has been so excellent that not much has happened to my effort lately.

Anyways, I created a gitorious project so feel free to check the code out at https://gitorious.org/qmlweb (we discussed with zanettea and decided not to use his repository).

qtnext · wrote on 26 Jun 2011, 18:47

it rocks !!! I hopes that it will evolve ... seems very promising !

Philius · wrote on 12 Aug 2011, 02:56

I wonder if this could be combined with QtGui in html5?

You can see a demo of it at

http://www.philipashmore.com/html5/timeline/

It's part "v3c-storyboard" (I couldn't call it "storyboard"
because of a name clash) in Sourceforge.

Comments welcome.

lpaimen · wrote on 12 Aug 2011, 09:29

Depends. This far I've managed without, as the elements have been rather simple. However, if/as it gets more complicated in the future, middle layer may pay off. And more Qt-like, the better.

I took a quick glance to the sources, and there was also Qt's signal-slot and event systems implemented. That's something I had on todo-list before rewriting binding code...

Philius · wrote on 12 Aug 2011, 22:25

Well, then sooner or later we're going to have to take this to the next level and get a bit more organized, so the following issues have to be addressed.

Where to host (I guess gitorious is the logical choice)
This should also include showcase and doc web pages.
What to call it/them: QtHtml5Qml, QtHtml5QtCore, QtHtml5QtGui
seem over the top - any better names?
I've namespaced everything under Qt, is that too much?
(eventually) enable QtWebkit/Qml to step in with "real" c++
implementations, even avoiding downloading the .js files whose
functionality it replaces.
Collaborators! I for one would love to hand over chunks of work
(like the layout classes for starters) for willing participants.
Implementation coverage charts / progress
Thinking of "Uno", it's nice to see what features are done,
todo, and tested as percentages. This means project planning,
tools and an interface.
Qt5 - should we aim for that exclusively?

And of course anything else you can think of, insert/replace above.

I've created a thread called "QtHtml5Script anyone?"

http://developer.qt.nokia.com/forums/viewthread/8726

as QtGui is something that might be of interest in its own right.

I think following the Qt hierarchy/model is the most sensible
approach.

Philip