Generic 'Vehicle' Card

There is still some work in progress on getting a wireframe compatible with the R1S layout, but for the most part things are working fairly great now. Let me know if you have issues with it here or on github.

Hi, i have a problem with some entity of a sensor. Door, and pressure status. This is sensor:

image
and this is what i try to read:

door_adx:
friendly_name: “Portiera Anteriore Destra”
value_template: “{{ state_attr(‘sensor.fordpass_doorStatus’, ‘RightRearDoor’) }}”

and this is my card:

type: entities
entities:

  • entity: sensor.door_adx

and no data… i recive Unknow message

what is wrong? Thank you

Hi,
your card ist amazing!
would it be possible for someone to create Figma graphics for a VW Passat Variant ?

color is called Mondstein Grau // moonstone grey
Screenshot 2023-05-02 215315

I would be very grateful!

Are the circle around the cars in the picture element image?

Yes they are!

How do you create that image than? :open_mouth: I finally have a top view of my car. I am looking for the circles

@genosonic
Sorry for tagging, just wanted to express my gratitude!
Absolutely love your card.

Took your Hyundai Santa Fe design & card’s code from this post.
Although my car is not Hyundai, it looks similar (from the top) and has a similar dark color - so decided not to spent time for learning Figma to create my own design (anyway it will not be as good as yours).

Modified your card a bit:

  1. Converted it to “decluttering-card” template.
  2. Got rid of repeated code (used yaml anchors).
  3. Replaced battery level with GSM signal level (do not have a battery & GSM coverage is poor on the way to my country house).
  4. Added two blue-ish masks for a “guarded” state.
  5. Replaced “device_tracker” entity with a corresponding “person” entity (opens a more-info window with a map on a tap).
  6. (updated) Added severity levels for bar-cards.
  7. (updated) Added grey masks for “unavailable” state.

Why using a decluttering card?
Assume you have two cars in your family - then you may call same template twice with different inputs.
Check out paths to images in the card’s code:

image: /local/images/car/common/all_blue.png
...
image: /local/images/car/[[VALUE_CAR]]/car.png

So common images for all cars are stored in the “…/car/common” folder, images for “De Lorean” - in the “…/car/de_lorean/” folder.

decluttering template
package_main_element_settings: &ref_main_element_settings
  style:
    top: 50%
    left: 50%
    width: 100%
  filter: saturate(1)
  tap_action: none

package_bar_settings: &ref_bar_settings
  positions:
    icon: 'off'
    minmax: 'off'
    value: 'off'
    name: 'off'
  severity:
    - color: var(--red-color)
      from: 0
      to: 33
      icon: ''
      hide: false
    - color: var(--orange-color)
      from: 34
      to: 66
      icon: ''
      hide: false
    - color: var(--green-color)
      from: 67
      to: 100
      icon: ''
      hide: false
  from: left
  min: 0
  max: 100
  width: 70px
  height: 8px
  card_mod:
    style: |
      .card-content {
        padding: 0 !important;
        background-color: transparent
        border: 0px solid transparent;
        border-color: transparent;
      }
      bar-card-card {
        border-radius: 4px;
        height:8px;
        overflow: hidden;
      }

######################################################################################################################

decl_car_overview_card:
  card:
    type: picture-elements
    elements:

      ###################################################################################

      - type: conditional
        conditions:
          - entity: '[[BINARY_SENSOR_HOOD]]'
            state: 'on'
        elements:
          - type: image
            entity: '[[BINARY_SENSOR_HOOD]]'
            image: /local/images/car/common/top.png
            <<: *ref_main_element_settings
          - type: image
            entity: '[[BINARY_SENSOR_HOOD]]'
            image: /local/images/car/[[VALUE_CAR]]/hood.svg
            <<: *ref_main_element_settings

      - type: conditional
        conditions:
          - entity: '[[BINARY_SENSOR_DRIVER_DOOR]]'
            state: 'on'
        elements:
          - type: image
            image: /local/images/car/common/left.png
            <<: *ref_main_element_settings
          - type: image
            image: /local/images/car/[[VALUE_CAR]]/driver-door.svg
            <<: *ref_main_element_settings

      - type: conditional
        conditions:
          - entity: '[[BINARY_SENSOR_PASSENGER_DOOR]]'
            state: 'on'
        elements:
          - type: image
            image: /local/images/car/common/right.png
            <<: *ref_main_element_settings
          - type: image
            image: /local/images/car/[[VALUE_CAR]]/passenger-door.svg
            <<: *ref_main_element_settings

      - type: conditional
        conditions:
          - entity: '[[BINARY_SENSOR_REAR_LEFT_DOOR]]'
            state: 'on'
        elements:
          - type: image
            image: /local/images/car/common/left.png
            <<: *ref_main_element_settings
          - type: image
            image: /local/images/car/[[VALUE_CAR]]/rear-left-door.svg
            <<: *ref_main_element_settings

      - type: conditional
        conditions:
          - entity: '[[BINARY_SENSOR_REAR_RIGHT_DOOR]]'
            state: 'on'
        elements:
          - type: image
            image: /local/images/car/common/right.png
            <<: *ref_main_element_settings
          - type: image
            image: /local/images/car/[[VALUE_CAR]]/rear-right-door.svg
            <<: *ref_main_element_settings

      - type: conditional
        conditions:
          - entity: '[[BINARY_SENSOR_TRUNK]]'
            state: 'on'
        elements:
          - type: image
            image: /local/images/car/common/bottom.png
            <<: *ref_main_element_settings
          - type: image
            image: /local/images/car/[[VALUE_CAR]]/trunk.svg
            <<: *ref_main_element_settings

      ###################################################################################

      - type: conditional
        conditions:
          - entity: '[[BINARY_SENSOR_FRONT_LEFT_TIRE]]'
            state: 'on'
        elements:
          - type: image
            image: /local/images/car/common/left.png
            <<: *ref_main_element_settings
          - type: image
            image: /local/images/car/[[VALUE_CAR]]/front-left-tire.svg
            <<: *ref_main_element_settings

      - type: conditional
        conditions:
          - entity: '[[BINARY_SENSOR_FRONT_RIGHT_TIRE]]'
            state: 'on'
        elements:
          - type: image
            image: /local/images/car/common/right.png
            <<: *ref_main_element_settings
          - type: image
            image: /local/images/car/[[VALUE_CAR]]/front-right-tire.svg
            <<: *ref_main_element_settings

      - type: conditional
        conditions:
          - entity: '[[BINARY_SENSOR_REAR_LEFT_TIRE]]'
            state: 'on'
        elements:
          - type: image
            image: /local/images/car/common/left.png
            <<: *ref_main_element_settings
          - type: image
            image: /local/images/car/[[VALUE_CAR]]/rear-left-tire.svg
            <<: *ref_main_element_settings

      - type: conditional
        conditions:
          - entity: '[[BINARY_SENSOR_REAR_RIGHT_TIRE]]'
            state: 'on'
        elements:
          - type: image
            image: /local/images/car/common/right.png
            <<: *ref_main_element_settings
          - type: image
            image: /local/images/car/[[VALUE_CAR]]/rear-right-tire.svg
            <<: *ref_main_element_settings

      ###################################################################################

      - type: conditional
        conditions:
          - entity: '[[LOCK]]'
            state: unlocked
          - entity: '[[BINARY_SENSOR_HOOD]]'
            state: 'off'
          - entity: '[[BINARY_SENSOR_DRIVER_DOOR]]'
            state: 'off'
          - entity: '[[BINARY_SENSOR_PASSENGER_DOOR]]'
            state: 'off'
          - entity: '[[BINARY_SENSOR_REAR_LEFT_DOOR]]'
            state: 'off'
          - entity: '[[BINARY_SENSOR_REAR_RIGHT_DOOR]]'
            state: 'off'
          - entity: '[[BINARY_SENSOR_TRUNK]]'
            state: 'off'
        elements:
          - type: image
            image: /local/images/car/common/all.png
            <<: *ref_main_element_settings
          - type: image
            image: /local/images/car/[[VALUE_CAR]]/lock.svg
            <<: *ref_main_element_settings

      - type: conditional
        conditions:
          - entity: '[[LOCK]]'
            state: locked
          - entity: '[[BINARY_SENSOR_HOOD]]'
            state: 'off'
          - entity: '[[BINARY_SENSOR_DRIVER_DOOR]]'
            state: 'off'
          - entity: '[[BINARY_SENSOR_PASSENGER_DOOR]]'
            state: 'off'
          - entity: '[[BINARY_SENSOR_REAR_LEFT_DOOR]]'
            state: 'off'
          - entity: '[[BINARY_SENSOR_REAR_RIGHT_DOOR]]'
            state: 'off'
          - entity: '[[BINARY_SENSOR_TRUNK]]'
            state: 'off'
        elements:
          - type: image
            image: /local/images/car/common/all_blue.png
            <<: *ref_main_element_settings
          - type: image
            image: /local/images/car/[[VALUE_CAR]]/lock_blue.png
            <<: *ref_main_element_settings

      - type: conditional
        conditions:
          - entity: '[[SENSOR_MILEAGE]]'
            state: unavailable
        elements:
          - type: image
            image: /local/images/car/common/all_grey.png
            <<: *ref_main_element_settings
          - type: image
            image: /local/images/car/[[VALUE_CAR]]/lock_grey.png
            <<: *ref_main_element_settings
      ###################################################################################

      - type: state-icon
        entity: '[[LOCK]]'
        state_color: false
        style:
          top: 18%
          left: 25%
      - type: state-label
        entity: '[[LOCK]]'
        style:
          top: 23.5%
          left: 25%

      - type: state-icon
        entity: '[[PERSON]]'
        icon: mdi:map-marker
        state_color: false
        style:
          top: 18%
          left: 77%
      - type: state-label
        entity: '[[PERSON]]'
        style:
          top: 23.5%
          left: 77%

      ###################################################################################

      - type: state-icon
        entity: '[[SENSOR_GSM_SIGNAL]]'
        style:
          top: 75%
          left: 77%
      - type: state-label
        entity: '[[SENSOR_GSM_SIGNAL]]'
        style:
          top: 81%
          left: 77%
      - type: custom:bar-card
        entity: '[[SENSOR_GSM_SIGNAL]]'
        style:
          top: 85%
          left: 76.5%
        <<: *ref_bar_settings

      ###################################################################################

      - type: state-icon
        entity: '[[SENSOR_MILEAGE]]'
        style:
          top: 46%
          left: 11.5%
      - type: state-label
        entity: '[[SENSOR_MILEAGE]]'
        style:
          top: 51.5%
          left: 11.5%

      ###################################################################################

      - type: state-icon
        entity: '[[SENSOR_FUEL]]'
        style:
          top: 75%
          left: 25%
      - type: state-label
        entity: '[[SENSOR_FUEL]]'
        style:
          top: 81%
          left: 25%
      - type: custom:bar-card
        entity: '[[SENSOR_FUEL]]'
        style:
          top: 85%
          left: 24%
        <<: *ref_bar_settings

    image: /local/images/car/[[VALUE_CAR]]/car.png
How to call this template
  - type: custom:decluttering-card
    template: decl_car_overview_card
    variables:
      - VALUE_CAR: de_lorean
      ####################################
      - BINARY_SENSOR_HOOD: input_boolean.testing_auto_de_lorean_hood
      - BINARY_SENSOR_DRIVER_DOOR: input_boolean.testing_auto_de_lorean_driver_door
      - BINARY_SENSOR_PASSENGER_DOOR: input_boolean.testing_auto_de_lorean_passenger_door
      - BINARY_SENSOR_REAR_LEFT_DOOR: input_boolean.testing_auto_de_lorean_rear_left_door
      - BINARY_SENSOR_REAR_RIGHT_DOOR: input_boolean.testing_auto_de_lorean_rear_right_door
      - BINARY_SENSOR_TRUNK: input_boolean.testing_auto_de_lorean_trunk
      ####################################
      - BINARY_SENSOR_FRONT_LEFT_TIRE: input_boolean.testing_auto_de_lorean_tire_front_left
      - BINARY_SENSOR_FRONT_RIGHT_TIRE: input_boolean.testing_auto_de_lorean_tire_front_right
      - BINARY_SENSOR_REAR_LEFT_TIRE: input_boolean.testing_auto_de_lorean_tire_rear_left
      - BINARY_SENSOR_REAR_RIGHT_TIRE: input_boolean.testing_auto_de_lorean_tire_rear_right
      ####################################
      - LOCK: lock.virtual_testing_auto_de_lorean_lock
      - PERSON: person.auto_de_lorean
      - SENSOR_FUEL: sensor.auto_de_lorean_fuel_volume
      - SENSOR_MILEAGE: sensor.auto_de_lorean_mileage
      - SENSOR_GSM_SIGNAL: sensor.auto_de_lorean_gsm_signal

Note that:

  1. For all “binary_sensor” inputs corresponding “input_boolean” helpers are used - this is just for a testing purpose; replace them by your real sensors (same for the “lock” entity).
  2. Surely you may get rid of all these many input variables and pass only “VALUE_CAR” variable & compose all entities’ names in the template; it is up to you which way to choose.

Regarding new masks for a “guarded” state:


They are used if:
– car is LOCKED
– all doors, trunk & hood are CLOSED.

These 2 new masks (“all_blue.png”, “lock_blue.png”) are made based on corresponding “red” masks (for instance, open an original png file in Adobe Photoshop and set “Hue” to “-160”).

(update) Similarly about added “all_grey.png” & “lock_grey.png” masks (used if “unavailable”) - may be created in Adobe Photoshop by changing a “Lightness”.

1 Like

This is great! Glad there are people like you and @tmack8001 looking to improve upon other people’s work and share it back to the community.

I’ve been meaning to help some people with their requests of tracing their cars but life has gotten in the way. I might just put some effort into tracing generic vehicles types so that people can use the card even if it’s not a representation of their actual vehicle.

2 Likes

Agreed! You already made some amount of cars; have not checked all of them, have no idea if these examples can cover all popular types.
The only problem here could be a color… Assume some user found a similar SUV car in Figma (your examples, for instance) - but with a different color.
I wonder is there any way to take a PNG file for a red car and colorize it to my favourite Mazda “Blue reflex mica”… Simple masks may be transformed by “Hue / Saturation / etc” tools, but a car image is more complex.

If I make the generic vehicles simple enough I might just be able to modify the color of the SVGs using CSS. I’ll try something and post any results here.

2 Likes

Btw, if these images are used as SVG in a DOM structure - then users can set ANY color by card-mod, right?
Currently only parts like “tire”, “open door” etc are presented as SVG in your Figma project (at least for Hyundai Santa Fe); the “main” car image is PNG.

Update: hmmm, even SVG-files are presented as images in DOM:
image
So, no way to style them as SVG element by card-mod…


Found it!
The car’s PNG should be presented as TWO images:
– windows, dark frames, lights etc
– everything else - and THIS part we can color.

Check these two cars:
image image
A black (!!!) image may be converted to another color by using a chain of filters - below filters for those 2 cars:

invert(18%) sepia(7%) saturate(6087%) hue-rotate(165deg) brightness(100%) contrast(92%)
invert(98%) sepia(3%) saturate(2062%) hue-rotate(316deg) brightness(96%) contrast(105%)

A chain may be generated here: https://codepen.io/sosuke/pen/Pjoqqp

So, a user may generate his own chain of filters and then use it with card-mod (or with a conventional “state_filter” option).

A similar approach is described here. A basic color here is red.

I am not an expert in filters - so these long chains of filters seem a bit weird for me; but if it works - then OK.

can you share your latest config? I tried using the one you have on GH but I’m not sure this is supposed to look like this:

Hi, first of all, i’d like too say: thanks a lot for your card Genosonic!! Really.
I hate you, cause i spent so much time on this, but thank you XD

I have a Ford Focus Estate, and made some (lot of) changes to your initial code. I think i’m done with this ( liiiiiiiies), so i can share my code and files!
Wil be happy to read comments or improvements. I tried to comment the code properly.
Adds:

  • dark mode friendly (i use CatPuccin theme for HA)
  • choosed a vertical presentation, as i’m using this card as a subview, mostly on android mobile
  • some animations
  • tires pressure status and other infos
  • i’m using an input boolean helper, by double taping the card, i can switch from overall to detailed view
The Code
########################
### CARD: Ford Focus ###
########################

# Original Design: @genosonic / https://community.home-assistant.io/t/generic-vehicle-card/397844

# This card uses: 
  # - HACS "fordpass" integration https://github.com/itchannel/fordpass-ha
  # - HACS "Decluttering Card" ( templates at the end of this card) https://github.com/custom-cards/decluttering-card
  # - HACS "Honeycom Menu" https://github.com/Sian-Lee-SA/honeycomb-menu
  # - HACS "card-mod" https://github.com/thomasloven/lovelace-card-mod
  # - HACS "state-switch" https://github.com/thomasloven/lovelace-state-switch
  # - YAML anchors 

### =========================================================================================================
type: picture-elements
image: /local/images/vehicle_card/vehicle_card_vertical_base_500x920.svg
style: |
  @keyframes blink {
    20% {opacity: 100;}
    50% {opacity: 0;}
    80% {opacity: 100;}
  }
  @keyframes run {
    from {transform: rotate(0deg);}
    to {transform: rotate(10deg);}
  }
  @keyframes tech {
    0% {opacity: 0;}
    100% {opacity: 0;}
  }
elements:
### CIRCLES ANIMATIONS ======================================================================================
  # SleepMode status
  - type: conditional
    conditions:
      - entity: sensor.fordpass_deepsleepinprogress
        state: 'True'
    elements:
      - type: image
        image: /local/images/vehicle_card/vehicle_card_circles_light.svg
        dark_mode_image: /local/images/vehicle_card/vehicle_card_circles_dark.svg
        style:
          animation: blink 4s infinite
          <<: &cogweel
            transform: none
            top: 10.9%
            left: '-21.7%'
            width: 143.5%
  # Ignition Status
  - type: conditional
    conditions:
      - entity: sensor.fordpass_ignitionstatus
        state_not: Run
      - entity: sensor.fordpass_deepsleepinprogress
        state_not: 'True'
    elements:
      - type: image
        image: /local/images/vehicle_card/vehicle_card_circles_light.svg
        dark_mode_image: /local/images/vehicle_card/vehicle_card_circles_dark.svg
        style:
          animation: run 2s
          <<: *cogweel
  - type: conditional
    conditions:
      - entity: sensor.fordpass_ignitionstatus
        state: Run
    elements:
      - type: image
        image: /local/images/vehicle_card/vehicle_card_circles_light.svg
        dark_mode_image: /local/images/vehicle_card/vehicle_card_circles_dark.svg
        style:
          animation: run 0.7s linear infinite
          <<: *cogweel
### TOP =====================================================================================================
  # Logo (see end of code)
  # Update time
  - type: state-label
    entity: sensor.tplt_last_refresh_ford_focus
    style:
      transform: translate(-50%,-0%) #!important
      top: 0.5%
      left: 50%
  # Tracker
  - type: state-label
    entity: sensor.tplt_device_tracker_alisecell
    prefix: 'Localisation: '
    style:
      transform: translate(-50%,-0%)  #!important
      top: 4%
      left: 50%
### UNLOCKED ================================================================================================
  - type: conditional
    conditions:
      - entity: lock.fordpass_doorlock
        state_not: 'locked'
    elements:
      - type: image
        image: /local/images/vehicle_card/vehicle_card_redalert_circle.svg
        style:
          top: 50%
          left: 50%
          width: 100%
          animation: blink 1s infinite
### GLOBAL ==================================================================================================
  - type: custom:state-switch
    style:
      top: 50%
      left: 50%
      width: 100%
    entity: binary_sensor.tplt_ford_focus_detailed_view
    default: 'off'
    transition: slide-left # transitions: flip-x/y ; slide-left/right/up/down ; swap-left/right/up/down
    transition_time: 400
    states:
      # Overall ---------------------------------------------------------------------------------------------
      'off':
        type: picture-elements
        image: /local/images/blank_500x920.svg
        elements:
          - type: image
            image: /local/images/ford/ford_focus_rear.webp
            style:
              top: 47%
              left: 50.7%
              width: 176.2%
          - type: conditional
            conditions:
              - entity: sensor.fordpass_ignitionstatus
                state: 'Run'
            elements:
              - type: image
                image: /local/images/ford/ford_focus_rear_lights.svg
                style:
                  animation: blink 1s 2
                  top: 50%
                  left: 50%
                  width: 143%
        card_mod: # https://github.com/thomasloven/lovelace-card-mod
          style: |
            ha-card {
              background: none;
              border: none;
            }
      # Detailed --------------------------------------------------------------------------------------------
      'on':
        type: picture-elements
        image: /local/images/blank_500x920.svg
        elements:
          - type: image
            image: /local/images/vehicle_card/vehicle_card_generic.svg
            style:
              top: 50%
              left: 50%
              width: 130%
          # Tire Pressure Status
          - type: custom:decluttering-card
            template: dcl_ford_card_tires
            variables:
              - attribute: leftFrontTirePressure
              - top: 28%
              - left: 13%
          - type: custom:decluttering-card
            template: dcl_ford_card_tires
            variables:
              - attribute: rightFrontTirePressure
              - top: 28%
              - left: 87%
          - type: custom:decluttering-card
            template: dcl_ford_card_tires
            variables:
              - attribute: outerLeftRearTirePressure
              - top: 72%
              - left: 13%
          - type: custom:decluttering-card
            template: dcl_ford_card_tires
            variables:
              - attribute: outerRightRearTirePressure
              - top: 72%
              - left: 87%
          # Doors
          - type: custom:decluttering-card
            template: dcl_ford_card_lids
            variables:
              - item: door_fl
          - type: custom:decluttering-card
            template: dcl_ford_card_lids
            variables:
              - item: door_fr
          - type: custom:decluttering-card
            template: dcl_ford_card_lids
            variables:
              - item: door_rl
          - type: custom:decluttering-card
            template: dcl_ford_card_lids
            variables:
              - item: door_rr
          - type: custom:decluttering-card
            template: dcl_ford_card_lids
            variables:
              - item: door_hood
          - type: custom:decluttering-card
            template: dcl_ford_card_lids
            variables:
              - item: door_trunk
          # Windows
          - type: conditional
            conditions:
              - entity: binary_sensor.tplt_ford_focus_door_fl
                state: 'off'
            elements:
              - type: custom:decluttering-card
                template: dcl_ford_card_lids
                variables:
                  - item: window_fl
          - type: conditional
            conditions:
              - entity: binary_sensor.tplt_ford_focus_door_fr
                state: 'off'
            elements:
              - type: custom:decluttering-card
                template: dcl_ford_card_lids
                variables:
                  - item: window_fr
          - type: conditional
            conditions:
              - entity: binary_sensor.tplt_ford_focus_door_rl
                state: 'off'
            elements:
              - type: custom:decluttering-card
                template: dcl_ford_card_lids
                variables:
                  - item: window_rl
          - type: conditional
            conditions:
              - entity: binary_sensor.tplt_ford_focus_door_rr
                state: 'off'
            elements:
              - type: custom:decluttering-card
                template: dcl_ford_card_lids
                variables:
                  - item: window_rr
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
            }
### BOTTOM =========================================================================================
  # Fuel
  - type: state-icon
    entity: sensor.fordpass_fuel
    state_color: false
    style:
      transform: none
      top: 88.5%
      left: 1%
  - type: state-label
    entity: sensor.fordpass_fuel
    style:
      transform: none
      top: 89%
      left: 8%
  - type: state-label
    entity: sensor.tplt_fordpass_fuel_distancetoempty_value
    prefix: 'Carburant: '
    suffix: ' km'
    style:
      transform: none
      top: 89%
      left: 20%
  # ExhaustFluid
  - type: state-icon
    entity: sensor.fordpass_exhaustfluidlevel
    state_color: false
    style:
      transform: none
      top: 93.5%
      left: 1%
  - type: state-label
    entity: sensor.fordpass_exhaustfluidlevel
    style:
      transform: none
      top: 94%
      left: 8%
  - type: state-label
    entity: sensor.tplt_fordpass_exhaustfluidlevel_urearange_value
    prefix: 'AdBlue: '
    suffix: ' km'
    style:
      transform: none
      top: 94%
      left: 20%
  # Tires Status LOW
  - type: conditional
    conditions:
      - entity: sensor.tplt_tire_pressure_ford_focus
        state: 'OK'
    elements:
      - type: state-icon
        entity: sensor.tplt_tire_pressure_ford_focus
        case: first
        style:
          <<: &tires_a
            transform: none
            top: 88.5%
            left: 70%
          opacity: 0.05
      - type: state-label
        entity: sensor.tplt_tire_pressure_ford_focus
        style:
          <<: &tires_b
            transform: none
            top: 89%
            left: 77%
          opacity: 0.05
  # Tires Status LOW
  - type: conditional
    conditions:
      - entity: sensor.tplt_tire_pressure_ford_focus
        state: 'Faible'
    elements:
      - type: state-icon
        entity: sensor.tplt_tire_pressure_ford_focus
        case: first
        style:
          <<: *tires_a
          animation: blink 2s infinite
          '--paper-item-icon-color': var(--warning-color)
      - type: state-label
        entity: sensor.tplt_tire_pressure_ford_focus
        style:
          <<: *tires_b
          color: var(--warning-color)
  # Tires Status CRITICAL
  - type: conditional
    conditions:
      - entity: sensor.tplt_tire_pressure_ford_focus
        state: 'Urgent'
    elements:
      - type: state-icon
        entity: sensor.tplt_tire_pressure_ford_focus
        style:
          <<: *tires_a
          animation: blink 1s infinite
          '--paper-item-icon-color': var(--error-color)
      - type: state-label
        entity: sensor.tplt_tire_pressure_ford_focus
        case: first
        style:
          <<: *tires_b
          color: var(--error-color)
  # mileage/odometer
  - type: state-icon
    entity: sensor.fordpass_odometer
    state_color: false
    style:
      transform: none
      top: 93.5%
      left: 70%
  - type: state-label
    entity: sensor.fordpass_odometer
    style:
      transform: none
      top: 94%
      left: 77%
### HONEYCOMB tap action image ==============================================================================
  - type: image
    tooltip: false
    image: /local/images/vehicle_card/vehicle_card_vertical_light.svg
    style:
      top: 50%
      left: 50%
      width: 100%
      animation: tech 2s infinite
    tap_action:
      action: call-service
      service: honeycomb
      service_data:
        entity: null
        active: false
        autoclose: true
        audio: null
        size: 300
        spacing: 4
        animation_speed: 50
        buttons:
          # button 1
          - skip
          # button 2
          - skip
          # button 3
          - icon: mdi:lock-check
            color: var(--subtext1)
            tap_action:
              action: call-service
              service: lock.lock
              service_data:
                entity_id: lock.fordpass_doorlock
          # button 4
          - skip
          # button 5
          - icon: mdi:engine
            color: var(--subtext1)
            tap_action:
              action: call-service
              service: switch.toggle
              service_data:
                entity_id: switch.fordpass_ignition_switch
          # button 6
          - icon: mdi:lock-open-variant-outline
            color: var(--subtext1)
            tap_action:
              action: call-service
              service: lock.unlock
              service_data:
                entity_id: lock.fordpass_doorlock
    double_tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data:
        entity_id: input_boolean.vehicle_card_helper_ford_focus
    hold_action:
      action: none
  # Logo
  - type: image
    tooltip: false
    image: /local/images/ford/ford_logo_pass.png
    style:
      transform: none
      top: 3.5%
      left: 7%
      width: 10%
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.navigate
        data:
          path: /nova-dashboard/map
    hold_action: none

##############################
### DECLUTTERING TEMPLATES ###
##############################

# # lids
# dcl_ford_card_lids:
  # element:
    # type: image
    # entity: binary_sensor.tplt_ford_focus_[[item]]
    # state_image:
      # 'on': /local/images/vehicle_card/vehicle_card_[[item]].svg
      # 'off': /local/images/blank_30x30.svg
    # style:
      # top: 50%
      # left: 50%
      # width: 130%
      # animation: blink 2s infinite
# # tire pressure
# dcl_ford_card_tires:
  # element:
    # type: custom:config-template-card
    # entities:
      # - sensor.fordpass_tirepressure
    # variables:
      # - >-
        # states['sensor.fordpass_tirepressure'].attributes.[[attribute]]
    # element:
      # type: state-label
      # entity: sensor.fordpass_tirepressure
      # attribute: '[[attribute]]'
      # suffix: ' bars'
    # style:
      # top: '[[top]]'
      # left: '[[left]]'
      # color: |-
        # "${
          # vars[0]>=2.1 ? 'var(--primary-text-color)'
          # : vars[0]>=1.7 ? 'var(--warning-color)'
          # : 'var(--error-color)'
        # }"
      # animation: |-
        # "${
          # vars[0]>=2.1 ? 'none'
          # : vars[0]>=1.7 ? 'blink 2s infinite'
          # : 'blink 1s infinite'
        # }"
Here's the link to modified files on Figma platform.

https://www.figma.com/file/WpnKVj9d0vO97FC9q2UeWY/Ford-Focus-Estate-HA-card?type=design&t=P0nUuliwmlbjfqt5-1

And some screens:
Standard view in dark mode:


HoneyComb Menu for remote actions:

Detailed view:

Light mode and active sensors:

BMW version (BMW Connected Drive):

I’m keeping your original MazdaCX9 top-view as a generic one: i have another car, and will maybe change mine in a few months, and i just don’t want having to rebuild the card again and again. This way, i’ll just have to change the entities (not really sure about that ^^).
Thanks again!

4 Likes

Lot of good idea in this topic.:heart_eyes: i need a lot of improvement

1 Like

Thank you @genosonic for sharing this. It’s a great starting point for those without experience with picture-elements and conditionals. Also the figma designs share, that’s a treasure.

1 Like

Hi, I was just working on a Ford.
Add this in your config.yaml:

template:
  - sensor:
    - name: km_autonomia
      unit_of_measurement: "KM"
      icon: mdi:gas-station
      state: "{{ state_attr('sensor.fordpass_fuel', 'distanceToEmpty') }}"
    - name: ford_driver_window
      icon: mdi:car-windshield
      state: "{{ state_attr('sensor.fordpass_windowposition', 'driverWindowPosition') }}"
    - name: ford_passenger_window
      icon: mdi:car-windshield
      state: "{{ state_attr('sensor.fordpass_windowposition', 'passWindowPosition') }}"
    - name: ford_rear_left_window
      icon: mdi:car-windshield
      state: "{{ state_attr('sensor.fordpass_windowposition', 'rearDriverWindowPos') }}"
    - name: ford_rear_right_window
      icon: mdi:car-windshield
      state: "{{ state_attr('sensor.fordpass_windowposition', 'rearPassWindowPos') }}"
  - binary_sensor:
    - name: ford_hood
      state: "{{ state_attr('sensor.fordpass_doorstatus', 'hoodDoor') }}"
    - name: ford_driver_door
      state: "{{ state_attr('sensor.fordpass_doorstatus', 'driverDoor') }}"
    - name: ford_passenger_door
      state: "{{ state_attr('sensor.fordpass_doorstatus', 'passengerDoor') }}"
    - name: ford_rear_left_door
      state: "{{ state_attr('sensor.fordpass_doorstatus', 'leftRearDoor') }}"
    - name: ford_rear_right_door
      state: "{{ state_attr('sensor.fordpass_doorstatus', 'rightRearDoor') }}"
    - name: ford_trunk
      state: "{{ state_attr('sensor.fordpass_doorstatus', 'tailgateDoor') }}"

And then you can use them in your card, here is what I’m using for my Ford Fiesta:

type: picture-elements
elements:
  - type: conditional
    conditions:
      - entity: binary_sensor.ford_hood
        state: 'on'
    elements:
      - type: image
        entity: binary_sensor.ford_hood
        image: /local/img/cx9-top.png
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
      - type: image
        entity: binary_sensor.ford_hood
        image: /local/img/cx9-hood.svg
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
  - type: conditional
    conditions:
      - entity: binary_sensor.ford_driver_door
        state: 'on'
    elements:
      - type: image
        image: /local/img/cx9-left.png
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
      - type: image
        image: /local/img/cx9-driver-door.svg
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
  - type: conditional
    conditions:
      - entity: binary_sensor.ford_passenger_door
        state: 'on'
    elements:
      - type: image
        image: /local/img/cx9-right.png
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
      - type: image
        entity: binary_sensor.ford_passenger_door
        image: /local/img/cx9-passenger-door.svg
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
  - type: conditional
    conditions:
      - entity: binary_sensor.ford_rear_left_door
        state: 'on'
    elements:
      - type: image
        image: /local/img/cx9-left.png
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
      - type: image
        entity: binary_sensor.ford_rear_left_door
        image: /local/img/cx9-rear-left-door.svg
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
  - type: conditional
    conditions:
      - entity: binary_sensor.ford_rear_right_door
        state: 'on'
    elements:
      - type: image
        image: /local/img/cx9-right.png
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
      - type: image
        entity: binary_sensor.ford_rear_right_door
        image: /local/img/cx9-rear-right-door.svg
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
  - type: conditional
    conditions:
      - entity: binary_sensor.ford_trunk
        state: 'on'
    elements:
      - type: image
        image: /local/img/cx9-bottom.png
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
      - type: image
        entity: binary_sensor.ford_trunk
        image: /local/img/cx9-trunk.svg
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
  - type: conditional
    conditions:
      - entity: lock.fordpass_doorlock
        state: unlocked
      - entity: binary_sensor.ford_driver_door
        state: 'off'
      - entity: binary_sensor.ford_passenger_door
        state: 'off'
      - entity: binary_sensor.ford_rear_left_door
        state: 'off'
      - entity: binary_sensor.ford_rear_right_door
        state: 'off'
      - entity: binary_sensor.ford_hood
        state: 'off'
      - entity: binary_sensor.ford_trunk
        state: 'off'
    elements:
      - type: image
        image: /local/img/cx9-all.png
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
      - type: image
        image: /local/img/cx9-lock.svg
        style:
          top: 50%
          left: 50%
          width: 100%
        filter: saturate(1)
        tap_action: none
  - type: state-icon
    entity: lock.fordpass_doorlock
    state_color: false
    style:
      top: 18%
      left: 25%
  - type: state-label
    entity: lock.fordpass_doorlock
    style:
      top: 23.5%
      left: 25%
  - type: state-icon
    entity: device_tracker.fordpass_tracker
    state_color: false
    style:
      top: 18%
      left: 77%
  - type: state-label
    entity: device_tracker.fordpass_tracker
    style:
      top: 23.5%
      left: 77%
  - type: state-icon
    entity: sensor.fordpass_odometer
    style:
      top: 75%
      left: 77%
  - type: state-label
    entity: sensor.fordpass_odometer
    style:
      top: 81%
      left: 77%
  - type: state-icon
    entity: sensor.km_autonomia
    style:
      top: 75%
      left: 25%
  - type: state-label
    entity: sensor.km_autonomia
    style:
      top: 81%
      left: 25%
  - type: state-icon
    entity: sensor.ford_driver_window
    style:
      top: 34%
      left: 13%
  - type: state-label
    entity: sensor.ford_driver_window
    style:
      top: 39.5%
      left: 13%
  - type: state-icon
    entity: sensor.ford_rear_left_window
    style:
      top: 57%
      left: 13%
  - type: state-label
    entity: sensor.ford_rear_left_window
    style:
      top: 62.5%
      left: 13%
  - type: state-icon
    entity: sensor.ford_passenger_window
    style:
      top: 34%
      left: 87%
  - type: state-label
    entity: sensor.ford_passenger_window
    style:
      top: 39.5%
      left: 87%
  - type: state-icon
    entity: sensor.ford_rear_right_window
    style:
      top: 57%
      left: 87%
  - type: state-label
    entity: sensor.ford_rear_right_window
    style:
      top: 62.5%
      left: 87%
image: /local/img/cx9.svg

Watchout!! Your template is not ok
Here is the good syntax:

{{ state_attr('sensor.fordpass_doorstatus','rightRearDoor') }}

Look at the minus “r” ofthe attribute name

EDIT: See below for the BMW card code! (tested on ‘One series’ and ‘x2 series’)

BMW Code
################################
### CARD: BmW (template DCL) ###
################################

# Original Design: @genosonic / https://community.home-assistant.io/t/generic-vehicle-card/397844

# This card IS A DECLUTTERING TEMPLATE and uses: 
  # - "BMW Connected Drive" integration https://www.home-assistant.io/integrations/bmw_connected_drive
  # - HACS "Decluttering Card" ( templates & card example at the end of this file) https://github.com/custom-cards/decluttering-card
  # - HACS "Honeycom Menu" https://github.com/Sian-Lee-SA/honeycomb-menu
  # - HACS "card-mod" https://github.com/thomasloven/lovelace-card-mod
  # - HACS "state-switch" https://github.com/thomasloven/lovelace-state-switch
  # - YAML anchors


### GLOBAL ==================================================================================================
dcl_vehicle_card_bmw: # !! This card IS A DECLUTTERING TEMPLATE !!
  card:
    type: picture-elements
    image: /local/images/vehicle_card/vehicle_card_vertical_base_500x920.svg
    style: |
      @keyframes blink {
        20% {opacity: 100;}
        50% {opacity: 0;}
        80% {opacity: 100;}
      }
      @keyframes tech {
        0% {opacity: 0;}
        100% {opacity: 0;}
      }
    elements:
    ### CIRCLES =============================================================================================
      - type: image
        image: /local/images/vehicle_card/vehicle_card_circles_light.svg
        dark_mode_image: /local/images/vehicle_card/vehicle_card_circles_dark.svg
        style:
          <<: &cogweel
            transform: none
            top: 10.9%
            left: '-21.7%'
            width: 143.5%
    ### TOP =================================================================================================
      # logo (see end of code)
      # device tracker
      - type: state-label
        entity: sensor.tplt_device_tracker_bmw_[[serie]]
        prefix: 'Localisation: '
        style:
          transform: translate(-50%,-0%)  #!important
          top: 4%
          left: 50%
    ### UNLOCKED ============================================================================================
      - type: conditional
        conditions:
          - entity: binary_sensor.bmw_[[serie]]_door_lock_state
            state_not: 'off'
        elements:
          - type: image
            image: /local/images/vehicle_card/vehicle_card_redalert_circle.svg
            style:
              top: 50%
              left: 50%
              width: 100%
              animation: blink 1s infinite
    ### GLOBAL ==============================================================================================
      - type: custom:state-switch
        style:
          top: 50%
          left: 50%
          width: 100%
        entity: binary_sensor.tplt_bmw_[[serie]]_detailed_view
        default: 'off'
        transition: slide-left # transitions: flip-x/y ; slide-left/right/up/down ; swap-left/right/up/down
        transition_time: 400
        states:
          # Overall -----------------------------------------------------------------------------------------
          'off':
            type: picture-elements
            image: /local/images/blank_500x920.svg
            elements:
              - type: image
                image: /local/images/bmw/bmw_image_[[serie]].png
                style:
                  top: '[[image_top]]' # !important quoting due to dcl nesting
                  left: '[[image_left]]' # !important quoting due to dcl nesting
                  width: '[[image_width]]' # !important quoting due to dcl nesting
            card_mod:
              style: |
                ha-card {
                  background: none;
                  border: none;
                }
          # Detailed ----------------------------------------------------------------------------------------
          'on':
            type: picture-elements
            image: /local/images/blank_500x920.svg
            elements:
              - type: image
                image: /local/images/vehicle_card/vehicle_card_generic.svg
                style:
                  top: 50%
                  left: 50%
                  width: 130%
              # Doors
              - type: custom:decluttering-card
                template: dcl_bmw_card_lids
                variables:
                  - serie: '[[serie]]' # !important quoting due to dcl nesting
                  - item: door_fl
              - type: custom:decluttering-card
                template: dcl_bmw_card_lids
                variables:
                  - serie: '[[serie]]' # !important quoting due to dcl nesting
                  - item: door_fr
              - type: custom:decluttering-card
                template: dcl_bmw_card_lids
                variables:
                  - serie: '[[serie]]' # !important quoting due to dcl nesting
                  - item: door_rl
              - type: custom:decluttering-card
                template: dcl_bmw_card_lids
                variables:
                  - serie: '[[serie]]' # !important quoting due to dcl nesting
                  - item: door_rr
              - type: custom:decluttering-card
                template: dcl_bmw_card_lids
                variables:
                  - serie: '[[serie]]' # !important quoting due to dcl nesting
                  - item: door_hood
              - type: custom:decluttering-card
                template: dcl_bmw_card_lids
                variables:
                  - serie: '[[serie]]' # !important quoting due to dcl nesting
                  - item: door_trunk
              # Windows
              - type: conditional
                conditions:
                  - entity: binary_sensor.tplt_bmw_[[serie]]_door_fl
                    state: 'off'
                elements:
                  - type: custom:decluttering-card
                    template: dcl_bmw_card_lids
                    variables:
                      - serie: '[[serie]]' # !important quoting due to dcl nesting
                      - item: window_fl
              - type: conditional
                conditions:
                  - entity: binary_sensor.tplt_bmw_[[serie]]_door_fr
                    state: 'off'
                elements:
                  - type: custom:decluttering-card
                    template: dcl_bmw_card_lids
                    variables:
                      - serie: '[[serie]]' # !important quoting due to dcl nesting
                      - item: window_fr
              - type: conditional
                conditions:
                  - entity: binary_sensor.tplt_bmw_[[serie]]_door_rl
                    state: 'off'
                elements:
                  - type: custom:decluttering-card
                    template: dcl_bmw_card_lids
                    variables:
                      - serie: '[[serie]]' # !important quoting due to dcl nesting
                      - item: window_rl
              - type: conditional
                conditions:
                  - entity: binary_sensor.tplt_bmw_[[serie]]_door_rr
                    state: 'off'
                elements:
                  - type: custom:decluttering-card
                    template: dcl_bmw_card_lids
                    variables:
                      - serie: '[[serie]]' # !important quoting due to dcl nesting
                      - item: window_rr
            card_mod:
              style: |
                ha-card {
                  background: none;
                  border: none;
                }
    ### BOTTOM ==============================================================================================
      # Fuel
      - type: custom:config-template-card
        entities:
          - sensor.bmw_[[serie]]_remaining_fuel
        variables:
          - states['sensor.bmw_[[serie]]_remaining_fuel']
        element:
          type: state-icon
          entity: sensor.bmw_[[serie]]_remaining_fuel
        style:
          transform: none
          top: 88.5%
          left: 1%
          '--paper-item-icon-color': |-
            "${
              vars[0]>=30 ? 'var(--subtext0)'
              : vars[0]>=15 ? 'var(--warning-color)'
              : 'var(--error-color)'
            }"
          animation: |-
            "${
              vars[0]>=30 ? 'none'
              : vars[0]>=15 ? 'blink 2s infinite'
              : 'blink 1s infinite'
            }"
      - type: custom:config-template-card
        entities:
          - sensor.bmw_[[serie]]_remaining_fuel
        variables:
          - states['sensor.bmw_[[serie]]_remaining_fuel']
        element:
          type: state-label
          entity: sensor.bmw_[[serie]]_remaining_fuel
        style:
          transform: none
          top: 89%
          left: 8%
          color: |-
            "${
              vars[0]>=30 ? 'var(--primary-text-color)'
              : vars[0]>=15 ? 'var(--warning-color)'
              : 'var(--error-color)'
            }"
      - type: state-label
        entity: sensor.bmw_[[serie]]_remaining_range_fuel
        prefix: 'Autonomie: '
        style:
          transform: none
          top: 89%
          left: 20%
      # Check Control Status OK
      - type: conditional
        conditions:
          - entity: binary_sensor.bmw_[[serie]]_check_control_messages
            state: 'off'
        elements:
          - type: state-icon
            entity: binary_sensor.bmw_[[serie]]_check_control_messages
            case: first
            style:
              <<: &check_a
                transform: none
                top: 88.5%
                left: 70%
              opacity: 0.05
          - type: state-label
            entity: binary_sensor.bmw_[[serie]]_check_control_messages
            style:
              <<: &check_b
                transform: none
                top: 89%
                left: 77%
              opacity: 0.05
      # Mileage
      - type: state-icon
        entity: sensor.bmw_[[serie]]_mileage
        icon: mdi:counter
        style:
          transform: none
          top: 93.5%
          left: 70%
      - type: state-label
        entity: sensor.bmw_[[serie]]_mileage
        style:
          transform: none
          top: 94%
          left: 77%
    ### HoneyComb & Tap Actions =============================================================================
      - type: custom:decluttering-card
        template: dcl_bmw_card_honeycomb
        variables:
          - serie: '[[serie]]' # !important quoting due to dcl nesting
      # Logo
      - type: image
        title: null
        image: /local/images/bmw/bmw_logo_[[serie]].png
        style:
          transform: none
          top: '[[logo_top]]' # !important quoting due to dcl nesting
          left: '[[logo_left]]' # !important quoting due to dcl nesting
          width: '[[logo_width]]' # !important quoting due to dcl nesting
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.navigate
            data:
              path: /nova-dashboard/map
        hold_action: none
      # Check Control Status NotOK
      - type: conditional
        conditions:
          - entity: binary_sensor.bmw_[[serie]]_check_control_messages
            state: 'on'
        elements:
          - type: state-icon
            entity: binary_sensor.bmw_[[serie]]_check_control_messages
            case: first
            style:
              <<: *check_a
              animation: blink 2s infinite
              '--paper-item-icon-color': var(--warning-color)
          - type: state-label
            entity: binary_sensor.bmw_[[serie]]_check_control_messages
            style:
              <<: *check_b
              color: var(--warning-color)

##############################
### DECLUTTERING TEMPLATES ###
##############################

# lids
dcl_bmw_card_lids:
  element:
    type: image
    entity: binary_sensor.tplt_bmw_[[serie]]_[[item]]
    state_image:
      'on': /local/images/vehicle_card/vehicle_card_[[item]].svg
      'off': /local/images/blank_30x30.svg
    style:
      top: 50%
      left: 50%
      width: 130%

# honeycomb
dcl_bmw_card_honeycomb:
  element:
    type: image
    title: null
    image: /local/images/vehicle_card/vehicle_card_vertical_base_500x920.svg
    style:
      top: 50%
      left: 50%
      width: 100%
      animation: tech 2s infinite
    hold_action:
      action: call-service
      service: honeycomb
      service_data:
        entity: null
        active: false
        autoclose: true
        audio: null
        size: 300
        spacing: 4
        animation_speed: 50
        buttons:
          # button 1
          - icon: mdi:bullhorn
            color: var(--subtext1)
            tap_action:
              action: call-service
              service: button.press
              service_data:
                entity_id: button.bmw_[[serie]]_sound_horn
          # button 2
          - icon: mdi:car-light-alert
            color: var(--subtext1)
            tap_action:
              action: call-service
              service: button.press
              service_data:
                entity_id: button.bmw_[[serie]]_flash_lights
          # button 3
          - icon: mdi:lock-check
            color: var(--subtext1)
            tap_action:
              action: call-service
              service: lock.lock
              service_data:
                entity_id: lock.bmw_[[serie]]_lock
          # button 4
          - icon: mdi:air-purifier-off
            color: var(--subtext1)
            tap_action:
              action: call-service
              service: button.press
              service_data:
                entity_id: button.bmw_[[serie]]_deactivate_air_conditioning
          # button 5
          - icon: mdi:air-filter
            color: var(--subtext1)
            tap_action:
              action: call-service
              service: button.press
              service_data:
                entity_id: button.bmw_[[serie]]_activate_air_conditioning
          # button 6
          - icon: mdi:lock-open-variant-outline
            color: var(--subtext1)
            tap_action:
              action: call-service
              service: lock.unlock
              service_data:
                entity_id: lock.bmw_[[serie]]_lock
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data:
        entity_id: input_boolean.vehicle_card_helper_bmw_[[serie]]
    double_tap_action:
      action: call-service
      service: button.press
      service_data:
        entity_id: button.bmw_[[serie]]_refresh_from_cloud

##############################
### CARD example: BmW 116i ###
##############################

# type: custom:decluttering-card
# template: dcl_vehicle_card_bmw
# variables:
  # - serie: 116i
  # - image_top: 48%
  # - image_left: 53%
  # - image_width: 130%
  # - logo_top: 3%
  # - logo_left: 4%
  # - logo_width: 20%


Yeah these overlays got messed up in a sensor name change with the HA+Rivian plugin in a recent release. I’m also looking at changing the background images over to the native ones provided by Rivian’s backend API.

1 Like

Since I’m already well on my way to making my own dashboard with the beautiful examples that have been put down in this topic, I only have two requests.
Is it possible that the cx91.svg can be changed to the color Aurora Blue (Hex: #3c249c) the cupra born has this color, also is it possible that the cx9-top, cx9-right, cx9-left, cx9-bottom and cx9-all get the color green.

I can’t get it done myself, hence my request. This would complete my dashboard.

Thank you in advance.