Share your Floorplan

[systmworks (Darren)]

Hello, I started using HomeAssistant and Floorplan a couple of weeks ago, so am still learning.

I created a 3D floorplan of my home using SweetHome 3D, and used the rendered PNG file as the background layer, and then added the smart objects in InkScape as a 2nd layer.

So far I have 4 temp sensors, 4 smart lights, and the 2 cars each appear or disappear based on presence detection of our phones.

Today I added the 4 ceiling fan icons (imported SVG files). I would like them to spin, and have added the animation code into the floorplan.CSS file, but must have done something wrong as they don’t spin.
Note - they are dumb fans - not switchable from HA - but they run almost 365 days a year so thought Id have them spinning just to make the floorplan look cooler.

[Zepixir]

I think you need to have an entity id to them, and the state of them is used to start the animation. you could use something that always is on, ex an automation or something like that as the entity id.

[Zepixir]

a good post @SMARTMEDIA. It’s highly actual when using delays or long scripts. But one good thing about scripts is that they never run if they are already running, so the button press don’t suddenly starts a new timer. That is only a problem with automations, which causes a new timer to start every time the button is pressed.

[keithh666 (Keith Hull)]

You could create 4 input bools that are initially set to true and add those to the fans. Nice work btw

[systmworks (Darren)]

Thanks for the replies @Zepixir and @keithh666

I added this to my floorplan.css (note the animation command is for both fan ON and OFF)

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

#switch\.fan {
  transform-origin: center;
}

.fan-on {
  fill: #ff8a65 !important;
  -webkit-animation: rotation 2s infinite linear;
}

.fan-off {
  fill: #424242 !important;
  -webkit-animation: rotation 2s infinite linear;
}

And this to my floorplan.yaml file:

- name: Fan
  entities:
    - switch.fan
  states:
    - state: 'on'
      class: 'fan-on'
    - state: 'off'
      class: 'fan-off'

And finally the fan object in floorplan.svg has an object ID of switch.fan (set in InkScape).

The only part I can see I skipped is having some sort of dummy switch configured in my HA configuration.yaml file - but since I don’t need to actually switch the fan on/off - as the animation should work in the default OFF state, I was hoping I didn’t need a dummy switch.

Ive seen some amazing 2D and 3D floorplans posted here - and initially tried for a corner 3D view like below (which was so easy to generate in SweetHome3D after I made the 2D floorplan), however due to perspective it made the rooms too small, so decided to compromise with a 3D view orientated like a traditional 2D floorplan.
I will miss out on animated opening doors, but that’s OK. Later I will add a green/red indicator to show if the 2 doors with sensors are open/closed.

https://i.imgur.com/gzlvLWj.png(image larger than 3072KB)

[Zepixir]

Nice house
A couple of tips:
As of Chrome version 64 I got problems that my door animation just flew away, don’t know if thats a problem with fan, but if it is a problem add: transform-box: fill-box;
Like this for my door:

.door_closed {
  fill: #008000 !important;
  animation-duration: 4s;
  animation-name: rotateReset90;
  transform-box: fill-box;
}

You don`t need to add a dummy switch, but you could add a input_boolean for it to look more systematic. The important thing is that it links to a HA entity. It could as mentioned earlier link to an already made automation, switch, sensor etc.

If you are planning to use bird view, you can add a door animation, just make a hole in the wall instead of a door. But if you want it to look like a nice 3d door, you shouldn’t do it.

[systmworks (Darren)]

@Zepixir Thanks for the suggestions - that helped a lot.
I created an input_boolean, default of ON, and also added it to my groups.yaml so it provides an on/off toggle for the animation (which works).

Modified the fan object ID in InkScape to input_boolean.fan

Success !! I have a spinning fan…
Except its spinning around my entire house like a Boomerang (which is fitting, since I’m in Australia)
I tried adding the transform-box: fill-box; command as you suggested, rebooted host, but it didn’t make any difference…

I also tried adding the same ID to a 2nd fan, so that both fans will spin and controlled by the same fan on/off toggle, but InkScape wont seem to let me use the same ID for 2 objects.

[keithh666 (Keith Hull)]

You have to create one for each fan as I said earlier, as for the boom-a-rang that’s normal you just have to keep playing with it till it stays put at least that’s what I’ve found

[systmworks (Darren)]

I did some Googling and found a suggestion to create a new group with multiple items selected.
I selected 2 (of the 4) fans and created a group in InkScape, and added the input_boolean.fan name to that group instead of a specific fan.

That now has both fans spinning (in a big circle) so 1 step closer to having both, or all 4 fans spinning from a single on/off switch.

[keithh666 (Keith Hull)]

If you do it as a group I can’t see how you would stop it spinning in a big circle as the center of rotation would be wrong for each fan

[systmworks (Darren)]

Yeah I wondered that too, so until I fix the rotation issue, Ive set it back to just a single fan.

I am not sure where its getting the location data from - I can only see around 20% of the circle (the bottom arc) that the fan is spinning in - the centre appears to be way above (off screen) the house plan, and slightly to the left of center.

The SVG of the fan itself is a square only as big as the fan blades themselves.

[keithh666 (Keith Hull)]

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;
}

[systmworks (Darren)]

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 !

[systmworks (Darren)]

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.

[systmworks (Darren)]

@Zepixir

transform-box: fill-box;

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.

[Zepixir]

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.

[OzGav]

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;
}

[Zepixir]

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:

!

!

[thmry]

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.

[SMARTMEDIA (MIHAI Ciausu)]

Go here … its free,

1. Click this : http://www.sweethome3d.com/
2. Install the software, and libraries for items … as many as you wish
3. Don’t look back … :-), thank me later