Looking for a simple card for the custom Tesla integration

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

How do you do that?

@alexbeatle - great piece of work. One question from a newbie, how do I work out what the needs to be :frowning:

How does what need to be? :face_with_raised_eyebrow:

Ignore me - i’m an idiot.