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

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.

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

1 Like

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 :upside_down_face:

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 :
image

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 ?

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

1 Like

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

6 Likes

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!

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

1 Like

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

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 !

1 Like

@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?

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.

Ah I personally don’t care if it is in HACS or not :rofl::joy:, 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 :joy:

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

Nothing. The not-quantum effect is contained within the current browser window/tab.

Ah alright, that sounds cool. I might play around with it and find some usefulness with it. Thanks for the reply.

My repo is currently a mess, and I realized I haven’t moved all sensitive details to secrets.yaml.

What are you looking for ? The examples I posted above are still the ones I use. If you have specific questions, feel free to ask !

I was interested in where your colNum variable was set, but also the structure of your room card

Is it possible to pass templated variables to a lovelace_gen include?

For example (this doesn’t work but is it possible somehow?).

view.yaml

# lovelace_gen
  - !include
    - includes/titles.yaml
    - title: {{ states('input_text.cycle1_name') }}

titles.yaml

# lovelace_gen
type: markdown
style: |
  ha-card {
    font-size: 20px;
    font-family: Oswald;
    height: 30px;
    background: none;
    margin-top: -0.5em;
    margin-left: -10px;
    margin-bottom: 0.9em;
  }
content: {{ title }}

And another question

Can you pass variables into the style?

For example (and again this doesn’t work but is iot possible somehow?).

# lovelace_gen
type: custom:hui-markdown-card
style: |
  ha-card {
    font-size: {{ font_size | default('20px') }};
    font-family: Oswald;
    height: 30px;
    background: none;
    margin-top: -0.5em;
    margin-left: -10px;
    margin-bottom: 0.9em;
  }
content: {{ title }}