Share your Floorplan

Third party integrations Floorplan
371

I tried quite a lot of open source IoT platforms over the last year. So far this seems to be the most versatile and the most reliable. It is actually the only one that has a highly configurable floor plan option that that I envisioned when I started my home automation project. ( attention:this is an unheated country house over the winter, so low temps gathered inside :). Plus: some of the onsite sensors don’t work yet, but I couldn’t help it to share it ).

Otherwise, what I couldn’t figure out so far, is how to update all switches or all cameras states if I have centrally command for switching on/off all light or all cameras. maybe some scripts will solve it.

grate work you have done with this component.

image
image923×551 80 KB

1 Like
372

My current setup (imgur version is animated) https://imgur.com/s885IiA

hafloorplan
hafloorplan1623×1223 248 KB
n

Floor plan generated with Floorplanner, switches are black rectangles at 50% opacity when lights are off and hidden when lights are on.

10 Likes
373

Does anyone know how to turn a Chromecast TV on and off, and ideally display some kind of state on the floor plan?

I tried using service: toggle and that can turn the TV on, but clicking it again switches the state to idle instead of turning it off.

374

Created in Sweethome 3D. Used black room sized shapes to overlay the rooms, using opacity on the css to create the on/off effect.

floorplan
floorplan1053×399 1.75 MB

15 Likes
375

Amazing work guys @Dan_Nuttall @poebae !

I bought Sweethome 3D and started a 3D plan of my home too just haven’t had the time to finish it. I’ve been reading this thread off and on but don’t understand just yet how to add the layers and CSS. From what I understand once the svg of the 3D floorplan is created, you need to use Inkscape and build layers?? Is there a particular step by step guide you guys used to save me a bit of time? Not that I’m usually lazy, just the last month or so I’ve been super busy and reading hundreds of posts over doesn’t appeal much to me. Thanks!

376

You only need to build layers in Inkscape if you’re using multiple floors. Check out this thread. Otherwise all you need to do is create objects that correspond to the entities you’ve listed in your floorplan.yaml e.g. a light bulb icon with object id ‘light.bedroom’, or in my case black rectangles with the object IDs of the lights they represent.

If you’ve installed floorplan correctly you should already have custom_ui/floorplan/floorplan.css and you just need to modify it. If you need more specific help give us a look at your config and floor plan.

1 Like
377

Yeah it’s actually easier than you may think. After building my home in sweethome 3d I exported it as an image (with lights on!). I then imported that image into inkscape and drew black shapes over my rooms. To do this start off drawing a black rectangle with appropriate tool (F4), then select that shape with the Node tool (F2) and hit CTRL + K - this then allows you to drag the points around to create the exact shape of your room. You then put that shape on its own layer (CTRL + SHIFT + L opens the layers panel), and then give that shape the ID of your light or group of lights within the Object Properties (CTRL + SHIFT + O). This is what my SVG looks like in inkscape. You can sort of tell the outline of my rooms:

inkscape
inkscape1868×880 145 KB

Assuming you have installed floorplan (I went down the panel route), all you need to do is upload your SVG, edit the floorplan.yaml file so that IDs you gave your room shapes are listed. e.g. this is all I have under the “groups:” section in my yaml:

- name: Lights     
  entities:
    - group.living_room
    - light.hall_light
    - group.kitchen
    - group.bathroom_light
    - light.bedroom_light
    - group.office_light
    - light.landing_light
  states:
    - state: 'on'
      class: 'light-on'
    - state: 'off'
      class: 'light-off'
  action:
    domain: homeassistant
    service: toggle

Finally you just amend the CSS for the light-on / off. e.g. this is all I changed within my CSS file:

.light-off {
  opacity: 0.5 !important;
  transition: opacity 1s;
}

.light-on {
  opacity: 0.0 !important;
  transition: opacity 1s;

And that is it. Took quite a bit of trial and error to get to this point though cause I had never used inkscape or sweethome 3d before. Don’t think I missed anything out there. Give me a shout if you need any more assistance.

13 Likes
378

Perfect! This is great. Will give it a try this weekend. Thanks to both of you for the point in the right direction. Really appreciate it! @Dan_Nuttall @poebae

1 Like
379

Hello there! I also encountered a button that cannot be rotated in the center, but I do not know how to solve it.
This is my css
#CSS
#switch.switch12 {
transform-origin: center;
}

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

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

#yaml

  • name: Fan
    entities:
    • switch.fan
    • switch.switch12
      states:
    • state: ‘off’
      class: ‘fan-off’
    • state: ‘on’
      class: ‘fan-on’

#And svg
ID of my button
ID：switch.switch12

After all settings are made, my button still cannot work in the center. How to set the /Y /X/ axis correctly?

380

Hello I tried to press your method, but it always failed. Can you provide yours? Svg, yaml, css. thank you very much!

381
382

thank you for your reply! The corresponding problem has been solved!

383

Hello, I wrote your method, but it didn’t work. Is it possible to provide you with a complete ha-floorplan.html, svg, css, or file for my reference? thank you very much

384
385

Thank you very much, because I follow the example of your github, and he actually can’t work normally. So I would like to refer to your complete example to modify my own svg, ha-floorplan.html, css, yaml, etc. code! Thank you very much, and look forward to your sharing!

386

If you can, I hope you can provide the next, complete ha-floorplan.html, svg, css, documents. thank you very much

387

If it is not convenient to send to the forum, you can send it to my email address: [email protected]

388

Do not use the github example, use the example in link by @monkey-house. If you have trouble, check the comments from his solution to the bottom, then you should make it work. If you still have problems after you tried all that, I can send you the Javascript and ha-floorplan.html. But everything you need is in the link.

389

@poebae can you please share your svg file i.e. of your floorplan. Your layout is very similar to mine and I just need a little tweaking.

Thanks.

390

Sure thing, here it is: https://ufile.io/w7zfy

1 Like