I want to show next to my person how long this person is in the current zone. How can I do that? I tried to search for it, but can’t find anything useful.
Hi, I have one more issue. Your code is working fine 99% of occasion to show the “zone” in Friendly Name. But…if the zone contains more than 1 word, such as “San Lunas” or “San Diego”. The return value is “null”. I think the code is probably not being able to insert/replace the single space right after the word “San” with an underscore “". The ideal outcome of the code would be “zone.san_lunas”, so the code could translate the defined zone name into Friendly Name. Now it probably becomes
“zone.san lunas” instead, therefore, it returns to a “null” value. Is it possible to modify the code that if there’s “space” or more than 1 word in states(person), then insert "” in between the 2 words?
Thank you
can you test this @rog889
{% if is_states(entity,“home”) -%}
Home
{% elif is_state(entity, “not_home”) %}
Away
{%- else -%}
{{states(entity)}}
{%- endif %}
It does work now! Thank you! BTW, I had to do the same thing for the badge icon and badge color. Now, it’s working with multiple words in a zone! Thank you very much AGAIN!!!
Here’s my person cards.
The code:
type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: person.XxX
aspect_ratio: 1/1
name: XxX
show_entity_picture: true
show_name: true
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#77c66e'
- icon-color: green
- value: not_home
styles:
card: null
custom_fields:
icon:
- border-color: '#EF4F1A'
- value: work
styles:
custom_fields:
icon:
- border-color: orange
- value: lyon
styles:
custom_fields:
icon:
- border-color: blue
- value: lamures
styles:
custom_fields:
icon:
- border-color: blue
styles:
card:
- border-radius: 5%
- padding: 5%
- color: gray
- font-size: 9px
- 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 alarm" "sd sd"'
- grid-template-columns: 2fr
- 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
- color: |
[[[
if (states['person.XxX'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.XxX'].state =='home') {
return "#77c66e";
}
if (states['person.XxX'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
- '--text-wifi-color-sensor': |-
[[[
if (states['person.XxX'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.XxX'].state =='home') {
return "#77c66e";
}
if (states['person.XxX'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
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: |
[[[
if (states['person.XxX'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.XxX'].state =='home') {
return "#77c66e";
}
if (states['person.XxX'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
- '--text-wifi-color-sensor': |-
[[[
if (states['person.XxX'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.XxX'].state =='home') {
return "#77c66e";
}
if (states['person.XxX'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
- color: |
[[[
if (states['person.XxX'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.XxX'].state =='home') {
return "#77c66e";
}
if (states['person.XxX'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
- '--text-wifi-color-sensor': |-
[[[
if (states['person.XxX'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.XxX'].state =='home') {
return "#77c66e";
}
if (states['person.XxX'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
wifi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: |
[[[
if (states['person.XxX'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.XxX'].state =='home') {
return "#77c66e";
}
if (states['person.XxX'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
- '--text-wifi-color-sensor': |-
[[[
if (states['person.XxX'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.XxX'].state =='home') {
return "#77c66e";
}
if (states['person.XxX'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: |
[[[
if (states['person.XxX'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.XxX'].state =='home') {
return "#77c66e";
}
if (states['person.XxX'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
- '--text-color-sensor': |-
[[[
if (states['person.XxX'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.XxX'].state =='home') {
return "#77c66e";
}
if (states['person.XxX'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
alarm:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
- color: |
[[[
if (states['person.XxX'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.XxX'].state =='home') {
return "#77c66e";
}
if (states['person.XxX'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
- '--text-color-sensor': |-
[[[
if (states['person.XxX'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.XxX'].state =='home') {
return "#77c66e";
}
if (states['person.XxX'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
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: '#EF4F1A';">
</ha-icon><span> Away</span>`;
}
if (states['person.XxX'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: #77c66e;">
</ha-icon><span> ${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> ${entity.state}</span>`;
}
else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: blue;">
</ha-icon><span> ${entity.state}</span>`;
}
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['proximity.XxX'].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: var(--text-color-sensor);">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</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: var(--text-wifi-color-sensor);">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_wifi_connection'].state}</span></span>`;
}
]]]
alarm: |
[[[
return `<ha-icon
icon="mdi:alarm"
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.oneplus_next_alarm'].state}</span></span>`
]]]
- type: custom:button-card
entity: person.YyY
aspect_ratio: 1/1
name: YyY
show_entity_picture: true
show_name: true
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#77c66e'
- icon-color: green
- value: not_home
styles:
card: null
custom_fields:
icon:
- border-color: '#EF4F1A'
- value: work
styles:
custom_fields:
icon:
- border-color: orange
- value: lyon
styles:
custom_fields:
icon:
- border-color: blue
- value: lamures
styles:
custom_fields:
icon:
- border-color: blue
styles:
card:
- border-radius: 5%
- padding: 5%
- color: gray
- font-size: 9px
- 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 alarm" "sd sd"'
- grid-template-columns: 2fr
- 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
- color: |
[[[
if (states['person.YyY'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.YyY'].state =='home') {
return "#77c66e";
}
if (states['person.YyY'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
custom_fields:
icon:
- clip-path: circle()
- width: 40%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: gray
- border-radius: 500px
- margin: 0 +10% 0 0
- justify-self: start
- opacity: 1
status:
- align-self: start
- justify-self: end
- color: |
[[[
if (states['person.YyY'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.YyY'].state =='home') {
return "#77c66e";
}
if (states['person.YyY'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
- '--text-wifi-color-sensor': |-
[[[
if (states['person.YyY'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.YyY'].state =='home') {
return "#77c66e";
}
if (states['person.YyY'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
- color: |
[[[
if (states['person.YyY'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.YyY'].state =='home') {
return "#77c66e";
}
if (states['person.YyY'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
- '--text-wifi-color-sensor': |-
[[[
if (states['person.YyY'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.YyY'].state =='home') {
return "#77c66e";
}
if (states['person.YyY'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
wifi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: |
[[[
if (states['person.YyY'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.YyY'].state =='home') {
return "#77c66e";
}
if (states['person.YyY'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
- '--text-wifi-color-sensor': |-
[[[
if (states['person.YyY'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.YyY'].state =='home') {
return "#77c66e";
}
if (states['person.YyY'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: |
[[[
if (states['person.YyY'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.YyY'].state =='home') {
return "#77c66e";
}
if (states['person.YyY'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
- '--text-color-sensor': |-
[[[
if (states['person.YyY'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.YyY'].state =='home') {
return "#77c66e";
}
if (states['person.YyY'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
alarm:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
- color: |
[[[
if (states['person.YyY'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.YyY'].state =='home') {
return "#77c66e";
}
if (states['person.YyY'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
- '--text-color-sensor': |-
[[[
if (states['person.YyY'].state =='not_home') {
return "#EF4F1A";
}
if (states['person.YyY'].state =='home') {
return "#77c66e";
}
if (states['person.f'].state =='work') {
return "orange";
}
else {
return "blue";
}
]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}"
width="100%">`; ]]]
status: |
[[[
if (states['person.YyY'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: '#EF4F1A';">
</ha-icon><span> Away</span>`;
}
if (states['person.YyY'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: #77c66e;">
</ha-icon><span> ${entity.state}</span>`;
}
if (states['person.YyY'].state =='work') {
return `<ha-icon
icon="mdi:briefcase"
style="width: 20px; height: 20px; color: orange;">
</ha-icon><span> ${entity.state}</span>`;
}
else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: blue;">
</ha-icon><span> ${entity.state}</span>`;
}
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['proximity.YyY'].state} Kms</span></span>`
]]]
battery: |
[[[
if (states['sensor.iphone_de_YyY_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_de_YyY_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_de_YyY_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.iphone_de_YyY_ssid'].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: var(--text-wifi-color-sensor);">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_de_YyY_ssid'].state}</span></span>`;
}
]]]
Would like change alarm display from :2024-06-14T06:15:00+00:00 to Fri Jun 14 08:15:00. Don’t know how.
Add last change for status.
Personal avatar and icons.
Just curious has anyone had this issue with their distance displaying multiple characters.
Code
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 10px; height: 10px; color: #888888;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.home_rich_distance'].state} Mi</span></span>`
Same here when I’m not at home.
you can set it to any precision you want using the native button-card helpers functionality
might I suggest you check the endless repeating code inside your card, and reorganize it so you have eg only 1 color variable and use that for all fields? it would be much easier to read and maintain.
there are other repeated bits in the styles but the template seems the first big win 
Given the fact you color your whole card based on the same presence condition, just set it to the top level and be done with it?
I’m ok with you, I’m just a newbie to code. 
. Which part I need to delete and where to put this code?
just check the section I quoted.
That is repeated for each of the button elements stylings.
You can set the color: element on the card itself, and it will colorize all elements inside the card (might not do that for the icon, not sure anymore, that depends on the color type you set in the main card options)
just try it and you’ll see it happening when doing
custom: button-card
styles:
card:
- color: |
[[[
if (entity.state == 'not_home') return "#EF4F1A";
if (entity.state == 'home') return "#77c66e";
if (entity.state == 'work') return "orange";
return "blue";
]]]
note I refer to entity.state, so you point need to use that states['person.XxX'].state at all in your templates. It’s the main entity of the card.
the template can be made a bit smaller still, but this would be a good start.
So like that :
type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: person.XxX
aspect_ratio: 1/1
name: XxX
show_entity_picture: true
show_name: true
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#77c66e'
- icon-color: green
- value: not_home
styles:
card: null
custom_fields:
icon:
- border-color: '#EF4F1A'
- value: work
styles:
custom_fields:
icon:
- border-color: orange
- value: lyon
styles:
custom_fields:
icon:
- border-color: blue
- value: lamures
styles:
custom_fields:
icon:
- border-color: blue
styles:
card:
- border-radius: 5%
- padding: 5%
- color: gray
- font-size: 9px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- align-self: middle
- color: |
[[[
if (entity.state == 'not_home') return "#EF4F1A";
if (entity.state == 'home') return "#77c66e";
if (entity.state == 'work') return "orange";
return "blue";
]]]
grid:
- grid-template-areas: '"icon status" "n n" "battery proximity" "wifi alarm" "sd sd"'
- grid-template-columns: 2fr
- grid-template-rows: 2fr 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
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
- numeric_precision: 2
wifi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
alarm:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
calendar:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
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: '#EF4F1A';">
</ha-icon><span> Away</span>`;
}
if (states['person.XxX'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: #77c66e;">
</ha-icon><span> ${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> ${entity.state}</span>`;
}
else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: blue;">
</ha-icon><span> ${entity.state}</span>`;
}
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['proximity.XxX'].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: var(--text-color-sensor);">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</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: var(--text-wifi-color-sensor);">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_wifi_connection'].state}</span></span>`;
}
]]]
alarm: |
[[[
return `<ha-icon
icon="mdi:alarm"
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.oneplus_next_alarm'].state}</span></span>`
]]]
did you try it?
btw, are you sure this is needed?
Yes, it does change color depending on the state of the person entity. Both the text and the icon.
Thanks.
1 Like
sure, np.
now, given the fact you use the same code for all buttons, you could drop all of that generic yaml in a template and only use the entity in the main button config.
O and btw, you are still. using those colors in the custom fields html code, which seems no longer required. Why not just set most of those options directly in the styles section and only use specifics inside the html for the custom fields
battery: |
[[[
if (states['sensor.oneplus_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
}
]]]
the only thing depending on the state of that particular entity is the icon…so add most of that to the
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
and only change the icon based on the template
etc
etc
I didnt test it, but I believe you could at least do this:
Yaml
- type: custom:button-card
entity: person.XxX
aspect_ratio: 1/1
name: XxX
show_entity_picture: true
show_name: true
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#77c66e'
- icon-color: green
- value: not_home
styles:
card: null
custom_fields:
icon:
- border-color: '#EF4F1A'
- value: work
styles:
custom_fields:
icon:
- border-color: orange
- value: lyon
styles:
custom_fields:
icon:
- border-color: blue
- value: lamures
styles:
custom_fields:
icon:
- border-color: blue
styles:
card:
- border-radius: 5%
- padding: 5%
- color: gray
- font-size: 9px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- align-self: middle
- color: |
[[[
if (entity.state == 'not_home') return "#EF4F1A";
if (entity.state == 'home') return "#77c66e";
if (entity.state == 'work') return "orange";
return "blue";
]]]
grid:
- grid-template-areas: '"icon status" "n n" "battery proximity" "wifi alarm" "sd sd"'
- grid-template-columns: 2fr
- grid-template-rows: 2fr 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
- width: 20px
- height: 20px
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
- numeric_precision: 2
- width: 20px
- height: 20px
wifi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- width: 20px
- height: 20px
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- width: 20px
- height: 20px
alarm:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
- width: 20px
- height: 20px
calendar:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}"
width="100%">`; ]]]
status: |
[[[
if (entity.state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline" style="color: '#EF4F1A';">
</ha-icon><span> Away</span>`;
}
if (entity.state =='home') {
return `<ha-icon icon="mdi:home" style="color: #77c66e;">
</ha-icon><span> ${entity.state} </span>`;
}
if (entity.state =='work') {
return `<ha-icon
icon="mdi:briefcase" style="color: orange;">
</ha-icon><span> ${entity.state}</span>`;
}
else {
return `<ha-icon
icon="mdi:map-marker-radius" style="color: blue;">
</ha-icon><span> ${entity.state}</span>`;
}
]]]
proximity: |
[[[
return `<ha-icon icon="mdi:map-marker-distance"
</ha-icon> <span>\<span>${states['proximity.XxX'].state} Kms</span></span>`
]]]
battery: |
[[[
if (states['sensor.oneplus_battery_state'].state =='charging') {
return `<ha-icon icon="mdi:battery-charging">
</ha-icon> <span><span>${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon icon="mdi:battery" >
</ha-icon> <span><span >${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" >
</ha-icon> <span><span >Disconnected</span></span>`;
} else {
return `<ha-icon icon="mdi:wifi" >
</ha-icon> <span><span >${states['sensor.oneplus_wifi_connection'].state}</span></span>`;
}
]]]
alarm: |
[[[
return `<ha-icon icon="mdi:alarm">
</ha-icon> <span>\<span >${states['sensor.oneplus_next_alarm'].state}</span></span>`
]]]
nope… that was wrong, its been some time I made those larger buttons with all custom fields in html… sorry. We need the dimension in the custom fields, because there’s more than only then icon…
This should work
type: custom:button-card
entity: person.marijn
aspect_ratio: 1/1
name: Marijn
show_entity_picture: true
show_name: true
hold_action:
action: none
styles:
card:
- border-radius: 5%
- padding: 5%
- color: gray
- font-size: 9px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- align-self: middle
- color: |
[[[
if (entity.state == 'not_home') return "#EF4F1A";
if (entity.state == 'home') return "#77c66e";
if (entity.state == 'work') return "orange";
return "blue";
]]]
grid:
- grid-template-areas: '"icon status" "n n" "battery proximity" "wifi alarm"'
- grid-template-columns: 2fr
- grid-template-rows: 2fr 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: |
[[[
if (entity.state == 'not_home') return "#EF4F1A";
if (entity.state == 'home') return "#77c66e";
if (entity.state == 'work') return "orange";
return "blue";
]]]
- border-radius: 500px
- margin: 0 +10% 0 0
- justify-self: end
- opacity: 1
status:
- align-self: start
- justify-self: end
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
- numeric_precision: 2
wifi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
alarm:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
calendar:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}"
width="100%">`; ]]]
status: |
[[[
if (entity.state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline" style="color: '#EF4F1A';">
</ha-icon><span> Away</span>`;
}
if (entity.state =='home') {
return `<ha-icon icon="mdi:home" style="width: 20px; height: 20px;color: #77c66e;">
</ha-icon><span> ${entity.state} </span>`;
}
if (entity.state =='work') {
return `<ha-icon
icon="mdi:briefcase" style="width: 20px; height: 20px color: orange;">
</ha-icon><span> ${entity.state}</span>`;
}
else {
return `<ha-icon
icon="mdi:map-marker-radius" style="width: 20px; height: 20px color: blue;">
</ha-icon><span> ${entity.state}</span>`;
}
]]]
proximity: |
[[[
return `<ha-icon icon="mdi:map-marker-distance" style="width: 20px; height: 20px">
</ha-icon> Distance <span><span>${states['sensor.thuis_marijn_distance'].state} Kms</span></span>`
]]]
battery: |
[[[
if (states['sensor.marijn_battery_state'].state =='charging') {
return `<ha-icon icon="mdi:battery-charging" style="width: 20px; height: 20px">
</ha-icon> <span><span>${states['sensor.marijn_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon icon="mdi:battery" style="width: 20px; height: 20px">
</ha-icon> <span><span >${states['sensor.marijn_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.marijn_connection_type'].state =='not connected') {
return `<ha-icon icon="mdi:wifi" style="width: 20px; height: 20px">
</ha-icon> <span><span >Disconnected</span></span>`;
} else {
return `<ha-icon icon="mdi:wifi" style="width: 20px; height: 20px">
</ha-icon> <span><span >${states['sensor.marijn_connection_type'].state}</span></span>`;
}
]]]
alarm: |
[[[
return `<ha-icon icon="mdi:alarm" style="width: 20px; height: 20px">
</ha-icon> <span><span >${states['sensor.next_alarm'].state}</span></span>`
]]]
Note: if you still want to colorize the custom fields, you have to get those colors back in there, per custom field
I did ofc change several entity_id’s so watch out for those, and also, you apparently didn’t migrate your Proximity integration yet, as that entity you use there is legacy now… just remember to change it in the near future
I’d take out the words Distance and Battery from those fields, the icon says it all, and it brings more balance to the card
also, consider using the
battery: |
[[[
if (states['sensor.marijn_battery_state'].state =='charging') {
return `<ha-icon icon="mdi:battery-charging" style="width: 20px; height: 20px">
</ha-icon> <span><span>${helpers.localize(states['sensor.marijn_battery_level'])} </span></span>`;
} else {
return `<ha-icon icon="mdi:battery" style="width: 20px; height: 20px">
</ha-icon> <span><span >${helpers.localize(states['sensor.marijn_battery_level'])}</span></span>`;
}
]]]
helpers.localize() functionality, which takes care of the units for you, and localization of states to your language
or compact a bit more:
battery: |
[[[ var mdi = states['sensor.marijn_battery_state'].state =='Charging'
? "mdi:battery-charging" : "mdi:battery";
return `<ha-icon icon= ${mdi} style="width: 20px; height: 20px">
</ha-icon><span>${helpers.localize(states['sensor.marijn_battery_level'])}</span>`;
]]]
wifi: |
[[[ var id = states['sensor.marijn_connection_type'];
return `<ha-icon icon=${id.attributes.icon} style="width: 20px; height: 20px">
</ha-icon> <span >${helpers.localize(id)}</span>`;
]]]
you see the options are endless have fun !
A bit more compressed
type: custom:button-card
entity: person.marijn
aspect_ratio: 1/1
name: Marijn
show_entity_picture: true
show_name: true
hold_action:
action: none
styles:
card:
- border-radius: 5%
- padding: 5%
- font-size: 9px
- color: |
[[[ if (entity.state == 'not_home') return '#EF4F1A';
if (entity.state == 'home') return '#77c66e';
if (entity.state == 'work') return 'orange';
return 'blue'; ]]]
grid:
- grid-template-areas: '"picture status" "n n" "battery proximity" "wifi alarm"'
- grid-template-columns: 2fr
- grid-template-rows: 2fr min-content min-content min-content min-content
name:
- font-size: 15px
- align-self: middle
- justify-self: start
- padding-bottom: 10px
- font-weight: bold
custom_fields:
picture:
- width: 80%
- display: grid
- border: 5px solid
- border-color: |
[[[
if (entity.state == 'not_home') return '#EF4F1A';
if (entity.state == 'home') return '#77c66e';
if (entity.state == 'work') return 'orange';
return "blue";
]]]
- border-radius: 100%
- margin: 0 +10% 0 0
- justify-self: end
- opacity: 1
status:
- align-self: start
- justify-self: end
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
- numeric_precision: 2
wifi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
alarm:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
# not used?
# calendar:
# - padding: 0.5em 0px
# - align-self: middle
# - justify-self: end
custom_fields:
picture: >
[[[ return `<img src=${states[entity.entity_id].attributes.entity_picture}
width="100%">`; ]]]
status: |
[[[ if (entity.state =='not_home') {
return `<ha-icon icon=mdi:home-export-outline style="color:'#EF4F1A';"></ha-icon>
<span> ${helpers.localize(entity)}</span>`;
}
if (entity.state =='home') {
return `<ha-icon icon=mdi:home style="width:20px;color: #77c66e;"></ha-icon>
<span> ${helpers.localize(entity)} </span>`;
}
if (entity.state =='work') {
return `<ha-icon icon=mdi:briefcase style="width:20px;color:orange;"></ha-icon>
<span> ${helpers.localize(entity)}</span>`;
}
else {
return `<ha-icon icon=mdi:map-marker-radius style="width:20px;color:blue;"></ha-icon>
<span> ${helpers.localize(entity)}</span>`;
}
]]]
proximity: |
[[[ return `<ha-icon icon=mdi:map-marker-distance style="width:20px;"></ha-icon>
<span>${helpers.localize(states['sensor.thuis_marijn_distance'])}</span>`; ]]]
battery: |
[[[ var mdi = states['sensor.marijn_battery_state'].state =='Charging'
? 'mdi:battery-charging' : 'mdi:battery';
return `<ha-icon icon= ${mdi} style="width:20px;"></ha-icon>
<span>${helpers.localize(states['sensor.marijn_battery_level'])}</span>`; ]]]
wifi: |
[[[ var id = states['sensor.marijn_connection_type'];
return `<ha-icon icon=${id.attributes.icon} style="width:20px;"></ha-icon>
<span >${helpers.localize(id)}</span>`; ]]]
alarm: |
[[[ return `<ha-icon icon=mdi:alarm style="width:20px;"></ha-icon>
<span >${states['sensor.next_alarm'].state}</span>`; ]]]
But honestly: if you ask me, there is too much info for 1 button card.
having 4 of these inside a grid makes the card go way out of proportion, and make all text undreadable.
I believe 2 really is the max for a stack/grid. And, then the text is too small still…
compare:
to
ofc all colors have a meaning, and certain states are only shown when relevant
1 Like
Here’s mine. Pretty basic, but has some cool features. Clicking the location status pops up a map card with actual location. Clicking on the picture initiates a critical notification to find my phone. Pretty happy with the outcome:
6 Likes
Can you share your code to make the picture clickable?
I tried using chatgpt to make a button that says find phone. It makes the entire card tap action to find phone, which i do not want
Sure, I’ll grab it and post back here when I get home. My card is using a picture elements card. Essentially I created a “helper” that is a toggle, and then an automation that whenever that toggle is switched on, it will send the notification to the appropriate phone. Then in the card, I placed a “state-icon” element behind the picture and made the icon transparent. So even though you are clicking the picture, it’s the “invisible” icon that is triggering the action. Hope that makes sense.