Floorplan for Home Assistant

PhyberApex · July 21, 2017, 12:53pm

I think someone mentioned way back in this thread that you should only use entity_ids that are lowercase. Maybe that helps? The shapes do not need a special setup besides the id in inkscape.

~Cheers

quadmasta · July 21, 2017, 4:05pm

when I try to use floorplan on my Fire 7 or my Nexus 6 with any browser it toggles the device on/off rapidly when I click on it. This doesn’t happen in Chrome on my laptop. If I somehow do the magic right to get the light to stay on, the behavior reverses. Does anyone else have this issue?

ggravlingen · July 21, 2017, 6:44pm

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.

kevinfcook · July 21, 2017, 6:50pm

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.

heggico · July 21, 2017, 7:03pm

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.

quadmasta · July 21, 2017, 7:15pm

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

jruben4 · July 21, 2017, 7:16pm

Tried removing the capital letters - still doesn’t toggle the fill.

heggico · July 21, 2017, 7:58pm

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

jnvd3b · July 21, 2017, 10:40pm

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.

kevinfcook · July 21, 2017, 10:59pm

Awesome, thanks. Definitely keep me in the loop if you get it working!

quadmasta · July 22, 2017, 3:09am

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

Knapoc · July 22, 2017, 7:37am

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!

ggravlingen · July 22, 2017, 8:17am

Mind sharing the code?

kevinfcook · July 22, 2017, 2:57pm

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!

quadmasta · July 22, 2017, 6:52pm

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.

kevinfcook · July 22, 2017, 9:57pm

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

quadmasta · July 23, 2017, 1:47am

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.

ggravlingen · July 23, 2017, 12:45pm

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.

bloody2k · July 23, 2017, 2:59pm

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?

quadmasta · July 23, 2017, 3:30pm

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?