Making a professional dashboard

hello all !
do i have the ability of using html and css to change the default dashboard of node red to somthing better ?
if yes i want to use websites templates to make the node red dashbord more beautiful.
wich websites can help me ?

A great starting point for fully custom dashboards is the node-red-contrib-uibuilder project that gives you the basic connectivity to hook up any web framework you like.


in the dashboard setting there an option called use angular theme in ui.template, what can i do with that?

you can use the default underlying angular theme in any ui_template you create rather than the default themes we supply. This may make your template look nicer or not as some of the spacings and colours change.

1 Like

before the ui builder i have to use templates and connect them to an ui builder?

no - uibulder is a completely separate dashboard. How you build it is up to you.There are quite a few examples in that project wiki.
The existing dashboard can be changed a little by either using the themes, or by overriding the css using a ui_template - but I thought you wanted more than that.

1 Like

The node-red-contrib-uibuilder node has a very extensive ReadMe and Wiki which explains in detail how you use it

1 Like

There are some hopefully useful examples of the basics on the uibuilder WIKI on GitHub. Using them, you can quickly build a demo so that you can see how it works and get a feel for whether you want to invest some time with it.

Basically, it is some glue that binds together Node-RED and your own custom front-end web code. So as you know HTML, CSS and JS, you can create any kind of interface that has data driven from and to Node-RED.

I generally recommend using VueJS and bootstrap-vue for people starting out as it gives you a reasonable looking, performant and flexible UI with minimal boilerplate. The current v1 of uibuilder uses just jQuery but v2 will be switching to VueJS and bootstrap-vue instead. But you aren't limited to what I've done, you can use any library or indeed no library at all if you are that way inclined.

1 Like

Here's my home automation dashboard just to prove that it is possible to achieve "something better" this way. It is of course up to you to decide is it better enough or not. And there is no limit if you are good artist to figure out much better looking solution. I am far from good at art. But anyway - it is done by customizing Node-RED dashboard elements with CSS overriding and creating some custom elements for it.


would you share the css or Flow for the Dashboard ?
Thank you.

For custom widgets - I gave for community the node-red-contrib-ui-level widget.

That chart type of thing is truly too dedicated for my personal use case, I can explain in detail but let's make different topic for that if somebody interested.

All other things are done with default dashboard widgets.
Here's the override of CSS for Node-RED dark theme.

[{"id":"e99346f6.9af658","type":"ui_template","z":"d56910b4.28406","group":"","name":"Master style override","order":1,"width":0,"height":0,"format":"<style>\ {\n background-color: #333333;\n font-family: Calibri;\n}\nbutton, html, input, select, textarea {\n font-family: Calibri;\n}\ md-content md-card {\n background-color: #33333300;\n color: #d0d0d0;\n}\n\ md-toolbar {\n background-image: linear-gradient(to right, #404040, #737373);\n box-shadow: 0px 1px 20px #0000008a;\n}\ ui-card-panel {\n background-image: linear-gradient(to bottom right, #404040, #737373);\n border: 1px solid #555555;\n box-shadow: 0 0 20px #00000066;\n}\n\ ui-card-panel {\n color: #2eb82e;\n text-shadow: 0 0 2px black;\n}\n\ .nr-dashboard-form-button {\n background-image: linear-gradient(to bottom right, #8a8a8a6e, #00000070);\n background-color: #00ad03;\n color: #d0d0d0;\n text-shadow: 0 0 2px #525252;\n border-radius:6px;\n}\n\ .nr-dashboard-button .md-button {\n background-image: linear-gradient(to bottom right, #8a8a8a6e, #00000070);\n background-color: #00ad03;\n color: #d0d0d0;\n text-shadow: 0 0 2px #525252;\n border-radius:6px;\n}\ .nr-dashboard-button .md-button:hover {\n background-color: #00de00;\n}\n\ .nr-dashboard-switch md-switch .md-thumb {\n background-image: linear-gradient(to bottom right, #48b349, #115009);\n}\ .md-button {\n box-shadow: 0 1px 3px 0 rgba(0,0,0,.26)!important;\n width: 100%!important;\n height: 100%!important;\n margin: 0!important;\n min-width: 0!important;\n min-height: 0!important;\n}\ .nr-dashboard-slider .md-thumb:after {\n background-image: linear-gradient(to bottom right, #48b349, #115009);\n border-style: none;\n}\ .nr-dashboard-numeric .value {\n background-color: #33333300;\n color:#d0d0d0;\n}\n\ .value {\n font-weight: 700;\n text-align: center;\n border: 0;\n}\n\n\ {\n display: inline-block;\n width: 100%;\n overflow-y: visible;\n}\n#SETTINGS_TEATED_cards {\n min-height: 260px;\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":1190,"y":420,"wires":[[]]}]

1 Like