LED Bar-graph Display

This flow adds a 10 segments LED Bar graph display to your dashboard (like an audio peak meter). It is easily customizable to change the number of LEDS and their on/off colors.

Here's the code in the ui_template, and below you'll find a flow example

<script>
(function($scope) {
    
let amount = 10 //amount of LEDs
let label = "LED bar Graph"
 
let on1 = "#00FF00"
let off1 = "#006600"
let on2 = "#FFFF00"
let off2 = "#666600"
let on3 = "#FF0000"
let off3 = "#660000"

let threshold1 = 1/2 // the limit between color 1 and color 2
let threshold2 = 4/5 //  the limit between color 2 and color 3

var bargraph = new Array(amount).fill("#000000")

$scope.$watch('msg', function() {
    
if ($scope.msg){
    if ($scope.msg.hasOwnProperty('payload') && typeof $scope.msg.payload == "number"){
        $scope.msg.label = label
        $scope.msg.payload = parseInt($scope.msg.payload)
    
        if ($scope.msg.payload > amount){
            $scope.msg.payload = amount
        }
        for (var i = 0; i < $scope.msg.payload; i++){
            if (i < amount*threshold1){
                bargraph[i] = on1
            }else if (i < amount*threshold2){
                bargraph[i] = on2
            }else{
                bargraph[i] = on3
            }
        }
        for (var i = $scope.msg.payload; i < amount; i++){
            if (i < amount*threshold1){
                bargraph[i] = off1
            }else if (i < amount*threshold2){
                bargraph[i] = off2
            }else{
                bargraph[i] = off3
            }
        }
        $scope.msg.bargraph = bargraph.reverse()
    }else if (typeof $scope.msg.payload !== "number"){
        $scope.msg = {"bargraph":[...bargraph], "payload": 0, "label":"Led Bar Graph"}
    }   
}else{
    $scope.msg = {"bargraph":[...bargraph], "payload": 0, "label":"Led Bar Graph"}
}
    });
})(scope);
</script>

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

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

Copy[{"id":"45b3bd91.bf2d64","type":"inject","z":"dc84661.55bfb98","name":"","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":180,"wires":[["4f9e4d92.50e484"]]},{"id":"c5b9974.41e9f68","type":"inject","z":"dc84661.55bfb98","name":"","topic":"","payload":"2","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":220,"wires":[["4f9e4d92.50e484"]]},{"id":"7d9a5a99.bfbee4","type":"inject","z":"dc84661.55bfb98","name":"","topic":"","payload":"3","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":260,"wires":[["4f9e4d92.50e484"]]},{"id":"80d4cde3.d1f6a","type":"inject","z":"dc84661.55bfb98","name":"","topic":"","payload":"4","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":300,"wires":[["4f9e4d92.50e484"]]},{"id":"ddb93c3b.31079","type":"inject","z":"dc84661.55bfb98","name":"","topic":"","payload":"5","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":340,"wires":[["4f9e4d92.50e484"]]},{"id":"fb30e141.81e7b","type":"inject","z":"dc84661.55bfb98","name":"","topic":"","payload":"6","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":380,"wires":[["4f9e4d92.50e484"]]},{"id":"91699d2b.0de8","type":"inject","z":"dc84661.55bfb98","name":"","topic":"","payload":"7","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":420,"wires":[["4f9e4d92.50e484"]]},{"id":"daa5a739.f7f4b8","type":"inject","z":"dc84661.55bfb98","name":"","topic":"","payload":"8","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":460,"wires":[["4f9e4d92.50e484"]]},{"id":"7d9d8fd2.ef72c","type":"inject","z":"dc84661.55bfb98","name":"","topic":"","payload":"9","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":500,"wires":[["4f9e4d92.50e484"]]},{"id":"aa6b29c1.3ba638","type":"inject","z":"dc84661.55bfb98","name":"","topic":"","payload":"10","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":540,"wires":[["4f9e4d92.50e484"]]},{"id":"e55cf93d.8f2df8","type":"inject","z":"dc84661.55bfb98","name":"","topic":"","payload":"11","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":580,"wires":[["4f9e4d92.50e484"]]},{"id":"4f9e4d92.50e484","type":"ui_template","z":"dc84661.55bfb98","group":"b03bb86e.990f38","name":"LED Bar-graph Display","order":13,"width":"0","height":"0","format":"<script>\n(function($scope) {\n    \nlet amount = 10 //amount of LEDs\nlet label = \"LED bar Graph\"\n \nlet on1 = \"#00FF00\"\nlet off1 = \"#006600\"\nlet on2 = \"#FFFF00\"\nlet off2 = \"#666600\"\nlet on3 = \"#FF0000\"\nlet off3 = \"#660000\"\n\nlet threshold1 = 1/2 // the limit between color 1 and color 2\nlet threshold2 = 4/5 //  the limit between color 2 and color 3\n\nvar bargraph = new Array(amount).fill(\"#000000\")\n\n$scope.$watch('msg', function() {\n    \nif ($scope.msg){\n    if ($scope.msg.hasOwnProperty('payload') && typeof $scope.msg.payload == \"number\"){\n        $scope.msg.label = label\n        $scope.msg.payload = parseInt($scope.msg.payload)\n    \n        if ($scope.msg.payload > amount){\n            $scope.msg.payload = amount\n        }\n        for (var i = 0; i < $scope.msg.payload; i++){\n            if (i < amount*threshold1){\n                bargraph[i] = on1\n            }else if (i < amount*threshold2){\n                bargraph[i] = on2\n            }else{\n                bargraph[i] = on3\n            }\n        }\n        for (var i = $scope.msg.payload; i < amount; i++){\n            if (i < amount*threshold1){\n                bargraph[i] = off1\n            }else if (i < amount*threshold2){\n                bargraph[i] = off2\n            }else{\n                bargraph[i] = off3\n            }\n        }\n        $scope.msg.bargraph = bargraph.reverse()\n    }else if (typeof $scope.msg.payload !== \"number\"){\n        $scope.msg = {\"bargraph\":[...bargraph], \"payload\": 0, \"label\":\"Led Bar Graph\"}\n    }   \n}else{\n    $scope.msg = {\"bargraph\":[...bargraph], \"payload\": 0, \"label\":\"Led Bar Graph\"}\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<span ng-repeat=\"led in msg.bargraph track by $index\">\n    <span class=\"bargraph\" style=\"background-color: {{led}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{led}} 0 3px 15px;\"></span>\n</span>\n</div>\n","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":600,"y":300,"wires":[[]]},{"id":"b03bb86e.990f38","type":"ui_group","z":"","name":"Default","tab":"bc78a8d.fba5b58","disp":true,"width":"6","collapse":false},{"id":"bc78a8d.fba5b58","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard","order":2}]