I have the following in my fp.css file for my fans…
/* Rotate Fans */
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
#switch\.rfl_bedroom_pc_desk_fan {
transform-origin: center;
}
#switch\.rfl_bedroom_main_fan {
transform-origin: center;
}
.fan-on {
fill: #ff8a65 !important;
-webkit-animation: rotation 2s infinite linear;
}
.fan-off {
fill: #424242 !important;
}Thanks, I just realised what I had done wrong.
I had to change the CSS code from:
switch.fan {
transform-origin: center;
to
#input_boolean.fan {
transform-origin: center;
Now it spins on the spot… success !
EDIT - nevermind - it all came right after a reboot of the host…
Both fans now spinning and both on/off toggles showing up on the HA home page under the Fans group.
While the rotating fans were working fine in Chrome on my PC, on my wall mounted Android tablet (in both Chrome and Kiosk Browser) they were still boomeranging around the house until I added that line, so thanks for the suggestion.
Good you got it working 
Probably worked on your computer if you had an older version than 64 of chrome on that. The android platform updates Chrome automatically i presume.
Thanks for the ideas above guys. Of course nothing ever works the same for everyone! I had to change my fan.on css to
.fan-on {
fill: #ff8a65 !important;
animation: rotation 2s infinite linear;
transform-box: fill-box;
transform-origin: center;
}
Here is my mobile friendly floorplan. That needs larger icons, and less elements in each layer. So I have multiple layers showing, depending on which button in the middle I press.
I have 8 layers.
Here is some of them:
I haven’t made a floorplan yet, but I was really inspired by @Steffen_Pohl to start creating one. I really want to make a 3D floorplan, but don’t have the skill to do it. So, I started to look around on the internet and found this site: floorplanner.com.
I created the following as a test to see how fast I could create something. I made this in about 5 minutes:
You can even add furniture if you want to:
Just wanted to share this, since the result looks great. They have a pricing plan, but the free version should suffice for a Home Assistant floorplan.
Go here … its free,
That does look great for just 5 mins effort.
I agree with @SMARTMEDIA - check out SweetHome3D - if you scroll back 15-20 posts you will see 2 screenshots (look for the green grass).
All the editing is done in 2D mode and probably similar to what you have already done - the 3D renders (including lighting/shadows) are just a couple of extra mouse clicks - you just choose the camera point of view and click Render - so 3D views are not any harder to create than a basic 2D floorplan.
The only gotcha is for those items that are located above floor level (such as TV’s, pictures on the wall, etc) you have to specify the elevation (in CM) for those items. But you may have already had to do with that your floorplan above anyway, for the wall mounted basins?
@systmworks Thanks for the link. It seems that they work the same. With the site I posted you also work on the normal (2D) mode and after it you can render 3D views.
When using paintings on the wall you do need to set the elevation, but when you’re placing a book on a table or a wall mounted basin I didn’t have to do it.
They may work the same, but the pricing is better in favor of Sweet Home 3D. If you hurry you can still get it for free. And the libraries are huge.
Here is my floor plan so far. Currently working on the fan animations but can’t get the fans to stay in one place.
I wouldn’t stress about hurrying… its been free for many years now!
If you are having trouble with fans spinning around your house (instead of on the spot) add this line to your .fan-on section in the floorplan.css
transform-box: fill-box;
Example:
.fan-on {
fill: #000000 !important;
-webkit-animation: rotation 3s infinite linear;
transform-box: fill-box;
}Edit: Removed the lower layer that produces the yellow and it works. Thanks for your help.
That works better. It’s not across the entire screen and one fan works while the other doesn’t. The orange fan on the bottom right should be in the room that is yellowish, while it does spin correctly just in the wrong spot.
#fan\.ge_12730_fan_control_switch_level , #fan\.ge_12730_fan_control_switch_level_2 {
transform-origin: center;
}
.fan-on {
fill: #ff8a65 !important;
-webkit-animation: rotation 2s infinite linear;
transform-box: fill-box;
}
.fan-off {
fill: #424242 !important;
}Hi @systmworks
How have you rendered your 3d? What are your dimensions i.e. width and height in pixels? The quality? Basically every setting to render the 3d image in sweethome 3d.
Thanks.
While there are some optional settings you can adjust, I just do the following:
Drag the divider line up near the top of the screen so the 3D preview is displayed on most of the screen (this seems to set the vertical resolution of the render).
Click 3D View menu -> Create Photo
Click the Create Button
Done.
I never adjust the resolution settings - on mine its currently 1920 x 1141 (but the 1141 varies slightly based on how high I dragged the dividing line).
I leave Quality on Best (why would you not??) - and Lens as Default (but feel free to try others).
I do recommend you play with the time of day as that will affect the shadows and brightness of the rendered image. I like the shadows around 9 AM and 3 PM.
Be sure you have set your geographic location and timezone (under Plan -> Modify Compass) or else the lighting and shadows will be wrong (possibly completely eg night time instead of day - if you get a pitch black render).