Skip to content

Qt for WebAssembly

Specific issues when using Qt for WebAssembly

455 Topics 1.8k Posts
  • WebGL: this extension has very low support on mobile devices

    Solved
    3
    0 Votes
    3 Posts
    1k Views
    8Observer88
    It is a Chrome issue. Read Botje's comments: https://stackoverflow.com/questions/77951574/webgl-this-extension-has-very-low-support-on-mobile-devices
  • Qt 6.6.1 WebAssembly: Triangle disappears when it was clicked

    Solved
    20
    0 Votes
    20 Posts
    2k Views
    8Observer88
    @8Observer8 said in Qt 6.6.1 WebAssebly: Triangle disappears when it was clicked: Color picking with glReadPixels works without problems on WebAssembly with QOpenGLWindow and QOpenGLWidget I had a problem with color picking on Android but it was solved here: https://forum.qt.io/post/787931
  • SQLite support on WebAssembly

    Unsolved
    2
    0 Votes
    2 Posts
    338 Views
    Christian EhrlicherC
    @Delphi251189 feel free to provide a patch for it.
  • The text is blurry

    Solved
    5
    0 Votes
    5 Posts
    788 Views
    GaoboG
    @JasonWong I have not found which option is the best, maybe we need to make a choice. Select the most clear option to use.
  • Can QML FileDialog Be Used to Select Upload File from Web Browser?

    Unsolved
    3
    0 Votes
    3 Posts
    1k Views
    P
    @stickabee Could you provide a more detailed implementation? Thank you :)
  • Backspace key does nothing in text inputs, only on Android

    Unsolved
    3
    2 Votes
    3 Posts
    462 Views
    JasonWongJ
    I think this issue is the similar as being unable to input Chinese characters. Currently, there are input issues when using Qt with WebAssembly. You can refer to this problem, which has seen no progress, T.T https://bugreports.qt.io/browse/QTBUG-107139
  • Failed to show GUI in WASM after JavaScript call

    Solved
    8
    0 Votes
    8 Posts
    775 Views
    8Observer88
    I wrote an example that play a sound using Web Audio API in Qt WebAssembly. It is a 2D sound but Web Audio API can play 3D sounds too. There are two buttons in this example: "Run" and "Play". The "Run" button must be pressed first and next the "Play" button must be pressed. You can run it by one click: https://replit.com/@8Observer8/play-audio-with-web-audio-api-qt6-cpp [image: 4a51a59f-1628-447c-af08-602dd4635207.png] main.cpp #include <QtWidgets/QApplication> #include <QtWidgets/QPushButton> #include <QtWidgets/QVBoxLayout> #include <QtWidgets/QWidget> #include <emscripten.h> EM_JS(void, call_init, (), { my_init(); }) EM_JS(void, call_run, (), { my_run(); }) EM_JS(void, call_play, (), { playSound(); }) class Widget : public QWidget { Q_OBJECT public: Widget() { call_init(); runButton = new QPushButton("Run"); playButton = new QPushButton("Play"); playButton->setEnabled(false); QVBoxLayout *vbox = new QVBoxLayout(); vbox->addWidget(runButton); vbox->addWidget(playButton); vbox->addStretch(); setLayout(vbox); connect(runButton, &QPushButton::pressed, this, &Widget::runButtonClick); connect(playButton, &QPushButton::pressed, this, &Widget::playButtonClick); } private slots: void runButtonClick() { call_run(); runButton->setEnabled(false); playButton->setEnabled(true); } void playButtonClick() { call_play(); } private: QPushButton *runButton; QPushButton *playButton; }; #include "main.moc" int main(int argc, char *argv[]) { QApplication a(argc, argv); Widget w; w.show(); return a.exec(); } my_script.js let audioContext, decideArrayBuffer, decideAudioBuffer; async function my_init() { console.log("init"); const decideResponse = await fetch("assets/sounds/decidemp3-14575.mp3"); decideArrayBuffer = await decideResponse.arrayBuffer(); } async function my_run() { console.log("my run"); audioContext = new window.AudioContext(); decideAudioBuffer = await audioContext.decodeAudioData(decideArrayBuffer); } function play(audioBuffer, isLoop = false) { const source = audioContext.createBufferSource(); source.buffer = audioBuffer; source.loop = isLoop; const gain = audioContext.createGain(); source.connect(gain).connect(audioContext.destination); gain.gain.value = 0.3; source.start(); return source; } function playSound() { play(decideAudioBuffer); }
  • Qt 6.6.1 WebAssembly. Background color of parent window is changed to black

    Unsolved
    6
    0 Votes
    6 Posts
    686 Views
    A
    @8Observer8 Thank you for your response. I'll keep an eye on the bug report.
  • Qt 6.6.1 WebAssembly Error. WebGL: INVALID_ENUM: bindFramebuffer: invalid target

    Unsolved
    7
    0 Votes
    7 Posts
    862 Views
    8Observer88
    I found a temporary solution that is good for me for now. I just deleted the sampling: OpenGLWidget() { // QSurfaceFormat surfaceFormat; // surfaceFormat.setMajorVersion(3); // surfaceFormat.setMinorVersion(0); // surfaceFormat.setSamples(4); // setFormat(surfaceFormat); } In this case I don't need to use GL_DRAW_FRAMEBUFFER and GL_READ_FRAMEBUFFER to read a pixel color using glReadPixels(): void paintGL() override { glClear(GL_COLOR_BUFFER_BIT); // // Set draw buffer to be fbo. Read buffer is already the default one // glBindFramebuffer(GL_DRAW_FRAMEBUFFER, m_fbo->handle()); // // Blit from the default MSAA buffer to non-MSAA fbo // glBlitFramebuffer(0, 0, m_fbo->width(), m_fbo->height(), // 0, 0, m_fbo->width(), m_fbo->height(), // GL_COLOR_BUFFER_BIT, GL_NEAREST); // glBindFramebuffer(GL_DRAW_FRAMEBUFFER, context()->defaultFramebufferObject()); // // Set read buffer // glBindFramebuffer(GL_READ_FRAMEBUFFER, m_fbo->handle()); // Read the pixel GLubyte pixel[4]; glReadPixels(0, 0, 1, 1, GL_RGBA, GL_UNSIGNED_BYTE, pixel); // Set read buffer back to default // glBindBuffer(GL_READ_FRAMEBUFFER, context()->defaultFramebufferObject()); qDebug() << pixel[0] / 255.f << pixel[1] / 255.f << pixel[2] / 255.f; emit showPixelColorSignal(QVector3D(pixel[0] / 255.f, pixel[1] / 255.f, pixel[2] / 255.f)); } My applications works correctly on Android and WebAssembly. It read a pixel with green color (0, 1, 0): Android: [image: 2a901607-00d0-46ad-9e70-11ffbd646ee7.png] WebAssembly: [image: 521de6ae-1910-4ccb-9aa9-ef80d7570e67.png]
  • Where is the em++ compiler located? How to install it?

    Solved
    4
    3 Votes
    4 Posts
    802 Views
    8Observer88
    I deleted the C:\emsdk folder and I deleted the C:\emsdk from Path. I run a new CMD. Typed this command: git clone https://github.com/emscripten-core/emsdk.git And this one: "emsdk.bat" install 3.1.37 The emsdk was installed without problems: C:\emsdk>"emsdk.bat" install 3.1.37 Resolving SDK version '3.1.37' to 'sdk-releases-7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-64bit' Installing SDK 'sdk-releases-7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-64bit'.. Installing tool 'node-16.20.0-64bit'.. Downloading: C:/emsdk/downloads/node-v16.20.0-win-x64.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/node-v16.20.0-win-x64.zip, 28623474 Bytes Unpacking 'C:/emsdk/downloads/node-v16.20.0-win-x64.zip' to 'C:/emsdk/node/16.20.0_64bit' Done installing tool 'node-16.20.0-64bit'. Installing tool 'python-3.9.2-nuget-64bit'.. Downloading: C:/emsdk/downloads/python-3.9.2-4-amd64+pywin32.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/python-3.9.2-4-amd64+pywin32.zip, 14413267 Bytes Unpacking 'C:/emsdk/downloads/python-3.9.2-4-amd64+pywin32.zip' to 'C:/emsdk/python/3.9.2-nuget_64bit' Done installing tool 'python-3.9.2-nuget-64bit'. Installing tool 'java-8.152-64bit'.. Downloading: C:/emsdk/downloads/portable_jre_8_update_152_64bit.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/portable_jre_8_update_152_64bit.zip, 69241499 Bytes Unpacking 'C:/emsdk/downloads/portable_jre_8_update_152_64bit.zip' to 'C:/emsdk/java/8.152_64bit' Done installing tool 'java-8.152-64bit'. Installing tool 'releases-7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-64bit'.. Downloading: C:/emsdk/downloads/7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-wasm-binaries.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/win/7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2/wasm-binaries.zip, 419522512 Bytes Unpacking 'C:/emsdk/downloads/7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-wasm-binaries.zip' to 'C:/emsdk/upstream' Done installing tool 'releases-7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-64bit'. Done installing SDK 'sdk-releases-7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-64bit'. I activated the 3.1.37 version: "emsdk.bat" activate 3.1.37 I added the C:\emsdk path to Qt Creator here: Edit -> Preferences... -> Devices -> WebAssembly [image: c341bdbe-e480-4e20-bbec-330d98b85edc.png] I created a new project and it works! [image: 8bfbc3be-354e-4d22-b265-c6f8bc1e75e8.png] main.cpp #include <QtWidgets/QApplication> #include <QtWidgets/QWidget> #include <QtWidgets/QLabel> #include <QtWidgets/QVBoxLayout> class Widget : public QWidget { public: Widget() { QLabel *label = new QLabel("Hello, WebAssemlym, from Qt!"); QVBoxLayout *layout = new QVBoxLayout(); layout->addWidget(label); setLayout(layout); } }; int main(int argc, char *argv[]) { QApplication app(argc, argv); Widget w; w.show(); return app.exec(); } pro QT += core gui widgets CONFIG += c++17 SOURCES += \ main.cpp
  • Qt Widget for WASM and CMake command line..

    Unsolved
    11
    0 Votes
    11 Posts
    2k Views
    1
    @Mesrine i will try using linux and comment.. thanks.
  • using qtquick but see nothing on browser

    Unsolved
    3
    0 Votes
    3 Posts
    371 Views
    1
    @lorn-potter hi, my apologies for long time non responding... you know im Miguel Marambio, the one that have summit a bug report here: https://bugreports.qt.io/browse/QTBUG-119327 Thanks.
  • Widget can't move after set the windowFlag to Qt::Window

    Solved
    4
    0 Votes
    4 Posts
    473 Views
    GaoboG
    @jsulm thanks; If you want to show it as a window then do not set a parent. Under windows, it show as a window when i not set parent for form. but under web(browser), it doesn't show. why? What difference between Qt::window and Qt::widget? when i set Qt::Dialog to windowFlat, widget become moveable. why? and i set it to dialog and set parent, form can normally show and move. why?
  • How to enable WebAssembly debugging?

    Unsolved
    1
    0 Votes
    1 Posts
    231 Views
    No one has replied
  • zip binaries

    Unsolved
    5
    0 Votes
    5 Posts
    767 Views
    JasonWongJ
    Do not manually compress these files; you can leave it to Nginx to handle automatically. After adding these configurations to my Nginx conf file, automatic compression is enabled: gzip on; gzip_min_length 32k; gzip_buffers 4 16k; gzip_http_version 1.1; gzip_comp_level 2; gzip_types text/plain text/css text/xml application/xml application/json text/javascript application/javascript application/octet-stream; You can visit this address to see the compression effect. Open the F12 console in Chrome, and you will notice that the wasm file has been compressed. https://web.jasonserver.com:10035/JQClock/JQClock.html
  • This topic is deleted!

    Unsolved
    1
    0 Votes
    1 Posts
    10 Views
    No one has replied
  • Qt 6.4.1 WebAssembly - TextInput/TextField not receiving keyboard input

    Unsolved
    8
    0 Votes
    8 Posts
    2k Views
    V
    Just found here after tearing my hair out with this exact problem using Qt 6.5.1 It's there even in the LTS T_T
  • GTK issues with Webassembly builds ?

    Unsolved
    1
    0 Votes
    1 Posts
    380 Views
    No one has replied
  • Trying Webassembly. Where are these specific folders being specified ?

    Solved
    3
    0 Votes
    3 Posts
    330 Views
    G
    @JKSH Thank You !
  • WebAssembly - Qt 6.6.0 - Embind

    Unsolved
    2
    1 Votes
    2 Posts
    461 Views
    J
    I realized that I can easily get access to my JavascriptPublicInterface again, by slightly modifying the generated myapp.html : so from : async function init() { const spinner = document.querySelector('#qtspinner'); const screen = document.querySelector('#screen'); const status = document.querySelector('#qtstatus'); const showUi = (ui) => { [spinner, screen].forEach(element => element.style.display = 'none'); if (screen === ui) screen.style.position = 'default'; ui.style.display = 'block'; } try { showUi(spinner); status.innerHTML = 'Loading...'; const instance = await qtLoad({ I updated to : var instance = null async function init() { const spinner = document.querySelector('#qtspinner'); const screen = document.querySelector('#screen'); const status = document.querySelector('#qtstatus'); const showUi = (ui) => { [spinner, screen].forEach(element => element.style.display = 'none'); if (screen === ui) screen.style.position = 'default'; ui.style.display = 'block'; } try { showUi(spinner); status.innerHTML = 'Loading...'; instance = await qtLoad({ so now I can call instance.self().setMyProperty("something") .