Led icon changed

Dashboard
21

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.

22

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.

23

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
image

[{"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}]
24

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
This is what happens if the array length is 3:
image
Here is my current version:
image

[
    {
        "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.
25

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

            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

            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 ){
26

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:

            }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

27

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.

28

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

<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>