Porting QML to JS/HTML5
-
Hello everybody,
I have recently started a project aimed at porting QML to JS/HTML5, so that a plain qml file can be rendered directly on a web browser.A small proof of concept is hosted here:
http://gitorious.org/porting-qt-qml-to-webDon't be shy! I'm looking for comments and support!
Bye,
Arrigo -
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!
-
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.
-
-
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.
-
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.
-
-
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. -
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
-
-
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
-
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).
-
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.
-
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...