lovelace-gen
First out: Lovelace-gen
The lovelace config generator tool.
This started as a way to split the lovelace-ui.yaml
file into more manageable pieces (which I later found out could be done by using the normal !include
directive). Then it grew into something much more.
To use the tool, you run it in your config directory, and it will take the file lovelace/main.yaml
and automatically generate lovelace-ui.yaml
from it. In the most basic form it will just be a copy, but if your file contains !inclued filename
the contents of the file filename
will be inserted at that point.
Example from my config:
# lovelace/main.yaml
views:
- !include view_Home.yaml
- !include view_Lights.yaml
...
#lovelace/view_Home.yaml
title: Hemma
icon: mdi:home
id: home
cards:
- type: weather-forecast
entity: weather.dark_sky
- !include card_presence.yaml
...
and so on…
Lovelace-gen has two other big features, the !file
directive, and the ability to parse jinja2 templates.
I use the !resource
directive any time I want to include a script or an image.
An example from my config:
- type: picture-entity
entity: group.presence_thomas
image: !file /local/images/thomas_bw.jpg
show_name: false
show_state: false
state_image:
"home": !file /local/images/thomas_clr.jpg
This replace the first !file
statement with /local/lovelace/thomas_bw.jpg?1538162272.4425504
. thomas_clr.jpg
will be given the same treatment.
The stuff after the question mark is the timestamp at which the generator was run. This ensures that your browser will never try to load a cached version of an image or a script included this way that is older than the last time you ran the script. Insanely useful if you like playing around with plugins.
The jinja templates are useful for avoiding code duplication.
My main use is for including javascript plugins.
I make a list of them in my main.yaml
file, and include them with a for-statement:
#lovelace/main.yaml
{% set resources = [
'plugins/lovelace-column-card/column-card.js',
'plugins/lovelace-fullykiosk/lovelace-fullykiosk.js',
'plugins/lovelace-player/lovelace-player.js',
] %}
resources:
{% for res in resources %}
- url: !resource {{res}}
type: js
{% endfor %}