Floorplan for Home Assistant

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…

2 Likes

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

I don’t know, maybe draw a square in inkscape and give it the right entity id…
i’m trying to add a thermostat card inside the floorplan but i can’t get it to work. not sure either if it’s possible…

mind sharing your config and lovelace-ui files?? I am curious on how to display temperature given a mqtt topic with the temperature.

trying the same thing, setting the text of an entity of the svg floor plan to display the temperature.

Sorry, that was in Jul’2017, when I switched to Lovelace a couple of months ago I didn’t setup again Floorplan

so you just want to display a temperature from an entity? you can check my code just some posts back. and in inkscape modify the svg file. add some text and right click on it and select object properties. in the ID field type the exact entity ID and press set. that’s it…

Sorry for being stupid, would you care to explain in a little more detail how you did it? I’ve been trying to get my temperature sensors to display the temperature, but so far no luck, this is what I have:

I’m not sure how to add text to make it display the temperature. Thanks!