Share your Floorplan

[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

[anhnt2309]

can you show me how to make a floor plan like yours?

[GeneralFailure]

No - I got so wrapped up in trying to figure it out based on the earlier troubleshooting steps that I lost all focus on the rest of this thread.

That worked perfectly - thanks and sorry for the stupid question.

[andrewjfreyer]

I used my iPad and AutoDesk. Different layers include different elements, and can be easily controlled from the SVG by changing their name in AutoDesk.

I had a floor plan from my builder to trace.

[oakbrad]

The files are here

oakbrad/brad-homeassistant-config

[thmry]

I’m currently working on my floorplan. I’m wondering whether it is possible to style an element in the SVG based on a different Home Assistant entity.

What do I want to do?

I want to show the temperature of a sensor on the floorplan, but also have the temperature determine the color of the circle (different layer and a different element in the SVG) behind it.

So, I actually have two elements that I want to change based on one Home Assistant entity.

The SVG (just the relevant part of it)

  <g
     style="display:inline"
     inkscape:label="livingroom sensor bg"
     id="g5071"
     inkscape:groupmode="layer"
     sodipodi:insensitive="true">
    <ellipse
       cy="242.75"
       cx="258.75"
       id="living_room_temperature_bg"
       style="display:inline;opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:2.43051577;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       rx="21.75"
       ry="22"
       inkscape:label="#ellipse5065" />
  </g>
  <g
     style="display:inline"
     inkscape:label="livingroom sensor text"
     id="g5081"
     inkscape:groupmode="layer"
     sodipodi:insensitive="true">
    <text
       id="sensor.living_room_temperature"
       y="254.75"
       x="258.50977"
       style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none"
       xml:space="preserve"
       inkscape:label="#text5075"><tspan
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.33333302px;font-family:Helvetica;-inkscape-font-specification:Helvetica;text-align:center;text-anchor:middle;fill:#ffffff;fill-opacity:1"
         y="254.75"
         x="258.50977"
         id="tspan5073"
         sodipodi:role="line">0.0</tspan></text>

As you can see I have two layers in there livingroom sensor bg and livingroom sensor text.

I’m using the following to set the text of the text element (with id: sensor.living_room_temperature) to the actual state of my Home Assistant entity called sensor.living_room_temperature.

  - name: Temperature
    entities:
      - sensor.living_room_temperature
    text_template: '${ entity.state ? entity.state : "0.0" }'

This works fine, but I also want to change the color of the circle (the ellipse with id: living_room_temperature_bg) based on the state of sensor.living_room_temperature.

Is this even possible?

I tried this:

  - name: Living Room Temperature
    entities:
      - living_room_temperature_bg
    class_template: '
      var temperature = parseFloat(entities["sensor.living_room_temperature"].state);
      if (temperature <= 10)
        return "temperature-low";
      else if (temperature <= 20)
        return "temperature-normal";
      else if (temperature <= 30)
        return "temperature-medium";
      else
        return "temperature-high";
      '

But that results in the following warning:

Cannot find ‘living_room_temperature_bg’ in HA group configuration

Which is correct, since it isn’t an actual entity in Home Assistant, it’s just the id of the ellipse in my SVG.

Now I can’t set the same id on the ellipse and use the class_template above, because that would also apply the class on the text element. This will result in the ellipse and text have the same color and I don’t want the text to change color.

Edit
I just realized that I could create a template sensor in Home Assistant which uses the state of the original sensor as its state and use that as the source for the ellipse instead.

That will probably work, but that also means creating template sensors for each sensor I want to apply this to. Is there no other way to do this?

[GeneralFailure]

Do you have any issues with the opacity objects showing up on iOS devices? I tried this and it looks great on my laptop, but on all of my iOS devices the object never becomes visible.

I also tried changing the CSS from opacity to visibility, but didn’t see a change.

Upon further investigation it’s something with my SVG file. A solid fill shows correctly and will go from hidden to visible without a problem. But any kind of gradient fill and the object disappears.

Thanks.