📝 100% Templatable Lovelace Configurations

[Ildar_Gabdullin]

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_number.test_level_1
  - type: custom:config-template-card
    entities:
      - input_number.test_level_1
    variables:
      threshold: states['input_number.test_level_1'].state
    card:
      type: custom:auto-entities
      card:
        type: entities
      filter:
        include:
          - entity_id: sensor.battery_*
            options:
              name: '${threshold}'
            state: '${"< " + threshold}'

aaaaaaa too late)))

[Mariusthvdb (Marius)]

yep, too late thanks anyways!

I added

        card:
          type: grid
          title: "${'Test Icon color Buttons above ' + threshold}"

too just for the fun of it
full card:

    - type: custom:config-template-card
      entities:
        - input_number.power_threshold
      variables:
        threshold: states['input_number.power_threshold'].state
      card:
        type: custom:auto-entities
        card:
          type: grid
          title: "${'Test Icon color Buttons above ' + threshold}"
          columns: 4
        card_param: cards
        filter:
          include:
            - entity_id: sensor.*_actueel
              options:
                type: custom:button-card
                aspect_ratio: 1/1
                show_state: true
                template: support_custom_ui
          exclude:
            - state: '${"<" + threshold}'
        sort:
          method: state
          numeric: true

yet unformatted buttons, but thats a matter of injecting another template…

there is still a challenge of not showing the card at all if the list is empty. Think the only way is using a conditional card on a dedicated template

          {% set threshold = states('input_number.power_threshold')|float(0) %}
            {% set ns = namespace(above_threshold=[]) %}
            {% for s in states.sensor
             |selectattr('entity_id' 'search','_actueel')
             if s.state|float(0) > threshold %}
            {% set ns.above_threshold = ns.above_threshold + [s.entity_id] %}
            {% endfor %}
            {{ns.above_threshold|length > 0}}

[Ildar_Gabdullin]

@Mariusthvdb

there is still a challenge of not showing the card at all if the list is empty.

Have you tried with “show_empty: false” option?

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_number.test_level_1
  - type: custom:config-template-card
    entities:
      - input_number.test_level_1
    variables:
      threshold: states['input_number.test_level_1'].state
    card:
      type: custom:auto-entities
      card:
        type: grid
        columns: 4
      card_param: cards
      show_empty: false
      filter:
        include:
          - entity_id: sensor.battery_*
            options:
              type: custom:button-card
              aspect_ratio: 1/1
              show_state: true
            state: ${"< " + threshold}

But if the list is empty, there is an extra gap below the card:
empty:

not empty:

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

Have you tried with “show_empty: false” option?

… so sorry bout that. I guess figured the embedding config-template-card needed the condition… can conform it works as expected with show_empty: false.
And yes, there’s a tiny gap when empty. we had that before with core conditional cards too remember? maybe there’s still some code to improve here too.

btw, (0ff topic here, but also peculiarity with endings…) I did post the issue of clipping of last Childs in fold-entity-row, fixed that by downgrading for now … just so you know

btw, how do we mod the title of the grid card??

      card_mod:
        style: |
          .card-header {
            background-color: var(--background-color-off);
            color: var(--text-color-off);
            padding-top: 0px;
            padding-bottom: 0px;
            margin: 0px 0px 16px 0px;
          }

wont stick, and the element sure is card-header

I also did try

        type: custom:mod-card
        card_mod:
          style: |
            .card-header {
              background-color: var(--background-color-off);
              color: var(--text-color-off);
              padding-top: 0px;
              padding-bottom: 0px;
              margin: 0px 0px 16px 0px;
            }
        card:

          type: custom:auto-entities
          card:
            type: grid

and dont get You did it wrong! in inspector, but still no header change.

moving that to:

      card:
        type: custom:mod-card
        style:
          hui-grid-card:
            $: |
              .card-header {
                background-color: var(--background-color-off);
                color: var(--text-color-off);
                padding-top: 0px;
                padding-bottom: 0px;
                margin: 0px 0px 16px 0px;
              }

does seem to touch the actual grid card header, but it doesnt do what it is supposed to do…

so, a bit of an oddity, this grid card modding

this is what that header mod should do (and does system wide):

ok, so it kicked in after all, but didnt see some of the settings I use in my custom-card-mod-theme. this works now:

      card:
        type: custom:mod-card
        style:
          hui-grid-card:
            $: |
              .card-header {
                background-color: var(--background-color-off);
                color: var(--text-color-off);
                font-weight: 300; /* in card-mod-theme but not recognized here */
                letter-spacing: 0px; /* in card-mod-theme but not recognized here */
                padding-top: 8px;
                padding-bottom: 8px;
                margin: 0px 0px 8px 0px;
              }

[Ildar_Gabdullin]

@Mariusthvdb

there’s a tiny gap when empty. we had that before with core conditional cards too remember?

Yes, I even wanted to post 2 issues (one, two) regarding this gap but decided not to to it - may be these are not related things.

@Mariusthvdb

I did post the issue of clipping of last Childs in fold-entity-row, fixed that by downgrading for now

Yes, I have a subscription to the cards I use, read every issue))). Just have not read your post yet!

@Mariusthvdb

how do we mod the title of the grid card??

As you already noticed, grid card does not have a ha-card element. We have to use mod-card.

type: custom:mod-card
card:
  type: grid
  title: some title
  columns: 4
  cards:
    - &ref_0
      type: button
      entity: sun.sun
    - *ref_0
card_mod:
  style:
    hui-grid-card $: |
      .card-header {
        background-color: yellow;
        color: red !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        margin: 0px 0px 16px 0px;
      }

Sorry for card-mod off-topic here.

[Mariusthvdb (Marius)]

To get it back on topic: how do we get this config to auto update based on the states in the embedded auto-entities card? In my config they only update in a refresh of the view.

The identical card (albeit with a fixed threshold ) without the template card auto-updates perfectly.

config doesnt auto-update using an embedded auto-entities

[Ildar_Gabdullin]

You have to list ALL included entities in the “entities” option.

[Mariusthvdb (Marius)]

aww, that would be it. thats too bad really, because it makes the card useless for embedding an auto-entities card…

just fr the sake it I tried to add a glob to the entities

      - type: custom:config-template-card
        entities:
          - input_number.power_threshold
          - sensor.*_actueel

because thats the same the auto-entities uses, but that isnt seen by the config-template-card either. Might be a nice FR though

listing all entities wouldn’t be useful, so I might have to resort to template for the auto-entities, and only heave the header of the card use the config-template-card.

like this:

    entities:
      - type: custom:config-template-card
        entities:
          - input_number.power_threshold
        variables:
          threshold: states['input_number.power_threshold'].state
        row:
          type: section
          label: >
            ${'Above: ' + threshold
      - type: custom:slider-entity-row
        entity: input_number.power_threshold
      - type: custom:auto-entities
        card:
          type: entities
          card_mod: &mod
            style: |
              ha-card {
                box-shadow: none;
                margin: -16px -16px 0px -16px;
              }
        filter:
          template: >
            {% set threshold = states('input_number.power_threshold')|float(0) %}
            {% set ns = namespace(above_threshold=[]) %}
            {% for s in states.sensor
             |selectattr('entity_id','search','_actueel')
             if s.state|float(0) > threshold %}
            {% set ns.above_threshold = ns.above_threshold + [s.entity_id] %}
            {% endfor %}
            {{ns.above_threshold}}
        sort:
          method: state
          numeric: true

but then use buttons in a grid, if possible.

[Ildar_Gabdullin]

Using config-template-card only for the header is a TOO small task for this great card.
You may use a markdown for that.
Well, may be to have a standard caption w/o using card-mod for turning markdown into caption…

Btw, there was an example of using the CTC where 5 variables were specified and only one was used for the caption…

[Mariusthvdb (Marius)]

yeah, but if the cards need to have all entities spelled out, it simply cant be used embedding an auto-entities.
also, Ive tried to embed it with a template for the entities, but then we can not use the auto-entities with a grid filling button-cards options options…

ill re-write my issue in the config-template-card to a FR, asking to accept globs in the entities field.

[Ildar_Gabdullin]

@Mariusthvdb

asking to accept globs in the entities field.

That could be great feature!

[Mariusthvdb (Marius)]

FR: add glob functionality to entities (was: config doesnt auto-update using an embedded auto-entities)

ofc it would be equally great if FR: allow entity_id for numeric state trigger · Issue #242 · thomasloven/lovelace-auto-entities · GitHub could be implemented, That would have the advantage of not recalculating the full config each and every state update, but simply only update that specific card.

[dino1]

Hello!

I’m trying to set up picture elements card, but the elements are depending on (DOODS) camera recognition output. I set up a sensor that outputs yaml structure of elements that need to be displayed.

On the left is a preview with static elements, and on the right is a config-template-card. I’m having trouble figuring out why it’s not working, but I guess that |- is causing problems.

This is my card config:

type: custom:config-template-card
entities:
  - sensor.test_recognition_sensor
card:
  type: picture-elements
  image: https://images.unsplash.com/photo-1554995207-c18c203602cb
  elements: ${ states['sensor.test_recognition_sensor'].state }
  style: |
    ha-card > div > hui-image-element {
      transform: translate(0,0) !important;
      background: rgba(255,255,0,0.2) !important;
      border: 1px dashed yellow !important;
      border-radius: 5px !important;
    }

Does anyone have a clue what I am doing wrong?

[Ildar_Gabdullin]

elements must be a list of elements.
Why it is set to some sensor’s state?

[dino1]

As you can see on the screenshot I shared, that sensor’s state is a list of elements. The reason behind this is that the number of elements (and their properties) change every few seconds depending on person recognition.

[Ildar_Gabdullin]

Probably this may be a reason of the error (as you noticed):

Also, the state must be a proper list. Kind of:

template: |-
    {'entity': 'switch.mijia_300_1_buzzer', 'secondary_info': 'last-changed'},{'entity': 'switch.mijia_300_1_display', 'secondary_info': 'last-changed'},

Also, try using auto-entities with “template” option for filling “elements”!

[ygeffens (Yves Geffens)]

I’m looking for a solution so the entity itself is templatable, like this:

type: custom:config-template-card
entities:
  - input_number.month_{ xx }
....

I have 12 input_numbers: month_01, month_02, …

With a time function, I can get the current month (xx), but then, how do I write this exactly?

[Ildar_Gabdullin]

I am not sure that my proposal fits your requirements.
Please check this example:

  - type: entities
    entities:
      - entity: input_number.service_one_value
  - type: custom:config-template-card
    variables:
      - '''input_number.service_'''
      - '''one_value''' ###place you code for the current month
      - states[vars[0] + vars[1]]
    entities:
      - ${vars[2].entity_id}
    card:
      type: entities
      entities:
        - entity: ${vars[2].entity_id}
        - entity: sun.sun
          name: ${vars[2].state}

The entity_id is generated dynamically.

[ygeffens (Yves Geffens)]

This is what I have right now, but nothing is showing, no card, but also no error.
The card that comes after this is showing…

cards:
  - type: custom:config-template-card
    variables:
      - '''input_number.piek_afname_'''
      - '''${ now().strftime("%m") }'''
      - states[vars[0] + vars[1]]
    entities:
      - ${vars[2].entity_id}
    card:
      type: entities
      entities:
        - entity: ${vars[2].entity_id}

now().strftime("%m") returns 01, 02, 03, …

Must be doing something wrong, but I don’t see what.

Does the card returns nothing when anything is wrong ?

Thanks

[Ildar_Gabdullin]

@ygeffens

now().strftime("%m")

I am not sure this is a JS code.
Only JS may be used in the card.

Try this:

    variables:
      GetName: |
        var strPartName = "input_number.test_negative_";
        var strMonth = (new Date()).getMonth()+1;
        var strFullName = strPartName + strMonth;
        states[strFullName];

or this:

    variables:
      GetName: |
        var strFullName = "input_number.test_negative_" + String((new Date()).getMonth()+1);
        states[strFullName];