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