Same here sometimes, and also in Chrome on my computer. Haven’t been able to figure out yet why the software interprets my tap as a double click. 
1 Like
This happens to me as well. I’ve noticed that if I tap quickly, everything stays on/off. If I do a longer tap, it looks like the icons get highlighted. Then, when I release my finger, the light quickly cycles.
Thanks for this, I’ve been trying something similar to this. I’ve had a look at the code, but it seems only toggle is currently supported? Is there currently a way to have multiple buttons each selecting a single layer, disabling the others?
Example:
- Ground floor button -> show layer_ground_floor, hide layer_first_floor and layer_second_floor
- First floor button -> show layer_first_floor, hide layer_ground_floor and layer_second_floor
- Second Floor button -> show layer_second_floor, hide layer_ground_floor and layer_first_floor
I’ve never done anything with html/css, so not sure how to handle this.
I’ll fork floorplan later and see if I can “debounce” the click action. Looks like it’d just need to go here: https://github.com/pkozul/ha-floorplan/blob/master/www/custom_ui/floorplan/ha-floorplan.html#L747
2 Likes
Tried removing the capital letters - still doesn’t toggle the fill.
Ok, I already found a way to do what I want. Is there a better/easier way to do this?
I’ve made a test svg file and ended up with this:
My floorplan.yaml now contains the following:
- name: OverView
elements:
- overview_button
action:
domain: class
service: select
data:
elements:
- id: layer_1
class: layer-visible
- id: layer_2
class: layer-hidden
- id: layer_3
class: layer-hidden
- name: Ground Floor
elements:
- ground_floor_button
action:
domain: class
service: select
data:
elements:
- id: layer_1
class: layer-hidden
- id: layer_2
class: layer-visible
- id: layer_3
class: layer-hidden
- name: First Floor
elements:
- first_floor_button
action:
domain: class
service: select
data:
elements:
- id: layer_1
class: layer-hidden
- id: layer_2
class: layer-hidden
- id: layer_3
class: layer-visible
Next I’ve added this to the action.service switch in the onElementClick(e) function:
case 'select':
for (let otherElement of action.data.elements) {
let otherSvgElement = $(svg).find(`[id="${otherElement.id}"]`);
let otherSvgElementclass = otherElement.class;
$(otherSvgElement).removeClass().addClass(otherSvgElementclass);
}
break;
This allows me to specifically select which class each element should have when pressing a button. This seems to work, but since this is the first I’ve seen from css I’m not entirely sure that this is an acceptable solution. Does anyone have an issue with this?
-edit- issue 1 found, it refreshes after a while and since they don’t have a default class they are all shown on top of each other
-edit 2- which can be worked around with by adding this as a group:
- name: Defaults
elements:
- overview_button
action:
data:
elements:
- layer_2
- layer_3
default_class: layer-hidden
Not the prettiest, but it seems to work 
1 Like
FK is working well for me now but I guess I am going to have to pay for the Plus account in order to lose the watermark.
1 Like
Awesome, thanks. Definitely keep me in the loop if you get it working!
I added some debug statements and found that in grouped elements there are multiple events that fire immediately upon click. I tried putting in some simple code to set a boolean flag to proceed/not proceed based on if something else was already executing and it’s happening too fast to stop the second one from coming in. It seems to have fixed the issue with the other elements but it definitely bears some more investigation. Any help is appreciated
1 Like
Hey, first of all thanks for the great work.
Just tried to implement the dynamic weather icons in my floorplan. The sensor info will be displayed when I click on the placeholder, but the icons don’t get replaced. Already cleared the cache and checked the developer console to no avail. Thank you!
Mind sharing the code?
Interesting discovery. In my floorplan, I don’t have any grouped elements for the light bulbs, etc so I don’t think that’s the issue I’m having. I’ll try to do some debugging later today as well and let you know what I find!
The regular non-grouped elements work flawlessly with the debounced code. It’s just the grouped elements that have a problem. I’m still tinkering with it.
Re: issue where multiple clicks are being registered for SVG elements on the floorplan and turning lights off and right back on again or vice versa.
I don’t have any grouped objects at the moment to try on (going to create some a bit later to test with). However, I did get my single object elements to work perfectly every time by making a fairly simple change. I changed these lines: ha-floorplan/www/custom_ui/floorplan/ha-floorplan.html at master · pkozul/ha-floorplan · GitHub from:
$(svgElement).on('click', this.instance.onEntityClick.bind({ instance: this.instance, entityId: entityId }));'
$(svgElement).on('touchstart', this.instance.onEntityClick.bind({ instance: this.instance, entityId: entityId }));
to
$(svgElement).on('click touchstart', this.instance.onEntityClick.bind({ instance: this.instance, entityId: entityId }));'
and I changed these lines: ha-floorplan/www/custom_ui/floorplan/ha-floorplan.html at master · pkozul/ha-floorplan · GitHub from:
.on('click', this.onEntityClick.bind({ instance: this, entityId: entityId }))
.on('touchstart', this.onEntityClick.bind({ instance: this, entityId: entityId }))
to
.on('click touchstart', this.onEntityClick.bind({ instance: this, entityId: entityId }))
and I added the following to the function here: ha-floorplan/www/custom_ui/floorplan/ha-floorplan.html at master · pkozul/ha-floorplan · GitHub
onEntityClick(e) {
e.stopPropagation(); e.preventDefault();
…
I followed the advice of this Stack Overflow thread.
The issue is that the tablet was (for some reason) reacting to both the “click” and the “touchstart” events. So, the event was firing twice. The stopPropagation() and preventDefault() functions only allow the function to run once per click which solves our issue.
@pkozul: what do you think? Is this the best way to go about doing this?
Disclaimer: I suck at javascript, but I’m learning! 
cc: @ggravlingen
2 Likes
the stop propogation may have unintended side-effects so I’d shy away from that.
Just searching through the code there are multiple places with there are bindings taking place. I didn’t dig too deep to figure out if there is load/unload taking place that may need to reattach bindings but that may be a source of issue.
I did steal your binding and made my lock smarter and it seems to work 100% of the time now, even with the grouped elements.
PR created:
If you want to test this out before the PR is merged you can just replace the whole of ha-floorplan.html with the copy in my repository.
1 Like
I’ve banked on the people who’s plans change color of the entire room when lights are changed plus the new layer feature. The default behaviour of my plan is now that you click on a room and the ceiling lights are turned on. Click again, and they are turned off.
If instead you enable the layer containing the light settings (see my plan above) and tap the room, the settings for that light show up. This way, I don’t have to go back to the HASS GUI in order to change for instance dim levels.
Hi!
I’m trying to get this to work, but i’m getting these error in dev-tool in Chrome
ha-floorplan.html:857 Uncaught ReferenceError: $ is not defined
at HTMLElement.error (ha-floorplan.html:857)
at HTMLElement.handleWindowError (ha-floorplan.html:173)
error @ ha-floorplan.html:857
handleWindowError @ ha-floorplan.html:173
ha-floorplan.html:144 Uncaught ReferenceError: moment is not defined
at WebSocket.hass.connection.socket.addEventListener.event (ha-floorplan.html:144)
hass.connection.socket.addEventListener.event @ ha-floorplan.html:144
ha-floorplan.html:857 Uncaught ReferenceError: $ is not defined
at HTMLElement.error (ha-floorplan.html:857)
at HTMLElement.handleWindowError (ha-floorplan.html:173)
I got my HASS installed with an password for acesscontrol, could it be because of this?
And where do I put my password in the Floorplan config?
My changes seem to make the Fire even more unhappy. They worked fine on desktop and on Chrome on my Nexus 6.
Will having warnings enabled show javascript errors or just configuration errors?
Stupid question but did did you also install the js-files in the lib-directory?
@quadmasta I haven’t pulled your fork in yet, but it looks like your code is better than mine since it doesn’t rely on stop propagation. However, I have been running the code I posted for 24 hours now and it hasn’t had any unintended side effects.
Having warnings enabled only show HA related errors (like having an element configured in the floorplan.yaml file but not in your floorplan.svg file). It doesn’t show JS errors.