šŸ“ 100% Templatable Lovelace Configurations

Does '${VAR1}' as a entity works for You?
Does this example of templated entities works?

Looking for some help. I am trying to display a series of security cameras based on the state of my input_select.camera. I have so far been able to get to a card created in lovelace with no Errors, but also no camera image. I am trying to display 4 separated cameras. Can anyone help me see what I am doing wrong?

type: custom:config-template-card
variables:
  - states['input_select.camera'].state
entities:
  - input_select.camera
card:
  type: custom:button-card
  entity: input_select.camera
  show_live_stream: true
  size: 100%
  aspect_ratio: 1.8/1
  card_size: 1

Hello

Is possible to modify the value of a state-label in a picture-elements with this card?

I have a sensor that display its value in seconds and I want to show it in hours, so I think on use this card an divide it by 3600.

No.
Read this.

Ok

Thank you for the info

Hello. Is it possible to get the name of currently selected theme?

Hey, I just started with Home Assistant a few days back and Iā€™m loving your template cards. Theyā€™re working fine for the most part, however, they donā€™t instantly update on state change. Iā€™ve added a binary sensor entity in nodered which Iā€™m controlling with one of your cards like so:

type: custom:config-template-card
entities:
  - switch.heater_override
variables:
  - states['switch.heater_override'].state
card:
  type: button
  tap_action:
    action: toggle
  entity: switch.heater_override
  name: ${vars[0]==='on' ? 'Manuell':'Automatisch'}
  icon: ${vars[0]==='on' ? 'mdi:fire':'mdi:home-automation'}
  icon_height: 47px

From my understanding of the docs, the value should update on state change since its listed in the entities (i.e. it should be monitored). However, the lovelace view wonā€™t update until a few minutes later. Looking at the same view on a different device allready shows the new state, though. Adding the exact same logic (without changing name and icon of cource) in a standard entity cards updates instantly. What am I doing wrong?

Regards
Dominic

There is smth wrong with your switch.
Check this test switch:

switch:
  - platform: template
    switches:
      test_switch:
        value_template: "{{ is_state('input_boolean.test_boolean', 'on') }}"
        turn_on:
          - service: input_boolean.turn_on
            entity_id: input_boolean.test_boolean
        turn_off:
          - service: input_boolean.turn_off
            entity_id: input_boolean.test_boolean

And the card:

type: custom:config-template-card
entities:
  - switch.test_switch
variables:
  - states['switch.test_switch'].state
card:
  type: button
  tap_action:
    action: toggle
  entity: switch.test_switch
  name: ${vars[0]==='on' ? 'Manuell':'Automatisch'}
  icon: ${vars[0]==='on' ? 'mdi:fire':'mdi:home-automation'}
  icon_height: 47px

qazwsxedce

1 Like

Well, no idea what was wrong. Iā€™ve deleted and re-created the entity in node red and it works just fine now. Thanks for pointing me to an issue with the switch itself.

btw the same may be achieved by using custom:button-card

1 Like

trying to have auto-entities accept a config-template-card variable in the state: field for a numerical comparison just wont let me do itā€¦

    - 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
          columns: 4
        card_param: cards
        filter:
          include:
            - entity_id: sensor.*_actueel
          exclude:
            - state: "<" '${threshold}'  ## <-----

Ive tried about any format I could think of, so please have a look how this could be done?

using the card with

- state: "<20"

works perfectly, and the input_number is also correct and live.

eg
another card using the same number:

      - type: custom:config-template-card
        entities:
          - input_number.power_threshold
        variables:
          threshold: states['input_number.power_threshold'].state
        row:
          type: section
          label: >
            ${'Above: ' + threshold

works just fine, so it must be the format of the - state: line

update

wait, I had tried it all except the obvious: - state: '${"<" + threshold}' which does the trickā€¦ :wink:

nvm me. sorry for bothering

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

image

aaaaaaa too late)))

yep, too late :wink: 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}}

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

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