# Led icon changed

**URL:** <https://discourse.nodered.org/t/led-icon-changed/656>\
**Category:** Dashboard\
**Created:** [7 June 2018 09:21 UTC](https://discourse.nodered.org/t/led-icon-changed/656 "2018-06-07T09:21:01Z")\
**Posts on this page:** 8\
**Page:** 2

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [22 August 2021 18:06 UTC](https://discourse.nodered.org/t/led-icon-changed/656/21 "2021-08-22T18:06:36Z")

</div>

Hi @Gunner, thank you for your response.

Yes I am happy for this to be moved to something like 'dashboard template led array problems'.

I am simply trying to create a condensed array of leds whose colour matches an array of "#xxxxxx" values that originate from a flow persistent variable.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [22 August 2021 18:52 UTC](https://discourse.nodered.org/t/led-icon-changed/656/22 "2021-08-22T18:52:57Z")

</div>

Check your regex expression. I tried your first template code and I get no output until the regex is amended. No idea what it should be.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [22 August 2021 19:32 UTC](https://discourse.nodered.org/t/led-icon-changed/656/23 "2021-08-22T19:32:40Z")

</div>

> [@ozpos](#):
>
> trying to create a condensed array of leds whose colour matches an array of "#xxxxxx"

Perhaps this simplified version of previous examples is what you are looking for? The colours come from the inject and you can adjust the number of LEDS in the template as needed

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/e/4e2432ff3250f0821389abb2abbbfa83a169a59f.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/c/6cbd93c23b50baab1deb338f6601d7d57ccfc1cf.png)

```auto
[{"id":"af8166bcb063209c","type":"inject","z":"e152a286a73e145c","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"[\"#FF0000\",\"#00FF00\",\"#0000FF\"]","payloadType":"json","x":710,"y":2020,"wires":[["5c6f1216793cf3fa"]]},{"id":"5c6f1216793cf3fa","type":"ui_template","z":"e152a286a73e145c","group":"45a28b30640ff9a5","name":"LED Bar","order":1,"width":6,"height":1,"format":"<style>\n.led-square {\n float: right;\n padding: 3px;\n width: 24px;\n height: 10px;\n margin: 4px 2px 8px 0px;\n border-radius: 0%;\n}\n</style>\n\n\n<div>LED Bar\n<span class=\"led-square\" style=\"background-color: {{msg.payload[4]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[4]}} 0 3px 15px;\"></span>\n<span class=\"led-square\" style=\"background-color: {{msg.payload[3]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[3]}} 0 3px 15px;\"></span>\n<span class=\"led-square\" style=\"background-color: {{msg.payload[2]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[2]}} 0 3px 15px;\"></span>\n<span class=\"led-square\" style=\"background-color: {{msg.payload[1]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[1]}} 0 3px 15px;\"></span>\n<span class=\"led-square\" style=\"background-color: {{msg.payload[0]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[0]}} 0 3px 15px;\"></span>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":860,"y":2020,"wires":[[]]},{"id":"45a28b30640ff9a5","type":"ui_group","name":"LED Bar","tab":"2b177a1903e90f6f","order":17,"disp":true,"width":"6","collapse":false},{"id":"2b177a1903e90f6f","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [22 August 2021 19:36 UTC](https://discourse.nodered.org/t/led-icon-changed/656/24 "2021-08-22T19:36:26Z")

</div>

Hi @Buckskin , thank you. I have removed it altogether for now.

I have restarted from scratch a couple of times now and have something working but a few problems remain like how to prevent the displayed leds from arrays of length other than 32 in my case?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d0451c69e0f76aef7b5d08e9e2baad955099588b.png)  
This is what happens if the array length is 3:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/5/151bcd725f529d4932fb7d414bda2453f4adc3d6.png)  
Here is my current version:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/6472db63d0611585bba3b5e91e30222275ea6753.png)

```auto
[
    {
        "id": "77b9551a682cccf9",
        "type": "tab",
        "label": "Flow 3",
        "disabled": false,
        "info": ""
    },
    {
        "id": "7e1c80b7bacaa1eb",
        "type": "debug",
        "z": "77b9551a682cccf9",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 530,
        "y": 160,
        "wires": []
    },
    {
        "id": "edb3ddb6cd354130",
        "type": "ui_template",
        "z": "77b9551a682cccf9",
        "group": "879c5e97.07fff",
        "name": "LED Array",
        "order": 13,
        "width": "0",
        "height": "0",
        "format": "<script>\n(function($scope) {\n // Inspired by h t t p s://flows.nodered.org/user/Hugobox\n let led_count = 32\n let label = \"GPIO\"\n let initialised = false\n var bargraph = new Array(led_count).fill(\"#000000\")\n\n //From @Hotnip: cause a small delay while things load\n //ideally this would be an init event or on all parts of document loaded\n //(may not be necessary!)\n setTimeout(function() {\n //debugger\n $scope.init();\n },100);\n\n /**\n * Inform controller of browser refresh or nr server restart or deploy.\n */\n $scope.init = function () {\n //debugger\n console.log(\"$scope.init called.\");\n \n if(initialised == false){\n //debugger\n console.log(\"Sending _init_ msg\");\n $scope.send({payload: bargraph, topic: \"_init_\"});\n }\n };\n\n $scope.$watch('msg', function() {\n \n if ($scope.msg){\n if ($scope.msg.hasOwnProperty('payload') &&\n typeof $scope.msg.payload == \"object\" &&\n Array.isArray( $scope.msg.payload ) &&\n $scope.msg.payload.length <= led_count && \n $scope.msg.payload.length > 0 ){\n\n console.log(\"msg.payload[0]=\" + String($scope.msg.payload[0]) + \" typeof \" + typeof $scope.msg.payload + \" isArray \" + Array.isArray($scope.msg.payload) + \" length \" + $scope.msg.payload.length + \" typeof \" + typeof $scope.msg.payload[0])\n $scope.msg.label = label\n for(let i=0; i<led_count && i<$scope.msg.payload.length; i++){\n if ( typeof $scope.msg.payload[i] == 'string'){\n bargraph[i]=$scope.msg.payload[i]\n }\n }\n $scope.msg.bargraph = bargraph.reverse()\n $scope.msg.bargraph = bargraph.reverse()\n }else if (typeof $scope.msg.payload !== \"number\"){\n $scope.msg = {\"bargraph\":[...bargraph], \"payload\": 0, \"label\":label}\n } \n }else{\n $scope.msg = {\"bargraph\":[...bargraph], \"payload\": 0, \"label\":label}\n }\n });\n})(scope);\n</script>\n\n<style>\n.bargraph {\n float: right;\n padding: 3px;\n width: 3px;\n height: 10px;\n margin: 4px 2px 8px 0px;\n border-radius: 0%;\n}\n</style>\n\n<div>{{msg.label}}\n<div>\n <span ng-repeat=\"led in msg.payload track by $index\">\n <span class=\"bargraph\" style=\"background-color: {{msg.payload[$index]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[$index]}} 0 3px 15px;\"></span>\n </span>\n</div>\n</div>\n",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "x": 370,
        "y": 160,
        "wires": [
            [
                "7e1c80b7bacaa1eb",
                "52ab717f225a0b77"
            ]
        ]
    },
    {
        "id": "29bb58bf97a78ce9",
        "type": "inject",
        "z": "77b9551a682cccf9",
        "name": "32 colours",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[\"#0000ff\",\"#ff0000\",\"#00ff00\",\"#0000ff\",\"#ff0000\",\"#00ff00\",\"#0000ff\",\"#ff0000\",\"#00ff00\",\"#0000ff\",\"#ff0000\",\"#00ff00\",\"#0000ff\",\"#ff0000\",\"#00ff00\", \"#0000ff\",\"#ff0000\",\"#00ff00\",\"#0000ff\",\"#ff0000\",\"#00ff00\",\"#0000ff\",\"#ff0000\",\"#00ff00\",\"#0000ff\",\"#ff0000\",\"#00ff00\",\"#0000ff\",\"#ff0000\",\"#00ff00\",\"#0000ff\",\"#ff0000\"]",
        "payloadType": "jsonata",
        "x": 180,
        "y": 120,
        "wires": [
            [
                "edb3ddb6cd354130"
            ]
        ]
    },
    {
        "id": "81e0d7df3c97b312",
        "type": "inject",
        "z": "77b9551a682cccf9",
        "name": "3 colours",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[\"#ff0000\",\"#00ff00\",\"#0000ff\"]",
        "payloadType": "jsonata",
        "x": 180,
        "y": 80,
        "wires": [
            [
                "edb3ddb6cd354130"
            ]
        ]
    },
    {
        "id": "c3c3ef63ebd223ce",
        "type": "inject",
        "z": "77b9551a682cccf9",
        "name": "1 colour",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[\"#ffff00\"]",
        "payloadType": "jsonata",
        "x": 190,
        "y": 40,
        "wires": [
            [
                "edb3ddb6cd354130"
            ]
        ]
    },
    {
        "id": "9d69baab914b9193",
        "type": "inject",
        "z": "77b9551a682cccf9",
        "name": "empty array",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[]",
        "payloadType": "jsonata",
        "x": 390,
        "y": 40,
        "wires": [
            [
                "edb3ddb6cd354130"
            ]
        ]
    },
    {
        "id": "af5b84708f88cb03",
        "type": "comment",
        "z": "77b9551a682cccf9",
        "name": "sending empty array deleted the leds.",
        "info": "",
        "x": 430,
        "y": 280,
        "wires": []
    },
    {
        "id": "52ab717f225a0b77",
        "type": "function",
        "z": "77b9551a682cccf9",
        "name": "gpio",
        "func": "let gpio = flow.get(node.name);\nlet refresh_ui = false;\nlet cmd = String(msg.topic).split(\" \");\n\nswitch (cmd[0]){\n case \"_init_\":\n if (JSON.stringify(gpio.payload) !== JSON.stringify(msg.payload)) {\n refresh_ui = true;\n }\n break;\n\n case \"w\":\n let led = parseInt(msg.payload);\n if (led >= 0 && led < 32){\n gpio.payload[led] = cmd[1];\n flow.set(node.name, gpio);\n refresh_ui = true;\n }\n\n}\nif ( refresh_ui ){\n msg.topic = \"_init_\";\n msg.payload = gpio.payload;\n return msg;\n}\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "// Code added here will be run once\n// whenever the node is started.\nlet gpio = flow.get(node.name);\nif ( gpio === undefined){\n gpio = {\n payload: [\"#0000ff\", \"#ff0000\", \"#00ff00\", \"#0000ff\", \"#ff0000\", \"#00ff00\", \"#0000ff\", \"#ff0000\", \"#00ff00\", \"#0000ff\", \"#ff0000\", \"#00ff00\", \"#0000ff\", \"#ff0000\", \"#00ff00\", \"#0000ff\", \"#ff0000\", \"#00ff00\", \"#0000ff\", \"#ff0000\", \"#00ff00\", \"#0000ff\", \"#ff0000\", \"#00ff00\", \"#0000ff\", \"#ff0000\", \"#00ff00\", \"#0000ff\", \"#ff0000\", \"#00ff00\", \"#0000ff\", \"#ff0000\"],\n topic: \"_init_\"\n }\n flow.set(node.name, gpio);\n}\n",
        "finalize": "",
        "libs": [],
        "x": 370,
        "y": 200,
        "wires": [
            [
                "edb3ddb6cd354130",
                "d81a5f772e875be5"
            ]
        ]
    },
    {
        "id": "ff467ed83e025341",
        "type": "inject",
        "z": "77b9551a682cccf9",
        "name": "w #ffff00 to 0",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "w #ffff00",
        "payload": "0",
        "payloadType": "num",
        "x": 170,
        "y": 180,
        "wires": [
            [
                "52ab717f225a0b77"
            ]
        ]
    },
    {
        "id": "d81a5f772e875be5",
        "type": "debug",
        "z": "77b9551a682cccf9",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 530,
        "y": 200,
        "wires": []
    },
    {
        "id": "11f35c798c27084f",
        "type": "comment",
        "z": "77b9551a682cccf9",
        "name": "sending array length of 1 shows only one led leds.",
        "info": "",
        "x": 420,
        "y": 320,
        "wires": []
    },
    {
        "id": "95f023d4c0c7aa7b",
        "type": "inject",
        "z": "77b9551a682cccf9",
        "name": "w #ffff00 to 31",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "w #ffff00",
        "payload": "31",
        "payloadType": "num",
        "x": 170,
        "y": 220,
        "wires": [
            [
                "52ab717f225a0b77"
            ]
        ]
    },
    {
        "id": "20b47688438693c9",
        "type": "comment",
        "z": "77b9551a682cccf9",
        "name": "Outstanding Problems",
        "info": "",
        "x": 450,
        "y": 240,
        "wires": []
    },
    {
        "id": "879c5e97.07fff",
        "type": "ui_group",
        "name": "n:14.17.5 r:2.0.5 d:20.30.0",
        "tab": "105c5e70.b644f2",
        "order": 4,
        "disp": true,
        "width": "8",
        "collapse": true
    },
    {
        "id": "105c5e70.b644f2",
        "type": "ui_tab",
        "name": "dashboard template",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]
Thanks again for your reply.

```

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [22 August 2021 20:23 UTC](https://discourse.nodered.org/t/led-icon-changed/656/25 "2021-08-22T20:23:20Z")

</div>

If you only want to show the LEDs when the array is of the correct length then change

```auto
            if ($scope.msg.hasOwnProperty('payload') &&
                typeof $scope.msg.payload == "object" &&
                Array.isArray( $scope.msg.payload ) &&
                $scope.msg.payload.length <= led_count && 
                $scope.msg.payload.length > 0 ){

```

to

```auto
            if ($scope.msg.hasOwnProperty('payload') &&
                typeof $scope.msg.payload == "object" &&
                Array.isArray( $scope.msg.payload ) &&
                $scope.msg.payload.length === led_count && 
                $scope.msg.payload.length > 0 ){

```

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [22 August 2021 20:37 UTC](https://discourse.nodered.org/t/led-icon-changed/656/26 "2021-08-22T20:37:21Z")

</div>

Thank you. Just tried it but it makes the led array disappear altogether.  
It may be something to do with the else. I do not fully understand what this is:

```auto
            }else if (typeof $scope.msg.payload !== "number"){
                $scope.msg = {"bargraph":[...bargraph], "payload": 0, "label":label}
            }   
        }else{
            $scope.msg = {"bargraph":[...bargraph], "payload": 0, "label":label}
        }

```

In the original code msg.payload was a number. I do not know what to put here in its place ?  
P.S. I started a new topic [https://discourse.nodered.org/t/dashboard-template-led-array-problems/50022?u=ozpos](https://discourse.nodered.org/t/dashboard-template-led-array-problems/50022)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 August 2021 21:15 UTC](https://discourse.nodered.org/t/led-icon-changed/656/27 "2021-08-22T21:15:21Z")

</div>

Port number maybe? 1891 and not 1880?  
Though you didn't say what it was you wanted to load, so I am not sure myself.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [22 August 2021 21:22 UTC](https://discourse.nodered.org/t/led-icon-changed/656/28 "2021-08-22T21:22:49Z")

</div>

This shows white LEDs for any not given a colour and always shows `led_count` LEDs;

```auto
<script>
    (function($scope) {
        // Inspired by h t t p s://flows.nodered.org/user/Hugobox
        const led_count = 32
        const label = "GPIO"
        let initialised = false

        $scope.bargraph = new Array(led_count).fill("white")

        //From @Hotnip: cause a small delay while things load
        //ideally this would be an init event or on all parts of document loaded
        //(may not be necessary!)
        setTimeout(function() {
            //debugger
            $scope.init();
        }, 100);

        /**
        * Inform controller of browser refresh or nr server restart or deploy.
        */
        $scope.init = function () {
            //debugger
            console.log("$scope.init called.");
        
            if(initialised == false){
                //debugger
                console.log("Sending _init_ msg");
                $scope.send({payload: bargraph, topic: "_init_"});
            }
        };

        $scope.$watch('msg', function() {
        
            if ($scope.msg){
                if ($scope.msg.hasOwnProperty('payload') &&
                    typeof $scope.msg.payload == "object" &&
                    Array.isArray( $scope.msg.payload ) &&
                    $scope.msg.payload.length <= led_count && 
                    $scope.msg.payload.length > 0 ){

                    console.log("msg.payload[0]=" + String($scope.msg.payload[0]) + " typeof " + typeof $scope.msg.payload + " isArray " + Array.isArray($scope.msg.payload) + " length " + $scope.msg.payload.length + " typeof " + typeof $scope.msg.payload[0])
                    
                    $scope.msg.label = label
                
                    for(let i = 0; i < $scope.msg.payload.length; i++){
                        if (typeof $scope.msg.payload[i] == 'string'){
                            $scope.bargraph[i] = $scope.msg.payload[i]
                        }
                    }
                    $scope.msg.bargraph = $scope.bargraph.reverse()
                    $scope.msg.bargraph = $scope.bargraph.reverse()

                } else if (typeof $scope.msg.payload !== "number") {
                    $scope.msg = {"bargraph": [...$scope.bargraph], "payload": 0, "label": label}

                } else if ($scope.msg.payload.length === 0) {
                    $scope.bargraph = new Array(led_count).fill("white")

                }

            } else {
                $scope.msg = {"bargraph": [...$scope.bargraph], "payload": 0, "label": label}

            }

        });

    })(scope);

</script>

<style>
.bargraph {
    float: right;
    padding: 3px;
    width: 3px;
    height: 10px;
    margin: 4px 2px 8px 0px;
    border-radius: 0%;
}
</style>

<div>{{msg.label}}
<div>
    <span ng-repeat="led in bargraph track by $index">
        <span class="bargraph" style="background-color: {{bargraph[$index]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{bargraph[$index]}} 0 3px 15px;"></span>
    </span>
</div>
</div>

```

[Previous page](https://discourse.nodered.org/t/led-icon-changed/656.md?page=1)