To start, I am an automation systems architect/engineer and experienced in most of the common programming languages and architectures.
Use Case: Operator is assembling a widget, screwing in 4 bolts with a torque tool. The flow describes the assembly steps of the widget and as each step within the flow is executed the UI reflects the progress and the torque values of each bolt after the completion of torquing of each bolt.
I have a project to create an application where node-red will provide the process definition and execution of an assembly process while a user interface shows the major steps of completion as the flow executes. A number of custom nodes are in the design to enable this type of process execution but it is unclear how to best interface the UI with the node-red runtime. I have read about UIBuilder and have ruled it out for this application (based on limited knowledge on my part) since the SPA sits outside the flow and not constructed from within the flow. The concept is to completely abstract the UI/SPA from the execution of the flow to leave room for other UIs to connect to process and monitor progress through different contexts.
I have looked at communicating with the flow through MQTT. The UI would send command messages to "start assembly" and receive messages to update the step progress in the UI. This seems to be a indirect way to do this but not out of the question.
I am looking to be pointed in the best direction. Thank you.
So first thing. Node-RED is a server tool, not a front-end tool. That means that whichever nodes you use, you will still need a UI presented to a users browser. In this, all of the UI tools for Node-RED are the same whether Dashboard, uibuilder, etc.
uibuilder will be easier if you are building a fully custom UI as it does the comms for you and keeps out of the way unless you need it.
The actual approach will depend on what visual library you want to use to display in the browser. But in the most generic terms, you will have some kind of configuration data to pass to the UI which will build the visualisation - you can use Node-RED to manage that and uibuilder to help communicate to the front end. Whether you build the actual visualisation in Node-RED (e.g. using SVG) or in the front-end will depend on whatever libraries and skills you have available.
Then you will have updates that visualisation and again you can use Node-RED to orchestrate the data flow and let uibuilder do the comms with the front-end.
I should also point out that there is a none node-red option for the front-end that you could use via MQTT with Node-RED and that would be Grafana, which I happen to know, has an extension that lets you create visualisations that can be data driven.
So lots of choice but they all will need you to split your thinking between node-red as the orchestrator/data flow tool and the front-end visualisation.
Thank you, this all makes sense. I have watched the first UIBuilder video and I will watch the rest so I get the total picture. I will read through the code in Github to see how UIBuilder handles the comms just so I understand how that is handled. For a prototype I will use React to build the Front-End. If you know of any examples using React with Node-Red I would be grateful if you passed them on to me.
I'm afraid I don't and have never used REACT so I can't really help.
There are a couple of REACT examples though in the WIKI. I think 1 of them may be current enough to still work without amendment.
Personally, I prefer to work with pure HTML/JavaScript or perhaps with Svelte for the most complex of UI's but that is just my preference. Of course, one of the core principals of uibuilder is that it works with any or no framework.
The comms features of uibuilder are pretty simple from a usage perspective. A uibuilder node creates a set of web endpoints using ExpressJS routers along with a dedicated Socket.IO namespace for live 2-way communications.
The ExpressJS endpoints enable a folder to be served as a web app and adds a number of other common endpoints and optional middleware. Any installed front-end libraries also get endpoints so that they can be used in your front-end code. There is a details page that shows all of the created endpoints.
Each uibuilder node gives you an instanceRoot folder a sub-folder of which will be served, by default the src/ sub-folder. The instanceRoot folder lets you install any dev tools you need for doing things like REACT builds and for REACT, you will want to change the served folder to dist/ which you will want to use as your build target folder (though these days, you should be able to use any sub-folder). uibuilder requires an index.html file to be present in the served folder but other than that, you are free to create any files and folders.
Lots of other things you can do as well of course but those are the basics.
Please do let me know if you watch the videos and still need something explaining, I can always create a new one.
Have fun and let me know how you are getting on. I'm usually around to answer questions anyway.
Again a thank you. I did go through the video and will watch it again today. I looked through github, very well done and I see you have been at this a long time. Your documentation is also very good. I am going to dig deeper into everything today.
