A tip for splitting up your Lovelace config

My Lovelace config file, ui-lovelace.yaml, was getting rather large, so I decided to split each view (tab) into its own file.

The neatest way, I thought, was to create a ui-lovelace/ subdirectory and put one file per tab, then I could just use !include_dir_list to include them all.

This didn’t really work, though, because there was no way to control the order of the tabs! The list of files returned by !include_dir_list was undefined. So I contributed a tiny change to the code which meant that the files were returned in predictable alphanumeric order - you can change the order by renaming the files. This has now trickled through into the latest releases.

So my ui-lovelace.yaml now looks roughly like this:

title: My House
views: !include_dir_list ui-lovelace/

and my ui-lovelace directory contains:

01-home.yaml
02-downstairs.yaml
03-upstairs.yaml
04-outside.yaml
05-misc.yaml

Each of these starts with:

title: Downstairs
....etc...

which determines the actual name of the tab.

Just in case it’s useful for anyone else…

32 Likes

mine only about 800 lines

just start to get lost in it

like your thinking

:slight_smile: :beers:

5500 lines and I’m still using storage mode on a pi :grimacing:

I guess I like the ability to add cards through the GUI too much. Though I do copy out the card configs to an editor and paste back when I’m finished fiddling. Maybe I should change to yaml mode.

1 Like

this is how I configured it, and the tabs show in order of the view list:

views:
  - !include /config/lovelace/views/view_Home.yaml
  - !include /config/lovelace/views/view_Lights.yaml
  - !include /config/lovelace/views/view_Ikea_tradfri.yaml
  - !include /config/lovelace/views/view_Philips_hue.yaml
  - !include /config/lovelace/views/view_Floorplan.yaml
  - !include /config/lovelace/views/view_Settings.yaml
  - !include /config/lovelace/views/view_Home_climate.yaml
  - !include /config/lovelace/views/view_Home_summary.yaml
  - !include /config/lovelace/views/view_Summary_groups.yaml
  - !include /config/lovelace/views/view_Home_assistant.yaml
  - !include /config/lovelace/views/view_Home_energy.yaml
  - !include /config/lovelace/views/view_Home_solar_energy.yaml
  - !include /config/lovelace/views/view_Phones_tablets.yaml
  - !include /config/lovelace/views/view_Travel.yaml
  - !include /config/lovelace/views/view_Weer_klimaat.yaml
  - !include /config/lovelace/views/view_Tijd_agenda.yaml
  - !include /config/lovelace/views/view_Computer_netwerk.yaml
  - !include /config/lovelace/views/view_Audio_video_gaming.yaml
  - !include /config/lovelace/views/view_Media_players.yaml
  - !include /config/lovelace/views/view_Health.yaml
  - !include /config/lovelace/views/view_Home_automation.yaml
  - !include /config/lovelace/views/view_Weblinks.yaml
  - !include /config/lovelace/views/view_Leftovers.yaml
  - !include /config/lovelace/views/view_Developer.yaml
  - !include /config/lovelace/views/view_Test.yaml

8 Likes

Marius -

Yes, that’s how I did it too, while I was waiting for my pull-request to be accepted. :slight_smile:

Q

hmm, not really sure I understand why having to rename and possibly even number your includes would be preferable to what I do and you did before: simply listing them in the correct order …?

1 Like

yes. come to the dark side. if you’re doing the copy/paste tango you’ll be happy you did.

:slightly_smiling_face:

Well, the names and the order are then only defined in one place, and if you want to add more files you only need to create them in one place too…

Works better for me, at least. But it’s a matter of taste.

2 Likes

ok cool, what works for you, but can’t help feeling you’re overcomplicating things…

in my setup, I only need to create the views in 1 place also, and don’t have to name them for a specific order, nor have to number them.
anyways, if the update has landed, will see what the change might bring.

at least we’re both saved from these horrendously large and unmanageable ui-lovelace.yaml files :+1:

The only problem with this is that if you want to change the order and insert something in between home and downstairs you have to rename every file. I would suggest you use something like

010-
020-
030-
040-
050-

then at least you have a little more space to play with.

1 Like

Good point - yes, that’s how it’s done in typical Linux configs like upstart etc.

Hi Marius - yes, I do see your point, but I like the fact that if I want to rename the file, I only need to do so in the filesystem. If I remove or add a tab, I only need to do that in the filesystem. Changes checked into git only record the change to the file concerned. If I want to generate new views automatically, they only need to create one file, and so on.

But there are lots of counter-arguments, so I’m not disagreeing - just explaining my own rationale. :slight_smile:

which is cool indeed.

an I am learning! so if you wouldn’t mind, what does your complete ui-lovelace.yaml look like then?

do you have an include for your resources too? Ive tried that but with mixed results, especially when the custom updater card wouldn’t follow suit.

1 Like

I actually have it split up per card instead of per view since I use a lot of vertical-stack-in-card to add a custom header to my cards. Takes a bit more work in ui-lovelace.yaml but you have a bit more granular control. Depends on what you’re looking for I guess.

  # Home
  - title: Home
    id: home
    icon: mdi:home
    cards:

      # Left Stack
      - type: vertical-stack
        cards:
          - !include lovelace/views/home/people.yaml
          - !include lovelace/views/home/camera.yaml
          - !include lovelace/views/home/homestate.yaml
          - !include lovelace/views/home/climate.yaml

      # Middle Stack
      - type: vertical-stack
        cards:
          - !include lovelace/views/home/tv.yaml
          - !include lovelace/views/home/lights.yaml
          - !include lovelace/views/home/room_states.yaml

      # Right Stack
      - type: vertical-stack
        cards:
          - !include lovelace/views/home/devices.yaml
          - !include lovelace/views/home/priority.yaml
6 Likes

Sure… My complete ui-lovelace file looks like this:

resources:
  - url: /local/mini-media-player-bundle.js?v=1.0.0
    type: module
  - url: /local/vertical-stack-in-card.js?v=0.1.1
    type: js
  - url: /local/tracker-card.js?v=0
    type: js

title: My House
views:  !include_dir_list ui-lovelace/

I haven’t bothered splitting off the resources yet because I don’t have enough of them.

Q

1 Like

yep, that possible too, as are individual includes for, let’s say, a weather card config. Makes it very easy (and safe…) to edit those and not mess-up if you make a mistake.

Another cool use for this is handing the same card show up on different locations, and only having to define it once. Simply include it on different spots if you desire to do so. Like

cards:   - !include /config/lovelace/includes/dark_sky_custom_card.yaml

I’ve discovered a minor downside to my splitting-up technique: not sure if it applies when you use !include instead of !include_dir_list:

When I edit one of the files that’s included, Lovelace doesn’t notice and if I reload the web page, it hasn’t changed. I have to go and make a trivial change to ui-lovelace.yaml to cause Lovelace to reload.

If it tracks updates on !included files, that might be sufficient reason to switch back… I haven’t had a chance to investigate yet.

I can report that the way I do it using !include I’ve never had Lovelace not “notice” changes to the files.

I change an included file and hit the “refresh” button and the new change takes effect immediately (unless of course the change was adding a new “resource:” entry…then it takes a HA restart to actually load the new resource).

Hi, I would like to achieve the same results but I can’t figure out how the single card.yaml should begin.

I see error in frontend.

Can you teach me how you did it?

Here you go!

2 Likes