Hallo, finally after two nights of playing with it, it’s starting to look like I wanted, thx for this nice card and many useful hints here in the thread. I am only struggling with the “find my phone” function, using the double-tap-action as remotly fired alarm (what is working nicely on Smasung A22 and xiaomi Lite, but not so good on Honor mobiles for my kids) strange is, that without the double-tap action (called as service previously) it used to work fine on all devices, but now when inplemented as double-tap on the face it stopped working for Honor mobiles. Maybe I had to misspell st.
Below is the pic of final layout and some sample of the code. If someone has solved similar problem I will be glad for sharing of his/her solution 
Thanks.
Willy
code sample:
type: custom:button-card
entity: person.xxx
aspect_ratio: 1/1
name: Willy
show_entity_picture: true
show_name: true
double_tap_action:
action: call-service
confirmation:
text: Alarm will sound, OK?
service: script.find_phone_xxx
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 stav=states['person.xxx'].state;
if (stav=='home') {
return `#77c66e`;
}
if ((stav=='xxx')|(stav=='yyy')) {
return `darkorange`;
}
if ((stav=='zzz')|(stav=='yyy')|(stav=='sss')|(stav=='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.xxx_phone_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.xxx_phone_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['proximity.xxxx'].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.xxx'].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[ var stav = states['person.xxx'].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 (stav=='home') {
return doma+solid
}
if ((stav=='xxx')|(stav=='yyy')|(stav=='zzz')) {
return produkce+solid
}
if ((stav=='ddd')|(stav=='sss')) {
return volno+solid
}
if ((stav=='fff')|(stav=='eee')) {
return nasi+solid
} else {
return pryc
}
]]]
battery: |
[[[
var i = states['sensor.xxx_phone_battery_level'].attributes.icon;
var b = states['sensor.xxx_phone_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.xxx_phone_network_type'].attributes.icon;
var s = parseFloat(states['sensor.xxx_phone_mobile_tx_gb'].state).toFixed(1);
var r = parseFloat(states['sensor.xxx_phone_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['proximity.xxx'].state} Km</span></span>`
]]]
just don’t forget to replace “xxx”, “yyy”, “zzz”, “sss”, “ddd”, “fff”, “eee” (I hope I didn’t forget somewhere else the original entity names…) with correct entites.
Cheers
edit: I got it working finally as intended !! (a typo of course in the script…) so working for Samsung and Honor phones without problems. I prefer a double-tap action to fire the script, since long-press doesn’t work well on iPad (sometimes doesn’t fire…)