3rd floor done, how to proceed and looking for improvements...

[Guy-Falkes]

Ok, so here’s another few questions.
Before i ask them, here’s my setup, for now it’s just the 3rd floor:

And the view when things are off with music playing on the PC that's turned on...

I've been looking at the Bitborn video's for many hours now and this is the SVG i've come up with so far.
I've been typing and typing over the exact code he's been using and really, i mean REALLY would have loved to have somthing other then just a video so i could browse though the code, so, in the spirit of sharing, here goes:

zolder_opt.zip

And the CSS that goes with it (not able to upload a CSS directly so here's the zip containing the CSS:
38.zip
Thanks to OzGav for helping me out with coding the temperature text displaying correctly (when the fan is off nothing is displayed and displayed text-color is dependent on the actual temperature)

So here's my questions:

1. Did I mess it up completely? In other words, have i gotten basics wrong somewhere?
2. How do I use extra cards/info like the honeycomb menu to open up or the current media being played?
3. Is there any way to simplify the setup when moving forward to the second or first floors? I've decided on using the same CSS. Is it adviced to use the same SVG as well with different layers or am i better off using a different SVG per floor?
4. How do i use honeycomb menu in here? I've been trying to figure it out but to no avail.
5. Any tips on the coding or when moving forward would be super helpfull. I'm thinking of adding person icons showing my status (reletive to home) and battery status of my phone. Also thinking of how to show this setup on something like a smaller tablet or phone so i can actually use it around the house 🏡 📱

Also, I hope you guys can benefit from the work I've put in so far typing out the Bitborn coding from the video (at least the parts that i got working).

[OzGav]

Firstly I am not a CSS guru so my help will be limited. Also I don't use multi-floors in the one SVG so will just point you to others that have.

1. No I don't think so. Looks pretty good. As I said I am not a CSS guru but just noticed this looked unusual to me service_data: media_player media_player-${entity.state}
   Looks like you don't want t be able to toggle your switches or lights with floorplan?
   At line 62 you have:

                      tap_action:
                        action: more-info

but that appears unnecessary as you have that as the default
Wherever you have action: call-service you can actually remove that as it is the default.
In a couple of places you have:

                      tap_action:
                        action: toggle

No doubt that works but I wondered if you ever have a rule which has multiple types of entities (eg. switches and lights) whether that would have an issue. Personally I always use:

              tap_action:
                service: light.toggle

and if I had multiple types of entities I would use homeassistant.toggle

[OzGav]

2 and 4. That video you are referring to is totally next level so using that honeycomb menu I have not looked at but it is awesome! So can't help you there at the moment
Media playing you might be able to just set a more-info tap action on an icon with the media player entity id.

[OzGav]

3. I am not sure there is a definitive answer to that I think it depends on what you are doing. I don't use multiple images in my SVG. One reason is that it is already 4.5M with one floor due to all the PNG icons I have in it so I don't want it any bigger than I have to. Another reason is I like to be able to switch between my inside and outside view with the icons at the top of HA.

Here are a bunch of discussons on it though and also the link to the offical docs on this topic.
https://experiencelovelace.github.io/ha-floorplan/docs/example-multi-floor/
#23
#31

[OzGav]

5. Look at this thread for inspiration. I have linked to mine for a start which you will see how I show home and away. They are circle pictures of each person with a semi-opaque white circle over the top. I show or hide that white circle depending on away or home.
   https://community.home-assistant.io/t/share-your-floorplan/21315/676?u=ozgav

edit: as for how to show the floorplan on phones etc see he offical docs which explains how to set different SVGs for different screen sizes. I do this.

[sstarcher]

@Guy-Falkes nice work so far. Have you been able to integrate anything like the honeycomb menu? I have been trying to do similar without any success. I would like to use a few icons to overlay, but I may need to just import them into the SVG.

[Guy-Falkes]

Not yet. I've spent way too many hours recently on this project and had to put it aside for a while (also having a family that needs me).
I'm looking forward to integrating more interactivity into the layout, but if I'll be able to get it working is another matter entirely ;)