Share your Floorplan

Third party integrations Floorplan
21

Really neat! What are those snowflakes-looking symbols for?

22

How did you animate them? Using css keyframes?

~Cheers

1 Like
23

@ggravlingen Thanks! Those are my window AC units

@PhyberApex Haven’t tried doing any true animations. Right now it’s just two separate elements. One goes invisible and the other becomes visible. Looks pretty cool in action

2 Likes
24

I like the style of yours. Where did you get the icons you are using? Such as the fans and snowflake etc.

25

Also I have noticed a lot of people using Cameras on their floorplan is this just the camera sensor(s) or does it toggle a live feed?

26

I get most of my icons from https://materialdesignicons.com

As far as the cameras go, yup, clicking one gives me the feed

27

If you want, you can take a look at my repo https://github.com/PhyberApex/homeassistant-config there I have CSS animation for doors. With the latest floorplan this works :slight_smile:

~Cheers

5 Likes
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:

62 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)

10 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