# Interactive template LED designer

**URL:** <https://discourse.nodered.org/t/interactive-template-led-designer/92576>\
**Category:** Share Your Projects\
**Tags:** dashboard-2\
**Created:** [22 October 2024 10:52 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576 "2024-10-22T10:52:02Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 October 2024 10:52 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/1 "2024-10-22T10:52:02Z")

</div>

Using CSS box-shadow to make a pleasing LED glow is complicated, especially with multiple layers of shadow.

This flow lets me adjust most of the available parameters and immediately see the results in ui-templates with either dark or light backgrounds.  
It also generates code to reproduce the finished LED design in a stand-alone ui-template.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/72c6cae1d9fc26b3512f535b4807701c38cec16f.png)

![leddesignersmall](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/12f08bff348235e93873c42713c25a4aaa60bb10.gif)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9ff337d6f36cda4d8a1fb1199c6824589f939b82.png)

Issues/Questions  
There is a disabled template in the flow which uses [Teleport](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#teleports) to move an example LED template to the title bar but styling sent as msg.class or msg.ui\_update.class are ignored here.  
Maybe someone can comment if I am abusing it or this is a bug in the Teleport function?

---

_[View the full topic](https://discourse.nodered.org/t/interactive-template-led-designer/92576)._