Ok, I reopen the topic Power card flow. Thank you for the first steps. I picked both nodes and refined it a bit as suggested. I have merged it to only one template node with a style section in the head section. I replaced the stroke-width and the animation seconds with {{msg.w_...}} and {{msg.v_...}} for each used line. In that way one can trigger the template node with a function that sets the recent values for each line. As sometimes a little energy is passed from the battery to the EVU I also implemented a {{msg.d_red1}} for the red line between battery and EVU. In that way (with "normal" and "reverse") the dot can flow in both ways. Further on the color of the labels can be changed now (I prefer white).
[
{
"id": "df27a64adee5449e",
"type": "ui_template",
"z": "6f422e16b3e6311d",
"group": "583733be582bf4e9",
"name": "PowerCard",
"order": 9,
"width": 6,
"height": 6,
"format": "<head>\n <style>\n #powercard .iconred{\n color: #c00;\n }\n \n #powercard .iconblue{\n color: #08f;\n }\n \n #powercard .iconyellow{\n color: #ff0;\n }\n \n #powercard .icongreen{\n color: #228b22;\n }\n \n #powercard .ringred{\n stroke-width: 3;\n stroke: #c00;\n fill: #fff;\n fill-opacity: 0.1;\n }\n \n #powercard .ringblue{\n stroke-width: 3;\n stroke: #08f;\n fill: #fff;\n fill-opacity: 0.1;\n \n }\n \n #powercard .ringyellow{\n stroke-width: 3;\n stroke: #ff0;\n fill: #fff;\n fill-opacity: 0.1;\n }\n \n #powercard .ringgreen{\n stroke-width: 3;\n stroke: #228b22;\n fill: #fff;\n fill-opacity: 0.1;\n }\n #powercard .label{\n color: #ffffff;\n font-size: 1em;\n }\n #powercard .linered1 {\n stroke-width: {{msg.w_red1}};\n stroke: #c00;\n stroke-dasharray:1 200;\n stroke-dashoffset: 201;\n animation: flow {{msg.v_red1}}s linear forwards infinite;\n animation-direction: {{msg.d_red1}};\n stroke-linecap: round;\n fill: none;\n } \n #powercard .linered2 {\n stroke-width: {{msg.w_red2}};\n stroke: #c00;\n stroke-dasharray:1 200;\n stroke-dashoffset: 201;\n animation: flow {{msg.v_red2}}s linear forwards infinite;\n animation-direction: normal;\n stroke-linecap: round;\n fill: none;\n } \n #powercard .lineblue {\n stroke-width: {{msg.w_blue}};\n stroke: #08f;\n stroke-dasharray:1 200;\n stroke-dashoffset: 201;\n animation: flow {{msg.v_blue}}s linear forwards infinite;\n animation-direction: normal;\n stroke-linecap: round;\n fill: none;\n } \n #powercard .linegreen {\n stroke-width: 10;\n stroke: #228b22;\n stroke-dasharray:1 200;\n stroke-dashoffset: 201;\n animation: flow 2s linear forwards infinite;\n stroke-linecap: round;\n fill: none;\n }\n #powercard .lineyellow1 {\n stroke-width: {{msg.w_yellow1}};\n stroke: #ff0;\n stroke-dasharray:1 200;\n stroke-dashoffset: 201;\n animation: flow {{msg.v_yellow1}}s linear forwards infinite;\n animation-direction: normal;\n stroke-linecap: round;\n fill: none;\n }\n #powercard .lineyellow2 {\n stroke-width: {{msg.w_yellow2}};\n stroke: #ff0;\n stroke-dasharray:1 200;\n stroke-dashoffset: 201;\n animation: flow {{msg.v_yellow2}}s linear forwards infinite;\n animation-direction: normal;\n stroke-linecap: round;\n fill: none;\n }\n #powercard .lineyellow3 {\n stroke-width: {{msg.w_yellow3}};\n stroke: #ff0;\n stroke-dasharray:1 200;\n stroke-dashoffset: 201;\n animation: flow {{msg.v_yellow3}}s linear forwards infinite;\n animation-direction: normal;\n stroke-linecap: round;\n fill: none;\n }\n #powercard .dotred {\n stroke-width: 2;\n stroke: #c00;\n animation:unset; \n stroke-linecap: round;\n fill: none;\n }\n \n #powercard .dotblue {\n stroke-width: 2;\n stroke: #08f;\n animation:unset; \n stroke-linecap: round;\n fill: none;\n }\n \n #powercard .dotgreen {\n stroke-width: 2;\n stroke: #228b22;\n animation:unset; \n stroke-linecap: round;\n fill: none;\n }\n \n #powercard .dotyellow {\n stroke-width: 2;\n stroke: #ff0;\n animation:unset; \n stroke-linecap: round;\n fill: none;\n }\n \n #powercard foreignObject{\n overflow:initial;\n }\n \n @keyframes flow {\n to {\n stroke-dashoffset: 0;\n }\n }\n</style>\n</head>\n<svg xmlns=\"http://www.w3.org/2000/svg\" id=\"powercard\" viewBox=\"0 0 318 318\" preserveAspectRatio=\"xMidYMid meet\">\n<g>\n <circle id=\"el1\" cx=\"160\" cy=\"45\" r=\"40\" class=\"ringyellow\"></circle>\n</g>\n<foreignObject x=\"147\" y=\"30\">\n <div class= \"iconyellow material-icons\">solar_power</div>\n</foreignObject>\n<foreignObject x=\"150\" y=\"55\">\n <div class=\"label\">PV</div>\n</foreignObject>\n<g>\n <circle id=\"el2\" cx=\"45\" cy=\"165\" r=\"40\" class=\"ringred\"></circle>\n</g>\n<foreignObject x=\"37\" y=\"145\">\n <div class= \"iconred fa fa-flash fa-2x\"></div>\n</foreignObject>\n<foreignObject x=\"30\" y=\"175\">\n <div class=\"label\">EVU</div>\n</foreignObject>\n<g>\n <circle id=\"el3\" cx=\"275\" cy=\"165\" r=\"40\" class=\"ringgreen\"></circle>\n</g>\n<foreignObject x=\"260\" y=\"145\">\n <div class= \"icongreen fa fa-home fa-2x\"></div>\n</foreignObject>\n<foreignObject x=\"253\" y=\"175\">\n <div class=\"label\">HAUS</div>\n</foreignObject>\n<g>\n <circle id=\"el4\" cx=\"160\" cy=\"275\" r=\"40\" class=\"ringblue\"></circle>\n</g>\n<foreignObject x=\"140\" y=\"258\">\n <div class= \"iconblue fa fa-battery-full fa-2x\"></div>\n</foreignObject>\n<foreignObject x=\"143\" y=\"285\">\n <div class=\"label\">SOC</div>\n</foreignObject>\n<g>\n <path id=\"curveY1\" class=\"lineyellow1\" d=\"M170,85 C170,156 170,156 235,156\" />\n <path id=\"curveDotY1\" class=\"dotyellow\" d=\"M170,85 C170,156 170,156 235,156\" />\n</g>\n<g>\n <path id=\"curveY2\" class=\"lineyellow2\" d=\"M150,85 C150,156 150,156 85,156\" />\n <path id=\"curveDotY2\" class=\"dotyellow\" d=\"M150,85 C150,156 150,156 85,156\" />\n</g>\n<g>\n <path id=\"curveY3\" class=\"lineyellow3\" d=\"M160,87 C160,166 160,166 160,235\" />\n <path id=\"curveDotY3\" class=\"dotyellow\" d=\"M160,87 C160,166 160,166 160,235\" />\n</g>\n<g>\n <path id=\"curveB\" class=\"lineblue\" d=\"M170,235 C170,176 170,176 235,176\" />\n <path id=\"curveDotB\" class=\"dotblue\" d=\"M170,235 C170,176 170,176 235,176\" />\n</g>\n<g>\n <path id=\"curveR1\" class=\"linered1\" d=\"M85,176 C150,176 150,176 150,235\" />\n <path id=\"curveDotR1\" class=\"dotred\" d=\"M85,176 C150,176 150,176 150,235\" />\n</g>\n<g>\n <path id=\"curveR2\" class=\"linered2\" d=\"M87,166 C160,166 160,166 233,166\" />\n <path id=\"curveDotR2\" class=\"dotred\" d=\"M87,166 C160,166 160,166 233,166\" />\n</g>\n</svg>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "powerCard",
"x": 2450,
"y": 320,
"wires": [
[]
]
},
{
"id": "583733be582bf4e9",
"type": "ui_group",
"name": "PV und Bilanz",
"tab": "9374bbe58153e59e",
"order": 4,
"disp": true,
"width": 9,
"collapse": false,
"className": ""
},
{
"id": "9374bbe58153e59e",
"type": "ui_tab",
"name": "Energy",
"icon": "fa-bolt",
"order": 7,
"disabled": false,
"hidden": false
}
]
Usage: Trigger the template node with defined values for e.g. msg.v_red1, msg.w_red1, msg.d_red1 and so on for all other values. If the line shall not be animated use "2" for the width and "0" for the seconds. If the line shall be animated use "10" for the width and any value > 0 for the animation seconds defined by msg.v_.... The larger it is the slower the dot is flowing. As stated above with msg.d_red1 you can set the direction of the flowing dot ("normal" or "reverse").
Any further comments are welcome.
