Love the pictures, very cool!
2 Likes
can you share it to me, i love your lovelace
thanks you !!
1 Like
Here’s the code for the picture elements with button cards on top:
no magic to lining up the pictures except for some fiddling in photoshop then seeing how they aligned on the phone.
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/bebe2.jpg
border-radius: 20px
elements:
- entity: person.bebe
style:
background-color: rgba(0, 0, 0, 0.5)
bottom: 0
color: white
font-size: 12px
left: 0
line-height: 100%
padding: 0 0px
transform: initial
width: 100%
type: state-label
- type: custom:button-card
entity: sensor.sm_g965f_battery_level
template: phone
style:
top: 3%
left: 5%
transform: initial
- type: custom:button-card
entity: proximity.kim_home
template: phone
style:
top: 15%
left: 5%
font-size: 12px
transform: initial
- type: picture-elements
elements:
- entity: person.steve
style:
background-color: rgba(0, 0, 0, 0.5)
bottom: 0
color: white
font-size: 12px
text-align: right
left: 0
line-height: 100%
padding: 0 0
transform: initial
width: 100%
type: state-label
- type: custom:button-card
entity: sensor.steve_s21_battery_level
template: phone
style:
top: 3%
right: 5%
transform: initial
- type: custom:button-card
entity: proximity.steve_home
template: phone
style:
top: 15%
right: 5%
transform: initial
image: /local/spidey2.jpg
The button card template code:
phone:
show_state: true
show_name: false
show_icon: true
layout: icon_state
tap_action:
action: more-info
styles:
card:
- width: 60px
- font-size: 12px
- background-color: rgba(0,0,0,0.2)
- border-radius: 5px
state:
- font-size: 12px
- opacity: 1
Hi. Can you explain or show code sample how this works? Thanks.
(note I use custom theme variables identified as var(–severity-1) through to var(–severity-5)
hello,
where must i add the template ?
i dont understand where this is placed.
i tried it in the raw editor, no luck, i tried configuration.yaml file, no luck
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
- padding: 0px 10px
- justify-self: start
state:
- font-size: 12px
- 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
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- 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: Ben Work
styles:
entity_picture:
- border: 2px solid var(--severity-4)
- value: Jess Work
styles:
entity_picture:
- border: 2px solid var(--severity-4)
- value: Poppy Home
styles:
entity_picture:
- border: 2px solid var(--severity-3)
- value: Lola Home
styles:
entity_picture:
- border: 2px solid var(--severity-3)
- value: GPa and GMa Home
styles:
entity_picture:
- border: 2px solid var(--severity-3)
Thank You
Heya,
You need to use this card to make the templates work:
Follow the instructions to install and let me know if you have issues after that 
1 Like
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.