Still in the process of testing, figured out that it doesn’t have to do with the type of card used, as I reverted to horizontal-stack per your setup and did not speed up the floor change.
However, I do have one question: in your code, you have an underscore in front of the included files: !include _floorplan_second_floor.yaml Is there any specific reason for this?
The reason I started with an underscore is just a reminder to me that it’s a view to be included and not a main tab that shows up in my lovelace dashboard. So it’s just a personal naming convention. Haven’t had a chance yet to look at the custom card you are using but hope to this week.
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.
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.
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.
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.
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.
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.
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:
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.
@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.
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”
