after spending a disgusting amount of time trying to work with gtk,qt,codesys, etc i stumbled across node red, and was appauled and amazed at how much better it was than anything else. not to mention it is my favorite price.
the only thing i feel like i have to say i'm not happy with (which means i probably don't understand or haven't found the right resource) is the layout/css stuff. can someone kindly direct me to the authoritative page on setting up and using css for positioning/styles, etc? i find they layout editor to be a little meh, and sometimes when i have a ton of widgets on the page, or add one thing, the whole layout goes crazy and i have to manually drag everything back to where it goes, which can be quite time consuming.
another thing is let's say i have 10 linear gauges all on different tabs that use the same color and i want to change the color ALL of them. is there an easy way to do that? or change the span of a group of gauges, etc? do i have to go into the flow file and manually edit the color where i find it? i'm looking for a batch editor.
can i connect 10 gauge nodes to the same input function node without dragging and dropping 10 times?
somtimes i have a icon/gauge i've made and i want the same thing (or very close to it) replicated like 10 times, how do i not do the same thing over and over again?
most importantly, have i missed a good reference for these things? i hate asking when i know the resources are probably out there, but my google/forum-fu doesn't seem to be sufficient to find anything solid
But no, there is no repeating or something like that.
If you want that, it is "easier" to build your own dashboard with http-in/response nodes and pure html/javascript.
If you are only interested in charts/gauges etc (and have no input requirements), you can also consider grafana.
Well the joy of Node-RED is its flexibility. So you get several different ways of presenting UI's.
Dashboard is the easiest by far to get started with since you don't need any knowledge of HTML or CSS to get going. However, sometimes that very ease of use leads you to a cliff-face where you suddenly find yourself fighting the framework more than it is helping. So you may wish to bear that in mind if trying to create complex interfaces.
There are several other choices for building UI's from node-red though. I'll leave others to describe their contributions but my own is node-red-contrib-uibuilder. This takes a very different approach than Dashboard. It makes no assumptions about how you will build a UI (other than that you will be using HTML, CSS and JavaScript). You can use it with or without a front-end framework (Svelte, VueJS, REACT, etc). However, you have to write the HTML and a bit of JavaScript. Use of a CSS/Layout framework such as Tailwind or bootstrap-vue can reduce the amount of HTML you need to write and pretty much eliminate the CSS writing but there are currently no real zero-code options - though I'm working on some.
Of course, what I think you meant was that you wanted a definitive guide on changing the CSS for Dashboard. I can't really help there since I don't use it for anything other than the simplest of things.
sorry, work got away from me so i haven't had time to respond. thanks all for your input, i think the big thing i didn't realize is i'm not actually married to dashboard, i can pick other things, as well as maybe make my own.
it would be nice if there were simple css option to integrate with dashboard, it makes decisions for me and sometimes make it so i can't alight text to the top of a box or stuff that is super easy in css, but not so much in node-red
ps- its semi absurd there isn't like a 'grouping function for gauges and such. like when i have 5 gauges that all do the same thing, with the same parameters, but different input, i can't just edit all of them.
ie: my old project had 0-2 amp current range, my new project has 0-3. so i HAVE to go into everyone, change the span, and the colors associated with what part of the range it is. i should be able to do a group edit on the parameters.
i suppose i could do this by going directly into the flows file, but that seems ugly.
You have to remember what Dashboard is and what it isn't. It is something that can be used by anyone regardless of knowledge or skill with front-end design or programming.
That's great because it opens up possibilities for so many people.
BUT, in doing so, like so many frameworks, it has to force you into a specific way of working and it closes down (or at least makes more difficult) a lot of edge-cases. So it is very common when working with frameworks that you will reach a point where you realise that you are fighting more with the framework than it is helping you.
Not really, if you need that, you are free to create it - or persuade someone else with an interest to create it. The joy of open source. Again, Dashboard lets you get started really quickly but it cannot provide for every eventuality and is more geared towards people quickly creating more components rather than managing groups of components.
And that is exactly why I created uibuilder. It does the hard parts for you in terms of managing 3rd-party front-end libraries and other helpers, managing the communications between Node-RED and your browser client - and it lets you do whatever you like in terms of front-end design and build.
I've even had some great success recently around using pure DOM to create dynamic interfaces - such that I'm writing a new version of the client library that will let you send messages that create a UI for you.
