Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thomasloven/hass-lovelace_gen
🔹 Improve the lovelace yaml parser for Home Assistant
https://github.com/thomasloven/hass-lovelace_gen
Last synced: 3 days ago
JSON representation
🔹 Improve the lovelace yaml parser for Home Assistant
- Host: GitHub
- URL: https://github.com/thomasloven/hass-lovelace_gen
- Owner: thomasloven
- License: mit
- Created: 2019-08-06T17:37:55.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-21T22:10:47.000Z (10 months ago)
- Last Synced: 2024-11-05T19:44:12.902Z (8 days ago)
- Language: Python
- Homepage:
- Size: 23.4 KB
- Stars: 221
- Watchers: 10
- Forks: 22
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
lovelace\_gen
============
[](https://github.com/hacs/integration)
Improve the lovelace yaml parser for Home Assistant.
See [my floorplan card](https://github.com/thomasloven/hass-config/blob/master/lovelace/floorplan.yaml) for an example of what's possible.
# Installation instructions
- Copy the contents of `custom_components/lovelace_gen/` to `/custom_components/lovelace_gen/`.
- Add the following to your `configuration.yaml`:
```yaml
lovelace_gen:
lovelace:
mode: yaml
```
- Restart Home Assistant
# Usage
This integration changes the way Home Assistant parses your `ui_lovelace.yaml` before sending the information off to the lovelace frontend in your browser. It's obviously only useful if you are using [YAML mode](https://www.home-assistant.io/lovelace/yaml-mode/).
### First of all
To rerender the frontend, use the Refresh option from the three-dots-menu in Lovelace
### Second of all
Any yaml file that is to be processed with `lovelace_gen` *MUST* have the following as its first line:
```yaml
# lovelace_gen
```
**Important:** For some reason, which I can't seem to nail down, things stop working if you add `# lovelace_gen` to `ui-lovelace.yaml`. Adding it to *any* file *included from* `ui-lovelace.yaml` works, though.
### Let's continue
The changes from the default generation include
## Jinja2 templates
You can now use [Jinja2](https://jinja.palletsprojects.com/en/2.10.x/templates/) templates in your lovelace configuration.
This can be used e.g. to
- Set and use variables
```yaml
{% set my_lamp = "light.bed_light" %}
type: entities
entities:
- {{ my_lamp }}
```
- Loop over lists
```yaml
{% set lights = ['light.bed_light', 'light.kitchen_lights', 'light.ceiling_lights'] %}
- type: entities
entities:
{% for l in lights %}
- {{ l }}
{% endfor %}
- type: horizontal-stack
cards:
{% for l in lights %}
- type: light
entity: {{ l }}
{% endfor %}
```
- Use macros
```yaml
{% macro button(entity) -%}
- type: entity-button
entity: {{ entity }}
tap_action:
action: more-info
hold_action:
action: toggle
{%- endmacro %}
type: horizontal-stack
cards:
{{ button("light.bed_light") }}
{{ button("light.ceiling_lights") }}
{{ button("light.kitchen_lights") }}
```
Please note that for this to work, the indentation of the code in the macro block *must* be equal to what it should be where it's called.
- Add conditional parts
```yaml
{% if myvariable == true %}
Do something
{% endif %}
```
This is NOT dynamic. The values of variables are locked down when you rerender the interface.
This might make conditions seem pointless... but they work well with the next feature.
## Passing arguments to included files
Normally, you can include a file in your lovelace configuration using
```yaml
view:
- !include lovelace/my_view.yaml
```
`lovelace_gen` lets you add a second argument to that function. This second argument is a dictionary of variables and their values, that will be set for all jinja2 templates in the new file:
```yaml
type: horizontal-stack
cards:
- !include
- button_card.yaml
- entity: light.bed_light
- !include
- button_card.yaml
- entity: switch.decorative_lights
- !include
- button_card.yaml
- entity: light.ceiling_lights
name: LIGHT!
```
`button_card.yaml`
```yaml
# lovelace_gen
{% if entity.startswith("light") %}
type: light
{% else %}
type: entity-button
{% endif %}
entity: {{ entity }}
name: {{ name }}
```
Be careful about the syntax here. Note that the arguments are given as a list and is indented under the `!include` statement. The second item in the list is a dictionary.
> Note: If you want to pass a dictionary of values into a file, you need to convert it to json first:
> ```yaml
> {% set mydict = {"a": 1, "b": 2} %}
> variable: {{ mydict | tojson }}
> ```
> And then convert it back from json inside the file:
> ```yaml
> content: The value of a is {{ (variable | fromjson)['a'] }}
> ```
>
> The `fromjson` filter is a feature of `lovelace_gen` and not normally included in jinja.
## Invalidate cache of files
If you use lots of custom lovelace cards, chances are that you have run into caching problems at one point or another.
I.e. you refresh your page after updating the custom card, but nothing changes.
The answer is often to add a counter after the URL of your resource, e.g.
```yaml
resources:
- url: /local/card-mod.js?v=2
type: module
```
`lovelace_gen` introduces a `!file` command that handles this for you.
```yaml
resources:
- url: !file /local/card-mod.js
type: module
```
After this, `lovelace_gen` will automatically add a random version number to your URL every time you rerender the frontend. You won't have to worry about cache ever again.
This can also be used for pictures.
## Example
`ui_lovelace.yaml`
```yaml
# lovelace_gen
resources:
# When you regenerate, the browser cache for this file will be invalidated
- url: !file /local/card-mod.js
type: module
...
views:
- ! include lovelace/my_cool_view.yaml
```
`lovelace/my_cool_view.yaml`
```yaml
# lovelace_gen
{% set my_lights = ["light.bed_light", "light.kitchen_lights", "light.ceiling_lights"] %}
title: My view
cards:
- type: entities
entities:
{% for light in my_lights %}
- {{ light }}
{% endfor %}
# Include files with arguments
# NB: JSON format for arguments
# And NO SPACE after the colons!
- !include
-floorplan.yaml
- lamps: true
title: With Lamps
# Use this if you want lovelace_gen to ignore the jinja
{% raw %}
- type: markdown
content: |
# Coming soon(?)
A built-inmarkdown card with jinja templating.
So I can tell that my light is {{ states('light.bed_light') }}!
{% endraw %}
- !include
- floorplan.yaml
- title: No lights
```
`lovelace/floorplan.yaml`
```yaml
# lovelace_gen
{% macro lamp(entity, x, y) -%}
{% if lamps %}
- type: state-icon
entity: {{ entity }}
{% else %}
- type: custom:gap-card
{% endif %}
style:
left: {{ x }}%
top: {{ y }}%
{%- endmacro %}
type: picture-elements
title: {{ title }}
image: https://placekitten.com/800/600
elements:
{{ lamp('light.bed_light', 25, 25) }}
{{ lamp('light.kitchen_lights', 50, 25) }}
{{ lamp('light.ceiling_lights', 50, 50) }}
```
## Hidden bonus
With lovelace_gen installed, you'll be able to redefine node anchors in the same file. A feature in the YAML specification, but an error in the engine Home Assistant normally uses...
# FAQ
### How can I do global variables?
You can add variables to the `lovelace_gen` configuration in `configuration.yaml` and then refernce them in lovelace using `{{ _global }}`.
E.g.:
```yaml
lovelace_gen:
rooms:
- living_room
- kitchen
- bed_room
```
```yaml
type: entities
entities:
{% for room in _global.rooms %}
- type: custom:auto-entities
card:
type: custom:fold-entity-row
head:
type: section
label: {{ room|capitalize }}
filter:
include:
- area: {{ room }}
{% endfor %}
```
### Can I use this for my general Home Assistant configuration?
It's called **lovelace**\_gen for a reason...
That being said - it *might* work. Or it might not. There's really no way to
tell. It depends on what parts of the configuration are loaded before or after
lovelace_gen itself.
I'd advice you not to try it.
### What if I WANT jinja in my lovelace interface
Use the `{% raw %}` and `{% endraw %}` tags. There's an example above.
### Is there any way to solve the indentation problem for macros
Not automatically, but you can do something like
```yaml
{% macro button(entity, ws) %}
{{" "*ws}}- type: entity-button
{{" "*ws}} entity: {{ entity }}
{{" "*ws}} tap_action:
{{" "*ws}} action: more-info
{{" "*ws}} hold_action:
{{" "*ws}} action: toggle
{%- endmacro %}
- type: horizontal-stack
cards:
{{ button('light.bed_light', 3) }}
{{ button('light.bed_light', 1) }}
```
Note that included files don't have this problem.
---
