Floorplan now available as a Lovelace card

Only one feature request - making this work with the new cast service so I can cast my floorplan to my Google Home Hubs :slight_smile:

7 Likes

What Tinkerer said as this would be amazing!

Just a bump. Did this ever get released? It appears the current repository installation instructions still require multiple files and a ./lib directory.

I recently installed this for myself and used the lib files. Whilst not as straight forward as the glance card options the extra features of this just made sense.

Mines now running on a fixed tablet device in my house and looks just as perfect on various phones.

How do you use the yaml configuration file ?
Is it as simple as this:

  - cards:
      - config: /local/floorplan/data/myfloorplan.yaml
        title: Floorplan
        type: 'custom:floorplan-card'
    id: system
    badges: []
    title: Floorplan
    path: floorplan
    panel: true

This is mine, but see the documention linked from the first post.

I have the same kind of configuration actually. I’ve fixed actions by replacing toggle with homeassistant.toggle and so on.
It’s working except class_template for temperature and humidity. I don’t understand why.
is your class_template working on your side ?

Note: I’m using integrated lovelace, not yaml mode actually.

My real question is how to include the floorplan configuration in an external yaml file.

Hi,

Is there a way to link a path to a view for navigation to any of the elements on the svg file? Something like this?

        - element: views.home
          tap_action:
            action: navigate
            navigation_path: /lovelace/home_view

I have an element/image with the name views.home in the svg file and have linked the path to the specific view using the above code. It does not work though. Can anyone tell me where I am going wrong?

I’m adding climate data into my floorplan. Currently I’m using text but I somehow like more the look of home assistance badges (those red circles that have value inside). Would it be possible to use those somehow?

edit. Responding to myself. Sure, easy to import SVG and place it where I like. However, where can I find the badges or icons used in Home Assistant? I would prefer using exactly the same icons so that the there aren’t several icons with the same meaning. For example, where can I find icon mdi:thermometer in SVG or PNG format so that I can use it with my floorplan?

The icons used in Home Assistant are from https://materialdesignicons.com/
Enjoy!

Thanks, but I don’t seem to find all the same icons. For example the thermometer icon is a bit different (colors are vice versa). Are the exact icons somewhere in the home assistant sources?

Those are the exact icons.

Still, the thermometer seems to be otherwise the same, but different part is filled of the icon than in the original mdithermometer. But I might just live with it.

Any idea what is the font used in HA by default?

When I check the font is “Roboto”

Does anybody have an idea, how to add a long click/press function? I want to switch e.g. a light with short press and open more-info with long press (to dim, color, …).
I found modifications to ha-floorplan which add long press, but wasn’t able to “translate” that to lovelace-floorplan.

1 Like

How are people inserting these icons into the SVG floor plan? I’ve imported the PNG in, but CSS doesn’t get applied to that in HA.

1 Like

I inserted the svg files myself.

I followed (about half way shows the tooling and how to insert label etc so you can control embedded images via HASS/css/etc): https://m.youtube.com/watch?v=XV4xzgraNEk

I get all SVGs from here: https://thenounproject.com/

Once you do this it’s awesome as you can easily control each svg individually (either css / text control).

Hope it helps

Thanks, yes that worked out easily. Just import the SVG into the floor plan SVG.

One more question: Is it possible to overlay entity icons on the floor plan? For example to see a media_player entity preview (such as the one you see in the Glance card)?

you can insert(import) the svg floorplan in a program call inkspace and then add svg icons and set the entity then save it an put it in your HA.
The problem is that CSS doesn’t work in HA!
Says “Fill” property uknown…… in CSS

does your css work?