Sure! No problem!
The card now looks like this. I cleaned up my cards code, but it can still be little messy :D. I want to keep developing this card, so if you come up with something new let me know.
You will need:
- custom:button-card
- custom:swipe-card
- Lovelace: mini graph card
- 🔹 Card-mod - Add css styles to any lovelace card
- Custom Component: open_route_service travel_time
If you need speed sensors (km/h, s/m) then you need to make template sensors (you need a device_tracker.entity with speed attribute):
Km/h sensor
- platform: template
sensors:
speed_kmh:
friendly_name: Speed km/h
value_template: "{{ state_attr('device_tracker.entity', 'speed') | round(0) }}"
unit_of_measurement: 'km/h'
and
m/s sensor
- platform: template
sensors:
speed_ms:
friendly_name: Speed m/s
value_template: "{{ (state_attr('device_tracker.entity', 'speed')|float / 3.6)| round(1)}}"
unit_of_measurement: 'm/s'
Code for the card:
type: custom:button-card
entity: person.entity
icon: null
name: null
show_state: true
show_name: false
show_icon: false
styles:
custom_fields:
field1:
- position: absolute
- left: 400px
- top: 0px
- width: px
- opacity: 100%
field2:
- position: absolute
- left: 0px
- top: 0px
- width: px
- opacity: 100%
card:
- width: 400px
- height: 250px
- background-color: transparent
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.0)
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align_self: start
- text_align: start
name:
- justify-self: null
- padding-left: 0px
- font-weight: bold
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 15.5px
state:
- justify-self: null
- padding-left: 0px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 14px
- color: '#b3b3b3'
- opacity: 0%
color_type: card
layout: icon_name_state2nd
show_name: true
show_label: false
label: null
state:
- value: not_home
styles:
card:
- filter: grayscale(100%)
- value: home
styles:
card:
- filter: grayscale(0%)
custom_fields:
field2:
card:
type: custom:button-card
show_icon: false
entity: 'null'
show_state: false
show_name: false
show_entity_picture: false
styles:
custom_fields:
peite:
- position: absolute
- left: 46px
- top: 0px
- width: 354px
- opacity: 0%
graph:
- position: absolute
- left: 0px
- top: 0px
- width: 400px
- opacity: 85%
topleft:
- position: absolute
- left: 15px
- top: 15px
full_map:
- position: absolute
- left: 350px
- top: 8px
- width: 40px
- opacity: 90%
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: null
- background-size: 100%
- border-radius: 10px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
- height: 250px
- width: 400px
img_cell:
- padding-top: 75px
icon:
- width: 50px
- padding-bottom: 50px
name:
- color: var(--secondary-text-color)
- padding-bottom: 0px
- null
state:
- font-size: 20px
- padding-bottom: 2px
- line-height: 20px
- color: white
custom_fields:
graph:
card:
type: map
aspect_ratio: null
default_zoom: 16
entities:
- person.entity
show_state: true
show_name: false
show_icon: false
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 40px
state:
- font-size: 20px
- justify-self: start
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
peite:
card:
type: custom:button-card
entity: input_boolean.entity
aspect_ratio: 1/2
tap_action:
action: toggle
show_state: true
show_name: false
show_icon: false
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 40px
card:
- border-radius: 10px
state:
- font-size: 20px
- justify-self: start
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- align-self: middle
full_map:
card:
type: custom:button-card
aspect_ratio: 1
icon: mdi:information-outline
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: 'null'
hide_header: true
auto_close: false
large: false
style:
$: |
.mdc-dialog {
backdrop-filter: blur(10px);
background: rgba(0,0,0,0.5);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 10px;
}
.: |
:host {
--mdc-theme-surface: rgba(245,245,245,0.7);
--secondary-background-color: rgb(0,0,0,0.5);
}
:host .content {
width: 90vw;
height: 40vh;
}
card:
type: map
aspect_ratio: null
default_zoom: 12
entities:
- person.entity
show_state: true
show_name: false
show_icon: true
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 30px
state:
- font-size: 20px
- justify-self: start
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- align-self: middle
field1:
card:
type: custom:button-card
show_icon: false
entity: input_boolean.entity
show_state: false
show_name: false
tap_action:
action: toggle
styles:
custom_fields:
graph:
- position: absolute
- left: 10px
- top: 210px
- width: 60px
- opacity: 75%
topleft:
- position: absolute
- left: 15px
- top: 15px
topright:
- position: absolute
- left: 325px
- top: 10px
- width: 60px
- opacity: 75%
huoneet:
- position: absolute
- left: 10px
- top: 10px
- width: 60px
- opacity: 75%
bussit:
- position: absolute
- left: 10px
- top: 45px
- width: 60px
- opacity: 75%
musiikki:
- position: absolute
- left: 10px
- top: 80px
- width: 60px
- opacity: 75%
kalenteri:
- position: absolute
- left: 10px
- top: 115px
- width: 60px
- opacity: 75%
weather:
- position: absolute
- left: 10px
- top: 150px
- width: 60px
- opacity: 75%
proximity:
- position: absolute
- left: 185px
- top: 210px
- width: 60px
- opacity: 75%
key:
- position: absolute
- left: 325px
- top: 45px
- width: 60px
- opacity: 75%
phone:
- position: absolute
- left: 325px
- top: 80px
- width: 60px
- opacity: 75%
travel:
- position: absolute
- left: 255px
- top: 210px
- width: 60px
- opacity: 75%
speed:
- position: absolute
- left: 325px
- top: 210px
- width: 60px
- opacity: 75%
graavi:
- position: absolute
- left: 0px
- top: 160px
- width: 60px
- opacity: 75%
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: url('/local/dashboard_images/anttitesti2.png')
- background-size: 100%
- border-radius: 10px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
- height: 250px
- width: 400px
img_cell:
- padding-top: 75px
icon:
- width: 50px
- padding-bottom: 50px
name:
- color: var(--secondary-text-color)
- padding-bottom: 0px
state:
- font-size: 20px
- padding-bottom: 2px
- line-height: 20px
- color: white
state:
- value: 'on'
styles:
card:
- animation:
- mymove 0.5s linear
- animation-fill-mode: forwards
- value: 'off'
styles:
card:
- animation:
- moving 0.5s linear
- animation-direction: reverse
extra_styles: |
@keyframes mymove {
0% { transform: translate(0px) ; }
10% { transform: translate(-40px) ; }
20% { transform: translate(-80px) ; }
30% { transform: translate(-120px) ; }
40% { transform: translate(-160px) ; }
50% { transform: translate(-220px) ; }
60% { transform: translate(-260px) ; }
70% { transform: translate(-300px) ; }
80% { transform: translate(-340px) ; }
90% { transform: translate(-380px) ; }
100% { transform: translate(-400px) ; }
}
@keyframes moving {
0% { transform: translate(0px) ; }
10% { transform: translate(-40px) ; }
20% { transform: translate(-80px) ; }
30% { transform: translate(-120px) ; }
40% { transform: translate(-160px) ; }
50% { transform: translate(-220px) ; }
60% { transform: translate(-260px) ; }
70% { transform: translate(-300px) ; }
80% { transform: translate(-340px) ; }
90% { transform: translate(-380px) ; }
100% { transform: translate(-400px) ; }
}
custom_fields:
graavi:
card:
type: custom:mini-graph-card
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
color: var(--secondary-text-color);
width: 400px;
border-radius: 1px;
box-shadow: none;
}
entities:
- entity: sensor.battery_level (or something else)
show:
icon: false
name: false
points: false
state: false
font_size: 0
color_thresholds:
- value: 0
color: '#f0c35b'
- value: 40
color: '#f0ca4d'
- value: 80
color: '#ebbf23'
graph:
card:
type: custom:button-card
entity: person.antti_lindqvist
tap_action:
action: more-info
show_state: true
show_name: false
show_icon: false
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 20px
- justify-self: start
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- align-self: middle
topright:
card:
type: custom:button-card
entity: sensor.battery_level (or something else)
tap_action:
action: more-info
show_state: true
show_name: false
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 15px
- justify-self: null
- padding-right: 3px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
huoneet:
card:
type: custom:button-card
entity: input_boolean.entity2 (or something else)
tap_action:
action: toggle
show_state: false
show_name: false
show_icon: true
icon: mdi:home
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 15px
- justify-self: null
- padding-right: 3px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
proximity:
card:
type: custom:button-card
entity: sensor.proximity
tap_action:
action: toggle
show_state: true
show_name: false
show_icon: true
icon: mdi:map-marker-distance
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 10px
- justify-self: null
- padding-right: 2px
- font-weight: null
- text-transform: lovercase
- align-self: right
- padding-bottom: null
key:
card:
type: custom:button-card
entity: 'null'
tap_action:
action: #what you want to do
show_state: false
show_name: false
show_icon: true
icon: mdi:key-chain
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 10px
- justify-self: null
- padding-right: 2px
- font-weight: null
- text-transform: lovercase
- align-self: right
- padding-bottom: null
phone:
card:
type: custom:button-card
entity: 'null'
tap_action:
action: #what you want to do
show_state: false
show_name: false
show_icon: true
icon: mdi:cellphone
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 10px
- justify-self: null
- padding-right: 2px
- font-weight: null
- text-transform: lovercase
- align-self: right
- padding-bottom: null
bussit:
card:
type: custom:button-card
entity: input_boolean.entity3 (or something else)
tap_action:
action: toggle
show_state: false
show_name: false
show_icon: true
icon: mdi:bus
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 15px
- justify-self: null
- padding-right: 3px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
musiikki:
card:
type: custom:button-card
entity: 'null'
tap_action:
action: #what you want to do
show_state: false
show_name: false
show_icon: true
icon: mdi:spotify
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 15px
- justify-self: null
- padding-right: 3px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
kalenteri:
card:
type: custom:button-card
entity: input_select.entity
tap_action:
action: #what you want to do
show_state: false
show_name: false
show_icon: true
icon: mdi:calendar
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 15px
- justify-self: null
- padding-right: 3px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
weather:
card:
type: custom:button-card
entity: input_boolean.entity4
tap_action:
action: #what you want to do
show_state: false
show_name: false
show_icon: true
icon: mdi:weather-cloudy
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 15px
- justify-self: null
- padding-right: 3px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
travel:
card:
type: custom:swipe-card
parameters:
centeredSlides: true
allowTouchMove: true
loop: false
spaceBetween: 8
slidesPerView: auto
pagination:
type: false
effect: fade
fadeEffect:
crossFade: true
autoplay:
disableOnInteraction: false
delay: 10000
speed: 2000
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.time_to_home_car
icon: mdi:car
show_state: true
show_name: false
show_label: false
show_icon: true
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 20px
card:
- width: 60px
- height: 30px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
state:
- justify-self: null
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 10px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.time_to_home_cycling
icon: mdi:bicycle
show_state: true
show_name: false
show_label: false
show_icon: true
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 20px
card:
- width: 60px
- height: 30px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
state:
- justify-self: null
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 10px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.time_to_home_walking
icon: mdi:walk
show_state: true
show_name: false
show_label: false
show_icon: true
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 20px
card:
- width: 60px
- height: 30px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
state:
- justify-self: null
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 10px
speed:
card:
type: custom:swipe-card
parameters:
centeredSlides: true
allowTouchMove: true
loop: false
spaceBetween: 8
slidesPerView: auto
pagination:
type: false
effect: fade
fadeEffect:
crossFade: true
autoplay:
disableOnInteraction: false
delay: 10000
speed: 2000
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.speed_kmh
icon: mdi:camera-timer
show_state: true
show_name: false
show_label: false
show_icon: true
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 20px
card:
- width: 60px
- height: 30px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
state:
- justify-self: null
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 10px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.speed_ms
icon: mdi:camera-timer
show_state: true
show_name: false
show_label: false
show_icon: true
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 20px
card:
- width: 60px
- height: 30px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
state:
- justify-self: null
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 10px