Floorplan for Home Assistant

[Kei]

Hi I recently created a floorplan and it is working fine with my smart light bulbs, but I wanted to know if there is any way to change the color of the light bulb in the floorplan rather than just toggling the lights on and off.
Thanks

[Wetzel402 (Cody)]

Hi all, I have two items I’m hoping someone can help with…

1. I get an error when trying to load HA Floorplan (I am using panel and have not tried the card) using a remote connection. If I am on my LAN it loads correctly but using my Duck DNS URL I get the folowing error…

Uncaught TypeError: Cannot read property 'cssRules' of null
URL: https://wetzel402.duckdns.org:8123/local/custom_ui/floorplan/ha-floorplan.html
Line: 208, column: 72
Error: {}

I am currently using the files from the Git repo unmodified to troubleshoot.

Edit: I’ve found out this error was being caused by me having caching disabled in the dev options of my browser.

2. There doesn’t seem to be much in the way of information on using 2 or more floors. Can someone provide an example of how this is done? Do I just define both floors in the floorplan.yaml file?

name: Demo Floorplan floor 1
      image: /local/custom_ui/floorplan/floorplan.svg
      stylesheet: /local/custom_ui/floorplan/floorplan.css

     groups:
         etc.....

name: Demo Floorplan floor 2
      image: /local/custom_ui/floorplan/floorplan2.svg
      stylesheet: /local/custom_ui/floorplan/floorplan2.css

     groups:
         etc2.....

*Edit: After doing some digging (and also soft bricking my home assistant) I found this post from pkozul which helped me get several floors set up as custom panels. There are some small additional changes needed however. Instances of HaPanelFloorplan must also be changed at lines 37 and 75 so they don’t conflict with each other. *

Thank you!

[antoinevandenhurk (Antoine)]

I’ve had multiple floorplans working a few months ago. But after my SD crashed I can’t, get it working again. Can you tell me more of the extra changes to make over this post from pkozul, or will you share you’re config with me.

[alverman (Alberto)]

Is possible to control cover and show the position in floorplan ?
Thanks, Alberto

[alverman (Alberto)]

Good evening,
I managed the management of the shutters !!

But I have another problem !!
how can I view the weather icons.
When I insert a rectangle that refers to the darksky I see a half-icon hidden in a case position on the planimetry and not in the rectangle.
What can I do ?
Thanks, Alberto

[OzGav]

You probably have solved this by now but this is done in the CSS file. This is mine:

.light-off {
  fill: #E0E0EB !important;
}

.light-on {
  fill: #FFFF99 !important;
}

Then in the floorplan.yaml

        - name: Lights
          entities:
             - light.pantry
             
          states:
            - state: 'on'
              class: 'light-on'
            - state: 'off'
              class: 'light-off'
          action:
            domain: homeassistant   # This optional parameter allows you to use other services such as homeassistant.toggle like here.
            service: toggle

[BionX (George)]

I got a problem with CSS I don’t see any changes in icons when I click and check my css
I don’t understand why. like the “fill” not recognized.
any suggestions?
I am on hassio 0.99.3

[OzGav]

I’ve got a PHP script that I pull the images off the BOM site and then animate them. Currently just in a new window from a link in the side panel. Let me know if you want the script.

[OzGav]

I have a bunch of GU10 bulbs (Innr brand) in a group linked to a Hue hub. In my floorplan I have been using a touch on the room to TOGGLE the lights. However I have found that sometimes I have a light which gets out of sync and stays on.

I found this thread Automation to toggle light and decided to try and implement it in floorplan.yaml as follows:

        - name: Toggle meals room lights
          entities: 
            - light.meals_room
          states:
            - state: 'on'
              class: 'light-on'
            - state: 'off'
              class: 'light-off'
          action:                             # https://community.home-assistant.io/t/automation-to-toggle-light/54795
            service_template: >
              light.{% if is_state('light.meals_room', 'on') %}turn_off{% else %}turn_on{% endif %}

BUT instead of just turning on or off the lights it is popping up a dialog box for me to do it. I have checked in the template editor and everything looks ok. Anybody who can enlighten me as to why this isn’t just working as before. That is, turning the lights on and off based on the existing state?
EDIT: After much testing I can only conclude service_template doesn’t work in floorplan?

[OzGav]

I have worked out how to get the service_template info in the file ha-floorplan.html but I can’t work out how to parse the template to get the result. If anyone has any ideas then please let me know. I’m actually a bit surprised no one has wanted to use a service_template before…? Here is my main thread where I have asked for help:

Help with service_templates in javascript

Hi all, I am trying to improve the functionality of the FLOORPLAN component by allowing service_templates. I want to be able to click on an element and have the action defined by a service_template. The original file ha-floorplan.html is here: https://github.com/pkozul/ha-floorplan/tree/master/www/custom_ui/floorplan I have done some initial modifications as follows and I have access to the service_template BUT because I don’t know much about the backend of Home Assistant initially I had thoug…

[Kayhold]

@ccostan, I was looking at your setup and noticed you have a sensor for Disney Circle. I’ve never seen anyone integrate it with HA, so I’d love to see how you used it.

[nsbyrer (Nathan Byrer)]

I’m trying to implement the floorplan_speaker custom component and am getting error:

Platform error media_player.floorplan_speaker - Integration ‘floorplan_speaker’ not found.

My configuration.yaml is setup for the integration as below:

media_player:
  - platform: spotify
    client_id: !secret spotify_client_id
    client_secret: !secret spotify_client_secret
  - platform: onkyo
    host: 192.168.1.46
    name: Basement
  - platform: floorplan_speaker
    name: floorplan

I’ve checked the permissions on floorplan_speaker.py. It seems right:

I’m running HASS.io 0.101.3 on a RPi 3B+.

Does anyone have any thoughts on what I can check next?

[CCOSTAN]

Hi @Kayhold. My sensor for Circle is basically just a ping sensor to make sure it is still online. We also do some notifications when a new device is found by HA to remind us to add to circle. But the integration is pretty minimal.

[Corey_Johnson]

Looking for advice. I recently upgraded my HA from something like 0.93 to 101.x (.3 now) and I am having an issue with a previous floorplan iteration.

I had:

     - name: Sensors
       entities:
          - sensor.hallsensor_temperature
          - sensor.thermostat_temperature_current
          - sensor.bedroom_temperature
          - sensor.lr_temperature
          - sensor.bathroom_temperature
          - sensor.sanctum_temperature
          - sensor.office_temperature
          - sensor.bd_sensor_temperature
       text_template: '${entity.state ? entity.state : "unknown"}'
       class_template: '
         var temp = parseFloat(entity.state.replace("°", ""));
         if (temp < 65)
           return "temp-low";
         else if (temp < 75)
           return "temp-medium";
         else
           return "temp-high";
        '

I don’t care much about the temp css stuff but do want the “°”. I tried multiple versions of:

        - element: sensor.garage_temperature
          entity: sensor.garage_temperature
          more_info: true
          class_template: 'var temp = parseFloat(entity.state.replace("°", ""))'
          text_template: '${entity.state ? entity.state : "unknown"}'
        - element: sensor.master_bedroom_temperature
          entity: sensor.master_bedroom_temperature
          more_info: true
          text_template: '${entity.state}'

---- and none worked. Got anything from complete errors to no-change.

Any ideas?

[Indy_Bains]

Hi, hoping someone can help… I have an inkscape produced svg floorplan, with object id’s mapped to home assistant entity ID’s. If i toggle the status of the devices, i can see floor plan re-acting as expected. However, when i click on the floor plan, nothing happens… I have added actions for each entity but nothing… any help will be greatly appreciated

[fezo76 (Fe Zo)]

I want to add media player (lg tv) to the floor plan. Switch, light, alarm successfully added. Someone can write an example. Thank you

[Saturnus]

@Corey_Johnson

Any ideas?

text_template: '${entity.state ? Math.round(entity.state) + "°" : "undefined"}'
Small modification of the Github example.

@Indy_Bains

However, when i click on the floor plan, nothing happens

Replicate the rules actions from https://github.com/pkozul/lovelace-floorplan/tree/master/www/floorplan/examples/simple
That worked for me.

[Indy_Bains]

I got it working… I had multiple entities in the same layer. As soon as moved each entity item to its own layer it worked fine

[Corey_Johnson]

@Saturnus

text_template: ‘${entity.state ? Math.round(entity.state) + “°” : “undefined”}’

Thank you @Saturnus - worked like a charm!

[lukevink]

Hey there, so here’s a css template I made to allow for hue and saturation filters mapped to light entities. If you also use blend mode lighten, you can even control each light individually (if you render an image for each light)

3D Floorplan with Hue & Saturation mapped to individual, blended RGB Light Entities

Hey all! Given I couldn’t find a clear way to do this in the forums, I thought I would share a little css template I came up with to be able to render multiple lights on top of each other AND map their color and hue dynamically to a light entity - EG: [ezgif-7-2305778199fd] [hass-lajv-lights] Individual Lights: To have multiple lights overlayed ontop of each other, the solution is actually pretty simple. You render an image for each individual light and use the CSS property filter mix-ble…