🔹 Lovelace_gen - Add abilities to ui_lovelace.yaml

[jimz011 (Jim)]

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

[thomasloven (Thomas Lovén)]

@thomasloven

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.

  

[raul]

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

[thomasloven (Thomas Lovén)]

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

[jimz011 (Jim)]

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('" "') }}
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.

[thomasloven (Thomas Lovén)]

lovelace_gen does not know anything about the state of your entities. It’s meant to be run and generate the static lovelace config once and then never again until you manually change something.

Check out my state-switch card for replacing parts of your interface dynamically. There’s a rather new topic on the forums somewhere.

[jimz011 (Jim)]

Hi @thomasloven thanks for all the answers you gave me over the past few months, I use most of your addons now as they do exactly what I was looking for. I do have a question though, how can I call individual configs from the _global.rooms list for example? I know how to make it with auto-entities as your example show that greatly. However I want to be able to use a single entity/name from a subset.

E.g.

lovelace_gen:
  rooms:
    - living_room
    - bedroom

now in my devices.yaml I would like to call for a single room listed above. E.g. I only want living_room to be used in the next file.

- title: Devices
  path: devices
  cards:
    - type: vertical-stack
      cards:
        - !include
          - templates/auto_fill_devices_template.yaml
          - name: {{ WHAT_SHOULD_I_PUT_IN_HERE?? }}
# So I only want living_room to be displayed between the brackets and nothing else from the 'rooms' group I've created in lovelace_gen global config.

I don’t even know if this is possible at all XD, but if it is, I would gladly know how. Thanks again.

[thomasloven (Thomas Lovén)]

{{ _global.rooms[0] }} should give you the first room in your list.

[ricreis394 (Ricardo Reis)]

I’m getting an error using this

invalid key: "OrderedDict([('name', None)])" in "/config/lovelace/templates/presence-button.yaml", line 2, column 0

This is my code:

lovelace-ui.yaml

- type: glance
  title: Presence
  show_name: true
  show_state: false
  entities:
    - !include
      - templates/presence-button.yaml
      - name: Test

presence-button.yaml

entity: binary_sensor.hall_door
name: {{ name }}

It works great if not using any jinja2 variable

EDIT: nevermind, I thought I had read everything. Forgot to mention # lovelace_gen at the beginning of the yaml file, duh

[Vlavonvidden]

Hi all,

I’m facing a bit of a weird one here .

I’m trying to pass an OrderedDict as a value for a template.
The dict is name room and is structured as follow : OrderedDict([(‘friendly_name’, ‘Salle de bain’), (‘humidity’, True), (‘id’, ‘bathroom’), (‘light’, False), (‘temperature’, True), (‘vacuum’, False)]) .

If I use this with a template :

- !include
    - ../../templates/room.yaml
    - room: {{ room }}

I’m able to access the room variable inside thetemplate file as so :

- type: markdown
      content: |
        {{ room }}

Which gives me a nice result :

However I have trouble accessing each individual key/value inside the dict. So far, I’ve tried :

• {{ room.id }}
• {{ room[id] }}
• {{ room[“id”] }}
• {{ room|id }}

-> Result is always blank.

The thing that intirgues me is that {{ room|length }} gives me something like 130, which to me seems to indicate that the dictionnary is converted to a string when passed as a value.

So fa my solution has been to pass each value as a separate variable :

- !include
    - ../../templates/room.yaml
    - gridcol: {{ loop.index }} / {{ loop.index + 1 }}
      gridrow: {{ rowIndex + rowloop.index0 }} / {{ rowIndex + rowloop.index0 + 1 }}
      room: {{ room }}
      room_id: {{ room.id }}
      room_humidity: {{ room.humidity }}
      room_light: {{ room.light }}
      room_motion: {{ room.motion }}
      room_name: {{ room.friendly_name }}
      room_temperature: {{ room.temperature }}
      room_vacuum: {{ room.vacuum }}

But tbh I don’t like the method & the look of it.

-> Have you guys been able to pass dict as variables in a jinja template ? Do you see something wrong in my code ?

[thomasloven (Thomas Lovén)]

That’s a correct assessment.
Templates are evaluated first, and then functions (such as !include) are called.
So in your case {{ room }} translates to a string interpretation of the dict, and that is then passed as the room parameter to your included file.
You can convert the data to json via {{ room | tojson }}, which might be easier to handle, but unfortunately there’s no way to convert it back to an object, as far as I know.

…

If you had seen this message as it was typed, you’d have noticed a rather long pause right there…

Actually, what you can do is update to release 6 of lovelace_gen, and try the brand new fromjson filter.
Simple usage example here: https://github.com/thomasloven/hass-lovelace_gen/tree/6#passing-arguments-to-included-files

[Vlavonvidden]

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

[shauder (Shane Faulkner)]

I had an idea to use the rooms as keys in the global config and then using your lovelace_gen I can loop through rooms then using auto entities include any lights from said room.

lovelace_gen:
  rooms:
    - living_room
    - master_bedroom
    - spare_bedroom

Then my lovelace_gen

cards:
  - type: entities
    entities:
      {% for room in _global.rooms %}
      - type: custom:auto-entities
        card:
          type: custom:fold-entity-row
          head:
            type: section
            label: {{ room }}
        filter:
          include:
            - entity_id: "light.{{ room }}*"
      {% endfor %}

My question and problem I am trying to solve is I want to use the room names as headers also but I want to remove the underscore from the name. It does not look like there is a jinja2 filter for regex. Is that something you could add like you did the tojson and fromjson? Or perhaps do you have another suggestion?

Either way thanks for this!

[thomasloven (Thomas Lovén)]

{{ room | replace("_", " ") }}

[shauder (Shane Faulkner)]

I swear I Googled and came to the conclusion I couldn’t do that but I mostly tried regex examples. Thanks!

For anyone else looking for the built in filter list: https://jinja.palletsprojects.com/en/2.10.x/templates/#list-of-builtin-filters

[jncanches (jn)]

Very good example. Thank you for that !
I’m trying to deal with the new from_json filter (thank you @thomasloven for it ! ), but I’m facing an issue that I don’t understand. I have the same initial behavior as you: displaying the tojson in my template returns an OrderedDict like string.
But, when I use the fromjson filter (exactly like the example in the lovelace_gen doc) I have an error :

TypeError: the JSON object must be str, bytes or bytearray, not Undefined

Here is an extract of my code.
The calling part :

{% set mydict = {"a": 1, "b": 2} %}
- !include
  - '../templates/_button_configurable.yaml'
  - test: {{ mydict | tojson }}

and the _button_configurable.yaml extract

# lovelace_gen

type: custom:button-card
name: {{ (test|fromjson)['a'] }}

I already checked my lovelace_gen version etc.
The error is raised when lovelace_gen execute the json.loads(value). It seems to beleive that my string is undefined but it is not, because I can display it…

Any clue for this ?

Thank you !

[EDIT 5 minutes later ^^]
Found my mistakes. Another call to my test template were done above in my code. Just silly. excuse me for this mistake.
Lovelace_gen is awesome !

[jimz011 (Jim)]

@thomasloven would it be possible to reload global config without a restart of HA?

Btw, lovelace_gen is indeed very cool. I wish I knew this a long time ago (as I have used decluttering card in the past) this is so much more. You actually made the vision I had for my project possible!!

I saw a new card, something with “teleporting” the card to another view. You say: only one at the time. As in? It can only show that card on a single view at the same time? Or do you mean, it will only work for a single card?

[thomasloven (Thomas Lovén)]

It’s not possible to reload the global config without a reboot at this time.

The new card - which is rather experimental still - works a bit like decluttering card in some ways, like yaml node anchors in some ways and entirely unlike both in others.

The main point is that you define a card once, and then use it in several places.
This can be done with decluttering card, node anchors and lovelace_gen, but in that case you get copies of the same card.

If you use e.g. state-switch to display different cards at different times, all the cards that are not shown are still loaded into memory and are eating browse resources. with q-card, they instead go off and do something useful somewhere else - hopefully where you’re currently looking at them.
A secondary effect of this is with cards that have an internal state - like how a fold-entity-row can be open or closed. If it’s a q-card, and it’s shown in two views, if you open the fold and switch to the other view, it will be open there too.

The reason there’s no forum topic, no blue diamond and it’s not in HACS is that I haven’t quite evaluated the impact of this on the performance of lovelace yet.

[jimz011 (Jim)]

Ah I personally don’t care if it is in HACS or not , but I figured as much as you said it is experimental. It might have some useful cases, like the fold-entity-row you talked about. Though I wonder what will happen if my wife would open a view with that card, and I open another view that has the exact same card?

Anyways as always, great work on the updates, you made me happy and prepared for 105 (which runs absolutely fine now!)

Btw, I don’t even know what that blue diamond means

[bacco007]

@Vlavonvidden

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

This is brilliant - do you post your config online somewhere?