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;
}It worked! Thank you so much! My life saver 
I upgraded to the latest version of HASS and it seems like my animations have stopped working for my lights. I can still click on the icons to toggle the lights but the colour doesn’t change anymore. It worked before the update and I haven’t changed anything. Are there any breaking changes to be aware of?
Also, I can have the floorplan background change with the active theme using:
svg, svg * {
pointer-events: all !important;
background-color: var(--primary-background-color);
}
But when I try to set a specific background colour, it doesn’t work and shows the default white, any ideas?
svg, svg * {
pointer-events: all !important;
background-color: var(–variable-name, #37464f);
}I tried quite a lot of open source IoT platforms over the last year. So far this seems to be the most versatile and the most reliable. It is actually the only one that has a highly configurable floor plan option that that I envisioned when I started my home automation project. ( attention:this is an unheated country house over the winter, so low temps gathered inside :). Plus: some of the onsite sensors don’t work yet, but I couldn’t help it to share it ).
Otherwise, what I couldn’t figure out so far, is how to update all switches or all cameras states if I have centrally command for switching on/off all light or all cameras. maybe some scripts will solve it.
grate work you have done with this component.
My current setup (imgur version is animated) https://imgur.com/s885IiA
nFloor plan generated with Floorplanner, switches are black rectangles at 50% opacity when lights are off and hidden when lights are on.
Does anyone know how to turn a Chromecast TV on and off, and ideally display some kind of state on the floor plan?
I tried using service: toggle and that can turn the TV on, but clicking it again switches the state to idle instead of turning it off.
Created in Sweethome 3D. Used black room sized shapes to overlay the rooms, using opacity on the css to create the on/off effect.
Amazing work guys @Dan_Nuttall @poebae !
I bought Sweethome 3D and started a 3D plan of my home too just haven’t had the time to finish it. I’ve been reading this thread off and on but don’t understand just yet how to add the layers and CSS. From what I understand once the svg of the 3D floorplan is created, you need to use Inkscape and build layers?? Is there a particular step by step guide you guys used to save me a bit of time? Not that I’m usually lazy, just the last month or so I’ve been super busy and reading hundreds of posts over doesn’t appeal much to me. Thanks!
You only need to build layers in Inkscape if you’re using multiple floors. Check out this thread. Otherwise all you need to do is create objects that correspond to the entities you’ve listed in your floorplan.yaml e.g. a light bulb icon with object id ‘light.bedroom’, or in my case black rectangles with the object IDs of the lights they represent.
If you’ve installed floorplan correctly you should already have custom_ui/floorplan/floorplan.css and you just need to modify it. If you need more specific help give us a look at your config and floor plan.
Yeah it’s actually easier than you may think. After building my home in sweethome 3d I exported it as an image (with lights on!). I then imported that image into inkscape and drew black shapes over my rooms. To do this start off drawing a black rectangle with appropriate tool (F4), then select that shape with the Node tool (F2) and hit CTRL + K - this then allows you to drag the points around to create the exact shape of your room. You then put that shape on its own layer (CTRL + SHIFT + L opens the layers panel), and then give that shape the ID of your light or group of lights within the Object Properties (CTRL + SHIFT + O). This is what my SVG looks like in inkscape. You can sort of tell the outline of my rooms:
Assuming you have installed floorplan (I went down the panel route), all you need to do is upload your SVG, edit the floorplan.yaml file so that IDs you gave your room shapes are listed. e.g. this is all I have under the “groups:” section in my yaml:
- name: Lights
entities:
- group.living_room
- light.hall_light
- group.kitchen
- group.bathroom_light
- light.bedroom_light
- group.office_light
- light.landing_light
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action:
domain: homeassistant
service: toggle
Finally you just amend the CSS for the light-on / off. e.g. this is all I changed within my CSS file:
.light-off {
opacity: 0.5 !important;
transition: opacity 1s;
}
.light-on {
opacity: 0.0 !important;
transition: opacity 1s;
And that is it. Took quite a bit of trial and error to get to this point though cause I had never used inkscape or sweethome 3d before. Don’t think I missed anything out there. Give me a shout if you need any more assistance.
Perfect! This is great. Will give it a try this weekend. Thanks to both of you for the point in the right direction. Really appreciate it! @Dan_Nuttall @poebae
Hello there! I also encountered a button that cannot be rotated in the center, but I do not know how to solve it.
This is my css
#CSS
#switch.switch12 {
transform-origin: center;
}
.fan-on {
fill: #ff8a65 !important;
-webkit-animation: rotation 2s infinite linear;
}
.fan-off {
fill: #424242 !important;
}
#yaml
#And svg
ID of my button
ID：switch.switch12
After all settings are made, my button still cannot work in the center. How to set the /Y /X/ axis correctly?
Hello I tried to press your method, but it always failed. Can you provide yours? Svg, yaml, css. thank you very much!
thank you for your reply! The corresponding problem has been solved!