Hi eximo84,
thanks for the input. With your hints I build the UI. And it looks great.
I will implement the automation for total_mileage_since_last_charge soon.
So here my current views and yamls
# lovelace yaml
type: vertical-stack
cards:
- type: picture-entity
entity: device_tracker.os_ev_czech_20_location
image: http://xxxxxxxx/local/tmp/Hyundai-Kona.png
name: Hyundai Kona
show_name: true
show_state: true
- type: custom:bar-card
entities:
- entity: sensor.os_ev_czech_20_ev_battery
name: Akkukapazität in Prozent
animation:
state: 'on'
icon: mdi:car-battery
color: '#161616'
severity:
- from: '25'
to: '100'
color: '#006600'
- from: '15'
to: '25'
color: '#c1c100'
- from: '0'
to: '15'
color: '#660000'
- entity: sensor.os_ev_czech_20_ev_battery_kw
min: '0'
max: '64'
animation:
state: 'on'
icon: mdi:car-battery
color: '#212121'
name: Akkukapazität
complementary: false
severity:
- from: '20'
to: '50'
color: '#006600'
- from: '10'
to: '20'
color: '#c1c100'
- from: '0'
to: '10'
color: '#660000'
- entity: sensor.os_ev_czech_20_range_by_ev
name: Reichweite
max: '396'
min: '0'
color: '#161616'
severity:
- from: '100'
to: '500'
color: '#006600'
- from: '50'
to: '100'
color: '#c1c100'
- from: '0'
to: '50'
color: '#660000'
positions:
icon: inside
minmax: inside
style: |-
bar-card-iconbar {
padding-left: 35px;
}
bar-card-value {
padding-left: 1.5em;
}
bar-card-min {
position: absolute;
padding-left: 6px;
}
bar-card-max {
position: absolute;
padding-left: 91%;
}
bar-card-divider {
display: none;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 8px;
}
- type: grid
square: false
cards:
- type: glance
show_icon: true
show_name: true
show_state: true
state_color: false
theme: slate
entities:
- entity: binary_sensor.os_ev_czech_20_engine
name: Motor
- type: glance
show_icon: true
show_name: true
show_state: true
state_color: false
theme: slate
entities:
- entity: binary_sensor.os_ev_czech_20_plugged_in
name: Laden
- type: glance
show_icon: true
show_name: true
show_state: true
state_color: false
theme: slate
entities:
- entity: binary_sensor.os_ev_czech_20_charging
name: Laden
- type: button
tap_action:
action: toggle
entity: lock.os_ev_czech_20_door_lock
icon_height: 45px
show_state: true
name: Türen
theme: slate
- type: glance
show_icon: true
show_name: true
show_state: true
state_color: false
theme: slate
entities:
- entity: binary_sensor.os_ev_czech_20_trunk
name: Kofferraum
- type: glance
show_icon: true
show_name: true
show_state: true
state_color: false
theme: slate
entities:
- entity: binary_sensor.os_ev_czech_20_hood
name: Motorhaube
- type: glance
show_icon: true
show_name: true
show_state: true
state_color: false
theme: slate
entities:
- entity: binary_sensor.os_ev_czech_20_tire_pressure_all
name: Reifendruck
- type: glance
show_icon: true
show_name: true
show_state: true
state_color: false
theme: slate
entities:
- entity: binary_sensor.os_ev_czech_20_air_conditioner
name: Klimaanlage
- type: custom:mini-graph-card
name: Akkukapazität der letzten 7 Tage
align_icon: left
hours_to_show: 168
points_per_hour: 1
upper_bound: 100
lower_bound: 0
entities:
- entity: sensor.os_ev_czech_20_ev_battery
show:
labels: true
animate: true
color_thresholds:
- value: 20
color: '#00ff00'
- value: 10
color: '#ff0000'
- type: custom:button-card
entity: sensor.os_ev_czech_20_last_update
secondary_info: last-changed
show_last_changed: true
name: 'Zuletzt aktuallisiert:'
styles:
grid:
- grid-template-areas: '"i n l"'
- grid-template-rows: 100%
- grid-template-columns: 15% 58% 27%
label:
- justify-self: start
name:
- justify-self: end
- margin-right: 40%
And I have a view for the daily driven kilometers. The custom:mini-graph-card can do this, but I have a second logic for this with the utility_meter integration. Here I make the change your hints for mileage_since_last_charge and an automation. Thanks therefore!
# lovelace yaml
type: vertical-stack
cards:
- type: custom:mini-graph-card
name: gefahrene Kilometer der letzten 7 Tage
align_icon: left
hours_to_show: 336
points_per_hour: 1
entities:
- entity: sensor.os_ev_czech_20_odometer
color: '#212121'
show:
labels: true
animate: true
- type: custom:mini-graph-card
name: gefahrene Kilometer pro Tag
align_icon: left
hours_to_show: 336
entities:
- entity: sensor.os_ev_czech_20_ev_daily_odometer
show_graph: false
- entity: sensor.os_ev_czech_20_odometer
aggregate_func: delta
group_by: date
show:
graph: bar
color_thresholds:
- value: 0
color: '#383C45'
- value: 1
color: '#161616'
- type: custom:mini-graph-card
name: gefahrene Kilometer pro Tag
align_icon: left
hours_to_show: 168
entities:
- entity: sensor.os_ev_czech_20_ev_daily_odometer
show_graph: false
- entity: sensor.os_ev_czech_20_ev_daily_odometer
aggregate_func: delta
group_by: date
show:
graph: bar
color_thresholds:
- value: 0
color: '#383C45'
- value: 1
color: '#161616'
# configuration.yaml
utility_meter:
os_ev_czech_20_ev_daily_odometer:
source: sensor.os_ev_czech_20_odometer
name: "OS EV CZECH 20 EV Daily Odometer"
cycle: daily
os_ev_czech_20_ev_monthly_odometer:
source: sensor.os_ev_czech_20_odometer
name: "OS EV CZECH 20 EV Monthly Odometer"
cycle: monthly