emscripten-qt

Note: (8/7/18) - emscripten-qt is an old project (dating from 2012) using an old version of Qt (4.8.7) and is no longer developed, so I don't recommend using it. Check out Lorn Potter's work on Qt5 for WebAssembly!

Demos

Name Screenshot Weight Notes
Kate emscripten-kate.png ULTRA-HEAVY A big chunk of kdelibs plus the Kate text editor running in Emscripten! All of the plugins are disabled, so this is a very 'cut-down' version, but still very powerful (even has a Vim mode!) A large download (~35MB) with lots of data to unpack, but once it starts running it runs pretty well.

This represents probably somewhere in the region of 1 million lines of C++ code ported, though not all of them are actually executed. Exposes a bug with Chrome, though: Chrome may not work at all with this version; if so, try the no icon version. Big thanks to Mozilla for sponsoring the work on this!

Update 13/3: Now with much faster startup, and Chrome shouldn't steal shortcuts anymore!
KTurtle emscripten-qt-kturtle-demo.png ULTRA-HEAVY As with Kate, this is a fairly heavy download, but is pretty light afterwards - except when the Turtle gets going! Again as with Kate, you may need to use the no icon version . You can export (and "download") your picture as an SVG. Check out those dock widgets!
wiggly emscripten-qt-wiggly-demo.png Medium Historically, this is usually the first demo to be tested when porting Qt to a new platform. With emscripten-qt, I've augmented it so that it serves as an example of how your emscripten-qt app can interact with the rest of the web page.
scribble emscripten-qt-scribble-demo.png Light Another example that has been augmented to show how your emscripten-qt app can interact with the rest of the webpage: this one let's you draw a picture inside Qt's "scribble" app, then actually download it as a .png! See also "textedit" which does the same, except with a rich-text document and a PDF!
raycasting emscripten-qt-raycasting-demo.png Heavy Not as heavyweight as you'd think, actually :)
affine emscripten-qt-affine-demo.png Heavy
pathstroke emscripten-qt-pathstroke-demo.png Heavy
collidingmice (asm.js) emscripten-qt-collidingmice-demo.png Heavy
textedit emscripten-qt-textedit-demo.png Medium Another example demonstrating the interaction of an emscripten-qt app and the rest of the webpage - edit your rich-text document, then "download" it as a .pdf! This was a quick and crude port, so many of the dialogs won't work. It also takes a little longer to download due to its usage of Truetype Fonts (~4MB of them)
dragdroprobot emscripten-qt-dragdroprobot-demo.png Heavy Colour in your faaabbulous robot! If you draw a head, there's only one place it can go! The cursor should change if you hover over somewhere where you cannot drop, but this doesn't seem to be supported in Chrome. Required very little porting effort, despite its use of drag-and-drop.
chip (asm.js) emscripten-qt-chip-demo.png Medium
animatedtiles emscripten-qt-animatedtiles-demo.png Heavy
embeddeddialogs emscripten-qt-embeddeddialogs-demo.png Heavy
elasticnodes emscripten-qt-elasticnodes-demo.png Medium
portedasteroids emscripten-qt-portedasteroids-demo.png Heavy
deform emscripten-qt-deform-demo.png Heavy
composition emscripten-qt-composition-demo.png Heavy
lighting emscripten-qt-lighting-demo.png Heavy
tetrix emscripten-qt-tetrix-demo.png Light
qstetrix emscripten-qt-qstetrix-demo.png Light As above, but this version is written in Javascript, executed by Emscripten-ised QScriptEngine which uses JavascriptCore. A C++ Javascript interpreter converted to Javascript!
blurpicker emscripten-qt-blurpicker-demo.png Heavy
chart emscripten-qt-chart-demo.png Light
diagramscene emscripten-qt-diagramscene-demo.png Light
easing emscripten-qt-easing-demo.png Medium
movingblocks emscripten-qt-movingblocks-demo.png Medium
puzzle emscripten-qt-puzzle-demo.png Light
appchooser emscripten-qt-appchooser-demo.png Medium
standarddialogs emscripten-qt-standarddialogs-demo.png Light One of the hardest demos to get working with emscripten, due to the large amount of synchronous dialogs that needed to be made asynchronous.
basicdrawing emscripten-qt-basicdrawing-demo.png Light
states emscripten-qt-states-demo.png Medium
stickman emscripten-qt-stickman-demo.png ULTRA-HEAVY The huge rendering area makes this one pretty punishing :) "J" makes your dude Jump; "D" dance; and "C" chill. Should he be unlucky enough to be hit by lightning, you'll need to refresh the page.
concentriccircles emscripten-qt-concentriccircles-demo.png Heavy
imagecomposition emscripten-qt-imagecomposition-demo.png Light
painterpaths emscripten-qt-painterpaths-demo.png Light
stylesheet emscripten-qt-stylesheet-demo.png Light
transformations emscripten-qt-transformations-demo.png Light

Contact

My email address is at the "etotheipiplusone" domain in the URL (without the vps2), and begins with "kdedevel".

You can also contact me on my blog, or over twitter. My linkedin profile is here.

emscripten-qt-wiggly-demo.png (74.8 KB) Simon St James, 01/14/2013 03:08 pm

emscripten-qt-portedasteroids-demo.png (99.9 KB) Simon St James, 01/14/2013 03:10 pm

emscripten-qt-animatedtiles-demo.png (221 KB) Simon St James, 01/14/2013 03:16 pm

emscripten-qt-appchooser-demo.png (93.5 KB) Simon St James, 01/14/2013 03:17 pm

emscripten-qt-blurpicker-demo.png (179 KB) Simon St James, 01/14/2013 03:19 pm

emscripten-qt-chart-demo.png (112 KB) Simon St James, 01/14/2013 03:23 pm

emscripten-qt-collidingmice-demo.png (146 KB) Simon St James, 01/14/2013 03:24 pm

emscripten-qt-easing-demo.png (85.3 KB) Simon St James, 01/14/2013 03:33 pm

emscripten-qt-diagramscene-demo.png (85.7 KB) Simon St James, 01/14/2013 03:37 pm

emscripten-qt-elasticnodes-demo.png (110 KB) Simon St James, 01/14/2013 03:58 pm

emscripten-qt-movingblocks-demo.png (72 KB) Simon St James, 01/14/2013 04:13 pm

emscripten-qt-puzzle-demo.png (286 KB) Simon St James, 01/14/2013 05:06 pm

emscripten-qt-scribble-demo.png (77.2 KB) Simon St James, 01/14/2013 05:12 pm

emscripten-qt-standarddialogs-demo.png (100 KB) Simon St James, 01/14/2013 05:37 pm

emscripten-qt-basicdrawing-demo.png (89.7 KB) Simon St James, 01/14/2013 06:42 pm

emscripten-qt-states-demo.png (110 KB) Simon St James, 01/14/2013 06:44 pm

emscripten-qt-stickman-demo.png (94.2 KB) Simon St James, 01/14/2013 06:50 pm

emscripten-qt-chip-demo.png (133 KB) Simon St James, 01/14/2013 06:55 pm

emscripten-qt-concentriccircles-demo.png (138 KB) Simon St James, 01/14/2013 07:06 pm

emscripten-qt-dragdroprobot-demo.png (99 KB) Simon St James, 01/14/2013 07:21 pm

emscripten-qt-embeddeddialogs-demo.png (188 KB) Simon St James, 01/14/2013 07:36 pm

emscripten-qt-imagecomposition-demo.png (173 KB) Simon St James, 01/14/2013 07:50 pm

emscripten-qt-lighting-demo.png (122 KB) Simon St James, 01/14/2013 08:08 pm

emscripten-qt-painterpaths-demo.png (120 KB) Simon St James, 01/14/2013 08:19 pm

emscripten-qt-stylesheet-demo.png (91.3 KB) Simon St James, 01/14/2013 08:47 pm

emscripten-qt-transformations-demo.png (88.5 KB) Simon St James, 01/14/2013 08:49 pm

emscripten-qt-affine-demo.png (140 KB) Simon St James, 01/15/2013 09:55 am

emscripten-qt-pathstroke-demo.png (119 KB) Simon St James, 01/15/2013 10:11 am

emscripten-qt-composition-demo.png (240 KB) Simon St James, 01/15/2013 10:32 am

emscripten-qt-deform-demo.png (146 KB) Simon St James, 01/15/2013 10:49 am

emscripten-qt-raycasting-demo.png (99.2 KB) Simon St James, 01/15/2013 11:04 am

emscripten-qt-textedit-demo.png (165 KB) Simon St James, 01/16/2013 05:36 pm

emscripten-qt-tetrix-demo.png (80.5 KB) Simon St James, 01/16/2013 07:47 pm

emscripten-kate.png (103 KB) Simon St James, 03/05/2013 04:00 pm

emscripten-qt-qstetrix-demo.png (88 KB) Simon St James, 03/06/2013 08:48 am

emscripten-qt-kturtle-demo.png (114 KB) Simon St James, 03/08/2013 10:19 pm