📝 100% Templatable Lovelace Configurations

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]}
...

@iantrich

or someone else

I tested the card with a variable hoping that if I change my input_select it will also update the card, but this is not the case. And this is my problem i need to update the card after i changed the input_select.

here you see that he not changes the card or the value in the card

test

my code:

type: custom:config-template-card
variables:
  - states['input_select.test'].state
entities:
  - ${vars[0]}
card:
  type: button
  entity: ${vars[0]}
  name: ${[vars[0]].state}

has someone a idea?

Probably this small example will give you some hints:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_select.test_value
  - type: custom:config-template-card
    variables:
      - states['input_select.test_value']
    entities:
      - ${vars[0].entity_id}
    card:
      type: horizontal-stack
      cards:
        - type: button
          name: ${vars[0].state}

изображение

Dear all, how can I use “templating” to change picture/icon inside the map card??
I’m referring to device_tracker picture/icon.
For example, if state == home > picture1; if state == not_home > picture2

thanks a lot

Check the Map card - Map card - Home Assistant
It does not have an option for the entity’s image - so you cannot use the config-template-card for changing the image.
The image is specified in the entity itself (entity_picture).
Try using CUSTOM UI.

1 Like

Thanks a lot man!
All is working well with Custom-UI!!!

Regards.

please be warned and read the heads-up on custom-ui… I have hope it will be fixable, but have no proof yet, and, am in need of serious assistance there. due to web sockets changes in 2022.4, a view reload is needed for the templates to kick in.