Thursday, November 29, 2012

Quickie - Qt*Gui*.js - It (Mostly) Lives :)

A quick update to my previous 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 had QtCore ported, and was starting to look at making QtGui work, using QWS. I quote:
Qt's QWS, at a cursory glance, seems like it does a *huge* amount of stuff for you, mainly leaving the tasks of flushing pixels to screen (using Canvas's "putImageData" method, in this case) and providing it with mouse and key events. I'm sure that there's a whole host of little devils lurking in the details, though :)
I was right on both counts - QWS is awesome, and fundamentally there is very little that one needs to do, but I certainly have been beset my devils along the way :) I'm pleased to report that I've (mostly) got it working, with some caveats.
Humble Beginnings
Slightly-Less-Humble Not-Quite Beginnings
That's More Like It

So now we have Qt's QGraphicsWidget based "chips" demo running in a browser, with only very minimal changes! But here come those caveats:

1) At certain angles and sizes, the "chips" will stop rendering entirely. I haven't begun to look into this yet, but the "embedded dialogs" has this even worse - none of the graphics scene is drawn at all :/ If I were to guess, I'd guess that there is some floating point issue cropping up somewhere.

2) Currently, Google's "Closure" compiler - which Emscripten optionally uses to compress the Javascript to acceptable levels - is generating incorrect code that will bomb out at runtime. When it works, I would estimate that it would compress the "chips" demo down from its massive 100MB(!) (unoptimised build) / 38MB (optimised build) to a less massive 12MB. Any gzip'ing done by the web server should then bring this down to a more svelte ~500k or so. Hopefully :) I haven't begun to try to diagnose this yet. Having "Closure" work correctly is nice beyond the bandwidth cost as it reduces the start-up time and (I think) the peak memory usage.

3) Much more annoyingly, and something that swallowed up all of the last two days - you will often get huge memory spikes in Chrome and long (~30s) hangs where the browser asks if you want to kill the page or not. It eventually recovers and drops the memory usage back down, but this is still unacceptable. This has had me completely baffled, to the point where I was engaged in "Magical Thinking" about what could be causing it - especially as it *doesn't* seems to occur with an unoptimised build (I think it is builds that have been run through "Relooper" in particular that are causing the problem, but will need to experiment further).

Using the Chrome profiling tools, it seems that the QStyle/ QPlastiqueStyle draw*Control methods always swallow up the lions share of the CPU during these episodes. Looking at the generated code, I see that there are over a thousand(!) local Javascript variables and "constants" (constant during that particular invocation, that is) being declared and initialised - indiscriminately - at the top of the method, and if this method is running several times in quick succession - as it is - it's possible that Chrome is quickly racking up memory usage then doing a lengthly garbage collection. This is all speculation on my part, though (there's that "magical thinking" again!) and needs further investigation.

A potentially worthwhile optimisation here would be to tuck some of these invocation-constants into the case statements where they are actually used, which should generally speed things up and reduce memory consumption. I'm still baffled as to why this doesn't happen when Relooper is used, though. Firefox doesn't seem to suffer from this, but is in general much slower.

So, in general, I'm cautiously optimistic about this. I won't be linking directly to demo pages due to their current massive sizes, but here are links to compress versions that you can play with. One is completely unoptimised and hence very slow, but doesn't hang Chrome, whereas the other is a lot faster but occasionally does :/

Chips Unoptimised

Chips Optimised

(zip file containing both - ~17MB download)

The actual patches to chips were tiny: just the standard job of making sure that all local variables in main() that need to persist for the lifetime of the app are allocated on the heap, not the stack (in Emscripten apps - well, Javascript in general, really - there is no possibility of local event processing loops like we use when we call QApplication::exec() - so QApplication::exec() will exit immediately, and then so will main())

I'm going to spend the rest of today a) resting and b) making a project page & documentation so that other people can play with it. If anyone has any questions in the meantime, please ask away :)

PS - it also no longer works with Konqueror or Rekonq, sadly: I thought I could get away with not using typed arrays - which Konqueror and Rekong don't appear to support(?) - but it looks Qt really does need them.

Update:I'm adding some documentation here, but it's still very incomplete and I'm too tired right now to add to it :)

Update2:Looks like my hunch about the hangs being due to large numbers of local variables might have been correct - I've "tucked" a few hundred local variables from some of the problematic functions into smaller scopes using a Vim macro, and, while it still hangs in Chromium from time to time, it is far less severe. Find it here!


SexyMimi said...

Alright. This is completely awesome.
However, I have to ask... what are these fancy html.gz document, and how does one open such documents ?

SSJ said...

Hi Mimi,

They are just gzip-compressed html documents - they must be downloaded and extracted before being run in a browser. Once I get all the optimisation and closure-compression working, they hopefully won't be necessary!

On Linux (and presumably, OS X), gzip-compressed documents can be extracted via e.g.

gunzip chip-demo-emscriptenqt-optimised.html.gz

On Windows, I'm not sure - wait a few minutes, and I'll add a zipped version :)

Anonymous said...

Good work! Very interesting!

But I can't make it work.
All I see are strange characters.

Any sugestions?

SSJ said...


What browser are you using, and did you uncompress the files first? Can you give a screenshot?

Anonymous said...


I'm using chromium on ubuntu (Version 22.0.1229.94 Ubuntu 12.10 (161065)) but i tested it with firefox and chrome in windows (sorry, can't get versions right now)

I did uncompress the files. See

Also tried with every file on the post.


SSJ said...


I'm not sure what's going on there, but the "strange characters" in the browser window in your screenshot are exactly what you see if you open the gz-compressed version in e.g. a text editor (the contents of your Kate editor is the correct, uncompressed html, though).

Anonymous said...

Exactly... seems that ark was messing things up and only renaming the file or it is twice compressed.

I uncompressed it once again and now it works.

P.S. Kate must be recongnizing the compression and automagically showing the contents.


for IT the said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training in India. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai