Hello,
I have save the pictures under /config/www/Images/Thomas/…
I tried with the following code:
I would be very happy if someone could give me a little tip.
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’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-cardThomas
value: home
value: not_home
background-color: null
border-radius: 5%
padding: 5%
color: grey
font-size: 10px
text-shadow: 0px 0px 0px black
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
font-size: 15px
align-self: start
justify-self: end
margin: 15% 40% 0 0
padding-bottom: 5px
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
padding: 0.5em 0px
font-size: 11px
align-self: start
justify-self: end
margin: 0 0 0 0
color: gray
padding: 0.5em 0px
font-size: 11px
align-self: middle
justify-self: end
margin: ‘-15% 0 0 0’
color: gray
padding: 0.5em 0px
align-self: middle
justify-self: end
color: gray
padding: 0.5em 0px
font-size: 11px
align-self: middle
justify-self: start
margin: 0 0 0 0
color: gray
padding: 0.5em 0px
font-size: 11px
align-self: start
justify-self: start
margin: ‘-5% 0 0 0’
color: gray
platform: template<ha-icon icon="mdi:home-export-outline" style="width: 20px; height: 20px; color: '#888888';"> </ha-icon><span>unterwegs</span>;<ha-icon icon="mdi:home" style="width: 20px; height: 20px; color: 888888;"> </ha-icon><span>daheim</span>;<ha-icon icon="mdi:map-marker-radius" style="width: 20px; height: 20px; color: 888888;"> </ha-icon><span> ${zone.arbeit}</span>;<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><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>;<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>;<ha-icon icon="mdi:wifi-off" style="width: 20px; height: 20px; color: #ff4500;"> </ha-icon> <span><span style="color: #ff4500;"> nicht verbunden </span></span>;<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>;<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.
WallyR
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,
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
May 11, 2024, 1:41am
9
try to remove that
else return ‘url(“/local/bitmoji2.png”)’;
the one in the middle
it need to be like this
cards:
hello,
type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
background-color: #4F4557;
}
cards:
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background-color: #4F4557;
}
cards:
- type: custom:button-card
name: Papa
show_name: true
styles:
name:
- font-size: 18px;
- font-weight: bold;
card_mod:
style: |
ha-card {
background-color: #506EAC !important;
border-radius: 40px !important;
width: 60px !important;
}
- type: picture
image: /local/ben_round2.gif
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background-color: #4F4557;
}
cards:
- type: custom:button-card
layout: icon_state_name2nd
styles:
name:
- justify-self: start
- font-size: 14px
label:
- justify-self: start
- font-size: 10px
icon:
- padding-top: 8px
icon: mdi:home
size: 60%
name: |
[[[
return states['person.ben'].state;
]]]
label: |
[[[
return states['person.ben'].attributes.last_room;
]]]
show_label: true
show_name: true
show_state: false
show_icon: true
- type: custom:button-card
layout: icon_label
icon: |
[[[
return 'mdi:battery'
]]]
styles:
label:
- justify-self: start
- padding-left: 0px
- font-size: 14px;
label: |
[[[
return states['sensor.ben_iphone_battery'].state + "%";
]]]
show_label: true
show_name: false
- type: custom:button-card
color_type: icon
icon: mdi:map-marker-distance
layout: icon_label
styles:
label:
- justify-self: start
- padding-left: 0px
- font-size: 14px;
label: |
[[[
return states['sensor.ben_iphone_home_distance'].state;
]]]
show_label: true
show_name: false
- type: custom:button-card
color_type: icon
icon: mdi:walk
layout: icon_label
styles:
label:
- justify-self: start
- padding-left: 0px
- font-size: 14px;
label: |
[[[
return states['sensor.ben_iphone_home_distance'].state;
]]]
show_label: true
show_name: false
