After looking at some of the wonderful HTML dashboards in here I am curious to know if they are done using any particular WYSIWYG editor or if they are done on the fly with a text editor. I now have all my flows working like I want them and so I turn my attention to trying to pretty them up a little. The last HTML I did was years ago and need a lot of hand holding from an editor. If anyone has a favorite FREE WYSIWYG (as in beer) editor they use and would like to share what that is I would be interested in hearing about it.
Thanks
There are a couple of existing ways to create web interfaces using Node-RED: Dashboard, http-in/-out, and uibuilder. Flexdash is also an upcoming option.
Each of these follows a slightly different path. Dashboard and Flexdash are largely no-code. Each uses a different front-end framework to support them. AngularJS v1 and VueJS v3 respectively. As these are primarily no-code Dashboards, no coding is required - at least until you hit the limits of the pre-defined widgets.
uibuilder follows a different path. Its origins lie in being an early alternative to Dashboard that let you use standard web development workflows in conjunction with Node-RED. It also doesn't lock you into a particular front-end framework but will happily work with them if you need/want them. Newer updates have started to introduce low-code features and the next release will bring another no-code option. With uibuilder, it is recommended to use VScode for anything complex. However, it uses Node-RED's built-in Monaco editor for simple and quick edits. Monaco is the web version of VScode.
So you don't actually need a separate code editor when working with Node-RED. However, for more complex tasks, VScode is certainly the tool of choice for many people. Worth noting that VScode has an official Microsoft extension for doing remote editing which is ideal for use with Node-RED and uibuilder where you probably have your Node-RED server on a Pi or some other device other than your PC/Mac. It also uses the excellent ESLINT tool to help keep your code under control and has great code completion that even picks up your own code and helps you reuse functions, etc. Especially if you also use JSDoc comments.
PS: Full disclosure, I am the author of uibuilder.
I am currently working through "issues" with uibuilder. For a no code solution how do you put in buttons or switches or such? I do have VScode loaded and I am slowly going through all I can find on uibuilder including your tutorials but I am trying to create let's say a simple dashboard with two buttons that control a light. My issue is how to create the two buttons. I don't recall a WYSIWYG function in VScode but trying to lay out objects on a page I find myself doing a hit and miss approach that is more miss than hit. My dashboard now while functional has all the visual appeal of a six grader using crayons. I would like to move past that.
No-code for uibuilder isn't quite ready I'm afraid. It will start to appear in the next version (v6.1) and will be expanded in further versions.
For buttons though, try out the modern IIFE client template in a test uibuilder node as it shows you 2 different ways to include buttons in your front-end code that send information back to Node-RED, one with a full custom message and one with a low-code standardised msg.
You can use the low-code data schema feature in uibuilder in current versions. For example putting the following JSON into a msg._ui property will automatically create a list for you on your page.
[
{
"method": "remove",
"components": [
"#eltest-upd"
]
},
{
"method": "add",
"components": [
{
"type": "ul",
"id": "eltest-upd",
"attributes": {
"name": "testy-list",
"style": "list-style: \"❌\";"
},
"components": [
{
"type": "li",
"id": "eltest-upd-1",
"attributes": {
"data-row-index": 1,
"class": "odd"
},
"slot": "1) To do <span name=\"when\">now</span>"
},
{
"type": "li",
"attributes": {
"data-row-index": 2,
"class": "even",
"id": "eltest-upd-2"
},
"slot": "2) To do <span name=\"when\">tomorrow</span>"
},
{
"type": "li",
"id": "eltest-upd-3",
"attributes": {
"data-row-index": 3,
"class": "odd"
},
"slot": "3) To do <span name=\"when\">this week</span>"
},
{
"type": "li",
"id": "eltest-upd-4",
"attributes": {
"data-row-index": 4,
"class": "even"
},
"slot": "4) To do <span name=\"when\">sometime</span>"
}
],
"parent": "#more"
}
]
}
]
Rather than using raw JSON, you can combine this with JSONata so that you can include data from an incoming msg. Alternatively, you could use the mustache features in a template node (not the ui_template node) to merge data into the JSON.
A message from node-red containing valid msg._ui data is processed by the uibuilder client library and "hydrated" into valid HTML.
You can find page designers online that will output HTML for you so that you can create your basic page. All you then need to do is to wire up incoming messages and add some onclick HTML events to send back to Node-RED. Happy to help if you have a basic layout and want to wire it up.
Otherwise, you might be better off starting with a framework that contains a more comprehensive pre-defined theme. Vue v2 with bootstrap-vue isn't a bad choice and you will find loads of tutorials. It has a fairly standard theme pre-defined so you can get good output with minimal effort. You will find some uibuilder examples and templates that use this combination - the examples can be accessed from the Node-RED import menu.
Eventually though, you will probably want to learn some HTML and CSS anyway since it is a very valuable current capability to have and even with tools like Dashboard and Flexdash, you will eventually hit a wall and want to tweak things. There are many excellent and short, free training courses online.
uibuilder is all about choice and open options. It doesn't (yet) do layouts for you. One day I'll have time to add that but at present there are more pressing things to deliver.
In the meantime, you probably already have got this far but here is a simple example form HTML that you can use with uibuilder. v6.0 I'm afraid doesn't automatically include the form data with the button returns but v6.1 will.
<form>
<div>
This is a form element, it is an easy way to get input and send it back to Node-RED.
</div>
<div><!-- Accessible form element -->
<label for="quickMsg">Quick Message:</label>
<!-- onchange is optional, it saves the previous value of the field -->
<input id="quickMsg" value="A message from the browser" onchange="this.uib_newValue = this.value" onfocus="this.uib_oldValue = this.value">
</div>
<div>
<!-- Send data back to Node-RED - automatically includes the form's inputs,
`data-*` attributes, keyboard modifiers, etc. Also works with other event types. -->
<button onclick="uibuilder.eventSend(event)" data-type="eventSend" data-foo="Bah">eventSend</button>
</div>
</form>
Multiple buttons will sit side-by-side automatically as long as you don't put them in their own block tags (div, p, etc).
This alternative would send the form data back to node-red as well
<form>
<div><!-- Accessible form element -->
<label for="quickMsg">Quick Message:</label>
<input id="quickMsg" value="A message from the browser">
</div>
<div><!-- Accessible form element -->
<label for="num">Number:</label>
<input id="num" value="0" type="range" min="0" max="100" step="2">
</div>
<div>
<button id="btn1" onclick="fnSendToNR(event)">Button 1</button>
<button id="btn2" onclick="fnSendToNR(event)">Button 2</button>
</div>
</form>
and in index.js, the function to gather and send the data to node-red and some inbound message handling to update the value input from the payload:
window.fnSendToNR = function fnSendToNR(event) {
// Prevent default event action
event.preventDefault()
// grab all of the parent form's input values
const frmInputs = document.querySelectorAll('input')
console.log(frmInputs, event.target.id)
let frmValues = {}
frmInputs.forEach( inp => {
frmValues[inp.id] = {
id: inp.id,
value: inp.value,
}
})
uibuilder.send({
'topic': 'msg-from-uibuilder-front-end',
'button': event.target.id,
'payload': frmValues,
})
}
uibuilder.onChange('msg', (msg) => {
$('#num').value = msg.payload
})
As long as you use uibuilder's default CSS, the output should look OK. Make sure your index.css looks something like this at the top.
/* Load defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-brand.css`
* This version auto-adjusts for light/dark browser settings but might not be as complete.
*/
@import url("../uibuilder/uib-brand.css");
The biggest part of my problem is when some look at a tree. They see beautiful curving branches, delicate leaves, and graceful textured trunks. I see firewood. Some people just have no artistic ability.
Haha, beauty is in the eye of the beholder! Our firewood display looks very nice when full. Very tasteful.
But seriously, there are a few basics that help with visuals.
- Always use san-serif fonts (no twiddly bits).
- Keep font sizes around 11-12pt for core text..
- Allow for "white space" around things to allow the eye space to take things in.
- Keep the contrast reasonable.
- Don't make objects too wide, the eye should be able to scan text and other objects easily side-to-side.
- Keep it simple.
That's probably about it for the basics 
This is the very reason why Tailwindcss is extremely popular. There is no more need to create separate styling and can be done inline inside the HTML and it is very visual. There is no need all kinds of tooling if you use the CDN version, include it in the header and off to the races.
Watch the animation on their homepage to get a glimpse of how it works.
It is WYSIWYG, but not in a drag/drop sense, it will require some knowledge of the inner workings of css, but their documentation is awesome and there are many "components" available that were made by others like flowbite for example (who created their own framework on top of it, there are many other like that), you can copy/paste their code and use it directly in your own code.
Ofcourse, this is only the visual element, interaction is something else.
1 Like
And of course, you can use it with uibuilder 
Or just with the http-in/response nodes for that matter.
I did mention that at the start
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
