Share your Floorplan

[inspired (Paul)]

Great designs everyone!

I need some help with the following, we have multiple devices at home:
Android: Samsung Note5, Galaxy S6, 2 x 7" Android tablets
iOS: iPhone 7, 1 iPad and two 7" android tablets

When home assistant loads via the browser on each device, how do I:

1. Detect device and then have per device Floorplan load (due to screen size) e.g. might want to have layered floors or rooms for smaller screen that is Galaxy note 5 but have full floorplan layout for iPad?

2. Force full screen (without the top bar) as kiosk page is not true full screen?

Any guidance, steps to follow or actual example config/ code would be great.

Thanks

[ryanrdetzel (Ryan Detzel)]

FYI, if you’re having weird issues this might be the cause.

https://github.com/pkozul/ha-floorplan/issues/29

[CCOSTAN]

Here is another out of the box layout I have.

Building The World’s Greatest Smart Alarm Clock | VCloudInfo

[shire210]

Were there any changes you had to make in the kiosk settings to get the media player to work? I tried updating all necessary files, but still cannot get it to work.

[CCOSTAN]

No changes to Fully. Just floor plan and HA

[pistukk]

hi sorry for my english , can you help me or share a tutorial to do a floorplan like yours or can you share me a documentations to do this thanks you so much

[William_Rodriguez]

@shire210

ELEMENTS

    - name: TV Selection
      elements:
        - tv_select_button
      action:
        domain: class
        service: toggle
        data:
          elements:
            - tv_select_layer
          classes:
            - layer-visible
            - layer-hidden
          default_class: layer-hidden

In my floorplan.css I had to add the following:

/* Hide Layers */
.layer-visible {
display: initial !important;
}
.layer-hidden {
display: none !important;

Hi Shire - I’m trying to implement your hidden layer process but I haven’t been able to recreate it. For testing purpose, I left everything with the same names, but when I click the button nothing happens. Is there any further guidance you could provide?

Update: disregard, after several restarts it took…

[William_Rodriguez]

A lot of great floorplans posted. I want to take a moment to show you what I have been working on thanks too @shire210 with his hiding layers effect.

This is the main floor plan

Clicking on the light bulb opens up the list of light bulbs and their status, each light bulb can be turned on or off

Clicking on the security camera shows you the list of cameras

and clicking on the house next to the time brings up the floorplan with the locations of all of the items installed

clicking the house takes you back to the main screen. Now to figure out how to show all of the entities in their status on the floor plan without creating new sensors. If anyone has any ideas please let me know.

Thanks for the ideas!!

[Greg]

Looks good!

[IoTmessenger]

Hi Ryan, I really like your solution of using pages for smaller devices and navigation buttons to switch or toggle between them.
I started preparing my floorplan svg and yaml files to achieve this. However, the way the layer/groups and actions must be setup for this to work is not completely clear to me. I have made the following changes to my existing and working floorplan setup:

• my svg has been changed to include layers named page0-page2 (I want 3 pages to switch between)
• I added the background and items I need to control in groups on those layers (do I need to name those to page0- page2 as well?)
• added a toggle button, which I gave an ID=show.toggle

I understand I also need to add actions for the ‘show.toggle’ function in the floorplan.yaml file, but have no clue which service I need to use here.

I have read the floorplan documentation, watched your video and looked at the ‘pages-feature’ branch on your Github page but could not find any examples of your floorplan.svg and floorplan.yaml files to use as guidance.
Could you provide those, if you would? With those I should be able to find out what I need to change to make it work.

Thanks in advance!

[pkozul (Petar Kozul)]

@IoTmessenger

New version of floorplan is almost ready. It has a lot more features now, and you have much better support for controlling media players, etc. This new version allows you to create multiple ‘pages’ within your floorplan (without having to create SVG groups) and lets you easily navigate between them. Also, it lets you have multiple versions of the same page, but for different screen sizes, so you can define which SVG file to load for which screen sizes, etc. There’s a lot more too. Stay tuned…(edited)

[IoTmessenger]

Thanks for the heads up Petar, I later saw your message on Discord about the coming update mentioning that as well.
I guess this means you are implementing the pull request that Ryan did.

I will patiently await the new version, thanks for your work on this great addition to HASS!

[trinityEon (Ritesh Makan)]

I love this concept, Ever since i dreamt of doing automation, I wanted it to be from a floor plan.

Thank you all for contributing and enhancing this feature.

I thought this might interest you. I have been looking a an easy way to get my floor plan done nicely. I tried stanley floor planner, gliffy, etc. but not that much luck with having something that looks nice.

Have a look at this free tool:

Floor Planner Software | DIY | PlanningWiz - PlanningWiz Floor Planner

Blew my mind away with what it can do and how easy it was to use.

I plan to plan here, enhance in inscape and apply

Not sure about the 3D part, maybe a future version of HASS will be capable of 3D walkthrough in collaboration with these okes.

[Greg]

Brilliant, you’ve got every single feature I need in there, no kidding. I need media player control, tabs, and screen sizes

[pkozul (Petar Kozul)]

@Greg Cool. There is also the feature of a ‘master page’, where you create an SVG file with your common navigation buttons, and then a single <rect> for your content. When you click the navigation buttons, the <rect> gets loaded with the appropriate page. Basically it means you create your navigation buttons once, and they appear on all of your pages

[Greg]

Nice! Can’t wait.

[Coolie1101 (Coolie)]

[inspired (Paul)]

@trinityEon

Blew my mind away with what it can do and how easy it was to use.

Great find!!..Is there any other software to edit and add the metadata required other than Inkscape?

[inspired (Paul)]

@pkozul

New version of floorplan is almost ready. It has a lot more features now, and you have much better support for controlling media players, etc. This new version allows you to create multiple ‘pages’ within your floorplan (without having to create SVG groups) and lets you easily navigate between them. Also, it lets you have multiple versions of the same page, but for different screen sizes, so you can define which SVG file to load for which screen sizes, etc. There’s a lot more too. Stay tuned…(edited)

Hi,

Great !! that answers some of my unanswered questions

When are you planning on releasing the new version?

[iantrich (Ian)]

Waiting for an answer on your question before I dive into this. Want to make it as easy as possible