As you can see from the attached screenshot, I am attempting to create a person location bar consisting of 3 picture entity cards which display badges based on their location and, if away from home, the time of how far they are from home.
Everything is working how it should, apart from 3 2 issues.
- The size of the images is all over the place. What is the best method to address this so they are all the same size, preferably much smaller too?
2. The prefix text ‘mins’ is butted up directly next to the travel_time state-label. Can this be changed? It doesn’t recognise blank spaces after the prefix text
- The state icon greys out when not active. I can change this via state_color: false, but this turns the icon grey permanently, and ideally, I would have this the same as the theme (orange)
Here’s my config:
type: horizontal-stack
cards:
- type: picture-elements
elements:
- type: state-icon
state_color: false
entity: binary_sensor.person_jake
style:
top: 80%
left: 20%
transform: translate(-50%, -50%) scale(2.0, 2.0)
- type: conditional
conditions:
- entity: person.jake
state: away
elements:
- type: state-label
entity: sensor.jake_travel_time
prefix: Mins
style:
top: 82%
left: 54%
image: /local/jake-new.jpeg
- type: picture-elements
elements:
- type: state-icon
entity: binary_sensor.person_emma
tap_action:
action: toggle
style:
top: 80%
left: 20%
transform: translate(-50%, -50%) scale(2.0, 2.0)
- type: conditional
conditions:
- entity: person.emma
state: not_home
elements:
- type: state-label
entity: sensor.em_travel_time
prefix: Mins
style:
top: 82%
left: 59%
image: /local/emma-new.jpeg
- type: picture-elements
elements:
- type: state-icon
entity: binary_sensor.person_rio
tap_action:
action: toggle
style:
top: 80%
left: 20%
transform: translate(-50%, -50%) scale(2.0, 2.0)
image: /local/rio.png