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:
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
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? 
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:
- Converted it to “decluttering-card” template.
- Got rid of repeated code (used yaml anchors).
- Replaced battery level with GSM signal level (do not have a battery & GSM coverage is poor on the way to my country house).
- Added two blue-ish masks for a “guarded” state.
- Replaced “device_tracker” entity with a corresponding “person” entity (opens a more-info window with a map on a tap).
- (updated) Added severity levels for bar-cards.
- (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:
- 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).
- 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:
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:
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.
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
i need a lot of improvement 
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.