Share your Floorplan

[Tjeerd]

Having some fun with floorplans.

Drawn in Autocad and exported as DXF.
Converted with convertio to SVG.
Modified in Inkscape.

Todo:
Animations
Remote door unlocking
Window covers / blinds, still thinking of a nice way to have them in the floorplan
Answer audio / video SIP calls from doorstation …

[faspina (Frank Spina)]

I am looking at all this stuff and I got to be honest it a little overwhelming what you guys are doing. I finally got my very simple floorplan up . I only have 5 lights on my HASS/Smartthings and I monitor 4 door and two garage doors. Right now I have them turn RED when open, which is cool. I would like them to blink red. Any advice on the CSS to do that.

[jmart518 (JT Martinez)]

This should do the trick:

floorplan.css:

.blinking {
  animation: blink 2s linear infinite;
}

@keyframes blink {  
  50% { opacity: 0; }
}

Make sure to add class: blinking to your entity ID in your floorplan.yaml

You can change the speed of the blink by changing the animation time (I just used 2s as a starting point)

[Smoculetz (Mihai Ciausu)]

Still work to be done, but for now

1. The orange contours fade in and out (2sec) when lights go on or off
2. The blue circles in the middle display temperature values
3. You can press on those blue circles to turn the light on or off in that specific room
4. The db2 filesize is “out in the balcony” … (that’s 5MB for now)
5. The big circle outside (on bottom) is Dark Sky outdoors temp. approximation
6. The red entities are devices discovered as being “home”
7. The small gray / orange circles are sockets/power outlets … some are ON
8. Each room with motion triggered, fades its floor in light red
9. … AC Unit and door animations incoming !

[keatontaylor]

This is really nice! I’m kinda frustrated that I do not seem to have the design skills to make something look really good.

[sjee]

@smoculetz Very nice!

How do you get the temperature with 1 digit. I’m just starting my floorplan but I noticed temperature is rounded for some reason.

[Tjeerd]

This should do the trick:

text_template: ‘${entity.state ? Math.ceil(entity.state * 10) / 10 + " °C" : “undefined”}’

[sjee]

That works, thanks

[ggravlingen]

The way I go about building designs is I just scribble something together that works. There is software (eg Stanley Floorplan) to get the very plan up and running. Its plan can be exported to your computer for a small fee.

Let’s say I then want to improve the color palette. I would then search for something along the line of “color palette space” or “color palette autumn”. This will give you a set of colors that someone has matched together as working in harmony with each other.

As a next step, you could ensure that objects in your plan are aligned with each other. Looking at the plan of @Smoculetz, for instance, you’ll notice he has his temperature sensors aligned vertically and horizontally to each other. That makes it easier for the eye to follow what goes on.

In regards to symbols, I use the noun project and copy/paste them into my plan for a more professional look.

Good luck!

[keatontaylor]

Thanks for the advice, I am going to give it a try this weekend.

[oakbrad]

So far…

[Smoculetz (Mihai Ciausu)]

… a lot of people don’t believe that because of the alignment, the brain is hardwired to think and act towards better understanding of things. That’s why most of us “don’t get” modern art/paintings … they don’t make sense …

Thanks for noticing and I’ll take your advice to search for a palette matched by someone else. I really want for the colors to blend and feel “in harmony with each other” …

[ggravlingen]

Haha, I actually wasn’t referring to your plan in terms of the colors, only the alignment.

[Smoculetz (Mihai Ciausu)]

… … that’s what I said … my colors are awfull, you made me realise that … … oops, new version of HA came out ! , just noticed …

[faspina (Frank Spina)]

I only have 5 lights automated. 4 of them are outside and 1 in the playroom. The 3 outside doors, one internal door and 2 garage doors blink Red when they are open, thanks to jmart518. I have some other ideas but my design skill stink. I use the Stanly floorplan designer to get the layout and scale right, then exported to svg for $3. Been working on it all week off and on and keep thinking of new ideas. I have an old android I may finally get to use to display this full time.

[sjee]

This is what I’ve been working on

• I draw the floorplan from scratch in inkscape. Started with roomscan on my iPhone and exported the rooms as jpeg
• Importered the jpeg’s in inkscape, got a bit overwhelmed by the user interface
• Added a “walls” layer on top of the jpegs and draw the walls
• Removed the jpeg’s and added a “floor” layer below the walls. Putting the floors in a different layer makes it extremely easy to change color later on. I’m currently using a “beach color pallete” which I found online - thanks for the suggestion @gravlingen!
• On top of the “walls” layer I added a layer for the furniture areas. These are 20% transparent so they match the color of the rooms.
• The top layer is holding the entities.

I still need to add some more sensors, lights etc. But currently the floorplan is showing temperature and humidity in every room, text color will change depending of the sensor readings. Same for the plants, based on flora sensors they are green or brown when they need watering. All doors and windows open and close ofcourse

[Smoculetz (Mihai Ciausu)]

WOW, that is hard work … and beautiful !, congrats !

[oakbrad]

Very nice! Would you mind posting your config for the plants? I can’t figure out how to change the class based on an attribute (like moisture level).

I got a little carried away with mine… I put the plants on a separate layer so i can hide them with the button

[sjee]

Thanks @Smoculetz, it’s a bit of work but worth the effort I think.

@oakbrad that’s an impressive number of sensors and plants! What’s up with the fish on the left? This is the code is use (if I remember correctly thanks to @CCOSTAN)

floorplan.yaml

        - name: Plants
          entities:
             - sensor.plant_1_moisture
             - sensor.plant_2_moisture
             - sensor.plant_3_moisture
          text_template: '${entity.state ? entity.state : "unknown"}'
          class_template: '
            var moist = parseFloat(entity.state.replace("%", ""));
            if (moist < 10)
              return "plant-notok";
            else
              return "plant-ok";
            '

floorplan.css

/* Plants */
.plant-ok {
  fill: #227501!important;
}
.plant-notok {
  fill: #84502b !important;
}

[Bram_Kragten]

Themed floor plan

Since 0.51 I have my home assistant front end switched to a dark theme after sunset, only my floor plan didn’t change with it…

So I changed it a bit to do:
(still working on the color scheme…)

What I did:
Add:
<link rel="import" type="css" href="floorplan.css" include="ha-style">
underneath <dom-module id="ha-floorplan">
in ha-floorplan.html

add new variables to the configuration.yaml:

frontend:
  themes:
    darkorange:
      floorplan-primary-color: "#ff9800"
      floorplan-light-primary-color: "#62717b"
      floorplan-background-color: "#37464f"
      floorplan-background-motion-color: "rgb(150, 142, 128)"
      floorplan-positive-color: "#caeb55"
      floorplan-negative-color: "#f15a24"
      floorplan-button-color: "#263137"
      floorplan-button2-color: "#263137"
      floorplan-button-border-color: "#263137"

Change the colors in my SVG and css to variables:
style="fill:var(--floorplan-button-border-color, #edf2f6)" etc…
The color behind the variable is the default, for when there is no theme chosen.