# Simple LED indicator on dashboard

**URL:** <https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375>\
**Category:** Dashboard\
**Created:** [5 July 2018 18:22 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375 "2018-07-05T18:22:37Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![drmacro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmacro/32/1023_2.png) [@drmacro](https://discourse.nodered.org/u/drmacro)\
**Post date:** [5 July 2018 18:22 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/1 "2018-07-05T18:22:37Z")

</div>

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 don’t see anything like it in the dashboard palette and I’ve not found any “how to” help on the web.

I’m happy to go read and experiment, so, pointers are welcome.

“Hey you missed this obvious…” is also welcome. 😉

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 July 2018 18:30 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/2 "2018-07-05T18:30:44Z")

</div>

Here is one pointer for you 🙂 [https://discourse.nodered.org/t/led-icon-changed/656](https://discourse.nodered.org/t/led-icon-changed/656)

---

<div class="post-metadata">

**Author:** ![drmacro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmacro/32/1023_2.png) [@drmacro](https://discourse.nodered.org/u/drmacro)\
**Post date:** [5 July 2018 19:12 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/3 "2018-07-05T19:12:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 July 2018 19:19 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/4 "2018-07-05T19:19:07Z")

</div>

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](https://discourse.nodered.org/t/how-to-import-a-flow-into-the-editor/895)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [5 July 2018 20:00 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/5 "2018-07-05T20:00:46Z")

</div>

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 just as good. Once you have mastered the basic principles then you can move on to more sophisticated stuff. When learning any skill it is better to start with the basics.

---

<div class="post-metadata">

**Author:** ![drmacro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmacro/32/1023_2.png) [@drmacro](https://discourse.nodered.org/u/drmacro)\
**Post date:** [11 July 2018 18:20 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/6 "2018-07-11T18:20:47Z")

</div>

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: 24px; height: 24px; background-color: #ABFF00; border-radius: 50%; {

| 

 | Label |

Changing "red" in the

 tag will set the desired color. Replacing "red" with "{{msg.payload}}" and then passing "red", "green", etc. as the payload will set the color.  
Setting the inbound msg payload to "

Cheers.

---

<div class="post-metadata">

**Author:** ![wb666greene](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wb666greene/32/6534_2.png) [@wb666greene](https://discourse.nodered.org/u/wb666greene)\
**Post date:** [11 July 2018 21:06 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/7 "2018-07-11T21:06:53Z")

</div>

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 colors and icon picture based on the switch state. Seemed pretty round-about and ugly way to do such a simple thing, but it works fine. I admit it looks perhaps "cooler" than a simple round colored circle LED on a cellphone web-page when using the Dasboard UI I made.

I've practically no html experience so your example might actually get me to first base if I could actually see it.

---

<div class="post-metadata">

**Author:** ![drmacro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmacro/32/1023_2.png) [@drmacro](https://discourse.nodered.org/u/drmacro)\
**Post date:** [12 July 2018 20:39 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/8 "2018-07-12T20:39:29Z")

</div>

Well, in a past life a did a reasonable amount of html...but, not saying this is "good" html, just working for me. 😉  
Apparently this forum attempts to interpret pasted html...and the preformatted \</\> breaks as soon as it hits a new tag or blank line. ☹

Grr...won't let me upload them because I'm a new user. WTF.

So, replace all the [with \< and] with\> in this:

[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]  
[td]Label[/td]  
[/tr]  
[/table]

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [12 July 2018 21:00 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/9 "2018-07-12T21:00:20Z")

</div>

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

```auto
<style>can safely be put here</style>
<div>and other html too</div>

```

---

<div class="post-metadata">

**Author:** ![drmacro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmacro/32/1023_2.png) [@drmacro](https://discourse.nodered.org/u/drmacro)\
**Post date:** [13 July 2018 12:51 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/10 "2018-07-13T12:51:10Z")

</div>

Now that's intuitively obvious...not. At least not to me. 🤨

```auto
<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>
<td>Label</td>
</tr>
</table>

```

Thanks.

---

<div class="post-metadata">

**Author:** ![WillWelker](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/willwelker/32/771_2.png) [@WillWelker](https://discourse.nodered.org/u/WillWelker)\
**Post date:** [15 July 2018 08:20 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/11 "2018-07-15T08:20:56Z")

</div>

Hey, I found that example useful! Thanks for posting. 👍

---

<div class="post-metadata">

**Author:** ![Backup](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/backup/32/862_2.png) [@Backup](https://discourse.nodered.org/u/Backup)\
**Post date:** [16 July 2018 02:25 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/12 "2018-07-16T02:25:43Z")

</div>

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

Thanks

---

<div class="post-metadata">

**Author:** ![drmacro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmacro/32/1023_2.png) [@drmacro](https://discourse.nodered.org/u/drmacro)\
**Post date:** [21 July 2018 16:55 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/13 "2018-07-21T16:55:10Z")

</div>

Just a note...  
I subsequently added a ui\_template node and pout the style tag portion of this code there.  
The style tag can then be be removed from this code and all "LEDs" will reference that style.

This way changes to the style will change all "LEDs".

Probably obvious to experienced node-red users...

---

<div class="post-metadata">

**Author:** ![yoiang](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yoiang/32/4831_2.png) [@yoiang](https://discourse.nodered.org/u/yoiang)\
**Post date:** [31 December 2018 07:56 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/14 "2018-12-31T07:56:23Z")

</div>

Hey y'all,  
Looking for a similar node to what you all have described I've published a Node-RED Dashboard UI LED node available here: [https://www.npmjs.com/package/node-red-contrib-ui-led](https://www.npmjs.com/package/node-red-contrib-ui-led)

If you give it a try let me know what you think, what you like and don't like, what works and doesn't work well. Feel free to add suggestions and bugs directly into the Github issues, or PRs if you get so far! 🙂

---

<div class="post-metadata">

**Author:** ![anton.wieser](https://avatars.discourse-cdn.com/v4/letter/a/34f0e0/32.png) [@anton.wieser](https://discourse.nodered.org/u/anton.wieser)\
**Post date:** [12 February 2019 09:13 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/15 "2019-02-12T09:13:39Z")

</div>

Hi,  
is it possible that the led only works in the first tab?

Thanks

---

<div class="post-metadata">

**Author:** ![yoiang](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yoiang/32/4831_2.png) [@yoiang](https://discourse.nodered.org/u/yoiang)\
**Post date:** [26 April 2019 15:28 UTC](https://discourse.nodered.org/t/simple-led-indicator-on-dashboard/1375/16 "2019-04-26T15:28:34Z")

</div>

Hey @anton.wieser!  
I apologize for the late reply. That is the case, looking into why here, you can follow the progress here: [https://github.com/Adorkable/node-red-contrib-ui-led/issues/29](https://github.com/Adorkable/node-red-contrib-ui-led/issues/29)