Hoping for a little help on an issue I’ve run into.
I’m building a floorplan-based dashboard. This particular view is for control of sonos via the sonos-card and some AI help I have a shell of what I want to do in a working state currently.
However, I’m having difficulty with making the floorplan interactive.
I have the floorplan with overlays (made via layers on Photopea) that light up when that room is selected. That part works.
I now want to make the floorplan “clickable.” i.e. touch the room to add it to the group playing music. After doing some research, I was recommended to again create "hotspot"outlines of each room via photopea (same size as base image, opaque over the “room” with rest of the image transparent). These images are then placed on top my base image and made transparent (opacity=0).
What seems to be happening is that the “top” layer (i.e. the last layer in the yaml file) it “catching” all the click – despite the rest of the image being “transparent.” Is there a way to pass that click down to the layer that is not transparent?. Thus no matter where I click on the map, it ONLY toggles the one zone.
Assuming this is the case - I’m not sure how to get around this. The only thing I can come up with is make these overlays “actual size” (instead of a full/same size as the underlying map) and then positioning them directly over the room I want and making them transparent (just like you would with an icon).
Are you doing this using the picture elements card? If yes, then there is a hierarchy to the order of your images. Other than that consideration, it should be as simple as adding another image layer under the elements, but include an input_boolean helper as the entity and a tap action to toggle the helper with state_image set with “on” and “off” for your border highlighted room zone. Then you could setup a choose block with trigger ID automation and use the state (trigger) of the helper to add your media player to the group or remove it from the group. At least… that’s what I would try.
Used photopea to make “layers” which allows me to highlight the selected rooms (dining room highlighted here, obviously) based on booleans as you had suggested. That part all works.
The part I’m having trouble with is making it “clickable.”
My attempt to do that (with some AI suggestions) was to create independent images from the photopea layers, set their opacity to transparent.
So I did that - have 5 or 6 layers. I guess my understanding was that any area that is “transparent” on the image would NOT register a click. Thus you could layer all the rooms one on top of the other, and then if you click on the living room that wound toggle the living room on and off. Same for Dining room etc.
But it doesn’t seem to work that way. “Deck” is my last layer - now anytime I click ANYWHERE in the image it toggles the deck. If I remove the “deck” layer from the yaml, now a click anywhere triggers the “new” last layer.
Does that make sense?
==============================================
So I’m not sure where to go here. One option (I think) would be to create a transparent overlay “cutout” the size of each room and then use the style/top/left to position that block overtop the room. That was my plan for the time being.
I’m not fully understanding your suggestion - would it be easier than that? (my idea seems like a lot of work, tbh)
I get that - I think the issue is that part of the layer I need to be clickable. I think it’s an all-or-nothing situation.
It was my (apparantly incorrect) understanding that a “transparent” area on the image would not register a click.
I think what I’m going to need to do is create transparent overlays for each room that are only the size of the room and positioned appropriately overtop of each room.
Are all of your image layers styled with top: 50%, left: 50%, width:100%? Cause that definitely makes dealing with this more challenging from a photo editing perspective. I would try making a universal “off” image that is a 1x1px transparent block. Then, each specific room needs cropped to a smaller size, which (in my mind works, but it could be bogus lol) should allow you to custom style the image top, left, width of each specific room (like you do with state-badges and state-icons). As long as the images don’t clash, it should work, I would think. I might have to give this a try on my floorplan to see.
EDIT - Just tried it with two rooms. It works. Got to be careful with the browser cache, though, during testing. When you load one image, the cache holds onto it. So, if you don’t like it and you replace it with another attempt, make sure you clear your cache so the results appear correctly.
I have another floorplan image that does exactly this with icons - icon overlays the room, click the icon and it works just fine. I was figuring I could do that with a square-ish room overlay as well, so I think that’s where I’m hearing. Gonna work on this today.
Thanks for the reminder about the cache as well - that’s tripped me up before so good reminder.
Awesome! You’re very welcome! I’ve been putting off making my floorplan more dynamic to the state of things in my house. Helping you reinvigorated my interest lol. I now have room zones, appliances, and entrypoints implemented. lol
