# Dual Display LED Indicator **URL:** \ **Category:** Dashboard\ **Created:** [13 June 2022 16:26 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870 "2022-06-13T16:26:31Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\ **Post date:** [13 June 2022 16:26 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/1 "2022-06-13T16:26:31Z")
Hi Guys!! In my home auto system, on another package, I was able to create a "Dual" LED by overlaying one LED over another... This package is on my short list to be culled soon in favour of Node Red Dashboard. I would dearly like to do a similar "LED" on the NR side of things, for example: ![screenshot-192.168.0.118-2022.06.13-18_20_12](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/64c4aa25cf042402864aefadafeee735c3df75b4.png) The blue background indicates the device is under "Auto Control" ... The Green centre indicates that it is currently in an "on" state.... Any pointers as to how I could go about this? (bear in mind, I am a professional eejut where it comes to things even slightly beyond the average!!) TIA Ed ---
**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\ **Post date:** [13 June 2022 21:56 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/2 "2022-06-13T21:56:37Z")
Have you looked at `node-red-contrib-ui-led`? ---
**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\ **Post date:** [13 June 2022 22:00 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/3 "2022-06-13T22:00:43Z")
Try something like this in a template node (Dashboard) set to `Added to site section` ```auto ``` ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd9fb62658552f4ae01ba055c901513d2c1aed61.png) ---
**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\ **Post date:** [14 June 2022 07:27 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/4 "2022-06-14T07:27:02Z")
Hi Paul, I am using that LED already, the problem for me is overlaying it with a second,smaller diameter, indicator colour .... Regds Ed ---
**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\ **Post date:** [14 June 2022 07:31 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/5 "2022-06-14T07:31:26Z")
Hi Jeff, That is pretty much, EXACTLY what I am hoping to achieve!! But, unfortunately, being a brain cripple in the area of template node authoring, it is waaaay above my fireplace!! I will try and give it a go though!! Thanks sooo much for the pointer!! Regds Ed ---
**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:** [14 June 2022 12:28 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/6 "2022-06-14T12:28:37Z")
Not so elegant, but i do something like this to achieve what you want (almost) ```auto [{"id":"64c5b7ac1226eb4b","type":"change","z":"c2f9171804efc2f3","name":"MANUAL","rules":[{"t":"set","p":"bc","pt":"msg","to":"lightblue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":680,"y":920,"wires":[["e6a8cf972b47c972"]]},{"id":"df45e243dd46cd00","type":"switch","z":"c2f9171804efc2f3","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":530,"y":900,"wires":[["d145ba7674727f1c"],["64c5b7ac1226eb4b"]]},{"id":"e6a8cf972b47c972","type":"ui_button","z":"c2f9171804efc2f3","name":"STATUS","group":"cda860da59b77b03","order":3,"width":"5","height":"2","passthru":false,"label":"{{label}}","tooltip":"","color":"{{fc}}","bgcolor":"{{bc}}","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":900,"y":940,"wires":[[]]},{"id":"ecc84a5c5017eae3","type":"ui_switch","z":"c2f9171804efc2f3","name":"","label":"AUTO/MANUAL","tooltip":"","group":"cda860da59b77b03","order":1,"width":"6","height":"2","passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":360,"y":900,"wires":[["df45e243dd46cd00"]]},{"id":"d145ba7674727f1c","type":"change","z":"c2f9171804efc2f3","name":"AUTO","rules":[{"t":"set","p":"bc","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":880,"wires":[["e6a8cf972b47c972"]]},{"id":"f1a5f144d8824ae9","type":"change","z":"c2f9171804efc2f3","name":"ON","rules":[{"t":"set","p":"label","pt":"msg","to":"ON","tot":"str"},{"t":"set","p":"fc","pt":"msg","to":"white","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":980,"wires":[["e6a8cf972b47c972"]]},{"id":"85685df3070e73ae","type":"change","z":"c2f9171804efc2f3","name":"OFF","rules":[{"t":"set","p":"label","pt":"msg","to":"OFF","tot":"str"},{"t":"set","p":"fc","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":1020,"wires":[["e6a8cf972b47c972"]]},{"id":"9b48d6c1db3f99e3","type":"switch","z":"c2f9171804efc2f3","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":530,"y":980,"wires":[["f1a5f144d8824ae9"],["85685df3070e73ae"]]},{"id":"8e981e3f33059c56","type":"ui_switch","z":"c2f9171804efc2f3","name":"","label":"ON/OFF","tooltip":"","group":"cda860da59b77b03","order":2,"width":"6","height":"2","passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":380,"y":980,"wires":[["9b48d6c1db3f99e3"]]},{"id":"cda860da59b77b03","type":"ui_group","name":"DISPLAY","tab":"62d102ab34e6a898","order":5,"disp":false,"width":"6","collapse":false,"className":""},{"id":"62d102ab34e6a898","type":"ui_tab","name":"HOME","icon":"dashboard","order":1,"disabled":false,"hidden":false}] ``` ---
**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\ **Post date:** [14 June 2022 17:18 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/7 "2022-06-14T17:18:15Z")
I wanted to tackle this challenge by passing a custom CSS class to the node-red-contrib-ui-led node. It already has internal and external box shadows giving the LED glow effect Presumably the external glow could indicate auto/manual and the internal on/off. Unfortunately that node has not been updated with the Dashboard 3 msg.className feature. So now I'm considering wrapping the LED node in a template to get more control over it. I'm sure I've seen somewhere in the forum a standard ui widget wrapped in a template but I can't find it. Can someone please point me in the right direction? ---
**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\ **Post date:** [14 June 2022 20:13 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/8 "2022-06-14T20:13:39Z")
> [@jbudd](#): > > Unfortunately that node has not been updated with the Dashboard 3 msg.className feature. Have you opened an issue in the nodes GitHub page asking for this? ---
**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\ **Post date:** [15 June 2022 08:26 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/9 "2022-06-15T08:26:34Z")
Not exactly sure what you were after but this is a `ui_template` version of an LED. The CSS I use with it is also down below. Someone a bit cleverer than me can probably work out how to automatically generate the colour class. ```auto
``` ```auto ``` ---
**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:** [15 June 2022 09:39 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/10 "2022-06-15T09:39:53Z")
Here's another approach to get colors for led type of things a bit more easily. Also included an example for two-color led as it was asked initially. ```auto [{"id":"ebb5f1d239c7b697","type":"ui_template","z":"9141c3fbcc7d9e2b","group":"f6124e036e2d2ffb","name":"CSS","order":12,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":890,"y":1240,"wires":[[]]},{"id":"7738dcea5490dab0","type":"ui_template","z":"9141c3fbcc7d9e2b","group":"f6124e036e2d2ffb","name":"led stripe","order":11,"width":"5","height":"1","format":"
\n
\n
\n
\n
\n
\n
\n
\n
\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"led-stripe-container","x":900,"y":1320,"wires":[[]]},{"id":"bb9008528aec954a","type":"ui_template","z":"9141c3fbcc7d9e2b","group":"f6124e036e2d2ffb","name":"double led","order":11,"width":"1","height":"1","format":"
\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"led-container","x":910,"y":1280,"wires":[[]]},{"id":"f3ebf334cceccde6","type":"inject","z":"9141c3fbcc7d9e2b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"led","payload":"","payloadType":"date","x":600,"y":1320,"wires":[["a6d1e1e9acb18c15"]]},{"id":"a6d1e1e9acb18c15","type":"function","z":"9141c3fbcc7d9e2b","name":"","func":"msg.payload = []\nfor(var i = 0;i<10;++i){\n var o = {}\n o.index = i\n o.color = Math.floor(Math.random()*360)\n msg.payload.push(o)\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":760,"y":1320,"wires":[["7738dcea5490dab0"]]},{"id":"f6124e036e2d2ffb","type":"ui_group","name":"Default","tab":"34ab7d39f3e308fc","order":1,"disp":true,"width":"5","collapse":false,"className":""},{"id":"34ab7d39f3e308fc","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}] ``` ---
**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\ **Post date:** [15 June 2022 15:45 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/11 "2022-06-15T15:45:51Z")
Different! (And I actually understood how this one works!!) Thanks for the hint and Idea!! E ---
**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\ **Post date:** [15 June 2022 15:49 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/12 "2022-06-15T15:49:29Z")
Gave it a try, but ran around in circles, no luck.... Uhhh..... I'm a bit "lost" with this one... But thanks for posting!! (Those with more grey matter than me would defs have better success than I did!!) E ---
**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\ **Post date:** [15 June 2022 15:54 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/13 "2022-06-15T15:54:32Z")
Pretty much EXACTLY what I am trying to do!! I am gonna spend another couple of hours and see if I can get it going properly... Uhhh.... Nope... Let me rather say "Spend a few hours trying to learn how to make it do what I want!!" Thanks hotNipi !! I will report back when I have something intelligent (or rather, less stoopid) to add or ask!! E ---
**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\ **Post date:** [16 June 2022 12:47 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/14 "2022-06-16T12:47:54Z")
Hey @hotNipi ... Ok.... So I think I have an idea as to how to control it... (The dual led, that is..) In the `double led` template, the line: `
` refers to the two numeric colour codes, 150 being the outer colour and 10 being the inner(duh)... I changed it to: `
` and then fed it via a couple of inject nodes.... It seems to work! (Is there perhaps a better way of doing it?) Now... The colours.... What colour table does the number represent? Can it be changed to say RGB or something else, more literal maybe, like injecting "yellow" or "orange" etc via the inject node...? Thanks heaps!! Regds Ed ---
**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\ **Post date:** [16 June 2022 13:28 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/15 "2022-06-16T13:28:47Z")
I would guess its a standard color wheel - eg [https://www.w3schools.com/colors/colors\_picker.asp](https://www.w3schools.com/colors/colors_picker.asp) ---
**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:** [16 June 2022 13:46 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/16 "2022-06-16T13:46:43Z")
The value is the hue component of the HSL color. [Colors HSL and HSLA](https://www.w3schools.com/colors/colors_hsl.asp) It is used for led background and with the shadows. It is as simple as it can get. You have to define or change only one number. Well two numbers of course in case of double led. > [@eddee54455](#): > > is there perhaps a better way of doing it? Your way is simplest and works. And as the content of the ui\_template is also very minimal, there is no reason for more complex things. But as always - it depends what you are expecting the widget will do for you. If you going to make it somehow smarter, it may require more specific treatment. > [@eddee54455](#): > > injecting "yellow" or "orange" It is possible but somewhere must be some kind of mapping to translate "yellow" to corresponding number. And that is as previously said "making the widget smarter" ---
**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\ **Post date:** [16 June 2022 15:51 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/17 "2022-06-16T15:51:30Z")
Hey hey!! All noted, possibly the only thing I would like to do to make the widget a bit smarter is to let it "auto choose" the colour displayed given one of 3 options for the inner and outer colours... I have put together a simple way around it using a function node, but there is probably a waaaay better way of doing it.... Here is my simplistic function node attempt (don't laugh!! ... It only took about 2hrs of messing about to do it...Lol... There were quite a few things I tried that didn't work) ```auto /* darkred hsl(346 100% 30%) red hsl(359 93% 49%) lightgreen hsl(127 100% 46%) green hsl(123 100% 29%) lightblue hsl(186 100% 48%) blue hsl(230 100% 45%) yellow hsl(54 100% 61%) orange hsl(29 100% 52%) purple hsl(278 100% 52%) black hsl(0 0% 0%) grey hsl(0 6% 69%) pink hsl(300 100% 83%) */ if(msg.inner === 0){msg.inner = "359 93% 49%"}//Red if(msg.inner === 1){msg.inner = "123 100% 29%"}//Green if(msg.inner === 2){msg.inner = "230 100% 45%"}//Blue if(msg.outer === 0){msg.outer = "359 93% 49%"}//Red if(msg.outer === 1){msg.outer = "123 100% 29%"}//Green if(msg.outer === 2){msg.outer = "230 100% 45%"}//Blue return msg; ``` I did try to combine the function node with the widget and slap them into a subflow.... Had "unpredictable" results.... I am not sure how well the NR dashboard handles subflows, so I backed out quietly.... It would be nice for me to have a single "Dual LED Widget" node rather than have to tack on a function node, but I am immensely happy with it even as it now stands!! I kicked my other home auto dashboard, non-node-red-software, out yesterday and this will go a long way to getting similar looks....(But with lower cpu overheads!!) Thanks BIG time!! Ed ---
**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:** [16 June 2022 17:04 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/18 "2022-06-16T17:04:37Z")
> [@eddee54455](#): > > I am not sure how well the NR dashboard handles subflows Not supported. Some things do work but zero guarantees. Use regular flows. > [@eddee54455](#): > > `msg.inner = "230 100% 45%"}//Blue` So you want to have full control over the HSL color components. That takes to make all components dynamic not only the hue. This will lead you to the CSS (styling) world. All the CSS is in the other ui\_template with name CSS as you probably already noticed. ```auto .led { border-radius: 2em; width: 1em; height: 1em; background-color: hsl(var(--ledcolor) 100% 50%); box-shadow: 0 0 6px 3px hwb(var(--ledcolor) 0% 49%), inset 0px -5px 6px -3px hsl(var(--ledcolor) 100% 30%); } ``` This line: ```auto background-color: hsl(var(--ledcolor) 100% 50%); ``` As you see, the variable is used only for hue component. But you can make them all as variables. For example: ```auto background-color: hsl(var(--hue) var(--saturation) var(--lightness)); ``` And then you'll need to change the ui\_template accordingly and also the incoming message should provide all those values. Also the shadows use variables. You can play with them also. Best tool for this is [browser developer tool](https://developer.chrome.com/docs/devtools/css/) where you can change values for any CSS rule and see immediate results. Then If you are satisfied, copy the changed rule to have it as permanent with your creation. That way you have full control over the led appearance. ---
**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\ **Post date:** [16 June 2022 21:43 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/19 "2022-06-16T21:43:46Z")
> [@eddee54455](#): > > All noted, possibly the only thing I would like to do to make the widget a bit smarter is to let it "auto choose" the colour displayed given one of 3 options for the inner and outer colours... There is an example of colour calculated from the value of a msg property at [https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256](https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256) In that case it's the background colour which changes according to the value of msg.payload. It may be applicable to your LED. ---
**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\ **Post date:** [18 June 2022 11:12 UTC](https://discourse.nodered.org/t/dual-display-led-indicator/63870/20 "2022-06-18T11:12:46Z")
Hey O great CSS oracle!! This here: > [@hotNipi](#): > > `box-shadow: 0 0 6px 3px hwb(var(--ledcolor) 0% 49%),` Shouldn't it be "3px hsl(var"....? I have been trying for the last couple of days to work out why I am getting some weird colours coming up.... (Don't wanna change anything in case I break it properly!!) Regds Ed [Next page](https://discourse.nodered.org/t/dual-display-led-indicator/63870.md?page=2)