Jump to content

Home Assistant Sunsynk Power Flow Card and Dashboard


slipx

Recommended Posts

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*

spacer.png

spacer.png

*Lite Version*

spacer.png

spacer.png

*Full Version*

spacer.png

spacer.png

 

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

Dashboard.thumb.png.ee102e44b8f7d68a557a01d3df47ba0d.png

 

Edited by slipx
Link to comment
Share on other sites

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

Screenshot_2023-03-22-06-20-40-314_io.homeassistant.companion.android.jpg

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

 

 

Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by slipx
Link to comment
Share on other sites

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"

Link to comment
Share on other sites

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 :

image.png.28a5d75cb2b0c029a57eec02dcdc5947.png

Edited by Gary Waterworth
Link to comment
Share on other sites

 

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 :

image.png.28a5d75cb2b0c029a57eec02dcdc5947.png

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

Edited by RET
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites


 
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 by slipx
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...