New HA Floorplan Setup Issues

[sturtester]

I am attempting to setup a new HA floorplan as a frontend for my house but for some reason by CSS doesn't seem to be properly loading for the entire yaml configured entities. I have done a lot of research on this and just cannot figure it out. It is either the first view elements in the yaml rules section actually get loaded properly or they are randomly loaded even though they have identical syntax. I have uploaded my yaml config, CSS and SVG files that I am using. I have also tested this in multiple browsers (firefox and chrome) and devices (windows and android) with the same issue. Any help would be greatly appreciated.
my_home.txt

yamlconfig.txt

[OzGav]

What do you mean by

doesn’t seem to be properly loading for the entire yaml configured entities

[sturtester]

So there seem to be two different issues going on that I am experiencing. First some of the elements aren't being identified for the hover and tap condition. For example the garage element from the svg doesn't load as a element that I can interact with at all. It doesn't load any errors in the log while loading and while inspecting the html in my web browser I can fine the garage ID entity from the SVG but the hover and tap edits are not there like they are for other intractable rooms.

The second similar problem which is affecting almost every svg element is the entity status code from the yaml meant to change the css class of the element depending on if the light is on or off. In the css the opacity is set to .7 when off and transparent when on. The on or off opacity isn't being set at all and the elements is remaining the default values set from inkscape. I also looked though the html for the svg element IDs and the class changes for the elements were not being set at all. If this doesn't make sense I can provide some gifs of the issues I am having on my ha server.

[exetico]

Have you checked my videos where I explain how ha-floorplan are working, and how you should work with it?

I think yours mixing and shaking multiple issues at once.

Try and run a bare minimum SVG, and a bare minimum CSS file, and share SVG, CSS and YAML here, if you're still facing problems at that point.

Let's taggle the errors one by one, instead of trying to resolve all of them at ones. The problem is mostly related to a user error, but we'd like to help you out. However, by limiting the amout of things, it's easier to taggle each of the issues with the proper overview and insights 😊.

[OzGav]

This is good advice for you.what I would add is that you should note that to interact with elements you have to make sure that there aren’t any other elements which are are in a higher layer above them (or in the same layer but higher up the layer order). For example, you could have everything done perfectly but then put a large transparent rectangle over everything and you would not be able to interact with anything although you would be able to see any CSS changes.

[sturtester]

It's very strange. I did start with the initial setup video/ provided attachments and was able to get it working but once I started making changes to my own floor plan that I had made following the instructions suddenly it wouldn't work. But only for the set class entity on or off variable. And in the CSS that class would change the transparency for the layer for that room. I was able to get it all completely functional in the instructions. I was able to find a workaround for my issue. I noticed that whenever I would have the yaml file replace an image that would work perfectly for every element. For example the light bulbs would be replaced depending on if they were on or off. My workaround was to create a replacement image for every room in room in my SVG and just replace the transparent element to opaque or transparent depending on if the light is on or off instead of relying on the CSS. I'm not exactly sure what I'm doing wrong with the CSS setup and why it would work in the demo but not when I am trying to set it up for my own floor plan.

[OzGav]

Just looked at your yaml and you are using style set instead of class set. That is likely the issue