Share your Floorplan

Third party integrations Floorplan
28

This animation is slick! Apparently I’m not smart enough this morning to make it work with my “horizontal” doors. Any tips?

Thanks!

1 Like
29

I had some issues with the transform origin. Try playing with that. Also for some reason I had to draw the squares to animate new after moving several items in inkscape (dunno what happened there). Also you might need 2 animations one for 90deg and one for -90/270 deg (mine just happened to be the same). If you need more specific help feel free to ask.

~Cheers

1 Like
30

Awesome, that is the path I’m on, I’ve gotten it to do some wild stuff ha!

31

I remember my door just flying off all the way to the left in the floorplan with the animation. That always happened when it for some reason didn’t get the right transform origin. Redrawing of the square helped there for some reason.

~Cheers

1 Like
32

Wow weird, redrawing the square did the trick for me as well.

I also ended up having to create a second keyframe for -90 and played with different origins for each door until I got them to “open” the correct way. This is very cool!

1 Like
33

Having fun with animations, thanks @PhyberApex

Spinning fans and opening doors :smile:

63 Likes
34

Wow would u mind to share your code that’s awesome

1 Like
35

You sir deserve a Blue Peter Badge! That looks awesome!

3 Likes
36

Would you mind sharing your configuration? I want something like that

1 Like
37

Here is the code for my fan rotation:

floorplan.css

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

#fan\.living_room_fan_level, #fan\.master_bedroom_fan_level {
  transform-origin: center;
}

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

.fan-off {
  fill: #424242 !important;
}

I’ll probably add a little more soon to make the fan spin faster with each of my assigned speeds (slow, med, fast)

11 Likes
38

I am trying to animate but see below:

1353×662 541 KB

I just copy paste your css:

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

#fan\.living_room_fan_level, #fan\.master_bedroom_fan_level {
  transform-origin: center;
}

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

.fan-off {
  fill: #424242 !important;
}

here is config:

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

Change the following line from:

#fan\.living_room_fan_level, #fan\.master_bedroom_fan_level {
  transform-origin: center;
}

to

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

And you should be good to go

2 Likes
40

no luck, with new object as well:

1353×662 812 KB

4 Likes
41

Hmm, the entity id for that specific fan is switch.fan right?

Also make sure you have #switch\.fan not #switch.fan (notice the slash)

42

yes, slash is there.

can you please share your svg and css file?

43

Sure thing, I can’t upload css nor svg here, so here is a link to each in my Drive (haven’t updated my git in a long while)

CSS

SVG

I did make a couple minor changes since the last post, but mostly just house keeping

6 Likes
44

@jmart518 Thanks for sharing.

1 Like
45

the fan .svg is working, I just remove some extra tags in .svg file

1353×662 375 KB

Thank you

4 Likes
46

Can you share the config as i started getting error

Uncaught TypeError: Cannot read property 'indexOf' of undefined
URL: http://192.168.xx.xx:8123/local/custom_ui/floorplan/ha-floorplan.html
Line: 712, column: 33
Error: {}
47

you can download floorplan.yaml from following link: