Help with code for Tesla charging and range status

Configuration Frontend
1

Hi all,
Can anyone help a newbie with some code on a custom card. Trying to show the status of my Tesla, dependent upon what remaining range it has, and whether the charger is connected or not. Not got any error messages, but it simply does not appear to work. Basically want the icon in the card to change colour, and potentially spin and/or blink depending upon the charge level and state of being connected or now. I think I am using the correct sensors, but could be wrong (tried with “entity” and “entity_id”) ! Code is as follows:

entity: binary_sensor.mike_s_tesla_charger_sensor
icon: 'mdi:car-electric'
show_state: true
spin: false
state:
  - above: 150
    colour: green
    condition: numeric_state
    entity_id: sensor.mike_s_tesla_range_sensor
    value: disconnected
  - above: 100
    colour: green
    condition: numeric_state
    entity_id: sensor.mike_s_tesla_range_sensor
    styles:
      card:
        - animation: blink 2s ease infinite
    value: connected
  - above: 100
    below: 150
    colour: yellow
    condition: numeric_state
    entity_id: sensor.mike_s_tesla_range_sensor
    value: disconnected
  - below: 100
    colour: red
    condition: numeric_state
    entity_id: sensor.mike_s_tesla_range_sensor
    icon: 'mdi:ev-station'
    spin: true
    value: connected
  - below: 100
    colour: red
    condition: numeric_state
    entity_id: sensor.mike_s_tesla_range_sensor
    spin: true
    styles:
      card:
        - animation: blink 2s ease infinite
    value: disconnected
type: 'custom:button-card'
2

trying myself also some automation for the my Tesla. A binary_sensor should be on or off, no values …?

3

Hi Klagio
With a lot of help from the community, I ended up with the following in 2 cards (which I am sure you could combine):

entity: sensor.mike_s_tesla_range_sensor
icon: 'mdi:car-electric'
name: Tesla Range Sensor
show_state: true
styles:
  card:
    - border-radius: 10%
    - '--paper-card-background-color': 'rgba(0, 0, 0, 0.4)'
    - box-shadow: none
  icon:
    - color: |
        [[[
          if (entity.state >= 175) return 'green';
          if (entity.state >= 125 && entity.state < 175) return 'yellow';
          else return 'red';
        ]]]
    - animation: |
        [[[
          if (entity.state <= 175) {
            if (states['binary_sensor.mike_s_tesla_charger_sensor'].state == 'on')
              return 'blink 2s ease infinite, rotating 2s ease infinite';
            return 'blink 2s ease infinite';
          }
          return null;
        ]]]
  name:
    - color: white
  state:
    - color: white
type: 'custom:button-card'

And

entity: sensor.mike_s_tesla_battery_sensor
name: Battery
show_state: true
styles:
  card:
    - border-radius: 10%
    - '--paper-card-background-color': 'rgba(0, 0, 0, 0.4)'
    - box-shadow: none
  icon:
    - color: white
  name:
    - color: white
  state:
    - color: white
type: 'custom:button-card'

A word of warning - I have just logged back in to my HA setup after quite a long absence, and the display is not appearing in full - a lot of white space and some card elements not showing at all. If I click on a specific sensor in the cards however, it does appear to all be functioning. Maybe something to do with an update that I have not done.
Good luck