Thanks for this nice Video!!! You have this nice colored boxes in the background of your flow. Can you tell me how this node is called or whitch node-package contain this node?
Hi, many thanks for your kind words. The coloured boxes are simply GROUPs. You can group any part of a flow. Once you've created the group, you can change the border & background colours, Add and colour text and set custom env variables that your flows can use. All native Node-RED.
Hi, please ask the question in the Node-RED forum and I will respond. Much easier for me to answer there. It is very easy and I can share a flow with you.
I use uibuilder for my home automation, so I mainly just display sensor data and have some click events to trigger automations. I love the idea of just having a basic layer to communicate with NodeRED and being able to create my own UI using HTML, CSS and JS. I appreciate al the work that went into uibuilder and I don't want to sound negative, but the features in this video seem like re-inventing HTML (combined with JS) through nodes ?! Sorry, but to me zero-code seems more complicated then actually writing HTML and JS, but I'm probably not the intended audience anyway 🙂
Hi, thanks for your comments. If you know HTML then perhaps the zero-code features are of limited use. But many people don't. And even those who do may still appreciate a quick way to turn an imported CSV file into an HTML table or a simple way to create a form for quick user inputs. Also watch out for the next release where it will be even easier to save the zero-/low-code generated HTML as raw HTML for use elsewhere or back to a static file for fast loading. You will also be able to generate the HTML in Node-RED not just the front-end. Bottom line is that there are many use-cases for uibuilder. I should also say that the intermediate config that the low-code features use IS quite a bit simpler than HTML itself at least in 1 major respect - you don't need to understand the quirks of HTML. There are many of those that require odd handling of certain parts of the DOM for example, uibuilder allows you to avoid that while still being close enough to actual HTML so that the concepts are familiar for those who wish to transition. This is similar to how the D3 graphics library works with SVG/Canvas and is also similar to libraries from other output standards. Final note, the low-code config has already had benefits in uibuilder itself. Allowing rapid creation of things such as the standard eventSend function and rapid building of the status panel examples. These and plenty of other things have been much quicker and easier to implement thanks to having standardised config rather than having to deal with the complexities of HTML and especially the DOM itself. But when you know HTML/CSS, uibuilder stays out of the way and lets you get on with what's important - and it always will. Again, thanks for the feedback, always useful. J.
THANK YOU, Julian! This is EXACTLY what I needed! - ChZeman
Thank you Julian. With these videos I now feel up to poking around with uibuilder again
Let me know if you need something specific covering.
The example section really helped me, great work! Thanks for all the effort you put into this.
Nice Work Julian!
It's just fantastic content!
really appreciate all content, thanks so much Jullian.
Trying to make time to do more but summer is more about family so less time to work on uibuilder. Fear not though, plenty more to come.
Thank you for your efforts, very helpful!!!
Many Thanks for your clear explanation... 👍👍👍
Amazing, thanks for this
Thanks for this nice Video!!! You have this nice colored boxes in the background of your flow. Can you tell me how this node is called or whitch node-package contain this node?
Hi, many thanks for your kind words. The coloured boxes are simply GROUPs. You can group any part of a flow. Once you've created the group, you can change the border & background colours, Add and colour text and set custom env variables that your flows can use. All native Node-RED.
Hi Julian, please show how to change the title of the page please
Hi, please ask the question in the Node-RED forum and I will respond. Much easier for me to answer there. It is very easy and I can share a flow with you.
Sorry for the perhaps stupid question.
How can you output multiple lines in the comment node?
Try: `line 1
line 2` - note the spaces around the
, this is required.
@@JulianKnight-IT THX
I use uibuilder for my home automation, so I mainly just display sensor data and have some click events to trigger automations.
I love the idea of just having a basic layer to communicate with NodeRED and being able to create my own UI using HTML, CSS and JS.
I appreciate al the work that went into uibuilder and I don't want to sound negative, but the features in this video seem like re-inventing HTML (combined with JS) through nodes ?!
Sorry, but to me zero-code seems more complicated then actually writing HTML and JS, but I'm probably not the intended audience anyway 🙂
Hi, thanks for your comments. If you know HTML then perhaps the zero-code features are of limited use. But many people don't. And even those who do may still appreciate a quick way to turn an imported CSV file into an HTML table or a simple way to create a form for quick user inputs. Also watch out for the next release where it will be even easier to save the zero-/low-code generated HTML as raw HTML for use elsewhere or back to a static file for fast loading. You will also be able to generate the HTML in Node-RED not just the front-end. Bottom line is that there are many use-cases for uibuilder. I should also say that the intermediate config that the low-code features use IS quite a bit simpler than HTML itself at least in 1 major respect - you don't need to understand the quirks of HTML. There are many of those that require odd handling of certain parts of the DOM for example, uibuilder allows you to avoid that while still being close enough to actual HTML so that the concepts are familiar for those who wish to transition. This is similar to how the D3 graphics library works with SVG/Canvas and is also similar to libraries from other output standards.
Final note, the low-code config has already had benefits in uibuilder itself. Allowing rapid creation of things such as the standard eventSend function and rapid building of the status panel examples. These and plenty of other things have been much quicker and easier to implement thanks to having standardised config rather than having to deal with the complexities of HTML and especially the DOM itself.
But when you know HTML/CSS, uibuilder stays out of the way and lets you get on with what's important - and it always will.
Again, thanks for the feedback, always useful. J.