Qt/qml frontend with uibuilder

General
1

Hi All,

I've just managed to connect a (minimal) qml frontend to nodered via uibuilder. Just posting it here if anyone is interested in qml. As I anyway have a Qt/qml architecture which I'm trying to use whereever it's possible I tweaked that ( https://github.com/r0ller/qwa/wiki ) to fit the nodered scenario. Due to that, the minimal c++ frontend (compiled to webassembly) that takes care of the communication with uibuilder contains some irrelevant code for this scenario but I plan to clean it up.

The pure Qt/qml frontend is here: https://github.com/r0ller/qml_uibuilder_fe

The nodered+uibuilder (say backend) project with the relevant Qt/qml artifacts from the frontend (index.html, qtloader.js, etc.) is here: https://github.com/r0ller/qml_uibuilder_be

The proof of concept currently looks like this in nodered:

qml_uibuilder1
qml_uibuilder11522×772 132 KB

and this is how the qml part looks like in Qt Creator:

qml_uibuilder0
qml_uibuilder0992×716 77.8 KB

The demo can currently:

  1. present the ui
    qml_uibuilder2

  2. send a message payload ("Hello Node-RED!") to the backend when the button is clicked:

    qml_uibuilder3
    qml_uibuilder31859×264 53.7 KB

  3. receive a message from the backend ("Hello QML!") and update the qml ui:

    qml_uibuilder4
    qml_uibuilder4951×227 33.7 KB

Best regards,
r0ller

2

Cool. Thanks for sharing.

3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.