Hi, This is definitely a noob question, I’ve only been using Node-RED (and Dashboard) for a couple of days. This may be as simple as I don’t know the right words to search. I want to display a “blob” (round, rectangular…) on my dashboard to indicate On/Off, Stop/Go, etc. based on a value. But, I…

Now that's intuitively obvious...not. At least not to me. :face_with_raised_eyebrow: <style> .led-green { margin: 0 auto; width: 24px; height: 24px; background-color: #ABFF00; border-radius: 50%; { </style> <table> <tr> <td><div class="led-green" style="background-color:{{msg.payload}}"></div></td> …

Here is one pointer for you :slight_smile: https://discourse.nodered.org/t/led-icon-changed/656

Thanks, I read that one before I posted. That is above my 2 day experience level. They discuss/display code that they obviously know where to put it and make it do stuff. If that code is what it takes, then I need something that tells me what to do with the code they show.

Since you are only two days in then I suggest you start by getting experience with the stuff that is easy to do. In this case rather than displaying an LED indication you could use a Text node to show On/Off. This may not look quite as you would like it but functionally I would have thought it was…

Thanks for the pointers. After staring at the forum posts suggested by hotNipi I realized it was really just html put in the right place that they were showing. Just for future readers, the following in a template node will produce round LED like display: .led-green { margin: 0 auto; width: 2…

I think the forum software hosed your cut and paste. Certainly has for me in the past. Try clicking </> button for "preformatted text" and then paste it in. I am interested in what you have done. I created "led like" indicators in the Dashboard by using (abusing) switch buttons and changing the …

Well, in a past life a did a reasonable amount of html...but, not saying this is "good" html, just working for me. :wink: Apparently this forum attempts to interpret pasted html...and the preformatted </> breaks as soon as it hits a new tag or blank line. :frowning: Grr...won't let me upload them …

If you put a line containing three backtick characters on the line before the html and another such line after it then it will be passed through unchanged, eg <style>can safely be put here</style> <div>and other html too</div>

Hey, I found that example useful! Thanks for posting. :+1:

I copied your code and installed on my dashboard and it is perfect. Thanks

Node-RED

Node-RED Forum

Simple LED indicator on dashboard

Dashboard

hotNipi 5 July 2018 19:19 4

Sharing of examples or why not entire solutions stands on import-export of flow JSON. https://discourse.nodered.org/t/how-to-import-a-flow-into-the-editor/895

Topic		Replies	Views
Node-RED dashboard- Adding an LED node hides all other dashboard nodes Dashboard	9	691	8 June 2022
Node-red-contrib-ui-led news Dashboard	3	446	28 January 2021
Led not working Industrial	22	514	9 June 2023
Dashboard background Change? Dashboard node-red-dashboard	9	572	18 August 2022
Make Leds on picture Dashboard	8	316	7 April 2024

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.

Simple LED indicator on dashboard

Related topics