Share your Floorplan

Third party integrations Floorplan
710

For my windows and doors I have nothing if it is closed but I pulse a red shape if it is open,. You could do the same for unlocked.
YAML:

              state_action:
                service: floorplan.class_set
                service_data: 
                  class: '${(entity.state === "on") ? "door-windows-open" : "always-invisible"}'

CSS:

.door-windows-open  {
  fill: #ff0000 !important;
  animation: blink 2s linear infinite;
}

.always-invisible {
  visibility: hidden !important; 
  opacity: 0 !important;
  stroke-opacity: 0 !important;
}
711

Here is mine.

floorplan1
floorplan11597×906 267 KB

712

Is there any better looking icon than mdi?

713

You can import any PNG you like into your floorplan.

714

Just thought I would share the remote I have done for my Sony Andoird TV. I just grabbed a pic of a remote off the web and did some GIMP wizardry on it! The volume buttons are waiting on a Broadlink IR receiver to arrive so I can control the amplifier.
The main part of the remote is controlled through the standard integration Sony Bravia TV - Home Assistant
However, I also noticed that all the apps on the TV appear as a source for the media_player entity so all the icons at the bottom change the source which launches the app even with the TV in standby. Rule simply is

            - element: disney.button
              tap_action:
                service: media_player.select_source
                service_data: 
                  entity_id: media_player.sony_bravia_tv               
                  source: Disney+

remote
remote998×949 162 KB

2 Likes
715

Here is another remote I made up; this time for my media room. I hadn’t used multiple floorplan layers before so I wanted to learn how to do that and it worked out really well. Hopefully some more floorplan inspiration for you! Here is a video tour!

1 Like
716

Hi, I try to use floorplan to color fan icon based on speed. on/off coloring works already. Im using

class: '${(entity.state === "on") ? "spin-" + entity.attributes.percentage : ""}'

How i can check that this returns spin-25, spin-50 etc?

Thx

717

You can use the template editor in developer tools

718

thanks that worked!

719

Share your GIFs!

Anyone has gifs which they are using in their floorplan?
Gifs for music playing, wind blowing out of the air conditioner, ceiling fan, etc.

It would be nice if you could share them as it kinda hard to find good gifs that suits a floorplan.

720

Do you have any animated gifs working as I haven’t tried that? Certainly most have used CSS animations to get movement in floorplan.l.

721

Yea sure,
I have a few gifs i’m currently using for ceiling fan, air conditioner, speakers:

ceiling_fan
cool_blue_wind
heat_red_wind
musical_notes

722

Thought I would share my floorplan as I’ve been working on so much lately. It’s relatively simple and 2D with simple colours, but it’s neat and gives a nice overview of where the devices are around the house and what state everything is in.

1 Like
723

Great job and a really nice writeup that will help many others. The relationship between Sweet Home 3D, Inkscape and Home Assistant gets many questions!

1 Like
724

I highly recommend Interactive Floor 3D Plan. It lives up to its descriptive name. You can rotate, zoom in or out, click on objects to turn them on, open and close doors and windows, and display information in real time.

image
image1613×1228 266 KB

1 Like
725

My latest floorplan! Some might use picture elements for this sort of thing but I find issues with scaling when using that. This just works perfectly for me.

image
image1712×784 90.8 KB

3 Likes
726

Hi. I have contact sensors on my windows. I want it to pulse when it is opened (on) but only when this input_boolean.set_alarm state is on. Tried to find sample code with no luck. This is what I have so far and is working, but it pulse everytime the window is opened.

floorplan.yaml

- entities:
  - binary_sensor.computerroom_window
  state_action:
	action: call-service
	service: floorplan.class_set
	service_data: 'detect motion-${entity.state}'

floorplan.css

#areas .motion-on
{
 	fill: #ff00002e;
 	stroke: #ff000087;
 	stroke-width: 3px;
 	stroke-opacity: 1;
 	filter: unset;
 	animation: fade-in 1s infinite alternate;
}
727

Easiest way is just to create another entity to track the alarm and window states and AND them. See here for some ideas Help create a value_template to return false if any input booleans are on

728

Hi all,

I am sharing below my floor plan, but I also have an issue that would like to check is someone know the cause :slight_smile:

So, this is my new floorplan, fully re-built since I moved to a new house :partying_face:

image
image1665×909 89.3 KB

The issue:
There is a spinning wheel presented in both mobile browser, app and PC browser always spinning on top of my floorplan:
image

<div role="progressbar" aria-valuemin="0" aria-valuemax="1" class="mdc-circular-progress  mdc-circular-progress--indeterminate " style="width:28px;height:28px;">
        <!--?lit$44837221$-->
      <div class="mdc-circular-progress__determinate-container">
        <svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 28 28">
          <circle class="mdc-circular-progress__determinate-track" cx="14" cy="14" r="10" stroke-width="2.6666666666666665"></circle>
          <circle class="mdc-circular-progress__determinate-circle" cx="14" cy="14" r="10" stroke-dasharray="62.831852" stroke-dashoffset="62.831852" stroke-width="2.6666666666666665"></circle>
        </svg>
      </div>
        <!--?lit$44837221$-->
      <div class="mdc-circular-progress__indeterminate-container">
        <div class="mdc-circular-progress__spinner-layer">
          <!--?lit$44837221$-->
        <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
          <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 28 28">
            <circle cx="14" cy="14" r="10" stroke-dasharray="62.831852" stroke-dashoffset="31.415926" stroke-width="2.6666666666666665"></circle>
          </svg>
        </div>
        <div class="mdc-circular-progress__gap-patch">
          <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 28 28">
            <circle cx="14" cy="14" r="10" stroke-dasharray="62.831852" stroke-dashoffset="31.415926" stroke-width="2.1333333333333333"></circle>
          </svg>
        </div>
        <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
          <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 28 28">
            <circle cx="14" cy="14" r="10" stroke-dasharray="62.831852" stroke-dashoffset="31.415926" stroke-width="2.6666666666666665"></circle>
          </svg>
        </div>
        </div>
      </div>
      </div>

Does anyone know what this is and how to stop it? :slight_smile:

729

“mdc-circular-progress” doesn’t appear anywhere in the ha-floorplan github so I am thinking it is not related. How have you set floorplan up? Have you done anything non-standard? Are you running it in an unsupported environment? You can test by creating another floorplan with a single rectangle in it or something else super simple and see if it happens with that? If not then maybe you have done something unusual with your SVG?