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
    }
]
Hugobox

Flow Info

created 1 year, 2 months ago
updated 1 month, 3 weeks ago

Node Types

Core
  • inject (x11)
Other
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)

Tags

  • led
  • UI
  • bar-graph
  • meter
  • display
  • ui-template
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option