Having troubles getting the battery icon centered like the home any help?
Also wondering if it’s possible to add a phone charging state so the battery icon changes when charging to a battery with the lightning bolt.
then im hoping to set up icloud3 for tracking so i need the home at the top and the distance and time at the bottom. currently confused when the icloud3 guide says install waze route calculator is that different then waze travel time?
type: custom:button-card
entity: person.eric
aspect_ratio: 3/1
name: Eric
show_entity_picture: true
show_name: false
double_tap_action:
action: none
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: 13%
- color: lightgray
- font-size: 11px
grid:
- grid-template-areas: '"icon status" "battery proximity"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content
name:
- font-size: 16px
- justify-self: left
- padding-bottom: 5px
- justify-self: left
custom_fields:
icon:
- width: 38%
- pointer-events: none
- display: grid
- border: 10px inset
- padding-right: 0px
- border-color: |
[[[
var stav=states['person.eric'].state;
if (stav=='home') {
return `#77c66e`;
}
if ((stav=='away')|(stav=='yyy')) {
return `darkorange`;
}
if ((stav=='work')|(stav=='yyy')|(stav=='sss')|(stav=='ddd')) {
return `deepskyblue`;
}
]]]
- border-radius: 250px
- margin: 0 0 0 75%
- justify-self: left
- opacity: 1
status:
- justify-self: end
- text-transform: capitalize
- color: lightgray
battery:
- justify-self: start
- font-size: 11px
- color: lightgray
- '--icon-color': |
[[[ var l = states['sensor.iphone_battery_level'].state;
if (l < 10) return "#e45649";
if (l < 49) return "#f2db07";
if (l < 50) return "#25fc12";
else return "#77c66e"
]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states['person.eric'].attributes.entity_picture}" width="100%">`; ]]]
status: |
[[[ var stav = states['person.eric'].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=='work')|(stav=='xxx')|(stav=='zzz')) {
return produkce+solid
}
if ((stav=='yyy')|(stav=='sss')) {
return volno+solid
}
if ((stav=='fff')|(stav=='eee')) {
return nasi+solid
} else {
return pryc
}
]]]
battery: |
[[[
var i = states['sensor.iphone_battery_level'].attributes.icon;
var b = states['sensor.iphone_battery_level'].state;
return `<ha-icon icon='${i}' style='width:20px; height: 20px; vertical-align:2px; color: var(--icon-color);'></ha-icon>${b}%`
]]]
looks awesome i tried to make this into a card and then was going to add my person card picture posted above your post but i keep getting this error kinda confused…
it happens everytime i copy and paste your example it tells me indentations are off even now with the change you did. ill have to sit there and figure out how to space it properly thank you
They are actually our emojis from ios/iMessage. I can’t remember how I copied them but was able to somewhere, I think perhaps in Contacts and holding down the image!?!?
I know… it’s been mentioned above. However i dont have an iphone, so i cant do that. I’ve also looked extensively on the internet and couldn’t find any satisfactory ones. I was hoping since you’ve saved it in the media section of home assistant, i might be able to get the jpeg? png? files from you, or from someone…
Hi, the photo is automaic from the entity “person”, you should have assigned persons first (you as admin probably) and all other family members as persons in the “settings / persons” options…
(as well all zones should be defined first at “map/zones” settings).
Hi, I see you are using the “proximity” sensor… did you set it in config yaml? (if not, there might be a problem that your HA doesn’t know it and you should set it first…
in the config.yaml put something like this.:
...
proximity:
aaa: #the name of each person - define every person under its name (from the persons settings) here
zone: home
ignored_zones:
- zone.xxx # the name of a zone you don't want to be measured (e.g. "work")
devices:
- device_tracker.yyy #entity of the person's device tracker
tolerance: 50 # this is in meters so the GPS location deviations will be ignored till 50m
unit_of_measurement: km
...
