Home Assistant Lovelace UI cards #230

dr3amr · 2023-01-05T08:36:33Z

dr3amr
Jan 5, 2023

Note: I will be updating this post if there are modifications to the cards along the way.
Note2: @syssi's example has "substitutions: name: jk-bms" while I used "substitutions: name: bms-bt-monitor" (for sensor names), so in order to use the cards, one needs to do a replace-all from "bms-bt-monitor" to own used substitution name.

Hi all and @syssi

@syssi if you want you can embed the code to README.md

Just sharing my work on adding similar jkbms app graphics to HA:

Code bellow, requires Stack In Card by @RomRider => https://github.com/custom-cards/stack-in-card + markdown card (included with HA)

Top card:

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: grid
    square: false
    columns: 1
    cards:
      - type: markdown
        content: >-
          <center>Time:&nbsp;<b><font color=#3090C7>{{
          states('sensor.bms_bt_monitor_total_runtime_formatted') | upper
          }}</font>
  - type: grid
    square: false
    columns: 3
    cards:
      - type: markdown
        content: >-
          <center>Charge:&nbsp;<b>{% if states('switch.bms_bt_monitor_charging')
          == 'on' %} <font color=#41CD52>{{
          states('switch.bms_bt_monitor_charging') | upper }}</font> {% else %}
          <font color=red>{{ states('switch.bms_bt_monitor_charging') | upper
          }}</font> {% endif %} 
      - type: markdown
        content: >-
          <center>Discharge:&nbsp;<b> {% if
          states('switch.bms_bt_monitor_discharging') == 'on' %} <font
          color=#41CD52>{{ states('switch.bms_bt_monitor_discharging') | upper
          }}</font> {% else %} <font color=red>{{
          states('switch.bms_bt_monitor_discharging') | upper }}</font> {% endif
          %} 
      - type: markdown
        content: >-
          <center>Balance:&nbsp;<b> {% if
          states('switch.bms_bt_monitor_balancer') == 'on' %} <font
          color=#41CD52>{{ states('switch.bms_bt_monitor_balancer') | upper
          }}</font> {% else %} <font color=red>{{
          states('switch.bms_bt_monitor_balancer') | upper }}</font> {% endif
          %}

Stats card:

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: markdown
        content: >-
          <center><b><font color=#41CD52 size=6>{{
          states('sensor.bms_bt_monitor_total_voltage') }} V</font></b><br>
          Battery Power:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.bms_bt_monitor_power') }} W</font><br> Battery
          Capacity:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.bms_bt_monitor_total_battery_capacity_setting') }}
          Ah</font><br> Cycle Capacity:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.bms_bt_monitor_total_charging_cycle_capacity') }}
          Ah</font><br> Ave. Cell Vol.:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.bms_bt_monitor_average_cell_voltage') }} V</font><br>
          Balance Cur.:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.bms_bt_monitor_balancing_current') }} A</font><br>
          Battery T1:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.bms_bt_monitor_temperature_sensor_1') }} °C</font>
      - type: markdown
        content: >-
          <center><b><font color=#41CD52 size=6>{{
          states('sensor.bms_bt_monitor_current') }} A</font></b><br> Remain
          Battery:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.bms_bt_monitor_state_of_charge') }} %</font><br> Remain
          Capacity:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.bms_bt_monitor_capacity_remaining') }} Ah</font><br>
          Cycle Count:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.bms_bt_monitor_charging_cycles') }}</font><br> Delta
          Cell Vol.:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.bms_bt_monitor_delta_cell_voltage') }} V</font><br> MOS
          Temp.:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.bms_bt_monitor_power_tube_temperature') }}
          °C</font><br> Battery T2:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.bms_bt_monitor_temperature_sensor_2') }} °C</font>

Cells card:

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: grid
    square: false
    columns: 1
    cards:
      - type: markdown
        content: <center><b>Cells
  - type: grid
    square: false
    columns: 2
    cards:
      - type: markdown
        content: >-
          <center>01.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '1' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_1') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '1' %}  <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_1') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_1') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_1') }} Ω <br>
          02.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '2' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_2') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '2' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_2') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_2') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_2') }} Ω <br>
          03.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '3' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_3') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '3' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_3') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_3') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_3') }} Ω <br>
          04.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '4' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_4') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '4' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_4') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_4') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_4') }} Ω <br>
          05.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '5' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_5') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '5' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_5') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_5') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_5') }} Ω <br>
          06.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '6' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_6') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '6' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_6') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_6') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_6') }} Ω <br>
          07.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '7' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_7') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '7' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_7') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_7') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_7') }} Ω <br>
          08.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '8' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_8') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '8' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_8') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_8') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_8') }} Ω <br></center>
      - type: markdown
        content: >-
          <center>09.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '9' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_9') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '9' %}  <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_9') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_9') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_9') }} Ω <br>
          10.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '10' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_10') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '10' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_10') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_10') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_10') }} Ω <br>
          11.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '11' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_11') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '11' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_11') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_11') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_11') }} Ω <br>
          12.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '12' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_12') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '12' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_12') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_12') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_12') }} Ω <br>
          13.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '13' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_13') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '13' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_13') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_13') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_13') }} Ω <br>
          14.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '14' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_14') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '14' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_14') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_14') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_14') }} Ω <br>
          15.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '15' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_15') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '15' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_15') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_15') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_15') }} Ω <br>
          16.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.bms_bt_monitor_max_voltage_cell') == '16' %}  <font
          color="#3090C7">{{ states('sensor.bms_bt_monitor_cell_voltage_16') }}
          V</font> {% elif states('sensor.bms_bt_monitor_min_voltage_cell') ==
          '16' %} <font color="red">{{
          states('sensor.bms_bt_monitor_cell_voltage_16') }} V</font> {% else %}
          {{ states('sensor.bms_bt_monitor_cell_voltage_16') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.bms_bt_monitor_cell_resistance_16') }} Ω <br></center>

Control card:

type: entities
entities:
  - entity: switch.bms_bt_monitor_balancer
    name: Balancer
  - entity: switch.bms_bt_monitor_charging
    name: Charging
  - entity: switch.bms_bt_monitor_discharging
    name: Discharging
show_header_toggle: false

syssi · 2023-01-05T09:24:01Z

syssi
Jan 5, 2023
Maintainer

Good job! Could you try to convert your Lovelace configuration into a blueprint?

5 replies

dr3amr Jan 5, 2023
Author

My experience with blueprints end at just using them. Never created one, but as far as I know they can be used in Automations, could they be used to create UI content ?

syssi Jan 5, 2023
Maintainer

I'm unhappy about the hardcoded entity ids. It's hard to explain how to adjust your example. At blueprints variables are available and entities can be assigned "easily". I must admit I don't have much experience with blueprints too. If there are no low hanging fruits let's merge your example as it is.

dr3amr Jan 5, 2023
Author

Difference in entity naming is that your example has "substitutions: name: jk-bms" while I used "substitutions: name: bms-bt-monitor". Have not modified anything else. I know it would have been easier to choose entity names in UI, have not found a way to style the interface same as jkbms one without using this markdown card with custom code (part JS part HTML). Not that familiar with card-mod yet and CSS styling.
If you want to modify my code, you can do a "rename all", from one name to other to be consistent.

austin202220 Jan 10, 2023

This is great and I'm using, thanks for sharing @dr3amr

dr3amr Jan 10, 2023
Author

@austin202220 Thanks. Had all information there and enjoying that I can add all information in HA, but had no proper interface to present all data from BMS, and thought of doing the UI for myself, and if other can benefit from my ~3h work ... why not.

syssi · 2023-02-24T09:25:26Z

syssi
Feb 24, 2023
Maintainer

Your contribution is mentioned at the Goodie section now! :-) Thanks for your support!

https://github.com/syssi/esphome-jk-bms/tree/add-googie-section#goodies

2 replies

dr3amr Feb 24, 2023
Author

Hi @syssi , saw the notification. Hope it is a useful contribution. Thank you for your work also.

syssi Feb 24, 2023
Maintainer

It's pretty helpful because every now and then a user asks about "how to visualize the balancing".

jcastro · 2023-05-28T18:11:24Z

jcastro
May 28, 2023

Hi! I tweaked the code so it works by default with your naming @syssi

Top card

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: grid
    square: false
    columns: 1
    cards:
      - type: markdown
        content: >-
          <center>Time:&nbsp;<b><font color=#3090C7>{{
          states('sensor.jk_bms_total_runtime_formatted') | upper }}</font>
  - type: grid
    square: false
    columns: 3
    cards:
      - type: markdown
        content: >-
          <center>Charge:&nbsp;<b>{% if states('switch.jk_bms_charging') == 'on'
          %} <font color=#41CD52>{{ states('switch.jk_bms_charging') | upper
          }}</font> {% else %} <font color=red>{{
          states('switch.jk_bms_charging') | upper }}</font> {% endif %} 
      - type: markdown
        content: >-
          <center>Discharge:&nbsp;<b> {% if states('switch.jk_bms_discharging')
          == 'on' %} <font color=#41CD52>{{ states('switch.jk_bms_discharging')
          | upper }}</font> {% else %} <font color=red>{{
          states('switch.jk_bms_discharging') | upper }}</font> {% endif %} 
      - type: markdown
        content: >-
          <center>Balance:&nbsp;<b> {% if states('switch.jk_bms_balancer') ==
          'on' %} <font color=#41CD52>{{ states('switch.jk_bms_balancer') |
          upper }}</font> {% else %} <font color=red>{{
          states('switch.jk_bms_balancer') | upper }}</font> {% endif %}

Stats card

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: markdown
        content: >-
          <center><b><font color=#41CD52 size=6>{{
          states('sensor.jk_bms_total_voltage') }} V</font></b><br> Battery
          Power:&nbsp;&nbsp;<font color=#41CD52>{{ states('sensor.jk_bms_power')
          }} W</font><br> Battery Capacity:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.jk_bms_total_battery_capacity_setting') }}
          Ah</font><br> Cycle Capacity:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.jk_bms_total_charging_cycle_capacity') }} Ah</font><br>
          Ave. Cell Vol.:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.jk_bms_average_cell_voltage') }} V</font><br> Balance
          Cur.:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.jk_bms_balancing_current') }} A</font><br> Battery
          T1:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.jk_bms_temperature_sensor_1') }} °C</font>
      - type: markdown
        content: >-
          <center><b><font color=#41CD52 size=6>{{
          states('sensor.jk_bms_current') }} A</font></b><br> Remain
          Battery:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.jk_bms_state_of_charge') }} %</font><br> Remain
          Capacity:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.jk_bms_capacity_remaining') }} Ah</font><br> Cycle
          Count:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.jk_bms_charging_cycles') }}</font><br> Delta Cell
          Vol.:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.jk_bms_delta_cell_voltage') }} V</font><br> MOS
          Temp.:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.jk_bms_power_tube_temperature') }} °C</font><br>
          Battery T2:&nbsp;&nbsp;<font color=#41CD52>{{
          states('sensor.jk_bms_temperature_sensor_2') }} °C</font>

Cells card

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: grid
    square: false
    columns: 1
    cards:
      - type: markdown
        content: <center><b>Cells
  - type: grid
    square: false
    columns: 2
    cards:
      - type: markdown
        content: >-
          <center>01.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.jk_bms_max_voltage_cell') == '1' %}  <font
          color="#3090C7">{{ states('sensor.jk_bms_cell_voltage_1') }} V</font>
          {% elif states('sensor.jk_bms_min_voltage_cell') == '1' %}  <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_1') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_1') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_1') }} Ω <br>
          02.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '2' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_2') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '2' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_2') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_2') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_2') }} Ω <br>
          03.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '3' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_3') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '3' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_3') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_3') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_3') }} Ω <br>
          04.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '4' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_4') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '4' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_4') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_4') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_4') }} Ω <br>
          05.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '5' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_5') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '5' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_5') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_5') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_5') }} Ω <br>
          06.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '6' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_6') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '6' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_6') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_6') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_6') }} Ω <br>
          07.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '7' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_7') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '7' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_7') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_7') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_7') }} Ω <br>
          08.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '8' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_8') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '8' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_8') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_8') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_8') }} Ω <br></center>
      - type: markdown
        content: >-
          <center>09.&nbsp;&nbsp;&nbsp; {% if
          states('sensor.jk_bms_max_voltage_cell') == '9' %}  <font
          color="#3090C7">{{ states('sensor.jk_bms_cell_voltage_9') }} V</font>
          {% elif states('sensor.jk_bms_min_voltage_cell') == '9' %}  <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_9') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_9') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_9') }} Ω <br>
          10.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '10' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_10') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '10' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_10') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_10') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_10') }} Ω <br>
          11.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '11' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_11') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '11' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_11') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_11') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_11') }} Ω <br>
          12.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '12' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_12') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '12' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_12') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_12') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_12') }} Ω <br>
          13.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '13' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_13') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '13' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_13') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_13') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_13') }} Ω <br>
          14.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '14' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_14') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '14' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_14') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_14') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_14') }} Ω <br>
          15.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '15' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_15') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '15' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_15') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_15') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_15') }} Ω <br>
          16.&nbsp;&nbsp;&nbsp; {% if states('sensor.jk_bms_max_voltage_cell')
          == '16' %}  <font color="#3090C7">{{
          states('sensor.jk_bms_cell_voltage_16') }} V</font> {% elif
          states('sensor.jk_bms_min_voltage_cell') == '16' %} <font
          color="red">{{ states('sensor.jk_bms_cell_voltage_16') }} V</font> {%
          else %} {{ states('sensor.jk_bms_cell_voltage_16') }} V {% endif %}
          &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {{
          states('sensor.jk_bms_cell_resistance_16') }} Ω <br></center>

Control card

type: entities
entities:
  - entity: switch.jk_bms_balancer
    name: Balancer
  - entity: switch.jk_bms_charging
    name: Charging
  - entity: switch.jk_bms_discharging
    name: Discharging
show_header_toggle: false

0 replies

dominikandreas · 2023-08-03T20:18:30Z

dominikandreas
Aug 3, 2023

Thanks for these contributions everyone! Here's my version with the following changes:

adjusted padding for better display on my mobile device
fix for remaining capacity (percentage and absolute)
try to vertically align the various sensor readings in the 2nd card (could probably still be improved)
used mΩ for resistance
less templating code using jinja for loops
everything inside one vertical stack
some renaming and other minor changes here and there

type: vertical-stack
cards:
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
    cards:
      - type: custom:stack-in-card
        columns: 1
        cards:
          - type: markdown
            content: |-
              <center>Time:&nbsp;<b><font color=#3090C7>{{
                states('sensor.jk_bms_total_runtime_formatted') | upper }}</font>
          - type: markdown
            content: >-

              <center>Charge:&nbsp; <b> {% if states('switch.jk_bms_charging')
              == 'on' %} <font color=#41CD52>{{ states('switch.jk_bms_charging')
              | upper }}</font> {% else %} <font color=red>{{
              states('switch.jk_bms_charging') | upper }}</font> {% endif %}
              </b> {{'&nbsp;' * 5 }}

              Discharge:&nbsp;<b> {% if states('switch.jk_bms_discharging') ==
              'on' %} <font color=#41CD52>{{ states('switch.jk_bms_discharging')
              | upper }}</font> {% else %} <font color=red> {{
              states('switch.jk_bms_discharging') | upper }} </font> {% endif %}
              </b>

              {{'&nbsp;' * 5 }} Balance:<b> {% if
              states('switch.jk_bms_balancer') == 'on' %} <font color=#41CD52>{{
              states('switch.jk_bms_balancer') | upper }}</font> {% else %}
              <font color=red>{{ states('switch.jk_bms_balancer') | upper
              }}</font> {% endif %} 
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: custom:stack-in-card
        margin: false
        columns: 2
        mode: horizontal
        cards:
          - type: markdown
            content: >-
              <center><b><font color=#41CD52 size=6>{{
              states('sensor.jk_bms_total_voltage') }} V</font></b><br>
              </center>  {% macro pad_right(w, s) %} {{ s }} {% set slen =  w -
              (s|length) %} 
                {% for idx in range(slen)%} &nbsp; {%endfor %}
              {%- endmacro %} 

              {% macro green(s) %} <font color=#41CD52 size=2 family=Consolas>
              {{ s }} </font> {%- endmacro %}

              <div>  {{ pad_right(14, "Power Draw:") -}}   {% set power =
              states('sensor.jk_bms_power') | int %} {{ green('%d' % power + '
              W') }}<br>  {{ pad_right(16, "Total Capacity:") -}}   {{
              green(states('sensor.jk_bms_total_battery_capacity_setting') + "
              Ah") }}<br>  {{ pad_right(16, 'Cycle Capacity:') }}   {{
              green(states('sensor.jk_bms_total_charging_cycle_capacity')  + "
              Ah") }}<br>  {{ pad_right(16, 'Avg Cell V:') }}   {{
              green(states('sensor.jk_bms_average_cell_voltage') + ' V') }}
              <br>  {{ pad_right(16, 'Balance Curr:') }}   {{
              green(states('sensor.jk_bms_balancing_current') + ' A') }}<br>  {{
              pad_right(16, 'Battery T1:') }}   {{
              green(states('sensor.jk_bms_temperature_sensor_1') +  ' °C') }}
              </div>
          - type: markdown
            content: >-
              <center><b><font color=#41CD52 size=6>{{
              states('sensor.jk_bms_current') }} A</font></b><br> </center> {%
              macro pad_right(w, s) %}  {{ s }} {% set slen =  w - (s|length) %}
              {% for idx in range(slen)%} &nbsp; {%endfor %} {%- endmacro %} {%
              macro green(s) %} <font color=#41CD52 family=Consolas> {{ s }}
              </font> {%- endmacro %} <div>  {{ pad_right(14, "Remaining:") -}} 
              {{ green(states('sensor.jk_bms_capacity_remaining') + ' %')
              }}<br>    {{ pad_right(15, "Rem. Capacity:") -}}    {{
              green(states('sensor.jk_bms_capacity_remaining_derived') + " Ah")
              }}<br>   {{ pad_right(15, 'Cycle Count:') }}  {{
              green(states('sensor.jk_bms_charging_cycles')  + " Ah") }}<br> {{
              pad_right(16, 'Delta Cell V:') }}  {{
              green(states('sensor.jk_bms_delta_cell_voltage') + ' V') }} <br> 
              {{ pad_right(14, 'MOS  Temp.:') }}  {{
              green(states('sensor.jk_bms_power_tube_temperature') + ' °C')
              }}<br>  {{ pad_right(15, 'Battery T2:') }}  {{
              green(states('sensor.jk_bms_temperature_sensor_2') +  ' °C') }}
              </div>
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: grid
        square: false
        columns: 1
        cards:
          - type: markdown
            content: <center><b> Cells </b> </center>
      - type: grid
        square: false
        columns: 2
        cards:
          - type: markdown
            content: >-
              <center> {% for idx in range(1, 9) -%} {%- set min_idx =
              states('sensor.jk_bms_min_voltage_cell') %} {%- set max_idx =
              states('sensor.jk_bms_max_voltage_cell') %} {%- set is_max =
              states('sensor.jk_bms_max_voltage_cell')| int == idx %} {%- set
              is_min = states('sensor.jk_bms_min_voltage_cell')| int == idx %}
              {%- set volt_sensor_id = 'sensor.jk_bms_cell_voltage_%d' % idx %}
              {%- set ohm_sensor_id = 'sensor.jk_bms_cell_resistance_%d' % idx
              %} {%- set cell_volt = states('sensor.jk_bms_cell_voltage_%d' %
              idx) %} {%- set cell_resistance =
              states('sensor.jk_bms_cell_resistance_%d' % idx) %} {%- set
              font_start = '<font color="#3090C7">' if is_max else '<font
              color="red">' if is_min else '' %} {%- set font_end = '</font>' if
              is_max or is_min else '' %} {{ "%02d" % idx }}. {{ font_start }}
              {{ cell_volt }} V {{ font_end -}} &nbsp;/&nbsp; {{ cell_resistance
              |float * 1000 }} mΩ  <br>               {% endfor %} </center>
          - type: markdown
            content: >-
              <center>              {% for idx in range(9, 17) -%} {%- set
              min_idx = states('sensor.jk_bms_min_voltage_cell') %} {%- set
              max_idx = states('sensor.jk_bms_max_voltage_cell') %} {%- set
              is_max = states('sensor.jk_bms_max_voltage_cell')| int == idx %}
              {%- set is_min = states('sensor.jk_bms_min_voltage_cell')| int ==
              idx %} {%- set volt_sensor_id = 'sensor.jk_bms_cell_voltage_%d' %
              idx %} {%- set ohm_sensor_id = 'sensor.jk_bms_cell_resistance_%d'
              % idx %} {%- set cell_volt =
              states('sensor.jk_bms_cell_voltage_%d' % idx) %} {%- set
              cell_resistance = states('sensor.jk_bms_cell_resistance_%d' % idx)
              %} {%- set font_start = '<font color="#3090C7">' if is_max else
              '<font color="red">' if is_min else '' %} {%- set font_end =
              '</font>' if is_max or is_min else '' %} {{ "%02d" % idx }}. {{
              font_start }} {{ cell_volt }} V {{ font_end -}} &nbsp;/&nbsp; {{
              cell_resistance |float * 1000 }} mΩ  <br>               {% endfor
              %} </center>
  - type: entities
    entities:
      - entity: switch.jk_bms_charging
        name: Charging
      - entity: switch.jk_bms_discharging
        name: Discharging
      - entity: switch.jk_bms_balancer
        name: Balancing
    show_header_toggle: false

a bit unfortunate that home assistant uglyfies the formatting when you save the configuration, but works and looks nice:

4 replies

magnetus26 Aug 5, 2023

hi @dominikandreas,
how did you make stack-in-card to work?
I installed via hacs and dont see it when i try to add a card. if i use custom card i get the following error:

dominikandreas Aug 6, 2023

After installing the card via hacs, you need to add the JavaScript module as a dashboard resource. Go to settings -> dashboards -> menu top right -> resources -> add resource. Then use "/local/stack-in-card.js" as the url and select "JavaScript Module" as the type.
Also, don't forget to reboot homeassistant (rebooting core is enough).

magnetus26 Aug 6, 2023

Perfect.
that solved my issue
thanks
Miguel

dr3amr Mar 17, 2024
Author

thank you for the more efficient cells code ;) upgraded to your version, should have gone with for instead of if ... else in the first place 👍 . Converted mΩ to int from float though the zecimal only takes more space, there is no further data added.

poky · 2024-01-04T08:46:11Z

poky
Jan 4, 2024

Thanks for sharing!
However, the Remaining, Rem. Capacity and Cycle Count are mis-placed

Here's the final fixed version:
(I have changed mine to use 8 cells, but can be easily changed to other)

type: vertical-stack
cards:
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
    cards:
      - type: custom:stack-in-card
        columns: 1
        cards:
          - type: markdown
            content: |-
              <center>Time:&nbsp;<b><font color=#3090C7>{{
                states('sensor.jk_bms_total_runtime_formatted') | upper }}</font>
          - type: markdown
            content: >-

              <center>Charge:&nbsp; <b> {% if states('switch.jk_bms_charging')
              == 'on' %} <font color=#41CD52>{{ states('switch.jk_bms_charging')
              | upper }}</font> {% else %} <font color=red>{{
              states('switch.jk_bms_charging') | upper }}</font> {% endif %}
              </b> {{'&nbsp;' * 5 }}

              Discharge:&nbsp;<b> {% if states('switch.jk_bms_discharging') ==
              'on' %} <font color=#41CD52>{{ states('switch.jk_bms_discharging')
              | upper }}</font> {% else %} <font color=red> {{
              states('switch.jk_bms_discharging') | upper }} </font> {% endif %}
              </b>

              {{'&nbsp;' * 5 }} Balance:<b> {% if
              states('switch.jk_bms_balancer') == 'on' %} <font color=#41CD52>{{
              states('switch.jk_bms_balancer') | upper }}</font> {% else %}
              <font color=red>{{ states('switch.jk_bms_balancer') | upper
              }}</font> {% endif %} 
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: custom:stack-in-card
        margin: false
        columns: 2
        mode: horizontal
        cards:
          - type: markdown
            content: >-
              <center><b><font color=#41CD52 size=6>{{
              states('sensor.jk_bms_total_voltage') }} V</font></b><br>
              </center>  {% macro pad_right(w, s) %} {{ s }} {% set slen =  w -
              (s|length) %} 
                {% for idx in range(slen)%} &nbsp; {%endfor %}
              {%- endmacro %} 

              {% macro green(s) %} <font color=#41CD52 size=2 family=Consolas>
              {{ s }} </font> {%- endmacro %}

              <div>  {{ pad_right(14, "Power Draw:") -}}   {% set power =
              states('sensor.jk_bms_power') | int %} {{ green('%d' % power + '
              W') }}<br>  {{ pad_right(16, "Total Capacity:") -}}   {{
              green(states('sensor.jk_bms_total_battery_capacity_setting') + "
              Ah") }}<br>  {{ pad_right(16, 'Cycle Capacity:') }}   {{
              green(states('sensor.jk_bms_total_charging_cycle_capacity')  + "
              Ah") }}<br>  {{ pad_right(16, 'Avg Cell V:') }}   {{
              green(states('sensor.jk_bms_average_cell_voltage') + ' V') }}
              <br>  {{ pad_right(16, 'Balance Curr:') }}   {{
              green(states('sensor.jk_bms_balancing_current') + ' A') }}<br>  {{
              pad_right(16, 'Battery T1:') }}   {{
              green(states('sensor.jk_bms_temperature_sensor_1') +  ' °C') }}
              </div>
          - type: markdown
            content: >-
              <center><b><font color=#41CD52 size=6>{{
              states('sensor.jk_bms_current') }} A</font></b><br> </center> {%
              macro pad_right(w, s) %}  {{ s }} {% set slen =  w - (s|length) %}
              {% for idx in range(slen)%} &nbsp; {%endfor %} {%- endmacro %} {%
              macro green(s) %} <font color=#41CD52 family=Consolas> {{ s }}
              </font> {%- endmacro %} <div>  {{ pad_right(14, "Remaining:") -}} 
              {{ green(states('sensor.jk_bms_state_of_charge') + ' %')
              }}<br>    {{ pad_right(15, "Rem. Capacity:") -}}    {{
              green(states('sensor.jk_bms_capacity_remaining') + " Ah")
              }}<br>   {{ pad_right(15, 'Cycle Count:') }}  {{
              green(states('sensor.jk_bms_charging_cycles')) }}<br> {{
              pad_right(16, 'Delta Cell V:') }}  {{
              green(states('sensor.jk_bms_delta_cell_voltage') + ' V') }} <br> 
              {{ pad_right(14, 'MOS  Temp.:') }}  {{
              green(states('sensor.jk_bms_power_tube_temperature') + ' °C')
              }}<br>  {{ pad_right(15, 'Battery T2:') }}  {{
              green(states('sensor.jk_bms_temperature_sensor_2') +  ' °C') }}
              </div>
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: grid
        square: false
        columns: 1
        cards:
          - type: markdown
            content: <center><b> Cells </b> </center>
      - type: grid
        square: false
        columns: 2
        cards:
          - type: markdown
            content: >-
              <center> {% for idx in range(1, 5) -%} {%- set min_idx =
              states('sensor.jk_bms_min_voltage_cell') %} {%- set max_idx =
              states('sensor.jk_bms_max_voltage_cell') %} {%- set is_max =
              states('sensor.jk_bms_max_voltage_cell')| int == idx %} {%- set
              is_min = states('sensor.jk_bms_min_voltage_cell')| int == idx %}
              {%- set volt_sensor_id = 'sensor.jk_bms_cell_voltage_%d' % idx %}
              {%- set ohm_sensor_id = 'sensor.jk_bms_cell_resistance_%d' % idx
              %} {%- set cell_volt = states('sensor.jk_bms_cell_voltage_%d' %
              idx) %} {%- set cell_resistance =
              states('sensor.jk_bms_cell_resistance_%d' % idx) %} {%- set
              font_start = '<font color="#3090C7">' if is_max else '<font
              color="red">' if is_min else '' %} {%- set font_end = '</font>' if
              is_max or is_min else '' %} {{ "%02d" % idx }}. {{ font_start }}
              {{ cell_volt }} V {{ font_end -}} &nbsp;/&nbsp; {{ cell_resistance
              |float * 1000 }} mΩ  <br>               {% endfor %} </center>
          - type: markdown
            content: >-
              <center>              {% for idx in range(5, 9) -%} {%- set
              min_idx = states('sensor.jk_bms_min_voltage_cell') %} {%- set
              max_idx = states('sensor.jk_bms_max_voltage_cell') %} {%- set
              is_max = states('sensor.jk_bms_max_voltage_cell')| int == idx %}
              {%- set is_min = states('sensor.jk_bms_min_voltage_cell')| int ==
              idx %} {%- set volt_sensor_id = 'sensor.jk_bms_cell_voltage_%d' %
              idx %} {%- set ohm_sensor_id = 'sensor.jk_bms_cell_resistance_%d'
              % idx %} {%- set cell_volt =
              states('sensor.jk_bms_cell_voltage_%d' % idx) %} {%- set
              cell_resistance = states('sensor.jk_bms_cell_resistance_%d' % idx)
              %} {%- set font_start = '<font color="#3090C7">' if is_max else
              '<font color="red">' if is_min else '' %} {%- set font_end =
              '</font>' if is_max or is_min else '' %} {{ "%02d" % idx }}. {{
              font_start }} {{ cell_volt }} V {{ font_end -}} &nbsp;/&nbsp; {{
              cell_resistance |float * 1000 }} mΩ  <br>               {% endfor
              %} </center>
  - type: entities
    entities:
      - entity: switch.jk_bms_charging
        name: Charging
      - entity: switch.jk_bms_discharging
        name: Discharging
      - entity: switch.jk_bms_balancer
        name: Balancing
    show_header_toggle: false

0 replies

concierge-at · 2024-01-28T14:00:26Z

concierge-at
Jan 28, 2024

Danke für deine Arbeit und für das teilen des Dashboards. Habe das Dashboard nun doch zum laufen gebracht doch ich bekomme einen Fehler das die Schalter Entitäten nicht verfügbar sind. habe ich das am dashboard was falsch eingetragen oder kommt der fehler vom ESP Yaml?
danke im voraus

2 replies

dr3amr Jan 28, 2024
Author

Hi, please write in english or translate.
There are switches only in the bottom part of dashboard, you should change with your own entities:

type: entities
entities:
- entity: switch.jk_bms_charging
  name: Charging
- entity: switch.jk_bms_discharging
  name: Discharging
- entity: switch.jk_bms_balancer
  name: Balancing
  show_header_toggle: false

concierge-at Jan 28, 2024

I apologize, I am heartbroken because the text was in German, I thought you could write German. I apologize. I use Google translate now.
then I suspect the entities are missing in the system. I'll update the ESP program from Syssi and try again, thanks for the comment and best regards.

Edit:28.01.24-18:30 now after 3 hours of waiting the Charge and discharge entity is in system and the balancer must renamed this is now working. thank you

tistructor · 2024-02-18T18:03:04Z

tistructor
Feb 18, 2024

The fonts of the general parameters of the left column are larger than the right ones.
The "size = 2" dimension is missing

For the rest I made an adjustment on the decimals of the capabilities that went to terms on smartphones.

Thanks for the personalization work, very nice.
It was done by writing the code by hand or with a specific tool?

1 reply

Polillo Oct 24, 2024

how to get the background to be black?

tistructor · 2024-02-18T18:26:27Z

tistructor
Feb 18, 2024

I can't understand how this .yaml language works

1 reply

dr3amr Feb 18, 2024
Author

if you refer to the markdown it is part javascript part html, not yaml.

tistructor · 2024-02-18T18:32:03Z

tistructor
Feb 18, 2024

Thanks,
Then I have to study a little.

0 replies

dr3amr · 2024-03-01T06:58:05Z

dr3amr
Mar 1, 2024
Author

Seems you are running a modified version. Try the code from first post.

…

On Fri, Mar 1, 2024, 06:04 Đặng Đình Ngọc ***@***.***> wrote: Hi, I dont know why, your scripts failed to run "{% for idx in range(1, 5" the display only show the upper part of the lovelace (image) The part relating to cells does not show up. image.png (view on web) <https://github.com/syssi/esphome-jk-bms/assets/8839597/38f888d6-87a8-412c-baef-043c90826a18> Can you advice. I can manually list cell entities but the scripts can be fine if it work! Please help Best, — Reply to this email directly, view it on GitHub <#230 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABJGIGYFWKIM3VQTLBMP6V3YV7443AVCNFSM6AAAAAATRVZQA6VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DMMZYGEZDO> . You are receiving this because you were mentioned.Message ID: ***@***.***>

0 replies

jbduche · 2024-03-08T15:57:46Z

jbduche
Mar 8, 2024

Thanks a lot works perfectly

0 replies

przybora · 2024-04-01T09:30:52Z

przybora
Apr 1, 2024

Hello guys, can someone tell me why it doesn't change the colors to minimum and maximum on my cell

I don't know where I went wrong:

type: grid
square: false
columns: 2
cards:
- type: markdown
  content: >- 01.    {% if states('sensor.jk_bms_max_cell_voltage') == '1' %} {{ states('sensor.jk_bms_cell_voltage_1_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '1' %} {{ states('sensor.jk_bms_cell_voltage_1_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_1_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_1') }} Ω
  02.    {% if states('sensor.jk_bms_max_cell_voltage') == '2' %} {{ states('sensor.jk_bms_cell_voltage_2_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '2' %} {{ states('sensor.jk_bms_cell_voltage_2_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_2_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_2') }} Ω
  03.    {% if states('sensor.jk_bms_max_cell_voltage') == '3' %} {{ states('sensor.jk_bms_cell_voltage_3_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '3' %} {{ states('sensor.jk_bms_cell_voltage_3_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_3_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_3') }} Ω
  04.    {% if states('sensor.jk_bms_max_cell_voltage') == '4' %} {{ states('sensor.jk_bms_cell_voltage_4_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '4' %} {{ states('sensor.jk_bms_cell_voltage_4_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_4_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_4') }} Ω
  05.    {% if states('sensor.jk_bms_max_cell_voltage') == '5' %} {{ states('sensor.jk_bms_cell_voltage_5_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '5' %} {{ states('sensor.jk_bms_cell_voltage_5_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_5_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_5') }} Ω
  06.    {% if states('sensor.jk_bms_max_cell_voltage') == '6' %} {{ states('sensor.jk_bms_cell_voltage_6_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '6' %} {{ states('sensor.bjk_bms_cell_voltage_6_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_6_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_6') }} Ω
  07.    {% if states('sensor.jk_bms_max_cell_voltage') == '7' %} {{ states('sensor.jk_bms_cell_voltage_7_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '7' %} {{ states('sensor.jk_bms_cell_voltage_7_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_7_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_7') }} Ω
  08.    {% if states('sensor.jk_bms_max_cell_voltage') == '8' %} {{ states('sensor.jk_bms_cell_voltage_8_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '8' %} {{ states('sensor.jk_bms_cell_voltage_8_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_8_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_8') }} Ω
- type: markdown
  content: >- 09.    {% if states('sensor.jk_bms_max_cell_voltage') == '9' %} {{ states('sensor.jk_bms_cell_voltage_9_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '9' %} {{ states('sensor.jk_bms_cell_voltage_9_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_9_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_9') }} Ω
  10.    {% if states('sensor.jk_bms_max_cell_voltage') == '10' %} {{ states('sensor.jk_bms_cell_voltage_10_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '10' %} {{ states('sensor.jk_bms_cell_voltage_10_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_10_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_10') }} Ω
  11.    {% if states('sensor.jk_bms_max_cell_voltage') == '11' %} {{ states('sensor.jk_bms_cell_voltage_11_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '11' %} {{ states('sensor.jk_bms_cell_voltage_11_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_11_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_11') }} Ω
  12.    {% if states('sensor.jk_bms_max_cell_voltage') == '12' %} {{ states('sensor.jk_bms_cell_voltage_12_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '12' %} {{ states('sensor.jk_bms_cell_voltage_12_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_12_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_12') }} Ω
  13.    {% if states('sensor.jk_bms_max_cell_voltage') == '13' %} {{ states('sensor.jk_bms_cell_voltage_13_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '13' %} {{ states('sensor.jk_bms_cell_voltage_13_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_13_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_13') }} Ω
  14.    {% if states('sensor.jk_bms_max_cell_voltage') == '14' %} {{ states('sensor.jk_bms_cell_voltage_14_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '14' %} {{ states('sensor.jk_bms_cell_voltage_14_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_14_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_14') }} Ω
  15.    {% if states('sensor.jk_bms_max_cell_voltage') == '15' %} {{ states('sensor.jk_bms_cell_voltage_15_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '15' %} {{ states('sensor.jk_bms_cell_voltage_15_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_15_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_15') }} Ω
  16.    {% if states('sensor.jk_bms_max_cell_voltage') == '16' %} {{ states('sensor.jk_bms_cell_voltage_16_2') }} V {% elif states('sensor.jk_bms_min_cell_voltage') == '16' %} {{ states('sensor.bjk_bms_cell_voltage_16_2') }} V {% else %} {{ states('sensor.jk_bms_cell_voltage_16_2') }} V {% endif %} / {{ states('sensor.jk_bms_cell_resistance_16') }} Ω

2 replies

dr3amr Apr 1, 2024
Author

@przybora try the optimized code version from @dominikandreas, less text (equivalent for your above code), although the issue most certainly is with sensor naming:

 - type: grid
    square: false
    columns: 2
    cards:
      - type: markdown
        content: >-
          {% for idx in range(1, 9) -%}  {%- set min_idx =
          states('sensor.jk_bms_min_voltage_cell') %} {%- set max_idx =
          states('sensor.jk_bms_max_voltage_cell') %}  {%- set is_max =
          states('sensor.jk_bms_max_voltage_cell')| int == idx %} {%- set
          is_min = states('sensor.jk_bms_min_voltage_cell')| int == idx %}
          {%- set volt_sensor_id = 'sensor.jk_bms_cell_voltage_%d' % idx %}
          {%- set ohm_sensor_id = 'sensor.jk_bms_cell_resistance_%d' % idx %}
          {%- set cell_volt = states('sensor.jk_bms_cell_voltage_%d' % idx)
          %} {%- set cell_resistance =
          states('sensor.jk_bms_cell_resistance_%d' % idx) %} {%- set
          font_start = '<font color="#3090C7">' if is_max else '<font
          color="red">' if is_min else '' %} {%- set font_end = '</font>' if
          is_max or is_min else '' %} {{ "%02d" % idx }}.&nbsp;&nbsp; {{
          font_start }} {{ cell_volt }} V {{ font_end -}}
          &nbsp;&nbsp;/&nbsp;&nbsp; {{ (cell_resistance | float * 1000) | int }}
          mΩ  <br> {% endfor %} </center>
      - type: markdown
        content: >-
          {% for idx in range(9, 17) -%} {%- set min_idx =
          states('sensor.jk_bms_min_voltage_cell') %} {%- set max_idx =
          states('sensor.jk_bms_max_voltage_cell') %}  {%- set is_max =
          states('sensor.jk_bms_max_voltage_cell')| int == idx %} {%- set
          is_min = states('sensor.jk_bms_min_voltage_cell')| int == idx %}
          {%- set volt_sensor_id = 'sensor.jk_bms_cell_voltage_%d' % idx %}
          {%- set ohm_sensor_id = 'sensor.jk_bms_cell_resistance_%d' % idx %}
          {%- set cell_volt = states('sensor.jk_bms_cell_voltage_%d' % idx)
          %} {%- set cell_resistance =
          states('sensor.jk_bms_cell_resistance_%d' % idx) %} {%- set
          font_start = '<font color="#3090C7">' if is_max else '<font
          color="red">' if is_min else '' %} {%- set font_end = '</font>' if
          is_max or is_min else '' %}  {{ "%02d" % idx }}.&nbsp;&nbsp; {{
          font_start }} {{ cell_volt }} V {{ font_end -}}
          &nbsp;&nbsp;/&nbsp;&nbsp; {{ (cell_resistance | float * 1000) | int }}
          mΩ  <br> {% endfor %}  </center>

przybora Apr 1, 2024

but no :( it works

przybora · 2024-04-01T14:19:20Z

przybora
Apr 1, 2024

Thank you, it works well now, I think

0 replies

przybora · 2024-04-01T15:47:26Z

przybora
Apr 1, 2024

dr3amr Could you see my code? I don't know why but I always have one goal number 3 in blue and it doesn't change. Minimum in red color jumps on all targets but not blue max
I can't find the error

@przybora wypróbuj zoptymalizowaną wersję kodu z@dominikandreas, mniej tekstu (odpowiednik powyższego kodu), chociaż problem z pewnością dotyczy nazewnictwa czujników:

 - type: grid
    square: false
    columns: 2
    cards:
      - type: markdown
        content: >-
          {% for idx in range(1, 9) -%}  {%- set min_idx =
          states('sensor.jk_bms_min_voltage_cell') %} {%- set max_idx =
          states('sensor.jk_bms_max_voltage_cell') %}  {%- set is_max =
          states('sensor.jk_bms_max_voltage_cell')| int == idx %} {%- set
          is_min = states('sensor.jk_bms_min_voltage_cell')| int == idx %}
          {%- set volt_sensor_id = 'sensor.jk_bms_cell_voltage_%d' % idx %}
          {%- set ohm_sensor_id = 'sensor.jk_bms_cell_resistance_%d' % idx %}
          {%- set cell_volt = states('sensor.jk_bms_cell_voltage_%d' % idx)
          %} {%- set cell_resistance =
          states('sensor.jk_bms_cell_resistance_%d' % idx) %} {%- set
          font_start = '<font color="#3090C7">' if is_max else '<font
          color="red">' if is_min else '' %} {%- set font_end = '</font>' if
          is_max or is_min else '' %} {{ "%02d" % idx }}.&nbsp;&nbsp; {{
          font_start }} {{ cell_volt }} V {{ font_end -}}
          &nbsp;&nbsp;/&nbsp;&nbsp; {{ (cell_resistance | float * 1000) | int }}
          mΩ  <br> {% endfor %} </center>
      - type: markdown
        content: >-
          {% for idx in range(9, 17) -%} {%- set min_idx =
          states('sensor.jk_bms_min_voltage_cell') %} {%- set max_idx =
          states('sensor.jk_bms_max_voltage_cell') %}  {%- set is_max =
          states('sensor.jk_bms_max_voltage_cell')| int == idx %} {%- set
          is_min = states('sensor.jk_bms_min_voltage_cell')| int == idx %}
          {%- set volt_sensor_id = 'sensor.jk_bms_cell_voltage_%d' % idx %}
          {%- set ohm_sensor_id = 'sensor.jk_bms_cell_resistance_%d' % idx %}
          {%- set cell_volt = states('sensor.jk_bms_cell_voltage_%d' % idx)
          %} {%- set cell_resistance =
          states('sensor.jk_bms_cell_resistance_%d' % idx) %} {%- set
          font_start = '<font color="#3090C7">' if is_max else '<font
          color="red">' if is_min else '' %} {%- set font_end = '</font>' if
          is_max or is_min else '' %}  {{ "%02d" % idx }}.&nbsp;&nbsp; {{
          font_start }} {{ cell_volt }} V {{ font_end -}}
          &nbsp;&nbsp;/&nbsp;&nbsp; {{ (cell_resistance | float * 1000) | int }}
          mΩ  <br> {% endfor %}  </center>

4 replies

przybora Apr 1, 2024

type: grid
square: false
columns: 2
cards:
- type: markdown
content: >-
{% for idx in range(1, 9) -%}
{%- set min_idx = states('sensor.jk_bms_min_cell_voltage') %}
{%- set max_idx = states('sensor.jk_bms_max_cell_voltage') %}
{%- set is_max = states('sensor.jk_bms_max_cell_voltage')| int == idx %}
{%- set is_min = states('sensor.jk_bms_min_voltage_cell')| int == idx %}
{%- set volt_sensor_id = 'sensor.jk_bms_cell_voltage_%d_2' % idx %}
{%- set ohm_sensor_id = 'sensor.jk_bms_cell_resistance_%d' % idx %}
{%- set cell_volt = states('sensor.jk_bms_cell_voltage_%d_2' % idx) %}
{%- set cell_resistance = states('sensor.jk_bms_cell_resistance_%d' % idx) %}
{%- set font_start = '' if is_max else '' if is_min else '' %}
{%- set font_end = '' if is_max or is_min else '' %} {{ "%02d" % idx }}.
{{ font_start }} {{ cell_volt }} V {{ font_end -}} / {{ cell_resistance |float * 1000 }} mΩ

{% endfor %}
- type: markdown
content: >-
{% for idx in range(9, 17) -%}
{%- set min_idx = states('sensor.jk_bms_min_cell_voltage') %}
{%- set max_idx = states('sensor.jk_bms_max_cell_voltage') %}
{%- set is_max = states('sensor.jk_bms_max_cell_voltage')| int == idx %}
{%- set is_min = states('sensor.jk_bms_min_voltage_cell')| int == idx %}
{%- set volt_sensor_id = 'sensor.jk_bms_cell_voltage_%d_2' % idx %}
{%- set ohm_sensor_id = 'sensor.jk_bms_cell_resistance_%d' % idx %}
{%- set cell_volt = states('sensor.jk_bms_cell_voltage_%d_2' % idx) %}
{%- set cell_resistance = states('sensor.jk_bms_cell_resistance_%d' % idx) %}
{%- set font_start = '' if is_max else '' if is_min else '' %}
{%- set font_end = '' if is_max or is_min else '' %} {{ "%02d" % idx }}.
{{ font_start }} {{ cell_volt }} V {{ font_end -}} / {{ cell_resistance |float * 1000 }} mΩ

{% endfor %}

przybora Apr 1, 2024

The max blue light doesn't work properly for me, I still have 3 targets highlighted in blue

dr3amr Apr 1, 2024
Author

@przybora you need to check the sensor names as in last photo you have 14 cells with same voltage, this is highly unlikely.
Also the colors for highest voltage cell (blue / discharging) is taken from the sensor.jk_bms_max_cell_voltage, while the lowest (red / charging) is taken from sensor.jk_bms_min_cell_voltage, you need to check if both exist with this exact names.
Also all cell entities need to have the naming as sensor.esp_jkbms_cell_voltage_xx / sensor.esp_jkbms_cell_resistance_xx and not something else => sensor.esp_jkbms_cell_voltage_1 / sensor.esp_jkbms_cell_voltage_16 , sensor.esp_jkbms_cell_resistance_1 / sensor.esp_jkbms_cell_resistance_16. If proper naming is not in place, this will not work.

przybora Apr 1, 2024

It now works properly, I entered the wrong values

Thank you very much

przybora · 2024-04-06T15:42:29Z

przybora
Apr 6, 2024

hello guys, I recently bought a new BMS model JK_PB2A16S20P Hardware Ver 15.XA and Software Ver. V15.10 everything works as it should

1 reply

anhnldev Dec 14, 2024

can you share your code?

vejvik · 2024-04-20T14:00:29Z

vejvik
Apr 20, 2024

hi, thanks to syssi I got neey 4th 4A balancer up and running in HA. I wanted to make a balancer card according to the first post, but the blue and red markings of the minimum and maximum do not work. I renamed the entities to my own, but it doesn't work for me

my code
`type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:

type: grid
square: false
columns: 1
cards:
- type: markdown
  content: články baterie 1

type: grid
square: false
columns: 2
cards:

type: markdown
content: >- 01.    {% if states('sensor.max_cell_voltage_akku1') == '1' %} {{ states('sensor.voltage_01_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '1' %} {{ states('sensor.voltage_01_akku1') }} V {% else %} {{ states('sensor.voltage_01_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_01_akku1') }} Ω
02.    {% if states('sensor.max_cell_voltage_akku1') == '2' %} {{ states('sensor.voltage_02_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '2' %} {{ states('sensor.voltage_02_akku1') }} V {% else %} {{ states('sensor.voltage_02_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_02_akku1') }} Ω
03.    {% if states('sensor.max_cell_voltage_akku1') == '3' %} {{ states('sensor.voltage_03_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '3' %} {{ states('sensor.voltage_03_akku1') }} V {% else %} {{ states('sensor.voltage_03_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_03_akku1') }} Ω
04.    {% if states('sensor.max_cell_voltage_akku1') == '4' %} {{ states('sensor.voltage_04_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '4' %} {{ states('sensor.voltage_04_akku1') }} V {% else %} {{ states('sensor.voltage_04_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_04_akku1') }} Ω
05.    {% if states('sensor.max_cell_voltage_akku1') == '5' %} {{ states('sensor.voltage_05_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '5' %} {{ states('sensor.voltage_05_akku1') }} V {% else %} {{ states('sensor.voltage_05_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_05_akku1') }} Ω
06.    {% if states('sensor.max_cell_voltage_akku1') == '6' %} {{ states('sensor.voltage_06_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '6' %} {{ states('sensor.voltage_06_akku1') }} V {% else %} {{ states('sensor.voltage_06_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_06_akku1') }} Ω
07.    {% if states('sensor.max_cell_voltage_akku1') == '7' %} {{ states('sensor.voltage_07_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '7' %} {{ states('sensor.voltage_07_akku1') }} V {% else %} {{ states('sensor.voltage_07_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_07_akku1') }} Ω
08.    {% if states('sensor.max_cell_voltage_akku1') == '8' %} {{ states('sensor.voltage_08_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '8' %} {{ states('sensor.voltage_08_akku1') }} V {% else %} {{ states('sensor.voltage_08_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_08_akku1') }} Ω

type: markdown
content: >- 09.    {% if states('sensor.max_cell_voltage_akku1') == '9' %} {{ states('sensor.voltage_09_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '9' %} {{ states('sensor.voltage_09_akku1') }} V {% else %} {{ states('sensor.voltage_09_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_09_akku1') }} Ω
10.    {% if states('sensor.max_cell_voltage_akku1') == '10' %} {{ states('sensor.voltage_10_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '10' %} {{ states('sensor.voltage_10_akku1') }} V {% else %} {{ states('sensor.voltage_10_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_10_akku1') }} Ω
11.    {% if states('sensor.max_cell_voltage_akku1') == '11' %} {{ states('sensor.voltage_11_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '11' %} {{ states('sensor.voltage_11_akku1') }} V {% else %} {{ states('sensor.voltage_11_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_11_akku1') }} Ω
12.    {% if states('sensor.max_cell_voltage_akku1') == '12' %} {{ states('sensor.voltage_12_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '12' %} {{ states('sensor.voltage_12_akku1') }} V {% else %} {{ states('sensor.voltage_12_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_12_akku1') }} Ω
13.    {% if states('sensor.max_cell_voltage_akku1') == '13' %} {{ states('sensor.voltage_13_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '13' %} {{ states('sensor.voltage_13_akku1') }} V {% else %} {{ states('sensor.voltage_13_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_13_akku1') }} Ω
14.    {% if states('sensor.max_cell_voltage_akku1') == '14' %} {{ states('sensor.voltage_14_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '14' %} {{ states('sensor.voltage_14_akku1') }} V {% else %} {{ states('sensor.voltage_14_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_14_akku1') }} Ω
15.    {% if states('sensor.max_cell_voltage_akku1') == '15' %} {{ states('sensor.voltage_15_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '15' %} {{ states('sensor.voltage_15_akku1') }} V {% else %} {{ states('sensor.voltage_15_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_15_akku1') }} Ω
16.    {% if states('sensor.max_cell_voltage_akku1') == '16' %} {{ states('sensor.voltage_16_akku1') }} V {% elif states('sensor.min_cell_voltage_akku1') == '16' %} {{ states('sensor.voltage_16_akku1') }} V {% else %} {{ states('sensor.voltage_16_akku1') }} V {% endif %}    /    {{ states('sensor.resistance_16_akku1') }} Ω

`

0 replies

mengi69 · 2024-07-28T09:43:08Z

mengi69
Jul 28, 2024

Congratulations on the work!!!

I have it adapted to my language, Spanish, but it is coming out pretty well.

What I can't get is for the first column of cell values to be each on a single line, as happens with the right column, which is perfect.

Do you think you can help me???

Thank you very much.

This is my code:

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: markdown
        content: >
          <table style="width: 100%; border-collapse: collapse;"> {% for idx in
          range(1, 9) %}
            {%- set min_idx = states('sensor.jk_bms_voltaje_min_celda') %}
            {%- set max_idx = states('sensor.jk_bms_voltaje_max_celda') %}
            {%- set is_max = states('sensor.jk_bms_voltaje_max_celda')|int == idx %}
            {%- set is_min = states('sensor.jk_bms_voltaje_min_celda')|int == idx %}
            {%- set volt_sensor_id = 'sensor.jk_bms_voltaje_celda_' ~ "%02d" % idx %}
            {%- set ohm_sensor_id = 'sensor.jk_bms_resistencia_celda_' ~ "%02d" % idx %}
            {%- set cell_volt = states(volt_sensor_id) %}
            {%- set cell_resistance = states(ohm_sensor_id) %}
            {%- set font_start = '<font color="#3090C7">' if is_max else '<font color="red">' if is_min else '' %}
            {%- set font_end = '</font>' if is_max or is_min else '' %}
            <tr>
              <td style="padding: 2px 4px; text-align: left;">{{ "%02d" % idx }}.</td>
              <td style="padding: 2px 4px; text-align: right;">{{ font_start }}{{ cell_volt }} V{{ font_end }}</td>
              <td style="padding: 2px 4px;">/</td>
              <td style="padding: 2px 4px; text-align: left;">{{ (cell_resistance | float * 1000) | int }} mΩ</td>
            </tr>
          {% endfor %} </table>
      - type: markdown
        content: >
          <table style="width: 100%; border-collapse: collapse;"> {% for idx in
          range(9, 17) %}
            {%- set min_idx = states('sensor.jk_bms_voltaje_min_celda') %}
            {%- set max_idx = states('sensor.jk_bms_voltaje_max_celda') %}
            {%- set is_max = states('sensor.jk_bms_voltaje_max_celda')|int == idx %}
            {%- set is_min = states('sensor.jk_bms_voltaje_min_celda')|int == idx %}
            {%- set volt_sensor_id = 'sensor.jk_bms_voltaje_celda_' ~ "%02d" % idx %}
            {%- set ohm_sensor_id = 'sensor.jk_bms_resistencia_celda_' ~ "%02d" % idx %}
            {%- set cell_volt = states(volt_sensor_id) %}
            {%- set cell_resistance = states(ohm_sensor_id) %}
            {%- set font_start = '<font color="#3090C7">' if is_max else '<font color="red">' if is_min else '' %}
            {%- set font_end = '</font>' if is_max or is_min else '' %}
            <tr>
              <td style="padding: 2px 4px; text-align: left;">{{ "%02d" % idx }}.</td>
              <td style="padding: 2px 4px; text-align: right;">{{ font_start }}{{ cell_volt }} V{{ font_end }}</td>
              <td style="padding: 2px 4px;">/</td>
              <td style="padding: 2px 4px; text-align: left;">{{ (cell_resistance | float * 1000) | int }} mΩ</td>
            </tr>
          {% endfor %} </table>

0 replies

sakhnik · 2024-08-04T04:48:10Z

sakhnik
Aug 4, 2024

@dr3amr, I appreciate your contribution, it helps a lot to monitor the battery. When I had to adapt the markup for my screen, I realized that it's useful to apply some macro processor to generate repeating parts. I'm using GNU m4 to generate the markdown (m4 card.yml.m4) and diff to compare the generated output with the manual code:

changequote(`«', `»')dnl
define(DEV, jk_bms1)dnl
define(SWITCH, «states('switch.DEV()_$1')»)dnl
define(SENSOR, «states('sensor.DEV()_$1')»)dnl
define(SHOW_SWITCH, «<center>$1:&nbsp;<b>{% if SWITCH($2) == 'on' %}
          <font color=«#»41CD52>{{ SWITCH($2) | upper
          }}</font> {% else %} <font color=red>{{
          SWITCH($2) | upper }}</font> {% endif %}»)dnl
define(SHOW_SENSOR_HEADER, «<b><font color=«#»41CD52 size=6>{{ SENSOR($1) }} $2</font></b>»)dnl
define(SHOW_SENSOR, «$1:&nbsp;&nbsp;<font color=«#»41CD52>{{ SENSOR($2) }} $3</font>»)dnl
define(SHOW_CELL, «{% if SENSOR(max_voltage_cell) == '$1' %}
          <font color="«#»3090C7">{{ SENSOR(cell_voltage_$1) }} V</font>
          {% elif SENSOR(min_voltage_cell) == '$1' %}
          <font color="red">{{ SENSOR(cell_voltage_$1) }} V</font>
          {% else %} {{ SENSOR(cell_voltage_$1) }} V
          {% endif %} &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;
          {{ SENSOR(cell_resistance_$1) }} Ω»)dnl
dnl
type: vertical-stack
cards:
  - type: grid
    square: false
    columns: 3
    cards:
      - type: markdown
        content: >-
          SHOW_SWITCH(Ch, charging)
      - type: markdown
        content: >-
          SHOW_SWITCH(Dis, discharging)
      - type: markdown
        content: >-
          SHOW_SWITCH(Bal, balancer)
  - type: grid
    square: false
    columns: 2
    cards:
      - type: markdown
        content: >-
          <center>SHOW_SENSOR_HEADER(total_voltage, V)<br>
          SHOW_SENSOR(Battery Power, power, W)<br>
          SHOW_SENSOR(Battery Cap, total_battery_capacity_setting, Ah)<br>
          SHOW_SENSOR(Cycle Cap, total_charging_cycle_capacity, Ah)<br>
          SHOW_SENSOR(Ave. Cell Vol., average_cell_voltage, V)<br>
          SHOW_SENSOR(Balance Cur., balancing_current, A)<br>
          SHOW_SENSOR(Battery T1, temperature_sensor_1, °C)
      - type: markdown
        content: >-
          <center>SHOW_SENSOR_HEADER(current, A)<br>
          SHOW_SENSOR(Remain, state_of_charge, %)<br>
          SHOW_SENSOR(Remain, capacity_remaining, Ah)<br>
          SHOW_SENSOR(Cycle Count, charging_cycles)<br>
          SHOW_SENSOR(Delta Cell Vol., delta_cell_voltage, V)<br>
          SHOW_SENSOR(MOS Temp., power_tube_temperature, °C)<br>
          SHOW_SENSOR(Battery T2, temperature_sensor_2, °C)
  - type: grid
    square: false
    columns: 2
    cards:
      - type: markdown
        content: >-
          <center>
          SHOW_CELL(1) <br>
          SHOW_CELL(2) <br>
          SHOW_CELL(3) <br>
          SHOW_CELL(4) <br>
          SHOW_CELL(5) <br>
          SHOW_CELL(6) <br>
          SHOW_CELL(7) <br>
          SHOW_CELL(8) <br>
          </center>
      - type: markdown
        content: >-
          <center>
          SHOW_CELL(9) <br>
          SHOW_CELL(10) <br>
          SHOW_CELL(11) <br>
          SHOW_CELL(12) <br>
          SHOW_CELL(13) <br>
          SHOW_CELL(14) <br>
          SHOW_CELL(15) <br>
          SHOW_CELL(16) <br>
          </center>

3 replies

gideonklein Sep 6, 2024

Goo morning, I have a question: the sensors ohms (Ω) are the resistances of the cells? Thank you

man55 Sep 6, 2024

resistances of the cells + wires

gyrex Sep 8, 2024

EDIT: Apologies, I didn't realise I needed to install stack-in-card from HACS. Leaving the post here for others who might run into this issue.

I get the following error with this code:

Configuration errors detected:
end of the stream or a document separator is expected (19:5)

 16 |           {% endif %} &nbsp;&nbsp;& ...
 17 |           {{ SENSOR(cell_resistance ...
 18 | dnl
 19 | type: vertical-stack
----------^
 20 | cards:
 21 |   - type: grid

Removing what I think might be an erroneous "dnl", I then get:

Configuration errors detected:
end of the stream or a document separator is expected (18:5)

 15 |           {% else %} {{ SENSOR(cell ...
 16 |           {% endif %} &nbsp;&nbsp;& ...
 17 |           {{ SENSOR(cell_resistance ...
 18 | type: vertical-stack
----------^
 19 | cards:
 20 |   - type: grid

man55 · 2024-08-22T10:57:54Z

man55
Aug 22, 2024

Thank you. It looks good, compact.
But it is very much lacking the ability to click on the sensor readings to see the history.
The history of readings is much more important than the current readings. And I have to keep the usual HA cards nearby to be able to click on them. It turns out to be some kind of sandwich - all readings are duplicated and as a result there is no point in this beauty.

How can this be fixed? Sensors should be clickable.

1 reply

concierge-at Sep 6, 2024

No, there is no problem, it just takes until something is read in via the API

dr3amr · 2024-09-06T15:55:45Z

dr3amr
Sep 6, 2024
Author

Internal resistance of cells, yes.

…

On Fri, Sep 6, 2024, 18:51 gideonklein ***@***.***> wrote: Goo morning, I have a question: the sensors ohms (Ω) are the resistances of the cells? Thank you — Reply to this email directly, view it on GitHub <#230 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABJGIG3GNW6SXBGTWXZZPYTZVHFR5AVCNFSM6AAAAAATRVZQA6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANJXGEYDAMI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

3 replies

gideonklein Sep 6, 2024

Thank you very much. Another question, please. I have the card on my Home assistant and my values of resitances are from 0,165 to 0,179. Are these high numbers for lifepo4 cells? Thank you one more time and for this amazing card

dr3amr Sep 9, 2024
Author

@gideonklein I'm no expert, but they seem to be high. My EVE 230AH LFP cells are quite consistent (check my first post image), and vary from 0.051 to 0.052 ohm. Seen resistance values similar to yours in a friend of mine's Li-Ion pack, recovered from a EV car. Not sure how it impacts performance.

gideonklein Sep 10, 2024

Thank you very much for your reply

gyrex · 2024-09-11T22:45:47Z

gyrex
Sep 11, 2024

Sorry, this might be a really stupid question, but how do I get vertical-stack working in lovelace? I keep getting the following error in my yaml file:

Configuration errors detected:
Unknown type: vertical-stack

Edit: I've installed "Vertical Stack In Card" via HACS and restarted HA and can see vertical-stack-in-card as a resource on the page but I still get this error.

0 replies

Mr-EJ · 2024-09-21T22:01:56Z

Mr-EJ
Sep 21, 2024

I've modified the codes to suit ANT-32s BMS


type: vertical-stack
cards:
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
    cards:
      - type: custom:stack-in-card
        columns: 1
        cards:
          - type: gauge
            entity: sensor.ant_in_r1_soc
            needle: true
            name: Charge
            severity:
              green: 70
              yellow: 30
              red: 0
          - type: markdown
            content: >-

              <center>Charge:&nbsp; <b> {% if states('switch.ant_in_r1_charge')
              == 'on' %} <font color=#41CD52>{{
              states('switch.ant_in_r1_charge') | upper }}</font> {% else %}
              <font color=red>{{ states('switch.ant_in_r1_charge') | upper
              }}</font> {% endif %} </b> {{'&nbsp;' * 5 }}

              Discharge:&nbsp;<b> {% if states('switch.ant_in_r1_discharge') ==
              'on' %} <font color=#41CD52>{{
              states('switch.ant_in_r1_discharge') | upper }}</font> {% else %}
              <font color=red> {{ states('switch.ant_in_r1_discharge') | upper
              }} </font> {% endif %} </b>
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: custom:stack-in-card
        margin: false
        columns: 2
        mode: horizontal
        cards:
          - type: markdown
            content: >-
              <center><b><font color=#41CD52 size=6>{{
              states('sensor.ant_in_r1_voltage') }} V</font></b><br> </center> 
              {% macro pad_right(w, s) %} {{ s }} {% set slen =  w - (s|length)
              %} 
                {% for idx in range(slen)%} &nbsp; {%endfor %}
              {%- endmacro %} 

              {% macro green(s) %} <font color=#41CD52 size=2 family=Consolas>
              {{ s }} </font> {%- endmacro %}

              <div>  {{ pad_right(14, "Power Draw:") -}}   {% set power =
              states('sensor.ant_in_r1_power') | int %} {{ green('%d' % power +
              ' W') }}<br>  {{ pad_right(16, "Total Capacity:") -}}   {{
              green(states('sensor.ant_in_r1_capacity') + " Ah") }}<br>  {{
              pad_right(16, 'Cycle Capacity:') }}   {{
              green(states('sensor.ant_in_r1_cycle_capacity')  + " Ah") }}<br> 
              {{ pad_right(16, 'Avg Cell V:') }}   {{
              green(states('sensor.ant_in_r1_cell_volt_average') + ' V') }}
              <br>  {{ pad_right(10, 'Min Cell:') }}   {{
              green(states('sensor.ant_in_r1_cell_index_min') ) }} {{'&nbsp;' *
              5 }}{{ pad_right(9, 'Max Cell:') }}   {{
              green(states('sensor.ant_in_r1_cell_index_max') ) }} <br>  {{
              pad_right(16, 'Battery T1:') }}   {{
              green(states('sensor.ant_in_r1_temperatures_1') +  ' °C') }}
              </div>
          - type: markdown
            content: >-
              <center><b><font color=#41CD52 size=6>{{
              states('sensor.ant_in_r1_current') }} A</font></b><br> </center>
              {% macro pad_right(w, s) %}  {{ s }} {% set slen =  w - (s|length)
              %} {% for idx in range(slen)%} &nbsp; {%endfor %} {%- endmacro %}
              {% macro green(s) %} <font color=#41CD52 family=Consolas> {{ s }}
              </font> {%- endmacro %} <div>  {{ pad_right(14, "Remaining:") -}} 
              {{ green(states('sensor.ant_in_r1_soc') + ' %') }}<br>    {{
              pad_right(15, "Rem. Capacity:") -}}    {{
              green(states('sensor.ant_in_r1_charge') + " Ah") }}<br>   {{
              pad_right(15, 'Cycle Count:') }}  {{
              green(states('sensor.ant_in_r1_total_cycles_meter')  + "N") }}<br>
              {{ pad_right(16, 'Delta Cell V:') }}  {{
              green(states('sensor.ant_in_r1_cell_volt_delta') + ' V') }} <br> 
              {{ pad_right(14, 'MOS  Temp.:') }}  {{
              green(states('sensor.ant_in_r1_mos_temperature') + ' °C') }}<br> 
              {{ pad_right(15, 'Battery T2:') }}  {{
              green(states('sensor.ant_in_r1_temperatures_2') +  ' °C') }}
              </div>
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: grid
        square: false
        columns: 1
        cards:
          - type: markdown
            content: <center><b> Cells </b> </center>
      - type: grid
        square: false
        columns: 4
        cards:
          - type: markdown
            content: >-
              {% for idx in range(1, 9) -%} {%- set  min_idx =
              states('sensor.ant_in_r1_cell_index_min') %} {%- set  max_idx =
              states('sensor.ant_in_r1_cell_index_max') %} {%- set is_max = 
              states('sensor.ant_in_r1_cell_index_max')| int == idx %}  {%- set
              is_min = states('sensor.ant_in_r1_cell_index_min')| int == idx
              %}   {% if idx <= 9 %}               {%- set volt_sensor_id =
              'sensor.ant_in_r1_cell_volt_0%d' % idx %} {%- set cell_volt =
              states('sensor.ant_in_r1_cell_volt_0%d' % idx) %} {%- else %} {%-
              set volt_sensor_id = 'sensor.ant_in_r1_cell_volt_%d' % idx %} {%-
              set cell_volt = states('sensor.ant_in_r1_cell_volt_%d' % idx) %}
              {%- endif %} {%- set font_start  = '<font color="#3090C7">' if
              is_max else '<font color="red">' if is_min else '' %} {%- set
              font_end = '</font>' if is_max or is_min else '' %} &nbsp;{{
              "%02d" % idx }}. {{ font_start }} {{ cell_volt }} V {{ font_end
              -}}  <br>  {% endfor %}
          - type: markdown
            content: >-
              {% for idx in range(9, 17) -%} {%- set  min_idx =
              states('sensor.ant_in_r1_cell_index_min') %} {%- set  max_idx =
              states('sensor.ant_in_r1_cell_index_max') %} {%- set is_max = 
              states('sensor.ant_in_r1_cell_index_max')| int == idx %}  {%- set
              is_min = states('sensor.ant_in_r1_cell_index_min')| int == idx
              %}   {% if idx <= 9 %}               {%- set volt_sensor_id =
              'sensor.ant_in_r1_cell_volt_0%d' % idx %} {%- set cell_volt =
              states('sensor.ant_in_r1_cell_volt_0%d' % idx) %} {%- else %} {%-
              set volt_sensor_id = 'sensor.ant_in_r1_cell_volt_%d' % idx %} {%-
              set cell_volt = states('sensor.ant_in_r1_cell_volt_%d' % idx) %}
              {%- endif %} {%- set font_start  = '<font color="#3090C7">' if
              is_max else '<font color="red">' if is_min else '' %} {%- set
              font_end = '</font>' if is_max or is_min else '' %} &nbsp;{{
              "%02d" % idx }}. {{ font_start }} {{ cell_volt }} V {{ font_end
              -}}  <br>  {% endfor %}
          - type: markdown
            content: >-
              {% for idx in range(17, 25) -%} {%- set  min_idx =
              states('sensor.ant_in_r1_cell_index_min') %} {%- set  max_idx =
              states('sensor.ant_in_r1_cell_index_max') %} {%- set is_max = 
              states('sensor.ant_in_r1_cell_index_max')| int == idx %}  {%- set
              is_min = states('sensor.ant_in_r1_cell_index_min')| int == idx
              %}   {% if idx <= 9 %}               {%- set volt_sensor_id =
              'sensor.ant_in_r1_cell_volt_0%d' % idx %} {%- set cell_volt =
              states('sensor.ant_in_r1_cell_volt_0%d' % idx) %} {%- else %} {%-
              set volt_sensor_id = 'sensor.ant_in_r1_cell_volt_%d' % idx %} {%-
              set cell_volt = states('sensor.ant_in_r1_cell_volt_%d' % idx) %}
              {%- endif %} {%- set font_start  = '<font color="#3090C7">' if
              is_max else '<font color="red">' if is_min else '' %} {%- set
              font_end = '</font>' if is_max or is_min else '' %} &nbsp;{{
              "%02d" % idx }}. {{ font_start }} {{ cell_volt }} V {{ font_end
              -}}  <br>  {% endfor %}
          - type: markdown
            content: >-
              {% for idx in range(25, 33) -%} {%- set  min_idx =
              states('sensor.ant_in_r1_cell_index_min') %} {%- set  max_idx =
              states('sensor.ant_in_r1_cell_index_max') %} {%- set is_max = 
              states('sensor.ant_in_r1_cell_index_max')| int == idx %}  {%- set
              is_min = states('sensor.ant_in_r1_cell_index_min')| int == idx
              %}   {% if idx <= 9 %}               {%- set volt_sensor_id =
              'sensor.ant_in_r1_cell_volt_0%d' % idx %} {%- set cell_volt =
              states('sensor.ant_in_r1_cell_volt_0%d' % idx) %} {%- else %} {%-
              set volt_sensor_id = 'sensor.ant_in_r1_cell_volt_%d' % idx %} {%-
              set cell_volt = states('sensor.ant_in_r1_cell_volt_%d' % idx) %}
              {%- endif %} {%- set font_start  = '<font color="#3090C7">' if
              is_max else '<font color="red">' if is_min else '' %} {%- set
              font_end = '</font>' if is_max or is_min else '' %} &nbsp;{{
              "%02d" % idx }}. {{ font_start }} {{ cell_volt }} V {{ font_end
              -}}  <br>  {% endfor %}
  - type: entities
    entities:
      - entity: switch.ant_in_r1_charge
        name: Charging
      - entity: switch.ant_in_r1_discharge
        name: Discharging
    show_header_toggle: false

0 replies

Shamanzombi · 2024-09-28T13:07:27Z

Shamanzombi
Sep 28, 2024

Hi, maybe someone will like it) in the end it came together fine

type: vertical-stack
cards:
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: grid
        square: false
        columns: 1
        cards:
          - type: markdown
            content: >-
              <center><font color="#bdbbbb"><font size=4>TIME:&nbsp;<b>  <font
              color="#41CD52"> {% set total_seconds =
              states('sensor.no1_battery_total_runtime') | int(0) %} {% set days
              = (total_seconds // 86400) %} {% set hours = (total_seconds %
              86400) // 3600 %} {% set minutes = (total_seconds % 3600) // 60 %}
              {% set seconds = (total_seconds % 60) %} {{ days }}D{{ hours }}H{{
              minutes }}M{{ seconds }}S</font></b></font>
            card_mod:
              style: |
                ha-card {
                   box-shadow: none;
                   background: #021017;
                   border: black solid 1px !important;
                }
    card_mod:
      style: |
        ha-card {
           box-shadow: none;
           background: #021017;
           border: black solid 1px !important;
        }
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: grid
        square: false
        columns: 3
        cards:
          - type: markdown
            content: >-
              <center><font color="#bdbbbb"><font size=3>Charge:&nbsp;<b>{% if
              states('binary_sensor.no1_status_charging') == 'on' %} <font
              color=#41CD52>{{ states('binary_sensor.no1_status_charging') |
              upper }}</font> {% else %} <font color=#fa4b54>{{
              states('binary_sensor.no1_status_charging') | upper }}</font> {%
              endif %} 
            card_mod:
              style: |
                ha-card {
                   box-shadow: none;
                   background: #021017;
                   border: black solid 1px !important;
          - type: markdown
            content: >-
              <center><font color="#bdbbbb"><font size=3>Discharge:&nbsp;<b> {%
              if states('binary_sensor.no1_status_discharging') == 'on' %} <font
              color=#41CD52>{{ states('binary_sensor.no1_status_discharging') |
              upper }}</font> {% else %} <font color=#fa4b54>{{
              states('binary_sensor.no1_status_discharging') | upper }}</font>
              {% endif %} 
            card_mod:
              style: |
                ha-card {
                   box-shadow: none;
                   background: #021017;
                   border: black solid 1px !important;
          - type: markdown
            content: >-
              <center><font color="#bdbbbb"><font size=3>Balance:&nbsp;<b> {% if
              states('binary_sensor.no1_status_balancing') == 'on' %} <font
              color=#41CD52>{{ states('binary_sensor.no1_status_balancing') |
              upper }}</font> {% else %} <font color=#fa4b54>{{
              states('binary_sensor.no1_status_balancing') | upper }}</font> {%
              endif %} 
            card_mod:
              style: |
                ha-card {
                   box-shadow: none;
                   background: #021017;
                   border: black solid 1px !important;
    card_mod:
      style: |
        ha-card {
           box-shadow: none;
           background: #021017;
           border: black solid 1px !important;
          
        }
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: vertical-stack
                cards:
                  - type: vertical-stack
                    cards:
                      - type: entity
                        entity: sensor.no1_battery_voltage
                        name: Total Voltage
                        icon: mdi:battery
                        card_mod:
                          style: |
                            ha-card {
                              box-shadow: none;
                              background: #021017;
                              border: black solid 1px !important;
                              display: flex;
                              align-items: center;
                              justify-content: center; /* Центрирование содержимого */
                            }
                            .info {
                              color: #41CD52;
                              display: flex;
                              align-items: center;
                              justify-content: center;  /* Центрирование текста */
                            }
                            .entity__info {
                              display: flex;
                              align-items: center;
                              justify-content: center; /* Центрирование иконки и названия */
                              gap: 10px; /* Промежуток между иконкой и названием */
                            }
                            .state {
                              color: #41CD52;
                              text-align: center; /* Центрирование значения */
                            }
      - type: vertical-stack
        cards:
          - type: vertical-stack
            cards:
              - type: entity
                entity: sensor.no1_battery_current
                name: Battery Current
                icon: mdi:current-dc
                card_mod:
                  style: |
                    ha-card {
                      box-shadow: none;
                      background: #021017;
                      border: black solid 1px !important;
                      display: flex;
                      align-items: center;
                      justify-content: center; /* Центрирование содержимого */
                    }
                    .info {
                      color: #41CD52;
                      display: flex;
                      align-items: center;
                      justify-content: center;  /* Центрирование текста */
                    }
                    .entity__info {
                      display: flex;
                      align-items: center;
                      justify-content: center; /* Центрирование иконки и названия */
                      gap: 10px; /* Промежуток между иконкой и названием */
                    }
                    .state {
                      color: #41CD52;
                      text-align: center; /* Центрирование значения */
                    }
  - type: horizontal-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: entities
            card_mod:
              style: |
                ha-card {
                  background-color: #021017 !important;
                  color: #41CD52;
                  box-shadow: none;
                  border: black solid 1px !important;
                }
            entities:
              - entity: sensor.no1_battery_power
                name: Power
                card_mod:
                  style:
                    hui-generic-entity-row:
                      $: |
                        state-badge {
                          display: none;
                        }
                        .info {
                          margin-left: 0 !important;
                          color: #bdbbbb;
                        }
              - entity: sensor.no1_battery_capacity
                name: Capacity
                card_mod:
                  style:
                    hui-generic-entity-row:
                      $: |
                        state-badge {
                          display: none;
                        }
                        .info {
                          margin-left: 0 !important;
                          color: #bdbbbb;
                        }
              - entity: sensor.no1_cell_voltage_min
                name: Ave. Cell Volt
                card_mod:
                  style:
                    hui-generic-entity-row:
                      $: |
                        state-badge {
                          display: none;
                        }
                        .info {
                          margin-left: 0 !important;
                          color: #bdbbbb;
                        }
              - entity: sensor.no1_cell_delta_voltage
                name: Cell Volt Diff.
                card_mod:
                  style:
                    hui-generic-entity-row:
                      $: |
                        state-badge {
                          display: none;
                        }
                        .info {
                          margin-left: 0 !important;
                          color: #bdbbbb;
                        }
              - entity: sensor.no1_balancing_current
                name: Balance Current
                card_mod:
                  style:
                    hui-generic-entity-row:
                      $: |
                        state-badge {
                          display: none;
                        }
                        .info {
                          margin-left: 0 !important;
                          color: #bdbbbb;
                        }
              - entity: sensor.no1_temperature_sensor_1
                name: Battery T1
                card_mod:
                  style:
                    hui-generic-entity-row:
                      $: |
                        state-badge {
                          display: none;
                        }
                        .info {
                          margin-left: 0 !important;
                          color: #bdbbbb;
                        }
              - entity: sensor.no1_temperature_sensor_2
                name: Battery T2
                card_mod:
                  style:
                    hui-generic-entity-row:
                      $: |
                        state-badge {
                          display: none;
                        }
                        .info {
                          margin-left: 0 !important;
                          color: #bdbbbb;
                        }
      - type: entities
        card_mod:
          style: |
            ha-card {
              background-color: #021017 !important;
              color: #41CD52;
              box-shadow: none;
              border: black solid 1px !important;
            }
        entities:
          - entity: sensor.no1_battery_capacity_state_of_charge
            name: Remaining %
            card_mod:
              style:
                hui-generic-entity-row:
                  $: |
                    state-badge {
                      display: none;
                    }
                    .info {
                      margin-left: 0 !important;
                      color: #bdbbbb;
                    }
          - entity: sensor.no1_battery_capacity_remaining
            name: Remaining Capacity
            card_mod:
              style:
                hui-generic-entity-row:
                  $: |
                    state-badge {
                      display: none;
                    }
                    .info {
                      margin-left: 0 !important;
                      color: #bdbbbb;
                    }
          - entity: sensor.no1_charging_cycles
            name: Cycle Count
            card_mod:
              style:
                hui-generic-entity-row:
                  $: |
                    state-badge {
                      display: none;
                    }
                    .info {
                      margin-left: 0 !important;
                      color: #bdbbbb;
                    }
          - entity: sensor.no1_battery_capacity_total_charging_cycle
            name: Cycle Capacity
            card_mod:
              style:
                hui-generic-entity-row:
                  $: |
                    state-badge {
                      display: none;
                    }
                    .info {
                      margin-left: 0 !important;
                      color: #bdbbbb;
                    }
          - entity: sensor.no1_temperature_powertube
            name: MOS Temp
            card_mod:
              style:
                hui-generic-entity-row:
                  $: |
                    state-badge {
                      display: none;
                    }
                    .info {
                      margin-left: 0 !important;
                      color: #bdbbbb;
                    }
          - entity: sensor.no1_temperature_sensor_4
            name: Battery T4
            card_mod:
              style:
                hui-generic-entity-row:
                  $: |
                    state-badge {
                      display: none;
                    }
                    .info {
                      margin-left: 0 !important;
                      color: #bdbbbb;
                    }
          - entity: sensor.no1_temperature_sensor_5
            name: Battery T5
            card_mod:
              style:
                hui-generic-entity-row:
                  $: |
                    state-badge {
                      display: none;
                    }
                    .info {
                      margin-left: 0 !important;
                      color: #bdbbbb;
                    }

                          
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: true
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          background: #021017;
          border: black solid 1px !important;
        }
        .card-content {
          padding: 8px; /* Уменьшены отступы карточки */
        }
    cards:
      - type: markdown
        content: |
          <center>
            <font color="#91c8f2" size=2><b>Cells Voltage</b></font>
          </center>
          <center> 
          <table style="width:100%;">
          <tr>      
            <td style="text-align:left">
              <center><font color="#91c8f2"><font size=2>01.&nbsp;</font> {% if
              states('sensor.no1_cell_voltage_max_cell_number') == '1' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_01') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '1' %} 
              <font color="#fa4b54">{{ states('sensor.no1_cell_voltage_01') }}
              V</font> {% else %} <font color="#41CD52">{{
              states('sensor.no1_cell_voltage_01') }} V</font> {% endif %} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
              <font color="#91c8f2"><font size=2>02.&nbsp;</font> {% if
              states('sensor.no1_cell_voltage_max_cell_number') == '2' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_02') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '2' %} <font
              color="#fa4b54">{{ states('sensor.no1_cell_voltage_02') }} V</font> {%
              else %} <font color="#41CD52">{{ states('sensor.no1_cell_voltage_02')
              }} V</font> {% endif %} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> <font color="#91c8f2"><font size=2>03.&nbsp;</font> {%
              if states('sensor.no1_cell_voltage_max_cell_number') == '3' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_03') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '3' %} <font
              color="#fa4b54">{{ states('sensor.no1_cell_voltage_03') }} V</font> {%
              else %} <font color="#41CD52">{{ states('sensor.no1_cell_voltage_03')
              }} V</font> {% endif %} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> <font color="#91c8f2"><font size=2>04.&nbsp;</font> {%
              if states('sensor.no1_cell_voltage_max_cell_number') == '4' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_04') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '4' %} <font
              color="#fa4b54">{{ states('sensor.no1_cell_voltage_04') }} V</font> {%
              else %} <font color="#41CD52">{{ states('sensor.no1_cell_voltage_04')
              }} V</font> {% endif %} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> <font color="#91c8f2"><font size=2>05.&nbsp;</font> {%
              if states('sensor.no1_cell_voltage_max_cell_number') == '5' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_05') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '5' %} <font
              color="#fa4b54">{{ states('sensor.no1_cell_voltage_05') }} V</font> {%
              else %} <font color="#41CD52">{{ states('sensor.no1_cell_voltage_05')
              }} V</font> {% endif %} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> <font color="#91c8f2"><font size=2>06.&nbsp;</font> {%
              if states('sensor.no1_cell_voltage_max_cell_number') == '6' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_06') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '6' %} <font
              color="#fa4b54">{{ states('sensor.no1_cell_voltage_06') }} V</font> {%
              else %} <font color="#41CD52">{{ states('sensor.no1_cell_voltage_06')
              }} V</font> {% endif %} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br></center>
            </td>
           
            <td style="text-align:center">
              <center><font color="#91c8f2"><font size=2>07.&nbsp;</font> {% if
              states('sensor.no1_cell_voltage_max_cell_number') == '7' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_07') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '7' %} <font
              color="#fa4b54">{{ states('sensor.no1_cell_voltage_07') }} V</font> {%
              else %} <font color="#41CD52">{{ states('sensor.no1_cell_voltage_07')
              }} V</font> {% endif %} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> <font color="#91c8f2"><font size=2>08.&nbsp;</font> {%
              if states('sensor.no1_cell_voltage_max_cell_number') == '8' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_08') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '8' %} <font
              color="#fa4b54">{{ states('sensor.no1_cell_voltage_08') }} V</font> {%
              else %} <font color="#41CD52">{{ states('sensor.no1_cell_voltage_08')
              }} V</font> {% endif %} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> <font color="#91c8f2"><font size=2>09.&nbsp;</font> {%
              if states('sensor.no1_cell_voltage_max_cell_number') == '9' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_09') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '9' %} <font
              color="#fa4b54">{{ states('sensor.no1_cell_voltage_09') }} V</font> {%
              else %} <font color="#41CD52">{{ states('sensor.no1_cell_voltage_09')
              }} V</font> {% endif %} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> <font color="#91c8f2"><font size=2>10.&nbsp;</font> {%
              if states('sensor.no1_cell_voltage_max_cell_number') == '10' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_10') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '10' %}
              <font color="#fa4b54">{{ states('sensor.no1_cell_voltage_10') }}
              V</font> {% else %} <font color="#41CD52">{{
              states('sensor.no1_cell_voltage_10') }} V</font> {% endif %} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
              <font color="#91c8f2"><font size=2>11.&nbsp;</font> {% if
              states('sensor.no1_cell_voltage_max_cell_number') == '11' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_11') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '11' %}
              <font color="#fa4b54">{{ states('sensor.no1_cell_voltage_11') }}
              V</font> {% else %} <font color="#41CD52">{{
              states('sensor.no1_cell_voltage_11') }} V</font> {% endif %} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
              <font color="#91c8f2"><font size=2>12.&nbsp;</font> {% if
              states('sensor.no1_cell_voltage_max_cell_number') == '12' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_12') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '12' %}
              <font color="#fa4b54">{{ states('sensor.no1_cell_voltage_12') }}
              V</font> {% else %} <font color="#41CD52">{{
              states('sensor.no1_cell_voltage_12') }} V</font> {% endif %}
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br></center>
            </td>
              
            <td style="text-align:right">
              <center><font color="#91c8f2"><font size=2>13.&nbsp;</font> {% if
              states('sensor.no1_cell_voltage_max_cell_number') == '13' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_13') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '13' %}
              <font color="#fa4b54">{{ states('sensor.no1_cell_voltage_13') }}
              V</font> {% else %} <font color="#41CD52">{{
              states('sensor.no1_cell_voltage_13') }} V</font> {% endif %} <br>
              <font color="#91c8f2"><font size=2>14.&nbsp;</font> {% if
              states('sensor.no1_cell_voltage_max_cell_number') == '14' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_14') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '14' %}
              <font color="#fa4b54">{{ states('sensor.no1_cell_voltage_14') }}
              V</font> {% else %} <font color="#41CD52">{{
              states('sensor.no1_cell_voltage_14') }} V</font> {% endif %} <br>
              <font color="#91c8f2"><font size=2>15.&nbsp;</font> {% if
              states('sensor.no1_cell_voltage_max_cell_number') == '15' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_15') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '15' %}
              <font color="#fa4b54">{{ states('sensor.no1_cell_voltage_15') }}
              V</font> {% else %} <font color="#41CD52">{{
              states('sensor.no1_cell_voltage_15') }} V</font> {% endif %} <br>
              <font color="#91c8f2"><font size=2>16.&nbsp;</font> {% if
              states('sensor.no1_cell_voltage_max_cell_number') == '16' %}  <font
              color="#3090C7">{{ states('sensor.no1_cell_voltage_16') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '16' %}
              <font color="#fa4b54">{{ states('sensor.no1_cell_voltage_16') }}
              V</font> {% else %} <font color="#41CD52">{{
              states('sensor.no1_cell_voltage_16') }} V</font> {% endif %} <br>
              <font color="#333232">17.</font> {% if
              states('sensor.no1_cell_voltage_max_cell_number') == '17' %}  <font
              color="#333232">{{ states('sensor.no1_cell_voltage_17') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '17' %}
              <font color="#fa4b54">{{ states('sensor.no1_cell_voltage_17') }}
              V</font> {% else %} <font color="#333232">{{
              states('sensor.no1_cell_voltage_17') }} V</font> {% endif %} <br>
              <font color="#333232">18.</font> {% if
              states('sensor.no1_cell_voltage_max_cell_number') == '18' %}  <font
              color="#333232">{{ states('sensor.no1_cell_voltage_18') }} V</font> {%
              elif states('sensor.no1_cell_voltage_min_cell_number') == '18' %}
              <font color="#333232">{{ states('sensor.no1_cell_voltage_18') }}
              V</font> {% else %} <font color="#333232">{{
              states('sensor.no1_cell_voltage_18') }} V</font> {% endif %}
              <br></center>
            </td>
          </tr>
          </table> 
          </center>
          <br> <!-- Пустая строка -->

          <center>
            <font color="#91c8f2" size=2><b>Cells Wire Resistance</b></font>
          </center>
          <center> 
          <table style="width:100%;">
            <tr>
              <td style="text-align:left">
                <font color="#91c8f2"><font size=2>01.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_01') }} Ω</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                <font color="#91c8f2"><font size=2>02.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_02') }} Ω</font><br>
                <font color="#91c8f2"><font size=2>03.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_03') }} Ω</font><br>
                <font color="#91c8f2"><font size=2>04.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_04') }} Ω</font><br>
                <font color="#91c8f2"><font size=2>05.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_05') }} Ω</font><br>
                <font color="#91c8f2"><font size=2>06.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_06') }} Ω</font><br>
              </td>
              <td style="text-align:center;">
                <font color="#91c8f2"><font size=2>07.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_07') }} Ω</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                <font color="#91c8f2"><font size=2>08.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_08') }} Ω</font><br>
                <font color="#91c8f2"><font size=2>09.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_09') }} Ω</font><br>
                <font color="#91c8f2"><font size=2>10.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_10') }} Ω</font><br>
                <font color="#91c8f2"><font size=2>11.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_11') }} Ω</font><br>
                <font color="#91c8f2"><font size=2>12.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_12') }} Ω</font><br>
              </td>
              <td style="text-align:right;">
                <font color="#91c8f2"><font size=2>13.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_13') }} Ω</font><br>
                <font color="#91c8f2"><font size=2>14.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_14') }} Ω</font><br>
                <font color="#91c8f2"><font size=2>15.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_15') }} Ω</font><br>
                <font color="#91c8f2"><font size=2>16.&nbsp;&nbsp;</font><font color="#41CD52">{{ states('sensor.no1_cell_resistance_16') }} Ω</font><br>
                <font color="#333232"><font size=2>17.&nbsp;&nbsp;</font><font color="#333232">{{ states('sensor.no1_cell_resistance_17') }} Ω</font><br>
                <font color="#333232"><font size=2>18.&nbsp;&nbsp;</font><font color="#333232">{{ states('sensor.no1_cell_resistance_18') }} Ω</font><br>
              </td>
            </tr>
          </table> 
          </center>
        card_mod:
          style: |
            ha-card {
            box-shadow: none;
            background: #021017;
            border: black solid 1px !important;

1 reply

anhnldev Dec 14, 2024

hi, the code is error

Shamanzombi · 2024-09-28T13:36:45Z

Shamanzombi
Sep 28, 2024

I made it for myself with two batteries, it turned out interesting)

10 replies

Shamanzombi Oct 19, 2024

I dropped it in a text file, you can download it.

Shamanzombi Oct 19, 2024

added the entire code. But there are several sensors that you will have to create yourself. For example: capacity - 280 ah

Shamanzombi Oct 19, 2024

and the color is different, don't be scared, it's just the color I have now. You can change it to whatever you need or I can help if needed.

aw-tech Oct 19, 2024

nice , thank you very much .. 👍

Shamanzombi Oct 19, 2024

canvas-gauge-card it's called a card for round ones, in HACS

vpritulin · 2024-10-10T13:35:22Z

vpritulin
Oct 10, 2024

1 reply

syssi Oct 10, 2024
Maintainer

Could you create a new issue? Your question isn't Lovelace UI related.

spirake · 2024-12-11T19:32:36Z

spirake
Dec 11, 2024

Good evening. I want to connect two jk-bms that I have each with a tesla battery to the home assistant. I'm at the beginning and I don't really know how to start. I bought an ESP32 and I have HOA installed on a mini pc. Please help me with the steps to connect. Thank you

1 reply

dominikandreas Dec 11, 2024

Here’s a guide to connect your JK-BMS to Home Assistant using an ESP32 and ESPHome, including the Bluetooth connection option (Courtesy of ChatGPT):

Step 1: Install the ESPHome Add-on in Home Assistant

Open Home Assistant.
Navigate to Settings > Add-ons > Add-on Store.
Search for ESPHome and click Install.
Enable Start on boot, then click Start.
Open the ESPHome Web UI from the add-on.

Step 2: Prepare and Flash the ESP32

Get the Configuration:

Visit the syssi/esphome-jk-bms GitHub repository.

Copy the example YAML configuration for Bluetooth or UART (depending on your preferred connection type).

Add a New ESPHome Device:

In the ESPHome Web UI, click + New Device.

Choose Manual configuration, name your device (e.g., jk-bms), and paste the copied YAML.

Edit Configuration:

Adjust the configuration:

For Bluetooth: No wiring is required; ensure Bluetooth is enabled on the ESP32.

For UART: Map the correct GPIO pins for TX/RX to match your ESP32 wiring.

Flash the ESP32:

Save the configuration and click Install.

Choose Plug into this computer to flash the ESP32 via USB.

Follow the on-screen instructions to complete the flashing process.

After flashing, the ESP32 will reboot and connect to your Wi-Fi.

Step 3: Set Up the Connection to JK-BMS

For Bluetooth:

Ensure the ESP32 is in range of the JK-BMS.
The ESPHome configuration will automatically enable Bluetooth scanning to find and connect to the JK-BMS.

For UART:

Use a UART-to-TTL cable to connect the JK-BMS to the ESP32.
Match the TX, RX, GND, and 5V pins between the JK-BMS and ESP32 according to the configuration.

Step 4: Integrate the ESP32 with Home Assistant

After the ESP32 connects to your Wi-Fi, it will appear in the ESPHome dashboard.
Go to Settings > Devices & Services in Home Assistant.
Home Assistant should detect the ESP32 automatically. Click Configure to add it.

Step 5: Verify and Use the Data

Check the Entities tab in Home Assistant to see JK-BMS sensor data (e.g., battery voltage, temperature).
Create automations or alerts based on the data.

This setup allows you to connect your JK-BMS to Home Assistant via either Bluetooth (wireless) or UART (wired). Let me know if you need more help!

Home Assistant Lovelace UI cards #230

Replies: 26 comments · 42 replies

syssi Jan 5, 2023 Maintainer

dr3amr Jan 5, 2023 Author

syssi Jan 5, 2023 Maintainer

dr3amr Jan 5, 2023 Author

dr3amr Jan 10, 2023 Author

syssi Feb 24, 2023 Maintainer

dr3amr Feb 24, 2023 Author

syssi Feb 24, 2023 Maintainer

dr3amr Mar 17, 2024 Author

dr3amr Jan 28, 2024 Author

dr3amr Feb 18, 2024 Author

dr3amr Mar 1, 2024 Author

dr3amr Apr 1, 2024 Author

dr3amr Apr 1, 2024 Author

dr3amr Sep 6, 2024 Author

dr3amr Sep 9, 2024 Author

Replies: 26 comments 42 replies

syssi
Jan 5, 2023
Maintainer

dr3amr Jan 5, 2023
Author

syssi Jan 5, 2023
Maintainer

dr3amr Jan 5, 2023
Author

dr3amr Jan 10, 2023
Author

syssi
Feb 24, 2023
Maintainer

dr3amr Feb 24, 2023
Author

syssi Feb 24, 2023
Maintainer

dr3amr Mar 17, 2024
Author

dr3amr Jan 28, 2024
Author

dr3amr Feb 18, 2024
Author

dr3amr
Mar 1, 2024
Author

dr3amr Apr 1, 2024
Author

dr3amr Apr 1, 2024
Author

dr3amr
Sep 6, 2024
Author

dr3amr Sep 9, 2024
Author