Share your Floorplan

OzGav · February 26, 2021, 11:29am

See what other think but I find floor plan easier to use. Just create everything in the SVG and then use CSS classes to control the appearance of the plan.

If you look here https://www.juanmtech.com/set-up-the-picture-elements-card-in-home-assistant/ you will see that with the elements card you have to define sizes and placement in the style section. That is harder for me than just placing and resizing images in the SVG and I think the picture elements card will be a way larger yaml file to achieve the same outcome.

Plus @pkozul has added some more powerful functionality lately such as functions.

According to here https://www.reddit.com/r/homeassistant/comments/afzmvq/is_hafloorplan_obsolete_with_the_introduction_of/ the general consensus is that floorplan is a more powerful version of what the picture elements card can do. If you are only doing something simple then the card may be fine for you…

metropt · February 28, 2021, 9:48pm

Right now I want to have a floorplan to show the temp & humidity in each division as I think this is the best way to see this kind of information but I don’t mind to add others features in the future like the door or window state.

pkozul · February 28, 2021, 10:37pm

Hi @metropt

There are some great discussions over on the floorplan GitHub repo. You can see some examples and get some ideas. It’s the best way to get help in case you get stuck.

Cheers,
Petar

TadF · March 3, 2021, 12:45pm

Still under construction, is it never ending Story

OzGav · March 3, 2021, 1:02pm

Looks great I ended up removing my little bulbs and just allowed a tap anywhere inside the room to turn on the lights. Just made it a little cleaner for me.

rousveiga · March 16, 2021, 11:37am

If you don’t have any RGB lights, you would do the same thing with the white overlay only, checking for the brightness attribute of your light and adjusting the opacity filter accordingly. Here’s the example I followed.

Sorry for the delay in responding!

theone · June 7, 2021, 9:37pm

Code is available on github

RaA11 · June 8, 2021, 2:11pm

wow! amazing!

sstarcher · March 18, 2022, 12:26pm

Here is my work in progress. I’m looking for ideas on how to show the doors being locked/unlocked. Taking other ideas for improvements.

Model - Floorplanner.com
Card - Ha-Floorplan all SVG
2 separate images that just use masking to create the lighting effects
Clicking on the room lights up the main lights
Clicking the lamps turns just the lamps on
Fan at the top right is purple when off, but spins and turns green when clicked.

OzGav · March 18, 2022, 12:49pm

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

nightfever · March 18, 2022, 2:19pm

Here is mine.

Kelvin · March 31, 2022, 7:54pm

Is there any better looking icon than mdi?

OzGav · March 31, 2022, 9:23pm

You can import any PNG you like into your floorplan.

OzGav · April 10, 2022, 11:41am

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+

OzGav · May 3, 2022, 6:23am

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!

Mika_Ihatsu · May 8, 2022, 4:41pm

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

OzGav · May 8, 2022, 9:40pm

You can use the template editor in developer tools

Mika_Ihatsu · May 8, 2022, 10:22pm

thanks that worked!

idan37s · May 19, 2022, 8:03pm

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.

OzGav · May 19, 2022, 9:07pm

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.