Weird I need to press this on the floor plan twice for it to work. It makes the call other times but only turns the lights off on the 2nd call. Any ideas?
just make a script to turn off your lights, and use that as entity id instead
I don’t suprise u could provide an example please?
Of course:
The script:
all_lights_off:
sequence:
- service: light.turn_off
entity_id:
- light.lys_spisebord
- light.lys_spotter_stue
- light.lys_spotter_kjokken
- light.lys_sofa
- light.dining_backlight
- light.hue_bloom
- light.tv_backlight
- light.lightstrip_kitchen
floorplan.yaml:
- name: Group Lights
entities:
- script.all_lights_off
action:
domain: script # This optional parameter allows you to use other services such as homeassistant.toggle like here.
service: turn_on
And of course have the entity_id of the script as id in the svg.
Then, everytime you press the element in the svg file, it turn off all the lights you have in your script.
If you haven`t any scripts from before just paste this in the configuration file:
script:
all_lights_off:
sequence:
- service: light.turn_off
entity_id:
- light.lys_spisebord
- light.lys_spotter_stue
- light.lys_spotter_kjokken
- light.lys_sofa
- light.dining_backlight
- light.hue_bloom
- light.tv_backlight
- light.lightstrip_kitchen
Cheers 
Thanks so much Zepixir!
I got his working but am using “group.all_lights” which is now working perfectly.
Thanks!
1 Like
I’m glad you got it working, and also because you did it with a script. It’s much better to do it that way. Following this statement … I cannot help but ask of you to listen for a little bit more and will not bother you after that, on this subject.
When working with scripts, automations … things that you “set once” then let them go on their way and do their job, its important to do it properly, in order to avoid programming mistakes later on. It’s just Good Practice. You learn about these things in programming courses, at school, in various ways, labs, classes.
In short, when you write a script, first thing you do is make sure you clean it, stop all its previous calls, actions or running instances, then, initialize it again.
Following the above statement, this is how all my scripts look:
### Description: This script is just good practice, it "does the dishes" and then calls the actual script ###
all_lights_off_command:
alias: "All lights = OFF, command"
sequence:
# Cancel "execute" script, in case it has timers, to reset them
- service: script.turn_off
data:
entity_id: script.all_lights_off_execute
# Call "execute" script into action again
- service: script.turn_on
data:
entity_id: script.all_lights_off_execute
### Description: This script sets timers (if any) and is the actual action executor ###
all_lights_off_execute:
alias: "All lights = OFF, execute"
sequence:
- service: homeassistant.turn_off
entity_id: group.all_lights
The second script is the boss.
Its here that you write all your code, all the things you need to do, all the actions, timers, service calls … etc
The first script is the house keeper.
It only shuts down the boss then wakes him up again …
Short example:
- You have a script in which there is a timer instruction, you call for a 10 sec delay before you do something
- You press the button in the GUI, and the timer starts, but for some reason, one time, the GUI becomes unresponsive for a bit … you wait and nothing happens, you press it again, the timer counted for 4 seconds then the GUI got the second call to count again and “created” another timer to count from 10, so … the first timer has 6 seconds left from the first call, then does the action … you think you’re safe, but 4 seconds later, the second timer finishes and calls for the same action.
- If your script sequence is complicated enough, calling it multiple times to do things that have had already been done, might have unexpected reactions in other parts of the software.
That is why you clean the table, before you put another plate down.
Hope it helps, and steers you to do it right …
1 Like
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.
6 Likes
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.
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.
You could create 4 input bools that are initially set to true and add those to the fans. Nice work btw 
1 Like
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.
1 Like
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.
2 Likes
@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.
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 
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.
1 Like
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 
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.
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 !
1 Like
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.