52 lines
1.8 KiB
Plaintext
52 lines
1.8 KiB
Plaintext
---
|
|
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/qt6`, Qt can be compiled the following way:
|
|
|
|
[source]
|
|
....
|
|
cd ~/dev/qt6
|
|
source "~/dev/emsdk/emsdk_env.sh"
|
|
cmake --build . -t qtbase -t qtdeclarative -t qtshadertools -t qtsvg
|
|
....
|
|
|
|
This will install all required libs in `~/dev/qt6/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/qt6/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]
|