Share your Floorplan

[SMARTMEDIA (MIHAI Ciausu)]

They may work the same, but the pricing is better in favor of Sweet Home 3D. If you hurry you can still get it for free. And the libraries are huge.

[Jtmoore81]

Here is my floor plan so far. Currently working on the fan animations but can’t get the fans to stay in one place.

[sparkydave (🇦🇺 Dave)]

I wouldn’t stress about hurrying… its been free for many years now!

[tringler (Tom)]

This is my approach so far - Still work in progress:

[systmworks (Darren)]

If you are having trouble with fans spinning around your house (instead of on the spot) add this line to your .fan-on section in the floorplan.css

transform-box: fill-box;

Example:

.fan-on {
  fill: #000000 !important;
  -webkit-animation: rotation 3s infinite linear;
  transform-box: fill-box;
}

[Jtmoore81]

Edit: Removed the lower layer that produces the yellow and it works. Thanks for your help.

That works better. It’s not across the entire screen and one fan works while the other doesn’t. The orange fan on the bottom right should be in the room that is yellowish, while it does spin correctly just in the wrong spot.

#fan\.ge_12730_fan_control_switch_level	, #fan\.ge_12730_fan_control_switch_level_2 {
  transform-origin: center;
}

.fan-on {
  fill: #ff8a65 !important;
  -webkit-animation: rotation 2s infinite linear;
  transform-box: fill-box;
}

.fan-off {
  fill: #424242 !important;
}

[bachoo786]

Hi @systmworks

How have you rendered your 3d? What are your dimensions i.e. width and height in pixels? The quality? Basically every setting to render the 3d image in sweethome 3d.

Thanks.

[systmworks (Darren)]

While there are some optional settings you can adjust, I just do the following:

1. Drag the divider line up near the top of the screen so the 3D preview is displayed on most of the screen (this seems to set the vertical resolution of the render).

2. Click 3D View menu -> Create Photo

3. Click the Create Button

Done.
I never adjust the resolution settings - on mine its currently 1920 x 1141 (but the 1141 varies slightly based on how high I dragged the dividing line).

I leave Quality on Best (why would you not??) - and Lens as Default (but feel free to try others).

I do recommend you play with the time of day as that will affect the shadows and brightness of the rendered image. I like the shadows around 9 AM and 3 PM.

Be sure you have set your geographic location and timezone (under Plan -> Modify Compass) or else the lighting and shadows will be wrong (possibly completely eg night time instead of day - if you get a pitch black render).

[bachoo786]

Thanks @systmworks

Quick question I want to display the temperature in the room how can I do that?

[chrisw]

Just wanted to say I came across this thread and was inspired. I’ve decided to give up HASSdashboard and go with floorplan instead. Total WAF as well I’ve fleshed out my floorplan and current setup using floorplanner.com and then start with Inkscape doing as someone suggested with layers.

Can’t wait to get started once I’m done everything image-wise.

EDIT: Scale is important. The “larger” items will be interactive whereas the “smaller” items will simply light up when active.

[bachoo786]

How did you display the temperature units? I cannot get it to work my text_template is as follows:

text_template: '${entity.state ? entity.state + " °C" : "undefined"}'

All I get is the numerical value not the °C

[SMARTMEDIA (MIHAI Ciausu)]

Here it is for me where I need to:

1. Display W after some variable:
   text_template: '${entity.state ? entity.state + " w": "undefined"}'
class_template: 'return "font-3";'

2. Display °C after some variable:
   text_template: '${entity.state ? entity.state + "°C": "undefined"}'
class_template: 'return "font-3";'

3. Display the rounded value of a decimal number, in this case MegaBytes:
   text_template: '${entity.state ? Math.ceil(entity.state) + "MB": "undefined"}'
class_template: 'return "font-1";'

You can see some of it’s results here, for some ° and w:
*sorry I hovered with the mouse too long before the snapshot and the info label popped up

And here, for some MB:

[bachoo786]

Thanks a lot that did the trick !!

[Romquenin]

Hello, I have a strange issue with my floorplan.
When I’m using input_boolean they automaticly turn off just after they have been turned on. This doesn’t happen with lights or switchs.
Does anyone experience the same trouble ?
Thank you.

[SMARTMEDIA (MIHAI Ciausu)]

Short Answer: NO, nobody is experiencing your trouble, if he did, you most likely would have been able to find the answer in this long thread by now.

Long Answer: Please be more specific. We will be able to help you even more if you can take the time and give us some example of your troubles. For example:

1. I did that
2. I edited that and gave that thing this name
3. After that, I put that there, saved and closed
4. When I push on that, it does that but it also does this!

I don’t want it to behave like that !, I need it to do only this ! … … you get it

Side Note: I know that in your head everything makes sense, all stars are aligned but “it doesn’t work as it should!”. Damn, what can I do?, can you guys help me? … and we are like , what ? …

[Zepixir]

yes, have the same problem. Seems to be related to this: https://github.com/pkozul/ha-floorplan/issues/29
They have seemed to fix it, but I don’t know how to implement the lines correctly.
A workaround is to use a script to turn on/off what you want. You will get an error message script is already running in the log thou. Please let me know if you figure out how to implement the lines
Does not seem to be a problem with hue lights or zwave components.

[Romquenin]

Thanks Zepixir, i will have a look at it. Will update you if i find a workaround.

[GeneralFailure]

I am having a similar issue with my animations on my fans. Seems like they are using their origin location as the outside diameter and then rotating around the center of the SVG.

Floorplan.yaml

    - name: Fan
     entities:
      - switch.living_room_fan
     states:
       - state: 'on'
         class: 'fan-on'
       - state: 'off'
         class: 'fan-off'

Floorplan.css

switch\.living_room_fan {
transform-origin: center;
}

.fan-on {
fill: #ff8a65 !important;
-webkit-animation: rotation 2s infinite linear;
}

.fan-off {
fill: #424242 !important;
}

SVG

path
id=“switch.living_room_fan”
d=“… z” />

Anyone have any ideas? I’m sure it’s something stupid, but at this point I’ve looked at it too long to see it.

Thanks!

[Zepixir]

You tried to add transform-box: fill-box; as already mention more than once latelely here in this tread?

Share your Floorplan

Nice house A couple of tips: As of Chrome version 64 I got problems that my door animation just flew away, don’t know if thats a problem with fan, but if it is a problem add: transform-box: fill-box; Like this for my door: .door_closed { fill: #008000 !important; animation-duration: 4s; animation-name: rotateReset90; transform-box: fill-box; } You don`t need to add a dummy switch, but you could add a input_boolean for it to look more systematic. The important thing …

Share your Floorplan

Thanks for the ideas above guys. Of course nothing ever works the same for everyone! I had to change my fan.on css to .fan-on { fill: #ff8a65 !important; animation: rotation 2s infinite linear; transform-box: fill-box; transform-origin: center; }

Share your Floorplan

If you are having trouble with fans spinning around your house (instead of on the spot) add this line to your .fan-on section in the floorplan.css transform-box: fill-box; Example: .fan-on { fill: #000000 !important; -webkit-animation: rotation 3s infinite linear; transform-box: fill-box; }

Share your Floorplan

Edit: Removed the lower layer that produces the yellow and it works. Thanks for your help. That works better. It’s not across the entire screen and one fan works while the other doesn’t. The orange fan on the bottom right should be in the room that is yellowish, while it does spin correctly just in the wrong spot. [image] #fan\.ge_12730_fan_control_switch_level , #fan\.ge_12730_fan_control_switch_level_2 { transform-origin: center; } .fan-on { fill: #ff8a65 !important; -webkit-animati…

[anhnt2309]

please show me how to create your beautiful floor plan