Ok, got it, thanks. I don’t think it’s due to the custom card. Changed it to horizontal-stack and still takes 10 seconds to switch from one view to another. I’m starting to think it has to do either with the size of images or the views, since they are quite large.
For what it’s worth, I tried out the state-switch card and replaced my conditional cards and it works exactly the same. The floorplan changes instantly. So I’m not exactly sure what’s causing your particular issue.
---
title: Floorplan
path: floorplan
panel: true
icon: 'mdi:floor-plan'
cards:
- type: horizontal-stack
cards:
- type: custom:state-switch
entity: input_select.floorplan_floor
states:
"1st Floor": !include _floorplan_first_floor.yaml
"2nd Floor": !include _floorplan_second_floor.yaml
Thank you for testing. As said, I’m leaning towards the size of the images. I’m following this way of including pictures and blending them, and seeing as each image is around 3MB in size, I’m really leaning towards the time it takes to load all this as the cause.
Just want to say thanks for this amazing guide and I have created a 3d floorplan and have it working with my home assistant.
1 Like
Glad to hear it was helpful!
Nice tutorial Aaron, I was looking for some information about state of a offline device but couldn’t find anything, that’s how i stumble on this topic. The information I was looking was not here either, but I figured out with trial and error on my 3D floor plan dash.
When one of your devices gets offline by removing it or just because of a failure, you get a broken image over your whole floor plan and that looks ugly since it covers whole 3D plan.
To fix that you need to add an ‘unavailable’ state in your code.
For example:
state_image:
"on": /local/floorplan/kitchen_on.png
"off": /local/floorplan/transparent.png
"unavailable": /local/floorplan/transparent.png
It is up to you if you want to add in your first post.
Now I am looking for curtain switch states, so I can play with closed and open curtains/roller shutters in my plans.
4 Likes
That’s a fantastic tip! I’ve actually had some entity that’s been unavailable in my floor plan for over a month but I’ve been too busy to look into it. It resulted in exactly what you described, a large broken image over your floor plan.
I used your example and added an unavailable state to each entity one by one and found out which one was causing the issue. Thanks so much for posting this, I will definitely update the blog post and credit your post here for the solution.
I’m thinking it might be nice to somehow call attention to it. In my case it was unavailable because I had renamed the entity. So rather than just hiding the problem if there were a way to highlight the entity that was causing the issue with the unavailable state that could be very useful. Perhaps a transparent square with a red border that highlights the element. Going to think about this and try out a few things.
2 Likes
I am glad if it was helpful, I don’t need credits for simple thing like this, I am sure you’d find out too.
About using transparent square with red border, it does not work unfortunately, if the image is small, lets say 50x50pxl it will automatically resize it to the floorplan.
In my case I can see the problem because I use state-icon as well, and when a entity is not available it will grayout.
You are correct that it won’t work for what I call the lighting overlays, but it will work for the toggles. e.g.
type: picture-elements
image: /local/floorplan/first_floor_lights_on.png
elements:
# Lighting Overlays
- type: image
entity: switch.front_porch
tap_action: none
hold_action: none
state_image:
"on": /local/floorplan/transparent_square.png
"off": /local/floorplan/first_floor_front_porch_lights_off.png
"unavailable": /local/floorplan/transparent_square.png
style:
top: 50%
left: 50%
width: 100%
# Light Toggles
- type: image
entity: switch.front_porch
tap_action:
action: toggle
state_image:
"on": /local/floorplan/transparent_square.png
"off": /local/floorplan/transparent_square.png
"unavailable": /local/floorplan/unavailable.png
style:
top: 32.2%
left: 59.1
Which results in this when the entity is unavailable:
Oh right, you don’t use state-icon, I would love to do like yours too, but I have some limitations, I have to show HA Dashbord on a tablet which is vertically mounted on the wall and our living room is crowded with a lot lights and other stuff. I am only couple days on HA, before I was using smartlife app. I couldn’t even add some extra stuff on the floorplan like sensors and thermostat because of the crowded information, by using state-icons I can point it out where to click.
This is how my floorplan looks:
I have to come up with nicer setup, picture-elements is great, I used even for our cat’s to see if they are out or in.
This is the tablet I am talking about, it is (only) 7 inch old Samsung Tab 4 which hangs there last 5 years, and I will get a 10 inch one which fits in that spot and 3D print a holder for it:
2 Likes
Very nicely done, your setup looks great! I agree that the 3d floor plans really don’t translate well to small screens. It’s basically unusable on my phone.
1 Like
Your setup looks really cool. A bit off-topic: how did you achieve tracking your cats? Fit them with a GPS collar?
@fahr Thank you, yes it is little hard to get everything on one screen, I want only one dash too. Added power usage of the house today and temperature and it made even more crowded, that’s why I need a 10 inch tablet met high resolution.
@CDRX2 Thanks, We have a Sureflap cat door connect and using a integration to make that happen, I am the first one with overlay images I believe, it is basically same as the switches, only inside and outside images are separate thus 4 images for 2 cats.
Hello! Thank you for the post and tutorial.
I was wondering, would you mind sharing your image files? I’d like to try the tutorial out before I do my actual house.
Thanks for the info! Would be a fun thing to add sometime, but I still need to finish many other projects (like my UI) first.
Quick update on my delay switching floors. I actually went around it by using a custom:swiper-card that each show a floor. No more button to push, no more delay, a simple swipe and a simple 3D animation are now my way of switching from 1st to 2nd floor.
Great work, can the following operations be detailed? do not really understand
“I then created a new layer for each room with the lights off by duplicating the lights off layer and deleting any part of the duplicated layer that was not part of the room I was creating the image for”
thank you,I was trying to understand this
Hello,
i have a large Room with different lights.
We call them:
Light_1
Light_2
Light_3
If Light_1 goes on, then the whole room should shine.
If Light_2 goes on, then the whole room should shine.
If Light_3 goes on, then the whole room should shine.
If 2 from them going on, the whole room s hould shine.
Only if ALL 3 light are off, the room should be dark.
Is something like that possible?
Can i build a groupr or something? Can u give me an example if somehow is possible?
Thx all for supporting
great work,Can you tell me how to do the following：
“binary_sensor.back_door_camera_armed
binary_sensor.camera_back_door_camera_armed
script.camera_toggle_motion_detection”
sorry,english is not my native language.