I have had a decent floorplan layout for awhile where I used a 3D model of my home and have it show when lights are on in each room. I did this about a year ago and the process was pretty simple.
At the time I deigned my home (I used Live Home 3D), grabbed renders with each of my rooms lit and unlit (using Live Home 3D lighting). I then cropped each room as a separate image. In Home assistant using the picture elements card I identified the entity to control (room light) and set an image for on state and off state (room with lights on, room with lights off) and then messed with the margin percentages and size until the individually cropped rooms were on top of my background image which is my whole floorplan with the lights off. It was tedious but worked fine.
I have since decided I want to add more elements to my floor plan. I have also added more lights, so I decided a redo of the HA side was in store.
I am having a hard time figuring out what the best route is to get my goal accomplished. I have found plenty of examples and tutorials on how to do some aspects, but, I cannot seem to find a solid pathway for what it is I want to do. Add to this a lot of what I have found is using several different methods and some seem to be old and not recommended now.
I am hoping someone can get me in the right direction.
My Goal is for my 3D model (top view) to have each individual room lit up when I press anywhere on the image for that room and then for that room to shut off. Here is an example of my floorplan with my kitchen light on. I have images similar for each room individually lit and a floorplan with nothing lit.
I can accomplish my above goal on its own. But, I want to also add Icons with CSS elements representing my other elements in these rooms. I can figure out the CSS stuff on my own I think. My issue really lies with trying to get multiple images to appear with clickable elements to it without it all overlapping and mixing things up.
Also, I have read that I can map the IDs to the individual objects in Inkscape, that seems easy enough, but I am unsure how I actually go about doing this with my whole floorplan to also include the “image” changing from light on to light off.
For example, I can make one single inkscape image with multiple objects in it each with their own ID. My kitchen has a WiFi heater in there. I want to make an icon for the heater so when I click it I can turn it on or off, or if I press and hold I get more options. But I also want it so that when I press on the image area for the kitchen the light turns on and off (by changing the actual image for that room from the render lit to unlit image). I cannot figure out how to accomplish this goal.
I think perhaps my goals are impractical. My guess is I am better off just having lightbulb icons or similar object which then uses some CSS to change the lighting in the room. Keep the room as the background image with everything off. Populate all my icons in all my rooms for all my elements. Have something dedicated to each light that when I press it the visual brightness in the room changes via CSS and not changing to a new background mage. But before I go this route I thought maybe one of you have done this and get me going the way I am hoping to make it work.