"Include" floorplan.yaml file in lovelace cards when using UI mode?

[Aephir]

How do you have a single *.yaml file for the floorplan and include that in an UI controlled lovelace?

I see that I quickly get HUGE yaml files in the UI editor, and it can’t really handle it. It starts lagging. A lot. And I’m running HA on a proper server with dual Xeon CPUs and 128 GB RAM!

It also gives these weird artifacts with multiple copies shown, as well as retaining elements that were deleted even after browser force refresh AND HA restarts:

But it’s only in the UI yaml editor, i looks as it should once I save changes and go to the actual card.

Aside from the lag, it would be nice to edit files of that size in a better editor (i.e. mounting a Samba and editing directly on your computer).

Just doing !include in the lovelace card for the floorplan didn’t work, but is there another way to just have a separate manually managed yaml file only for the floorplan? It kind of looks that way from the documentation (“The configuration can be stored in a separate file (i.e. home.yaml)”), but it doesn’t really say how.

[OzGav]

In your UI yaml just add something like this (indented two spaces):

  - !include dashboard/bedrooms-main.yaml
  - !include dashboard/bedrooms-spare.yaml

  - panel: true
    cards:

then in your included file you start without indents like this:

panel: true
cards:
  - type: vertical-stack
    cards:   
      - type: 'custom:floorplan-card'
        config:
          image:

P.S. It will be the browser or client computer that has issues showing your huge yaml not the server.

[Aephir]

Thanks, but I seem to get the same error as when I tried it before (“unknown tag !”):

With this file in config/www/floorplan/all_floors/all_floors.yaml

panel: true
cards:
  - type: vertical-stack
    cards:   
      - type: 'custom:floorplan-card'
        config:
          image: /local/floorplan/all_floors/floorplan-all-floors.svg
          stylesheet: /local/floorplan/floorplan.css
          console_log_level: warn
          defaults:
            hover_action: hover-info
            tap_action: more-info
          rules:
            - name: Lights
              entities:
                - entity: light.basement_entrance
                  element: light.basement_entrance
                - entity: light.bathroom
                  element: light.bathroom
etc...

But this directly in the lovelace card UI yaml editor works fine:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:floorplan-card
        config:
          image: /local/floorplan/all_floors/floorplan-all-floors.svg
          stylesheet: /local/floorplan/floorplan.css
          console_log_level: warn
          defaults:
            hover_action: hover-info
            tap_action: more-info
          rules:
            - name: Lights
              entities:
                - entity: light.basement_entrance
                  element: light.basement_entrance
                - entity: light.bathroom
                  element: light.bathroom
etc...

[OzGav]

In the include line what happens if you get rid of the / before local?

[Aephir]

Exactly the same, unfortunately.

Actually, as soon a I just write the !include, the error pops up, and stays regardless of what else I put in

[OzGav]

To see if it is something with that line move all_floors.yaml to config and then have that line as:

  - !include all_floors.yaml

and then see what happens…

[OzGav]

And if what you have posted is all that is in that dashboard file then that is the issue. It needs to start with

title: Home Assistant
views:

[Aephir]

No luck. As soon as I write the !include, I get the error, and it never goes away, even with:

  - !include all_floors.yaml

and the all_floors.yaml in the /config/ dir. Again, as soon as I write !include, I get the error.

Also with a file that starts:

title: Home Assistant
views:
  - panel: true
    cards:
      - type: vertical-stack
        cards:
          - type: 'custom:floorplan-card'
            config:
              image: /local/floorplan/all_floors/floorplan-all-floors.svg
              stylesheet: /local/floorplan/floorplan.css
              console_log_level: warn
              defaults:
                hover_action: hover-info
                tap_action: more-info
              rules:
                - name: Lights Toggle
                  entities:
                    - entity: light.basement_entrance
                      element: light.basement_entrance

[OzGav]

OK so I am clear on this. Does the yaml directly above work OK? That is, your all floors floorplan is working?

[Aephir]

If I just paste

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:floorplan-card
        config:
          image: /local/floorplan/all_floors/floorplan-all-floors.svg
          stylesheet: /local/floorplan/floorplan.css
          console_log_level: warn
          defaults:
            hover_action: hover-info
            tap_action: more-info
          rules:
            - name: Lights
              entities:
                - entity: light.basement_entrance
                  element: light.basement_entrance
                - entity: light.bathroom
                  element: light.bathroom
etc.

directly into the raw yaml editor in a lovelace card, it seems to work fine. This shows up:

And I can toggle lights by clicking them, and the few sensors I have set up seem to report correctly (still in the process of adding them all).

It’s only the !include par tI can’t get to work.

[OzGav]

@Aephir

directly into the raw yaml editor in a lovelace card

It might be what you are saying here. Maybe this is just your terminology but floorplan doesn’t go IN a card. It IS a card and with panel:true it is a complete view. A dashboard can have multiple views.

So you should be editing in YAML a dashboard. That dashboard should start with

title: Home Assistant
views:

Your views can then be either typed out in full or INCLUDED. If it is typed out in full you would have something like:

title: Home Assistant
views:
  - panel: true
    cards:
      - type: vertical-stack
        cards:   
          - type: 'custom:floorplan-card'
            config:
              image: /local/floorplan/floorplan_mgzsev.svg
              stylesheet: /local/floorplan/floorplan.css
              rules:
                - entities:
                    - input_number.simulated_car_battery_percentage
                  name: Percentage Sensors
                  state_action:
                    service: floorplan.text_set
                    service_data: '${entity.state != "unavailable" ? Math.round(entity.state) + "%" : "?"}'

but if you are including it you should have something like:

title: Home Assistant
views:
  - !include dashboard/mgzsev.yaml

and

panel: true
cards:
  - type: vertical-stack
    cards:   
      - type: 'custom:floorplan-card'
        config:
          image: /local/floorplan/floorplan_mgzsev.svg
          stylesheet: /local/floorplan/floorplan.css
          rules:
            - entities:
                - input_number.simulated_car_battery_percentage
              name: Percentage Sensors
              state_action:
                service: floorplan.text_set
                service_data: '${entity.state != "unavailable" ? Math.round(entity.state) + "%" : "?"}'

The indentation is essential. Is that what you are doing?

[OzGav]

OK I also think I see the issue. Firstly I don’t use the UI for editing the YAML so I might be a bit sketchy on some details and I am catching up on what you are actually doing. I think you are trying to use the UI editor yaml mode. What you want to do is open the view you want to edit and then click the overflow menu (3 dots top right) and select EDIT DASHBOARD and then select the overflow menu again and select RAW CONFIGURATION EDITOR

[Aephir]

You are absolutely correct. I was using the edit dashboard → add card → manual; I guess I should be using edit dashboard → raw configuration editor?

Sorry, I haven’t messed much with Lovelace since I moved from using pure yaml files to using UI.

So maybe, if I can ask, explain it like I haven’t used Lovelace in UI mode before, because if I use the raw configuration editor, then the should the total configuration be:

title: Floorplan
views:
  - !include all_floors.yaml

with the `all_floors.yaml` directly in the `/config`:

panel: true
cards:
  - type: vertical-stack
    cards:
      - type: 'custom:floorplan-card'
        config:
          image: /local/floorplan/all_floors/floorplan-all-floors.svg
          stylesheet: /local/floorplan/floorplan.css
          console_log_level: warn
          defaults:
            hover_action: hover-info
            tap_action: more-info
          rules:
            - name: Lights Toggle
              entities:
                - entity: light.basement_entrance
                  element: light.basement_entrance
                - entity: light.bedroom
                  element: light.bedroom
                - entity: light.conservatory_1
                  element: light.conservatory_1
                - entity: light.conservatory_2
                  element: light.conservatory_2
                - entity: light.conservatory_sun
                  element: light.conservatory_sun
                - entity: light.dining_room_lightstrip
                  element: light.dining_room_lightstrip
                - entity: light.kitchen_cabinet
                  element: light.kitchen_cabinet
                - entity: light.kitchen_spots
                  element: light.kitchen_spots
                - entity: light.lightstrip_emilie
                  element: light.lightstrip_emilie
                - entity: light.lightstrip_naia
                  element: light.lightstrip_naia
                - entity: light.luca_s_room_lights
                  element: light.luca_s_room_lights
                - entity: light.outdoor_shed
                  element: light.outdoor_shed
                - entity: light.stairway_down
                  element: light.stairway_down
              state_action:
                service: floorplan.class_set
                service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
etc.

?

Because if I try to save (with the all_floors.yaml exactly as you show in your last post), I still get an error with the !include, though (“unknown tag”, see error in bottom right corner):

[OzGav]

There is this post saying you can only have includes in ui-lovelace.yaml. Is that the one you are editing? Having issue with !include for Lovelace - Solved

[Aephir]

Nope. sorry if my terminology is off, that was what I was trying to convey with the title (UI mode).

After migrating to a new install, I wanted to try using the UI, since it looked like this was the way that was getting most love from the dev team. So my ui-lovelace.yaml file was retired a while ago.

I guess that then means I need to make a feature request for this to work?

[OzGav]

Yeah seems like a core issue and not ha-floorplan so try with them…

[Aephir]

Well, thanks for the long troubleshooting session. Much appreciated!