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
Hi @fahr!
One thing I didn’t understand and I also couldn’t see in the video. How did you make your back door open according to the sensor? I mean, the open/close state is all images as well? Different images of door open and closed?
I am asking that because that would apply to blind rollers and curtains as well right?
Thanks
Correct, based on the open/closed state and the state of the light in the room it will display one of 4 images:
- door open light on
- door open light off
- door closed light on
- door closed light off
Which is basically a mostly transparent image with just the door, for example:
You could apply the same thing to your blind rollers too, you would just need a lot of images based on how many you have.
1 Like
@fahr Thanks! I noticed you gave some tips regarding how to use Dim Lights, do we have any new tips or is that remain the same?
@1nutty1 Let us know if you succeeded on that matter or if you got any update as well, since you were the first one mention this. Thanks!!
Thanks! I noticed you gave some tips regarding how to use Dim Lights, do we have any new tips or is that remain the same?
I haven’t actually used this view for a few years and no longer maintain it, so no new tips.
Hello i discover this wonderfull card and tried to deal with it . Yet all my icon when cliqued do thé same action ): the last state icon i enter . Here IS my code . IS there something i did wrong ( by thé way i didn’t also manage to do direct action , the tap-action go to popup if anywome Can give advise too …)
type: picture-elements
elements:
- type: image
entity: light.soleil_switch_1
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/floor/switch.soleil_switch_1.png
"off": /local/floor/transp.png
unavailable: /local/floor/transp.png
- type: state-icon
entity: light.soleil_switch_1
style:
top: 46%
left: 45%
"--paper-item-icon-color": "#fefece"
"--iron-icon-stroke-color": "#9B6D00"
width: 40px
height: 40px
line-height: 40px
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.5)
icon: mdi:ceiling-light-multiple
tap_action:
action: perform-action
perform_action: switch.toggle
target:
device_id: 2004aed44912c3994e86a0c25427d8bd
hold_action:
action: perform-action
perform_action: light.toggle
target:
device_id: 2004aed44912c3994e86a0c25427d8bd
- type: image
entity: switch.salle_de_bain_switch_2
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/floor/led-sdb.png
"off": /local/floor/transp.png
unavailable: /local/floor/transp.png
- type: state-icon
entity: switch.salle_de_bain_switch_2
style:
top: 82%
left: 75%
"--paper-item-icon-color": "#fefece"
"--iron-icon-stroke-color": "#9B6D00"
width: 40px
height: 40px
line-height: 40px
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.5)
icon: mdi:ceiling-light-multiple
tap_action:
action: perform-action
perform_action: switch.toggle
target:
device_id: 2004aed44912c3994e86a0c25427d8bd
hold_action:
action: perform-action
perform_action: light.toggle
target:
device_id: 2004aed44912c3994e86a0c25427d
- type: image
entity: light.led_cuisine
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/floor/switch.soleil_switch_1.png
"off": /local/floor/transp.png
unavailable: /local/floor/transp.png
- type: state-icon
entity: light.led_cuisine
style:
top: 70%
left: 31%
"--paper-item-icon-color": "#fefece"
"--iron-icon-stroke-color": "#9B6D00"
width: 40px
height: 40px
line-height: 40px
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.5)
icon: mdi:led-strip-variant
tap_action:
action: perform-action
perform_action: switch.toggle
target:
device_id: 21091b04404166120d8946a8ee90e2e8
data: {}
hold_action:
action: perform-action
perform_action: light.toggle
target:
device_id: 21091b04404166120d8946a8ee90e2e8
data: {}
- type: image
entity: switch.plan_travail_cuisine_switch_1
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/floor/switch.plan_travail_cuisine_switch_1.png
"off": /local/floor/transp.png
unavailable: /local/floor/transp.png
- type: state-icon
icon: mdi:light-flood-down
entity: switch.plan_travail_cuisine_switch_1
style:
top: 55%
left: 25%
"--paper-item-icon-color": "#fefece"
"--iron-icon-stroke-color": "#9B6D00"
width: 40px
height: 40px
line-height: 40px
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.5)
tap-action:
action: toggle
- type: image
entity: switch.plafond_cuisine_switch_1
style:
top: 50%
left: 50%
width: 100%
state_image:
"on": /local/floor/switch.plafond_cuisine_switch_1.png
"off": /local/floor/transp.png
unavailable: /local/floor/transp.png
- type: state-icon
entity: switch.plafond_cuisine_switch_1
style:
top: 55%
left: 32%
"--paper-item-icon-color": "#fefece"
"--iron-icon-stroke-color": "#9B6D00"
width: 40px
height: 40px
line-height: 40px
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.5)
tap_action:
action: toggle
icon: mdi:lightbulb-alert-outline
title: Plafond
- type: image
image: /local/floor/cover.store_cuisine_rideau.png
style:
left: 50%
top: 50%
width: 100%
state_image:
"on": /local/floor/cover.store_cuisine_rideau.png
"off": /local/floor/transp.png
entity: cover.store_cuisine_rideau
- type: state-icon
style:
left: 31%
top: 36%
"--paper-item-icon-color": "#6699ff"
"--iron-icon-stroke-color": "#9B6D00"
width: 40px
height: 40px
line-height: 40px
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.5)
entity: cover.store_cuisine_rideau
icon: mdi:blinds
tap_action:
action: perform-action
perform_action: cover.toggle
target:
device_id: a4050ec9d1e08411351df180c849ff7b
- type: image
style:
left: 50%
top: 50%
width: 100%
image: /local/floor/cover.store_salon_rideau.png
state_image:
"on": /local/floor/cover.store_salon_rideau.png
"off": /local/floor/transp.png
unavailable: /local/floor/transp.png
entity: cover.store_salon_rideau
- type: state-icon
style:
left: 47%
top: 36%
"--paper-item-icon-color": "#6699ff"
"--iron-icon-stroke-color": "#9B6D00"
width: 40px
height: 40px
line-height: 40px
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.5)
entity: cover.store_salon_rideau
icon: mdi:blinds
- type: icon
icon: mdi:cctv
entity: camera.salon
style:
left: 45%
top: 60%
"--paper-item-icon-color": "#fefece"
"--iron-icon-stroke-color": "#9B6D00"
width: 40px
height: 40px
line-height: 40px
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.5)
title: Cctv
- type: icon
icon: mdi:cctv
entity: camera.terrasse
title: Cctv
style:
left: 25%
top: 25%
"--paper-item-icon-color": "#fefece"
"--iron-icon-stroke-color": "#9B6D00"
width: 40px
height: 40px
line-height: 40px
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.5)
image: /local/floor/eteint.png
I think you may have missed the important 2nd bullet point here: Creating an Interactive 3D Floorplan in Home Assistant - Automate The Things
For each light overlay set the
tap_actionandhold_actiontonone. If you do not do this, the entire image will be clickable and only toggle the last overlay in your list. Instead we will add a light toggle of a small transparent square that will sit on top of the light in the picture. This way we will be able to click on a small portion of the image to toggle the state of the light.
