It seems to work today, although if anyone has a better way of making an icon flash please let me know.
Been working on a themed floorplan based off of some great UI design work I’ve seen previously.
long press popup where the hass floorplan group is toggled on
7 Likes
@tknp Hi! I love the flooplan! I’m working on my own floorplan and was just wondering if you could share how you used long presses to trigger things?
@pplucky We moved to a new house, I will have to see if I still have that old config laying around somewhere
@Jyckle thanks for the kind words. I posted about how I got long presses working in a separate thread at Does floorplan have the ability to detect a long press?. With that addition, you should be able to toggle layers represented by group objects in your svg floorplan.
My floorplan.yaml then has entries like this:
elements:
- group.room_office
action:
domain: class
service: toggle
data:
elements:
- popup.room_office
classes:
- office-on
- office-off
default_class: office-off
and my css file has the on and off state as just toggling the display element
.office-off {
display: none;
}
.office-on {
display: inline !important;
}
1 Like
@tknp Thanks so much for the quick response! One more question for you- so with your setup, is there a way to distinguish between a short and a long press? Like would it be possible to have a short press toggle the lights and a long press pull up that menu?
@Jyckle yup, that’s exactly the behavior I was after and that’s what you should get with what I posted in that other thread. I have short taps to the room toggling entire groups (all lights in the room) on and off like normal and have a contextual popup show up for long presses that supports toggling the individual elements of the groups (single lights).
1 Like
@tknp That’s brilliant! I think this is my last question, and thanks again for the help. So in your floorplan.yaml file, what distinguishes the action that runs on the short press from the action that runs on the long press? For example, if I have
- name: Long Press Room elements: - group.my_room action: domain: class service: toggle data: elements: - popup.my_room classes: - layer-visible - layer-hidden default_class: layer-hidden
And then I also have
- name: Rooms entities: - group.my_room states: - state: 'on' class: 'room-on' - state: 'off' class: 'room-off' action: domain: homeassistant service: toggle
Then how do I get the long press action to only respond to long clicks? Currently they both just toggle when I press the element. Thanks so much for your help!
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.