Share your Floorplan


#517

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


#518

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.


#519

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


#520

Hi,

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


#521

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…


#522

Have a look at post 119 in this thread :slight_smile:

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


#523

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


#524


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


#525

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


#526

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.


#527

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


#528

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


#529

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


#530

Have you set the origin for the spin…

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

#531

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

#532

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


#533

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.


#534

can you share your code

look very nice


#535

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.

20181027_120244


#536

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

This is mine. Still working on it.