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. Embed a qml application inside a webpage
Forum Updated to NodeBB v4.3 + New Features

Embed a qml application inside a webpage

Scheduled Pinned Locked Moved QML and Qt Quick
5 Posts 3 Posters 4.8k Views 1 Watching
  • 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.
  • _ Offline
    _ Offline
    _Mark_
    wrote on last edited by
    #1

    Let's say we have a linux machine with a webserver. Is it possible to embed a qml application so I can reach it from the Internet?

    The ugly way is to use a VNC access... but I wonder if there is a native solution (Qt + qml + html5) to achieve that.
    The goal is to have the same graphical interface of the qml application but with a remote access.

    1 Reply Last reply
    0
    • C Offline
      C Offline
      chrisadams
      wrote on last edited by
      #2

      There are (at least) two different possibilities that you might mean here:

      1. Serve the QML files + JS resources + image assets from the server. A "normal" QML application (which you distribute to clients) then loads the remote qmldir directory listing file to enumerate the types made available by the server. It can load even the root QML component source file from your server.

      2. Embed the QML content into HTML via an extension tag supported by a browser plugin (which you would have to write and distribute to clients), which allows QML content to be displayed inside a web page.

      Option (1) is immediately supported (read the Qt5 QML documentation about remote directory imports) as QML aims to be network transparent.

      Option (2) requires a heck of a lot of work which hasn't been done yet as far as I know (but if done properly, would be great).

      Cheers,
      Chris.

      1 Reply Last reply
      0
      • A Offline
        A Offline
        Adrien Leravat
        wrote on last edited by
        #3

        Hi Mark,

        As chrisadams said, the first option (remote QML content) is a interesting possibility.

        There is also another solution using:

        • A standard web server
        • A Qt application using a QWebView (WebKit) on your client, and a QWebPluginFactory.

        This solution relies on adding custom html tags to your source page, that will get interpreted by your QWebPluginFactory, to create actual Qt widgets embedded in your web page.

        Here is a sample source html:
        @<html>
        <body>
        <h1>Integrated Widget</h1>
        <p>
        <object type="application/x-qt-myqmlview">
        <param name="gridVisible" value="true" />
        </object>
        </p>
        </html>
        @

        I never tried it with a QDecarativeView, but I guess it is possible, as QGraphicsView inherited classes are supported for embedded components.
        The web page content can also be entirely accessed and modified from Qt, which makes it very flexible.

        If you need additionnal information on it, you can send me an e-mail (see my profile), and I'll send it to you.

        Adeneo Embedded - www.adeneo-embedded.com

        1 Reply Last reply
        0
        • _ Offline
          _ Offline
          _Mark_
          wrote on last edited by
          #4

          Hello, I'm sorry for the delay.

          If I understand correctly your last hint, the trick is to use QWebPluginFactory which will parse the custom tags embedded inside a standard webpage.

          In this way my own "browser" (based upon QWebView) should add the qml page where requested. It's like a plugin, indeed, as chrisadams suggested.

          It should be easy enough (I wish!) to create the same browser even for Android - to allow any device to view the enhanced web pages.

          Do you know any example on the web about this? Even not with qml, I mean.

          1 Reply Last reply
          0
          • A Offline
            A Offline
            Adrien Leravat
            wrote on last edited by
            #5

            Here is one:
            https://github.com/PySide/Examples/blob/master/examples/webkit/qml-webkit-plugin/main.py
            Written in Python, but still interesting as easily translatable into C++.
            Write me your e-mail in private if you're interested in the slides.

            I'm highly interested if you have any feedbacks on this method.

            Adeneo Embedded - www.adeneo-embedded.com

            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