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.
2 Likes
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.
8 Likes
hi,
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>\nbody.nr-dashboard-theme {\n background-color: #333333;\n font-family: Calibri;\n}\nbutton, html, input, select, textarea {\n font-family: Calibri;\n}\nbody.nr-dashboard-theme md-content md-card {\n background-color: #33333300;\n color: #d0d0d0;\n}\n\nbody.nr-dashboard-theme md-toolbar {\n background-image: linear-gradient(to right, #404040, #737373);\n box-shadow: 0px 1px 20px #0000008a;\n}\n.nr-dashboard-theme 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\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: #2eb82e;\n text-shadow: 0 0 2px black;\n}\n\n.nr-dashboard-theme .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\n.nr-dashboard-theme .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}\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: #00de00;\n}\n\n.nr-dashboard-theme .nr-dashboard-switch md-switch .md-thumb {\n background-image: linear-gradient(to bottom right, #48b349, #115009);\n}\n.nr-dashboard-button .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}\n.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {\n background-image: linear-gradient(to bottom right, #48b349, #115009);\n border-style: none;\n}\n.nr-dashboard-theme .nr-dashboard-numeric .value {\n background-color: #33333300;\n color:#d0d0d0;\n}\n\n.nr-dashboard-numeric .value {\n font-weight: 700;\n text-align: center;\n border: 0;\n}\n\n\n.nr-dashboard-form {\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":[[]]}]
4 Likes
HotNipi,
Love your work and apology to resurrect this topic.
Your solution works perfect, but not with all items like a date picker or selection.
If you create these items after a compile and then recompile, it appears to be working. But if you created items prior, and apply your solution, certain parts will not update.
I have a really big project and need to change colour schemes (a theme change does not work either).
Any suggestions or tips?
Well probably not. Date picker has complex structure, what I did was for simple widgets. Complex elements are harder to style this way, and maybe even not possible at all.
I did it one by one, trial and error and only for components I was using in my solution. Don't know any other ways.
If you need more control that is easily available in Dashboard (which of course is excellently designed to be able to very quickly create simple to medium complexity dashboards with minimal to no web development knowledge), maybe you should be questioning whether Dashboard is the right tool for the job?
@hotNipi, I have glanced over the structure that is hidden in the node-red CSS and tried to cross reference. My limited knowledge prevents me to comprehend what the link is as it does not match what I find. Can you give me some guidance how to "trial and error" this?
@TotallyInformation I have looked at your provided solution with uibuilder and it is brilliant, but I just cannot get my head around it. I work in automation and this HTML and CSS stuff just does my head in. Need some of my younger engineers to play with it, but need to understand if I use it, as I am the 'guiding' master.
Thanks both for the reply though
Thank you for your kind words, always helps to get some encouragement.
I'd say that if you can do automation, HTML isn't so hard. However, yes it does take some time to learn. I am an IT Architect and Designer by trade having worked in Enterprise IT all my working life (42 years now!) and while I was, for a while, a business analyst/programmer, by the time "web stuff" came along programming was already not part of my day-job. So, being a true geek, I simply taught myself by creating a web site and then later on creating my own content management system (PHP/MySQL). Node.js was a no-brainer when it came along since it meant that I could focus just on JavaScript and forget about PERL, Python and PHP.
What I would say about uibuilder is that, with the default VueJS and bootstrap-vue libraries, you really only need a very minimal amount of HTML knowledge to build a decent looking web UI. Check out the "simple" example that comes with uibuilder in the library. Even the default template, though it might take you a few minutes to follow the JavaScript logic (VueJS, the uibuilder logic is extremely simple), you will see that the HMTL is actually very simple. Also, don't forget that you can ditch the VueJS stuff if your in-house team use a different framework. uibuider should work with any framework.
Anyway, have fun directing your engineers to do something with it and let me know if there is anything that needs fixing or improving. The next release is going to be the "security" release which will provide a framework for doing authentication, authorisation and session management in a consistent way via websockets.
I'm also working on node-red-contrib-infocache which will provide a comprehensive message caching and replay node that will, of course, integrate with uibuilder but also be usable independently. If you want to see the design doc for that, it is here. As always, feedback is most welcome.
@hotNipi
For about 1 year now I used your "Master style override", I really love it. However since I updated several nodes in my palette yesterday I does not work anymore. Probably you faced the same in your application and maybe already some time ago. Do you mind to share your update of "Master style override" in this topic? Thank you!
I'd prefer to fix what is broken rather than sharing the CSS. My CSS includes many things to deal with custom stuff that you definitely don't have.
The reason why it does not work anymore can freely be the slightly changed structure of dashboard brought in with couple of latest updates.
And as it is a year old thread, I'd recommend to start new thread with exact problem description.
1 Like
