Custom Button Card: how to replace the state "pv" with "PV only charging"

Configuration Frontend
1

This is how my current button card looks like

BUTTON CARD - replace state 'pv' by 'PV surplus'

The issue is the last line which is showing “pv”
This sensor can have these 4 states
off, now, minpv, pv.

But I want to replace those with a more descriptive one for the UI / users

“pv” should be shown as “PV surplus only”
“minpv” should be shown as “min grid + PV surplus”
“now” should be shown as “fast charge”
“off” should be shown as “off”

Here is the current code

type: custom:button-card
entity: select.charge_mode
hold_action:
  action: more-info
icon: mdi:ev-station
name: 2. ANGESCHLOSSEN & Modus
show_name: true
show_icon: true
show_last_changed: false
show_state: true
size: 100%
styles:
  card:
    - height: 162px
  label:
    - font-size: 28px
    - color: blue
  icon:
    - color: gold
tap_action:
  action: navigate
  navigation_path: /49686a9f_evcc

I guess i have to add the following code below this line
show_state: true

But I am not sure how to get all these cases done properly and I am on the road and have no access right now to the system to play around.

state_display: |
  [[[
    if (entity.state === 'pv')
      return 'PV allein ohne Netz';
    else
      if (entity.state === 'pvmin')
        return 'PV mit min. Netz';
      else 
        if (entity.state === 'now')
	      return 'SCHNELLST MÖGLICH';
        else
          return 'AUS';
  ]]]

Any suggestions ?

Most likely else offers something like else if but I am not sure.

thanks

2

did not work out as I had hoped when I arrived at home.

3

now it has been solved even though I could not figure out my mistake.

I started from scratch with 2 cases or states and from there expanded it one by one incl. testing.

state_display: |
  [[[
    if (entity.state === 'pv')
      return 'PV pur';
    else
      if (entity.state === 'pvmin')
        return 'PV + min. Netz';
      else
        if (entity.state === 'now')

          return 'VOLLGAS';
        else
          return 'KEIN LADEPROGRAMM';
  ]]]

The result is the last line under the icon which shows that the charger is ready to charge (first line) and would use PV pur(e) mode aka “pure solar power”

image

Not worth the effort for many , but if you have elderly over 80 years driving electric for already 5 years then you will do your best to make their lives easier.

Before they had a “granny charger” aka “brick charger” from VW / AUDI only charging 2 kW and then a faster one with 3,6 kW

But now they have an 11 kW charger and came down from 16 hours of full charging time over 10 hours to 4 hours.

4

FINAL UPDATE AFTER TUNING:

Keypoint was that elderly could easily identify if the car is connected or not and to which charging mode the charger has been set to.

Now the charging station and the charger have gotten coloured.

a green card means : PV only
a light green card means: PV + minimum of what is needed from the grid to charge
a orange card is half a warning cause it is: fastest charging no matter what (up to 11 kW)
a RED card: off, no charge mode selected

Here is an overview from the editing mode where a lot of hidden cards are visible
image

And then there is the “wallboxed gas station” it self

  • which is WHITE if the car is not connected
  • which then becomes BLACK if the car is connected but not charging
  • and then becomes GOLD if the car is finally charging

or in short
WHITE = UNCONNECTED
BLACK = CONNECTED
GOLD = CHARGING

and finally the UI of the productive version with car battery and home storage

image
image616×727 45 KB

type: custom:button-card
entity: select.charge_mode
state_display: |
  [[[
    if (entity.state === 'pv')
      return 'PV pur';
    else
      if (entity.state === 'pvmin')
        return 'PV + min. Netz';
      else
        if (entity.state === 'now')
          return 'VOLLGAS';
        else
          return 'KEIN LADEPROGRAMM';
  ]]]
state:
  - value: "off"
    styles:
      icon:
        - color: white
      card:
        - background-color: red
        - state_display: KEIN LADEPROGRAMM
  - value: now
    styles:
      icon:
        - color: white
      card:
        - background-color: orange
        - state_display: VOLLGAS
  - value: minpv
    styles:
      icon:
        - color: white
      card:
        - background-color: lightgreen
        - state_display: PV + min. Netz
  - value: pv
    styles:
      icon:
        - color: white
      card:
        - background-color: limegreen
        - state_display: PV pur