diff --git a/doc/tutorials/11-How-to-build-for-Wasm.asciidoc b/doc/tutorials/11-How-to-build-for-Wasm.asciidoc new file mode 100644 index 00000000..1a9e73c0 --- /dev/null +++ b/doc/tutorials/11-How-to-build-for-Wasm.asciidoc @@ -0,0 +1,51 @@ +--- +title: 10. Building QSkinny for WebAssembly (Wasm) +layout: docs +--- + +:doctitle: 10. Building QSkinny for WebAssembly (Wasm) +:notitle: + +== 10. Building QSkinny for WebAssembly (Wasm) + + +=== Build Qt for Wasm + +Build Qt for Wasm from source as described here: https://doc.qt.io/qt-6/wasm.html#building-qt-from-source ; The verified Qt version for QSkinny as of this writing was 6.6.0. It might also work to use a downloaded version of Qt for Wasm, but some additional libraries will need to be built. +After configuring Qt as described in the link above, for QSkinny you will need the qtbase, qtdeclarative, qtshadertools and qtsvg modules. +Assuming the Emscripten SDK in `~/dev/emscripten` and Qt in `~/dev/qt5`, Qt can be compiled the following way: + +[source] +.... +cd ~/dev/qt5 +source "~/dev/emsdk/emsdk_env.sh" +cmake --build . -t qtbase -t qtdeclarative -t qtshadertools -t qtsvg +.... + +This will install all required libs in `~/dev/qt5/qtbase/lib`. + + +=== Build QSkinny for Wasm + +With the Qt version from above QSkinny can be built for WAsm, assuming it has been checked out at `~/dev/qskinny`. Note the configuration option `BUILD_QSKDLL=OFF` for static + builds: + +[source] +.... +mkdir -p ~/dev/qskinny-wasm-build +source "~/dev/emsdk/emsdk_env.sh" +~/dev/qt5/qtbase/bin/qt-cmake -S ~/dev/qskinny -B ~/dev/qskinny-wasm-build -DBUILD_QSKDLL=OFF +.... + + +=== Run QSkinny for Wasm + +Qt creates the HTML wrappers automatically, so there is not much to do except letting Emscripten start the server and open our app in the browser: + +[source] +.... +/usr/bin/python3 ~/dev/emsdk/upstream/emscripten/emrun.py --browser firefox --port 30001 --no_emrun_detect ~/dev/qskinny-wasm-build/examples/bin/iotdashboard.html +.... + +.The IOT dashboard example in a browser +image::../images/iotdashboard-wasm.png[The IOT dashboard example in a browser] diff --git a/doc/tutorials/images/iotdashboard-wasm.png b/doc/tutorials/images/iotdashboard-wasm.png new file mode 100644 index 00000000..a7111e95 Binary files /dev/null and b/doc/tutorials/images/iotdashboard-wasm.png differ