Possible to split a dashboard.yaml file?

Buckeyes1995 · December 20, 2024, 7:24pm

I have a floorpan that is ‘built’ with Sweet Home 3D and managed via a .yaml file. With over 100 elements (lights, fans, etc.) the file is getting very big and unwieldy. Is it possible to split the file by, for example, rooms? one room per .yaml file? Or do I have to have it all in the single file.

The following is in my configuration.yaml file that points to the dashboard ‘tablet.yaml file’.

  dashboards:
    lovelace-yaml:
      mode: yaml
      title: Tablet
      icon: mdi:script
      show_in_sidebar: true
      filename: dashboards/tablet.yaml

finity · December 21, 2024, 1:21am

If you manage your dashboard via yaml you can use !include statements to split the tablet.yaml file.

You haven’t posted the code in tablet.yaml so it would be hard to give you examples.

perlchamp · December 21, 2024, 1:15pm

Hello, I am a beginner.
Could you PLEASE write step-by-step instructions on how you integrated the floorplan card into HomeAssistant.
The official examples don’t help me, they confuse me.
Which files should be created, what content do they have, and in which directory are they located?
How did you integrate the card into the dashboard, and and and.
That would be really great of you. The documentation is two years old, the content of the files points to the wrong directories, the installation is different, and so on.

Thank you very much in advance!
Have a nice time!

[EDIT]
Your QUESTION:
That’s my configuration.yaml:

# Loads default set of integrations. Do not remove.
default_config:

# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes

automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
influxdb: !include influxdb.yaml
scrape: !include scrapes.yaml
template: !include templates.yaml
sensor: !include sensors.yaml

here is the Overview (Studio Code Server):
Unbenannt

IMPORTANT is, not to use the domain-name twice, therefore the beginning of my sensors.yaml (the domain-name “sensor:” is used in the configuration.yaml for splitting “!include”):

- platform: feedparser
  name: CHIEFS News
  date_format: "%a, %d %b %Y %H:%M:%S %Z"
  feed_url: "https://www.sport.de/rss/news/te3064/kansas-city-chiefs/"
  inclusions: title
  exclusions: []
  scan_interval:
    minutes: 15
  show_topn: 5

good luck !
And the pointed file (p.ex. sensors.yaml) you can splitt,too, and so on…
[/edit]

So long
Pc

WallyR · December 21, 2024, 2:30pm

Try to watch this video.
It has a section about include.

Buckeyes1995 · December 22, 2024, 3:56pm

So, here is what I’m trying:

Splitting up the tablet.yaml file, by room"

tablet.yaml:

type or paste code here
```views:
  - title: Tablet
    panel: true
    cards:
      - type: picture-elements
        image: /local/floorplan/home.png
        elements:
          front_office_floorplan: !include fo_floorplan.yaml

And fo_floorplan.yaml:

          - type: state-icon
            entity: light.front_office_overhead_lights_dimmer
            icon: mdi:lightbulb
            style:
              left: 24%
              top: 73%
              opacity: 75%
              transform: scale(1.75,1.75)
              color: orange
            tap_action:
              action:
                toggle

The error I get is:

Image 12-22-24 at 9.53 AM

It looks like HA is adding the ‘front_office_floorplan:’ and is what’s messing it up?

finity · December 23, 2024, 1:55am

I think you need to remove the “front_office_floorplan:” and just add !include lines for the elements themselves.

I don’t have any picture elements cards so this is untested but try this.

tablet.yaml:

views:
  - title: Tablet
    panel: true
    cards:
      - type: picture-elements
        image: /local/floorplan/home.png
        elements:
          - !include fo_floorplan.yaml

then in fo_floorplan.yaml:

            type: state-icon
            entity: light.front_office_overhead_lights_dimmer
            icon: mdi:lightbulb
            style:
              left: 24%
              top: 73%
              opacity: 75%
              transform: scale(1.75,1.75)
              color: orange
            tap_action:
              action:
                toggle

then to add another element:

views:
  - title: Tablet
    panel: true
    cards:
      - type: picture-elements
        image: /local/floorplan/home.png
        elements:
          - !include fo_floorplan.yaml
          - !include some_other_floorplan.yaml

WallyR · December 23, 2024, 9:33am

The minus first in your floor plan.yaml indicate it is a list.
Remove the minus and then use the include statement for a list.
I can’t remember the exact command, but it is in the video and if I remember right then includes starts at around 11 minutes in.

finity · December 23, 2024, 12:38pm

Oh, you’re right I think. I missed that.

updated the post.

Buckeyes1995 · December 24, 2024, 1:26pm

Thanks. I watched the video. I think it’s “dir_merge_list”.

I’m out of town so will try next weekend.

Buckeyes1995 · December 30, 2024, 8:48pm

I’ve started with a simple ‘tablet.yaml’ file to include two other files. The icon is not overlayed on the image like it is in the ‘big file’. Still doing something wrong…

tablet.yaml

views:
  - title: Tablet1
    panel: true
    cards:
      - type: picture-elements
        image: /local/floorplan/home.png
        elements:
          #####################################################################################################
          ###
          ### FLOORPLAN IMAGES
          ####
          #####################################################################################################

          - !include_dir_merge_list /local/desktops/floorplans
          - !include_dir_merge_list /local/desktops/elements

fo_floorplan.yaml:

- type: image
  entity: light.front_office_overhead_lights_dimmer
  style:
    left: 50%
    top: 50%
    width: 100%
    mix-blend-mode: lighten
    filter: >-
      ${ "hue-rotate(" +
      (states[‘light.front_office_overhead_lights_dimmer’].attributes.hs_color
      ?
      states[‘light.front_office_overhead_lights_dimmer’].attributes.hs_color[0]
      : 0) + "deg)"}
    opacity: >-
      ${states[‘light.front_office_overhead_lights_dimmer’].state === 'on' ?
      (states[‘light.front_office_overhead_lights_dimmer’].attributes.brightness
      / 255) : '0'}
  state_image:
    "on": /local/floorplan/home_fo_overhead.png
    "off": /local/floorplan/home.png
  tap_action:
    action: none

fo_elements.yaml

- type: icon
  icon: mdi:desk
  style:
    left: 78.2%
    top: 75%
    opacity: 75%
    transform: scale(1.75,1.75)
    color: orange
  tap_action:
    action: fire-dom-event
    browser_mod:
      service: browser_mod.popup
      data:
        #title: Guest Bedroom
        content:
          type: vertical-stack
          cards:
            - type: custom:mushroom-title-card
              title: Front Office
              #subtitle: SmartHomeScene.com
              alignment: justify
            - type: custom:mushroom-chips-card
              chips:
                - type: menu
                - type: entity
                  entity: sensor.main_floor_temperature
                  icon_color: orange
                - type: entity
                  entity: sensor.main_floor_humidity
                  icon_color: indigo
                - type: template
                  content: |-
                    {% set lights = ['light.front_office_overhead_lights_dimmer', 
                    'light.front_office_desk_lamp', 'light.front_office_fan_light'] %}
                    {% set total = lights|select('is_state', 'on')|list|count %}
                    ({{total}}) Lights ON
                  icon: mdi:lightbulb-group
                  icon_color: |-
                    {% set lights = ['light.front_office_overhead_lights_dimmer', 
                    'light.front_office_desk_lamp', 'light.front_office_fan_light'] %}
                    {% set total = lights|select('is_state', 'on')|list|count %}
                    {% if total > 0 %}
                      orange
                    {% else %}
                      grey
                    {% endif %}
                - type: template
                  content: |-
                    {% if is_state('fan.front_office_fan', 'on') %}
                       Fan is ON
                    {% else %}
                       Fan is OFF
                    {% endif %}
                  icon: mdi:fan
                  icon_color: |-
                    {% if is_state('fan.front_office_fan', 'on') %}
                      green
                    {% else %}
                      grey
                    {% endif %}
            - type: horizontal-stack
              cards:
                - type: custom:mushroom-light-card
                  entity: light.front_office_overhead_lights_dimmer
                  show_brightness_control: true
                - type: custom:mushroom-light-card
                  entity: light.front_office_desk_lamp
                  show_brightness_control: true
            - type: horizontal-stack
              cards:
                - type: custom:mushroom-fan-card
                  entity: fan.front_office_fan
                  icon_animation: true
                  show_percentage_control: true
                - type: custom:mushroom-light-card
                  entity: light.front_office_fan_light

Buckeyes1995 · December 30, 2024, 9:55pm

I could not get HA to allow the use of two !includes. When I put in the second line, per your example, it tries to combine the two lines and says it can’t read ‘!include fo_floorplan.yaml some_other_floorplan.yaml’. I think the correct way is to use one of the dir_list or dir_merge* options, but doing that I can’t get my second file (elements) to load which would overlay an orange icon on the floorplan image.

finity · December 30, 2024, 11:46pm

I doubt I can help any further. I don’t have any experience with doing what you are trying to do.

But I use multiple includes in my lovelace config and it works in my situation.