Floorplan for Home Assistant

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

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

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

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

2 Likes

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

Thank you @Saturnus - worked like a charm!

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)

hi Ron, how did you configure the temperature and humidity inside those rooms?

Found it… just add text in inkscape, click right mouse button on the text, select object properties and fill in the entity id at the id field.
image

Does anyone has an idea how to get the unit_of_measurement correct behind every sensor? I did found a line ( text_template: '${entity.state ? entity.state + "°C" : "undefined"}' ) wich will set for example degree C for all sensors, but not all sensors display degrees. There are also humidity and barometric pressure sensors. I just can’t get it right.

 - type: 'custom:floorplan-card'
    icon: 'mdi:floor-plan'
    id: system
    title: Floorplan
    panel: true
   # aspect_ratio: 70%   #does not work..
   # height: 100%   #does not work..
    badges: []
    cards:
      - config: null
        image: /local/floorplan/examples/simple/simple.svg?v=1.1.14
        rules:
          - entities:
              - binary_sensor.floorplan
              - binary_sensor.main_bedroom
              - binary_sensor.living_area
              - binary_sensor.double_garage
              - sensor.temperature1
              - sensor.temperature2
              - sensor.temperature3
              - sensor.temperature4
              - sensor.temperature5
              - sensor.temperature6
              - sensor.humidity1
              - sensor.humidity2
              - sensor.humidity3
              - sensor.humidity4
              - sensor.humidity5
              - sensor.humidity6
              - sensor.barometer1
              - sensor.barometer2
              - sensor.barometer3
              - sensor.barometer4
              - sensor.barometer5
              - sensor.barometer6
              - sensor.iaq1
            text_template: '${entity.state ? entity.state + "°C" : "undefined"}'
        states:
          - class: binary-sensor-off
            state: 'off'
          - class: binary-sensor-on
            state: 'on'
        stylesheet: /local/floorplan/examples/simple/simple.css?v=1.1.14
        type: 'custom:floorplan-card'
        svg: {}

You have to break apart the entities and have a text_template for the temperature sensors and a different one for the pressure ones.

1 Like

Hi OzGav, thanks for your reply. Could you give an example how the code needs to be? I had tried a lot of ways but none working. I’m still trying to understand how yaml is build up…

In my floorplan.yaml I have a bunch of different templates depending upon the format of the entity. This is not exactly the same as yours but hopefully you will get the idea:

        - name: Colour Coded Sensors
          entities:
             -  sensor.bom_archerfield_air_temp_c
             -  sensor.wupws_temp
          text_template: '${entity.state ? Math.ceil(entity.state * 10) / 10 + "°" : "undefined"}'         
          class_template: '
            var temp = parseFloat(entity.state.replace("°", ""));
            if (temp < 10)
              return "temp-low";
            else if (temp < 30)
              return "temp-medium";
            else
              return "temp-high";
            '
        - name: Temp Sensors Black Text 
          entities:
             -  sensor.temperature_158d0001b95355
             -  sensor.temperature_158d0001b95353
             -  sensor.temperature_158d0001fa5aa5
             -  sensor.temperature_158d0001f505f1
             -  sensor.temperature_158d0001f50732 # Spare Bedroom
             -  sensor.temperature_158d0001fa38b3 # Study
             -  sensor.temperature_158d0001fa38df # Living Room
             -  sensor.temperature_158d0001f52eba # Rumpus
          text_template: '${entity.state ? Math.ceil(entity.state * 10) / 10 + "°C" : "undefined"}' 

My first block of two sensors are colour coded and just have a degree symbol after the number. The second block is just the default black text but they have a degree symbol and C after them.

Hope this helps…

1 Like

Hi OzGav, It certainly helped, thanks!
From your example i could make up the solution (with a little puzzling)…

    cards:
      - config: null
        image: /local/floorplan/examples/simple/simple.svg?v=1.1.14
        rules:
          - entities:
            - binary_sensor.floorplan
            - binary_sensor.main_bedroom
            - binary_sensor.living_area
            - binary_sensor.double_garage
          - entities:            
            - sensor.temperature1
            - sensor.temperature2
            - sensor.temperature3
            - sensor.temperature4
            - sensor.temperature5
            - sensor.temperature6
            text_template: '${entity.state ? entity.state + " °C" : "undefined"}'
          - entities:          
            - sensor.humidity1
            - sensor.humidity2
            - sensor.humidity3
            - sensor.humidity4
            - sensor.humidity5
            - sensor.humidity6
            text_template: '${entity.state ? entity.state + " %RH" : "undefined"}'
          - entities:           
            - sensor.barometer1
            - sensor.barometer2
            - sensor.barometer3
            - sensor.barometer4
            - sensor.barometer5
            - sensor.barometer6
            text_template: '${entity.state ? entity.state + " hPa" : "undefined"}'
          - entities:
            - sensor.iaq1
            text_template: '${entity.state ? entity.state + " IAQ" : "undefined"}'

With this new update I’m no more able to see my Floorplan.
Checking the log i found this error:

https://xxxxxxxx.duckdns.org:8123/local/floorplan/lib/yaml.min.js:1:1479 Uncaught SyntaxError: Invalid or unexpected token

16:12:33 – components/system_log/__init__.py (ERROR) - il messaggio si è verificato per la prima volta alle 13:49:28 e compare 19 volte

any idea to solve it?

Hi all,

I’ve been working on a new improved version that no longer requires the lib folder. In other words, the complete floorplan library is all in just one single file. It runs as both a Lovelace card as well as a regular HA panel.

A few people are testing it out, and so far, all signs are good.

Stay tuned over the next few days as I will be releasing the new version.

Cheers,
Petar

2 Likes

@pkozul I keep getting an error on one of my entites.I can’t seem to find what I’m missing. one light bulb will not appear.
The name is correct, I’ve checked HA

and here is a part of my floorplan.yaml

      groups:

        # darksky orignal    
        - name: Sensors
          entities:
             -  sensor.dark_sky_temperature
             # -  weather.thuis
          #text_template: '${entity.state ? entity.state : "unknown"}'
          # An example of rounding up a number, i.e. a temperature of 90.1 becomes 91
          text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}'  
          class_template: '
            var temp = parseFloat(entity.state.replace("°", ""));
            if (temp < 10)
              return "temp-low";
            else if (temp < 30)
              return "temp-medium";
            else
              return "temp-high";
           '
        - name: Dark Sky Sensors
          entities:
            - sensor.home_dark_sky_icon
          image_template: '
            var imageName = "";

            switch (entity.state) {
              case "clear-day":
                imageName = "day";
                break;

              case "clear-night":
                imageName = "night";
                break;

              case "partly-cloudy-day":
                imageName = "cloudy-day-1";
                break;

              case "partly-cloudy-night":
                imageName = "cloudy-night-1";
                break;

              case "cloudy":
                imageName = "cloudy";
                break;

              case "rain":
                imageName = "rainy-1";
                break;

              case "snow":
                imageName = "snowy-1";
                break;
            }

            return "/local/custom_ui/floorplan/images/weather/" + imageName + ".svg";
            '

        - name: Lights
          entities:
             - light.voortuin
             - light.tuin_lamp
             - light.hal_lamp
             - light.keuken_raam
             - light.keuken_oven
             - light.keuken_kookplaat
             - light.eettafel
             - switch.63002571840d8e90a6c4
             - light.salontafel_muur
             - light.salontafel_raam
             - light.woonkamer_tv_eettafel
             - light.woonkamer_tv_raam
             - light.woonkamer_kast

          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

Hi all ! I’m a french beginner on home assistant! I would like to have a popup opened when I click on a part of my floorplan.svg!
Does anyone know how to do that ? :slight_smile:

I use two resources from @thomasloven and @pkozul. This is a part of my floorplan.yaml

resources:
  - type: module
    url: /local/floorplan/floorplan-card.js?v=1.1.14
  - url: /browser_mod.js
    type: module
cards:
  - config:
      image: /local/floorplan/syn/syn_1.svg
      rules:
        - entities:
          - binary_sensor.pid2
          action: 
            service: browser_mod.command
            service_data: 
              command: popup
              titre: hello
              card:
                type: entities
                entities:
                  - switch.bin1
              device:
                - this
        - entities:
          - switch.bin1
          - switch.bin2
          - switch.bin3
          - switch.bin4
          states:
            - class: bin-off
              state: 'off'
            - class: bin-on
              state: 'on'
      stylesheet: /local/floorplan/syn/syn_1.css
    style: |
      svg {
      height: calc(100vh - 60px) !important;
      width: auto !important;
      max-width: 90vw !important;
      }
      ha-card {
      box-shadow: unset !important;
      }
    type: 'custom:floorplan-card'
id: system
panel: true
title: IHM

Oops. I did make a type error.

All lights are working. But how do I het the darksky icon tk work an How do I get the temperature sign to work?

check my code just a few posts up ^^

Thnks. Thats it

Do you have any tips on how to get the information from the tv as an image while playing