This is my setup, still work in progress
7 Likes
Ya, that sounds right that they both should toggle but the long press should toggle just the visibility of the popup you have and not the elements while the second block you have should toggle the state of the group.
I went back and diffed my ha-floorplan.html from the official file and the only customizations I have are the extra script import for longclick-1.0.js and commented out https://github.com/pkozul/ha-floorplan/blob/master/www/custom_ui/floorplan/ha-floorplan.html#L232 with
$(svgElement).mayTriggerLongClicks().on('longClick', this.instance.onElementClick.bind({ instance: this.instance, elementId: elementId }));
Maybe you need to comment out the following line?
$(svgElement).on('click', this.instance.onElementClick.bind({ instance: this.instance, elementId: elementId }));
hey, do you have your code on github?
Not yet, I’m still tweaking it. When it’s complete I will upload code to github.
Would you mind sharing how you toggle both the light image and the overlay with one press?
in your floorplan.yaml, add these lines to toggle on and off
- name: Lights
entities:
- light.light1
- light.light2
- light.light3
states:
- state: ‘on’
class: ‘light-on’
- state: ‘off’
class: ‘light-off’
action:
service: toggle
Thanks for posting this example @Zepixir (post 305). I’ve used your example as a starting point but can’t figure out how to keep the label on the button from changing from on to off when I click it. Any ideas? thanks
Yes, the script was meant as an entity_id to a button, not a text template. Since the script turns off when it’s finished with the job, it will change to off pretty fast. If you need to have a text template for all your lights, meaby you should have your group all lights as text template instead. then it will be on if one or more of your lights is on, and off if all your lights is off.
Thanks for your reply, I can’t believe I’ve spent so much time trying to get this to work. Maybe I’m using the wrong terminology I never want the text on my onClick Button to change.just execute the script. In inkscape I have a text field over the button that says All Lights On/Off it should always say that but that text never shows up because it says Off. I am gonna research text template today. Thanks again
Ah, okey, then I understand the problem. You have given the entity_id to the text, which cannot be excecutet (or there’s to small lines to be pressed on). What I recommend you to do, is to remove entity_id from your text. Just name it whatever. Then make a rectangle or circle over your button, then give it opacity 0. Then you have a transparent circle or rectangel above the button. Then give the entity_id to that. When that is done, you can click on your button (which is visible) but you are really pressing on the invisible circle or rectangel.
I think I’ve done that at least a few times maybe you can spot something else that I not doing correctly.
Maybe I have the onclick event wrong? At this point the label displays but the onClick doesn’t work. FWIW the Refresh button works. Thank you for spending time with me.
First, your ID for your group is wrong. It should be script.all_lights_toggle, not all_lights_toogle.
But if you just do that, I think you will have problem pressing your button where the text-field is. Therefor you would want to make an extra rectangel over Lights On/Off button, which should be directly under floorplan layer (not in your all_lights_toggle group). Then give that the id script.all_lights_toggle, and make it opacity 0. No problem helping, we are on the forum to help each other 
Tried to make a clean example here, where you can see the invisible rectangle have id script.all_lights_toggle, and its the rectangle which is marked outside the button:
Edit: I see you use the onclick function, I do not use that at all. Just delete that, cause as long as you have the script in floorplan.yaml and have the script as your ID you don’t need any interactivity. You make the actions in floorplan.yaml anyways 
Thank you so much that worked. I would never have figured out the separate rectangle.
It brings up a pop up where I need to press execute to actually run the script, can that be eliminated and just run the script from one click?
That’s great
Yes, you just need to adjust the script and floorplan.yaml:
Script:
all_lights_toggle:
sequence:
- service: homeassistant.toggle
entity_id:
- light.lys_spisebord
- light.lys_spotter_stue
- light.lys_spotter_kjokken
- light.lys_sofa
- light.dining_backlight
- light.hue_bloom
- light.tv_backlight
- light.lightstrip_kitchen
floorplan.yaml:
- name: Toogle script all lights
entities:
- script.all_lights_toggle
action:
domain: homeassistant
service: togglePERFECT! I learned so much! THANKS
1 Like
No problem
Thanks for the response
In the example I was replying to, he changed two entities on the floorplan by clicking on one light (an overlay opacity and the fill colour on a light indicator).
I ended up creating a dummy group for each light to achieve a similar effect; was hoping for a neater solution…
Here’s a couple months worth of work. Big thanks to @j4Media for the inspiration! Basic overview is weather on the left, buttons on the right and status across the bottom. The 4 circle icons across the bottom change color based on status (red for open or on, HVAC changes color based on off [green], cooling [blue] or heating [red]) and the trash and recycle icons change to red when it’s trash and/or recycle day.
30 Likes
That looks great! Well done.
That’s freakin awesome!