I am using a text node to display the status of my doors and windows and motion sensors. One node for each.
When all windows are closed, its showing 'All Windows Closed'. If windows are open, it lists which windows are open. Any more than 2 windows, and the formatting changes. Instead of ending at the right side, there is no space between 'Window' and the displayed string. Can that be changed ?
Actually no. The formatting is same. The widget tries to do its best to fit the content into the available area. And if there is that much content - this is the best outcome. Notice that widget has no rules to start breaking the words. So it fills whole line and if next word is long enough, new line is created.
May be the text node is not best thing for that kind of data representation. But if needed, you may have function before text node to determine that too many windows are open, count them, and change the sentence to "3 windows opened" or something like that.
Ok, so the problem seems to be that it is one long string, which the widget is trying to fit ? Could the text string then maybe split with a line brake inserted ?
I'm afraid that will not do the trick.
See that the widget size is fixed. If there is more content than it can fit, it overflows.
You can add a class for the widget to make scrollbar for it, but it is kind of ugly
Yeah I hate that scrollbar... But your first picture has 5 lines, and perfectly formatted. If I could do that with minde, that would solve the problem. Did you have a line break in there or is it by chance ?
Also, is there a way to set a colour for the 'text' label ? I managed to change the colour for the string, but not for the text yet
That 5 line looks good because of all the lines are similar. And yes, all 5 are separated with line break (<br>)
But the reality is something else.
The label color goes same way as the content text.
Just asking before advising anything smarter than the text widget to present the windows open/closed condition - How many windows in total you have? (if it is finite number of course)
I could try with a line break, as my text is similar - ish in length. I'll try...
I knew the label colour on a text node. I use that already. Maybe because of the many lines of text I was thinking dropdown node. I wanted to (maybe have done already) know about changing the label colour in a dropdown node, so that question intended didnt really belong in this thread...
6 windows. But I also want to use it for my door sensors (In a seperate widget), of which there are 7
The data is coming from my Honeseer home automation system, and there I have all my windows in 1 device, my doors in another, motion sensors in another.
I display all windows closed when none are open. Much neater than displaying every window and door etc in a seperate device/node. This is what I am trying to replicate in Node Red.
I have just started with Node Red, trying to use it to build a nice Dashboard / Home page for my system
Well, overall the styling of the dashboard elements should be done with CSS, only minor modifications may or should be done via provided msg parameters. And that is the different approach I was talking before.
See the example of dropdown widget modification.
But for your use case I can't see the how it can go into the dropdown widgets behavior. It is user input type of widget, not a presentation type.
What I wanted to know was actually not related to the text node. But rather to colours on a dropdown node and a slider node.
This is a example
They are 2 nodes. A slider and a dropdown. I managed to change the colour of the 'select option'. But I also would like to change the colour of the label, in this example 'Lounge Mode'. The same on the label of the slider, the 'AC Lounge Power'
Ideally, I want to be able to change them individually, not as a global setting.
Every detail you see on dashboard is decorated with CSS. And you can override the CSS however you like it to be. Except the dashboard layout. (well you can modify that too but it will bite back too hard so I do not recommend even to try)
And the modifications can be targeted globally over all similar elements or to the tiniest sub-element of kind. But it takes to get started from beginning (sort of).
You'll need to have at least some kind of understanding of HTML, CSS, and browser developer tools.
It is not trivial thing. It is a bit of learning curve. All that just because of it will be too hard to explain or advise anything if you miss the basics.
I have started watching some videos on CSS. I will use google/youtube to find some more stuff to try learn the basics.
I guess its a lot easier to start if I change these globally. That I could just do in the css style template ?
I looked at my dashboard in the developer inspect view. I can see the container view. I probably have to play around with that to find a setting for colours in the slider and dashboard labels. So far when I looked I could not see it.
As most of the info about the HTML and CSS you find is not Node-RED or dashboard specific, I'll link one more thread for you. That may be helpful to get started.
That is very useful. Going to be heavy reading... But it'll be worth it.
And as you seem so dedicated to achieve you goals, one more link. This is my favoriite CSS guru. https://www.youtube.com/kepowob
Excellent. With the help of the chrome inspect. I have found and created the name for the chart and gauge titles, and I can now set colours for those via the style sheet. 
So far thats setting it over all the dashboard, but tomorrow I'll try and see if I can set them differently from widget to widget
.nr-dashboard-gauge-title.nr-dashboard-gauge-titlel {
color:var(--color-text-primary);
}
.nr-dashboard-theme .nr-dashboard-chart-titlel {
color:var(--color-text-primary);
}
more experimenting to be done tomorow !
And I have bookmarked all your links as well to start looking at tomorrow
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy
