Floorplan now available as a Lovelace card

Third party integrations Floorplan
369

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
          …
370

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
371

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!!

372

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

1 Like
373

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?

374

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.

375

It’s now released :slight_smile:

376

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

377

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.

378

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

379

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:

Screenshot_20210319-182602
Screenshot_20210319-1826021440×144 29.3 KB
Screenshot_20210319-182717
Screenshot_20210319-1827171440×449 81.3 KB

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

Screenshot_20210319-182846__01
Screenshot_20210319-182846__013120×1440 832 KB

Screenshot_20210319-183056__01
Screenshot_20210319-183056__013120×1440 344 KB

380

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.

381

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

382

do you want a screenshots?

383

Immagine
Immagine1152×720 21.8 KB
Immagine1
Immagine11297×925 25 KB

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

384

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:

385

Immagine3
Immagine31152×1064 62.7 KB

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

386

Yes :grin:Looks right to me…

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

387

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

388

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