Friday, December 21, 2012

Quickie - QtGui.js - Now Even Liverer :)

Another quick update to my series of blogs about trying to get Qt ported over to the wonderful Emscripten, so that a Qt + C++ app can be compiled to Javascript and HTML5, and so run in a browser.

When last we met, I was having a few issues with QGraphicsView, which I eventually pinned down to Emscripten's occasional mishandling of combinations of doubles and 64-bit ints. I submitted a bug report, and received a lightning-fast fix, so now QGraphicsView seems to be working perfectly :)

Another problematic issue was with older versions of Chromium often "freezing" for long periods of time (accompanied by a large spike in memory consumption), which I hypothesised was due to the large amount of local variables declared in certain methods. As a result, I forked out some of Emscripten's nice parallel-optimisation code and wrote a few optimisations that worked around the issue by using Emscripten's (currently disabled upstream) "registerize" pass plus a bit of code that "tucks" variables into the smallest block where they are used. This doesn't fix the problem, but it does make it much, much less severe (i.e. freezes are less frequent, last for a shorter time, and consume less memory). Bleeding edge Chrome suffers much less from this issue, as well as being much faster and memory-efficient when crunching through piles of Javascript, so I recommend to use that with the demos if you can :)

A third issue was with the sheer size of the resulting Javascript produced (~34MB or so). Closure would have reduced this considerably, but unfortunately was buggy with emscripten-qt and always generated broken code :( So I've added a very simple, brute-force global name-mangling system that reduces this to about 16MB (gzip'ing, as my webserver hopefully does when you request a demo in your browser, reduces this to ~4MB or so, which is not *too* bad). The mangling is hilariously slow and hackish (it currently takes about 10 minutes to run!) and really downright dangerous (I'm frankly amazed it works at all!) but it should be relatively easy to implement efficiently and safely after I return from my Christmas break :)

Here are a handful of demos: make sure you have plenty of RAM free if you are using anything other than a recent Chrome :)

Colliding Mice
Elastic Nodes
Embedded Dialogs

(Note that, sadly, Konqueror/ Rekonq won't work with emscripten-qt, presumably due to lack of typed array support(?))

The next things to work on are a small helper library for making asynchronous dialogs slightly more convenient to use, and less-sketchy keyboard support (you'll notice that you can't currently type any punctuation, and selecting text with the keyboard is not quite right). After that, I'll upload more of the Emscripten-ised Qt examples and then get back to working on Kate's Vi mode :)

I've added a bunch more documentation (plus a few more screenshots!) here.


Rsh said...

This is so totally awesome I can't even describe it. I am eager to see in what you can end up eventually.

MohammadReza Taesiri said...

this is so amazing!

sebsauer said...

You rock! :)

Anonymous said...

Not sure what liverer is. Think you were looking for livelier. (Sorry).

This looks like something I'll be using in the near future.

Unknown said...

I hope that you plan to add webgl support and sockets too.

SSJ said...


I'm increasingly tempted to do just that - and to maybe look into QML, too. Sockets are awkard due to the Same Origin Policy, but I suppose there are server-based solutions to this.