Qt for WebAssembly

Hi Saurabh,

Here are my answers:

There's no additional benefit in using QML instead of the default Node-RED ui except that it's QML :) Although, one recent benefit is that the Node-RED ui is built with Angular 1 which is not supported any more by Google so if there's anything that need to be fixed on the Angular side, that won't be done. The project qml_uibuilder_fe is just the front-end part without integrating it into Node-RED. I'm not sure where you got stuck, but please be aware that it's compiled to webassembly so you'll need to find a Qt guide, how to target wasm. These are the ones I used (since the project is based on Qt5):

https://doc.qt.io/qt-5/wasm.html
https://wiki.qt.io/Qt_for_WebAssembly

Once you manage to get the front-end compiled, you'll need to make it work with the Node-RED uibuilder node. Here's a complete node-red project that uses the previously mentioned front-end:

https://github.com/r0ller/qml_uibuilder_be

If you clone it, you should be able to start it and test the way I described it on the Node-RED forum. The integration part happens in uibuilder/uibuilder/src into which some of the generated front-end project files are copied. But only the generated qml_uibuilder.html file of the front-end project is modified and renamed to:

https://github.com/r0ller/qml_uibuilder_be/blob/main/uibuilder/uibuilder/src/index.html

I hope this helps :)

Best regards,
r0ller

Maybe you need to add #include <emscripten.h>

Yes, that script is for QSettings, but you could put /src in there as well.

@sitesv said in QApplication::processEvents() doesn't works:

Trying to do next:
C:\Qt\6.3.0>\Src\configure.bat -qt-host-path C:\Qt\6.3.0\wasm_32 -no-warnings-are-errors -platform wasm-emscripten -device-option QT_EMSCRIPTEN_ASYNCIFY=1 -prefix C:\Qt\6.3.0\wasm_32_asyncify
But there is an error message:
CMake Error at qtbase/cmake/QtToolHelpers,cmake:156 (message): The tool "Qt6::moc" was not found in the Qt6CoreTools package.

This Q was solved. There is an error in qt host parameter...

But problem with QEventLoop still exist...

Hello,
Thank you, I found out the issue.

The problem was with emscripten version. The qt6 requires 2.0.14, but i have installed latest version 3.x.x
now i have installed the correct version and it works fine.

Thank you.
Bhimesh G K

I am using 5.15.2

@just_a_developer said in Webassembly - Typescript support:

Would it be possible to have Typescript output with *.ts extension?

May I ask why you want this?

A *.js file can be integrated into TypeScript code A *.ts files cannot be used directly with HTML websites; they need to be compiled into *.js files first

If you need to access/ show your app via a web browser then WebEngine won't help you at all.

You can use WebAssembly or any different web framework (Cutelyst, Django, RoR etc.)

I had the same problem and the problem was the Qt host build haven't qtshadertools module.
I recompiled qtshadertools module in Qt host build and solved it

Problem solved.
I don't know why, but qt needs to be configured to work with emsdk. Tools->Options->Devices->WebAssembly ...and add root directory.

Short explanation is that the webassembly qpa plugin has no support for the input context. :)

https://bugreports.qt.io/browse/QTBUG-84392

With Qt 6.2, you can use qt-cmake to build examples, which does not have this issue.

This is already fixed in 6.2.3, and 6.3

windows.h is not part of the emscripten sdk, as it does not have the Javascript port of the windows API. You could port those parts to Qt or SDL.

Without having the faintest of clues about the actual problem, at a glance it looks to me like some missing/incomplete/bogus library support issue. I suggest you bring this to the mailing list, we don't get much traffic for wasm here.