đŸ”č Lovelace_gen - Add abilities to ui_lovelace.yaml

If you like doing advanced lovelace configurations, you’re probably using yaml mode, and you’ve probably noticed the configuration file grows huge very quickly.

Splitting it into more files help a bit and node anchors will only get you so far, but what if you could really minimize code duplication?

Re-introducing lovelace_gen:

Lovelace_gen lets you use jinja2 templating in your lovelace config.
And lets you pass arguments to included files.
And helps you with caching problems.
And is pretty awesome, if I may say so myself.

Check it out!
It shortened my floorplan code by several hundred lines of code so far.

Note: This is not lovelace-gen (with a dash) which was my first Home Assistant tool. The main difference is that you won’t have to worry about running this one manually. It’s all handled by Home Assistant.

19 Likes

9 hours later.
If you used this before now, you really really should get the new version.
Trust me.

1 Like

I feel (yet another) refactoring of my yaml coming up, this looks great it could open up quite a few possibilities.

Thanks

Now don’t take this the wrong way but i think i love you.

You just cut down my configuration from 6478 to 2570 lines :slight_smile:
Thanks so much

Cant get cleaner than this. 54 lines.

# lovelace_gen
- type: vertical-stack
  cards:
  - !include
    - inc_menu.yaml
    - tilbage: alarm
      tilbage_navn: <- Alarm
      frem: stuen
      frem_navn: Stuen ->

  - !include
    - inc_topic.yaml
    - title: Nomhus

  - !include
    - inc_block_topic.yaml
    - title: Temperatur
  - !include
    - inc_temp.yaml
    - temp1: varelse_temperature
      temp2: stuen_temperature
      temp3: gang_temperature
      temp4: vej_temperature
      temp5: dark_sky_temperature


  - !include
    - inc_block_topic.yaml
    - title: Gardiner
  - !include
    - inc_gardiner.yaml
    - gardin1: stuen_have
      gardin_navn1: Have
      gardin2: stuen_vej
      gardin_navn2: Vej
      gardin3: varelse
      gardin_navn3: VÊrelse
      gardin4: hoveddor
      gardin_navn4: Gang
  
  - !include
    - inc_block_topic.yaml
    - title: Lys
  - !include
    - inc_light.yaml
    - dimmer1: lys_dimmer_stue_bord
      dimmer_name1: Loft
      dimmer2: stuen_gulv
      dimmer_name2: Gulv
      dimmer3: lys_dimmer_vaerelse
      dimmer_name3: VÊrelse
      dimmer4: lys_dimmer_gang
      dimmer_name4: Gang
      dimmer5: lys_dimmer_kokken_koleskab
      dimmer_name5: KÞleskab
      dimmer6: lys_dimmer_kokken_bord
      dimmer_name6: Bord
      switch1: lys_switch_toilet
      switch_name1: Toilet

Or 65 lines

# lovelace_gen
- type: vertical-stack
  cards:
  - !include
    - inc_menu.yaml
    - tilbage: nomhus
      tilbage_navn: <- Nomhus
      frem: varelse
      frem_navn: VÊrelse ->

  - !include
    - inc_topic.yaml
    - title: Stuen

  - !include
    - inc_block_topic.yaml
    - title: Temperatur
  - !include
    - inc_temp.yaml
    - temp1: varelse_temperature
      temp2: stuen_temperature
      temp3: gang_temperature

  - !include
    - inc_block_topic.yaml
    - title: Gardiner
  - !include
    - inc_gardiner.yaml
    - gardin1: stuen_have
      gardin_navn1: Have
      gardin2: stuen_vej1
      gardin_navn2: Vej 1
      gardin3: stuen_vej2
      gardin_navn3: Vej 2
      gardin4: stuen_vej3
      gardin_navn4: Vej 3
  
  - !include
    - inc_block_topic.yaml
    - title: Lys
  - !include
    - inc_light.yaml
    - dimmer1: lys_dimmer_stue_bord
      dimmer_name1: Loft
      dimmer2: stuen_gulv
      dimmer_name2: Gulv
      dimmer4: lys_dimmer_gang
      dimmer_name4: Gang


  - type: vertical-stack
    cards:
    - type: custom:layout-card
      layout: vertical
      cards:
      - type: 'custom:text-divider-row'
        text: Tv Kontrol
  - type: vertical-stack
    cards:
    - type: custom:layout-card
      layout: vertical
      cards:
      - type: horizontal-stack
        cards:
        - type: entities
          show_header_toggle: false
          entities:
          - entity: remote.remote
            name: Tv
            type: "custom:secondaryinfo-entity-row"
            secondary_info: "<b style='color:green'>[[ remote.remote.attributes.current_activity ]]</b>"

1 Like

Hi Thomas, please can you explain with more detail how to use the component?

  1. install it from the CS repository and restart HA
  2. add the following to the configuration.yaml and restart HA
lovelace_gen:

lovelace:
  mode: yaml

Is not clear in which path and how create the single rendering files and the expected rendered output (is a file or not?).

I tested the component putting into the file “ui_lovelace.yaml” the following without see any effect. I have put this file in the folder “HA Home”, then in the folder “HA Home”/lovelace with the same negative result.

Can you help me?

# lovelace_gen

# Resources
resources:
#################################################################
#                             JS                                #
#################################################################
  - url: /local/card-tools/card-tools.js?track=true
    type: js
  - url: /local/card-layout/layout-card.js?track=true
    type: js

#################################################################
#                          Module                               #
#################################################################
  - url: /local/card-modder/card-modder.js
    type: module

title: Test title now
background: center / cover no-repeat url("/local/imgs/background_black.jpg") fixed
views:
  - id: 1
    icon: mdi:home-assistant
    title: Home
    panel: true
    cards:
      - type: custom:layout-card
        cards:
          - id:
            type: vertical-stack
            cards:
              - type: custom:card-modder
                card:
                  type: gauge
                  name: Outdoor
                  unit: 'C'
                  entity: sensor.oregontemp_outdoor_temperature
                  severity:
                      green: 4
                      yellow: 25
                      red: -10
                style:
                  background-repeat: no-repeat
                  background-color: rgba(50,50,50,0.3)
                  background-size: 100% 300px
                  border-radius: 20px
                  border: solid 1px rgba(100,100,100,0.3)
                  box-shadow: 3px 3px rgba(0,0,0,0.4)

It’s not rendering any file.

Instead it

And regarding the file ui_lovelace.yaml not affecting anything:

thanks, I resolved :smiley:

Do you think its possible to tweak this module to also use home assistant templating inside yaml instead of only jinja2 ?

What?
 

Templating in Home Assistant is powered by the Jinja2 templating engine. This means that we are using their syntax and make some custom Home Assistant variables available to templates during rendering. Jinja2 supports a wide variety of operations:

Kinda hard to know what you want but think you don’t have 


Thanks for this awesome component !

Is it possible to define a list (e.g. of entity ids) and have it available in multiple pages? Is there a way to include another file ?

Each file is evaluated on its own, so unfortunately variables have to be defined in the same file they are used.
You can, however, pass arguments to included files. That should fill most use cases - albeit with a bit of extra work.

After almost a year of lovelace I was looking for something more advanced (mind you I am only a bartender :rofl::joy:). And I stumbled upon this (obviously I had seen it before but I had zero idea of what it was, what it can do and how to set it up). This thing is really great as it can basically do what decluttering-card does but then with jinja2 templates.

I would think this could replace decluttering-card with one exception, and that is defaults (for when no dictionary value is given). Something that decluttering card can, and I have absolutely no clue if this mod can do this too)

I figured out how most stuff works, though I had a hard time understanding the documentation at first (remember I am only a bartender :rofl::joy:).

My question is: is it possible to set up defaults like in decluttering card?

To be honest I’ve never really looked into the decluttering card
 because I’ve always had this



 but I’m going to go with yes
 ?

It looks a bit complicated, but from what I can see this is exactly what I am looking for. I am going to play with this. Thanks @thomasloven I will let you know if I have succeeded.

This will make sharing my setup a lot easier I think :+1:

Thanks again @thomasloven it looked a lot more complicated than it actually was. It works beautifully. I do have one question though as I can’t seem to create what I want (and it probably isn’t possible).

Would it be possible to have a separate file for the entities you set? For example something like this:

# lovelace_gen
  !include global_config.yaml

- title: my view
  cards:
    - config below

and then to have this in the global_config.yaml file I have created:

# lovelace_gen
{% set light_1 = "light.plafond" %}
{% set light_2 = "light.eettafel" %}
{% set light_3 = "light.tafellamp" %}
{% set light_4 = "light.vloerlamp" %}

If there is something like this I could reuse these entities in other files instead of having to put this in every file I need them. I know that what I’ve just shared does not work! I just put it as an example to what I mean exactly. Thanks for your reply. Got most of the stuff figured out XD, this is hopefully the last question I will have to ask :stuck_out_tongue:

  

Is there a way to have the vscode hassio addon not flag problems for unknown tag <!file>.

lovelace_gen can now read data from the lovelace_gen section of configuration.yaml.

This allows for global variables, of sorts

See: https://github.com/thomasloven/hass-lovelace_gen#how-can-i-do-global-variables

Hi @thomasloven my setup is getting a lot better because of lovelace_gen. However I once again have to ask you a question as not many people document it and I can’t seem to find a solution with the examples given in the docs.

I use your browser-mod to show popups and this works absolutely fine if I template it. In my current configuration I use the ‘second’ !include like in your documentation. However thanks to your latest answer (in the auto-entities thread) I found a way to create those auto generated cards. I have one problem which I face and I though that lovelace_gen could be able to handle this problem.

So here is the auto entities config and the button template created with your cards

        - type: custom:auto-entities
          filter:
            include:
              - domain: light
                group: group.alle_lights
                options:
                  !include
                  - templates/button.yaml
                  - entity: this.entity_id
            exclude:
              - state: unavailable
          sort:
            method: name
            ignore_case: true
          card:
            type: custom:layout-card
            min_columns: 3
            max_columns: 3
# lovelace_gen

# card
type: custom:button-card
name: {{ name }}
deep_press: {{ deep_press|default('true') }}
icon: {{ icon }}
color: {{ color|default('auto') }}
size: {{ size|default('25%') }}
lock:
  enabled: {{ lock|default('false') }}
  unlock: {{ lock_unlock|default('tap') }}
  duration: {{ lock_duration|default('5') }}
aspect_ratio: {{ aspect_ratio|default('1/1') }}
entity: {{ entity }}
label: {{ label|default('"&nbsp;"') }}
show_name: {{ show_name|default('true') }}
show_icon: {{ show_icon|default('true') }}
show_state: {{ show_state|default('true') }}
show_label: {{ show_label|default('true') }}
tap_action:
  action: toggle
  haptic: light
hold_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: ' '
    style:
      background: rgba(0, 0, 0, 0.4)
      "--iron-icon-fill-color": "#FFF"
    card:
      type: horizontal-stack
      cards:
        - !include
          - {{ template|default('rgb_popup.yaml') }}
          - entity: {{ entity }}
  haptic: heavy

What I’d like to achieve is the following at the bottom of the button template (where {{ template|default('rgb_popup.yaml') }} is)

                      {% if is_state('input_boolean.dummy1', 'on') %}
                        rbg_popup.yaml
                      {% else %}
                        switch_popup.yaml
                      {% endif %}

But whenever I do something like this it will say ‘is_state’ is undefined or None is undefined. I am a real noob concerning this but I am trying. What I actually want to achieve is the following: if entity has rgb attributes then rgb_popup.yaml. If it has min_mireds attributes then color_temp_popup.yaml else switch_popup.yaml. (these are three popups I created to be used with switches and lights). They work fine when a default template is set, but only that specific popup will work then.

            - !include
              - templates/button.yaml
              - entity: !secret light_1
                label: '!include ../../includes/brightness-label.yaml'
                grid:
                  '!include ../../includes/light-devices-grid.yaml'
                template: color_temp_popup.yaml
                name: Plafond

The above code works fine on all pages. However I want to be able to use the auto entities with layout card like you suggested. (which works absolutely amazing btw) But I only miss this single feature where the popup card will also be changed depending on the attributes (true/false) of the specific entity.

It might be exotic what I am asking for, sorry for the noob questions.