Home Assistant Tesla Card

Tesla_card.yaml

type: custom:button-card
show_entity_picture: true
entity_picture: /local/pictures/tesla_white.png
tap_action:
  action: none
hold_action:
  action: more-info
aspect_ratio: 1/1
size: 100%
styles:
  card:
    - align-self: center
    - justify-content: center
    - position: relative
  entity_picture:
    - width: 100%
    - height: 55%
    - position: center
    - top: null
    - left: null
  custom_fields:
    battery_level:
      - position: absolute
      - top: 15%
      - left: 25%
      - transform: translate(-50%, -50%)
      - color: White
      - font-size: 70px
      - font-weight: bold
    battery_state:
      - position: absolute
      - top: 15%
      - left: 50%
      - transform: translate(-50%, -50%)
      - width: 50px
      - height: 50px
    range:
      - position: absolute
      - top: 30%
      - left: 20%
      - transform: translate(-50%, -50%)
      - font-size: 20px
      - width: 100px
      - height: 50px
    inside_temp:
      - position: absolute
      - top: 15%
      - left: 80%
      - transform: translate(-50%, -50%)
      - width: 100px
      - height: 50px
      - font-size: 30px
    total_driven:
      - position: absolute
      - top: 95%
      - left: 80%
      - transform: translate(-50%, -50%)
      - color: White
      - font-size: 20px
      - font-weight: bold
    odo_meter:
      - position: absolute
      - top: 90%
      - left: 80%
      - transform: translate(-50%, -50%)
      - color: White
      - font-size: 20px
      - font-weight: bold
    doors:
      - position: absolute
      - top: 92%
      - left: 30%
      - transform: translate(-50%, -50%)
      - color: White
      - font-size: 20px
      - font-weight: bold
custom_fields:
  battery_level: |
    [[[
      return states['sensor.tesla_battery_level'].state + '%';
    ]]]
  battery_state: |
    [[[
      const batteryState = states['sensor.tesla_charging'].state;
      if (batteryState === 'charging') {
        return '<img src="/local/pictures/battery-charging.gif" width="50" height="50"/>';
      } else {
      }
    ]]]
  range: |
    [[[
      return Math.round(states['sensor.tesla_battery_range'].state) + ' Km';
    ]]]
  inside_temp: |
    [[[
      return states['sensor.tesla_inside_temperature'].state + ' c';
    ]]]
  total_driven: |
    [[[
      return states['sensor.tesla_total_km_driven'].state + ' km';
    ]]]
  odo_meter: |
    [[[
      return Math.round(states['sensor.tesla_odometer'].state) + ' km';
    ]]]
  doors: |
    [[[
      return states['sensor.tesla_door_open'].state ;
    ]]]