Floorplan now available as a Lovelace card

[sirfrogman (Naviato)]

I’m excited about using Floorplan and invested a lot of time modeling my house. I’m stuck at the beginning of setup, though. I’m running HA with HACS installed on Docker. I don’t have supervisor access.

I access files in the www folder with /local and I have a folder labeled “Community” instead of HACS, so I replaced the template’s path with /local/community/ha-floorplan/examples/home/home.svg in YAML file.

Two errors are generated, one for the URL and the other for the stylesheet. The URL does appear to be loaded, though. I’d appreciate some/any guidance. Thanks!

[OzGav]

Yes it looks like a path problem. You could post a picture of your directory structure? Also put the path of the style sheet or SVG directly in your browser and they will appear if you have the path correct.

[sirfrogman (Naviato)]

The www folder is mapped, so I was able to change the path to start with /community. I only see the HA icon now. Is this right?

[OzGav]

The icon is not normal but the error messages at the bottom suggest that the correct SVG has been loaded.

I would first try double clicking on the SVG and see that it opens ok in your browser. If not it is a browser problem.

Then I would put the path to the SVG in your browser and see if it loads correctly. Likely this will be http://YOUR-IP-ADDRESS:8123/local/community/ha-floorplan/examples/home/home.svg

If you have some weird double mapping problem going on then move the examples directory up under www. It doesn’t need to be in the same place as the floorplan.js file

Edit: actually I would remove the vertical stack and horizontal stack from your configuration as that is just complicating things at this point

[SuperMaximus (Max)]

Does custom: floorplan-card correctly scale text like climate cards when viewing in Mobile app?
In my case I used picture-elements for outputting floorplan house map and encountered bad scaling of text elements from different sensors when viewing on Mobile app (the text is too bulky there, especially if the mobile is in portrait mode)

[OzGav]

I use both the IOS and Android apps and yes pinch to zoom works perfectly. I do use a high resolution floorplan though so that probably helps.

Plus you can also have mobile versions of your floorplans to optimise the view

[eyalco]

I am loading floor plan in secondary dashboard (panel: true). When I return to the Overview dashboard, I get invalid entity id warning. When I refresh the screen, it disappeared. It will return back after switching to floor plan and returning back. Any idea why?

[OzGav]

This is a known issue which is under investigation Error using ha-floorplan in ui-lovelace-minimalist panel. · Discussion #223 · ExperienceLovelace/ha-floorplan · GitHub

[exetico]

Thank you for reporting the bug.

That should be fixed with:

Release Bug-fix for ha-floorplan entity · ExperienceLovelace/ha-floorplan

[kol]

Hi ! How do you set this card to display stroke color basing on browser mode : dark or light ? I tried CSS with @medial tag but it does not work. Could you pls clarify this?

@media (prefers-color-scheme: dark) {
  element {stroke: white;}
}

@media (prefers-color-scheme: light) {
  element {stroke:black;}
}

[OzGav]

Have a look at this discussion and see if it helps Allow HA to control text style, to help with dark mode · Discussion #215 · ExperienceLovelace/ha-floorplan · GitHub

[kol]

@OzGav , Thanks for prompt reply.
For some reason my browser (Firefox) does not catch this @media scheme property correctly but try to use only first one - dark - always… so, the stroke value is always ‘white’ …

@media (prefers-color-scheme: dark) {element {stroke: white;}}

But on top of that I attempted to replace ‘stroke’ value another way and this does not let me do it because the ‘stroke’ property is part of path styling of original SVG.
For instance, I have in my CSS file: #layer1 .element {stroke; web-kit-stroke} defined , You can see below . but the stroke is omitted since it is part of tag styling.
Shall I configure Inkscape to set ‘stroke: inherit’ somehow for all elements ???
Is there any extra steps (combine elements styling) to create proper SVG to make it work for floorplan in dark/light modes properly?

My CSS file

/*@media (prefers-color-scheme: dark) {
  element {stroke: white;}
}

@media (prefers-color-scheme: light) {
  element {stroke:black;}
} */
#layer1 .element {
  stroke: var(--primary-text-color);
  -webkit-text-stroke: 2px #1c87c9;
}

[kol]

Seems I understood why prefers-color-scheme selects ‘dark’ always - the reason this is a preference set in my browser settings and it is not the theme setting of HA frontend. If I change the firefox theme - it follows well. But no reaction after HA UI preferences ((

The only working way so far is to take stroke color from the ‘var(–primary-text-color)’ .

In Inkscape if for a group of elements there is a user defined class and this class has ‘stroke’ attribute defined then similar stoke attribute is removed from styling of those elements. it is possible to define

myclass {stroke:var(--primary-text-color)}

it will correctly work in dark/light mode but only as black or white…

[OzGav]

I am not a CSS expert so I hope you can get it to work as you want. If you do find a good solution please add it to the github discussion.

[kol]

Guys, how do you configure smooth transition for image change ?

floorplan.image_set

I have tried to set a class with transition attribute in my CSS but it seems does not work

.do-it-smooth { transition all 2s } 

[OzGav]

Sorry about the picture but I’m doing this from my iPad. Here is the CSS I use.

Might have some redundancy in there now that I look at it but it works

[Mark_Calvert]

Hi All,

Hope you’re well. Spent hours and hours and hours following a tutorial here (Home Assistant Floorplan SVG Inkscape - YouTube ) but still seem stuck. My svg loads onto the screen, but there is this error message at the bottom.

Currently I have stripped out as much as possible to try get a basic solution working. Here’s the YAML

title: Floorplan2
path: floorplan2
icon: 'mdi:floor-plan'
theme: lovelace-blue-blur
panel: true
cards:
  - type: 'custom:floorplan-card'
    config:
      image: '/local/FloorPlan/FloorPlan_Opt13.svg'
      stylesheet: '/local/FloorPlan/FloorPlan.css'
      log_level: debug
      console_log_level: debug
    defaults:
      hover_action: hover-info
      tap_action: more-info
    rules:
      - entity: switch.sonoff_1000e34e5d_1
        tap_action: toggle
      - entity: switch.sonoff_1000e34e5d_2
        tap_action: toggle
      - entity: switch.sonoff_1000e34e5d_3
        tap_action: toggle

[OzGav]

I’m not sure if you are just showing an excerpt of your yaml or if this is from an included file but your dashboard should be starting with:

title: Floorplan2
icon: 'mdi:floor-plan'
views:
  - panel: true
    cards:
      - type: 'custom:floorplan-card'  
        config:
          image: /local/FloorPlan/FloorPlan_Opt13.svg
          stylesheet: /local/FloorPlan/FloorPlan.css
          log_level: debug
          console_log_level: debug

Rather than starting with that YouTube video which is a very advanced setup have a look at the examples in the docs.

[exetico]

Hi Mark,

I will recommend you to start with a basic setup, as @OzGav recommends.

You can always split up the files down the work, without any struggle.

Here’s a sample YAML of something I tested the other day:

  - title: FloorplanTest
    icon: 'mdi:floor-plan'
    panel: true
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack  
            cards:
              - type: custom:floorplan-card
                full_height: true
                config:
                  image: /local/floorplan/__test/fp-test-main.svg
                  stylesheet: /local/floorplan/__test/empty.css
                  defaults:
                    hover_action: hover-info
                    tap_action: more-info
                  rules:
                    - name: show-rect
                      entities:
                        - entity: light.nano_dimmer_current_value #light.spotlys_gang
                          element: rect2
                      tap_action: light.toggle
                      state_action:
                        - action: call-service
                          service: floorplan.image_set
                          service_data:
                            image: /local/floorplan/__test/rect-${entity.state}.svg?CB=128
                            cache: true

Fell free to give that a try…

Also, check the examples we have online.

Home Example

(Click on the “YAML” tab)

Let me know if you’re still struggling. If more help is needed, you could also consider to create a dedicated discussion here:

Discussions · ExperienceLovelace/ha-floorplan

There’s plenty of other “starter”-related question, if you’re searching for inspiration . I’ve also considered to create a video, with all the basic steps, but I’m still struggling to find time to do that.

[Sennevds]

So I have a thing I want to try but I don’t know if it’s possible. I have a svg with a layout where I want to dynamically add (or copy or …) svg elements. The positions of the elements I can get from a sensor. Would this be possible dynamically add or remove elements and set there position (change the css or something like that)