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.
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 ? 
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…
