Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Porting QML to JS/HTML5

Porting QML to JS/HTML5

Scheduled Pinned Locked Moved QML and Qt Quick
40 Posts 8 Posters 46.1k 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.
  • P Offline
    P Offline
    Philius
    wrote on last edited by
    #22

    Sorry, when I said "uno", I really meant "mono" - see

    http://go-mono.com/status/status.aspx?reference=4.0&profile=4.0&assembly=System

    for some ideas.

    1 Reply Last reply
    0
    • P Offline
      P Offline
      Philius
      wrote on last edited by
      #23

      I created a project in sourceForge called "qtjs".

      http://sourceforge.net/projects/qtjs/

      I also created a thread with the same name here.

      1 Reply Last reply
      0
      • L Offline
        L Offline
        lpaimen
        wrote on last edited by
        #24

        Great!

        I'll probably borrow (rip off) some code there :P

        Just have to check that BSD and LGPLv3 are somewhat compatible.

        1 Reply Last reply
        0
        • P Offline
          P Offline
          Philius
          wrote on last edited by
          #25

          Hmm.

          I think that QtJs would be useful in it's own right.

          I would suggest keeping them separate, just like they are (will be?) in Qt5 for that very reason.

          Also, the code available will change a lot until I get the fakery^W implementation layer into a better state.

          I'm working on that now, so borrowing and then modifying the code would not be a once-off.

          I thought that if I wanted to include the QtScript generator examples then it would have to be GPL as well.

          http://code.google.com/p/qtscriptgenerator/

          I sent an email about this issue to Nokia and am awaiting feedback.

          Yep, I just realized that I've got to change all those LGPL lines to GPL in the source, thanks.

          Finally, do give me profs when you embed a copy of the software in your project, like you should for any GPL project.

          Oh, and did I mention, collaborators welcome?

          1 Reply Last reply
          0
          • L Offline
            L Offline
            lpaimen
            wrote on last edited by
            #26

            QtJs is useful on its own, but it also is useful for qml project. I've already forked UglifyJS code to the project to gain a Javascript parser. The preference (for bug fixes etc) is the original code/project, and keeping files borrowed to qml project somewhat up-to-date with the original.

            I am not a lawyer, but I don't see the GPL of qtscriptgenerator examples forcing you to use GPL on QtJs, as the examples can also be ran on qtscriptgenerator environment. Again, IANAL.

            I'm all for GPL. If you wish to enforce principles of RM Stallman, I guess the right license would be AGPLv3 with "any later version" and http://www.gnu.org/philosophy/javascript-trap.html clauses.

            1 Reply Last reply
            0
            • P Offline
              P Offline
              Philius
              wrote on last edited by
              #27

              "I am not a lawyer, but I don’t see the GPL of qtscriptgenerator examples forcing you to use GPL on QtJs, as the examples can also be ran on qtscriptgenerator environment. Again, IANAL."

              It will if I want to package them with QtJs as examples.

              1 Reply Last reply
              0
              • L Offline
                L Offline
                lpaimen
                wrote on last edited by
                #28

                Yeah, it's about packaging. Assuming QtJs works without the examples, you can deliver two packages with different licenses. I guess these can be even served from same svn repository as long as the file clearly indicates to which package/license it belongs. For qml project, I've BSD-licensed all the core parts (files in src directory) and the rest of the files (test files in test directory) are, well, unlicensed. I think those could be also licensed to some other license, though in the end, it may also be court/lawyers to decide.

                Now stopping the off-topic license speculation from my part.

                1 Reply Last reply
                0
                • P Offline
                  P Offline
                  Philius
                  wrote on last edited by
                  #29

                  That JavaScript trap link you posted got me to thinking.

                  If I'm going to write a facility that can substitute native code for a JavaScript url (or several) then it could be put to use to allow arbitrary substitutions, as the link describes.

                  Maybe this could be a general purpose plugin that can have wider applications.

                  I'll start a thread called "JavaScript override" to discuss it.

                  1 Reply Last reply
                  0
                  • P Offline
                    P Offline
                    Philius
                    wrote on last edited by
                    #30

                    While taking a break I read up on the SVG specification.

                    http://www.w3.org/AudioVideo/

                    I'm not QML savvy, but does it have anything in common with SMIL?

                    Would "porting" it there make sense?

                    I'm thinking of porting QtJs there too.

                    1 Reply Last reply
                    0
                    • P Offline
                      P Offline
                      Philius
                      wrote on last edited by
                      #31

                      Have you looked at emscripten? http://emscripten.org/

                      It's a c++ to JavaScript converter!

                      I posted a message to the blog site about QtJs http://syntensity.blogspot.com/2011/07/emscripten-15.html

                      I hope this helps.

                      1 Reply Last reply
                      0
                      • T Offline
                        T Offline
                        trusktr
                        wrote on last edited by
                        #32

                        Any progress on this???

                        1 Reply Last reply
                        0
                        • P Offline
                          P Offline
                          Philius
                          wrote on last edited by
                          #33

                          Sorry for leaving this to stagnate.
                          I'm not in the loop regarding QML, but "Qt for Google native client":http://qt-project.org/wiki/Qt_for_Google_Native_Client is the way I'm going.

                          1 Reply Last reply
                          0
                          • L Offline
                            L Offline
                            lpaimen
                            wrote on last edited by
                            #34

                            As for the qmlweb project (porting qml to standard web browser), the project has been semi-active for a while now. It recently got second contributor, so it's not just me anymore. More developers are of course welcome.

                            You can run very simple QML apps with the engine, but it is not yet production quality. It supports standard browsers (most post-IE8), and works for example on PS3 and iPad browsers.

                            Demo app -- slides written as QML application -- is available at
                            http://tinyurl.com/qmlslides
                            and code from
                            https://gitorious.org/qmlweb

                            1 Reply Last reply
                            0
                            • T Offline
                              T Offline
                              trusktr
                              wrote on last edited by
                              #35

                              @lpaimen I'm writing a QML app and it will also have an HTML5 version. A tool like this would be so handy. I'll have to check it out and possibly contribute.

                              1 Reply Last reply
                              0
                              • L Offline
                                L Offline
                                lpaimen
                                wrote on last edited by
                                #36

                                @trusktr Well but that would be excellent! I've been slow with this project but Anton (co-dev) has been steadily contributing improvements here and there. Since November he has been reworking bindings/property system, introduced DOM-based rendering frontend, support for Repeaters and so on, all kinds of exciting and neato stuff.

                                But still the code ain't ready. The best way to get going is probably scratch your own itch -- try your QML app with the qmlweb engine and see what is missing and start hacking. Then just drop us a mail and we add you to qmlweb gitorious.org team to get your code into mainline :P

                                1 Reply Last reply
                                0
                                • T Offline
                                  T Offline
                                  trusktr
                                  wrote on last edited by
                                  #37

                                  Sweet. Was it rendered in canvas previously? If so, 2D or 3D context?

                                  Just an idea (not sure if you already considered it) but perhaps the qmlweb renderer can be written using mrdoob's three.js (http://threejs.org) .

                                  Using three.js would mean that the qmlweb renderer could be written in a single code base using the three.js drawing API. Someone using qmlweb could specify for qmlweb to use the Canvas2D renderer, the WebGL renderer, or the CSS3D renderer. The internals of three.js would handle how stuff is rendered in each mode. All we'd need to worry about is writing the qmlweb renderer using the three.js drawing API.

                                  Here's an amazing WebGL example:
                                  http://threejs.org/examples/#webgl_animation_cloth

                                  An amazing Canvas2D example:
                                  http://threejs.org/examples/#canvas_geometry_birds

                                  and an amazing CSS3D example:
                                  http://threejs.org/examples/#css3d_periodictable

                                  2D stuff (e.g. for user interfaces) would basically just be done by creating a camera that doesn't move. It can be aimed downward facing the X-Y plain at 90 degrees, then 2D objects can be drawon on the XY plain, while giving them Z values that have tiny differences from each other to create layers. E.g. Z=0 for the base layer, Z=0.00001 for the next layer, etc.

                                  Using three.js would then mean that the 3D parts of Qt QML could also be rendered. 3D effects could also be added to "2D" user interfaces (e.g. new screen could zoom in or out, anything you can do with the QML 3D stuff).

                                  There's also the pixi.js library, that specializes in 2D graphics and uses WebGL for hardware acceleration, with a Canvas2D fallback for deices without WebGL. This might be easier to use initially for QML 2D interfaces, but it might be a barrier for 3D QML.
                                  There's plenty of other 2D libraries: http://stackoverflow.com/questions/11456758/is-there-at-two-js-counterpart-to-three-js

                                  What is your thought on using a library like three.js for rendering?

                                  1 Reply Last reply
                                  0
                                  • T Offline
                                    T Offline
                                    trusktr
                                    wrote on last edited by
                                    #38

                                    Update: I just discovered "asm.js":http://asmjs.org/.

                                    So what does this mean for Qt on the web?

                                    It means you'll be able to compile your Qt apps for any HTML5 browser, taking advantage of WebGL for hardware acceleration.

                                    What is asm.js?

                                    asm.js lets you compile C++ to JavaScript (using only a subset of the JavaScript language). Firefox's new OdinMonkey JavaScript engine is designed to read the subset of JavaScript that C/C++ apps are compiled to, and will compile the JavaScript to an assembly like machine code right in your browser, so JavaScript apps compiled from C/C++ can run a lot closer in performance to native apps, all in your browser.

                                    Apps compiled with asm.js run up to 500% faster in OdinMonkey than in Google's V8 using Ahead of Time (AOT) compiling instead of Just in Time (JIT) compiling (but it's only a matter of time before Google comes out with their own competitor to OdinMonkey).

                                    As a proof of concept, the Unreal engine has been ported over using asm.js. Try the amazing "demo":http://unrealengine.com/html5.

                                    Here's "Qt AnimatedTiles":http://vps2.etotheipiplusone.com:30176/redmine/emscripten-qt-examples/animatedtiles.html running right in your browser (but not using WebGL).

                                    @lpaimen, what are your thoughts on this? It might be easier to go this route.

                                    1 Reply Last reply
                                    0
                                    • L Offline
                                      L Offline
                                      lpaimen
                                      wrote on last edited by
                                      #39

                                      On some recent changes, Qmlweb project is now a KDE playground project, the latest code being at https://projects.kde.org/projects/playground/www/qmlweb . Anton has taken over the project (I didn't find time).

                                      Anton is also doing a presentation of this project in Qt Developer Days 2013 (in Berlin). If you are going, remember to check it out!

                                      --

                                      When apps need some rectangles, texts and images -- maybe with rotation at most -- DOM does OK. DOM additionally provides a input that supports copy&paste. DOM or 2D canvas does not drop my eyes with greatest 3D transitions ever invented. On other hand, I get a good feeling when I get HTML5-capable device into my hands and the stuff runs there (even remotely). Device like PS3, N9, iPad or IE.

                                      WebGL/three.js have their strengths and weaknesses. If QML apps need the strengths and don't mind the weaknesses, using these serve the project well.

                                      I think the strengths of WebGL/three.js are the graphical capabilities and the weaknesses browser support and input element.

                                      --

                                      Unreal engine demo is amazing yes. I got it running only on FF but it made me forget it is running in a browser. That is a good thing for a browser demo.

                                      Qt AnimatedTiles worked in Opera as well, downloaded about 10 seconds and started up in like 5 on my laptop. The performance was OK (~15fps) on Chrome. I wonder what numbers would be with qmlweb or standard HTML5 approach.

                                      Emscripten+asm.js (recompiling Qt to JS) is easy route, I think someone should take it and come up with results on running QML with it. Initially it might not perform very well but there will be plenty of low hanging fruits to optimize. Eventually it might perform OK. The codebase will be big due to compilation. Also, the more you depend on speedup provided by asm.js, the more you depend on it breaking into browser mainstream.

                                      1 Reply Last reply
                                      0
                                      • T Offline
                                        T Offline
                                        trusktr
                                        wrote on last edited by
                                        #40

                                        Hey guys, Hey guys!! So Famo.us 0.3.0 is coming out this month (http://famo.us). The goals of the project are amazing. Basically they've created a scene graph for the web. The version after 0.3.0 will blow your mind, mixing regular DOM with WebGL shaders...

                                        Anyway, I think that QMLWeb can take some inspiration from what Famo.us is doing, and if it did, and competed with Famo.us, QML for the web would drastically increase exposure to Qt and do huge things for the world.

                                        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