Qt for WebAssembly

Success :)

To remove clipboard error, i disabled clipboard in source code :

void QWasmClipboard::initClipboardEvents() { if (!hasClipboardApi) return; /*val permissions = val::global("navigator")["permissions"]; val readPermissionsMap = val::object(); readPermissionsMap.set("name", val("clipboard-read")); permissions.call<val>("query", readPermissionsMap); val writePermissionsMap = val::object(); writePermissionsMap.set("name", val("clipboard-write")); permissions.call<val>("query", writePermissionsMap);*/ hasClipboardApi = false; }

Clipboard permission is not managed on my firefox (63.0.3 64bit).

And to the blank page, i used QQuickView with resizeMode at SizeRootObjectToView :

QQuickView* view = new QQuickView(); view->setResizeMode(QQuickView::SizeRootObjectToView); view->setSource(QUrl(QStringLiteral("qrc:///main.qml"))); view->show();

Thanks Lorn. It was easier to rebuild Qt at the end, and it solved the issue.

It needs to be served from a server. Luckily, there is a development tool in emscripten called emrun that you can use to serve the html file that gets generated when building.

@tham your browser has a variety of option for you to do so.

For chrome you could do one of the following:

CTRL-Shift-R Use incognito mode Use the dev settings to disable it- Use Chrome profiles to create a profile with all caching disabled

I don't know if there's a command or something the server could send to your browser to force a complete reload.

You can attach remote debugging and get some console output, which may help.

You might need to enable webassembly from chrome://flags

Ok, so I updated my OS, and rebuilt my sources using the configure options :

./configure -xplatform wasm-emscripten -nomake examples -prefix $PWD/qtbase -no-warnings-are-errors -device-option WASM_OBJECT_FILES=1 -feature-thread

And building my sources with the command:

gmake -j4 module-qtbase module-qtdeclarative module-qtquickcontrols2 module-qtwebsockets module-qtsvg module-qtcharts module-qtmqtt module-qtdatavisualization

It all compiles pretty well.

But know when I try to compile a thread example (Mandelbrot for example) the building gives my this:

Qt/5.13.1/Src/qtbase/plugins/imageformats/libqwebp.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5Widgets.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5Gui.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtlibpng.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtharfbuzz.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5Core.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtpcre2.a wasm-ld: error: 'atomics' feature is disallowed by main_7512882a.o, so --shared-memory must not be used wasm-ld: error: Target feature 'atomics' used in main.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in mandelbrotwidget.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in renderthread.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in mandelbrot.js_plugin_import.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in moc_mandelbrotwidget.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in moc_renderthread.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in main_ad242c24.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmintegration_b84335f2.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmwindow_9693253c.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmscreen_5d172ee8.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmfontdatabase_96baba53.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmeventtranslator_b3a8cbb6.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmeventdispatcher_d440ff3d.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmcompositor_943e9174.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmcursor_54ea64f6.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmopenglcontext_242faabc.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmtheme_592c2dd9.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmclipboard_11896fc1.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: Target feature 'atomics' used in qwasmservices_bcfe057a.o is disallowed by main_7512882a.o. Use --no-check-features to suppress. wasm-ld: error: too many errors emitted, stopping now (use -error-limit=0 to see all errors) shared:ERROR: '/Users/macbook/emsdks/emsdk/upstream/bin/wasm-ld -o /var/folders/l_/53ppf0452z7bcrt24txtwfq00000gn/T/emscripten_temp_chKBFJ/mandelbrot.wasm --allow-undefined --lto-O0 /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtfreetype.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtlibpng.a -L/Users/macbook/emsdks/emsdk/upstream/emscripten/system/local/lib main.o -L/Users/macbook/emsdks/emsdk/upstream/emscripten/system/lib mandelbrotwidget.o -L/Users/macbook/.emscripten_cache/wasm-obj renderthread.o mandelbrot.js_plugin_import.o moc_mandelbrotwidget.o moc_renderthread.o /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/platforms/libqwasm.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5EventDispatcherSupport.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5FontDatabaseSupport.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtfreetype.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5EglSupport.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqgif.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqicns.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqico.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqjpeg.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqtga.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqtiff.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqwbmp.a /Users/macbook/Qt/5.13.1/Src/qtbase/plugins/imageformats/libqwebp.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5Widgets.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5Gui.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtlibpng.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtharfbuzz.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libQt5Core.a /Users/macbook/Qt/5.13.1/Src/qtbase/lib/libqtpcre2.a /Users/macbook/.emscripten_cache/wasm-obj/libc-mt.a /Users/macbook/.emscripten_cache/wasm-obj/libcompiler_rt.a /Users/macbook/.emscripten_cache/wasm-obj/libc-wasm.a /Users/macbook/.emscripten_cache/wasm-obj/libc++-mt-noexcept.a /Users/macbook/.emscripten_cache/wasm-obj/libc++abi-mt-noexcept.a --whole-archive /Users/macbook/.emscripten_cache/wasm-obj/libembind-rtti.a --no-whole-archive /Users/macbook/.emscripten_cache/wasm-obj/libgl-mt-webgl2.a /Users/macbook/.emscripten_cache/wasm-obj/libdlmalloc-mt.a /Users/macbook/.emscripten_cache/wasm-obj/libpthread-mt.a /Users/macbook/.emscripten_cache/wasm-obj/libc_rt_wasm.a --import-memory --import-table --shared-memory -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr --export __wasm_call_ctors --export __data_end --export main --export malloc --export free --export setThrew --export __errno_location --export fflush --export emscripten_get_global_libc --export __pthread_tsd_run_dtors --export _register_pthread_ptr --export pthread_self --export __emscripten_pthread_data_constructor --export emscripten_futex_wake --export memalign --export emscripten_builtin_memalign --export realloc --export emscripten_builtin_free --export _get_environ --export _ZSt18uncaught_exceptionv --export emscripten_GetProcAddress --export emscripten_webgl_make_context_current --export emscripten_webgl_get_current_context --export strstr --export _get_tzname --export _get_daylight --export _get_timezone --export strlen -z stack-size=5242880 --initial-memory=1073741824 --no-entry --max-memory=1073741824 --global-base=1024' failed (1) gmake: *** [Makefile:320: mandelbrot.js] Error 1 10:58:20: The process "/usr/local/bin/gmake" exited with code 2. Error while building/deploying project mandelbrot (kit: Qt 5.13.1 (Src)) When executing step "Make" 10:58:20: Elapsed time: 00:58.

And I have no clue what it means.

Thanks.

Do anyone know workarounds to avoid this bug?Thanks

Okay, thanks!
I would prefer it to use less CPU in that case so I will open a bug after I tried it without multithreading.

Edit: Single threaded its fine (QTBUG-79953)

I was able to configure an out-of-source build, passing win32-msvc2019 as the argument for -platform, I got the output shown in this Gist: https://gist.github.com/DragonOsman/3c198095a61a7c38e2b019d3a964d416 . Notice the errors. I configured with this command:

C:/qt5/configure -static -release -opensource -feature-thread -qt-zlib -qt-libjpeg -qt-libpng -platform win32-msvc2019 -prefix C:/qt5/qtbase/win32-msvc2019

from a separate directory outside the Qt source directory and tried to build by running just nmake with no arguments. Any help is appreciated. Thanks in advance.

Edit: I tried again after re-configuring and this time not passing -static at all, but it still failed. Here's the build log from the recent try: https://gist.github.com/DragonOsman/c13d23ceca50244fb4a195f67d8e613d .

That is great news.
Thanks again.

The javascript FS functions we use for syncing the settings are asynchronous, so the c'tor will complete before the settings file has synced into the wasm sandbox filesystem.

That said, there is a change that I have found helps somewhat. If you build Qt yourself, you could try this:
https://codereview.qt-project.org/c/qt/qtbase/+/264618

You can use the prebuilt Qt for WebAssembly from the official Qt installer.

Anyway, since your compilation fails on Qt3D, try skipping that module.

I think the reason for the Assert Failure errors is that I forgot to delete the files in the qtbase folder after a given build attempt. I think that's fixed now, but I still have some issues in building Qt so I'll open a thread now.

I am not even sure QtWebGL works with emscripten/ QtWebAssembly

@DamienL
QFileDialog::getOpenFileContent is the workaround for accessing system/local files due to the javascript sandbox that webassembly lives in.

@Vadi2

Other than adding your libs with LIBS += -lblahblah
you shouldn't have to pass anything extra to Qt to get it to link statically, as QtWebAssembly does that anyway.

You could try QMAKE_LFLAGS += -static in your project if there is any issues, or it tries to link dynamically.

This thread can be closed.

For those who are looking for an answer:
Build Qt UI Application for .qmlproject file.

Attention: JS doesnt work within the project if the aim is to deploy with Qt design viewer

Firefox 70.0 works again.

@lorn-potter Compile the app with 1.38.43, got error messages

Fatal: error in validating output shared:ERROR: '/home/yyyy/Qt/3rdLibs/emsdk/fastcomp/bin/asm2wasm chinese_teacher.temp.asm.js --total-memory=16777216 --trap-mode=allow -O3 --mem-init=chinese_teacher.js.mem --mem-base=1024 --wasm-only -o chinese_teacher.wasm --mvp-features' failed (1) Makefile:316: recipe for target 'chinese_teacher.js' failed make: *** [chinese_teacher.js] Error 1

@Vadi2 said in Qt Creator webassembly: calendar widget doesn't compile:

I've tried compiling the calendar widget using the new webassembly support in Qt Creator 4.11 beta, and it took a really long while to print out the entire text representation of the program, and then failed with:

Its not supposed to print out that wasm text in that way. Something qtcreator is doing is breaking the build.
Building will still work when you do it from the commandline and using the Qt wasm binaries.