Hello,
I’m new here in the forum and would first like to apologize for my bad English…I’ve been using Home Assistant for 2 months and I’m currently stuck
my “problem” is the following:
I have created a person card on which I would like to change the status image depending on the status (person at home = image 1 and person not at home = image 2).
I have save the pictures under /config/www/Images/Thomas/…
I tried with the following code:
custom_fields:
icon: |
- platform: template sensors:
value_template: “{{ states(‘person.thomas’) }}”
entity_picture_template: “{% if is_states[‘person.thomas’].state == ‘away’) %} /local/Bilder/Thomas/image0.jpeg {% else %} /local/Bilder/Thomas/image1.jpeg {% endif %}”
I would be very happy if someone could give me a little tip.
Thank you…
Derivv
(Derivv)
May 9, 2024, 6:09am
2
Your English is great, no need to apologize! Let’s solve your Home Assistant issue. Here’s a solution:
custom_fields:
icon: |
- platform: template
sensors:
value_template: "{{ states('person.thomas') }}"
entity_picture_template: >
{% if is_states['person.thomas'].state == 'away' %}
/local/Images/Thomas/image0.jpeg
{% else %}
/local/Images/Thomas/image1.jpeg
{% endif %}
In your code, there were a couple of syntax errors. I’ve corrected them in the solution provided above. Make sure to use the correct path to your images directory. Additionally, ensure that your file names match exactly as written in the code.
As for Meitu vip apk , while it’s not directly related to this issue, you can always integrate it into your workflow for photo editing purposes. Meitu offers various filters and effects that can enhance your images before displaying them on your dashboard. It could be a fun addition to your Home Assistant setup!
Give this solution a try, and your person card should display the appropriate image based on the status of the person. If you encounter any further issues, feel free to ask for assistance!
1 Like
hello derivv,
Thank you for your reply.
I tried to integrate your code into my personal card. Unfortunately no image is output to me.
Do I need to change anything in the rest of my person card?
I’ve attached a picture of my son’s person card. it works great. The current image is linked to the person.tim and is always displayed.
I then deleted the image in person.thomas and hoped that the code would change the image depending on the status.
Maybe I’m a bit too stupid for that :face-with-diagonal-mouth:
I have inserted my entire code for the person.card here
type: custom:button-card
entity: person.thomas
aspect_ratio: 1/0.5
name: Thomas
show_entity_picture: false
show_name: true
state:
value: home
styles:
custom_fields:
icon:
- border-color: green
value: not_home
styles:
custom_fields:
icon:
- border-color: red
styles:
card:
background-color: null
border-radius: 5%
padding: 5%
color: grey
font-size: 10px
text-shadow: 0px 0px 0px black
grid:
grid-template-areas: ‘“icon status” “n n” “battery proximity” “wifi timehome” “sd sd”’
grid-template-columns: 2fr 1fr
grid-template-rows: 1fr min-content min-content min-content min-content
name:
font-size: 15px
align-self: start
justify-self: end
margin: 15% 40% 0 0
padding-bottom: 5px
custom_fields:
icon:
clip-path: circle()
width: 80%
pointer-events: none
display: grid
border: 5px solid
border-color: gray
border-radius: 500px
margin: 15% 0 0 0
justify-self: end
opacity: 1
status:
padding: 0.5em 0px
font-size: 11px
align-self: start
justify-self: end
margin: 0 0 0 0
color: gray
proximity:
padding: 0.5em 0px
font-size: 11px
align-self: middle
justify-self: end
margin: ‘-15% 0 0 0’
color: gray
timehome:
padding: 0.5em 0px
align-self: middle
justify-self: end
color: gray
wifi:
padding: 0.5em 0px
font-size: 11px
align-self: middle
justify-self: start
margin: 0 0 0 0
color: gray
battery:
padding: 0.5em 0px
font-size: 11px
align-self: start
justify-self: start
margin: ‘-5% 0 0 0’
color: gray
custom_fields:
icon: |
platform: template
sensors:
value_template: “{{ states(‘person.thomas’) }}”
entity_picture_template: >
{% if is_states[‘person.thomas’].state == ‘away’ %}
/local/bilder/away.jpeg
{% else %}
/local/bilder/home.jpeg
{% endif %}
status: |
[[[
if (states[‘person.thomas’].state ==‘away’) {return <ha-icon icon="mdi:home-export-outline" style="width: 20px; height: 20px; color: '#888888';"> </ha-icon><span>unterwegs</span>
;
}
if (states[‘person.thomas’].state ==‘home’) {return <ha-icon icon="mdi:home" style="width: 20px; height: 20px; color: 888888;"> </ha-icon><span>daheim</span>
;
} else {
return <ha-icon icon="mdi:map-marker-radius" style="width: 20px; height: 20px; color: 888888;"> </ha-icon><span> ${zone.arbeit}</span>
;
}
]]]
proximity: |
[[[
return <ha-icon icon="mdi:map-marker-distance" style="width: 20px; height: 20px; color: #888888;"> </ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.home_iphone_thomas_entfernung'].state} Km</span></span>
]]]
battery: |
[[[
if (states[‘sensor.iphone_thomas_battery_state’].state ==‘Charging’) {
return <ha-icon icon="mdi:battery-charging" style="width: 20px; height: 20px; color: #888888;"> </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_thomas_battery_level'].state}% Batterie</span></span>
;
} else {
return <ha-icon icon="mdi:battery" style="width: 20px; height: 20px; color: #888888;"> </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_thomas_battery_level'].state}% Batterie</span></span>
;
}
]]]
wifi: |
[[[
if (states[‘sensor.iphone_thomas_connection_type’].state ==‘Cellular’) {
return <ha-icon icon="mdi:wifi-off" style="width: 20px; height: 20px; color: #ff4500;"> </ha-icon> <span><span style="color: #ff4500;"> nicht verbunden </span></span>
;
} else {
return <ha-icon icon="mdi:wifi" style="width: 20px; height: 20px; color: #888888;"> </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_thomas_ssid'].state}</span></span>
;
}
]]]
timehome: |
[[[
return <ha-icon icon="mdi:car" style="width: 20px; height: 20px; color: #888888;"> </ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.iphone_thomas'].state} min.</span></span>
]]]
then it looks like this
Maybe you can give me a hint where my mistake is.
Thanks so much !!!
Please post your code using the community standards. See #11 for instructions.
It will expedite a solution.
Before we begin…
This forum is not a helpdesk
The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem.
[image]
This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…
WallyR
(Wally)
May 9, 2024, 10:03am
5
As Liquid_cooled stated your code is not possible to read, because indentations are important and it is removed in your post.
Also be aware that the directory structure you see on the disk might not be the same as the one presented on the web server.
I am trying to get my person card to change backgrounds when I’m away and then back to original when I’m at a location. In the code I have posted the Spotify background change works but the tracker part for it does not. So when i am listening to Spotify my background bitmoji changes and then when I stop it changes back, but when I show up as away the background does not change. Would someone plese look at my code and see what i have done incorrectly? Thank you
cards:
- type: custom:button-card
entity: person.rob_miller
aspect_ratio: 4/4
show_name: false
show_icon: false
styles:
card:
- padding: 4%
- background-image: >-
[[[if (states["media_player.spotify_rob_miller"].state ==
"playing") return 'url("/local/bitmoji music.png")'; else return
'url("/local/bitmoji2.png")'; if
(states["person.rob_miller"].state == "away") return
'url("/local/drive.png")'; else return
'url("/local/bitmoji2.png")'; ]]]
- background-size: 90%
- background-repeat: no-repeat
- background-position: top center
- '--keep-background': 'true'
Hello,
It’s almost the same “problem”…
Unfortunately I have no idea…sorry!!!
I’m also desperately trying to change my image when I get back home.
I’m trying to upload my code again in the correct format.
type: custom:button-card
entity: person.thomas
aspect_ratio: 1/0.5
name: <b>Thomas</b>
show_entity_picture: false
show_name: true
state:
- value: home
styles:
custom_fields:
icon:
- border-color: green
- value: not_home
styles:
custom_fields:
icon:
- border-color: red
styles:
card:
- background-color: null
- border-radius: 5%
- padding: 5%
- color: grey
- font-size: 10px
- text-shadow: 0px 0px 0px black
grid:
- grid-template-areas: '"icon status" "n n" "battery proximity" "wifi timehome" "sd sd"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-size: 15px
- align-self: start
- justify-self: end
- margin: 15% 40% 0 0
- padding-bottom: 5px
custom_fields:
icon:
- clip-path: circle()
- width: 80%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: gray
- border-radius: 500px
- margin: 15% 0 0 0
- justify-self: end
- opacity: 1
status:
- padding: 0.5em 0px
- font-size: 11px
- align-self: start
- justify-self: end
- margin: 0 0 0 0
- color: gray
proximity:
- padding: 0.5em 0px
- font-size: 11px
- align-self: middle
- justify-self: end
- margin: '-15% 0 0 0'
- color: gray
timehome:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
- color: gray
wifi:
- padding: 0.5em 0px
- font-size: 11px
- align-self: middle
- justify-self: start
- margin: 0 0 0 0
- color: gray
battery:
- padding: 0.5em 0px
- font-size: 11px
- align-self: start
- justify-self: start
- margin: '-5% 0 0 0'
- color: gray
custom_fields:
icon: |
- platform: template
sensors:
value_template: "{{ states('person.thomas') }}"
entity_picture_template: >
{% if is_states['person.thomas'].state == 'away' %}
/local/bilder/away.jpeg
{% else %}
/local/bilder/home.jpeg
{% endif %}
status: |
[[[
if (states['person.thomas'].state =='away') {return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: '#888888';">
</ha-icon><span>unterwegs</span>`;
}
if (states['person.thomas'].state =='home') {return `<ha-icon icon="mdi:home"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span>daheim</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span> ${zone.arbeit}</span>`;
}
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.home_iphone_thomas_entfernung'].state} Km</span></span>`
]]]
battery: |
[[[
if (states['sensor.iphone_thomas_battery_state'].state =='Charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_thomas_battery_level'].state}% Batterie</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_thomas_battery_level'].state}% Batterie</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.iphone_thomas_connection_type'].state =='Cellular') {
return `<ha-icon
icon="mdi:wifi-off"
style="width: 20px; height: 20px; color: #ff4500;">
</ha-icon> <span><span style="color: #ff4500;"> nicht verbunden </span></span>`;
} else {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_thomas_ssid'].state}</span></span>`;
}
]]]
timehome: |
[[[
return `<ha-icon
icon="mdi:car"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.iphone_thomas'].state} min.</span></span>`
]]]
Fluory
(Lina)
May 11, 2024, 1:41am
9
try to remove that
else return ‘url(“/local/bitmoji2.png”)’;
the one in the middle
i just try my self and it work
it need to be like this
cards:
- type: custom:button-card
entity: person.rob_miller
aspect_ratio: 4/4
show_name: false
show_icon: false
styles:
card:
- padding: 4%
- background-image: >-
[[[if (states[“media_player.spotify_rob_miller”].state == “playing”)
return ‘url(“/local/bitmoji music.png”)’; if
(states[“person.rob_miller”].state == “away”) return
‘url(“/local/drive.png”)’; else return
‘url(“/local/bitmoji2.png”)’; ]]]
- background-size: 90%
- background-repeat: no-repeat
- background-position: top center
- ‘–keep-background’: ‘true’