Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Qt for WebAssembly
  4. Qt/qml frontend for Node-RED
Forum Updated to NodeBB v4.3 + New Features

Qt/qml frontend for Node-RED

Scheduled Pinned Locked Moved Unsolved Qt for WebAssembly
3 Posts 2 Posters 1.4k 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.
  • R Offline
    R Offline
    r0ller
    wrote on 14 Jun 2021, 20:02 last edited by
    #1

    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

    S 1 Reply Last reply 4 Apr 2022, 12:59
    0
    • R r0ller
      14 Jun 2021, 20:02

      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

      S Offline
      S Offline
      saurabh162
      wrote on 4 Apr 2022, 12:59 last edited by
      #2

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

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

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

      1 Reply Last reply
      0
      • R Offline
        R Offline
        r0ller
        wrote on 5 Apr 2022, 05:55 last edited by r0ller 4 May 2022, 05:59
        #3

        Hi Saurabh,

        Here are my answers:

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

        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