Qt/qml frontend for Node-RED

r0ller

Hi All,

Managed to tweak and find a new scenario for qml, based on one of my earlier projects (https://github.com/r0ller/qwa/wiki) which now made possible to use it as a front end for Node-RED. This is just a proof of concept currently but the communication already works between front-end and back-end.

If anyone is interested, here's the post on the nodered forum:
https://discourse.nodered.org/t/qt-qml-frontend-with-uibuilder/47137

Best regards,
r0ller

saurabh162

@r0ller

Thank you very much for your mentioned links

I am not very experienced with node-red or web application. Therefore I would be grateful to you if you please answer my following questions.

Node-RED already provides a front end using which we can make flows, connect and analyze data from sensors, then what additional benefit we will get by using QML as front end. (Actually I also want to use QML as front-end instead of node-red please see my following question on Qt foroum but do not know how to integrate QML with node-red).

https://forum.qt.io/topic/135399/graph-programming-using-qt-c/8

I could not able to run your following project using QT Kit (Qt Version: Qt 6.12 MinGW 64-bit, Complier: MinGW 8.1.0 64-bit for C++) on Desktop using Qt creator:
https://github.com/r0ller/qml_uibuilder_fe

Can you please inform me what mistake I have done.

Please inform me if you need any other information from me.

many thanks !!

r0ller

Hi Saurabh,

Here are my answers:

There's no additional benefit in using QML instead of the default Node-RED ui except that it's QML :) Although, one recent benefit is that the Node-RED ui is built with Angular 1 which is not supported any more by Google so if there's anything that need to be fixed on the Angular side, that won't be done.
The project qml_uibuilder_fe is just the front-end part without integrating it into Node-RED. I'm not sure where you got stuck, but please be aware that it's compiled to webassembly so you'll need to find a Qt guide, how to target wasm. These are the ones I used (since the project is based on Qt5):

https://doc.qt.io/qt-5/wasm.html
https://wiki.qt.io/Qt_for_WebAssembly

Once you manage to get the front-end compiled, you'll need to make it work with the Node-RED uibuilder node. Here's a complete node-red project that uses the previously mentioned front-end:

https://github.com/r0ller/qml_uibuilder_be

If you clone it, you should be able to start it and test the way I described it on the Node-RED forum. The integration part happens in uibuilder/uibuilder/src into which some of the generated front-end project files are copied. But only the generated qml_uibuilder.html file of the front-end project is modified and renamed to:

https://github.com/r0ller/qml_uibuilder_be/blob/main/uibuilder/uibuilder/src/index.html

I hope this helps :)

Best regards,
r0ller