You could modify the conditional card so that the green overlay is only displayed when other sensors that might conflict are “off”. I did something like this for when the car is unlocked.
I’ll update the car with the corrections.
thanks 
Yes, I already thought that I might need some more conditions here.
The question is: what is important to show when the doors are open / unlocked and the car is charging 
I’m not yet sure how I really want to have it 
Thanks for providing the fixes on the layout… I am already trying to figure out how this figma is working… I think, I were able to somehow create a component…
let’s see, if I can do others as well
Nevermind, I noticed an error.
nearly
the both parts on the side (highlighted with the arrow) should be the same color as the top part…
This is one single part
But maybe, I can adjust the color by myself… give me some time and I will try it
that’s awsome
Thank you again so much!
I would think that the car being unlocked or a door open is more critical than if the car was charging.
You could also add something like this which might conflict a bit less with the overlays.
I added that overlay to the community file.
1 Like
thanks
Yes, that’s a great Idea!
May I ask another question?
Might you explain, how I can get the svg images “in the correct” size?
Somehow, the parts you have created are fitting perfectly… the one I’ve designed will be shown fine in the editor - but the overlay is just a bit too large
EDIT:
Ah … I see, it depends on the frame size…
Yep, just make the frame the same size as all the other overlays.
I’m working on it… just struggling a bit with the “glow” atm…
so, finally - my dashboard is ready
Thanks again for all the effort
customization:
-
charging cable plugged in but not locked:
-
charging cable plugged in, locked and charging in progress:
all other information has been removed from the card itself, since I like the tiles on the bottom more.
Vehicle unlocked, doors and windows open etc. is still working as previously designed
3 Likes
I love the addition of the charger animation as well as a visual indicator to the range percentage / state of charge.
I’ve been looking at adding more of this summary information through a slight modification to the Rivian R1T/R1S to include both the percentage as well as the range in numerical format, though am not 100% comfortable with them yet:
- type: conditional
conditions:
- entity: binary_sensor.rivian_energy_storage_charger_vehicle_charger_state
state: on
elements:
- type: state-icon
icon: mdi:ev-station
entity: binary_sensor.rivian_energy_storage_charger_vehicle_charger_state
style:
top: 75%
left: 25%
- type: conditional
conditions:
- entity: binary_sensor.rivian_energy_storage_charger_vehicle_charger_state
state: off
- entity: binary_sensor.rivian_energy_storage_charger_status_vehicle_charger_status
state: off
elements:
- type: state-icon
entity: sensor.rivian_energy_storage_charger_adjusted_soc
style:
top: 75%
left: 25%
- type: conditional
conditions:
- entity: binary_sensor.rivian_energy_storage_charger_vehicle_charger_state
state: off
- entity: binary_sensor.rivian_energy_storage_charger_status_vehicle_charger_status
state: on
elements:
- type: state-icon
icon: mdi:power-plug
entity: binary_sensor.rivian_energy_storage_charger_vehicle_charger_state
style:
top: 75%
left: 25%
- type: state-label
entity: sensor.rivian_energy_storage_charger_adjusted_soc
style:
top: 81%
left: 25%
- type: state-label
entity: sensor.rivian_energy_storage_vehicle_energy_vehicle_range
style:
top: 85%
left: 25%
It works and provides a visual indicator via the selected icon from the charging information the vehicle and backend sensors provide.
1 Like
Adding the bar and the pulsating icon overlay this is the end result.
- type: conditional
conditions:
- entity: binary_sensor.rivian_energy_storage_charger_vehicle_charger_state
state: on
elements:
- type: icon
icon: mdi:lightning-bolt
style:
top: 75%
left: 25%
card_mod:
style:
hui-icon-element:
$: |
:host {
color: var(--paper-item-icon-color);
border-radius: 16px;
box-shadow: 0px 0px 2px #88F1FF;
padding: 2px;
border: 2px solid transparent;
animation: pulsate 2s linear infinite;
}
@keyframes pulsate {
0% {
color: var(--paper-item-icon-color);
box-shadow: 0 0 0 transparent;
border: 2px solid transparent;
}
50% {
color: #88F1FF;
box-shadow: 0px 0px 8px #88F1FF;
border: 2px solid #88F1FF;
}
100% {
color: var(--paper-item-icon-color);
box-shadow: 0 0 0 transparent;
border: 2px solid transparent;
}
}
5 Likes
@genosonic when you start taking a dive into the R1T/R1S wireframes again, could there be an included wireframe overlay layer for the charger door being open similar to the door and window sensor overlays. There isn’t a great sensor for this information that I’ve been able to find nor is there a top down overlay in the manual, but page 143 has a side view of the charger door. This would be nice to include in the dynamic changes of “plugged in” vs “unplugged”.
Sure. Could you share a few pictures of this charger door opened from your vehicle, aiming from the top at different heights/zooms? You can send them to me via PM. @tmack8001
Hi @genosonic could you please create the vector in Figma for a VW T-Cross. It reports, Doors, Windows and Trunk. This is the color
Thanks in advance
Good stuff - I’ve been absent for a bit and it’s great to see some awesome improvements! Any chance you can share full yaml for your latest card?
EDIT: found your github, nm
1 Like
Still a work in progress, suggestions are welcome
- title: Car
path: car
icon: mdi:car
theme: minimalist-desktop
type: custom:masonry-layout
badges: []
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Merc C200
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: ''
alignment: left
- type: picture
image: /local/img/c200.png
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: Lock Status
alignment: left
- type: picture-elements
elements:
- type: conditional
conditions:
- entity: sensor.enginehoodstatus
state: 'True'
elements:
- type: image
entity: sensor.enginehoodstatus
image: /local/img/c200-top.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: sensor.enginehoodstatus
image: /local/img/c200-hood.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: sensor.doorstatusfrontleft
state: 'True'
elements:
- type: image
image: /local/img/c200-left.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/c200-driver-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: sensor.doorstatusfrontright
state: 'True'
elements:
- type: image
image: /local/img/c200-right.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: sensor.doorstatusfrontright
image: /local/img/c200-passenger-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: sensor.doorstatusrearleft
state: 'True'
elements:
- type: image
image: /local/img/c200-left.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: sensor.doorstatusrearleft
image: /local/img/c200-rear-left-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: sensor.doorstatusrearright
state: 'True'
elements:
- type: image
image: /local/img/c200-right.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: sensor.doorstatusrearright
image: /local/img/c200-rear-right-door.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: sensor.doorlockstatusdecklid
state: 'True'
elements:
- type: image
image: /local/img/c200-bottom.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
entity: sensor.doorlockstatusdecklid
image: /local/img/c200-trunk.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: conditional
conditions:
- entity: lock.merc_lock
state: unlocked
elements:
- type: image
image: /local/img/c200-all.png
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
- type: image
image: /local/img/c200-lock.svg
style:
top: 50%
left: 50%
width: 100%
filter: saturate(1)
tap_action: none
image: /local/img/c200.svg
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: Tyre Pressure
alignment: left
- type: picture-elements
elements:
- type: state-icon
entity: sensor.tirepressurefrontleft
state_color: true
icon: mdi:tire
style:
top: 18%
left: 25%
- type: state-label
entity: sensor.tirepressurefrontleft
style:
top: 25.5%
left: 25%
- type: state-icon
entity: sensor.tirepressurefrontright
state_color: true
icon: mdi:tire
style:
top: 18%
left: 77%
- type: state-label
entity: sensor.tirepressurefrontright
style:
top: 25.5%
left: 77%
- type: state-icon
entity: sensor.tirepressurefrontright
state_color: true
icon: mdi:tire
style:
top: 75%
left: 77%
- type: state-label
entity: sensor.tirepressurefrontright
style:
top: 83%
left: 77%
- type: state-icon
entity: sensor.tirepressurefrontright
state_color: true
icon: mdi:tire
style:
top: 75%
left: 25%
- type: state-label
entity: sensor.tirepressurefrontright
style:
top: 83%
left: 25%
- type: state-icon
entity: binary_sensor.merc_tire_warning
state_color: true
icon: mdi:car-tire-alert
style:
top: 50%
left: 50%
- type: state-label
entity: binary_sensor.merc_tire_warning
style:
top: 58%
left: 50%
image: /local/img/c200.svg
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: Service
alignment: left
- type: custom:mushroom-template-card
primary: Service Due in
secondary: '{{ states(''sensor.serviceintervaldays'') }} days'
icon: mdi:calendar
entity: sensor.serviceintervaldays
icon_color: |-
{% if states('sensor.serviceintervaldays') >= '60' %}
red
{% else %}
green
{% endif %}
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.merc_starter_battery_state
icon: mdi:car-battery
layout: vertical
fill_container: true
name: 12V Battery
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: binary_sensor.merc_low_brake_fluid_warning
layout: vertical
fill_container: true
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:car-brake-alert
name: Brake Fluid
- type: custom:mushroom-entity-card
entity: binary_sensor.merc_low_coolant_level_warning
name: Coolant
icon: mdi:oil-level
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
- type: custom:mushroom-entity-card
entity: binary_sensor.merc_low_wash_water_warning
name: 'Washer '
layout: vertical
double_tap_action:
action: none
hold_action:
action: none
fill_container: true
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: Vehicle Status
alignment: left
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: lock.merc_lock
icon: mdi:car-key
layout: vertical
fill_container: true
name: Lock
- type: custom:mushroom-entity-card
entity: binary_sensor.merc_windows_closed
name: Windows
layout: vertical
fill_container: true
- type: custom:mushroom-entity-card
entity: sensor.doorlockstatusoverall
name: Doors
icon: mdi:car-door
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.sunroofstatus
name: Sunroof
icon: mdi:car-convertible
layout: vertical
fill_container: true
secondary_info: state
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: sensor.decklid
name: Luggage
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
- type: custom:mushroom-entity-card
entity: sensor.enginehoodstatus
name: Bonnet
layout: vertical
double_tap_action:
action: none
hold_action:
action: none
fill_container: true
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: Trip Data
alignment: left
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.merc_range_liquid
icon: mdi:map-marker-radius
layout: vertical
fill_container: true
name: Range
hold_action:
action: none
double_tap_action:
action: none
- type: gauge
entity: sensor.merc_fuel_level
name: Fuel Level
unit: '%'
min: 0
max: 100
needle: false
theme: minimalist-desktop
- type: custom:mushroom-entity-card
entity: sensor.merc_odometer
name: Odometer
icon: mdi:car-cruise-control
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: Last Trip
alignment: left
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.merc_distance_start
icon: mdi:map-marker-distance
layout: vertical
fill_container: true
name: Distance
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: none
- type: custom:mushroom-entity-card
entity: sensor.driventimestart
name: ' Time'
layout: vertical
fill_container: true
icon: mdi:car-clock
- type: custom:mushroom-entity-card
entity: sensor.merc_average_speed_start
name: Avg Speed
icon: mdi:speedometer
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
- type: custom:mushroom-entity-card
entity: sensor.merc_liquid_consumption_start
name: Average
layout: vertical
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: From Reset
alignment: left
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.merc_distance_reset
icon: mdi:map-marker-distance
layout: vertical
fill_container: true
name: Distance
- type: custom:mushroom-entity-card
entity: sensor.driventimereset
name: Time
layout: vertical
fill_container: true
icon: mdi:car-clock
- type: custom:mushroom-entity-card
entity: sensor.merc_average_speed_reset
name: Avg Speed
icon: mdi:speedometer
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
- type: custom:mushroom-entity-card
entity: sensor.merc_liquid_consumption_reset
layout: vertical
name: Average
double_tap_action:
action: none
hold_action:
action: none
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: Location
alignment: left
- type: map
entities:
- device_tracker.merc_device_tracker
default_zoom: 16
dark_mode: true
aspect_ratio: '1.224'
hours_to_show: 144
2 Likes