I wanted to split my ui-lovelace.yaml into several files and include the same card multiple times, so I made a tool for it…
Here it is, if you think it might be useful:
This functionality should be in the core @balloob 
, to be able to define a UI across multiple files.
I was told on the discord channel that there actually is a way to include files built in now, but it will be removed in the future to accomodate for a web-based configuration interface.
So either this tool will become useless because it’s replaced with better core functionality, or it will become more useful for people who - like me - prefer text based configuration.
1 Like
Exactly. I actually prefer text based configuration over web based, too. This makes sharing and portability much easier.
I’m sure there’s a plan for sharing, portability and version control. We’ll see what the future holds.
In the mean time, there’s this.
1 Like
There’s been an update to the generator.
You can now include resources, like .js and .css files (for example if you’re using custom cards) using !resource [<path>/]<filename>.
This will copy the file into www/lovelace/ and insert the correct path into ui_lovelace.yaml.
Edit: I just realized that this could also be used to include images
image: !resource my_photo.png
Brilliant, first thing i thought when i switched to love lace was, man is this conf file going to start getting big !
As @teachingbirds found out, the script can be run in hass.io via shell_command.
Instructions for this are in the readme.
1 Like
It is now possible to use jinja2 templates to generate the lovelace config.
This allows for loops, variables, macros and flow controll.
See usage example on github.
1 Like
And now you can access the home-assistant state from the templates as well.
Again, see readme for example use case.
1 Like
This is great I was doing a cpl of ugly work around to get attributes I wanted to display having templating available is huge for me thanks
Just remember that it’s the state at “compile” time. It won’t update dynamically.
This is a great facility. Unfortunately, it is not compatible with the Custom_Updater component and the tracker-card.
Yes it is. There’s a special clause in the updater to handle lovelace-gen
It does not work with the !resource statement, though.
Thank you, Thomas.
When using a generated ui-lovelace.yaml, my experience is that the Tracker-Card shows properly until either the “Check” or “Update All” button is pressed. After that, the Custom Cards disappear. I have tried replacing the generated resources section with the usual yaml, but I get the same result.
If I understand this correct, this is a way to make different sets of views? Like I describe in this tipic:
In that case, how do I do this manually without the script? And where is the lovelace folder?
No, sorry.
This tool is mainly for dividing the ui-lovelace.yaml file into more manageable parts. It doesn’t affect the interface.
There’s currently no way to do what you’re asking for, but you can kind of fake it using a combination of the lovelace kiosk script and using imges with navigation_path set.
You can also name a view " " (a single space inside quotes)…
I’m trying to make a header file that I will include in the top of all my views. The header has the weather-forecast in it as well as a couple of presence detection entities and some other entity cards relevant to each room. I can edit the ui-lovelace file and make it come out like I want, but I can’t seem to get the header.yaml file correct. Here is what it should look like. My presence tags are wrong, but that’s ok, it’s because of re-configuring owntracks and not part of this problem.
This is the ui-lovelace.yaml file that I modified to make it work.
views:
- cards:
- cards:
- cards:
- entities:
- {entity: device_tracker.turboc1208_cc1208, name: Chip}
- {entity: device_tracker.scox1209_scox1209, name: Susan}
title: Presence
type: entities
- type: weather-forecast
entity: weather.dark_sky
- entities:
- sensor.date
- sensor.time
- {entity: sensor.master_temperature, name: Bedroom Temperature}
- {entity: sensor.master_bath_sensor_temperature, name: Bathroom Temperature}
- {entity: sensor.master_bath_sensor_relative_humidity, name: Bathroom Humidity}
type: entities
type: horizontal-stack
- cards:
- entities: [light.master_fan_level, light.master_light_level, light.master_floor_light_level,
switch.master_cove_outlet_switch]
title: Lights and Fan
type: entities
- cards:
- {entity: media_player.mbr_directv, name: Directv, type: media-control}
- {entity: media_player.mbr_roku, name: Roku, type: media-control}
type: vertical-stack
type: horizontal-stack
type: vertical-stack
id: MBR
panel: true
title: Master BR
Here is what my MBR.yaml file looks like
- title: Master BR
panel: true
id: MBR
cards:
# The filter card will filter entities for their state
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include header.yaml
- type: entities
entities:
- sensor.date
- sensor.time
- entity: sensor.master_temperature
name: Bedroom Temperature
- entity: sensor.master_bath_sensor_temperature
name: Bathroom Temperature
- entity: sensor.master_bath_sensor_relative_humidity
name: Bathroom Humidity
- type: horizontal-stack
cards:
- type: entities
title: Lights and Fan
entities:
- light.master_fan_level
- light.master_light_level
- light.master_floor_light_level
- switch.master_cove_outlet_switch
- type: vertical-stack
cards:
- type: media-control
entity: media_player.mbr_directv
name: Directv
- type: media-control
entity: media_player.mbr_roku
name: Roku
And here is the header file that is giving me problems.
cards:
type: entities
title: Presence
entities:
- entity: device_tracker.turboc1208_cc1208
name: Chip
- entity: device_tracker.scox1209_scox1209
name: Susan
type: weather-forecast
entity: weather.dark_sky
What am I doing wrong?
Try pasting it in manually and see what happens:
You’ll get:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- cards:
type: entities
title: Presence
Doesn’t look quite right now, does it?
it’s the weather I’m having problems with when I run it through the converter.