How to realise a animated Battery Charge Gauge

Hi there,

i'd like to animate a battery gauge while it's charging. Is that possible?

Like a battery symbol of a smartphone ... goes from 0 to the actual state of charged power.

The payload is a number of course. Ahh, and of course for the Dashboard.

Thx in advance

It should be possible.

You may need to clarify which icon/s you want to use though.

Here is one I bashed together using standard nodes:

[
    {
        "id": "a086c7850dfaad73",
        "type": "switch",
        "z": "0918ee609bf69fc7",
        "name": "",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "0",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "2",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "3",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "4",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "5",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 6,
        "x": 480,
        "y": 3140,
        "wires": [
            [
                "deea239f04bea5e3"
            ],
            [
                "d450ae59132f9e00"
            ],
            [
                "0a751a681f1cb17b"
            ],
            [
                "058f3e5f4f599ad3"
            ],
            [
                "b6dfd44c6c7a7b18",
                "5d106576aec0ab99"
            ],
            []
        ]
    },
    {
        "id": "5c8ab540e0508555",
        "type": "change",
        "z": "0918ee609bf69fc7",
        "name": "",
        "rules": [
            {
                "t": "move",
                "p": "count",
                "pt": "msg",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 410,
        "y": 3390,
        "wires": [
            [
                "53c4db2794cd7c67",
                "a086c7850dfaad73"
            ]
        ]
    },
    {
        "id": "deea239f04bea5e3",
        "type": "change",
        "z": "0918ee609bf69fc7",
        "name": "Battery 0",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "<i class=\"fa fa-battery-0 fa-3x\"></i>",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 680,
        "y": 3060,
        "wires": [
            [
                "10fdd6158395269b"
            ]
        ]
    },
    {
        "id": "d450ae59132f9e00",
        "type": "change",
        "z": "0918ee609bf69fc7",
        "name": "Battery 1",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "<i class=\"fa fa-battery-1 fa-3x\"></i>",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 680,
        "y": 3100,
        "wires": [
            [
                "10fdd6158395269b"
            ]
        ]
    },
    {
        "id": "0a751a681f1cb17b",
        "type": "change",
        "z": "0918ee609bf69fc7",
        "name": "Battery 2",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "<i class=\"fa fa-battery-2 fa-3x\"></i>",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 680,
        "y": 3140,
        "wires": [
            [
                "10fdd6158395269b"
            ]
        ]
    },
    {
        "id": "058f3e5f4f599ad3",
        "type": "change",
        "z": "0918ee609bf69fc7",
        "name": "Battery 3",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "<i class=\"fa fa-battery-3 fa-3x\"></i>",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 680,
        "y": 3180,
        "wires": [
            [
                "10fdd6158395269b"
            ]
        ]
    },
    {
        "id": "b6dfd44c6c7a7b18",
        "type": "change",
        "z": "0918ee609bf69fc7",
        "name": "Battery 4",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "<i class=\"fa fa-battery-4 fa-3x\"></i>",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 680,
        "y": 3220,
        "wires": [
            [
                "10fdd6158395269b"
            ]
        ]
    },
    {
        "id": "5d106576aec0ab99",
        "type": "delay",
        "z": "0918ee609bf69fc7",
        "name": "",
        "pauseType": "delay",
        "timeout": "600",
        "timeoutUnits": "milliseconds",
        "rate": "1",
        "nbRateUnits": "1",
        "rateUnits": "second",
        "randomFirst": "1",
        "randomLast": "5",
        "randomUnits": "seconds",
        "drop": false,
        "allowrate": false,
        "outputs": 1,
        "x": 460,
        "y": 3210,
        "wires": [
            [
                "b14a7d665908881a"
            ]
        ]
    },
    {
        "id": "881be7a1b58d17f2",
        "type": "counter",
        "z": "0918ee609bf69fc7",
        "name": "",
        "init": "0",
        "step": "1",
        "lower": null,
        "upper": null,
        "mode": "increment",
        "outputs": "1",
        "x": 130,
        "y": 3390,
        "wires": [
            [
                "5c8ab540e0508555"
            ]
        ]
    },
    {
        "id": "53c4db2794cd7c67",
        "type": "debug",
        "z": "0918ee609bf69fc7",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 610,
        "y": 3390,
        "wires": []
    },
    {
        "id": "10fdd6158395269b",
        "type": "ui_text",
        "z": "0918ee609bf69fc7",
        "group": "8d835359f414e4a6",
        "order": 0,
        "width": "3",
        "height": "1",
        "name": "",
        "label": "text",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 910,
        "y": 3060,
        "wires": []
    },
    {
        "id": "b14a7d665908881a",
        "type": "change",
        "z": "0918ee609bf69fc7",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "reset",
                "pt": "msg",
                "to": "reset",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 410,
        "y": 3350,
        "wires": [
            [
                "881be7a1b58d17f2"
            ]
        ]
    },
    {
        "id": "aeb14dfe843c619a",
        "type": "trigger",
        "z": "0918ee609bf69fc7",
        "name": "",
        "op1": "1",
        "op2": "0",
        "op1type": "str",
        "op2type": "str",
        "duration": "-600",
        "extend": false,
        "overrideDelay": false,
        "units": "ms",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 170,
        "y": 3350,
        "wires": [
            [
                "881be7a1b58d17f2"
            ]
        ]
    },
    {
        "id": "99dba43f2811f173",
        "type": "ui_button",
        "z": "0918ee609bf69fc7",
        "name": "",
        "group": "8d835359f414e4a6",
        "order": 1,
        "width": "2",
        "height": "1",
        "passthru": false,
        "label": "STOP",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "STOP",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 250,
        "y": 3310,
        "wires": [
            [
                "47662acbc8d008cc",
                "b14a7d665908881a"
            ]
        ]
    },
    {
        "id": "3780bb32d7b764f9",
        "type": "ui_button",
        "z": "0918ee609bf69fc7",
        "name": "",
        "group": "8d835359f414e4a6",
        "order": 1,
        "width": "2",
        "height": "1",
        "passthru": false,
        "label": "Start",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "X",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 120,
        "y": 3310,
        "wires": [
            [
                "aeb14dfe843c619a"
            ]
        ]
    },
    {
        "id": "47662acbc8d008cc",
        "type": "change",
        "z": "0918ee609bf69fc7",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "reset",
                "pt": "msg",
                "to": "true",
                "tot": "bool"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 410,
        "y": 3310,
        "wires": [
            [
                "aeb14dfe843c619a"
            ]
        ]
    },
    {
        "id": "8d835359f414e4a6",
        "type": "ui_group",
        "name": "Battery",
        "tab": "9e1ed5e519ff655f",
        "order": 3,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "9e1ed5e519ff655f",
        "type": "ui_tab",
        "name": "TEST",
        "icon": "dashboard",
        "order": 39,
        "disabled": false,
        "hidden": false
    }
]

That´s in the right direction. So i can use parts of this to create my own ... THX.

That´s the first time i see that you can use pictures in a text node. good to know

Can you shared which 'counter' node you used in your flow?

node-red-contrib-counter

1 Like

@Frida beat me to the answer.

(After thought)

Aren't any foreign nodes fully listed and so you see their name?
No problems and sorry I forgot to declare it when I posted.

I probably should have just gone with a function node doing a basic version of that to keep it Pure.

@Flixm Here is one that relies on css
input is payload 0-100 and charging true/false

[{"id":"b0c89c83.dcc028","type":"ui_button","z":"20bb0f7f9fab47a8","name":"","group":"2d4fe667.28f8ba","order":13,"width":0,"height":0,"passthru":false,"label":"charging","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":110,"y":840,"wires":[["3987eddd.60cce2"]]},{"id":"3987eddd.60cce2","type":"change","z":"20bb0f7f9fab47a8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$floor($random()*101)","tot":"jsonata"},{"t":"set","p":"charging","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":270,"y":840,"wires":[["dc0faf93.ca5cb"]]},{"id":"dc0faf93.ca5cb","type":"function","z":"20bb0f7f9fab47a8","name":"","func":"const percentages = [\n    \"0% { content: \\\"\\\\f244\\\"; }\",\n    \"20% { content: \\\"\\\\f243\\\"; }\",\n    \"40% { content: \\\"\\\\f242\\\"; }\",\n    \"60% { content: \\\"\\\\f241\\\"; }\",\n    \"80% { content: \\\"\\\\f240\\\"; }\"\n]; \nif(msg.charging === true){\n    if(msg.payload > 75){\n        msg.icon = 5;\n    }else if(msg.payload > 50){\n        msg.icon = 4;\n    }else if(msg.payload > 25){\n        msg.icon = 3;\n    }else{\n        msg.icon = 2;\n    }\n    msg.levels = percentages.slice(0, msg.icon).join(\"\\n\");\n    msg.icon =\"fa fa-battery-charging\";\n    msg.charging = \"true\";\n}else{\n    msg.charging = \"false\";\n    if(msg.payload > 99) {\n        msg.icon = \"fa fa-battery-full\";\n    }else if(msg.payload > 66){\n        msg.icon = \"fa fa-battery-three-quarters\";\n    }else if(msg.payload > 33){\n        msg.icon = \"fa fa-battery-half\";\n    }else if(msg.payload > 0){\n        msg.icon = \"fa fa-battery-quarter\";\n    }else{\n        msg.icon = \"fa fa-battery-empty\";\n    }\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":270,"y":920,"wires":[["87504ce7.34795"]]},{"id":"3346006b.bd22c","type":"change","z":"20bb0f7f9fab47a8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$floor($random()*101)","tot":"jsonata"},{"t":"set","p":"charging","pt":"msg","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":328.3333282470703,"y":1032.333251953125,"wires":[["dc0faf93.ca5cb"]]},{"id":"87504ce7.34795","type":"template","z":"20bb0f7f9fab47a8","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n@keyframes battery-charging {\n{{{levels}}}\n}\n.fa-battery-charging:before {\n  content: \"\\f244\";\n  animation: 2s battery-charging infinite;\n}\n\n</style>\n\n\n\n<span><i class=\"{{icon}}\" aria-hidden=\"{{charging}}\"></i> {{payload}}%</span>\n","output":"str","x":440,"y":920,"wires":[["a2235e76.843fc","86302f6f.e3eaa8"]]},{"id":"484bf539.fed56c","type":"ui_button","z":"20bb0f7f9fab47a8","name":"","group":"2d4fe667.28f8ba","order":13,"width":0,"height":0,"passthru":false,"label":"not charging","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":128.3333282470703,"y":1032.333251953125,"wires":[["3346006b.bd22c"]]},{"id":"a2235e76.843fc","type":"debug","z":"20bb0f7f9fab47a8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"template","targetType":"msg","statusVal":"","statusType":"auto","x":530,"y":840,"wires":[]},{"id":"86302f6f.e3eaa8","type":"ui_template","z":"20bb0f7f9fab47a8","group":"2d4fe667.28f8ba","name":"","order":14,"width":0,"height":0,"format":"","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":640,"y":920,"wires":[[]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Buttons supply random test values.

@E1cid that's perfect ! ... where can i edit the size of the icon ?

<span><i class="{{icon}} fa-2x" aria-hidden="true"></i> {{payload}}%</span>

fixed a error in aria-hidden

[{"id":"d6c238d7.fc1b88","type":"ui_button","z":"20bb0f7f9fab47a8","name":"","group":"2d4fe667.28f8ba","order":13,"width":0,"height":0,"passthru":false,"label":"charging","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":230,"y":960,"wires":[["8584a775.8aab68"]]},{"id":"8584a775.8aab68","type":"change","z":"20bb0f7f9fab47a8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$floor($random()*101)","tot":"jsonata"},{"t":"set","p":"charging","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":960,"wires":[["1dc0578c.12cea8"]]},{"id":"1dc0578c.12cea8","type":"function","z":"20bb0f7f9fab47a8","name":"","func":"const percentages = [\n    \"0% { content: \\\"\\\\f244\\\"; }\",\n    \"20% { content: \\\"\\\\f243\\\"; }\",\n    \"40% { content: \\\"\\\\f242\\\"; }\",\n    \"60% { content: \\\"\\\\f241\\\"; }\",\n    \"80% { content: \\\"\\\\f240\\\"; }\"\n]; \nif(msg.charging === true){\n    if(msg.payload > 75){\n        msg.icon = 5;\n    }else if(msg.payload > 50){\n        msg.icon = 4;\n    }else if(msg.payload > 25){\n        msg.icon = 3;\n    }else{\n        msg.icon = 2;\n    }\n    msg.levels = percentages.slice(0, msg.icon).join(\"\\n\");\n    msg.icon =\"fa fa-battery-charging\";\n}else{\n    if(msg.payload > 99) {\n        msg.icon = \"fa fa-battery-full\";\n    }else if(msg.payload > 66){\n        msg.icon = \"fa fa-battery-three-quarters\";\n    }else if(msg.payload > 33){\n        msg.icon = \"fa fa-battery-half\";\n    }else if(msg.payload > 0){\n        msg.icon = \"fa fa-battery-quarter\";\n    }else{\n        msg.icon = \"fa fa-battery-empty\";\n    }\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":390,"y":1040,"wires":[["81910273.98fdb8"]]},{"id":"d63cb8ae.323c78","type":"change","z":"20bb0f7f9fab47a8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$floor($random()*101)","tot":"jsonata"},{"t":"set","p":"charging","pt":"msg","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":448.3333282470703,"y":1152.333251953125,"wires":[["1dc0578c.12cea8"]]},{"id":"81910273.98fdb8","type":"template","z":"20bb0f7f9fab47a8","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n@keyframes battery-charging {\n{{{levels}}}\n}\n.fa-battery-charging:before {\n  content: \"\\f244\";\n  animation: 2s battery-charging infinite;\n}\n\n</style>\n\n\n\n<span><i class=\"{{icon}} fa-2x\" aria-hidden=\"true\"></i> {{payload}}%</span>\n","output":"str","x":560,"y":1040,"wires":[["1b0cdd2c.60074b","44322703.5b1178"]]},{"id":"54a672fa.8b683c","type":"ui_button","z":"20bb0f7f9fab47a8","name":"","group":"2d4fe667.28f8ba","order":13,"width":0,"height":0,"passthru":false,"label":"not charging","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":248.3333282470703,"y":1152.333251953125,"wires":[["d63cb8ae.323c78"]]},{"id":"1b0cdd2c.60074b","type":"debug","z":"20bb0f7f9fab47a8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"template","targetType":"msg","statusVal":"","statusType":"auto","x":650,"y":960,"wires":[]},{"id":"44322703.5b1178","type":"ui_template","z":"20bb0f7f9fab47a8","group":"2d4fe667.28f8ba","name":"","order":14,"width":0,"height":0,"format":"","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":760,"y":1040,"wires":[[]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

@E1cid ... got it !

Thx a lot.