Share your Floorplan

[gianm]

I made a couple updates from my last post, I added 2 new floorplans to my existing configuration, and exported to lovelace format, not using ha-floorplan anymore.

I created the floorplans on floorplanner.com, Created the lighting effect and slice each room on photoshop, and put everything together with the picture-element card and elements overlay inside homeassistant

HomeAssistant Dashboard Floorplan

[greggotcher]

I created an MQTT thermostat using a raspberry pi, a DHT22 sensor, some relays and I programmed the logic using node red. This is my interface running on floorplan.

[dionisgr]

Guys, help to understand with the animation of doors (the rookie) did cited the example PhyberApex animation. But I have the door instead of opening flies up . How to solve?

> /*animation*/
@keyframes rotate90 {
	100% {
		transform: rotate(90deg);
		
	}
}

@keyframes rotateReset90 {
	0% {
		transform: rotate(90deg);
		
	}
	100% {
		transform: none;
	}
}
/* door open-close */


#DOMAIN\.binary_sensor.door_bedroom {
  transform-origin: bottom right;
}
.door_closed {
  fill: #008000 !important;
  animation-duration: 2s;
  animation-name: rotateReset90;
}

.door_open {
  fill: #ff0000 !important;
  animation-duration: 2s;
  animation-name: rotate90;
  animation-fill-mode: forwards;
}

svg
css

[Jtarche]

Hi,

Could give us more details about steps in HA, please?

[dionisgr]

I create a plan (reworked several times as advised on the forum) the Door must be opened by triggering the binary sensor of Reed switch. But the door instead of opening on the spot (turn) flies outside the plan. The example on the picture…

[keithh666 (Keith Hull)]

Have a look at post 119 in this thread

Ah … I see you did :), I would try copying from one of the ones that works or create a new one.

[dionisgr]

I tried to copy even completely CSS and SVG but still get a flying door and a flying fan!

[meauxt (Mohamad Tarbin)]

this is my setup… i use www.flaticon.com and inspired by what the folks done here

[bachoo786]

How do you make it dark when the light is turned off ? And brighten when the light is turned on?

[gianm]

I have an image with the whole house turned off,I overlay the “on” status rooms images on top and I show them depending of the status of the room.

[bachoo786]

So you have separate images for the rooms? How many images do you have in total?

[gianm]

Yes, one per “on” state, around 15 images. one image “on” room look like this

[madrose]

I am also having the exact same problem. trying with the fan rotation. When the fan is clicked, it will rotate in all over the screen (moving in a big circle and not rotating in the same spot).

[keithh666 (Keith Hull)]

Have you set the origin for the spin…

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

[madrose]

Yes I did, and the center seems to be the center of the browser.

    - name: Air Conditions
      entities:
      - switch.kidsroom_ac_control
      - switch.livingroom_ac_control
      - switch.masterroom_ac_control
      - switch.office_ac_control
      states:
        - state: 'on'
          class: 'ac-on'
        - state: 'off'
          class: 'ac-off'
      action:
        domain: switch
        service: toggle

and the .css entries:

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}
#switch\.office_ac_control, .masterroom_ac_control, .livingroom_ac_control, .kidsroom_ac_control  {
  transform-origin: center;
}


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

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

[keithh666 (Keith Hull)]

Nothing jumps out at me The switch entity_id’s are correct? Maybe try splitting the switch line out to 4 separate transforms.

[madrose]

I tried that, and tried even one switch in an empty svg file where I have just the switch there and same thing it spins all over the screen.

[myle (StePhan McKillen (Other kiwi Here))]

can you share your code

look very nice

[DonNL]

Thought I’d share mine after lurking around.
I’m jealous at all the 3d beauty’s posted, but I’m glad what I came up with. Stole some ideas here as well.

Regarding the rotation animation I couldn’t get that to work either. I created a moving animation when my robot vacuum is cleaning, but when I try rotation it circles around my screen so I decided to leave that out.

[Javier_Dst (Li-Kwan)]

Hey! Will you mind sharing your iRobot animation? It’s great!!!

This is mine. Still working on it.