Having the exact same issue with the oval. Driving me nuts.
Ive found adding this to any image, atleast removed the ability to click it.
style:
pointer-events: none
After changing theme, Ive also noticed its level of severity is different with each theme.
if anyone finds out what element needs to be changed within any theme in general, it would be awesome if anyone tackles that
I had the exact same problem. When I rearranged my yaml to list all the overlays first and the light toggles after the overlays, it seemed to work fine. Hope that works for you.
Fixed when you add that style line to all images.
I get a bug in some rooms. When I turn on two lights at the same time, the image appears in black and white. I have reviewed the images from www/floorplan and they are in color
so it appears:
this is how it should appear:
hi everyone - i implemented the floorplan and i got rid of the oval image as well so all OK … but im wondering something now:
Anyone suggestions if this is possible ?
Not exactly sure what your setup is like, but my frigate devices has a person motion binary sensor for each camera / zone. You could use a conditional element for each binary sensor that only shows when the state’s value is on.
hmmm thats a good idea - didnt thought of that yet … will try to implement this approach!
it worked! i used the element and added it 5 times as i have 5 places for now where it can detect me/my wife… good suggestion.
In the screenshot the last location known was the frontdoor (outside). i also have cameras in the hallway/living/garden/storage.
Hi,
I read that you solved the oval image problem.
In the end, with the change of theme it doesn’t bother me because you can hardly see a shadow,
but just for information how did you solve it?
i think i tried it a few times - and used a combi of the theme and , pointer-events: none
To be clear. → when i control the zone with my mouse - it still shows the round / black / oval images. But my primary use for the floorplan is on a wallmounted touchscreen - on this screen i -dont- have the oval image, it only appears on my mac/desktop.
in the end it’s how I tried to solve it.
thanks
Hi i’m building out my floor plan and want to add door sensors i follow your code above which work great but
Is there a way to change the color from open to closed and the size?
thanks.
You could customize the color and any other style by using a conditional element to change the style based on if the binary sensor’s state is on vs off. For example this would render the background green when the door is closed and red when it’s open:
## Back Door Sensor
- type: conditional
conditions:
- entity: binary_sensor.back_door
state: "on"
elements:
- type: state-label
entity: binary_sensor.back_door
title: "This is a tooltip for the back door contact sensor"
prefix: "Backdoor "
style:
top: 84%
left: 5%
--iron-icon-stroke-color: "#969696"
border-radius: 50%
text-align: center
background-color: "red"
- type: conditional
conditions:
- entity: binary_sensor.back_door
state: "off"
elements:
- type: state-label
entity: binary_sensor.back_door
title: "This is a tooltip for the back door contact sensor"
prefix: "Backdoor "
style:
top: 84%
left: 5%
--iron-icon-stroke-color: "#969696"
border-radius: 50%
text-align: center
background-color: "green"
Thanks a lot works great.
I still would like the spot i have in green and red a little smaller.
You have full control with css styles to change the look, experiment with the font-size, padding, and other styles to make it look like you want in the style section of the state-label.
Hi All - Not sure if this is the best place to pop this but I am struggling with my 3D Floorplan. I have everything working except I am trying to call-service to activate a scene. But I am getting the spinning wheel over the floorplan preview which suggests I have missed something.
I wonder if someone could just point me in the right direction.
The Image overlay looks like this:
elements:
- type: image
entity: scene.livingroom_tv_time
tap_action: none
hold_action: none
state_image:
'on': /local/Ground_Floor_TV.png
'off': /local/transparent_square.png
style:
top: 50%
left: 50%
width: 100%
opacity: 0.5
type: image
and the Toggle switch looks like this
- type: image
entity: scene.livingroom_tv_time
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.livingroom_tv_time
image: /local/Switch_off.png
state_image:
'on': /local/Switch_on.png
style:
top: 33%
left: 50%
width: 3%
opacity: 1
Any help appreciated.
Hi there, brand new to this picture-elements card, and loving what it can do, but I’m running in to some errors, and for the life of me, I can’t figure out where I am going wrong.
first, the code:
#rats. only some lights work
type: picture-elements
image: /local/images/1floorGUI/bg_dark.png
elements:
- type: image
entity: light.front_porch
tap_action: none
hold_action: none
style:
left: 50%
top: 50%
width: 100%
state_image:
"on": /local/images/1floorGUI/light_front_door.png
"off": /local/images/1floorGUI/bg_transparent.png
unavailable: /local/images/1floorGUI/bg_transparent.png
- type: image
entity: light.dimmable_light_1
tap_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/images/1floorGUI/light_side_patio.png
"off": /local/images/1floorGUI/bg_transparent.png
unavailable: /local/images/1floorGUI/bg_transparent.png
- type: image
entity: switch.plug_in_outdoor_smart_switch
tap_action: none
hold_action: none
style:
left: 50%
top: 50%
width: 100%
state_image:
"on:": /local/images/1floorGUI/light_patio_party_lights.png
"off": /local/images/1floorGUI/bg_transparent.png
"unavailable": /local/images/1floorGUI/bg_transparent.png
- type: image
entity: switch.ge_enbrighten_z_wave_plus_smart_switch
tap_action: none
hold_action: none
style:
left: 50%
top: 50%
width: 100%
state_image:
"on:": /local/images/1floorGUI/light_back_porch.png
"off": /local/images/1floorGUI/bg_transparent.png
"unavailable": /local/images/1floorGUI/bg_transparent.png
#ceiling fan images
- type: image
entity: fan.ar_ceiling_fan
tap_action: none
hold_action: none
style:
left: 50%
top: 17%
width: 5%
state_image:
"on": /local/images/1floorGUI/anim_fan_slow.png
"off": /local/images/1floorGUI/still_fan.png
"unavailable": /local/images/1floorGUI/bg_transparent.png
- type: image
entity: fan.kitchen_ceiling_fan
tap_action: none
hold_action: none
style:
left: 56%
top: 45%
width: 5%
state_image:
"on": /local/images/1floorGUI/anim_fan_slow.png
"off": /local/images/1floorGUI/still_fan.png
"unavailable": /local/images/1floorGUI/bg_transparent.png
- type: image
entity: fan.family_room_fan
tap_action: none
hold_action: none
style:
left: 77%
top: 27%
width: 5%
state_image:
"on": /local/images/1floorGUI/anim_fan_slow.png
"off": /local/images/1floorGUI/still_fan.png
"unavailable": /local/images/1floorGUI/bg_transparent.png
#toggles
- type: image
entity: light.front_porch
tap_action:
action: toggle
style:
left: 5%
top: 30%
width: 5%
height: 5%
border: 1px dotted gray
state_image:
"on": /local/images/1floorGUI/bg_transparent.png
"off": /local/images/1floorGUI/bg_transparent.png
unavailable: /local/images/1floorGUI/unavailable.png
- type: image
entity: light.dimmable_light_1
tap_action:
action: toggle
style:
top: 63%
left: 77.5%
width: 5%
border: 1px dotted gray
state_image:
"on": /local/images/1floorGUI/bg_transparent.png
"off": /local/images/1floorGUI/bg_transparent.png
unavailable: /local/images/1floorGUI/unavailable.png
- type: image
entity: switch.plug_in_outdoor_smart_switch
tap_action:
action: toggle
style:
left: 70%
top: 95.5%
width: 30%
height: 6%
border: 1px dotted gray
state_image:
"on:": /local/images/1floorGUI/bg_transparent.png
"off": /local/images/1floorGUI/bg_transparent.png
"unavailable": /local/images/1floorGUI/unavailable.png
- type: image
entity: switch.ge_enbrighten_z_wave_plus_smart_switch
tap_action:
action: toggle
style:
left: 95%
top: 25%
width: 5%
border: 1px dotted gray
state_image:
"on:": /local/images/1floorGUI/bg_transparent.png
"off": /local/images/1floorGUI/bg_transparent.png
"unavailable": /local/images/1floorGUI/unavailable.png
#ceiling fan toggles
- type: image
entity: fan.ar_ceiling_fan
tap_action:
action: more-info
style:
left: 50%
top: 17%
width: 3%
height: 5%
# border: 1px dotted gray
state_image:
"on": /local/images/1floorGUI/bg_transparent.png
"off": /local/images/1floorGUI/bg_transparent.png
"unavailable": /local/images/1floorGUI/unavailable.png
- type: image
entity: fan.kitchen_ceiling_fan
tap_action:
action: more-info
style:
left: 56%
top: 45%
width: 3%
height: 5%
# border: 1px dotted gray
state_image:
"on": /local/images/1floorGUI/bg_transparent.png
"off": /local/images/1floorGUI/bg_transparent.png
"unavailable": /local/images/1floorGUI/unavailable.png
- type: image
entity: fan.family_room_fan
tap_action:
action: more-info
style:
left: 77%
top: 27%
width: 3%
height: 5%
# border: 1px dotted gray
state_image:
"on": /local/images/1floorGUI/bg_transparent.png
"off": /local/images/1floorGUI/bg_transparent.png
"unavailable": /local/images/1floorGUI/unavailable.png
you’ll see that I’ve left little gray boxes around the toggle locations for now, just so I can get used to the locations where I should be tapping.
Here you can see my lights off, but a fan running (it animates, thanks to the wonder of animated PNG files)
I can toggle light.dimmable_light_1 and light.front_porch and the lights come on:
but the moment I try toggling switch.plug_in_outdoor_smart_switch or switch.ge_enbrighten_z_wave_plus_smart_switch I get the spinning blue circles in my picture-elements card indicating that something is broken with my syntax or request. The actual light switches do toggle when I click the image, and the spinning blue circles remain until I toggle them off again. If I physically control the switches to turn them on, I get the spinning blue circles (here I tried turning on the enbrighten.)
This tells me that at least the logic is okay for the toggles, but something is wrong when I try to load the PNG image of the light when it is in its “on” state.
I’ve double checked that the PNG will load by flipping its on and off images:
- type: image
entity: switch.plug_in_outdoor_smart_switch
tap_action: none
hold_action: none
style:
left: 50%
top: 50%
width: 100%
state_image:
"on:": /local/images/1floorGUI/bg_transparent.png
"off": /local/images/1floorGUI/light_patio_party_lights.png
"unavailable": /local/images/1floorGUI/bg_transparent.png
and I see the below image when the light is turned off, but I see the spinning blue circle when I turn it on, telling me that at least my PNG is fine:
Any suggestions are welcome. I have 14 other lights not listed in this setup, and all of them are giving an error (they are all light. entities, not switch.entities,) even when I try to use them just as an indicator like this, with only the single light on the card and no toggles, the moment I turn one of the other lights on, I get blue circles:
type: picture-elements
image: /local/images/1floorGUI/bg_dark.png
elements:
- type: image
entity: light.living_room_ceiling
tap_action: none
hold_action: none
style:
left: 50%
top: 50%
width: 100%
state_image:
"on:": /local/images/1floorGUI/light_living_room_ceiling.png
"off": /local/images/1floorGUI/bg_transparent.png
"unavailable": /local/images/1floorGUI/bg_transparent.png
Nothing is jumping out at me as obviously incorrect. Are there any related messages in your logs or in the console of your browser dev tools?
@fahr, first of all congratulations for your excellent job, it helped me in creating my own floorplans.
My house is on three floors and I’ve already recreated all of them as three picture-elements, with buttons for lights, heating, media, cameras, etc.
Now, I’m quite struggling in creating a floor-toggling button to move easily through them.
As per your guide I inserted in configuration.yaml the following lines:
input_select:
planimetrie:
name: pianoterra
options:
- "pianoterra"
- "primopiano"
- "secondopiano"
initial: "pianoterra"
icon: mdi:floor-plan
Then I created a new view trying to add a lovelace view with following characteristics:
title: Floorplan
path: floorplan
panel: true
icon: mdi:floor-plan
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_select.planimetrie
state: "pianoterra"
card: !include /lovelace/pianoterra.yaml
Here is where I get stuck, on the “!include” line I always get an error and nothing seems to work. I also tried with a “navigation button” but it doesn’t work either.
Any tip? Thanks!
At a glance, that looks correct to me. Have you opened up the console in the developer tools of the browser to see if there is any obvious error message that might point you in the right direction?
I’m trying to do this adding a view to the dashboard, editing it in YAML mode but when I get to the last line whatever I type after the “!” it doesn’t allow me to save it (see pic). Seems like a syntax mistake.
