Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Qt for WebAssembly widget example gone



  • So I waited for (https://blog.qt.io/blog/2018/11/19/getting-started-qt-webassembly/, etc.) with some excitement. Now that I've read some more, I think I'm less hopeful...!

    [One observation: if you want it to take off, you might consider creating a dedicated sub-forum here?]

    My question: on pages like https://blog.qt.io/blog/2018/05/22/qt-for-webassembly/ and the main examples reference page https://blog.qt.io/blog/2018/05/22/qt-for-webassembly-examples/, we are referred to the TextEdit example, showing how to use widgets with Qt for WebAssembly. The link given is: http://example.qt.io/qt-webassembly/widgets/richtext/textedit/textedit.html.

    But, now at least, that redirects to the generic https://www.qt.io/qt-examples-for-webassembly. And I see no sign there of a text edit, nor any widgets. Anyone know where or why this has gone?


  • Moderators

    That's a question for Qt Company. Last time I checked (about 2 weeks ago), the text edit example was still online. Apparently they have changed the page but not the documentation.

    Anyway, if you want to try WebAssembly out, you can still do it, no problem there. It works. And the showcase page does contain examples, just not the ones listed in the docs.



  • @sierdzio
    Thanks for answering.

    It's just that I wanted to look at an example of widgets -> WebAssembly specifically, and that's just what (only) that example was offering! :( Do you happen to know a link to some other widgets example? One would have thought that the Qt example would still be around somewhere, but I haven't spotted it on the web.


  • Moderators

    I know it's not the best solution but you can build any Qt Widgets app (including any of the examples) with Qt for WebAssembly and see for yourself. I don't know of any other place hosting these examples openly.


  • Moderators


  • Moderators

    Hey, it even works :D Slower than original, but good nonetheless.



  • @j-hilk
    Thank you! I did wonder if wbm would have it. But I'm always unsure about using that, if I'm not mistaken (I probably am) it sometimes says you have to pay/subscribe depending on what you want to go back to(?)

    I had actually come across that page in my searches elsewhere. But it was not what I expected. Read on....

    @sierdzio
    OK, both of you, please. I think I'm not understanding. I didn't want to see a working demo of a text editor under WASM, I wanted to just look through the source code used to achieve it. (That's really all I'm interested it atm, it's not that I want to play around with WASM, I want to see how you're supposed to code for it.)

    Bearing in mind I'm totally new to this stuff. I assume you cannot just chuck an unchanged Qt widgets program at it, there are way too many differences between a desktop GUI vs a web one to make that possible. It would be nice if you could, but I don't see it. I assume you have to somehow redesign to begin to make it acceptable. That's why I just want to see what a "widget" example like a text editor would look like in code.

    Or, have I got the wrong idea...??


  • Lifetime Qt Champion

    @jonb
    Ohh, i was under the impression that it would run Qt apps unmodified
    like a new platform. The biggest limitation being no threads.
    Exciting :)


  • Moderators

    @jonb said in Qt for WebAssembly widget example gone:

    Bearing in mind I'm totally new to this stuff. I assume you cannot just chuck an unchanged Qt widgets program at it, there are way too many differences between a desktop GUI vs a web one to make that possible. It would be nice if you could, but I don't see it. I assume you have to somehow redesign to begin to make it acceptable. That's why I just want to see what a "widget" example like a text editor would look like in code.

    Your assumption is wrong. Apps "just work" in Qt for WebAssembly, with no code changes necessary (as long as you keep limitations in mind). Threads work (in Qt 5.13 and updated WASM compiler). I'm not repeating that after somebody else, I've checked myself :-) (although, I have to admit - the check was done with a rather simple app)

    The code for TextEdit example is here.


  • Moderators

    @jonb said in Qt for WebAssembly widget example gone:

    Or, have I got the wrong idea...??

    yes you have,
    you compile your application and upload your binary to your Webserver

    what previously was a Window on the desktop is now a tab in your browser

    magic!



  • @J-Hilk , @sierdzio
    Thanks both. So the text editor example is simply the source code for the text editor for desktop which Qt docs may have given elsewhere?

    But it can't really work, can it? :) There are too many differences. For example, there must be, say, events/signals available in desktop which just don't have an equivalent on a web page? Or, say, keyboard handling events. Or window resizing stuff.

    In my reading yesterday I think I gathered that widgets etc. are not implemented via equivalent-ish HTML. Instead WASM just uses canvas, drawing, mouse move events. No HTML, no DOM. With all that implies (e.g. relatively slow, big, no accessibility, etc.) Is that fundamentally correct?


  • Moderators

    @jonb said in Qt for WebAssembly widget example gone:

    @J-Hilk , @sierdzio
    Thanks both. So the text editor example is simply the source code for the text editor for desktop which Qt docs may have given elsewhere?

    But it can't really work, can it? :) There are too many differences. For example, there must be, say, events/signals available in desktop which just don't have an equivalent on a web page? Or, say, keyboard handling events. Or window resizing stuff.

    I don't understand why you claim that. It does work. So it also can work. It's not a hypothetical situation - the platform is already implemented.

    Window resizing - no problem. If you resize your web browser, the Qt app gets a window resize event. It's same story as on Android and iPhone - there is no window as such, but that does not prevent Qt from understanding the screen surface as if it was a window (well I'm simplifying greatly here).

    Keyboard handling - it's supported. Probably not all shortcuts will work, I don't know, but basic keyboard operation is there (the text editor works, after all).

    there must be, say, events/signals available in desktop which just don't have an equivalent on a web page

    Yes there are some, see limitations page I linked before.

    File system access is heavily restricted, for example - for security reasons.

    In my reading yesterday I think I gathered that widgets etc. are not implemented via equivalent-ish HTML. Instead WASM just uses canvas, drawing, mouse move events. No HTML, no DOM.

    Yes there is no HTML involved, the WebAssembly binary is executed by your web browser. This is how WebAssembly works, this is no "Qt magic".

    With all that implies (e.g. relatively slow, big, no accessibility, etc.) Is that fundamentally correct?

    WebAssembly's sole purpose is to run fast. This is the number one goal of that project in the first place. The binary is run in browser, more or less directly on your CPU, without the need to parse JS, HTML and CSS data.



  • @sierdzio
    OK, it's beginning to come together now.

    Window resizing - no problem. If you resize your web browser, the Qt app gets a window resize event.

    No, I meant: my Qt app resizes (in code), say, its main window to be bigger than it started out at. If it's in a browser window, unless I am mistaken, you cannot tell the browser to make its overall page/window bigger. You may be able to make the "page" bigger, and the browser may show that by introducing scroll bars in its existing overall window size. But that's not the same thing, and what I meant by "it can't really work" (depending on your interpretation, it's just a point I'm making trying to understand).

    Keyboard handling - it's supported. Probably not all shortcuts will work,

    Again, that's what I mean by "it can't really work". So for example if you define a shortcut key like that the implementation will have to ignore it. Does that matter to your Qt app? Maybe, maybe not....

    WebAssembly's sole purpose is to run fast. This is the number one goal of that project in the first place.

    Yes, where the code is "back-end". Sorting or whatever I'm sure is great. But from what I saw yesterday (don't have the link to hand), people were saying that using canvas drawing etc. means the UI stuff runs a lot slower and takes a lot more CPU than an HTML/JS web page. And they said mouse movement/tracking was a killer compared to HTML/JS/native Qt. And there is no accessibility (e.g. screen reader). This is why I was interested in understanding Qt widget stuff for WASM, as opposed to Qt back-end processing, which I don't doubt would be fine.

    Last 2 questions (promise!):

    1. I understand about limitations like no local files, no sub-processes. What about MySQL database access via the Qt classes? Do I assume you cannot have your code access SQL db from browser?

    2. The app I would like to have running in browser is, unfortunately, written with Python/PyQt. I believe I have seen WASM would require a C++ app (or a couple of other compiled languages), at least at present? Changing to PySide2 would not help, I'd have to go native C++?

    Many thanks!


  • Moderators

    @jonb said in Qt for WebAssembly widget example gone:

    [...]
    Again, that's what I mean by "it can't really work". So for example if you define a shortcut key like that the implementation will have to ignore it. Does that matter to your Qt app? Maybe, maybe not....

    OK it's clear now, thanks. Yes I guess you're right about window resizing and keyboard handling.

    WebAssembly's sole purpose is to run fast. This is the number one goal of that project in the first place.

    Yes, where the code is "back-end". Sorting or whatever I'm sure is great. But from what I saw yesterday (don't have the link to hand), people were saying that using canvas drawing etc. means the UI stuff runs a lot slower and takes a lot more CPU than an HTML/JS web page. And they said mouse movement/tracking was a killer compared to HTML/JS/native Qt. And there is no accessibility (e.g. screen reader). This is why I was interested in understanding Qt widget stuff for WASM, as opposed to Qt back-end processing, which I don't doubt would be fine.

    I have not tested any heavy app, so it's hard for me to comment on that. But what I did notice is that Qt for WebAssembly has got significantly faster since the early Technology Preview was launched. Initially even loading the app took a long time but now it is blazing fast. So perhaps it is important to check when such comments were written - if before Qt 5.13 and newest emscripten releases, they are likely not true anymore. But as said - I'm only guessing here.

    Last 2 questions (promise!):

    1. I understand about limitations like no local files, no sub-processes. What about MySQL database access via the Qt classes? Do I assume you cannot have your code access SQL db from browser?

    I don't know. But since networking is allowed, you may have some luck connecting to a DB via HTTP/HTTPS.

    If access to local files works (I've tested only with QSettings and that failed, but maybe QFile with a proper path will work), then getting SQLite to work should be possible, too.

    1. The app I would like to have running in browser is, unfortunately, written with Python/PyQt. I believe I have seen WASM would require a C++ app (or a couple of other compiled languages), at least at present? Changing to PySide2 would not help, I'd have to go native C++?

    Again, no idea. I think you would have to ship Python inside the WASM binary and then run it somehow... tricky.



  • @sierdzio
    Thank you for answering all my questions.

    I believe I read yesterday that WASM will/might support further languages, such as Python, in time.

    What we have now is a (Python) Qt widgets app, with MySQL database access to either local machine MySQL server or shared on LAN network.

    What we would like is a web app instead, probably with MySQL server on web server (LAN, Internet).

    I am (only too) well aware of the amount of rewrite needed to move a desktop app to a web one! :( Possibly being able to retain the complete UI as written in Qt could be an enormous time-saver, provided it works acceptably. The WASM approach of having the app effectively run in the browser, rather than running it on web server and emitting HTML + JS pages as I would have expected to have to do, is indeed interesting.

    It's not going to be a goer right now, as I'm pretty sure Python is not going to run with WASM today. But you have given me some explanations and some things to consider. The potential of a UI app running in browser from code written with Qt widgets could be very interesting in time...!

    I shall close this thread now, thanks to all for observations.



  • There are also these examples offering the full range of Qt examples.
    https://s3.eu-west-2.amazonaws.com/wasm-qt-examples/last/index.html



  • @jonb said in Qt for WebAssembly widget example gone:

    Last 2 questions (promise!):

    1. I understand about limitations like no local files, no sub-processes. What about MySQL database access via the Qt classes? Do I assume you cannot have your code access SQL db from browser?

    Not at this point. Although someone has now ported sqlite to wasm, which would be the first step.



  • @jonb said in Qt for WebAssembly widget example gone:

    But, now at least, that redirects to the generic https://www.qt.io/qt-examples-for-webassembly. And I see no sign there of a text edit, nor any widgets. Anyone know where or why this has gone?

    They are still there, at the bottom of the page under the heading 'Demos & Examples'



  • @jonb said in Qt for WebAssembly widget example gone:

    OK, both of you, please. I think I'm not understanding. I didn't want to see a working demo of a text editor under WASM, I wanted to just look through the source code used to achieve it. (That's really all I'm interested it atm, it's not that I want to play around with WASM, I want to see how you're supposed to code for it.)
    Bearing in mind I'm totally new to this stuff. I assume you cannot just chuck an unchanged Qt widgets program at it, there are way too many differences between a desktop GUI vs a web one to make that possible. It would be nice if you could, but I don't see it. I assume you have to somehow redesign to begin to make it acceptable. That's why I just want to see what a "widget" example like a text editor would look like in code.

    Actually, we try hard to allow Qt apps to work with just a simple recompile, like many other platforms. There are known limitations with the WebAssembly platform.



  • @lorn-potter
    Thank you for your comments.

    There are also these examples offering the full range of Qt examples.
    https://s3.eu-west-2.amazonaws.com/wasm-qt-examples/last/index.html

    That is useful.

    But, now at least, that redirects to the generic https://www.qt.io/qt-examples-for-webassembly. And I see no sign there of a text edit, nor any widgets. Anyone know where or why this has gone?

    They are still there, at the bottom of the page under the heading 'Demos & Examples'

    There are half a dozen examples there, but as I said the textedit/widgets one is not among those. Have a look --- maybe text edit or a widgets example should be added there.

    1.I understand about limitations like no local files, no sub-processes. What about MySQL database access via the Qt classes? Do I assume you cannot have your code access SQL db from browser?

    Not at this point. Although someone has now ported sqlite to wasm, which would be the first step.

    That is a showstopper for me (no MySQL), but I will watch for future expansions.

    I see from your strap-line that you are a senior developer on QtWebAssembly. Thank you for your efforts! It is an interesting technology. For my sins I have spent many years writing using HTML + CSS + JS. Not always as simple as the desktop-type approach. The web assembly client-side approach looks a radical alternative, though the no-server-side and no HTML etc. brings a different set of limitations. I believe I am correct in saying that WASM implements all the (widget) examples via HTML canvas instead of HTML page elements, which is understandable but possibly problematic. I gather than the big boys like Google are supposed to be putting their weight behind WASM, it will be intriguing to see whether future stuff moves over to it....



  • @jonb
    To answer your original question, the textedit example was probably removed from the wasm examples page, because it used an outdated and obsolete version of the pre-release webassembly platform (5.11), which has more issues.

    Yes, I think webassembly is going to be big. There are issues that need to be worked out - like pthread (relies on SharedArrayBuffer) support is still experimental.


Log in to reply