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
1 Like
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.
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