With this new update (0.106) 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?
But Floorplan not loading.
It has been failing for me since the upgrade to 0.106.0
On chrome it outputs:
“28/02/2020, 13:18:32 ERROR TypeError: Cannot assign to read only property ‘svg’ of object ‘#’ at https://xxxx.com/local/floorplan/lib/floorplan.js?v=1.1.8:90:27”
On firefox it outputs:
“Error initSinglePage/<@https://xxxxxx.com/local/floorplan/lib/floorplan.js?v=1.1.8:90:11”
This line is:
this.config.svg = svg;
Not sure why that is read-only
Issue report here and quick patch to get everything back up and running.
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
Hi, i’m trying to use Floorplan Lovelace card, but I’m receiving an error:
9/02/2020 16:49:36 ERROR TypeError: Cannot add property svg, object is not extensible at http://192.168.50.21:8123/local/floorplan/lib/floorplan.js?v=1.1.8:90:27
log @ VM12632 floorplan.js:1681
my yaml:
config:
image: /local/floorplan/apartamento.svg
log_level: error
debug: true
rules:
- entities:
- cover.veneziana_roxo
- cover.veneziana_casal
- media_player.mini_1
- switch.led_verde
states:
- class: binary-sensor-off
state: 'off'
- class: binary-sensor-on
state: 'on'
stylesheet: /local/floorplan/ap.css
title: Mapa Casa
type: 'custom:floorplan-card'
Could you help me?
Thank you Daniel
Wait for next release.
so, now I have to use source code from here:
or from here:
You want the first, the card for Lovelace.
Does this also mean it’s fixed for version 106.x?
can you share your code
Has anyone figured out how to use class_select instead of class_toggle for layers? In the previous version of floorplan for HA, we had the ability to add some code to accept the select function but I can’t get it working.
I’ve got 10 buttons/layers and can’t figure out how to make toggle work correctly.
Still struggling with getting multiple buttons and layers to work with the class_toggle. I have 10 static buttons with 10 layers. I can get it to switch once per button but after that, the buttons do nothing.
EDIT: Figured it out.
Added the following to the floorplan.js (line 1507):
case 'class_select':
for (let otherElement of actionData.elements) {
const otherSvgElement = $(svgElementInfo.svg).find(`[id="${otherElement.id}"]`);
let otherSvgElementclass = otherElement.class;
$(otherSvgElement).removeClass().addClass(otherSvgElementclass);
}
break;
Then used this for the UI:
- action:
data:
elements:
- id: page1
class: hidden
- id: page2
class: hidden
- id: page3
class: visible
- id: page4
class: hidden
- id: page5
class: hidden
- id: page6
class: hidden
- id: page7
class: hidden
- id: page8
class: hidden
- id: page9
class: hidden
- id: page10
class: hidden
service: floorplan.class_select
elements:
- button3
And of course this in my floorplan.css:
.visible {
display: initial !important;
fill-opacity: 1 !important;
stroke-opacity: 1 !important;
}
.hidden {
display: none !important;
fill-opacity: 0 !important;
stroke-opacity: 0 !important;
}
I had to change version numbers in both floorplan.js and floorplan-card.js to get the UI to update as well. Not sure if this is necessary but it worked for me.
Hey @pkozul, is the plan still to roll the floorplan library into one file? Thanks for all of your efforts for the community!
Hi. Finally got this working in version 0.107… there’s an hour or two well spent.
Does anyone know whether you can apply a style directly in the lovelace config? I have several RGB lights and would like to be able to show the current light colour based on the entity state. I can’t do this is the normal CSS file as there are 16M colours.
Any help appreciated
hey, i’m quite new with hass and have made quite a few steps in the past few days, now in floorplan i’m trying to change the color of an object based on the value of the sensor-humidity. I would like to make a plant red if it does not have enough moisture.
I changed the code of the simple.css but can’t get it working:
i tried this the 421 stands for% humidity but this is not working. i have also tried it with .sensor-humidity-42 and with .sensor-humidity-> 42.
}
.ensor-humidity-42.1 {
fill: # d3c82f! important;
}
/* Binary sensors */
.binary-sensor-on {
fill: #1ABA92 !important;
}
.binary-sensor-off {
fill: #d32f2f !important;
transition: fill 5s ease;
}
/* sensor.humidity */
.sensor_humidity_vocht {
fill: #359f37 !important;
}
.sensor-humidity-421 {
fill: #d3c82f !important;
}
my ultimate goal is that I make it so that if it has less than x% the plant turns red, can this be done via the CSS?
hopefully someone can help?
yes this can be done by CSS and a class template with a bit of logic to define your colours based on humidity measurement.
I have done the same thing for room temperature.
lovelace config looks like this
- class_template: >-
var temp = entity.attributes.current_temperature; if (temp < 21)
return "temp-low"; else if (temp < 25) return "temp-medium";
else return "temp-high";
element: climate.guest_room.text
entity: climate.guest_room
text_template: '${entity.attributes.current_temperature}°C'
- element: climate.guest_room.text_state
entity: climate.guest_room
text template: '${entity.state}'
Class template is the bit that defines ‘state’ based on current attribute (in my case temperature, which is the entity ‘climate.guest_room’)
Corresponding CSS section looks like this
/* Temperature Text*/
.temp-low {
fill: #21BDEC !important;
transition: fill 1s ease;
}
.temp-medium {
fill: #21EC8B !important;
transition: fill 1s ease;
}
.temp-high {
fill: #F40D50 !important;
transition: fill 1s ease;
}
The test within my floorplan changes colour depending on temperature.
Warm in Western Australia today!
Tnx, wil have a try at this! I hope i don’t sound like a idiot with the following questions… The first part needs to be set in the config.yaml right? Your reference to climate.guest_room.text can be changed to the element id in my svg? for now as I am waiting for my plant sensors I am using the ‘‘Xiaomi Mijia Smart Temperature and Humidity Sensor’’. I have a svg file with my id’s set to the sensors i would like to link to the plant, if i dont have the text i can skip the folowing part?
text_template: '${entity.attributes.current_temperature}°C'
- element: climate.guest_room.text_state
entity: climate.guest_room
text template: '${entity.state}'
Or do I need to replace it withe a refrence to the part of the svg file I want to change? Tnx for your fast reply, I hope to have time tomorrow to start testing this and my plants wil love you when i get this working 
cheers Luuk
Don’t worry you’re not an idiot.
First part needs to be within your floorplan section of your lovelace config, same as any other element/entity
Looking at my code and trying to describe it I can see it is arse about face… but yaml doesn’t seem to care
The entity for me is climate.guest_room. This is a sensor within my AC system.
The attribute of this element I am interested in is temperature. This is retrieved by entity.attributes.current_temperature
The class template will return the ‘state’ of the element based on the logic defined. For me the states are is temp-low, temp-med and temp-high
I have defined 2 elements:
climate.guest_room.text: This is assigned to a text object within my SVG file. Without the state and CSS information it would display the temperature in a single colour set in inkscape.
climate.guest_room.text_state: This is a statement to combine the entity name and it’s current state, for example climate.guest_room.temp-low
colour for an element with .temp-low is defined in my CSS file
If you are not looking to output an actual value to the SVG image then you do not need the text_template: ‘${entity.attributes.current_temperature}°C’
try something like this
- class_template: >-
var humid = entity.attributes.xxxhumidity???; if (humid < 42)
return "humid-red"; else return "humid-green";
element: your.entity_state
entity: your.entity
text template: '${entity.state}'
your CSS file would need
.humid-green {
fill: #21EC8B !important;
transition: fill 1s ease;
}
.humid-red {
fill: #F40D50 !important;
transition: fill 1s ease;
}
tnx for the help! for any other person wanting to get the Humid sensor working her is the code @geoff.wray helpt me out with! super tnx 
- class_template: >-
var hum = entity.state; if (hum < 40) return "hum-red"; else
return "hum-green";
element: sensor.humidity_158d000321f50a.colour
entity: sensor.humidity_158d000321f50a
text template: '${entity.state}'
and add this to your CSS:
/* Temperature Text*/
.hum-green {
fill: #21EC8B !important;
transition: fill 1s ease;
}
.hum-red {
fill: #F40D50 !important;
transition: fill 1s ease;
}
This wil help me on the way to mor fun stuf