Full dashboard with UIBUILDER

Share Your Projects
1

Thanks to UIBUILDER I made a full dashboard (with 7 routes) using just plain HTML/JS/CSS.

  • Charts, gauges and tables are using Google Charts
  • Main HTML structure and styles use my own masonry CSS and Semantic UI CSS (for internal grids in each card).
  • fully responsive for use on smartphone

Most of data is passed to the App from NR as multilevel objects with different topics handled by UIBUILDER in the scripts, while direct commands are sent to NR by using uibuilder.send() to specific nodes.

The whole route structure is handled by UIBUILDER ( > v.6.7.0)

I am attaching here few screenshots. Thanks to @TotallyInformation for his great library!

home
home1920Ă—1027 124 KB

menu
menu372Ă—1208 186 KB

services
services2866Ă—1284 425 KB

sprinkler
sprinkler724Ă—716 33.8 KB

12 Likes
2

And it looks great! Thanks for sharing, I love the clean look.

For those following along, Fabio has done most of the UI work here in the front-end (browser) and most of the data work in the back-end (Node-RED) - a traditional web coding approach.

Lovely to see people ditching unnecessary front-end frameworks like Vue and acknowledging the power of the modern DOM. With a sprinkling of help from UIBUILDER of course. :wink: And a nice example of the relative ease that just a small amount of help from a small library brings to front-end programming.

This would, of course, also all be doable using no-/low-code programming in Node-RED but sometimes the standard methods are the easiest as in this case.

Thanks for sharing Fabio, and thanks for your patience and input as I threw together the new UIBUILDER front-end router library which I think a lot of people will find useful. It is, to my mind (and yes, I'm more than a little biased!) MUCH simpler to use than any of the router libraries I've used with Vue and other frameworks.

4 Likes