# Power flow card

**URL:** <https://discourse.nodered.org/t/power-flow-card/75232>\
**Category:** Dashboard\
**Created:** [15 February 2023 11:59 UTC](https://discourse.nodered.org/t/power-flow-card/75232 "2023-02-15T11:59:13Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![EIKSEU](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eikseu/32/73538_2.png) [@EIKSEU](https://discourse.nodered.org/u/EIKSEU)\
**Post date:** [15 February 2023 11:59 UTC](https://discourse.nodered.org/t/power-flow-card/75232/1 "2023-02-15T11:59:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [15 February 2023 14:35 UTC](https://discourse.nodered.org/t/power-flow-card/75232/2 "2023-02-15T14:35:18Z")

</div>

To save us from having to search, please provide a link to the card.

---

<div class="post-metadata">

**Author:** ![EIKSEU](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eikseu/32/73538_2.png) [@EIKSEU](https://discourse.nodered.org/u/EIKSEU)\
**Post date:** [15 February 2023 18:23 UTC](https://discourse.nodered.org/t/power-flow-card/75232/3 "2023-02-15T18:23:01Z")

</div>

jop 🙃

> **[GitHub - ulic75/power-flow-card: A power distribution card inspired by the...](https://github.com/ulic75/power-flow-card)**
>
> A power distribution card inspired by the official Energy Distribution card for Home Assistant - GitHub - ulic75/power-flow-card: A power distribution card inspired by the official Energy Distribut...

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [15 February 2023 18:43 UTC](https://discourse.nodered.org/t/power-flow-card/75232/4 "2023-02-15T18:43:20Z")

</div>

Oh, I thought you were talking about a circuit board, not a dashboard.

---

<div class="post-metadata">

**Author:** ![EIKSEU](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eikseu/32/73538_2.png) [@EIKSEU](https://discourse.nodered.org/u/EIKSEU)\
**Post date:** [15 February 2023 18:43 UTC](https://discourse.nodered.org/t/power-flow-card/75232/5 "2023-02-15T18:43:52Z")

</div>

there is also a 2nd card for HA ....

> **[GitHub - reptilex/tesla-style-solar-power-card: Home assistant power card...](https://github.com/reptilex/tesla-style-solar-power-card)**
>
> Home assistant power card mimicking the one tesla provides for the powerwall app. - GitHub - reptilex/tesla-style-solar-power-card: Home assistant power card mimicking the one tesla provides for th...

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [17 February 2023 11:30 UTC](https://discourse.nodered.org/t/power-flow-card/75232/6 "2023-02-17T11:30:43Z")

</div>

I don't remember anybody ever shared any of such.  
So most probably it is time to build one.

Here's the starting point ..

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![EIKSEU](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eikseu/32/73538_2.png) [@EIKSEU](https://discourse.nodered.org/u/EIKSEU)\
**Post date:** [18 February 2023 09:37 UTC](https://discourse.nodered.org/t/power-flow-card/75232/7 "2023-02-18T09:37:04Z")

</div>

Hello thanks for your stepping stone, I'm just a hobbyist  
I've done that so far.....

```auto
<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>

```

```auto
<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....

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [18 February 2023 10:15 UTC](https://discourse.nodered.org/t/power-flow-card/75232/8 "2023-02-18T10:15:56Z")

</div>

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

```auto
#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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 March 2023 10:16 UTC](https://discourse.nodered.org/t/power-flow-card/75232/9 "2023-03-20T10:16:08Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.