- theme: Backend-selected
title: Floorplan2
path: floorplan2
icon: mdi:floor-plan
badges: []
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_select.floorplan_floor
state: 1st floor
card:
- type: picture-elements
image: local/renders/first_dark.
panel: true
elements:
- type: image
entity: switch.front_porch_front
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_porch.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.back_entry_back
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_patio1.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.back_entry_guest
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_patio2.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.dining
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_dining_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.entry
tap_action: 'no'
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_entry_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.master
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_master_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.garage_driveway
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_drive.png
'off': local/icons/transparent_square.png
- type: state-icon
entity: switch.front_porch_front
tap_action:
action: toggle
style:
top: 60%
left: 40%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.back_entry_back
tap_action:
action: toggle
style:
top: 60%
left: 83%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.back_entry_guest
tap_action:
action: toggle
style:
top: 28%
left: 83%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.dining
tap_action:
action: toggle
style:
top: 45%
left: 55%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.entry
tap_action:
action: toggle
style:
top: 60%
left: 50%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.garage_driveway
tap_action:
action: toggle
style:
top: 20%
left: 35%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.master
tap_action:
action: toggle
style:
top: 85%
left: 85%
'--mdc-icon-size': 20px
- typye: service-button
title: 2nd floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: '#eaeaea'
border-radius: 5%
- type: conditional
conditions:
- entity: input_select.floorplan_floor
state: 2nd floor
card:
- type: picture-elements
image: local/renders/second_dark.png
panel: true
elements:
- typye: service-button
title: 1st floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: '#eaeaea'
border-radius: 5%
I see what you mean and moved both “card” sections over. Now instead of “no card TYPE configured” it says "no card configured.
- theme: Backend-selected
title: Floorplan2
path: floorplan2
icon: mdi:floor-plan
panel: true
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_select.floorplan_floor
state: 1st floor
card:
- type: picture-elements
image: local/renders/first_dark.png
panel: true
elements:
- type: image
entity: switch.front_porch_front
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_porch.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.back_entry_back
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_patio1.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.back_entry_guest
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_patio2.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.dining
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_dining_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.entry
tap_action: 'no'
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_entry_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.master
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_master_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.garage_driveway
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_drive.png
'off': local/icons/transparent_square.png
- type: state-icon
entity: switch.front_porch_front
tap_action:
action: toggle
style:
top: 60%
left: 40%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.back_entry_back
tap_action:
action: toggle
style:
top: 60%
left: 83%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.back_entry_guest
tap_action:
action: toggle
style:
top: 28%
left: 83%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.dining
tap_action:
action: toggle
style:
top: 45%
left: 55%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.entry
tap_action:
action: toggle
style:
top: 60%
left: 50%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.garage_driveway
tap_action:
action: toggle
style:
top: 20%
left: 35%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.master
tap_action:
action: toggle
style:
top: 85%
left: 85%
'--mdc-icon-size': 20px
- typye: service-button
title: 2nd floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: '#eaeaea'
border-radius: 5%
- type: conditional
conditions:
- entity: input_select.floorplan_floor
state: 2nd floor
card:
- type: picture-elements
image: local/renders/second_dark.png
panel: true
elements:
- typye: service-button
title: 1st floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: '#eaeaea'
border-radius: 5%
Take a look at your conditional card, it’s not formatted correctly: Conditional Card - Home Assistant
You have the card key nested under conditions when it should be at the same level. Also the card is an object not an array of objects.
Yes I moved the card sections right further because i thought that was your recommendation lol
“it looks like the card part of the condition needs to be indented another level. If you surround the code in 3 backticks, ``` it will preserve the formatting.
What I mean is in your 2nd conditional the picture-elements type should be indented more:”
But I looked at that link and noticed there is no hyphen and space before “card”. I removed those and have an image!
However the image has a large white square in upper left corner where I assume the service button is programmed to go.Also there is a spinning “thinking” wheel and the I need to figure out how to get the image to fit the screen. Here is the current code.
- theme: Backend-selected
title: Floorplan2
path: floorplan2
icon: mdi:floor-plan
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_select.floorplan_floor
state: 1st floor
card:
type: picture-elements
image: local/renders/first_dark.png
panel: true
elements:
- type: image
entity: switch.front_porch_front
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_porch.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.back_entry_back
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_patio1.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.back_entry_guest
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_patio2.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.dining
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_dining_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.entry
tap_action: 'no'
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_entry_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.master
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_master_lamp.png
'off': local/icons/transparent_square.png
- type: image
entity: switch.garage_driveway
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/renders/first_drive.png
'off': local/icons/transparent_square.png
- type: state-icon
entity: switch.front_porch_front
tap_action:
action: toggle
style:
top: 60%
left: 40%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.back_entry_back
tap_action:
action: toggle
style:
top: 60%
left: 83%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.back_entry_guest
tap_action:
action: toggle
style:
top: 28%
left: 83%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.dining
tap_action:
action: toggle
style:
top: 45%
left: 55%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.entry
tap_action:
action: toggle
style:
top: 60%
left: 50%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.garage_driveway
tap_action:
action: toggle
style:
top: 20%
left: 35%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- type: state-icon
entity: switch.master
tap_action:
action: toggle
style:
top: 85%
left: 85%
'--mdc-icon-size': 20px
'--paper-item=icon-color': white
- typye: service-button
title: 2nd floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: '#eaeaea'
border-radius: 5%
- type: conditional
conditions:
- entity: input_select.floorplan_floor
state: 2nd floor
card:
type: picture-elements
image: local/renders/second_dark.png
panel: true
elements:
- typye: service-button
title: 2nd floor
service: input_select.select_next
service_data:
entity_id: input_select.floorplan_floor
style:
top: 15%
left: 5%
background: '#eaeaea'
border-radius: 5%
found it! i misspelled “type” in the service button.
OK I CAN SWITCH FLOORS!! TY!!
Awesome, glad you got it working!
1 Like
Hello,
I have an issue that the transparant png grays out my whole picture. Any idea why that is?
Even with your code it does this:
That gray box means that the picture is not found. Check the file name, the file extension and the path to see if they’re correct.
Style width: 100% - Try reducing e.g. 2-10% - width: 10%
@fahr Can you please update the link of the article of juanmtech you have on your blog?
Is this one: How to set up the picture elements card in home assistant lovelace | JuanMTech
Thank you.
Great work!
1 Like
If someone needs help hiding title on state-badge refer to this link: Hide text for badges in picture-elements card - #16 by ellepdesk
Thanks, updated!
1 Like
I am attempting to create a 3D floor plan to navigate through my house room by room. I have two different floor plans (upstairs and downstairs) that I want to navigate through. I created the models in Sketchup, saved each as a png, used Inkscape to create svg’s with individual room layers. I am still relatively new to home assistant and still learning, but I have the upstairs floor plan working basically how I want (other than it loading very slowly).
In my learning process I have used the HACS HA-Floorplan and the built in picture elements card. But no matter what I do, the downstairs svg file will not scale correctly. It is very zoomed in and only shows a small portion of the whole image. I have used it with and without using panel = true. The downstairs png scales perfectly and the upstairs png and svg both scale perfectly fine. I’ve done it in it’s own dashboard, it’s own panel card, and as a horizontal stack card with the upstairs floor plan. All work with the pngs and the upstairs svg.
I’ve cleared my browser’s cache multiple times and rebooted several times. The yaml is clearly not the issue as it is an exact copy of the upstairs that is working. Any thoughts on what could be causing the scaling issue or links to people who have had similar issues?
Update: I spent a few more hours messing around with it. I decided the issue had to be with the svg file and I believe it was. I deleted the file and created a new one from scratch. I tried updating the cards but it didn’t work so I deleted from HA again, cleared the browser’s cache, and rebooted HA. I re-uploaded it as Downstairs2.svg and updated everything accordingly.
I can now get the Downstairs2.svg file to open in a picture elements card, but not a HACS floor plan card. I tried the exact yaml but with the Upstairs.svg and it worked fine. Thoughts on why the HACS floor plan card won’t open the new, correctly made file?
(Sorry if this is not the correct place for this kind of post. Like I said, I am fairly new to Home Assistant so if there is a better place, please let me know)
Hello everyone. Thanks for your contributions and hard work. This has inspired me to jump on the bandwagon and also create a floor plan.
So i have started with the overlays and I am running into a bit of a problem.
I have light groups set up. For example, my study has 2 set of lights so i have set them up so if any of the lights are on then it lights up that room.
The problem is any other rooms that have lights on, are dark.
Not sure what i am doing wrong with my code? Can someone look and tell me where the error is?
type: picture-elements
elements:
- entity: sensor.time_of_day
type: image
state_image:
Afternoon: https://sawagw.lv/local/floorplan/home_afternoon_lights off.png
Morning: https://sawagw.lv/local/floorplan/home_morning_lights off.png
Evening: https://sawagw.lv/local/floor/plan/home_evening_lights off.png
Night: https://sawagw.lv/local/floorplan/home_night_lights off.png
style:
top: 50%
left: 50%
width: 100%
- type: image
entity: light.garage
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': https://sawagw.lv/local/floorplan/Garage21.png
'off': https://sawagw.lv/local/floorplan/home_transparent.png
unavailable: https://sawagw.lv/local/floorplan/home_transparent.png
- type: image
entity: light.light_group_hallway
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': https://sawagw.lv/local/floorplan/Hallway21.png
'off': https://sawagw.lv/local/floorplan/home_transparent.png
unavailable: https://sawagw.lv/local/floorplan/home_transparent.png
- type: image
entity: light.corridor_lights_group
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': https://sawagw.lv/local/floorplan/Corridor21.png
'off': https://sawagw.lv/local/floorplan/home_transparent.png
unavailable: https://sawagw.lv/local/floorplan/home_transparent.png
- type: image
entity: light.living_zone_lights_group
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': https://sawagw.lv/local/floorplan/Living21.png
'off': https://sawagw.lv/local/floorplan/home_transparent.png
unavailable: https://sawagw.lv/local/floorplan/home_transparent.png
- type: image
entity: light.kitchen_spots
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': https://sawagw.lv/local/floorplan/Kitchen21.png
'off': https://sawagw.lv/local/floorplan/home_transparent.png
unavailable: https://sawagw.lv/local/floorplan/home_transparent.png
- type: image
entity: light.lights_group_study
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': https://sawagw.lv/local/floorplan/Study21.png
'off': https://sawagw.lv/local/floorplan/home_transparent.png
unavailable: https://sawagw.lv/local/floorplan/home_transparent.png
image: https://sawagw.lv/local/floorplan/home_transparent.png
Any help would be appreciated and until i figure this out, I don’t want to add more rooms.
I believe the problem is that your off image displays all the rooms as dark: https://sawagw.lv/local/floorplan/home_transparent.png . Instead, your off images should be similar to the on image in that they are only the room with the light off with the rest of the image being transparent.
Right now all rooms with the light off are being overlay-ed with an image with all lights off that doesn’t have any transparency.
Thanks for that. I used a transparency and also removed the https:/ and now works well.
I’ll come back with more questions when i encounter another issue.
Me again. Started to experience some strange behaviour.
At the beginning none of my backgrounds would load and it showed broken. Cleared the cache and same thing, but when i turn a room light on it would show.
Now i have this.
The rooms are in the correct place but the background image is totally off.
Checked the code and all looks ok.
type: picture-elements
elements:
- entity: sensor.time_of_day
type: image
state_image:
Morning: local/floorplan/home_morning.png
Afternoon: local/floorplan/home_afternoon.png
Evening: local/floor/plan/home_evening.png
Night: local/floorplan/home_night.png
unavailable: local/floorplan/home_transparent.png
top: 50%
left: 50%
width: 100%
- type: image
entity: light.front_facade
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': local/floorplan/Facade.png
'off': local/floorplan/home_transparent.png
unavailable: local/floorplan/home_transparent.png
- type: image
entity: light.outside_entrance
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': local/floorplan/FrontTerrace.png
'off': local/floorplan/home_transparent.png
unavailable: local/floorplan/home_transparent.png
- type: image
entity: light.outside_columns
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': local/floorplan/Columns.png
'off': local/floorplan/home_transparent.png
unavailable: local/floorplan/home_transparent.png
- type: image
entity: light.living_zone_lights_group
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': local/floorplan/Living.png
'off': local/floorplan/home_transparent.png
unavailable: local/floorplan/home_transparent.png
- type: image
entity: light.corridor_lights_group
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': local/floorplan/Corridor.png
'off': local/floorplan/home_transparent.png
unavailable: local/floorplan/home_transparent.png
- type: image
entity: light.light_group_hallway
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': local/floorplan/Hallway.png
'off': local/floorplan/home_transparent.png
unavailable: local/floorplan/home_transparent.png
- type: image
entity: light.kitchen_spots
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': local/floorplan/Kitchen.png
'off': local/floorplan/home_transparent.png
unavailable: local/floorplan/home_transparent.png
- type: image
entity: light.lights_group_bathroom
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': local/floorplan/Bathroom.png
'off': local/floorplan/home_transparent.png
unavailable: local/floorplan/home_transparent.png
image: local/floorplan/home_transparent.png
Any ideas? Also is there a way to force the images to load and not rely on cache?
Sorted it out