Floorplan now available as a Lovelace card

Third party integrations Floorplan
1

Hi all,

It’s been a while, but I’m back again. I’ve done some work to get Floorplan working as a custom Lovelace card. I still need to flesh out the documentation, but for those who want a head start, you can get it from here:

Feel free to try it out, and keep us posted on how you go with it.

image
image807×821 106 KB

Cheers,
Petar

48 Likes
2

Will certainly try this one one once my setup is migrated to new hardware :slight_smile:
Any recommendation for a tool to create the SVG’s?

3

Nice!

Really want to give it a try.
Like @Verschaeve_Dries asked, do you recommend a SVG tool?

4

I screenshotted the map generated from Xiaomi Vacuum, drawn the lines with Inkscape over it, exported the svg, imported in Floorplanned, then I have just discovered you need a svg, and to export in svg from Floorplanner you need to pay.
Soo… I second you request. :smile:

I’m checking out this Dr.Zzs video https://www.youtube.com/watch?v=HBXIOj5ndo4

5

I scanned the original floorplan of our home (supplied by the builder) and loaded that bitmap into Inkscape. From there, I created a new layer for tracing over the bitmap, and saved as SVG. Took a while, but in the end, the result was worth it.

1 Like
6

Nice idea. Thanks!

7

I will check out the video too. Thanks! Have some nice idea’s now about how to do it.

8

That’s what I did.

Yeah I just need some time to do a good job :smiley:
Awesome video, but I think he forgot to make part 2 :smile:

I’m mostly looking at adding furniture, and just discovered free version of Sweet Home 3D can export to svg ( the 2d view) and png (3d view).

9

Thanks a lot for this card!

So it doesnt load pngs?

EDIT: Nvm figured out. Today I made the map with all the furniture in 3d in Sweet Home 3D but gave up because setting up all the entities is very frustrating :sweat_smile:

image
image1920×1027 143 KB

10

Thanks for this. I loaded it up and I guess it works but I am at a loss how to add entities… I guess I will have to wait for docs… thanks

11

The SVG works just like the original HA Floorplan. I just copied over the SVG I had for that, and everything worked.

1 Like
12

The action toggle didn’t work.
action:
domain: switch
service: toggle

What should it be?

Thanks,

1 Like
13

Hi there,

I’ve put together a simple example showing how to use Floorplan. If anyone gets a chance, can you go through the steps and let me know if you managed to get the demo working in your HA environment?

Simple Floorplan example

image
image634×799 96 KB

I’m hoping that it will be quick and easy to get the example working on anyone’s HA installation, and so I’ve made sure to include the configuration of all HA entities required by this demo.

Let me know how you go.

Cheers,
Petar

1 Like
14

Just moved my foorplan to lovelace. Only thing I am seeing which is not working is animations. Can anybody else confirm if this is happening with their own as it could just be something in my own config?

15

I haven’t updated in the last few days, but transitions weren’t working for me, which I suspect is related.

16

I running 0.92.2 and seeing the following errors thrown from the browser developer console but do not look related as it is for custom-compact-header.

image
image876×482 54.4 KB

And the following error thrown in home-assistant.log does look related to floorplan.

2019-05-10 09:36:23 ERROR (MainThread) [frontend.js.latest.201904270] https://???.ddns.net:8123/local/floorplan/lib/yaml.min.js?_=1557480983270:1:1479 Uncaught SyntaxError: Invalid or unexpected token

17

I’d be more comfortable to use it - if it supported custom_updater - any plans to integrate with it?

1 Like
19

I am not so knowledgeable about floorplan, what does it do different than using a picture entity?

1 Like
20

Thanks for your work making Floorplan.

I have successfully transition my old floorplan to Lovelace version but I am strugging to apply styles base on light state. I see in cosole that state are properly named and are updated on click.

ui-lovelace.yaml:

      - type: 'custom:floorplan-card'
        title: Home
        stylesheet: /local/floorplan/assets/floorplan.css?v=1.1.8
        config:
          image: /local/floorplan/assets/floorplan.svg?v=1.1.8
          rules:
            - entities:
              - light.toilet_light
              - light.hallway_light
              - light.bathroom_light
              states:
                - state: 'unavailable'
                  class: 'light-unavailable'
                - state: 'on'
                  class: 'light-on'
                - state: 'off'
                  class: 'light-off'
              action:
                service: homeassistant.toggle

Relevant style from stylesheet:

.light-unavailable {
    fill: #c2c2d6 !important;
}

.light-off {
    fill: #00004d !important;
}

.light-on {
    fill: #ffff33 !important;
}

What am I missing?

1 Like
21

Hi @inutilis. Can you try with the latest version? https://raw.githubusercontent.com/pkozul/lovelace-floorplan/master/www/floorplan/lib/floorplan.js