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…
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!
in inkscape, add some text. does not matter what. select that text and then give it the same ID as your sensor. that’s it…
Thank you JazekerXX. I created a text on the floorplan, assigned it the ID of the sensor, saved the file, copied it into Home Assistant replacing the old floorplan.svg, the text now appears on the screen where I created it, but nothing else is displayed. Something is escaping me, I tried 3 times.
could you share your in wall touchscreen?
I can’t manage to add a 2nd floor plan, I do exactly what it says here but it will be added to the panel but if I click on this it will remain white what am I doing wrong.