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
@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.
<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}]
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy