šŸ“ 100% Templatable Lovelace Configurations

ā€¦ 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 :blush:

        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ā€¦

:wink: 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;
              }

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.

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

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;
      }

image

Sorry for card-mod off-topic here.

1 Like

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.

You have to list ALL included entities in the ā€œentitiesā€ option.

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

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.

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ā€¦

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 :wink: options optionsā€¦

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

That could be great feature!

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.

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?

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

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.

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ā€!

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?

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.

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

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];

Both examples return a single vars[0], correct ?
The card is just blanc.

Since my input_numbers are:

input_number.piek_afname_01
input_number.piek_afname_02
...

I also tried the code with

        var strPartName = "input_number.piek_afname_0";

because (correct me if Iā€™m wrong) the JS code returns a month as ā€˜1ā€™, ā€˜2ā€™, ā€¦
I know this gives a wrong result in october (just debugging and trying to find out why nothing is being displayed).

Itā€™s working

      - type: custom:config-template-card
        variables:
          - '''input_number.piek_afname_'''
          - if ((new Date()).getMonth()+1 < 10) { "0" }
          - String((new Date()).getMonth()+1)
          - states[vars[0] + vars[1] + vars[2]]
        entities:
          - ${vars[3].entity_id}
        card:
          type: entities
          entities:
            - entity: ${vars[3].entity_id}
              type: custom:multiple-entity-row

The reason why your initial idea was not working is probably just because of the ā€œ0ā€ in front of the month number. So I went back to that idea, and added the ā€œ0ā€ for those months before october.

Thank you so much for your input !

It could be less cumbersome since you need only entity_id:

variables:
  ..
  - vars[0] + vars[1] + vars[2]
entities:
  - ${vars[3]}
card:
  type: entities
  entities:
    - entity: ${vars[3]}
...