Embed a qml application inside a webpage

_Mark_

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.

chrisadams

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

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

Adrien Leravat

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.

_Mark_

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.

Adrien Leravat

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.