Sharing this here in its own thread.

This is my effort to replicate the Sunsynk power flow screen as a custom Home Assistant card as well as some Dashboard ideas I've been using. Improvements and suggestions welcome.

Features

• Option to switch between two card styles: lite or full.
• Animated power flow based on positive/negative/zero sensor values with configurable dynamic speed. (Supports inverted battery, AUX and grid power).
• Dynamic battery image based on SOC (empty->low->medium->high).
• Grid connected status.
• Inverter status (standby, normal, self-test, alarm, fault).
• Configurable battery size and shutdown SOC to calculate and display remaining battery runtime based on current battery usage and system time slot setting i.e. SOC, Grid Charge. Can be toggled off.
• Daily Totals that can be toggled on or off.
• Hide all solar data if not installed or specify number of mppts in use. Set custom MPPT labels.
• “Use Timer” setting and “Energy Pattern” setting (Priority Load or Priority Battery) shown as dynamic icons with ability to hide if not required. If setup as switches can be toggled by clicking on the card
• Panel mode for bigger card
• AUX and Non-essential can be hidden from the full card or assigned configurable labels
• Customisable - Change colours and images
• Most entities can be clicked to show more-info dialog
• Optional data points include self sufficiency and ratio percentages, battery temperature, AC and DC temperature
• Display up to two non-essential, essential and AUX loads
• Display energy cost per kWh and solar sell status

 You can find the latest version and details here

Documentation
Refer to https://slipx06.github.io/sunsynk-power-flow-card/index.html

Screenshots 

*Compact Version*

*Lite Version*

*Full Version*

 

I've also shared my Home Assistant Dashboard that works well for me. You can find the latest version and details here https://github.com/slipx06/Sunsynk-Home-Assistant-Dash

 

Edited February 17, 20242 yr by slipx

Hello, you have made a fantastic card, I have done something similar but using the flowchart plugin in grafana, the problem is that it is very slow to display.  How could I do to convert my flow chart into a card like yours?  thank you

Flujo de Energia-09122022-1923.json

Looks great! Once I have my info pulling into HA I will try your card

12 hours ago, cc120689 said:

Hello, you have made a fantastic card, I have done something similar but using the flowchart plugin in grafana, the problem is that it is very slow to display.  How could I do to convert my flow chart into a card like yours?  thank you

Flujo de Energia-09122022-1923.json 1.41 MB · 0 downloads

Thanks. The card provides you with a framework to display any svg image and text elements. You would need to save your graphics as an svg image and then position your text placeholders. The bindings reference the text element and the sensor data you want to display.

For example this is the placeholder for battery soc referenced by a text id. The x and y position and some styling applied. There is a default value of 0 when no sensor data is available

<text id="battery_soc_184" x="9%" y="87.5%" class="st2 st4 st8">0</text>

The code below maps the sensor value you want displayed to the text element. 

  - bind: return hass.states["sensor.battery_soc"].state + ' %'
    selector: '#battery_soc_184'
    type: html

 

 

1 hour ago, slipx said:

Thanks. The card provides you with a framework to display any svg image and text elements. You would need to save your graphics as an svg image and then position your text placeholders. The bindings reference the text element and the sensor data you want to display.

For example this is the placeholder for battery soc referenced by a text id. The x and y position and some styling applied. There is a default value of 0 when no sensor data is available

<text id="battery_soc_184" x="9%" y="87.5%" class="st2 st4 st8">0</text>

The code below maps the sensor value you want displayed to the text element. 

  - bind: return hass.states["sensor.battery_soc"].state + ' %'
    selector: '#battery_soc_184'
    type: html

 

 

But is there a graphic helper to place my elements and then pass it to text for the card?  Or do I have to replace your images with mine one by one and move the text boxes by changing the coordinates in the text?

Thanks again !

You can use Draw.io (https://app.diagrams.net/) to create your image layout (graphics, text boxes etc) and then export to svg. I've included my draw.io files in the repo as examples. The SVG can be opened in a text editor and you can add your text elements. To visualize open the SVG in a browser. You can then continue to edit in the text editor save and refresh the browser window to see updates.

15 hours ago, slipx said:

You can use Draw.io (https://app.diagrams.net/) to create your image layout (graphics, text boxes etc) and then export to svg. I've included my draw.io files in the repo as examples. The SVG can be opened in a text editor and you can add your text elements. To visualize open the SVG in a browser. You can then continue to edit in the text editor save and refresh the browser window to see updates.

ok, I had seen how to create the link to replace an image of yours with one of mine, such as the one from sunsynk, I had changed it to the one from turbo energy, but I don't see the way to export all the text boxes with their position etc. I'll take a closer look at it, thanks!

22 hours ago, slipx said:

You can use Draw.io (https://app.diagrams.net/) to create your image layout (graphics, text boxes etc) and then export to svg. I've included my draw.io files in the repo as examples. The SVG can be opened in a text editor and you can add your text elements. To visualize open the SVG in a browser. You can then continue to edit in the text editor save and refresh the browser window to see updates.

Hi, I'm finally changing the images one by one and changing sizes and position on the map, but I have a question, how can I make the text appear above an inserted image? Let the image remain in the background and the numbers above

SVG elements are painted in order. Just place it after the image in the svg file and it will be drawn on top. e.g  the text will be placed on top of the green circle

<circle cx="50%" cy="50%" r="20" fill="green"/>
<text x="50%" y="50%" class="st1 st3 st8">Hello</text> 

 

Edited March 23, 20233 yr by slipx

Thank you! When finish i ll post here the card

ok it's coming out, I have some errors to show hide some objects but I'm getting the hang of it

Do you know if there are more animations available or put more circles on the same line?

Have a look at this code

<animateMotion dur="9s" repeatCount="indefinite" keyPoints="0;1" keyTimes="0;1" calcMode="linear">
      <mpath xlink:href="#pv1-line"/>
    </animateMotion>

You could probably create another circle and reference the same path and change either "dur" attribute to a different time or you can change the "keyPoints" attribute. 0 represents the start of the path and 1 the end. So you could have an animation that goes halfway i.e. keyPoints="0;0.5" and for the second dot starting halfway keyPoints="0.5;1"

Hello, I follow the instructions and it gives me an error when inserting the card: "Custom element doesn't exist: sunsynk-card.

What am I doing wrong?

27 minutes ago, RET said:

Hello, I follow the instructions and it gives me an error when inserting the card: "Custom element doesn't exist: sunsynk-card.

What am I doing wrong?

Installation instructions are on : https://github.com/slipx06/Sunsynk-Home-Assistant-Power-Flow-Card

It covers the installation of the element

As I said, I followed the instructions

56 minutes ago, RET said:

As I said, I followed the instructions

Steps 1 -> 3

This will let the system use that resource 

1. Create a new directory under www/community/ and name it sunsynk-card. If you don't have HACS installed you can create directory directly under www and reference in step 3 below.
2. Copy the sunsynkcard.js into the directory
3. Add the resource to your Dashboard

Afterwards it should show :

Edited March 28, 20233 yr by Gary Waterworth

 

2 hours ago, Gary Waterworth said:

Steps 1 -> 3

This will let the system use that resource 

1. Create a new directory under www/community/ and name it sunsynk-card. If you don't have HACS installed you can create directory directly under www and reference in step 3 below.
2. Copy the sunsynkcard.js into the directory
3. Add the resource to your Dashboard

Afterwards it should show :

Thanks for the help but I can't get it. It's very weird

Edited March 28, 20233 yr by RET

15 hours ago, RET said:

 

Thanks for the help but I can't get it. It's very weird

To add the resource You must click on the 3 points at the top to the right of home assistant, edit control panel and then again those 3 points and manage resources, you will get a window where you can add the sunsynkcard.js resource

20 minutes ago, cc120689 said:

To add the resource You must click on the 3 points at the top to the right of home assistant, edit control panel and then again those 3 points and manage resources, you will get a window where you can add the sunsynkcard.js resource

Finally I got it. I don't really know what was wrong with me. Thank you so much

7 hours ago, RET said:

Here is my last try, thanks!

below the load line appears when the external network falls

sunsynkcard_modded.yaml

Edited March 29, 20233 yr by cc120689

I have been looking at the "animated_card_configuration_full.txt" file and there is a sensor called "sensor.sunsynk_essential_load", this sensor I don't know where it comes from, it is not in the "ESPHome.yaml" file. Can somebody help me? Thank you

sensor:
 - platform: template
   sensors:
     sunsynk_totalsolar:
       friendly_name: "Total Solar Generation"
       value_template: "{{ (states('sensor.pv1_power') | float(0) + states('sensor.pv2_power') | float(0)) | round(0) }}"
       unit_of_measurement: 'W'
     sunsynk_solar_load:
       friendly_name: "Solar Load"
       value_template: "{{ (states('sensor.daily_pv_power_kwh') | float(0) - states('sensor.battery_charge_day') | float(0)) |round(1) }}"
       unit_of_measurement: 'kWh'
       device_class: energy
     sunsynk_essential_load:
       friendly_name: "Essential Load"
       value_template: "{{ (states('sensor.inverter_output_power') |float(0)  - (states('sensor.aux_output_power') |float(0) - states('sensor.grid_inverter_load') |float(0) )) | round(0)}}"
       unit_of_measurement: 'W'
       device_class: power

There are a couple of template sensors you need to create, either in HA or your ESPHome config. If you don't have any AUX or Non-Essential loads you can substitute sensor.sunsynk_essential_load with modbus register # 178 Load Power

Edited April 4, 20233 yr by slipx

1 hour ago, slipx said:

sensor:
 - platform: template
   sensors:
     sunsynk_totalsolar:
       friendly_name: "Total Solar Generation"
       value_template: "{{ (states('sensor.pv1_power') | float(0) + states('sensor.pv2_power') | float(0)) | round(0) }}"
       unit_of_measurement: 'W'
     sunsynk_solar_load:
       friendly_name: "Solar Load"
       value_template: "{{ (states('sensor.daily_pv_power_kwh') | float(0) - states('sensor.battery_charge_day') | float(0)) |round(1) }}"
       unit_of_measurement: 'kWh'
       device_class: energy
     sunsynk_essential_load:
       friendly_name: "Essential Load"
       value_template: "{{ (states('sensor.inverter_output_power') |float(0)  - (states('sensor.aux_output_power') |float(0) - states('sensor.grid_inverter_load') |float(0) )) | round(0)}}"
       unit_of_measurement: 'W'
       device_class: power

There are a couple of template sensors you need to create, either in HA or your ESPHome config. If you don't have any AUX or Non-Essential loads you can substitute sensor.sunsynk_essential_load with modbus register # 178 Load Power

Thank you very much for sharing your work

@slipx

 Yes I agree, very much enjoy this dashboard.

 

Is there any way to allow input from such a svg card? Eg have a screen that allows the inverter settings to be changed

 

Edited April 6, 20233 yr by iiznh