🔹 Lovelace_gen - Add abilities to ui_lovelace.yaml

Vlavonvidden · January 16, 2020, 4:10pm

Thanks for your feedback and the update of lovelace_gen, the new filter is very handy.

So in case if anyone is interested, you can use _globals as described in the documentation with the following tricks :

Instead of putting everything in config.yaml, use !include statements to keep the file clean:

# configuration.yaml
...
# Lovelace_gen
# See: https://github.com/thomasloven/hass-lovelace_gen
lovelace_gen: !include lovelace/globals.yaml
...

In globals.yaml, you can directly add values, or even more includes if you have lots of variables:

# globals.yaml
...
# Spacing factors
spacing_factor_tiny: '6px'
spacing_factor_small: '12px'
spacing_factor: '24px'
spacing_factor_large: '48px'
spacing_factor_huge: '96px'

# Rooms
rooms:
  !include settings/rooms.yaml
...

# rooms.yaml
...
# Livingroom
- camera: true
  ...
  temperature: true
  vacuum: true

# Kitchen
- camera: false
  ...
  temperature: true
  vacuum: true
...

And Then, you can use this in you templates (again, this is well documented in the doc !) for a huge reduction of lovelace’s code length. The example below generates a grid with a number of columns controlled by the colnum variable (which varies depending on media , check out lovelace-state switch) :

# lovelace_gen
# ------------------------------------------------------------------------------------------------------------------------------------------
## Jinja variables
{% set rowIndex = 1 %}
{% set colSize = (100/colNum|round(0, 'floor'))|string + "% " %}
{% set cols =  ''.join(colSize * colNum)%}

# ------------------------------------------------------------------------------------------------------------------------------------------
## View content
type: custom:layout-card
gridrows: auto
gridcols: {{ cols }}
layout: grid
cards:
  ## Grid
  {% for roomBatch in _global.rooms|batch(colNum) %}
    {% set rowloop = loop %}
    {%- for room in roomBatch %}
  - !include
    - ../../templates/room.yaml
    - gridcol: {{ loop.index }} / {{ loop.index + 1 }}
      gridrow: {{ rowIndex + rowloop.index0 }} / {{ rowIndex + rowloop.index0 + 1 }}
      jsondata: {{ room|tojson }}
    {%- endfor %}
  {% endfor %}

Result is quite handy, no need to have huge ui files anymore !

Tablet/desktop

Phone