Hey Fahr!
Thank you so much for this tutorial. I have created my floorplan and picture elements card. I am using state-icon instead of a transparent image in my floorplan as it is easier for my parents to use. The whole picture elements card seems to be clickable tho. I’ve tried adding the hold_action:none in every light overlay but still doesnt seem to work Before this, I tried adding tap action:none and hold_action:none, but that didnt seem to work either. Here is a copy of my config, any help will be appreciated!
I’m pretty sure this is due to the ordering of your elements. I had to go back to my blog post to verify because I thought I mentioned it in there since it’s a gotcha:
Ensure that you put all of your lighting overlays at the top of your view. All of the toggles should be below your overlays. If you do not do this, then you will not be able to click on any of your toggles. So the order matters.
So in your case, all of your state-icon elements need to go below all of the lighting overlay elements.
hello everyone, I have a problem with lovelace, in the iphone open the floorplan but in browser give me error ‘’ You need to define an entity ‘’ what can I be doing wrong ??
gday guys ,
i am just starting home assistant the last 2 weeks and managed to have my floorplan 3d done , it works great in card display on lovelace but not in panel display , only the plan shows but nothing happens when i turn on lights . Any help would be greatly appreciated :)
First of all, thanks for your floorplan. It inspired me to get started on mine, although there are some variations since I wanted to control individual lights as well as groups.
I took your code with the input select to change floors and mine seems to not work as smoothly as yours. When I call the service, the input_select state does change, however the view does not until I refresh my lovelace. I’ve set up an automation to refresh the lovelace view based on the input_select state via browser mod. This works, but takes about 10 seconds to complete.
I’m not doing anything different than what I put in the post. Are you sure you are using a conditional card to display the correct floor based on the value of the input select?
I went the state-switch route. The reason is, I noticed the first floor’s picture-element was moved over slightly to the right in relation to the ground floor, due to the horizontal-stack.
I guess I’ll investigate on that side of things, then… Or if you have a solution for said placement difference due to horizontal-stack, I’m all ears
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.
Before this, I tried adding tap action:none and hold_action:none, but that didnt seem to work either. Here is a copy of my config, any help will be appreciated!
