Floorplan now available as a Lovelace card

HI @OzGav, sorry, like i said im a beginner so what do you mean by the YAML code? You mean the code pasted through the “raw configuration edition” option? because i just did a copy-paste of the home.lovelace-view.yaml from the documentation.

  • title: Floorplan
    path: floorplan
    theme: Google Dark Theme
    icon: ‘’
    badges: []
    cards:
    • type: vertical-stack
      cards:
      • type: horizontal-stack
        cards:
        • type: ‘custom:floorplan-card’
          full_height: true
          config:
          image: /local/floorplan/examples/home/home.svg
          stylesheet: /local/floorplan/examples/home/home.css

Lets try something more simple. Also when you post your code can you highlight it all after pasting then press the icon that looks like this </> so all your formatting comes through. Can you edit your post and do that?

It looks to me that image and stylesheet aren’t indented correctly.

This is more what I think it should look like (This is a combination of my stuff and what you have to show you what it should eventually look like) You can remove your horizontal and vertical stacks for now until you just get a working image. Also try a different browser or device to test as well, this morning someone else got some help and it turned out to be a browser problem. That discussion might help and is here: https://github.com/ExperienceLovelace/ha-floorplan/discussions/63

title: Home Assistant
views:
  - panel: true
    cards:
      - type: 'custom:floorplan-card'
        config:
          image: /local/floorplan/examples/home/home.svg
          stylesheet: /local/floorplan/examples/home/home.css
          defaults:
            hover_action:
              action: hover-info
            tap_action:
              action: more-info
          rules:
            - entities:
                - sensor.wupws_temp
              name: Colour Coded Sensors
              state_action:
                - service: floorplan.text_set
                  service_data: '${entity.state != "unavailable" ? Math.round(entity.state) + "°" : "?"}'
                - service: floorplan.class_set
                  service_data: |
                    >
                      var temp = parseFloat(entity.state.replace("°", "")); 
                      if (temp < 10) return "temp-low"; 
                      else if (temp < 30) return "temp-medium"; 
                      else return "temp-high";
                

    icon: 'mdi:floor-plan'
    id: system
    title: Floorplan :
1 Like

Hi @OzGav, it works!! It’s a bit embarrassing, but the issue was i havent put a “s” at the example folder name.
I can sart to customize my Floorplan dashboard!
Thanks a lot for your help!!

No problems. Any more issues let us know here or open a discussion on github https://github.com/ExperienceLovelace/ha-floorplan/discussions

1 Like

I recently set up a new custom floorplan, based on the latest info on https://experiencelovelace.github.io/ha-floorplan/docs/quick-start/. Previously I had set up my floorplan configuration as written by Petar on his Github, but that suddenly stopped working after a certain update of HA. In the meantime I have converted it all to “ha-floorplan”. Everything works fine with the exception of the streaming camera. The camera images are not being updated, and I would like to see this working again. Below is a piece of code as it was previously written:

config:
  image: /local/floorplan/tablet.svg?v=1.1.14
  stylesheet: /local/floorplan/tablet.css?v=1.1.14
  log_level: error
  style: |
    svg {
    height: calc(100vh - 115px) !important;
    width: auto !important;
    max-width: 50vw !important;
    }
    ha-card {
    box-shadow: unset !important;
    }
  rules:
    - entity: camera.ipcam_subprofile
      image_refresh_interval: 2
      image_template: '${entity.attributes.entity_picture}'
  style: |
    svg {
    height: calc(100vh - 115px) !important;
    width: auto !important;
    max-width: 50vw !important;
    }
    ha-card {
    box-shadow: unset !important;
    }
type: 'custom:floorplan-card'

And as it is now written, but will not be updated.

config:
  image: /local/community/ha-floorplan/tablet.svg
  stylesheet: /local/community/ha-floorplan/tablet.css
  log_level: error
  style: |
    svg {
    height: calc(100vh - 115px) !important;
    width: auto !important;
    max-width: 50vw !important;
    }
    ha-card {
    box-shadow: unset !important;
    }
  defaults:
    hover_action: hover-info
    tap_action: more-info
  rules:
    - entity: camera.ipcam_subprofile
      state_action:
        action: call-service
        service: floorplan.image_set
        service_data:
          image: '${entity.attributes.entity_picture}'
          image_refresh_interval: 2
type: 'custom:floorplan-card'

Can someone help me?

Hi @antoinevandenhurk

We recently made a change to better support caching, and it caused a bug in the floorplan.image_set service.

The new version (1.0.20beta7) is available here, and will be released to HACS in the coming days.

https://raw.githubusercontent.com/ExperienceLovelace/ha-floorplan/master/dist/floorplan.js

Let us know how you go.

It’s now released :slight_smile:

hi all, i’m unable to add te svg file. it’s not clear if the folder need to be created in the “config” folder or in the www folder. i tried both but with no result. thanks

Oh yes it is. Please follow the guide

SVG should be within the www folder. Remember to restart HA. If you need any debug options, why and visit {IP} /local/{filename}.svg if you’ve placed the SVG-files in the www folder in HA.

could you pls explain where i have to create the folder? in thhe www folder or in the community folder?

Could you share your folder tree, from there the configuration.yaml are created? Normally the www direction should be created in the same path. And after a reload of HA, it should resolve as {HAIP}/local/community/ha-floorplan/...

My SVG’s are within the www:slight_smile:

Here’s a few examples, if that helps you…


config\www\floorplan\examples\home
this is my path for the home.svg and hhome.css
i use the raw editor to paste the yaml code.

Well… You’re still not sharing your folders, file-location and the config itself…

do you want a screenshots?

what you mean with “config itself?” i just paste your code in the raw lovelace configurator

Please share your YAML-code. It looks like the path arn’t right for the SVG-file in the YAML, if you’ve already restarted HA :slight_smile:


do you mean this??
i just copy your code in the raw lovelace configurator

Yes :grin:Looks right to me…

Have you tried to restart HA, and Ctrl+Shift+F5 a few times, in your browser? :blush:

i restart hassio a lot of time, and i also clear my cache

Well, PM me if you have Teamviewer. I’d normally don’t do this kind of support, but let’s give it a try. You can also find me on Discord.

1 Like