Since when I wrote the post I have also included a door open image.
I can update the images when I get home from work if I remember
1 Like
Any chance you would share the code for the card aswell?
Most of it is here:
But since this does not include open door I will post a new post with all the new config, when/if I remember
1 Like
Updated images:
http://www.hoppvader.nu/bilder/washing_machine.zip
And updated picture elements card:
elements:
- conditions:
- entity: sensor.washing_machine_operation_state
state: Ready
elements:
- entity: sensor.washing_machine_door_state
image: /local/washing_machine_ready.gif
state_image:
Open: /local/washing_machine_ready_open.gif
Closed: /local/washing_machine_ready_closed.gif
Locked: /local/washing_machine_ready_locked.gif
DelayedStart: /local/washing_machine_ready_locked.gif
style:
left: 0%
top: 0%
transform: scale(1,1)
tap_action:
action: none
type: image
type: conditional
- conditions:
- entity: sensor.washing_machine_operation_state
state: Run
elements:
- entity: sensor.washing_machine_door_state
image: /local/washing_machine_ready.gif
state_image:
Open: /local/washing_machine_ready_open.gif
Closed: /local/washing_machine_ready_closed.gif
Locked: /local/washing_machine_ready_locked.gif
DelayedStart: /local/washing_machine_ready_locked.gif
style:
left: 0%
top: 0%
transform: scale(1,1)
tap_action:
action: none
type: image
- entity: sensor.washing_machine_operation_state
image: /local/washing_machine.gif
style:
left: 0%
top: 0%
transform: scale(1,1)
tap_action:
action: none
type: image
- conditions:
- entity: sensor.washing_machine_operation_state
state: Run
elements:
- entity: sensor.washing_machine_finish_time
style:
left: 79%
top: 3%
color: black
transform: scale(2.5,2.5)
tap_action:
action: more-info
type: state-label
- entity: sensor.washing_machine_prewash
image: /local/washing_machine_prewash_off.png
state_image:
'false': /local/washing_machine_prewash_off.png
'true': /washing_machine_prewash_on.png
'False': /local/washing_machine_prewash_off.png
'True': /washing_machine_prewash_on.png
style:
left: '-18%'
top: '-19%'
transform: scale(0.23,0.27)
tap_action:
action: none
type: image
- entity: sensor.washing_machine_rinse
image: /local/washing_machine_rinse_offt.png
state_image:
'Off': /local/washing_machine_rinse_offt.png
Plus1: /local/washing_machine_rinse_1t.png
Plus2: /local/washing_machine_rinse_2t.png
Plus3: /local/washing_machine_rinse_3t.png
style:
left: 5%
top: 17%
transform: scale(1,1)
tap_action:
action: none
type: image
- entity: sensor.washing_machine_spin_rpm
style:
left: 5%
top: 34%
color: black
transform: scale(2,2)
tap_action:
action: none
type: state-label
- entity: sensor.washing_machine_temperature
style:
left: 6%
top: 47%
color: black
transform: scale(2,2)
tap_action:
action: none
type: state-label
- entity: sensor.washing_machine_idos1
image: /local/i-dos_on.png
state_image:
'False': /local/i-dos_off.png
'True': /local/i-dos_on.png
style:
left: '-1.8%'
top: 60%
transform: scale(0.9,0.9)
tap_action:
action: none
type: image
- entity: sensor.washing_machine_idos2
image: /local/i-dos_on.png
state_image:
'False': /local/i-dos_off.png
'True': /local/i-dos_on.png
style:
left: '-1.8%'
top: 75%
transform: scale(0.9,0.9)
tap_action:
action: none
type: image
- conditions:
- entity: sensor.washing_machine_processphase
state: Centrifugerar
elements:
- entity: sensor.washing_machine_processphase
style:
left: 35.2%
top: 69%
color: black
transform: scale(2,2)
tap_action:
action: none
type: state-label
type: conditional
- conditions:
- entity: sensor.washing_machine_processphase
state: TvƤttar
elements:
- entity: sensor.washing_machine_processphase
style:
left: 40%
top: 69%
color: black
transform: scale(2,2)
tap_action:
action: none
type: state-label
type: conditional
- conditions:
- entity: sensor.washing_machine_processphase
state: Skƶljer
elements:
- entity: sensor.washing_machine_processphase
style:
left: 40%
top: 69%
color: black
transform: scale(2,2)
tap_action:
action: none
type: state-label
type: conditional
type: conditional
type: conditional
- conditions:
- entity: sensor.washing_machine_operation_state
state: Finished
elements:
- entity: sensor.washing_machine_operation_state
image: /local/washing_machine_finished.gif
style:
left: 0%
top: 0%
transform: scale(1,1)
tap_action:
action: none
type: image
type: conditional
- conditions:
- entity: sensor.washing_machine_operation_state
state: DelayedStart
elements:
- entity: sensor.washing_machine_operation_state
image: /local/washing_machine_ready_locked.gif
style:
left: 0%
top: 0%
transform: scale(1,1)
tap_action:
action: none
type: image
- entity: sensor.washing_machine_finish_time_relative
style:
left: 79%
top: 3%
color: black
transform: scale(2.5,2.5)
tap_action:
action: more-info
type: state-label
- type: icon
icon: mdi:clock-end
style:
left: 85%
top: 27%
color: green
transform: scale(2.5,2.5)
type: conditional
image: /local/washing_machine_ready.gif
panel: true
type: picture-elements
2 Likes
Did you ever figure this out? I want something similar, but I want the icon to change based on the input_select.
Iām trying to have the icon change based on an input_select. Any idea what Iām doing wrong or what I need to do to make this happen. Is there a way to define multiple icons based on state for the actual input_select?
type: picture-elements
elements:
- type: state-icon
entity: input_select.pool_mode
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.pool_mode
state_image:
Pool: mdi:swim
Spa: mdi:hot-tub
Spillover: mdi:fountain
style:
top: 12%
left: 10%
image: /local/images/pool_auto.png
**Hi, I have a question.
I connected the shally 1 PM to the machine - do you think I can use your sensor and how?
Thanks for the help.**
Lovelace UI:
Hi,
Really nice what you did - is it possible to collaborate on the previous Lovelace user interface as well:
I can not see the picture
You can get an idea if itās running or not, an possibly where in the cycle.
But you canāt get the temperature and all that data.
Here, help please 
I have the home-connect integration working, but Iām lost at those API thingsā¦ Iām not even sure which information I would get, that the integration isnāt providing already. I was hoping for something like iDOS for the washingmachine and some more infos from the fridgeā¦
I just ran across this today. It looks great. I would love a copy of it. The download link is expired. Is there any way you could re-share it?
Should work now 
Thank you so much. 
I downloaded the file and edited. You donāt by chance have the file where it is just the background without your avatar? I was able to edit it online but it is not as beautiful as it could be.
Search here in this thread, there are numerous templates for these kind of pictures. Here for example. Work your way downwards from that post.
EDIT: and in this repository:
1 Like
Thank you for your help. I had poured through that the whole thread a couple of times but had absentmindedly missed clicking on his configuration.
1 Like
Hello everybody.
is there anyone who integrated into picture element floorplan an up/down button for the cover/blind?
I am quite new to HA as I am only able to show changing icons for the lights and cover but cannot find an easy way to add up/down buttons for each windows for calling the service without opening the detailed pop-up.
in other worlds I would like to add this control
to the backgroud image of the picture card.
Here my progress right now :
Can someone help me?
Thank you!
Hi @carlgarton, Looking to do something similar for my hive system. Would you be kind to share the code please.
How to change image on tap-action in picture elements card?
Looking for help. I use picture elements card. I have five images than can be pressed. When I tap the image a service is called to execute a script (which executes a restful command). I would like to change the image briefly when I tap the image, either by replacing it with another image, or for instance by greying it out for a second or two. I have tried delaying the script by 5 seconds and then adding brightness_pct as service data. Did not work. Looked everywhere for examples, but found none. āState_imageā does not appear to work, maybe because it is not a toggle.
type: picture-elements
title: INIM alarm
elements:
- image: /local/alarm/alarm_alles_uit.png
type: image
style:
top: 10%
left: 50%
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.alarm_alles_uit
Any proven suggestions to resolve this?
You could use the state of the script
So if the scripts on show the image you want and because itās a script it will only stay in am for about a second
Tried this and works like a charm!
1 Like