Any way to replicate this card without installing the whole theme integration?
https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_person_info/
1 Like
Hi, please help me. what entity needs to be invoked here?
custom_fields:
icon: >
[[[ return entity === undefined ? null : <img src="${states[????].attributes.entity_picture}" width="100%">; ]]]
thanks, i solved it
Thanks for your share.
My card
and my code :
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: person.XxX
aspect_ratio: 1/1
name: Person
show_entity_picture: true
show_name: false
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#77c66e'
- value: not_home
styles:
card: null
custom_fields:
icon:
- border-color: '#EF4F1A'
- value: Work
styles:
custom_fields:
icon:
- border-color: orange
- value: XxX
styles:
custom_fields:
icon:
- border-color: lightblue
- value: XxX
styles:
custom_fields:
icon:
- border-color: lightblue
styles:
card:
- border-radius: 5%
- padding: 5%
- color: gray
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- align-self: middle
grid:
- grid-template-areas: '"icon status" "n n" "battery proximity" "wifi ss" "sd sd"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-size: 15px
- align-self: middle
- justify-self: start
- padding-bottom: 10px
custom_fields:
icon:
- clip-path: circle()
- width: 80%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: gray
- border-radius: 500px
- margin: 0 +10% 0 0
- justify-self: end
- opacity: 1
status:
- align-self: start
- justify-self: end
- color: gray
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
wifi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
- '--text-wifi-color-sensor': >-
[[[ if (states["sensor.oneplus_wifi_connection"].state ==
'<not connected>') return "#aaaaaa"; ]]]
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
- '--text-color-sensor': >-
[[[ if (states["sensor.oneplus_battery_level"].state < 50)
return "#EF4F1A"; ]]]
alarm:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}"
width="100%">`; ]]]
status: |
[[[
if (states['person.XxX'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: red;">
</ha-icon><span style="color: red;"> Away</span>`;
}
if (states['person.XxX'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: green;">
</ha-icon><span style="color: green;"> ${entity.state}</span>`;
}
if (states['person.XxX'].state =='Work') {
return `<ha-icon
icon="mdi:briefcase"
style="width: 20px; height: 20px; color: orange;">
</ha-icon><span style="color: orange;"> ${entity.state}</span>`;
}
if (states['person.XxX'].state =='XxX') {
return `<ha-icon
icon="mdi:home-city"
style="width: 20px; height: 20px; color: lightblue;">
</ha-icon><span style="color: lightblue;"> ${entity.state}</span>`;
}
if (states['person.XxX'].state =='XxX') {
return `<ha-icon
icon="mdi:barn"
style="width: 20px; height: 20px; color: lightblue;">
</ha-icon><span style="color: lightblue;"> ${entity.state}</span>`;
}
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['proximity.lilphoenix'].state} Kms</span></span>`
]]]
battery: |
[[[
if (states['sensor.oneplus_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: green;">
</ha-icon> <span><span style="color: green;">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.oneplus_wifi_connection'].state =='<not connected>') {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
</ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">Disconnected</span></span>`;
} else {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_wifi_connection'].state}</span></span>`;
}
]]]
Trying to add last state changes, color for all attributes.
And same thing for a Iphone.
Thanks.
I’m struggling in getting @benm7 person card from the beginning of this topic along with the decluttering card to work, and hoping someone can help. I also have minimalist installed and unsure if that is causing a conflict or not.
EDIT.
I’ve finally made some success think have most of it figured out. For me, it appeared that not having variables defined for home_sensor and work_sensor was causing an issue with the template looking for those.
Still learning it some, but think I got it worked out.
Thank you for you share. I have some issues that I don’t undertand.
-
what should I place in the xxx yyy ? I tried our person entity… We are only 2 persons
-
I get NAN/NAN in connection
-
I get unknown km
type: custom:button-card
entity: person.filipe_santos
aspect_ratio: 1/1
name: Filipe S.
show_entity_picture: true
show_name: true
state:
- value: not_home
styles:
card:
- background-color: '#404040'
custom_fields:
icon:
- border-color: '#B0B0B0'
- opacity: 30%
styles:
card:
- border-radius: 5%
- padding: 5%
- color: lightgray
- font-size: 11px
grid:
- grid-template-areas: '"icon status" "n network" "battery proximity"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-size: 16px
- justify-self: left
- padding-bottom: 5px
- justify-self: left
custom_fields:
icon:
- width: 120%
- pointer-events: none
- display: grid
- border: 3px inset
- border-color: |
[[[
var state=states['person.filipe_santos'].state;
if (state=='home') {
return `#77c66e`;
}
if ((state=='sm_s918b')|(state=='joana_s')) {
return `darkorange`;
}
if ((state=='zzz')|(state=='joana_s')|(state=='sss')|(state=='ddd')) {
return `deepskyblue`;
}
]]]
- border-radius: 100px
- margin: 0 0 0 0
- justify-self: left
- opacity: 1
status:
- align-self: start
- justify-self: end
- text-transform: capitalize
- color: lightgray
battery:
- justify-self: left
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var l = states['sensor.sm_s918b_battery_level'].state;
if (l < 10) return "#e45649";
if (l < 20) return "#ff9050";
if (l < 30) return "#ffb040";
else return "#77c66e"
]]]
network:
- justify-self: end
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var n = states['sensor.sm_s918b_network_type'].state;
if ((n=='cellular')|(n=='wifi')) return "#77c66e";
else return "grey"
]]]
proximity:
- justify-self: end
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var p = states['sensor.sm_s918b_proximity_sensor'].state;
if (p > 1) return "#ffb040";
if (p > 20) return "#ff9050";
if (p > 100) return "#e45649";
else return "#77c66e"
]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states['person.filipe_santos'].attributes.entity_picture}"
width="100%">`; ]]]
status: |
[[[ var state = states['person.filipe_santos'].state;
var doma = `<ha-icon icon="mdi:home" style="color: #77c66e;`
var produkce = `<ha-icon icon="mdi:city-variant-outline" style="color: deepskyblue;`
var volno = `<ha-icon icon="mdi:gymnastics" style="color: deepskyblue;`
var nasi = `<ha-icon icon="mdi:home-outline" style="color: darkorange;`
var pryc = `<ha-icon icon="mdi:home-export-outline" style="color: lightgray;width: 20px; height: 20px;"></ha-icon><span> Pryč</span>`
var solid = ` width: 20px; height: 20px;"></ha-icon><span> ${entity.state}</span>`
if (state=='home') {
return doma+solid
}
if ((state=='sm_s918b')|(state=='joana_s')|(state=='zzz')) {
return produkce+solid
}
if ((state=='ddd')|(state=='sss')) {
return volno+solid
}
if ((state=='fff')|(state=='eee')) {
return nasi+solid
} else {
return pryc
}
]]]
battery: |
[[[
var i = states['sensor.sm_s918b_battery_level'].attributes.icon;
var b = states['sensor.sm_s918b_battery_level'].state;
return `<ha-icon icon='${i}' style='width:20px; height: 20px; vertical-align:2px; color: var(--icon-color);'></ha-icon>${b}%`
]]]
network: |
[[[
var i = states['sensor.sm_s918b_network_type'].attributes.icon;
var s = parseFloat(states['sensor.sm_s918b_mobile_tx_gb'].state).toFixed(1);
var r = parseFloat(states['sensor.sm_s918b_mobile_rx_gb'].state).toFixed(1);
return `<ha-icon icon='${i}' style='width:20px; height: 20px; vertical-align:2px; color: var(--icon-color);'></ha-icon> ${r} / ${s} GB`
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: var(--icon-color)">
</ha-icon> <span>\<span>${states['sensor.sm_s918b_proximity_sensor'].state} Km</span></span>`
]]]
Hi yes, there are your person entities listed in the Setting/Integrations/Devices-Entities list.
- Just copy the correct name-ID of your person entity.
- you must find correct mobile phone atribute (integrated entity from your mobile phone) - again in the Settings/entities find everything that concerns your mobile phone, you will find entities showing batery state and charging percentage etc. and in the code just replace my syntaxes with your correct mobile phomes entities name IDs - remember, it also depends on the permissions you allowed in your cellphone to the HA app. if you didn’t allow sufficient permissions this will not work correctly. Last but not least you should also check the app settings in your device (what sensors you are reading - all location sensors should be turned on and allowed for reading/listening in your HA app) than it should work OK.
- Concerning the proximity sensor (distance in km from home) you just need to define the proximity: entry in the config.yaml… look here in the thread there are examples already.
BR
Willy
Thank you. I haven’t created any entry in config.yaml, I just added the waze integration, at 4km distance and updated the card, for my wife iphone 14 say 0km, for my samsung s23 say 1km.
type: custom:button-card
entity: person.filipe_santos
aspect_ratio: 1/1
name: Filipe S.
show_entity_picture: true
show_name: true
state:
- value: not_home
styles:
card:
- background-color: '#404040'
custom_fields:
icon:
- border-color: '#B0B0B0'
- opacity: 30%
styles:
card:
- border-radius: 5%
- padding: 5%
- color: lightgray
- font-size: 11px
grid:
- grid-template-areas: '"icon status" "n network" "battery proximity"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-size: 16px
- justify-self: left
- padding-bottom: 5px
- justify-self: left
custom_fields:
icon:
- width: 120%
- pointer-events: none
- display: grid
- border: 3px inset
- border-color: |
[[[
var state=states['person.filipe_santos'].state;
if (state=='home') {
return `#4CAF50`;
}
if ((state=='away')) {
return `#ff9800`;
}
]]]
- border-radius: 100px
- margin: 0 0 0 0
- justify-self: left
- opacity: 1
status:
- align-self: start
- justify-self: end
- text-transform: capitalize
- color: lightgray
battery:
- justify-self: left
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var l = states['sensor.sm_s918b_battery_level'].state;
if (l < 10) return "#e45649";
if (l < 20) return "#ff9050";
if (l < 30) return "#ffb040";
else return "#44739E"
]]]
network:
- justify-self: end
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var n = states['sensor.sm_s918b_network_type'].state;
if ((n=='cellular')|(n=='wifi')) return "#44739E";
else return "grey"
]]]
proximity:
- justify-self: end
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var p = states['sensor.f_waze_travel_time'].state;
if (p > 1) return "#ffb040";
if (p > 20) return "#ff9050";
if (p > 100) return "#e45649";
else return "#44739E"
]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states['person.filipe_santos'].attributes.entity_picture}"
width="100%">`; ]]]
status: |
[[[ var state = states['person.filipe_santos'].state;
var doma = `<ha-icon icon="mdi:home" style="color: #44739E;`
var produkce = `<ha-icon icon="mdi:city-variant-outline" style="color: deepskyblue;`
var pryc = `<ha-icon icon="mdi:home-export-outline" style="color: lightgray;width: 20px; height: 20px;"></ha-icon><span> Home</span>`
var solid = ` width: 20px; height: 20px;"></ha-icon><span> ${entity.state}</span>`
if (state=='home') {
return doma+solid
}
if ((state=='away')) {
return produkce+solid
} else {
return pryc
}
]]]
battery: |
[[[
var i = states['sensor.sm_s918b_battery_level'].attributes.icon;
var b = states['sensor.sm_s918b_battery_level'].state;
return `<ha-icon icon='${i}' style='width:20px; height: 20px; vertical-align:2px; color: var(--icon-color);'></ha-icon>${b}%`
]]]
network: |
[[[
var i = states['sensor.sm_s918b_network_type'].attributes.icon;
return `<ha-icon icon='${i}' style='width:20px; height: 20px; vertical-align:2px; color: var(--icon-color);'></ha-icon>`
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: var(--icon-color)">
</ha-icon> <span>\<span>${states['sensor.f_waze_travel_time'].state} Km</span></span>`
]]]
her image was not showing but restarting HA did the trick
Hi, the entry in config is very simple.
looks like this:
proximity:
willy: #your person name
zone: home #your home zone name
ignored_zones:
- zone.work #your ignored zone names in rows
devices:
- device_tracker.my_phone #your correct phone entity name for tracking
tolerance: 50 #radius in meters from home zone to reduce HA false away states
unit_of_measurement: km
that’s it…
cheers 
W.
Hi, who would like to help me? So i got a bit of code when searching here on the topic.
It works but i would like to see the battery Icon en the right site of the name.
For the moment it is on the bottom.
Who can explain to me what code i have to add to do this? I have not much experience in yaml.
Greats
type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.vandeneedemaarten
name: Maarten
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.oneplus_a6013_battery_level
icon: >-
{% set bl = states('sensor.oneplus_a6013_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: >-
{% set bl = states('sensor.oneplus_a6013_battery_level') | int
%} {% if bl < 10 %} red {% elif bl < 20 %} red {% elif bl <
30 %} red {% elif bl < 40 %} orange {% elif bl < 50 %}
orange {% elif bl < 60 %} orange {% elif bl < 70 %} green
{% elif bl < 80 %} green {% elif bl < 90 %} green {% elif bl
< 100 %} green {% elif bl == 100 %} green {% else %} grey {%
endif %}
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.silke
name: Silke
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.sm_a415f_battery_level
icon: >-
{% set bl = states('sensor.sm_a415f_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: >-
{% set bl = states('sensor.sm_a415f_battery_level') | int %}
{% if bl < 10 %} red {% elif bl < 20 %} red {% elif bl < 30
%} red {% elif bl < 40 %} orange {% elif bl < 50 %} orange
{% elif bl < 60 %} orange {% elif bl < 70 %} green {% elif
bl < 80 %} green {% elif bl < 90 %} green {% elif bl < 100
%} green {% elif bl == 100 %} green {% else %} grey {% endif
%}
Here’s mine
I have to thank everyone who has added content here as it all helps with understanding the mechanisms behind these cards. Happy to take feedback on these. Still not sure what the effecitiveness is of the network Rx & Tx objects. The Waze integration was by biggest stumbling block due to a typo between state.attr and state_attr when creating the sensor for distance
type: custom:button-card
entity: person.valerie
aspect_ratio: 1/1
name: Valerie
show_entity_picture: true
show_name: false
state:
- value: not_home
styles:
card:
- background-color: '#404040'
custom_fields:
icon:
- border-color: '#B0B0B0'
- opacity: 30%
styles:
card:
- border-radius: 5%
- padding: 5%
- color: lightgray
- font-size: 11px
grid:
- grid-template-areas: '"icon status" "n network" "battery proximity"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-size: 16px
- justify-self: left
- padding-bottom: 5px
- justify-self: left
custom_fields:
icon:
- width: 120%
- pointer-events: none
- display: grid
- border: 3px inset
- border-color: |
[[[
var state=states['person.valerie'].state;
if (state=='home') {
return `#77c66e`;
}
if ((state=='Valerie - Work')) {
return `darkorange`;
}
if ((state=='Mum & Dad H')|(state=='Mum & Dad M')) {
return `red`;
}
]]]
- border-radius: 100px
- margin: 0 0 0 0
- justify-self: left
- opacity: 1
status:
- align-self: start
- justify-self: end
- text-transform: capitalize
- color: lightgray
battery:
- justify-self: left
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var l = states['sensor.sm_s911b_battery_level'].state;
if (l < 10) return "#e45649";
if (l < 20) return "#ff9050";
if (l < 30) return "#ffb040";
else return "#77c66e"
]]]
network:
- justify-self: right
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var n = states['sensor.sm_s911b_network_type'].state;
if ((n=='cellular')|(n=='wifi')) return "#77c66e";
else return "grey"
]]]
proximity:
- justify-self: right
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var p = states['sensor.waze_valerie_to_home'].state;
if (p > 1) return "#ffb040";
if (p > 20) return "#ff9050";
if (p > 100) return "#e45649";
else return "#77c66e"
]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states['person.valerie'].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[ var state = states['person.valerie'].state;
var home = `<ha-icon icon="mdi:home" style="color: #77c66e; width: 20px; height: 20px;"></ha-icon>`
var office = `<ha-icon icon="mdi:office-building" style="color: deepskyblue; width: 20px; height: 20px;"></ha-icon>`
var inlaws = `<ha-icon icon="mdi:home-group" style="color: red; width: 20px; height: 20px;"></ha-icon>`
var away = `<span> Away</span><ha-icon icon="mdi:home-export-outline" style="color: lightgray;width: 20px; height: 20px;"></ha-icon>`
var text = `<span>\<span> ${entity.state}</span></span>`
if (state=='home') {
return text+home
}
if ((state=='Valerie - Work')) {
return text+office
}
if ((state=='Mum & Dad H')|(state=='Mum & Dad M')) {
return text+inlaws
} else {
return away
}
]]]
battery: |
[[[
var i = states['sensor.sm_s911b_battery_level'].attributes.icon;
var b = states['sensor.sm_s911b_battery_level'].state;
return `<ha-icon icon='${i}' style='width:20px; height: 20px; vertical-align:2px; color: var(--icon-color);'></ha-icon>${b}%`
]]]
network: |
[[[
var i = states['sensor.sm_s911b_network_type'].attributes.icon;
var s = parseFloat(states['sensor.sm_s911b_mobile_tx_gb'].state).toFixed(1);
var r = parseFloat(states['sensor.sm_s911b_mobile_rx_gb'].state).toFixed(1);
return `${r} / ${s} GB <ha-icon icon='${i}' style='width:20px; height: 20px; vertical-align:2px; color: var(--icon-color);'></ha-icon> `
]]]
proximity: |
[[[
return `<span>\<span>${states['sensor.waze_valerie_to_home'].state} miles</span></span>
<ha-icon icon="mdi:map-marker-distance" style="width: 20px; height: 20px; color: var(--icon-color)"> </ha-icon>`
]]]
1 Like
Mine is still WIP but looks pretty much similar to yours
1 Like
Looks good, i’ve since removed the Tx / Rx object and replaced it with wireless / cellular info. What does your grid look like to get the two rows at the top? It would be cool to see the card code.
Still working on changing status colors and few bits and bobs but here is my current code:
type: custom:button-card
entity: sensor.status_Person
aspect_ratio: 1/1
name: Person
show_entity_picture: true
show_name: false
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#77c66e'
- value: not_home
styles:
card:
- background-color: '#dedede'
custom_fields:
icon:
- border-color: '#EF4F1A'
- value: Work
styles:
custom_fields:
icon:
- border-color: deepskyblue
styles:
card:
- background-color: rgba(7, 103, 215, 0.24)
- border-radius: 5%
- padding: 5%
- color: white
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- align-self: middle
grid:
- grid-template-areas: >-
"icon status" "icon homeclock" "battery proximity" "wifi traveltime" "sd
sd"
- grid-template-columns: 2fr 1fr
- grid-template-rows: min-content 1fr min-content min-content min-content
name:
- font-size: 15px
- align-self: middle
- justify-self: start
- padding-bottom: 10px
custom_fields:
icon:
- clip-path: circle()
- width: 75%
- pointer-events: none
- display: grid
- border: 3px solid
- border-color: gray
- border-radius: 500px
- margin: 0% 20% 5% 0
- justify-self: end
- opacity: 1
status:
- align-self: start
- justify-self: end
- color: white
homeclock:
- padding: 0.5em 0px
- align-self: start
- justify-self: end
- color: white
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
- color: white
traveltime:
- align-self: middle
- justify-self: end
- color: white
wifi:
- padding: 0.1em 0px
- align-self: middle
- justify-self: start
- color: white
- '--text-wifi-color-sensor': >-
[[[ if (states["sensor.mi_8_wifi_connection"].state == '<not
connected>') return "#aaaaaa"; ]]]
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: |-
[[[ let bl = parseInt(states["sensor.mi_8_battery_level"].state);
if (bl < 10) return "#cc0c16"
else if (bl < 20) return "#e61e28"
else if (bl < 30) return "#e3464e"
else if (bl < 40) return "orange"
else if (bl < 50) return "#f0b93a"
else if (bl < 60) return "#f3f56c"
else if (bl < 70) return "#f2f536"
else if (bl < 80) return "#69f095"
else if (bl < 90) return "#2ee669"
else if (bl < 100) return "#05ad3b"
else if (bl == 100) return "#03872d"
else return white
]]]
- '--text-color-sensor': |-
[[[
if (states["sensor.mi_8_battery_level"].state < 10) return "#EF4F1A"
else return "white"
]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[
if (states['person.Person'].state =='not_home') {
return `<span> Away</span>
<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: '#888888';">
</ha-icon>`;
}
if (states['person.Person'].state =='home') {
return `<span> ${entity.state}</span>
<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: #2ee669;">
</ha-icon>`;
} else {
return `<span> ${entity.state}</span>
<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon>`;
}
]]]
homeclock: |
[[[
if (states['person.Person'].state !='home') {
return `<span> Left ${states['sensor.time_left_home_Person'].state}</span>`;
}
if (states['person.Person'].state =='home') {
return `<span> Arrived ${states['sensor.time_arrived_home_Person'].state}</span>`;
} else {
return
}
]]]
proximity: |
[[[
return `
<span>\<span style="color: var(--text-color-sensor);">${states['proximity.Person'].state} Km</span></span>
<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px;">
</ha-icon>`
]]]
traveltime: |
[[[
let time = parseInt(states['sensor.waze_travel_time_Person'].state);
let dt = time
if (time < 2) dt = 0
return `
<span>\<span style="color: var(--text-color-sensor);">${dt} min</span></span>
<ha-icon
icon="mdi:car-clock"
style="width: 20px; height: 20px;">
</ha-icon>`
]]]
battery: |
[[[
let bl = parseInt(states["sensor.mi_8_battery_level"].state);
let bi = states['sensor.mi_8_battery_level'].attributes.icon;
let bc = "grey"
if (bl < 10) bc = "#cc0c16"
else if (bl < 20) bc = "#e61e28"
else if (bl < 30) bc = "#e3464e"
else if (bl < 40) bc = "#orange"
else if (bl < 50) bc = "#f0b93a"
else if (bl < 60) bc = "#f3f56c"
else if (bl < 70) bc = "#f2f536"
else if (bl < 80) bc = "#69f095"
else if (bl < 90) bc = "#2ee669"
else if (bl < 100) bc = "#05ad3b"
else if (bl == 100) bc = "#03872d"
return `<ha-icon
icon=${bi}
style="width: 20px; height: 20px; ">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.mi_8_battery_level'].state}% battery</span></span>`;
]]]
wifi: |
[[[
if (states['sensor.mi_8_wifi_connection'].state =='<not connected>') {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
</ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">Disconnected</span></span>`;
} else {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: #2ee669;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.mi_8_wifi_connection'].state}</span></span>`;
}
]]]
3 Likes
Can you show me your sensor.waze_valerie_to_home ? I can’t make mine works
Using the Waze Travel Time integration, below are the existing sensors. I’ll add a new one as it cannot figure out how to see the set up of these to show what i did.
Back to the integration, add a new one
This should give you something like this
In my card, i wanted distance & time however the integration only provides time natively so you need to get the distance from the entity so i dropped this into my custom sensors yaml
waze_valerie_to_home:
value_template: '{{ state_attr("sensor.valerie_to_home","distance") | float(0) | round(2) }}'
friendly_name: 'Valerie to Home Distance'
icon_template: mdi:map-marker-distance
It now looks like this
using
type: custom:button-card
entity: person.valerie
aspect_ratio: 1/1
name: Valerie
show_entity_picture: true
show_name: false
state:
- value: not_home
styles:
card:
- background-color: '#404040'
custom_fields:
icon:
- border-color: '#B0B0B0'
- opacity: 30%
styles:
card:
- border-radius: 5%
- padding: 5%
- color: lightgray
- font-size: 11px
grid:
- grid-template-areas: '"icon status" "battery time" "network proximity"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-size: 16px
- justify-self: left
- padding-bottom: 5px
- justify-self: left
custom_fields:
icon:
- width: 120%
- pointer-events: none
- display: grid
- border: 3px inset
- border-color: |
[[[
var state=states['person.valerie'].state;
if (state=='home') {
return `#77c66e`;
}
if ((state=='Valerie - Work')) {
return `darkorange`;
}
if ((state=='Mum & Dad H')|(state=='Mum & Dad M')) {
return `red`;
}
]]]
- border-radius: 100px
- margin: 0 0 0 0
- justify-self: left
- opacity: 1
status:
- align-self: start
- justify-self: end
- text-transform: capitalize
- color: lightgray
battery:
- justify-self: left
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var l = states['sensor.sm_s911b_battery_level'].state;
if (l < 10) return "#e45649";
if (l < 20) return "#ff9050";
if (l < 30) return "#ffb040";
else return "#77c66e"
]]]
network:
- justify-self: left
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var n = states['sensor.sm_s911b_network_type'].state;
if ((n=='cellular')|(n=='wifi')) return "#77c66e";
else return "grey"
]]]
proximity:
- justify-self: right
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var p = states['sensor.waze_valerie_to_home'].state;
if (p > 1) return "#ffb040";
if (p > 20) return "#ff9050";
if (p > 100) return "#e45649";
else return "#77c66e"
]]]
time:
- justify-self: right
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var p = states['sensor.valerie_to_home'].state;
if (p > 10) return "#ffb040";
if (p > 30) return "#ff9050";
if (p > 100) return "#e45649";
else return "#77c66e"
]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states['person.valerie'].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[ var state = states['person.valerie'].state;
var home = `<ha-icon icon="mdi:home" style="color: #77c66e; width: 20px; height: 20px;"></ha-icon>`
var office = `<ha-icon icon="mdi:office-building" style="color: deepskyblue; width: 20px; height: 20px;"></ha-icon>`
var inlaws = `<ha-icon icon="mdi:home-group" style="color: red; width: 20px; height: 20px;"></ha-icon>`
var away = `<span> Awayč</span><ha-icon icon="mdi:home-export-outline" style="color: lightgray;width: 20px; height: 20px;"></ha-icon>`
var text = `<span>\<span> ${entity.state}</span></span>`
if (state=='home') {
return text+home
}
if ((state=='Valerie - Work')) {
return text+office
}
if ((state=='Mum & Dad H')|(state=='Mum & Dad M')) {
return text+inlaws
} else {
return away
}
]]]
battery: |
[[[
var i = states['sensor.sm_s911b_battery_level'].attributes.icon;
var b = states['sensor.sm_s911b_battery_level'].state;
return `<ha-icon icon='${i}' style='width:20px; height: 20px; vertical-align:2px; color: var(--icon-color);'></ha-icon>${b}%`
]]]
network: |
[[[
if (states['sensor.sm_s911b_wifi_connection'].state =='<not connected>') {
return `<ha-icon icon="mdi:wifi"
style="width: 20px; height: 20px;">
</ha-icon>
<span>Off</span>`;
} else {
return `<ha-icon icon="mdi:wifi"
style="width: 20px; height: 20px; color: var(--icon-color);">
</ha-icon> ${states['sensor.sm_s911b_wifi_connection'].state}</span></span>
`;
}
]]]
proximity: |
[[[
var state=states['person.valerie'].state;
if (state=='home') {
return `<span>0 miles</span>
<ha-icon icon="mdi:map-marker-distance" style="width: 20px; height: 20px; color: var(--icon-color)">
</ha-icon> `;
} else {
return `<span>\<span>${states['sensor.waze_valerie_to_home'].state} miles</span></span>
<ha-icon icon="mdi:map-marker-distance" style="width: 20px; height: 20px; color: var(--icon-color)">
</ha-icon> `;
}
]]]
time: |
[[[
var state=states['person.valerie'].state;
if (state=='home') {
return `<span>0 minutes</span>
<ha-icon icon="mdi:car-clock" style="width: 20px; height: 20px; color: var(--icon-color)">
</ha-icon> `;
} else {
return `<span>\<span>${states['sensor.valerie_to_home'].state} minutes</span></span>
<ha-icon icon="mdi:car-clock" style="width: 20px; height: 20px; color: var(--icon-color)">
</ha-icon> `;
}
]]]
I plan to make the distance & time dynamic based on location and TOD but for now, i’ll leave it to ensure it’s all working…the examples of everyone else’s cards really opens up ideas.
2 Likes
thank you! I did not know I could use person.xxx and zone.home in waze… working fine now.
Do you know how can I long click in that distance and open google maps to drive?
I like yours . Could you share your code for it if it is possible?
Sure can, Mine is a pop up card that shows location when pressed.
card: null
image: /local/empty_frame.png
elements:
- style:
top: 49%
left: 50%
width: 70%
type: image
entity: binary_sensor.dad_presence
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |
--popup-background-color: black;
--popup-border-color: transparent;
title: Dad
content:
type: custom:mod-card
style: |
ha-card {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.dad_geocoded_location
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: horizontal-stack
cards:
- type: map
hours_to_show: 24
entities:
- entity: device_tracker.dad_gps
- entity: device_tracker.ethans_iphone
- entity: device_tracker.ella_iphone
- entity: zone.home
- entity: zone.park
- entity: zone.dads_work
- entity: zone.nic_s_house
- entity: zone.kids_school
- entity: zone.e_work
- entity: zone.westfield
- entity: zone.ethan_work
aspect_ratio: '1'
use_entity_picture: true
state_image:
'on': /local/shayno.png
'off': /local/shaynoaway.png
- style:
top: 11%
left: 12%
type: state-icon
entity: sensor.dad_wifi
- style:
top: 90%
left: 10%
type: state-icon
entity: device_tracker.dad_bt
- style:
top: 11%
left: 87%
type: state-label
entity: sensor.dad_battery
- style:
top: 93%
left: 50%
type: state-label
entity: device_tracker.dad_gps
type: picture-elements