Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Qt for WebAssembly widget example gone
QtWS25 Last Chance

Qt for WebAssembly widget example gone

Scheduled Pinned Locked Moved Solved General and Desktop
21 Posts 5 Posters 3.3k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • JonBJ Offline
    JonBJ Offline
    JonB
    wrote on last edited by JonB
    #1

    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?

    lorn.potterL 1 Reply Last reply
    0
    • sierdzioS Offline
      sierdzioS Offline
      sierdzio
      Moderators
      wrote on last edited by
      #2

      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.

      (Z(:^

      JonBJ 1 Reply Last reply
      2
      • sierdzioS sierdzio

        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.

        JonBJ Offline
        JonBJ Offline
        JonB
        wrote on last edited by
        #3

        @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.

        J.HilkJ 1 Reply Last reply
        0
        • sierdzioS Offline
          sierdzioS Offline
          sierdzio
          Moderators
          wrote on last edited by
          #4

          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.

          (Z(:^

          1 Reply Last reply
          1
          • JonBJ JonB

            @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.

            J.HilkJ Offline
            J.HilkJ Offline
            J.Hilk
            Moderators
            wrote on last edited by J.Hilk
            #5

            @jonb the wayback machine has a snapshot from January
            https://web.archive.org/web/20190125205052/http://example.qt.io/qt-webassembly/widgets/richtext/textedit/textedit.html

            maybe that helps you?


            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


            Q: What's that?
            A: It's blue light.
            Q: What does it do?
            A: It turns blue.

            JonBJ 1 Reply Last reply
            6
            • sierdzioS Offline
              sierdzioS Offline
              sierdzio
              Moderators
              wrote on last edited by
              #6

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

              (Z(:^

              1 Reply Last reply
              2
              • J.HilkJ J.Hilk

                @jonb the wayback machine has a snapshot from January
                https://web.archive.org/web/20190125205052/http://example.qt.io/qt-webassembly/widgets/richtext/textedit/textedit.html

                maybe that helps you?

                JonBJ Offline
                JonBJ Offline
                JonB
                wrote on last edited by
                #7

                @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...??

                mrjjM sierdzioS J.HilkJ lorn.potterL 4 Replies Last reply
                0
                • JonBJ JonB

                  @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...??

                  mrjjM Offline
                  mrjjM Offline
                  mrjj
                  Lifetime Qt Champion
                  wrote on last edited by
                  #8

                  @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 :)

                  1 Reply Last reply
                  0
                  • JonBJ JonB

                    @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...??

                    sierdzioS Offline
                    sierdzioS Offline
                    sierdzio
                    Moderators
                    wrote on last edited by sierdzio
                    #9

                    @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.

                    (Z(:^

                    1 Reply Last reply
                    5
                    • JonBJ JonB

                      @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...??

                      J.HilkJ Offline
                      J.HilkJ Offline
                      J.Hilk
                      Moderators
                      wrote on last edited by
                      #10

                      @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!


                      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                      Q: What's that?
                      A: It's blue light.
                      Q: What does it do?
                      A: It turns blue.

                      1 Reply Last reply
                      1
                      • JonBJ Offline
                        JonBJ Offline
                        JonB
                        wrote on last edited by JonB
                        #11

                        @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?

                        sierdzioS 1 Reply Last reply
                        0
                        • JonBJ JonB

                          @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?

                          sierdzioS Offline
                          sierdzioS Offline
                          sierdzio
                          Moderators
                          wrote on last edited by
                          #12

                          @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.

                          (Z(:^

                          JonBJ 1 Reply Last reply
                          4
                          • sierdzioS sierdzio

                            @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.

                            JonBJ Offline
                            JonBJ Offline
                            JonB
                            wrote on last edited by
                            #13

                            @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!

                            sierdzioS lorn.potterL 2 Replies Last reply
                            0
                            • JonBJ JonB

                              @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!

                              sierdzioS Offline
                              sierdzioS Offline
                              sierdzio
                              Moderators
                              wrote on last edited by
                              #14

                              @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.

                              (Z(:^

                              JonBJ 1 Reply Last reply
                              4
                              • sierdzioS sierdzio

                                @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.

                                JonBJ Offline
                                JonBJ Offline
                                JonB
                                wrote on last edited by
                                #15

                                @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.

                                1 Reply Last reply
                                1
                                • lorn.potterL Offline
                                  lorn.potterL Offline
                                  lorn.potter
                                  wrote on last edited by
                                  #16

                                  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

                                  Freelance Software Engineer, Platform Maintainer QtWebAssembly, Maintainer QtSensors
                                  Author, Hands-On Mobile and Embedded Development with Qt 5 http://bit.ly/HandsOnMobileEmbedded

                                  1 Reply Last reply
                                  5
                                  • JonBJ JonB

                                    @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!

                                    lorn.potterL Offline
                                    lorn.potterL Offline
                                    lorn.potter
                                    wrote on last edited by
                                    #17

                                    @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.

                                    Freelance Software Engineer, Platform Maintainer QtWebAssembly, Maintainer QtSensors
                                    Author, Hands-On Mobile and Embedded Development with Qt 5 http://bit.ly/HandsOnMobileEmbedded

                                    1 Reply Last reply
                                    3
                                    • JonBJ JonB

                                      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?

                                      lorn.potterL Offline
                                      lorn.potterL Offline
                                      lorn.potter
                                      wrote on last edited by
                                      #18

                                      @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'

                                      Freelance Software Engineer, Platform Maintainer QtWebAssembly, Maintainer QtSensors
                                      Author, Hands-On Mobile and Embedded Development with Qt 5 http://bit.ly/HandsOnMobileEmbedded

                                      1 Reply Last reply
                                      3
                                      • JonBJ JonB

                                        @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...??

                                        lorn.potterL Offline
                                        lorn.potterL Offline
                                        lorn.potter
                                        wrote on last edited by
                                        #19

                                        @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.

                                        Freelance Software Engineer, Platform Maintainer QtWebAssembly, Maintainer QtSensors
                                        Author, Hands-On Mobile and Embedded Development with Qt 5 http://bit.ly/HandsOnMobileEmbedded

                                        JonBJ 1 Reply Last reply
                                        5
                                        • lorn.potterL lorn.potter

                                          @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.

                                          JonBJ Offline
                                          JonBJ Offline
                                          JonB
                                          wrote on last edited by JonB
                                          #20

                                          @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....

                                          lorn.potterL 1 Reply Last reply
                                          0

                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Groups
                                          • Search
                                          • Get Qt Extensions
                                          • Unsolved