How can I create UI to custom node

Developing Nodes
1

Hi all, I am new here,
I am some question about create custom node.
custom node code have two input ,I want render to website(HTML),
How can I do?

using http in -> custom node -> http out .
image

custom node code
HTML:

image
image760Ă—816 35.9 KB

image
image1104Ă—562 49.7 KB

JS:
image
image792Ă—748 47.9 KB

2

I think that Node-RED probably already has what you need to do this.

You can use the http-in/-out nodes with the template node to create a new web page with custom server-side processing.

Alternatively, you can use Node-RED's static folder to serve up a static page and send your form data to an http-in/-out node combination.

You could use Dashboard with ui_template node. Though if the form is fairly simple, you could use the ui form node.

And of course, you can use uibuilder which lets you build any kind of custom web page(s) with a provided communications link from/to Node-RED - and MUCH more. :grinning:

1 Like
3

Indeed, you might have a look at this nice tutorial like Julian has mentioned.
Bart

1 Like
4

thank you for replay,
I have used uibuilder is great tool for custom web page, but I want to create nodes like dashboard with buttons, forms etc.
I try "Node-RED's static folder to serve up a static page this suggestion" ,but can not find good example for this case
could you have example for this case ?

5

I think that you may be trying to run before you can walk. Lots of people have tried to create something that lets you write nodes that create front-end elements. Dashboard being the most obvious.

To do something like that from scratch is a big job.

By the way, if you switch to the beta version of uibuilder (the vNext branch on GitHub), there is nothing stopping you from creating nodes that send/receive data to a uibuilder node. There is an example in the uib-sender node. You could fairly easily extend such a node to send configuration to your front-end when a uibuilder client connects so that the front-end would automatically build itself. I have a partial proof-of-concept for the front-end part of that approach using the Svelte framework.

No. But all you need to do is to configure the static folder in settings.js, restart node-red and put an html file in the configured folder. You should be able to access that with a URL such as http://localhost:1880/mypagename.html

6

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