This is my card:
The icon in the lower right corner changes and shows the travel time by different means of transport (car, walk or bike) 
.
The icons on the left control the display of my other cards. The icons of the right shows my phone battery level, find my keys and find my phone (and shows other useful phone specs)
When you tap the card, it opens the map:
.
My card is not ready yet. I will also put a map to show the address where I am, etc.
Do you have any ideas to add?
This looks really great!!! Nice and clean. Mine’s a bit cluttery but it has a lot of info on it.
Can you share the code that when you tap the card the map opens? That’s what I was trying to do but could just not figure it out!! That’s the last piece and then mine will be ‘done’ 
Thank you!
Sure! I needed to clean my code. It isn’t perfect, but you can try it out. You are going to need input.boolean entity.
type: custom:button-card
entity: 'null'
icon: 'null'
name: null
show_state: true
show_name: false
show_icon: false
styles:
custom_fields:
field1:
- position: absolute
- left: 0px
- top: 0px
- width: px
- opacity: 100%
field2:
- position: absolute
- left: 400px
- 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
layout: icon_name_state2nd
state:
- value: not_home
styles:
card:
- filter: grayscale(100%)
- value: home
styles:
card:
- filter: grayscale(0%)
custom_fields:
field1:
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%
little map:
- 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:
little map:
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
field2:
card:
type: custom:button-card
show_icon: false
entity: #input_boolean.entity
show_state: false
show_name: false
tap_action:
action: toggle
styles:
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) ; }
}
Thank you!!!
Would you be able to share your full card config? I really like the different buttons and then the different travel times for modes of transportation!
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:
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
Do you use places?
Thank you for speed sensor idea I just added that…
Sensor:
- platform: template
sensors:
speed_mph:
friendly_name: Speed mph
value_template: "{{ state_attr('device_tracker.sm_f926u1', 'speed') | round(0) }}"
unit_of_measurement: "mph"
Then added it to my overall code:
secondary: >
{% if (state_attr('sensor.john','direction_of_travel') == 'stationary') %}
{{ state_attr('sensor.john','street_number') }} {{
state_attr('sensor.john','street') }}, {{
state_attr('sensor.john','city') }}, {{
state_attr('sensor.john','postal_code') }}
{% else %}
{% if states('sensor.speed_mph') > 0 %}
John is traveling and is going {{ states('sensor.speed_mph') }} MPH
{% else %}
Traveling...
{% endif %}
{% endif %}
Not perfect and I’m sure I’ll tweak it later…right now just more interested in making the map popup!
No, i don’t use it. I need to tseck it out
The only thing I found today using the mph sensor is that it never changed from 0… so not sure why. I’ll have to dig into that and figure it out. My phone shows 2 device trackers->
device_tracker.john_s_z_fold3 – shows NO speed
and
device_tracker.sm_f926u1 – which has the speed attribute.
Not sure why it’s not updating but… just something else to play with I guess 
source_type: gps
latitude: 42.0629194
longitude: -76.8059227
gps_accuracy: 23
altitude: 232
course: 0
speed: 0
vertical_accuracy: 2
friendly_name: John
Thanks so much! I’m having rouble getting the card to show anything other than the map though. When I go to the view, the other view (the picture entity) will pop up/slide over for a seconf, but then go away. I can’t figure out how to get that to be the main view and the map only as a popup?
Hi
Can I look your code?
Looks really good, thanks for sharing! I see you can improve it a bit while reducing the amount of code by doing the following for battery:
battery: |
[[[
return `<ha-icon
icon="${states['sensor. mobile_battery_level'].attributes['icon']}"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor. mobile_battery_level'].state}% battery</span></span>`;
]]]
I was inspired by @Abbadon89 and I used his code yesterday to cook something similar. I haven’t figured out how to add a contextual background depending on your location in the house (I have ESPresense everywhere) but I will keep searching for this.
I used different sensors than Abbadon89 to display different informations but I really loved the card and here is my result so far:
So I just discovered a twist on my card that I hadn’t realized… as the same as the card above but I had to add another ‘condition’ to it as when a Samsung phone is fully charged there’s another state called “full”…
Neither the ‘charging’ or ‘discharging’ conditions apply and the battery wouldn’t show up…
So here’s the new addition to the conditions in case anyone is using this…
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: device_tracker.sm_f926u1
icon_type: entity-picture
hide_name: true
layout: vertical
secondary_info: state
conditions:
- entity: sensor.sm_f926u1_battery_state
state: "charging"
card:
type: custom:mushroom-template-card
entity: sensor.sm_f926u1_battery_level
layout: vertical
icon_color: yellow
fill_container: true
name: Fold3
icon: mdi:battery-charging-medium
hide_name: true
primary: "Battery Level: {{ states('sensor.sm_f926u1_battery_level') }}%"
secondary: "Battery Temp: {{ states('sensor.sm_f926u1_battery_temperature') }}°"
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.sm_f926u1_battery_state
state: "full"
card:
type: custom:mushroom-template-card
entity: sensor.sm_f926u1_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.sm_f926u1_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_f926u1_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: "Battery Level: {{ states('sensor.sm_f926u1_battery_level') }}%"
secondary: "Battery Temp: {{ states('sensor.sm_f926u1_battery_temperature') }}°"
tap_action:
action: more-info
fill_container: true
- type: conditional
conditions:
- entity: sensor.sm_f926u1_battery_state
state: "discharging"
card:
type: custom:mushroom-template-card
entity: sensor.sm_f926u1_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.sm_f926u1_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_f926u1_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: "Battery Level: {{ states('sensor.sm_f926u1_battery_level') }}%"
secondary: "Battery Temp: {{ states('sensor.sm_f926u1_battery_temperature') }}°"
tap_action:
action: more-info
fill_container: true
I have tried to use your code and changed entities on card but can’t seem to get it working. Just keep seeing Cannot read properties of undefined (reading ‘person_card_new’) Any ideas?
Decluttering Template
---
decluttering_templates:
person_card_new:
default:
- size: 60%
- color: auto
- background_color: var(--primary-background-color)
- variable: spin
- spin: false
- show_name: false
- show_state: true
- show_label: false
- show_icon: true
- show_last_changed: false
- show_entity_picture: false
- tap_action:
action: more-info
haptic: light
- aspect_ratio: 2/1
- margin-right: 20px
- label: ' '
- off_icon_color: gray
- off_name_color: gray
- off_state_color: gray
card:
type: custom:button-card
battery: '[[battery]]'
home_sensor: '[[home_sensor]]'
work_sensor: '[[work_sensor]]'
work_icon: '[[work_icon]]'
name: '[[name]]'
icon: 'mdi:[[icon]]'
size: '[[size]]'
color: '[[color]]'
aspect_ratio: '[[aspect_ratio]]'
entity: '[[entity]]'
label: '[[label]]'
show_name: '[[show_name]]'
show_icon: '[[show_icon]]'
show_state: '[[show_state]]'
show_label: '[[show_label]]'
show_last_changed: '[[show_last_changed]]'
tap_action: '[[tap_action]]'
hold_action: '[[hold_action]]'
entity_picture: '[[entity_picture]]'
show_entity_picture: '[[show_entity_picture]]'
styles:
card:
- border-radius: 12px
- --card-background-color: '[[background_color]]'
icon:
- grid-column: 1
- grid-row: 1 / 4
label:
- color: gray
- font-size: 11px
# - font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 12px
# - font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
- color: var(--primary-text-color)
grid:
- grid-template-areas: '"i s" "i battery" "i home" "i work"'
- grid-template-columns: 50% 50%
- grid-template-rows: 25% 25% 25% 25%
img_cell:
- align-self: start
- text-align: start
# - margin-right: '[[margin-right]]'
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
# - font-family: Helvetica
- font-size: 13px
entity_picture:
- height: 60px
- width: 60px
- border-radius: 100%
custom_fields:
battery:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
home:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
work:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
custom_fields:
battery: >
[[[
if (states['[[battery]]'].attributes.battery_charging === false)
return `<ha-icon
icon="mdi:battery"
style="; --mdc-icon-size: 14px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
else return `<ha-icon
icon="mdi:battery-charging"
style="; --mdc-icon-size: 14px; padding-left: 5px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
]]]
home: >
[[[
return `<ha-icon
icon="mdi:home-import-outline"
style="; --mdc-icon-size: 14px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[home_sensor]]'].state}mins</span>`
]]]
work: >
[[[
return `<ha-icon
icon="[[work_icon]]"
style="; --mdc-icon-size: 14px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[work_sensor]]'].state}mins</span>`
]]]
state:
- value: "not_home"
styles:
card:
- opacity: 0.6
entity_picture:
- border: 2px solid var(--severity-1)
- value: "home"
styles:
entity_picture:
- border: 2px solid var(--severity-5)
- value: "Sam Work"
styles:
entity_picture:
- border: 2px solid var(--severity-4)
- value: "Leah Work"
styles:
entity_picture:
- border: 2px solid var(--severity-4)
Cards
- view_layout:
grid-area: "card1"
type: horizontal-stack
cards:
- type: 'custom:decluttering-card'
template: person_card_new
variables:
- entity: person.sam_XXX
- name: Sam
- battery: device_tracker.sam_XXX
- work_sensor: sensor.waze_islington
- home_sensor: sensor.sam_to_home
- work_icon: mdi:car
- entity_picture: /local/avatar_sam.png
- show_entity_picture: true
- tap_action:
action: more-info
haptic: light
- type: 'custom:decluttering-card'
template: person_card_new
variables:
- entity: person.leah_XXX
- name: Leah
- battery: device_tracker.leah_XXX
- work_sensor: sensor.waze_islington
- home_sensor: sensor.sam_to_home
- work_icon: mdi:car
- entity_picture: /local/avatar_leah.png
- show_entity_picture: true
- tap_action:
action: more-info
haptic: light
It’s not immediately obvious to me sorry why this isn’t working. A few things:
decluttering_templates:
!include lovelace/decluttering_templates/decluttering_templates.yaml
Thanks mate, got it working. Had to change a bit of the custom_fields for battery level to get the % to show but all looking cracking now!
Here’s my updated person card!!! Finally I have a popup map
Click on the address to get this… [indents and spacing may have to be fixed!]
Card:
################################################
# person card - John
######################################
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: person.john
icon: " "
icon_type: icon
primary_info: none
secondary_info: none
card_mod:
style: |
mushroom-card {
background: url( {{ state_attr('person.john', 'entity_picture') }} ) no-repeat 0px center;
background-size: 42px 42px;
}
ha-card {
background-color: rgba(255, 255, 255, .7);
margin-left: auto;
margin-right: auto;
width: 66px;
border-radius: 50%;
}
- type: conditional
conditions:
- entity: sensor.sm_f926u1_battery_state
state: "charging"
card:
type: custom:mushroom-template-card
entity: sensor.sm_f926u1_battery_level
layout: vertical
icon_color: yellow
fill_container: true
name: Fold3
icon: mdi:battery-charging-medium
hide_name: true
primary: "Phone is charging..."
secondary: "Battery Level: {{ states('sensor.sm_f926u1_battery_level') }}%"
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.sm_f926u1_battery_state
state: "full"
card:
type: custom:mushroom-template-card
entity: sensor.sm_f926u1_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.sm_f926u1_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_f926u1_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: "Battery Level: {{ states('sensor.sm_f926u1_battery_level') }}%"
secondary: "Battery Temp: {{ states('sensor.sm_f926u1_battery_temperature') }}°"
tap_action:
action: more-info
fill_container: true
- type: conditional
conditions:
- entity: sensor.sm_f926u1_battery_state
state: "discharging"
card:
type: custom:mushroom-template-card
entity: sensor.sm_f926u1_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.sm_f926u1_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_f926u1_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: "Battery Level: {{ states('sensor.sm_f926u1_battery_level') }}%"
secondary: "Battery Temp: {{ states('sensor.sm_f926u1_battery_temperature') }}°"
tap_action:
action: more-info
fill_container: true
styles:
card:
height: 66px;
- type: custom:mushroom-template-card
entity: sensor.john
primary: >
{% if (state_attr('sensor.john', 'direction_of_travel') == 'stationary') and (state_attr('sensor.john','home_zone') == 'zone.home') %}
John is Home:
{% elif (state_attr('sensor.john', 'direction_of_travel') == 'stationary')%}
John is Here:
{% else %}
John is
{% endif %}
secondary: >
{% if (state_attr('sensor.john','direction_of_travel') == 'stationary') %}
{{ state_attr('sensor.john','street_number') }} {{
state_attr('sensor.john','street') }}, {{
state_attr('sensor.john','city') }}, {{
state_attr('sensor.john','postal_code') }}
{% else %}
Traveling...
{% endif %}
icon: >-
{% if (state_attr('sensor.john','direction_of_travel') == 'stationary') and (states('device_tracker.sm_f926u1') == 'home') %} mdi:home-account
{% elif (state_attr('sensor.john','direction_of_travel') == 'stationary') and (states('device_tracker.sm_f926u1') == 'not_home') %} mdi:domain
{% else %} mdi:car
{% endif %}
icon_color: >-
{% if (state_attr('sensor.john','direction_of_travel') == 'stationary') and (states('device_tracker.sm_f926u1') == 'home') %} green
{% elif (state_attr('sensor.john','direction_of_travel') == 'stationary') and (states('device_tracker.sm_f926u1') == 'not_home') %} blue
{% else %} cyan
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: John's Location
icon: mdi:car
card:
type: map
default_zoom: 15
entities:
- device_tracker.sm_f926u1
#- device_tracker.john_wade
aspect_ratio: 16:9
hours_to_show: 4
deviceID:
- this
- dashboard
multiline_secondary: true
