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.

[
    {
        "id": "3cacdc28.8b7e94",
        "type": "ui_template",
        "z": "3dc8ae0.6cb8152",
        "group": "389342d0.c465ce",
        "name": "LED Bar-graph Display",
        "order": 13,
        "width": "0",
        "height": "0",
        "format": "<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}\n</style>\n\n<div>Bar led graph\n<span class=\"bargraph\" style=\"background-color: {{msg.payload[9]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[9]}} 0 3px 15px;\"></span>\n<span class=\"bargraph\" style=\"background-color: {{msg.payload[8]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[8]}} 0 3px 15px;\"></span>\n<span class=\"bargraph\" style=\"background-color: {{msg.payload[7]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[7]}} 0 3px 15px;\"></span>\n<span class=\"bargraph\" style=\"background-color: {{msg.payload[6]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[6]}} 0 3px 15px;\"></span>\n<span class=\"bargraph\" style=\"background-color: {{msg.payload[5]}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{msg.payload[5]}} 0 3px 15px;\"></span>\n<span class=\"bargraph\" 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=\"bargraph\" 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=\"bargraph\" 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=\"bargraph\" 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=\"bargraph\" 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>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 760,
        "y": 1660,
        "wires": [
            []
        ]
    },
    {
        "id": "185277ce.523cc8",
        "type": "function",
        "z": "3dc8ae0.6cb8152",
        "name": "LED colors",
        "func": "var bargraph = [\"#006600\",\"#006600\",\"#006600\",\"#006600\",\"#006600\",\"#666600\",\"#666600\",\"#666600\",\"#660000\",\"#660000\"];\nvar bargraphON = [\"#00FF00\",\"#00FF00\",\"#00FF00\",\"#00FF00\",\"#00FF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FF0000\",\"#FF0000\"];\n\nfor (var i = 0; i < msg.payload; i++){\n    bargraph[i] = bargraphON[i];\n}\nmsg.payload = bargraph;\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 550,
        "y": 1660,
        "wires": [
            [
                "3cacdc28.8b7e94"
            ]
        ]
    },
    {
        "id": "5fc04e00.6c0d24",
        "type": "inject",
        "z": "3dc8ae0.6cb8152",
        "name": "",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "repeat": "0.1",
        "crontab": "",
        "once": false,
        "x": 250,
        "y": 1660,
        "wires": [
            [
                "c5ee2fa3.7ea57"
            ]
        ]
    },
    {
        "id": "c5ee2fa3.7ea57",
        "type": "function",
        "z": "3dc8ae0.6cb8152",
        "name": "",
        "func": "msg.payload = msg.payload%11;\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 410,
        "y": 1660,
        "wires": [
            [
                "185277ce.523cc8"
            ]
        ]
    },
    {
        "id": "389342d0.c465ce",
        "type": "ui_group",
        "z": "",
        "name": "Other UI",
        "tab": "52aaa596.768b7c",
        "order": 3,
        "disp": true,
        "width": "6"
    },
    {
        "id": "52aaa596.768b7c",
        "type": "ui_tab",
        "z": "",
        "name": "Angular UI templates",
        "icon": "dashboard"
    }
]
Hugobox

Flow Info

created 7 months, 3 weeks ago

Node Types

Core
  • function (x2)
  • inject (x1)
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