Looks great. But is it responsive?
Mine? Yes, they are responsive.
can you show me mobile version? 
Hi, would it be possible to post the code that integrates the travel time to location X? Thanks in advance
Hi @Thomas1509,
Sure. I am using the Waze Travel Time integration (Waze Travel Time - Home Assistant) so there is not much coding to show.
You just have to get the integration working with a Origin and Destination (you just need to use a device_tracker.mobile_phone as origin and define the destination. This will create a sensor that is the one that you need to include on the card.
Hope it helps
2 Likes
Alternatively iCloud3 if you have iPhones, that gives you a lot of sensors for distance, time, etc.
1 Like
Just finished mine. Background is picture of zone, border around photo is sleep status/phone activity. Bar card is for travel time and all lower are app sensors
9 Likes
Mind sharing your code as reference for others?
type: custom:vertical-stack-in-card
style: |
ha-card{
box-shadow: none;
}
cards:
- variables:
person: person.agata
bg: |
[[[
if (states['person.agata'].state == 'home' )
return '#191f2b';
return 'url(/local/agata/' + states['person.agata'].state +
'.png';
]]]
type: custom:button-card
triggers_update: all
show_name: false
show_icon: false
show_state: false
show_label: false
styles:
card:
- box-shadow: none
- border-radius: 15px 15px 0 0 var(--primary-background-color)
- padding: 0
- height: 140px
- background: var(--primary-background-color)
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 0px
custom_fields:
item1:
card:
type: custom:button-card
styles:
card:
- height: 20px
- border-radius: 0
- border: 0px solid var(--primary-background-color)
- box-shadow: 1px black
- padding: 0
- background: var(--primary-background-color)
item2:
card:
type: custom:button-card
entity: '[[[ return variables.person ]]]'
show_entity_picture: true
show_name: false
show_icon: false
styles:
card:
- padding: 0
- height: 120px
- box-shadow: none
- border-radius: 3px 3px 0 0
- background: null
- background-image: '[[[ return variables.bg ]]] '
- background-size: cover
- background-position: center
- overflow: visible
img_cell:
- width: 80px
- height: 80px
- border-radius: 509%
- border: 4px solid
- border-color: |
[[[
if (states['sensor.agata_sleep_status'].state == 'Awake' )
return "var(--state-icon-active-color)";
return "var(--state-icon-color)";
]]]
- place-self: center
- position: relative
- top: '-29%'
grid:
- grid-template-areas: '"i"'
entity_picture:
- width: 85px
- filter: |
[[[
if (states['person.agata'].state != 'home' )
return 'grayscale(100%)';
return 'null';
]]]
- type: custom:bar-card
max: 500
height: 12
style: |
bar-card-value {
margin: auto;
margin-top: -4px;
text-shadow: 0px 2px #000000;
color: gray;
}
ha-card{
background: rgba(0, 0, 0, 0.0);
margin-top: -45px;
}
entities:
- entity: sensor.agata_do_domu
positions:
icon: 'off'
indicator: 'on'
minmax: 'off'
value: inside
name: ' '
- type: horizontal-stack
cards:
- entity: proximity.agata
show_entity_picture: true
show_name: false
font-size: 11px
show_state: true
icon: mdi:map-marker-distance
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
state:
- operator: '=='
value: 0
color: var(--state-icon-color)
- operator: '!='
value: 0
color: var(--state-icon-active-color)
type: custom:button-card
- entity: sensor.oneplus_a6000_poziom_baterii
show_entity_picture: true
show_name: false
show_state: true
show_label: true
font-size: 11px
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
icon:
- color: |
[[[
if (states['binary_sensor.oneplus_a6000_czy_sie_laduje'].state == 'on' )
return "var(--state-icon-active-color)";
return "var(--state-icon-color)";
]]]
state:
- operator: '>'
value: 90
icon: |
[[[
if (states['binary_sensor.oneplus_a6000_czy_sie_laduje'].state == 'on')
return 'mdi:battery-charging-100';
return 'mdi:battery';
]]]
- operator: <
value: 89
icon: |
[[[
if (states['binary_sensor.oneplus_a6000_czy_sie_laduje'].state == 'on')
return 'mdi:battery-charging-' + Math.ceil(entity.state / 10) * 10;
return 'mdi:battery-' + Math.ceil(entity.state / 10) * 10;
]]]
type: custom:button-card
- entity: sensor.oneplus_a6000_wykryta_aktywnosc
show_entity_picture: true
show_name: false
show_last_changed: true
show_state: false
show_label: true
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
state:
- value: still
icon: mdi:human-female
label: null
color: var(--state-icon-color)
font-size: 11px
- value: in_vehicle
label: null
color: var(--state-icon-active-color)
font-size: 11px
type: custom:button-card
- entity: sensor.oneplus_a6000_stan_telefonu
show_entity_picture: true
show_name: false
font-size: 11px
show_state: false
show_last_changed: true
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
state:
- value: ringing
icon: mdi:phone-ring
color: var(--state-icon-active-color)
- value: idle
icon: mdi:phone-hangup
color: var(--state-icon-color)
- value: offhook
icon: mdi:phone-in-talk
color: var(--state-icon-active-color)
type: custom:button-card
- entity: sensor.czas_do_alarmu_agata
show_entity_picture: true
show_name: false
show_state: true
icon: mdi:alarm
state:
- value: none
color: var(--state-icon-color)
- operator: '!='
value: none
color: var(--state-icon-active-color)
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
type: custom:button-card
6 Likes
Hi. Just add the integration again. You may add as much as you need.
Hi,
I tried to add the integration in configuration.yaml but the sensor didn’t show up. When I added the integration as an ordinary integration it worked, but then I can only have one. Do you know what I’m doing wrong?
I think that Waze integration can only be done through the UI. On the Integrations screen, click Add Integration and choose “Waze Travel Time”… fill everything and you should get another sensor. It is working for me.
Thanks, that’s worked perfectly! Appreciate the help 
1 Like
I specifically created an account on this forum to thank you for your code and images of your person cards, I’ve been wanting to create a dashboard for my Xbox friends and with your help and little google/hacking out your design, I finally created something I’m happy with! Thank you! Also CSS grids are still a mystery to me, I just got lucky 
4 Likes
Thanks very much for sharing this - Would you have any idea why my cards look like the below when yours look a lot tidier?! (Specifically the size of the image and the size of the card itself)
Edit: I’ve resolved the above issues by putting two cards side by side in a horizontal stack (which is what it looks like you’ve done). Oddly though, I can’t get the coloured backgrounds / rings around my images, even though I’ve copied your configuration for that section verbatim - Any clues there?
6 Likes
Here’s mine/ours.
- 1st row: pictures of wife and me with zone status
- 2nd row: obviously battery gauges for our phones
- 3rd row: shortcuts for both of us for ringer mode, bluetooth state, charger state and finde_my_phone-script → the shortcuts are clickable and rotate between the ringer mode between ringer, vibrate and silent, bluetooth on/off or starting a script that rings the phone to find it in the house
Additionally we have a car card with picture an zone status and in the second row clicable buttons to close/open door lock, windows, sunroof and of course tank and pedometer. Colors and icons change depending on the status.
Not all is super tidy an fitting but everything works for now and is especially easy to use from our mobile phones.
6 Likes
