Looking for a simple card for the custom Tesla integration

Hi, i just installed the custom Tesla integration, but now i am looking for a simple but pretty card for a lovelace dashboard. i did find a few nice once but these all require me to have a masters degree in python and god knows what. does anyone have some tips to get my pretty new car integrated in Lovelace?

1 Like

I wanted something simple too. No control, just overview.
Here’s how I did mine…

When charging it also shows the charging rate…

type: picture-elements
image: /local/tesla_y.jpg
elements:
  - type: state-label
    entity: device_tracker.<car name>_location_tracker
    tap_action: none
    hold_action: none
    style:
      top: 7%
      left: 91%
      font-size: 100%
      font-weight: normal
      color: rgb(0,0,0)
  - type: state-icon
    entity: binary_sensor.<car name>_online_sensor
    tap_action: none
    hold_action: none
    style:
      top: 6.5%
      left: 83%
  - type: state-icon
    entity: binary_sensor.<car name>_ischarging
    tap_action: none
    hold_action: none
    style:
      top: 7%
      left: 70.5%
  - type: state-icon
    entity: binary_sensor.<car name>_update_available_sensor
    tap_action: none
    hold_action: none
    style:
      top: 7%
      left: 64%
  - type: state-icon
    entity: climate.<car name>_hvac_climate_system
    tap_action: none
    hold_action: none
    style:
      top: 7%
      left: 58%
  - type: state-icon
    entity: switch.<car name>_sentry_mode_switch
    tap_action: none
    hold_action: none
    style:
      top: 7%
      left: 77%
  - type: state-icon
    entity: lock.<car name>_door_lock
    tap_action: none
    hold_action: none
    style:
      top: 30%
      left: 45%
  - type: state-icon
    entity: lock.<car name>_door_lock
    tap_action: none
    hold_action: none
    style:
      top: 30%
      left: 60%
  - type: state-icon
    entity: lock.<car name>_door_lock
    tap_action: none
    hold_action: none
    style:
      top: 70%
      left: 45%
  - type: state-icon
    entity: lock.<car name>_door_lock
    tap_action: none
    hold_action: none
    style:
      top: 70%
      left: 60%
  - type: state-icon
    entity: lock.<car name>_frunk_lock
    tap_action: none
    hold_action: none
    style:
      top: 50%
      left: 85%
  - type: state-icon
    entity: lock.<car name>_trunk_lock
    tap_action: none
    hold_action: none
    style:
      top: 50%
      left: 21%
  - type: state-icon
    entity: lock.<car name>_charger_door_lock
    tap_action: none
    hold_action: none
    style:
      top: 31%
      left: 21%
  - type: conditional
    conditions:
      - entity: binary_sensor.<car name>_charger_sensor
        state: 'on'
    elements:
      - type: state-label
        entity: sensor.<car name>_charging_rate_sensor
        tap_action: none
        hold_action: none
        style:
          top: 27%
          left: 21%
          font-size: 100%
          font-weight: normal
          color: rgb(0,0,0)
  - type: state-label
    entity: sensor.<car name>_temperature_sensor_inside
    tap_action: none
    hold_action: none
    style:
      top: 50%
      left: 50%
      font-size: 100%
      font-weight: normal
      color: rgb(255,255,255)
  - type: icon
    icon: mdi:thermometer
    tap_action: none
    hold_action: none
    style:
      top: 50%
      left: 41%
      font-size: 100%
      font-weight: normal
      color: rgb(255,255,255)
  - type: state-label
    entity: sensor.<car name>_temperature_sensor_outside
    tap_action: none
    hold_action: none
    style:
      top: 23%
      left: 80%
      font-size: 100%
      font-weight: normal
      color: rgb(0,0,0)
  - type: icon
    icon: mdi:thermometer
    tap_action: none
    hold_action: none
    style:
      top: 23%
      left: 71%
      font-size: 100%
      font-weight: normal
      color: rgb(0,0,0)
  - type: custom:bar-card
    entity: sensor.<car name>_battery_sensor
    severity:
      - color: Red
        from: 0
        to: 10
      - color: Orange
        from: 11
        to: 20
      - color: Green
        from: 21
        to: 100
    entity_row: true
    positions:
      icon: 'off'
      name: 'off'
      indicator: 'off'
    animation:
      state: 'on'
      speed: 5
    width: 270px
    tap_action: none
    stack: vertical
    style:
      top: 85%
      left: 53%
      font-size: 100%
      font-weight: normal
      color: rgb(0,0,0)

2 Likes

That looks great! What dimensions are the car image you used?

Here’s the blank I used. 500x500

1 Like

Thanks! All working

do you mind sharing the location where you got this pic? I am looking for similar angle for a model3. thanks.

Not too sure where I found it, but just found a better resource with 3d images. I might make my card a little fancier :stuck_out_tongue:
link

2 Likes

thanks mate. that link is mazing.

Hi, thank you! Can you give me the same angle, the color is black!

Made some improvements with the updates of the integration.

image

    type: picture-elements
    image: /local/tesla_y.jpg
    elements:
      - type: state-icon
        entity: button.<car_name>_force_data_update
        style:
          top: 6.5%
          left: 10%
          color: '#039be5'
        tap_action:
          action: call-service
          service: button.press
          service_data: {}
          target:
            entity_id: button.<car_name>_force_data_update
        double_tap_action: none
        hold_action: none
      - type: state-label
        entity: button.<car_name>_force_data_update
        tap_action:
          action: call-service
          service: button.press
          service_data: {}
          target:
            entity_id: button.<car_name>_force_data_update
        double_tap_action: none
        hold_action: none
        style:
          top: 96%
          left: 53%
          font-size: 100%
          font-weight: normal
          color: rgb(0,0,0)
        prefix: 'Last update: '
      - type: state-label
        entity: device_tracker.<car_name>_location_tracker
        tap_action: none
        double_tap_action: none
        hold_action: none
        style:
          top: 7%
          left: 92%
          font-size: 100%
          font-weight: normal
          color: black
      - type: conditional
        conditions:
          - entity: binary_sensor.<car_name>_online
            state: 'on'
        elements:
          - type: icon
            icon: mdi:link-variant
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 6.5%
              left: 83%
              color: '#039be5'
      - type: conditional
        conditions:
          - entity: binary_sensor.<car_name>_online
            state_not: 'on'
        elements:
          - type: icon
            icon: mdi:link-variant-off
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 6.5%
              left: 83%
              color: black
      - type: conditional
        conditions:
          - entity: switch.<car_name>_sentry_mode
            state: 'on'
        elements:
          - type: icon
            icon: mdi:shield-car
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 7%
              left: 77%
              color: black
      - type: conditional
        conditions:
          - entity: switch.<car_name>_sentry_mode
            state_not: 'on'
        elements:
          - type: icon
            icon: mdi:shield-alert-outline
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 7%
              left: 77%
              color: red
      - type: conditional
        conditions:
          - entity: lock.<car_name>_doors
            state: locked
        elements:
          - type: icon
            icon: mdi:lock
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 7%
              left: 70.5%
              color: black
      - type: conditional
        conditions:
          - entity: lock.<car_name>_doors
            state_not: locked
        elements:
          - type: icon
            icon: mdi:lock-open-variant
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 7%
              left: 70.5%
              color: '#039be5'
      - type: conditional
        conditions:
          - entity: update.<car_name>_software_update
            state_not: 'on'
        elements:
          - type: icon
            icon: mdi:upload-off
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 7%
              left: 64%
              color: black
      - type: conditional
        conditions:
          - entity: update.<car_name>_software_update
            state: 'on'
        elements:
          - type: icon
            icon: mdi:upload
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 7%
              left: 64%
              color: '#039be5'
      - type: conditional
        conditions:
          - entity: climate.<car_name>_hvac_climate_system
            state: 'off'
        elements:
          - type: icon
            icon: mdi:fan-off
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 7%
              left: 58%
              color: black
      - type: conditional
        conditions:
          - entity: climate.<car_name>_hvac_climate_system
            state: heat_cool
        elements:
          - type: icon
            icon: mdi:air-conditioner
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 7%
              left: 58%
              color: '#039be5'
      - type: conditional
        conditions:
          - entity: sensor.<car_name>_tpms_front_left
            state_not: 43
        elements:
          - type: icon
            icon: mdi:car-tire-alert
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 6.9%
              left: 51.5%
              color: red
      - type: conditional
        conditions:
          - entity: sensor.<car_name>_tpms_front_right
            state_not: 43
        elements:
          - type: icon
            icon: mdi:car-tire-alert
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 6.9%
              left: 51.5%
              color: red
      - type: conditional
        conditions:
          - entity: sensor.<car_name>_tpms_rear_left
            state_not: 43
        elements:
          - type: icon
            icon: mdi:car-tire-alert
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 6.9%
              left: 51.5%
              color: red
      - type: conditional
        conditions:
          - entity: sensor.<car_name>_tpms_rear_right
            state_not: 43
        elements:
          - type: icon
            icon: mdi:car-tire-alert
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 6.9%
              left: 51.5%
              color: red
      - type: state-label
        entity: binary_sensor.<car_name>_doors
        attribute: Driver Rear
        tap_action: none
        double_tap_action: none
        hold_action: none
        style:
          top: 30%
          left: 40%
          color: black
      - type: state-label
        entity: binary_sensor.<car_name>_doors
        attribute: Driver Front
        tap_action: none
        double_tap_action: none
        hold_action: none
        style:
          top: 30%
          left: 60%
          color: black
      - type: state-label
        entity: binary_sensor.<car_name>_doors
        attribute: Passenger Rear
        tap_action: none
        double_tap_action: none
        hold_action: none
        style:
          top: 70%
          left: 40%
          color: black
      - type: state-label
        entity: binary_sensor.<car_name>_doors
        attribute: Passenger Front
        tap_action: none
        double_tap_action: none
        hold_action: none
        style:
          top: 70%
          left: 60%
          color: black
      - type: state-label
        entity: cover.<car_name>_frunk
        tap_action: none
        double_tap_action: none
        hold_action: none
        style:
          top: 50%
          left: 85%
          color: white
      - type: state-label
        entity: cover.<car_name>_trunk
        tap_action: none
        double_tap_action: none
        hold_action: none
        style:
          top: 50%
          left: 21%
          color: white
      - type: conditional
        conditions:
          - entity: cover.<car_name>_charger_door
            state: open
        elements:
          - type: icon
            icon: mdi:ev-plug-tesla
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 31%
              left: 21%
              color: '#039be5'
      - type: conditional
        conditions:
          - entity: cover.<car_name>_charger_door
            state_not: open
        elements:
          - type: icon
            icon: mdi:ev-plug-tesla
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 31%
              left: 21%
              color: black
      - type: conditional
        conditions:
          - entity: binary_sensor.<car_name>_charger
            state: 'on'
        elements:
          - type: state-label
            entity: sensor.<car_name>_charging_rate
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 26%
              left: 21%
              font-size: 100%
              font-weight: normal
              color: '#039be5'
      - type: conditional
        conditions:
          - entity: binary_sensor.<car_name>_charger
            state: 'on'
        elements:
          - type: state-label
            entity: binary_sensor.<car_name>_charger
            attribute: charging_state
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 22%
              left: 21%
              font-size: 100%
              font-weight: normal
              color: '#039be5'
      - type: state-label
        entity: sensor.<car_name>_temperature_inside
        tap_action: none
        double_tap_action: none
        hold_action: none
        style:
          top: 50%
          left: 50%
          font-size: 100%
          font-weight: normal
          color: rgb(255,255,255)
      - type: icon
        icon: mdi:thermometer
        tap_action: none
        double_tap_action: none
        hold_action: none
        style:
          top: 50%
          left: 41%
          font-size: 100%
          font-weight: normal
          color: rgb(255,255,255)
      - type: state-label
        entity: sensor.<car_name>_temperature_outside
        tap_action: none
        double_tap_action: none
        hold_action: none
        style:
          top: 23%
          left: 80%
          font-size: 100%
          font-weight: normal
          color: rgb(0,0,0)
      - type: icon
        icon: mdi:thermometer
        tap_action: none
        double_tap_action: none
        hold_action: none
        style:
          top: 23%
          left: 71%
          font-size: 100%
          font-weight: normal
          color: rgb(0,0,0)
      - type: conditional
        conditions:
          - entity: binary_sensor.<car_name>_ischarging
            state: 'on'
          - entity: device_tracker.<car_name>_location_tracker
            state: home
        elements:
          - type: icon
            icon: mdi:home-lightning-bolt-outline
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 84.7%
              left: 55%
              color: green
      - type: conditional
        conditions:
          - entity: binary_sensor.<car_name>_ischarging
            state: 'on'
          - entity: device_tracker.<car_name>_location_tracker
            state_not: home
        elements:
          - type: icon
            icon: mdi:ev-station
            tap_action: none
            double_tap_action: none
            hold_action: none
            style:
              top: 84.7%
              left: 55%
              color: green
      - type: custom:bar-card
        entity: sensor.<car_name>_battery
        severity:
          - color: Red
            from: 0
            to: 10
          - color: Orange
            from: 11
            to: 20
          - color: Green
            from: 21
            to: 100
        entity_row: true
        positions:
          icon: 'off'
          name: 'off'
          indicator: 'off'
        animation:
          state: 'on'
          speed: 5
        width: 270px
        tap_action: none
        hold_action: none
        double_tap_action: none
        stack: vertical
        style:
          top: 85%
          left: 53%
          font-size: 100%
          font-weight: normal
          color: rgb(0,0,0)
7 Likes

Thanks for all your work on this, do you know how we can get the bottom bar to show mileage if that’s what we have set up in the car as opposed to percent? Thank you!

Change the entity to sensor.<car_name>_range define min and max and massage the severity colours.
See the bar-card for the setup details:

I like % better because the range can be ambiguous. The max range would vary depending on many things.

Ex. Assuming the max car range is 300mi, I’d update the bar-card setup to…

  - type: custom:bar-card
    entity: sensor.<car_name>_range
    max: 300
    min: 0
    severity:
      - color: Red
        from: 0
        to: 30
      - color: Orange
        from: 31
        to: 60
      - color: Green
        from: 61
        to: 300

@alexbeatle , that looks amazing, great job !
However, when I try to copy-paste your code it does not allow me to save the card (I have that red-line on the side)
Is there like a best practice for copy-paste or something ? Am I doing something wrong ? (and yes I changed the “car name” of-course)

Can you post the snapshot?

Hello

What a beautiful integration! congratulations!

Could you send me the photo of the Tesla Y model in white?
thank you so much

Hello

How do you make Tesla Mate update the status of the sensors with this button?
I don’t see that it is possible to create a button that requests the update of the values

thank you

She looks beautiful. She would only need pneumatic pressure sensors.
Thanks for sharing

2 Likes

I agree, this is GREAT!

The tyre sensor should be changed to between 40 and 43 before it shows red. Temperatures change this…

Maybe sensors around the wheel locations instead, just showing?

1 Like

Here is your updated 3D Image

1 Like

I want to keep it nice and clean, don’t think the tyre pressures need to show. I would personally only care if they’re out of range or not - hence the colour changing icon at the top.

Good idea about introducing the “acceptable” range.

1 Like