Share your Floorplan

Third party integrations Floorplan
106

Sure.

In my “floorplan.css” I have defined my classes for motion:

`/* Motion */

.motion-off {
  fill: #FFFFFF !important;
}

.motion-on {
  fill: #FFE6E6 !important;
}`

In my “floorplan.yaml” I have defined the entities:

  - name: Binary sensors
    entities:
      - binary_sensor.living_eye_sensor
      - binary_sensor.bedroom_eye_sensor
      - binary_sensor.kitchen_eye_sensor
      - binary_sensor.bathroom_eye_sensor
      - binary_sensor.hallway_eye_sensor
    states:
      - state: 'off'
        class: 'motion-off'
      - state: 'on'
        class: 'motion-on'
    state_transitions:
      - name: On to off
        from_state: 'on'
        to_state: 'off'
        duration: 2
      - name: Off to on
        from_state: 'off'
        to_state: 'on'
        duration: 1

… observe the “state_transition” part !, that’s what you’re looking for when you desire the fade effect. By writing different values in the “duration” fields, you can fade entities faster or slower.

… off topic:

I’ve added some “pendants” on the right, just to give me a rapid/quick overview as how many lights / motion areas / wall plugs are ON. Instead of searching through the house, looking for small things, I now have a quick way of seeing how many of each are ON. If someone is interested in the syntax of those sensors, i’ll share it here. Also, when you press on the corresponding “pendant” ALL those entities go OFF … for ON, you have to toggle them individually.

FloorPlan 001
FloorPlan 0011211×881 84.9 KB

FloorPlan 002
FloorPlan 0021211×885 83.2 KB

Have fun ! … :yum:

16 Likes
107

That’s really nice! I love the right side toggles.

108

Thanks man, coming from one of our best, it means a lot to me … :slight_smile:

I just finished the AC Unit Modes, have a peek :slight_smile:

FloorPlan = AC Unit Modes

The small white grill like bars become orange as each of them is a template sensor which becomes “True” as the power drawn rises over its threshold >10W, >50W, >100W, >300W … >700W … etc. (the Power is reported by a Fibaro Wall Plug).
Fan speed is only presumed at first, as it is an IR command sent by a Broadlink Universal Remote, but usually it reaches the unit without problems.

Good luck to you all ! … :wink:

8 Likes
109

Not really a “floorplan”, but the start of a simple remote to be used on a kiosk mode iPhone using floorplan for hass. Icons grabbed off the noun project website.

Will eventually be adding presets for the radio.

IMG_0012
IMG_0012640×1136 25.1 KB

4 Likes
110

That’s an ingenious use of floorplan! I may have to steal this idea for a living room remote tablet.

111

This is what I have put together so far. Still a work in progress. Took a lot of inspiration from other plans on here.

floorplan
floorplan1583×928 146 KB

The weather icon next to the time is animated and clicking on the tv in the bottom left pops out more icons to change the input of the tv.

floorplan tv
floorplan tv847×248 30.8 KB

Have it running on a new fire tablet with Fully Kiosk.

Still on the list is to change the “home button” change the layout of the buttons/scripts on the right hand side, and get the tablet mounted on the wall.

5 Likes
113

Are you willing to share the code you used to do your tv pop outs? I’m interested in something similar in my remote.

Thanks

114

Definitely!

In my floorplan.svg I have a separate layer with the ID tv_select_layer that houses the “pop out” buttons. I also have the tv button on the bottom left in the main layer with the ID of tv_select_button.

In my floorplan.yaml I have the following code:

    #### ELEMENTS ####
        - name: TV Selection
          elements:
            - tv_select_button
          action:
            domain: class
            service: toggle
            data:
              elements:
                - tv_select_layer
              classes:
                - layer-visible
                - layer-hidden
              default_class: layer-hidden

In my floorplan.css I had to add the following:

/* Hide Layers */
.layer-visible {
  display: initial !important;
}
.layer-hidden {
  display: none !important;

I think that covers everything. Let me know if you have any questions.

3 Likes
115

Very cool. Thank you!

I’ll try it out and let you know if I have any issues.

1 Like
116

That code worked great. Thanks again!

IMG_0017
IMG_0017640×1136 31.7 KB
IMG_0018
IMG_0018640×1136 47.6 KB
IMG_0019
IMG_0019640×1136 44.5 KB

Still lots of tweaking to do, but the basic concept is solid.

** EDIT: I forgot to add. If any knows how to get rid of or use that white space at the bottom, please let me know. It’s the space where the header “would” be, but I have it hidden.

Thanks!

1 Like
117

Is your floor plan the size of your phone screen? My plan fills up the Kindle Fire I’m using it on completely but I’ve explicitly set the size of the canvas area = resolution of Kindle Fire…

118

Yes, it is. If I try to make it any taller, it starts to scale and the side margins are no longer correct. I know that space is where the header “would” be if I was showing it, but safari must do something weird with the way it’s being hidden.

119

You can actually turn off the cursor when using the touch screen. If that is something you’d like to do:

120

I went out and brought a raspberry pi screen, but am having trouble with the plan fitting the screen and leaving space around the edge.

How did you get the background colour?

121

Hi all

Can anyone give me pointers on adding 90 degree door rotations ?

So far I’ve successfully been able to change the color of the door with my sensor action, have tired a few ideas i pulled from some posts but didn’t have much luck :frowning:

thanks

122

floorplan.css

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

@keyframes rotateReset90 {
	0% {
		transform: rotate(90deg);
	}
	100% {
		transform: none;
	}
}

/* Doors that open to the top left */
#DOMAIN\.DOOR1 {
  transform-origin: top left;
}

/* Doors that open to the bottom right */
#DOMAIN\.DOOR2 {
  transform-origin: bottom right;
}

.door_closed {
  fill: #008000 !important;
  animation-duration: 4s;
  animation-name: rotateReset90;
}

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

floorplan.yaml

        #  DOORS  #
        - name: Doors
          entities:
            - DOOR1
            - DOOR2
          states:
            - state: 'off'
              class: 'door_closed'
            - state: 'on'
              class: 'door_open'

you might have to change the degree to fit your needs.

~Cheers

4 Likes
124

Thank you for this ill give it a go

Can I ask though what is #DOMAIN referring to ?

cheers

EDIT: OK I got the animation working but its anchor point is off the screen, im guessing the #domain is my problem can you shed some light one what the placeholder should be referring to ?
thanks

125

Thanks! I actually have been wanting to do that but haven’t gotten around to it. I will be implementing that one soon.

126

I believe I added the div starting at line 17 as well as line 11 on this file: https://github.com/Haynie-Research-and-Development/jarvis/blob/master/panels/downstairs.html

It’s probably redundant, but it didn’t hurt anything to have it twice. I don’t remember having a fitting problem, but it could be your SVG. I made sure my SVG dimensions matched the resolution of my Pi screen.

1 Like
127

Just an FYI, if you setup your Raspberry Pi like I did, this will not work. I didn’t install lightdm or any window manager. I am only using straight x server. I didn’t want to waste resources on window/desktop manager system I wouldn’t ever use since I am always running HA in kiosk mode.

This did however help me find the right direction to remove the cursor though, so very helpful. I updated my X server script to have the nocursor option, which did in fact remove it.

1 Like