Floorplan now available as a Lovelace card

Third party integrations Floorplan
308

The example files can be found here:

309

Thanks a lot!!

310

And you might even like to use the on / off light bulb SVGs we have in the Home example :slight_smile:

311

Thanks for your help but I have not much time and I am facing some problems that does not allow me to get the floorplan visible :confounded:

I will wait till the final release and documentation is ready to try it again without bothering you :wink:

312

Hi Oscar

ha-floorplan will not see any changes in the structure, so fell free to give it another try. If you’re facing any issues, please share your current configs including whatever else needed.

I’ve merged my own setup, and that’s working just fine, after changing the most primary ‘keys’:

1 Like
313

Since the old floorplan I did not update anything so, I am sure that I am missing something in the configuration, not an issue in your implementation for sure :slight_smile:

If I had more time to check it, I probably would get it working but for me it is impossible to expend more time, sorry. Anyway, thanks for your support and your willingness to help the community, I really appreciate it :+1:

Hope after holidays I will be able to find more time to check it, though the official release will be available.

Thanks again for your work

1 Like
314

at https://github.com/ExperienceLovelace/lovelace-floorplan it says:

Just add the URI to HACS’s as custom repository.

but i get a Invalid Add-on repository! so what is the URI to use?

315

Hi.

It’s currently a bit of a mess, while we’re moving to the new repo.

Please see:

Also, take a look at examples (use left-side menu), or the buttons in the bottom of the page:

316

i tried with https://github.com/ExperienceLovelace/ha-floorplan

that did not work either

So i guess i have to wait

317

Well, it’s working just fine here. See screenshots below.

Screenshot_20201226-234345
Screenshot_20201226-2343451440×3120 306 KB
Screenshot_20201226-234359
Screenshot_20201226-2343591440×3120 662 KB
Screenshot_20201226-234405
Screenshot_20201226-2344051440×3120 230 KB

Select Lovelace as the category while adding it as a custom repo. I’ve just tested it again, and it’s working just fine :grin::+1:

(We’ve already submitted the PR to HACS, but waiting for them to handle the request. It’s totally ready to be used as a custom repo already)

318

its this part:

So, plese remove the old repo from HACS, and replace it with with custom repo:
https://github.com/ExperienceLovelace/ha-floorplan

image
image1920×1040 162 KB

319

That’s not HACS. You’re in HA’s own store for the Hass.io solution.

Please add HACS to your HA env. :grinning::+1:…

Check this:

In HACS, you’ll find a lot of other great plugins, components, and much more :blush:

321

so i got as far as installing the card?

image
image1920×1040 85.1 KB

but how do i add the card to home view? it does not show up as a card there

image
image1920×1040 83 KB

322

Now you’ll need to add the resource, to your resource file :blush:

I can already see a Floorplan in the background. Are that just a image, or is that your SVG file?:slight_smile:

323

Hi. Today (17 oct., 2022) is … a new day for me. Yesterday i planned and recorded a video on how to get started with ha-floorplan. It’s done with Home Assistant OS, which are the easiest way to get started with Home Assistant.

I really hope that I’ll find time to create more videos in the future, with more specific content - but I’ve received quite a few requests on how to get started with Home Assistant, in the last couple of years.

Happy floorplanning everyone!

It’s my first video in English and as a “teacher”, but I’ve executed it the best I can, during a rainy sunday.

There’s many ways of adding the Floorplan. I’ve spinned up my Hass.io test-instance, and create a guide for you :slight_smile:



I’ll like to mention, that it’s totally OK that you’re asking. It’s helping us to know, what we need to include in our docs, for a “Beginners” guide :slight_smile: ! That’s great.

Guide for Hass.io setup (where static-files will be located within config/www)

Please note that this is ONLY FOR the Hass.io solution!

Note about non-hass-io solution:
Static-files for non-hassio setups, are normally within your .homeassistant/www (.homeassistant are the same folder, as where your configuration.yaml file lives.)

Hass.io setup guide

At this point, you’ve already installed HACS, and added the ha-floorplan repo as a custom reposition, and installed it, too :slight_smile:

Let’s take the last steps together…

  1. Please validate that the resources is added in http://{HA-IP}:8123/config/lovelace/resources
    image
    image1261×588 73.2 KB

Attention: You’d have to enable “Advanced mode” on your Home Assistant user-account. Read more here.

  1. Create a new view:

    image
    image721×558 51.3 KB

  2. Go to the “raw” editor:

    image
    image1011×231 9.7 KB

  3. Scroll down, and find “Floorplan”

  4. Replace the Floorplan-content with the following code (open the link, and copy it):
    Note that “type” are missing in our docs (I’ve created a note about that, so we’ll remember to have it 100% copy-paste friendly).
    I’ve just added it as the viewst view, so here it looks like this:

    image
    image1099×534 49 KB

  1. Now you’ll be able to see an empty card, if your CSS and SVG-files are missing:

    image
    image1577×1284 236 KB

  2. If you’re unsure about how to transfer files to your Hass.io instance, I’ll recommend you to use the “File editor” add-on from the “Supervisor” section.

    image
    image1034×619 61.4 KB

    After it’s installed, open the Web UI.

  3. You can see that the defined path are /local/floorplan/examples/home/home.svg, for the svg-file. /local/ translates into /www/:
    image

  4. Let’s create the folders needed. Note that / will be used to create a folder, within a folder path (that’s a default thing on most Unix-systems).

    image
    image1018×384 14.4 KB

  5. Navigate to floorplan > examples > home

  6. Upload the “home.svg” and “home.css” file to the folder, with the “Upload file” button.
    image

    image
    image1014×365 16 KB

  7. IMPORTANT: If you created the “www” folder yourself, you’ll need to restart Home Assistant before continue. If you’re unsure whether the “www” folder was created with config from the beginning, please restart Home Assistant - just to be sure.

  8. Enjoy Floorplan

    image
    image969×739 34.2 KB

    Oh well… You’ll need to draw a svg yourself, ofc.


Bonus-info: You can remove the console by removing the log_level: info-line from the config.



Also… It’s totally possible to use the GUI for almost every step, if you like to do so.

  1. Use the “+” button, after you’re created the “Floorplan” view:

    image
    image937×1080 95.3 KB

  2. Press “Manual”

  3. Paste in this wall of code (open the link, and copy it):

2 Likes
324

that is just an image… its a thing i found that was installed from the beginning

325

thanks for the guide, it worked for me, but a restart was needed

now on to making an SVG

326

Hello @exetico and @pkozul
I’m back trying to apply the first rules on a floorplan I’ve converted from Autocad. Seems its not working. The main difference I’m trying to apply the rules to a GROUP of converted polylines that forms a door. Could it be the problem? HAving it grouped and setting it with correct ID, the color change is not applied. If I apply it to a single rectangle created by me, it works.
Ideas?
Thanks!
Simon

327

Could you please wrap-up the problem, and secure that you’re using ha-floorplan?

Examples can be found here (select them in the menu in the left sidebar). The light-build should do the RGB just fine. @pkozul has already tested it :slight_smile:

Also, remember that a few keys/options has been renamed:

I’m not 100% sure about, what you’re thinking off, when you’re writing:

Are nothing triggered, if you’re pressing a element on the SVG-file, or? :slight_smile:

Personally I’ve create some ID’s in the SVG file, and are poing to them. They’re not a 100% match - cause I knowit will change in Home Assistant, down the line.

Here’s one example with my living-room:

name: Livingroom
entities:
  - group.livingroom
element: area.livingroom
# groups: # Can be used to open group
#   - group.office
tap_action:
  service: light.toggle
  service_data:
    entity_id: light.aeotec_zw111_nano_dimmer_level
state_action:
  service: floorplan.class_set
  service_data:
    class: '${(entity.state === "on") ? "light-on" : "light-off"}'

Here area.livingroomare the “ID” given in the SVG-file to the livingroom-svg element. The group.livingroom are used to see, if one (or more) light are on, and if they are, it will add the state called light-on. If i press the element mathing the ID (area.livingroom), it will trigger my light entity called light.aeotec_zw111_nano_dimmer_level.

I hope that can help you a bit? I know the docs are not ready for the public, but we’re trying to do our best to make everything ready, as fast as possible :slight_smile:

328

It seems I am having difficulty converting a template if you don’t mind helping:

      state_action:
        action: call-service
        service: floorplan.image_set
        service_data: |
          >
           var imageName = ''; 
           switch (entity.state) { 
             case 'sunny': imageName ='day'; break; 
             case 'clear-night': imageName = 'night'; break; 
             case 'partlycloudy': imageName = 'cloudy-day-1'; break; 
             case 'partly-cloudy-night': imageName = 'cloudy-night-1'; break; 
             case 'cloudy': imageName = 'cloudy'; break; 
             case 'rain': imageName = 'rainy-1'; break; 
             case 'snow': imageName = 'snowy-1'; break; 
           } 
           return 'image: /local/floorplan/active/weather_icons/' + imageName + '.svg';

Does the switch function no longer work?

Thanks.