My Lovelace Plugins

Share your Projects! Dashboards & Frontend
2

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 %}
6 Likes