how to in YAML-mode ?

[acognard]

I all,
i have tryied many ways to use floorplan !

But did non find any solution on how to begin :(

ressources.yaml

- url: /hacsfiles/ha-floorplan/floorplan.js
  type: module

ui-lovelace.yaml

custom_header:
  compact_mode: true

views: #!include_dir_merge_named /lovelace
  - !include lovelace/ui_floorplan.yaml  
  - !include floorplan/examples/home/simulations.yaml
  - !include floorplan/master.yaml    

resources: !include lovelace/resources/ui_resources.yaml

Tks for your help.

[exetico]

Hi

Could you please try again, with one of our examples? That the best way to start debugging a problem. Include errors, if you're facing any.

https://experiencelovelace.github.io/ha-floorplan/docs/example-home/

[OzGav]

If you are working in YAML mode I am not sure the resources: line should be there. When in YAML mode the floorplan.js module should be referenced as follows in your configuration.yaml

lovelace:
  mode: yaml
  # Include external resources only add when mode is yaml, otherwise manage in the resources in the lovelace configuration panel.
  resources:
  - type: module
    url: /hacsfiles/ha-floorplan/floorplan.js

It is also difficult to see how the includes work. Can you try just adding the YAML directly to your ui-lovelace.yaml first and get that working?

[acognard]

thank you for your help OzGav.

ui-lovelace.yaml

custom_header:
  compact_mode: true

swipe_nav:
  wrap: false
  animate: swipe
  skip_tabs: 5,6,7,8
  prevent_default: true
  swipe_amount: 30
title: !secret name

views: #!include_dir_merge_named /lovelace
  - !include lovelace/ui_home.yaml
  - !include lovelace/ui_floorplan.yaml
  - !include lovelace/floorplan/examples/home/home.yaml  

configuration.yaml

lovelace:
  mode: yaml

  resources:
    - url: /hacsfiles/ha-floorplan/floorplan.js
      type: module 

home.yaml

sidebar_title: Home Sample
config:
  show_side_bar: false
  show_app_header: false
  config:
    image: lovelace/floorplan/examples/home/home.svg
    stylesheet: lovelace/floorplan/examples/home/home.css
...

Page is still empty.

I am desarmed !

Sincerly

[exetico]

Have you tried to put all in the same file, to simplify it?...

I must say, I've lost the scope of the situation - and I'm unsure about what's missing in your config(s). We've plenty of users, where it's working just fine - also fully updated.

If you take a look at the Network-tab in Chrome, are the CSS and SVG loaded as it should?

[OzGav]

I think it might be your path to the image and stylesheet
Please make a copy of your ui-lovelace.yaml and put it in a safe place. Then just create a ui-lovelace.yaml which has this:

title: Home Assistant
views:
  - panel: true
    cards:
      - config:
          log_level: info
          image:
            location: /local/floorplan/examples/home/home.svg
            cache: true
          stylesheet:
            location: /local/floorplan/examples/home/home.css
            cache: true

Let us know if anything appears.

[exetico]

Great point, OzGav! I missed that.

My suggestion about checking the Network-tab, would have pointed us in the same direction. But that's not needed now, if the path correction works 😊

And IF SO, I'll add some information in the setup-guide, if it's not already there... 🙃🧐🤔?

[amkochaki]

I copied the examples for my HA, but I'm not able to make it look like it. Would anyone have a step by step?

[exetico]

Look like what?:-) There's a step-ny step guide linked in our quick start guide.

https://experiencelovelace.github.io/ha-floorplan/docs/quick-start/

That will point you to:
https://community.home-assistant.io/t/floorplan-now-available-as-a-lovelace-card/115489/323?u=exetico