Hi there,
where can i find the html and css file for the dashboard to change the style on my local disk.
Thanks for help
You can change quite a lot of the themeing via the Dashboard sidebar, including some of the basic sizing geometry and colours. Most of the rest can be tweaked by setting CSS style overrides in a ui_template node.
The actual guts are in the src directory in the project - theme.less and main.less are the main files though each widget also has its own css for specific things. These would need you to fork the project and rebuild it.
But where can i find the css for the dashboard on my local disk?
It's in the node-red-dashboard/dist/css directory under the node_module directory... but would be overwritten by any upgrade to the dashboard you install
Ok. I think the design of the dashboard is only for private use. Is there any tool to build professional dashboards using html/css/js?
What is the thing which makes dashboard to be a professional one? Any examples?
Mendix is an easy to use, professional tool for app programming for example
I think you are not understanding css (cascading style sheets). They cascade so the lowest level one applies. You write whatever css you want in a template node and that applies based on the context assigned. You do not need to modify the default, as long as you want to apply your styles to your page or elwmwnt.
Node-RED is also easy to use.
If you are good in HTML, CSS, JS you can develop your dashboard from scratch using for example https://flows.nodered.org/node/node-red-contrib-uibuilder
If this is not the case, the ui_dashboard elements can be customized and as it is CSS the sky is the limit.
Yes, not all the ui_elements like gauges and charts allow full customizing but you can easely create your own elements using ui_template node or create proper dashboard node and share it with community.
Most powerful thing with Node-RED is the community. Fast and smart and and always helpful.
4 Likes
Check out node-red-contrib-uibuilder if you want to build custom web apps with Node-RED.
2 Likes
I'm really new to node-red, and this is maybe what I need, too.
But I can't understand how to do it.
Could you tell me if there are some tutorials on that?
Where to write the CSS code, and how;
have I to define a 'div' somewhere?
this kind of basic questions...
thank you in advance
If you are going to use Node-RED's Dashboard addon then you may not need to define any HTML at all. Dashboard has a limited but useful set of pre-configured widgets that will do a lot of common UI tasks for you.
I think if you search online for "node-red dashboard tutorial", you should find something useful.
If the standard components of Dashboard won't quite do what you want, then you can mix them with a ui template node. This will let you use a subset of AngularJS v1 to dynamically insert data from Node-RED into your Dashboard web page.
However, if you need greater flexibility than Dashboard easily allows or greater complexity or performance then you might want to look at uibuilder. That node lets you build custom user interfaces (web apps) however you like. But you need to be able to write at least some simple HMTL and JavaScript.
[quote="TotallyInformation, post:12, topic:8928, full:true"]
If you are going to use Node-RED's Dashboard addon then you may not need to define any HTML at all. Dashboard has a limited but useful set of pre-configured widgets that will do a lot of common UI tasks for you.
I think if you search online for "node-red dashboard tutorial", you should find something useful.
If the standard components of Dashboard won't quite do what you want, then you can mix them with a ui template node. This will let you use a subset of AngularJS v1 to dynamically insert data from Node-RED into your Dashboard web page.
However, if you need greater flexibility than Dashboard easily allows or greater complexity or performance then you might want to look at uibuilder. That node lets you build custom user interfaces (web apps) however you like. But you need to be able to write at least some simple HMTL and JavaScript.
[/quote
Thank you for your response.
I've seen the dashboard, and it's impressive; but I'd like to have a page that is more web responsive, to be correctly displayed in many differents devices and browsers;
that's why I'm trying to understand if that could be acheived simply by embedding some CSS code into the Dashboard nodes, or if I have to write my HTML + CSS page, insert it into the Dashboard, and then connect it to other nodes.
If you want full control then the uibuilder project that @TotallyInformation suggested is what you need.
1 Like
