@Captain_Harlock The main thing to get this to work is you need to specify a clippath to get it to work. I would pull in the example SVG and look at that in Inkscape and copy what has been done. After that the YAML should be a fairly straight forward copy of what is in the example but replacing with your entities
Hi everyone,
I’m emulating a control panel with buttons.
the question is:
Is there a way to disable an item based on the status of a sensor?
Thanks
Ok, I’ll answer myself.
If it can be useful to anyone, the solution I found is this:
state_action:
action: call-service
service: floorplan.class_set
service_data: |
> if(entity.state === "off") {
return `clicable-off`;
} else {
return `floorplan-click`;
}
Hi,
There’s actually many ways of doing this.
You can access the the “entities” inside the JS block, and look at the state from there.
Next, you can add the a given entity, for a given element.
And lastly, you’re actually able to just use the “execute” service, and do whatever you want i JavaScript, by combining the entities prop, too:
Also, in the newest version just publiched, you’re able to use the “execute” service, and call whatever service you’d like, by using the new “action” function inside your JS statements.
There’s other way too, but I’m worried that I’m simply dropping too many options.
I’ve noticed that you’ve solved it yourself, but I’d just like to answer anyways.
Also! 
… You’re more than welcome to join the Discussion at GitHub, if you have other specific needs for help in the future: ExperienceLovelace/ha-floorplan · Discussions · GitHub
Thank you very much and congratulations for your excellent work!
I will definitely join the discussion on GitHub in the future… if I need to 
As you may have understood, I am learning to use this fantastic component
1 Like
Wondered if anyone could please help. New to HA, I have created and setup my floorplans and used a sensor to change the main floor plan at different times of the day.
I have created images as icons for the lights, after setting up no matter where I click it will only turn on and off the last entity in the code. I can’t re size the state image as the image goes well off any ideas?
Also have this annoying loading icon that just randomly shows?
type: picture-elements
panel: true
entity: sensor.time_of_day
state_image:
Morning: local/ground8am.png
Afternoon: local/ground12pm.png
Evening: local/ground7pm.png
Night: /local/ground7pm.png
elements:
- type: image
entity: light.downstairs_hallway
state_image:
"on": /local/groundhallway.png
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" +
(states['light.downstairs_hallway'].attributes.hs_color ?
states['light.downstairs_hallway'].attributes.hs_color[0] : 0) + "deg)"}
opacity: >-
${states['light.downstairs_hallway'].state === 'on' ?
(states['light.downstairs_hallway'].attributes.brightness / 255) : '0'}
tap_action:
action: none
- type: image
tap_action:
action: toggle
title: Hallway
entity: light.downstairs_hallway
image: local/mainlight1.png
style:
top: 58%
left: 26%
border: null
- type: image
entity: light.living_room_tv
state_image:
"on": /local/groundtvled.png
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
${ "hue-rotate(" + (states['light.living_room_tv'].attributes.hs_color ?
states['light.living_room'].attributes.hs_color[0] : 0) + "deg)"}
opacity: >-
${states['light.living_room'].state === 'on' ?
(states['light.living_room'].attributes.brightness / 255) : '0'}
tap_action:
action: none
- type: image
title: TV Light
entity: light.living_room_tv
image: local/mainlight1.png
style:
top: 75%
left: 70%
border: null
tap_action:
action: toggle
@sforrest2020 This forum is for the custom component ha-floorplan. As you ate using picture elements you should ask in configuration
1 Like