Splittint Dashboard Yaml file

Configuration Frontend
1

Hi
I’m new in HA…
I’m building a dashboard with picture-elements card.
I added the dashboard using the UI and edited is using the Raw config file or from the “edit” button.
The thing is it getting bigger quite fast and I’m trying to split it.
I saw some docs about how to split files but for some reason it doesn’t work for me and I’m getting:
The error:
YAMLException: unknown tag !<!include>

Can someone help with that?
Thanks :slight_smile:

2

The UI editor (storage mode) doesn’t support !include for the config.

to use that you need to switch to yaml mode.

3

Thanks for the reply!
Can you help me understand the meaning of “yaml mode”?
I saw this in various places, is it not the yaml editing from the UI?

4

no.

the different modes are used to determine how the dashboards are configured and where the files are stored.

in UI mode you configure the dashboards via the UI and only incidentally/rarely use yaml to configure them. Once they are configured the configuration is stored in the (hidden non-user editable) .storage folder in your config directory.

In yaml mode all of the dashboards are only configurable manually via yaml and the files are stored basically anywhere you want them to be in your config directory. You just need to point your config to the correct location.

you set which mode in your configuration.yaml. By default if nothing is specified you are in UI mode.

if you want to switch to yaml mode you enter this:

lovelace:
  mode: yaml

There are other configuration options in yaml mode as well but that’s just the basic config.

I have no idea where that is documented tho. I just looked and can’t find it in the expected places. I just know because I have used yaml mode since “Lovelace” was created.

5

Hi finity and thanks for the help!
I kind of mange to split the files… BUT…
I built a picture element card with a LOT of elements…
I’m trying to split it but whatever I’m doing it’s not working.

I tried to do something like this:

title: Floorplan
panel: true
badges: []
cards:
  - type: picture-elements
    image: /local/v2/c_Lights_off_1920x1344_19_00.bmp
    aspect_ratio: 1920x1344
    elements:
      # Floor Images Handling
      - !include ImagesLayout/FloorPlan_PictureElements_ImageElements.yaml
      # Lights Handling
      - !include FloorPlan_PictureElements_Lights_Elements.yaml
      # AC Handling
      - !include AC/FloorPlan_PictureElements_ALL_AC_Elements.yaml
      # Motion Sensors handling
      - !include FloorPlan_PictureElements_MotionSensors.yaml
      # Water Sensors handling
      - !include FloorPlan_PictureElements_WaterSensors.yaml
      # TV handling
      - !include ImagesLayout/FloorPlan_PictureElements_ImageElementsTVButtons.yaml
      # Persons handling
      - !include FloorPlan_PersonsElements.yaml
      # SideButtons handling
      - !include FloorPlan_SideButtons.yaml

But instead of showing the elements it’s showing the text in red (so it obviously not working)
Any idea?

6

Not really.

The only thing I can think of is that you need to make sure your paths to all of the included yaml files is correct.

7

Not sure the difference, since I cant find good doc yet, but what resolved it was to do:
elements:
elements: !include_dir_merge_list Test