Hello, is there anyone who has already built a power flow card on Nodered like the one from ulic75 for Home Assistant or can you convert the code for Nodered?
Kind regards
To save us from having to search, please provide a link to the card.
jop 
Oh, I thought you were talking about a circuit board, not a dashboard.
there is also a 2nd card for HA ....
I don't remember anybody ever shared any of such.
So most probably it is time to build one.
Here's the starting point ..
[{"id":"a8ffc31ab092c247","type":"ui_template","z":"09deee63c1b960f7","group":"08ac9b242ae51e8c","name":"PowerCard","order":0,"width":"6","height":"6","format":"<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=\"80\" cy=\"80\" r=\"40\" class=\"ring\"></circle>\n <text x=\"65\" y=\"85\" class=\"label\">Grid</text>\n</g>\n\n<g>\n <circle id=\"el2\" cx=\"240\" cy=\"240\" r=\"40\" class=\"ring\"></circle>\n <text x=\"220\" y=\"245\" class=\"label\">Home</text>\n</g>\n\n<g>\n <path id=\"curve\" class=\"line\" d=\"M80,120 C80,220 80,240 200,240\" />\n <path id=\"curveDot\" class=\"dot\" d=\"M80,120 C80,220 80,240 200,240\" />\n</g>\n\n</svg>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"powerCard","x":670,"y":300,"wires":[[]]},{"id":"1cea7f67bf012d3f","type":"ui_template","z":"09deee63c1b960f7","group":"08ac9b242ae51e8c","name":"CSS","order":1,"width":0,"height":0,"format":"<style>\n #powercard .ring{\n stroke-width: 3;\n stroke: #c00;\n fill: #fff;\n }\n #powercard .label{\n font-size: 1em;\n }\n #powercard .line {\n stroke-width: 10;\n stroke: red;\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 \n #powercard .dot {\n stroke-width: 2;\n stroke: red;\n animation:unset; \n stroke-linecap: round;\n fill: none;\n }\n @keyframes flow {\n to {\n stroke-dashoffset: 0;\n }\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":650,"y":260,"wires":[[]]},{"id":"08ac9b242ae51e8c","type":"ui_group","name":"Default","tab":"2acb95821445c8af","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"2acb95821445c8af","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
1 Like
Hello thanks for your stepping stone, I'm just a hobbyist
I've done that so far.....
<style>
#powercard .iconred{
color: #c00;
}
#powercard .iconblue{
color: #08f;
}
#powercard .iconyellow{
color: #ff0;
}
#powercard .icongreen{
color: #228b22;
}
#powercard .ringred{
stroke-width: 3;
stroke: #c00;
fill: #fff;
fill-opacity: 0.1;
}
#powercard .ringblue{
stroke-width: 3;
stroke: #08f;
fill: #fff;
fill-opacity: 0.1;
}
#powercard .ringyellow{
stroke-width: 3;
stroke: #ff0;
fill: #fff;
fill-opacity: 0.1;
}
#powercard .ringgreen{
stroke-width: 3;
stroke: #228b22;
fill: #fff;
fill-opacity: 0.1;
}
#powercard .label{
font-size: 1em;
}
#powercard .linered {
stroke-width: 10;
stroke: red;
stroke-dasharray:1 200;
stroke-dashoffset: 201;
animation: flow 2s linear forwards infinite;
stroke-linecap: round;
fill: none;
}
#powercard .lineblue {
stroke-width: 10;
stroke: #08f;
stroke-dasharray:1 200;
stroke-dashoffset: 201;
animation: flow 2s linear forwards infinite;
stroke-linecap: round;
fill: none;
}
#powercard .linegreen {
stroke-width: 10;
stroke: #228b22;
stroke-dasharray:1 200;
stroke-dashoffset: 201;
animation: flow 2s linear forwards infinite;
stroke-linecap: round;
fill: none;
}
#powercard .lineyellow {
stroke-width: 10;
stroke: #ff0;
stroke-dasharray:1 200;
stroke-dashoffset: 201;
animation: flow 2s linear forwards infinite;
stroke-linecap: round;
fill: none;
}
#powercard .dotred {
stroke-width: 2;
stroke: #c00;
animation:unset;
stroke-linecap: round;
fill: none;
}
#powercard .dotblue {
stroke-width: 2;
stroke: #08f;
animation:unset;
stroke-linecap: round;
fill: none;
}
#powercard .dotgreen {
stroke-width: 2;
stroke: #228b22;
animation:unset;
stroke-linecap: round;
fill: none;
}
#powercard .dotyellow {
stroke-width: 2;
stroke: #ff0;
animation:unset;
stroke-linecap: round;
fill: none;
}
@keyframes flow {
to {
stroke-dashoffset: 0;
}
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" id="powercard" viewBox="0 0 318 318" preserveAspectRatio="xMidYMid meet">
<g>
<circle id="el1" cx="160" cy="45" r="40" class="ringyellow"></circle>
<text x="150" y="75" class="label">PV</text>
</g>
<foreignObject x="147" y="30" width="100%" height="100%">
<div class= "iconyellow material-icons">solar_power</div>
</foreignObject>
<g>
<circle id="el1" cx="45" cy="165" r="40" class="ringred"></circle>
<text x="30" y="195" class="label">EVU</text>
</g>
<foreignObject x="30" y="145" width="100%" height="100%">
<div class= "iconred fa fa-plug fa-2x"></div>
</foreignObject>
<g>
<circle id="el2" cx="275" cy="165" r="40" class="ringgreen"></circle>
<text x="253" y="195" class="label">HOME</text>
</g>
<foreignObject x="260" y="145" width="100%" height="100%">
<div class= "icongreen fa fa-home fa-2x"></div>
</foreignObject>
<g>
<circle id="el2" cx="160" cy="275" r="40" class="ringblue"></circle>
<text x="146" y="305" class="label">SOC</text>
</g>
<foreignObject x="140" y="258" width="100%" height="100%">
<div class= "iconblue fa fa-battery-full fa-2x"></div>
</foreignObject>
<g>
<path id="curve" class="lineyellow" d="M160,87 C160,166 160,166 233,166" />
<path id="curveDot" class="dotyellow" d="M160,87 C160,166 160,166 233,166" />
</g>
<g>
<path id="curve" class="lineyellow" d="M160,87 C160,166 160,166 87,166" />
<path id="curveDot" class="dotyellow" d="M160,87 C160,166 160,166 87,166" />
</g>
<g>
<path id="curve" class="lineyellow" d="M160,87 C160,166 160,166 160,235" />
<path id="curveDot" class="dotyellow" d="M160,87 C160,166 160,166 160,235" />
</g>
<g>
<path id="curve" class="lineblue" d="M160,235 C160,166 160,166 233,166" />
<path id="curveDot" class="dotblue" d="M160,235 C160,166 160,166 233,166" />
</g>
<g>
<path id="curve" class="linered" d="M87,166 C160,166 160,166 160,235" />
<path id="curveDot" class="dotred" d="M87,166 C160,166 160,166 160,235" />
</g>
<g>
<path id="curve" class="linered" d="M87,166 C160,166 160,166 233,166" />
<path id="curveDot" class="dotred" d="M87,166 C160,166 160,166 233,166" />
</g>
</svg>
Now it's time for the function to show the points depending on the performance....
Nice.
Some things to maybe improve..
The foreginObject with 100% width and height does draw full size container which you don't actually need.
Maybe to remove width and height completely from them and add CSS
#powercard foreignObject{
overflow:initial;
}
Oh, and the id of elements should be unique thing.
Don't know if the wire ends if they connect at same exact point is the best thing. Kind of muddy thing when dots collide.
I don't have too much computer time but yes, some kind of decisions about the data handling must be done before to implement anything. I'd recommend to keep the front-end as dummy as possible. So it does not have any logical connections between items, their values and even if they are connected with some wires. The value of the item is just a value to show. The wires can then be another sort of items where you can decide the direction and speed of the flow (if any) according to the input.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
