Floorplan for Home Assistant

Hi @pkozul,
in the upper left I’ve addedd alarm control panel the icons, in order:

  1. Alarm on/off
  2. Light Alarm on/off (Telegram notification for outside camera motion)
  3. Out of home
  4. Alarm siren enabled/didabled
  5. Light enable/disable (if enabled when alarm is activated even the home lights are turned on)

On each room I have an icon (small bell) indicating whether motion detection is active for the room, alarm activation side.
Each room becomes red on motion detection, as well as windows if they are open.
The small arrows are for the windows cover, up, down and stop.
Finally each room have a temperature/humidity sensor and outside the home I have also a lux sensor.

Regards
Alessandro

Same here but only on a touchpad based usage. e.g. Chrome on my nexus 7 tablet. Don’t know how to fix this yet.

~Cheers

I don’t think hover is a good idea. At least for me. I plan on mainly use this on a touchpad where there is no hover. Which would make it hard to get those menus to appear. Next issue I see so far is that you need a placeholder. It would be neat if we could ‘somehow’ make it more dynamic. Right now this does not save any space if I understand correctly.

@ggravlingen To get rid of the pop up you could just use the action in floorplan.yaml no? Just use input_boolean.toggle as action then you won’t get that popup.

~Cheers

1 Like

@pkozul @CCOSTAN @PhyberApex This is how I ended up doing it. It works, although it will require some more testing:

Functionality, cilck the sun in the left column and the three suns appear. Click again and they dissapear. Each of the suns are linked to a HASS-scene or script.

Added to ha-floorplan.html under the handleEntities-method

          if (entityConfig.group.layer_toggle) {
             var targetLayer = entityId.split('.')[1] + "_layer"
             var svgShape = $(svg).find('[id="' + targetLayer + '"]')[0];

              if(entityState.state == 'on'){
                svgShape.style.display = 'inline';
              }else {
                svgShape.style.display = 'none';
              }
          }

floorplan.yaml:

        - name: Button 1
          entities:
            - input_boolean.floorplan_toggle_ceiling_button
          layer_toggle:
              layer: 'floorplan_toggle_ceiling_button_layer'
          action:
            service: toggle

        - name: Button 2
          entities:
            - input_boolean.floorplan_toggle_sonos_button
          layer_toggle:
              layer: 'floorplan_toggle_sonos_button_layer'
          action:
            service: toggle

The id’s of the layers (that are hidden by default in my floorplan.svg) are floorplan_toggle_sonos_button_layer and floorplan_toggle_ceiling_button_layer. I couldn’t find where in Inkscape to change this so I edited manually.

The layer attribute in the yaml is not actually used for anything so I’ll try to amend to code so that it doesn’t have to be there. Also, I’m sure you don’t need to put the stuff in two groups if I figure out how to merge them and get the code to work.

3 Likes

I don’t really get what your are doing there but couldn’t you just either use it like so:
ha-floorplan.html

          if (entityConfig.group.layer_toggle) {
             var targetLayer = entityId.split('.')[1] + "_layer"
             var svgShape = $(svg).find('[id="' + targetLayer + '"]')[0];

              if(entityState.state == 'on'){
                svgShape.style.display = 'inline';
              }else {
                svgShape.style.display = 'none';
              }
          }

floorplan.yaml

        - name: Button 1
          entities:
            - input_boolean.floorplan_toggle_ceiling_button
            - input_boolean.floorplan_toggle_sonos_button
          layer_toggle:
          action:
            service: toggle

OR like this:
ha-floorplan.html

          if (entityConfig.group.layer_toggle) {
             var targetLayer = entityConfig.group.layer_toggle.layer
             var svgShape = $(svg).find('[id="' + targetLayer + '"]')[0];

              if(entityState.state == 'on'){
                svgShape.style.display = 'inline';
              }else {
                svgShape.style.display = 'none';
              }
          }

floorplan.yaml

        - name: Button 1
          entities:
            - input_boolean.floorplan_toggle_ceiling_button
          layer_toggle:
              layer: 'floorplan_toggle_ceiling_button_layer'
          action:
            service: toggle

        - name: Button 2
          entities:
            - input_boolean.floorplan_toggle_sonos_button
          layer_toggle:
              layer: 'floorplan_toggle_sonos_button_layer'
          action:
            service: toggle

The way you described seemed like a weird mix to me :slight_smile:

~Cheers

EDIT: fixing copy-pasta

1 Like

Really like the way you went there with the layers. That means we can have overlays! The only problem I see is in syncing right now if I were to press that button the menu would appear on ALL displays if I understand correctly how this works. Not an issue for me but something to consider.

~Cheers

PS: Sorry for the reply spam but I wanted to have this seperated.

Yes, I know it looks confusing but I couldn’t get it to work otherwise. I’ll try to fix the code up a bit.

Just tested this on my computer with the iPad open and yes, you’re right. Opening a panel on the computer also opens it on the iPad. It’s not an issue for me either but it might be for others.

1 Like

@CCOSTAN I listened to all 4 episodes today. Very nice! One question if you don’t mind about your use of WallPanel. If I understood you correctly, you have your Fire tablet setup to turn on the screen when someone walks by, using the Fire’s camera as the sensor is that correct? I thought I read that wasn’t possible in the WallPanel thread but I haven’t tried it yet.

@pkozul I have another idea/request for you :slight_smile:

Several of us are using/planning to use Floorplan on a tablet with a smallish screen. For me personally, the icons representing my lights, etc are fairly hard to hit on the first try with my finger. Is there any way to expand the “clickable” area of the icons? It would be awesome if there was an option we could configure that would create an invisible area above the icon to click, thats x% larger than the original icon.

For example:

- name: Lights
  entities:
    - light.balcony
    - light.closet
  states:
    - state: 'on'
      class: 'light-on'
    - state: 'off'
      class: 'light-off'
  action:
    service: toggle
  expand: 200%

Think it’s possible?

Thanks!

Couldn’t you just use a group with a invisible (alpha) rect and your icon?

~Cheers

1 Like

This solution worked for me! :thumbsup:

1 Like

The most non-intrusive way would be to create this in the SVG file. It’s probably better to do this sort of stuff in the SVG rather to add functionality for this in the floorplan and its config.

I’m pretty sure you can achieve what you want by adding a new shape to serve as your clickable area, and make it transparent.

See how you go.

2 Likes

Floorplan v1.0.2 now ready on GutHub. Made some performance improvements. In Google Chrome, the floorplan loads up much faster now. Not sure if the improvement is obvious on mobile devices / tablets.

2 Likes

I was using wallpanel. The issue is that wall panel would wake the Firetablet to JUST the lock screen and you would still have to swipe up. I am experimenting with @pkozul around using a new browser called Kiosk Fully Browser. This browser allows you to DIM the screen and then wake up to Floorplan as you walk up to it. So far, it is working really good.

Stay tuned for an updated write up.

3 Likes

That’s funny I started out using that and then thought I’d try Wall panel. Guess I will switch back

1 Like

I also recently switched back to Kiosk Fully Browser on my FireHD, however I can’t get Floorplan to load (spinner just keeps on spinnin’)

Did you run into this with your tablet? I even tried side loading Android Webview, no dice

No issues at all… Have you enabled warnings:? Then try on various browsers and make sure you aren’t missing something.

I do have warnings: enabled in floorplan.yaml. Should the warnings show up with in the HA warnings and errors area (About page) or in Chrome Dev Tools?

It works great on browsers on other devices, just not on this Fire HD. Tried on the default Silk Browser, Chrome (reg and incognito), and Fully Kiosk Mode. I’m stumped

Did you clear cache?