How to display and control data from Node js webserver to Node-RED?

General
1

Hello, i've make a node js webserver but I don't know how i can display MQTT data from node-RED on this server. The node-RED dashboard doesn't interrest me because I wan't to totally manage my html, css and js files.

Furthermore how from html buttons or forms can I send data to my node-RED ?

Hoping to have been clear...
Thank you

2

Look at the https://flows.nodered.org/node/node-red-contrib-uibuilder project - it allows you to use whatever web framework you like in order to build a fully custom front end.

3

Thanks you, I take a look !

4

Yes, uibuilder provides a framework that will do what you want.

Normally, you would use Node-RED's ExpressJS instance to serve up your uibuilder files and you should be able to simply transfer any static assets you are currently serving from your own node.js server into the appropriate uibuilder folder.

You can, however, use your own server if you really need to but then you will need to pass some parameters to uibuilder in your front-end code when you start it. The explanation is in the documentation and in a comment in the default template.

The uibuilderfe library handles comms to/from Node-RED for you and it is as easy as uibuilder.send(msg) and uibuilder.onChange('msg'),function(msg){....}) to handle sending and receiving in your front-end code.

uibuilder comes with a default example template that uses VueJS and bootstrap-vue which gives you a really powerful but simple to use front-end framework from install. However, you can replace that with whatever you like and there are some alternative examples in the WIKI on GitHub.

Vue and bootstrap-vue include very easy to use button handling and there is an example baked into the default template code.

5

Hello,

I would like to use uibuilder to make my custom dashboard but I don't really understand how it works...

How can I display a value from node red and how can I send a value to node red from html button ?

Can I display global.json file values on the dashboard ??

I'm a beginner in node red and code in general...

6

I don’t want to be the one to blow away your hopes, but uibuilder is not the most suited tool for beginning programmers. Not that you can’t or shouldn’t use it, but it requires a basic to intermediate level of knowledge of frontend web development. When you’re just starting out you might be better off using just the regular node-red-dashboard and once you feel comfortable tackling advanced measures to come back to uibuilder.

The regular dashboard is very much batteries included and will hold your hand when creating your interface. With uibuilder you will be building the individual components of the dashboard yourself, rather than just using them. In return you get a lot of freedom in how it looks and works, but you need the knowledge to get it to work.

That having said, the uibuilderfe code with the websocket connection handles sending/receiving messages. Using the uibuilder.on(‘msg’) event you can handle incoming messages, and with uibuilder.send({...}) you can send messages back to node-red. Anything in between is mostly limited by your own imagination.

7

Lena has summed things up nicely. However, I hope you have some confidence, take a deep breath and dive in :smiley:

A good place to start is with the default template code. It gives you a feel for the level of code you may end up working with and shows you some ways to display information from Node-RED and send information back again.

Although it looks daunting, once you realise that you are creating a web "app" and that app is started up using the mounted function in index.js, you have your starting point.

If you do have a go, please do feel free to ask loads of questions here or perhaps better still in a new thread. We've all been beginners so we are pretty nice to others, especially if we see you making an effort.

On the other hand, if you prefer to dip your toes in by using Dashboard to begin, that's also great. You may find an old flow of mine on the flows site that may give you some clues as to how to display some JSON using Dashboard, look for something to do with debugging output.

1 Like