Connecting HTML5 GUI events to Qt application

Question

My existing Qt application has a 'traditional' GUI comprising panels with QtWidgets. I now want to add a GUI panel which will involve dragging 2D bezier curve points around, with various types of graphical feedback.

My first choice for the new GUI would be HTML5, JavaScript and SVG. Using a library such as D3.js or Ractive.js. I can develop this GUI more easily than I could by developing a QtWidget (implementing QGraphicsScene) to do it - plus with the HTML5 route I would be able to re-use the code in an online version of the app.

Despite Qt's website saying that I can develop my whole UI with HTML5 I can find no examples of how I would receive events or signals on the C++ side from user actions - or how I could expose a C++ method to a JavaScript object in the WebView.

Is the only way I can communicate between a web UI and the application by implementing a web server on the C++ side and using AJAX requests from the JavaScript back to the parent application?

Answer 1

It looks like what I need is the addToJavaScriptWindowObject method of QWebFrame, which makes a Qt object available to the JavaScript, exposing its properties and methods.

An example of this in use is the Form Extractor Example.

Answer 2

In case any other person, like me, stumbles upon about this question in Qt 5.X days, QtWebKit is deprecated.

Now, we have to use QtWebEngine,a Chromium based rendering engine, and QtWebChannel in order to communicate back and forth with Qt and HTML-Js.

There are some nice examples in the Qt documentation, as always.