Thanks a lot that did the trick !!
Hello, I have a strange issue with my floorplan.
When I’m using input_boolean they automaticly turn off just after they have been turned on. This doesn’t happen with lights or switchs.
Does anyone experience the same trouble ?
Thank you.
Short Answer: NO, nobody is experiencing your trouble, if he did, you most likely would have been able to find the answer in this long thread by now.
Long Answer: Please be more specific. We will be able to help you even more if you can take the time and give us some example of your troubles. For example:
- I did that
- I edited that and gave that thing this name
- After that, I put that there, saved and closed
- When I push on that, it does that but it also does this!
I don’t want it to behave like that !, I need it to do only this ! … 
… you get it
Side Note: I know that in your head everything makes sense, all stars are aligned but “it doesn’t work as it should!”. Damn, what can I do?, can you guys help me? … and we are like , what ? …
yes, have the same problem. Seems to be related to this: https://github.com/pkozul/ha-floorplan/issues/29
They have seemed to fix it, but I don’t know how to implement the lines correctly.
A workaround is to use a script to turn on/off what you want. You will get an error message script is already running in the log thou. Please let me know if you figure out how to implement the lines
Does not seem to be a problem with hue lights or zwave components.
Thanks Zepixir, i will have a look at it. Will update you if i find a workaround.
I am having a similar issue with my animations on my fans. Seems like they are using their origin location as the outside diameter and then rotating around the center of the SVG.
Floorplan.yaml
- name: Fan entities: - switch.living_room_fan states: - state: 'on' class: 'fan-on' - state: 'off' class: 'fan-off'
Floorplan.css
switch\.living_room_fan {
transform-origin: center;
}.fan-on {
fill: #ff8a65 !important;
-webkit-animation: rotation 2s infinite linear;
}.fan-off {
fill: #424242 !important;
}
SVG
path
id=“switch.living_room_fan”
d=“… z” />
Anyone have any ideas? I’m sure it’s something stupid, but at this point I’ve looked at it too long to see it.
Thanks!
You tried to add transform-box: fill-box; as already mention more than once latelely here in this tread?
please show me how to create your beautiful floor plan
can you show me how to make a floor plan like yours?
No - I got so wrapped up in trying to figure it out based on the earlier troubleshooting steps that I lost all focus on the rest of this thread.
That worked perfectly - thanks and sorry for the stupid question.
I used my iPad and AutoDesk. Different layers include different elements, and can be easily controlled from the SVG by changing their name in AutoDesk.
I had a floor plan from my builder to trace.
The files are here
I’m currently working on my floorplan. I’m wondering whether it is possible to style an element in the SVG based on a different Home Assistant entity.
What do I want to do?
I want to show the temperature of a sensor on the floorplan, but also have the temperature determine the color of the circle (different layer and a different element in the SVG) behind it.
So, I actually have two elements that I want to change based on one Home Assistant entity.
The SVG (just the relevant part of it)
<g
style="display:inline"
inkscape:label="livingroom sensor bg"
id="g5071"
inkscape:groupmode="layer"
sodipodi:insensitive="true">
<ellipse
cy="242.75"
cx="258.75"
id="living_room_temperature_bg"
style="display:inline;opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:2.43051577;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
rx="21.75"
ry="22"
inkscape:label="#ellipse5065" />
</g>
<g
style="display:inline"
inkscape:label="livingroom sensor text"
id="g5081"
inkscape:groupmode="layer"
sodipodi:insensitive="true">
<text
id="sensor.living_room_temperature"
y="254.75"
x="258.50977"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none"
xml:space="preserve"
inkscape:label="#text5075"><tspan
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.33333302px;font-family:Helvetica;-inkscape-font-specification:Helvetica;text-align:center;text-anchor:middle;fill:#ffffff;fill-opacity:1"
y="254.75"
x="258.50977"
id="tspan5073"
sodipodi:role="line">0.0</tspan></text>
As you can see I have two layers in there livingroom sensor bg and livingroom sensor text.
I’m using the following to set the text of the text element (with id: sensor.living_room_temperature) to the actual state of my Home Assistant entity called sensor.living_room_temperature.
- name: Temperature
entities:
- sensor.living_room_temperature
text_template: '${ entity.state ? entity.state : "0.0" }'
This works fine, but I also want to change the color of the circle (the ellipse with id: living_room_temperature_bg) based on the state of sensor.living_room_temperature.
Is this even possible?
I tried this:
- name: Living Room Temperature
entities:
- living_room_temperature_bg
class_template: '
var temperature = parseFloat(entities["sensor.living_room_temperature"].state);
if (temperature <= 10)
return "temperature-low";
else if (temperature <= 20)
return "temperature-normal";
else if (temperature <= 30)
return "temperature-medium";
else
return "temperature-high";
'
But that results in the following warning:
Cannot find ‘living_room_temperature_bg’ in HA group configuration
Which is correct, since it isn’t an actual entity in Home Assistant, it’s just the id of the ellipse in my SVG.
Now I can’t set the same id on the ellipse and use the class_template above, because that would also apply the class on the text element. This will result in the ellipse and text have the same color and I don’t want the text to change color.
Edit
I just realized that I could create a template sensor in Home Assistant which uses the state of the original sensor as its state and use that as the source for the ellipse instead.
That will probably work, but that also means creating template sensors for each sensor I want to apply this to. Is there no other way to do this?
Do you have any issues with the opacity objects showing up on iOS devices? I tried this and it looks great on my laptop, but on all of my iOS devices the object never becomes visible.
I also tried changing the CSS from opacity to visibility, but didn’t see a change.
Upon further investigation it’s something with my SVG file. A solid fill shows correctly and will go from hidden to visible without a problem. But any kind of gradient fill and the object disappears.
Thanks.
thats awesome
I briefly tested floorplan on my iPhone, but all the animations were broken and I didn’t have any urge to fix it. I stopped working on my floorplan due to breaking changes caused by HA, the web browser. Too hard to fix right now.
I tried to edit code in yaml, CSS and SVG file as your mentioned, but It not work
in my Yaml file:
- name: switch
entities:
- switch.fan
- switch.aircon_sharp
states:
- state: 'on'
class: 'fan-on'
- state: 'off'
class: 'fan-off'
in my CSS:
#switch\.fan, #switch\.aircon_sharp {
transform-origin: center;
}
.fan-on {
fill: #ff8a65 !important;
-webkit-animation: rotation 2s infinite linear;
}
.fan-off {
fill: #424242 !important;
}
and it seems like the Fan rotate the center of SVG layer instead of itself. Can you give me any advice?
Tried to add transform-box: fill-box as mentioned here:
@lesonquan, just like @Zepixir posted; Change your code to this and you should be good to go:
#switch\.fan, #switch\.aircon_sharp {
transform-origin: center;
}
.fan-on {
fill: #ff8a65 !important;
-webkit-animation: rotation 2s infinite linear;
transform-box: fill-box;
}
.fan-off {
fill: #424242 !important;
}
2 Likes
It worked! Thank you so much! My life saver 
1 Like