ive tried multiple solutions from a search on here but nothing seems to be working
i am using the ‘proximity’ integration and i have set it to 2 decimal places in the integration but on my person card it takes up the whole thing with 7+ digits as soon as i leave the ‘home’ zone
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 30px; height: 30px; color: var(--icon-color)">
</ha-icon> <span>\<span>${states['sensor.home_abbie_distance'].state} Miles </span></span>`
]]]
i have tried doing ${states[‘sensor.home_abbie_distance’].state| round(2)}
ive tried , rounded=true) , which both error as round/rounded is not defined
ive tried other things too over the last few days but i cant rememeber exactly what i have done and what i havnt now
ive tried using var and putting the state into a float and use.tofixed(2)
var i = states['mdi:map-marker-distance'];
var r = parseFloat(states['sensor.home_abbie_distance'].state).toFixed(2);
return `<ha-icon icon='${i}' style="width: 20px; height: 20px; color: var(--icon-color);'></ha-icon> ${r}`
which does not error but it also does not show anything, the output disappears completely
i have no idea what i am doing, wrong or right, im not a developer or have any experiance with code, i just copied and pasted and added my own entities
can someone help, what i am doing wrong?
added full code below incase it helps
type: custom:button-card
entity: person.abbie
aspect_ratio: 1/1
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: 25px
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: 20px
- justify-self: left
- padding-bottom: 0px
- justify-self: left
custom_fields:
icon:
- width: 120%
- pointer-events: none
- display: grid
- border: 10px inset
- border-color: |
[[[
var stav=states['person.abbie'].state;
if (stav=='home') {
return `#77c66e`;
}
if ((stav=='abbie_s_mums')|(stav=='mattwork')) {
return `darkorange`;
}
if ((stav=='away')|(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: 25px
- color: lightgray
- '--icon-color': |
[[[ var l = states['sensor.abbie_s_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.abbie_s_phone_network_type'].state;
if ((n=='cellular')|(n=='wifi')) return "#77c66e";
else return "grey"
]]]
proximity:
- justify-self: end
- font-size: 15px
- color: lightgray
- '--icon-color': |
[[[ var p = states['sensor.home_abbie_distance'].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.abbie'].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[ var stav = states['person.abbie'].state;
var doma = `<ha-icon icon="mdi:home-heart" style="color: #77c66e;`
var produkce = `<ha-icon icon="mdi:briefcase-outline" style="color: deepskyblue;`
var volno = `<ha-icon icon="mdi:home-export-outline" 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> Away </span>`
var solid = ` width: 45px; height: 45px;"></ha-icon><span> </span>`
if (stav=='home') {
return doma+solid
}
if ((stav=='home_2')|(stav=='mattwork')|(stav=='zzz')) {
return produkce+solid
}
if ((stav=='away')|(stav=='sss')) {
return volno+solid
}
if ((stav=='yyy')|(stav=='uuu')) {
return nasi+solid
} else {
return pryc
}
]]]
battery: |
[[[
var i = states['sensor.abbie_s_phone_battery_level'].attributes.icon;
var b = states['sensor.abbie_s_phone_battery_level'].state;
return `<ha-icon icon='${i}' style='width:30px; height: 30px; vertical-align:2px; color: var(--icon-color);'></ha-icon>${b}%`
]]]
network: |
[[[
var i = states['sensor.abbie_s_phone_network_type'].attributes.icon;
return `<ha-icon icon='${i}' style='width:40px; height: 40px; vertical-align:2px; padding-right: 0px ;color: var(--icon-color);'></ha-icon>`]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 30px; height: 30px; color: var(--icon-color)">
</ha-icon> <span>\<span>${states['sensor.home_abbie_distance'].state} Miles </span></span>`
]]]
