# Make Leds on picture

**URL:** <https://discourse.nodered.org/t/make-leds-on-picture/86246>\
**Category:** Dashboard\
**Created:** [7 March 2024 17:06 UTC](https://discourse.nodered.org/t/make-leds-on-picture/86246 "2024-03-07T17:06:59Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Youssef](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@Youssef](https://discourse.nodered.org/u/Youssef)\
**Post date:** [7 March 2024 17:06 UTC](https://discourse.nodered.org/t/make-leds-on-picture/86246/1 "2024-03-07T17:06:59Z")

</div>

![boat](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/1/016e929ba50e6e95150273e638cef050e7c8e37d.png)  
Hello everyone !  
How i can make a picture like that in dashboard such the G/R icon i want them Leds and controllling them by slider node in the same flow

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [7 March 2024 17:11 UTC](https://discourse.nodered.org/t/make-leds-on-picture/86246/2 "2024-03-07T17:11:45Z")

</div>

There are at least 2 examples of this shared as Flows.

Here is the UIBUILDER based one:

[https://flows.nodered.org/flow/89487d20c635d54d9b98d963656ce429](https://flows.nodered.org/flow/89487d20c635d54d9b98d963656ce429)

There was one for Dashboard as well I think - can't see it in the flows, must be in the forum somewhere.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 March 2024 17:15 UTC](https://discourse.nodered.org/t/make-leds-on-picture/86246/3 "2024-03-07T17:15:37Z")

</div>

> [@Youssef](#):
>
> in dashboard

In node-red-dashboard, you can use SVG via the `node-red-contrib-ui-svg` node - see the [wiki here](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki)

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [7 March 2024 17:22 UTC](https://discourse.nodered.org/t/make-leds-on-picture/86246/4 "2024-03-07T17:22:43Z")

</div>

What @TotallyInformation has suggested will work and is probably a more recent solution than `node-red-contrib-ui-svg`

I used `node-red-contrib-ui-svg` about 2-years ago to show the status of a group of four Rasberry Pi(es) in a mini cluster. I took a photo of the hardware on my phone and used that as the background image, then added led icons that I could switch between red and green. I'm sorry - at the moment I can't find the flow, but there are quite a few examples in the wiki-link that @Steve-Mcl has provided.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [7 March 2024 20:45 UTC](https://discourse.nodered.org/t/make-leds-on-picture/86246/5 "2024-03-07T20:45:45Z")

</div>

To be fair, the solutions should be much the same except that the ui version works with Dashboard 1 of course and mine works with UIBUILDER.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [8 March 2024 14:27 UTC](https://discourse.nodered.org/t/make-leds-on-picture/86246/6 "2024-03-08T14:27:50Z")

</div>

> [@dynamicdave](#):
>
> I can't find the flow

This one ?

> [@Dashboard background Change?](https://discourse.nodered.org/t/dashboard-background-change/65961/3):
>
> It might be worth taking a look at the SVG node (there are loads of examples that should help). I've used it to place an image as a background on the dashboard, then change the colour of what looks like LEDs at various places on top of the image. Note: To avoid any confusion, I don't use an LED node, just a circular icon to represent the shape of an LED. This example is a photo of a mini tower of four RPi-3Bs. The grey coloured blobs are positioned at X, Y coords over where …

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [8 March 2024 15:05 UTC](https://discourse.nodered.org/t/make-leds-on-picture/86246/7 "2024-03-08T15:05:43Z")

</div>

Well done I was trying to find that posting on the Forum.  
Now if I could find the Node-RED flow as well we would be sorted?  
You are more than welcome to pop round to my house and help me look through the SSDs.

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [8 March 2024 18:11 UTC](https://discourse.nodered.org/t/make-leds-on-picture/86246/8 "2024-03-08T18:11:19Z")

</div>

I've eventually found the source files for the Node-RED posting that @smanjunath211 found, and have made a posting on 'share your projects'. I hope someone can make use of it.

> [@Server-Rack Monitor](https://discourse.nodered.org/t/server-rack-monitor/86284):
>
> I was prompted to try to find this old project, I created a few years ago, when someone on the forum asked about placing led-icons on an image on the dashboard. It took a while to find the Node-RED flow and remember "what-on-earth-did-I do-to-create-that". So the situation is I have a server rack of four Raspberry Pi(es) that report their core temperatures to a central flow that uses the SVG node to show a background photo overlaid with "led style" icons. Here's what my dashbo…

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [7 April 2024 18:11 UTC](https://discourse.nodered.org/t/make-leds-on-picture/86246/9 "2024-04-07T18:11:31Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.