📝 100% Templatable Lovelace Configurations

DNWY90 · June 13, 2022, 12:02pm

Sorry, Maybe the definition of working is not clear in my situation. The problem was that the card was blank after the update, so no floorplan etc.

At this moment the floorplan is back and things are working as before. So now i do have all the time to dive in to my code en read the documentation as told…

So im definitly gonna do some thing with your advice

Ildar_Gabdullin · June 13, 2022, 12:42pm

Ok, sorry for being rude… Come back if you will see any issues, will try to help you!

Bakker · July 25, 2022, 8:37am

Can some helo me to correct this error: No visual editor available for type ‘custom:config-template-card’

DavidFW1960 · July 25, 2022, 9:39am

What it says.manual yaml config only no gui

Mariusthvdb · July 25, 2022, 9:52am

using below templated ‘Dark’ for Maps when certain themes are active has worked nicely, up to recently. I only noticed yesterday, so am not sure when this would have started tbh.

      - type: custom:config-template-card
        entities:
          - input_select.theme
        variables:
          theme: states['input_select.theme'].state
        card:
          type: custom:hui-element
          card_type: map
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
              }
          dark_mode: ${(/ight|Dark|Matrix/).test(theme)}
          entities:
            - sensor.here_origin
            - sensor.here_destination

currently, when this map is displayed, it briefly shows the dark background, but then immediately switches to the regular (light) map, though it keeps the dark interface items

what could have changed lately? It probably is a frontend thing,. but posting here since it is in fact the ome case I use these custom:config-template-card configs.

hmm, I just tested it with a hard coded dark_mode: true and that behaves the same. Erratic. So, a frontend issue. I’ll writeup an issue

haha, @Ildar_Gabdullin was ther: https://github.com/home-assistant/frontend/issues/13236
added my +1.
thx

rhodan52 · July 31, 2022, 7:35pm

New to HA and I’m trying to get ONLY the icon to change based on the state of the light, in this example. Instead, the icon doesn’t show up unless I delete the items under “row” Is that something that is possible with this?

type: entities
entities:
  - type: custom:config-template-card
    variables:
      - states['switch.dining_room_light'].state
    entities:
      - switch.dining_room_light
    row:
      type: section
      label: '${vars[0] === ''on'' ? ''Light On'' : ''Light Off''}'
    element:
      type: icon
      icon: '${vars[0] === ''on'' ? ''mdi:light-switch'' : ''mdi:light-switch-off''}'
  - entity: switch.dining_room_light
state_color: true
title: Dining Room

Ildar_Gabdullin · August 1, 2022, 12:22am

What icon are you talking about? A section does not have an “icon” attribute.
The “element” is supposed to be used with picture-elements only.

rhodan52 · August 1, 2022, 1:49am

I took the bit about icon right from iantrich’s github page for this addon

See under heading: Picture-elements card example
I certainly could be reading it wrong, but author uses the following in that example:

    element:
      type: icon
      icon: "${vars[0] === 'on' ? 'mdi:home' : 'mdi:circle'}"

In that example, again if I’m reading it correctly, would display icon ‘mdi:home’ if the state (from the variable) was ‘on’ or ‘mdi:circle’ if the state was off.

So if I have read this instruction wrong, perhaps you could share what you would suggest?

Ildar_Gabdullin · August 1, 2022, 2:11am

Yes, and you are NOT using picture-elements in your example.

rhodan52 · August 1, 2022, 2:23am

Well, as I said I am new to HA. If you don’t know the answer, or more likely are unwilling to help guide me toward a solution, then why did you take the time to reply? There might be someone else here that is willing to offer counsel.

You have yet to have offered a solution, which is where I assume you are perhaps unwilling to help? I’d love, of course, to be proven wrong.

Ildar_Gabdullin · August 1, 2022, 2:34am

Ok, just show a card which you want to change.
Your first example was an Entities card with a section and a switch.
What do you want?
Changing a section’s label - DONE, you did it!
What else?
You wanted to change an icon - but the card has only one icon for the switch.

rhodan52 · August 1, 2022, 3:08am

I thought I displayed the full card of what I wanted to change, and in my opening post I stated that I wasn’t interested in changing anything but the icon based on the entity state. When it is turned on, I want one icon mdi:light-switch and when it is turned off I want mdi:light-switch-off

Are these not two icons? ‘‘mdi:light-switch’’ when it is turned on (variable) and ‘‘mdi:light-switch-off’’ when it is turned off?

Again, apologizes as it seems that you’re getting riled up by lack of familiarity with YAML. I worked off the closest example that was present on the author’s github page. Perhaps you could reference a good source for me to review so that I don’t continue to upset you (not everyone starts off YAML as the expert that you may have been).

Ildar_Gabdullin · August 1, 2022, 3:31am

So, there is a switch entity.
You need to show icon_1 when the switch = ON, icon_2 - when OFF.

Then you got at least these options:

For template switches you may specify different icons on the “object level” - the “icon” attribute may be templated.
For any entity you may use Custom UI (google it) to specify an icon dependingly on some conditions.
You may use a “custom:template-entity-row” card and specify a templated icon.
You may use a “custom:config-template-card” (“CTC”) - as you wanted first. And here is a solution below.

First, there are three ways to template something:

Place the whole card into CTC - then use a “card” option.
Place some row inside an Entities card into CTC - then use a “row” option.
Place some element inside an Picture-elements card into CTC - then use an “element” option.

Here we got an Entities card with TWO elements to change.
Then we may either use the “row” option TWICE like:

type: entities
entities:
  - type: CTC
    ...
    row:
      ......use your template for this row
  - type: CTC
    ...
    row:
      ......use your template for this row

or use the “card” option - and this is less cumbersome:

type: CTC
...
card:
  type: entities
  entities:
    ...use your templates for rows

Also, there are 2 ways of using variables in CTC.
Up to you to decide which one to choose.
This example covers both ways:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: switch.test_switch
  - type: custom:config-template-card
    variables:
      SWITCH: states['switch.test_switch']
    entities:
      - ${SWITCH.entity_id}
    card:
      type: entities
      entities:
        - type: section
          label: '${SWITCH.state === "on" ? "Enabled" : "Disabled"}'
        - entity: ${SWITCH.entity_id}
          name: ${SWITCH.state}
          icon: '${SWITCH.state === "on" ? "mdi:car" : "mdi:laptop"}'
  - type: custom:config-template-card
    variables:
      - states['switch.test_switch']
    entities:
      - ${vars[0].entity_id}
    card:
      type: entities
      entities:
        - type: section
          label: '${vars[0].state === "on" ? "Enabled" : "Disabled"}'
        - entity: ${vars[0].entity_id}
          name: ${vars[0].state}
          icon: '${vars[0].state === "on" ? "mdi:car" : "mdi:laptop"}'

rhodan52 · August 1, 2022, 3:36am

<3 Thank you very much. I appreciate you taking the time to draw out some examples to work off of, and learn from as well.

Eckart · August 12, 2022, 9:09am

Hello,
I want to set the max. value of a bar card from an input_number entity and tried to use config-template-card. But it throws an error: “No card type definded”.
My code is:

type: custom:config-template-card
variables:
  max_containers: states.['input_number.zahler_dunstabzug_wartungsintervall'].state
entities:
  - ${max_containers}
card:
  - type: custom:bar-card
    name: Reinigung der Filter
    icon: 'off'
    decimal: 0
    min: -100
    max: ${max_containers}
    entities:
      - entity: input_number.zahler_dunstabzug_zeit_bis_wartung

Thank you for any help, I can’t find the failure.
Regards, Eckart

Ildar_Gabdullin · August 12, 2022, 9:35am

Remove this “-”.

Seems to be very wrong.

Haven’t check other code.

Eckart · August 12, 2022, 10:10am

Thank you for the fast answer. I am still a bit awkward with yaml.

With the corrections - if I made them correctly - I don’t see any error message anymore, but also no card.

type: custom:config-template-card
variables:
  max_containers: states.['input_number.zahler_dunstabzug_wartungsintervall'].state
entities: 
  - ${max_containers}
card:
    type: custom:bar-card
    name: Reinigung der Filter
    icon: 'off'
    decimal: 0
    min: -100
    max: ${max_containers}
    entities:
      - entity: input_number.zahler_dunstabzug_zeit_bis_wartung

The rest of the code is correct. Without CTC, the card works.
Greetings, Eckart

EDIT:
I have found my failure: the line

max_containers: states.['input_number.zahler_dunstabzug_wartungsintervall'].state

contains a wrong dot. It works with:

max_containers: states['input_number.zahler_dunstabzug_wartungsintervall'].state

Thanks again, Eckart

Ildar_Gabdullin · August 12, 2022, 10:34am

Wrong “entities” option may NOT show an error. You will find out this error only when you start testing the card.

No, it does not))))
Read above.
Check this example, here you may find a solution:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_boolean.test_boolean
  - type: custom:config-template-card
    variables:
      INPUT_BOOLEAN: states['input_boolean.test_boolean']
    entities:
      - ${INPUT_BOOLEAN.entity_id}
    card:
      type: entities
      entities:
        - entity: ${INPUT_BOOLEAN.entity_id}
          name: ${INPUT_BOOLEAN.state}

atv · September 9, 2022, 6:26pm

I’m currently using this card like this

type: custom:config-template-card
variables:
  - states['binary_sensor.waze_car_live_url'].attributes.url
entities:
  - binary_sensor.wave_car_live_url
card:
  type: iframe
  url: ${ vars[0] }

Is there any way of making this bigger and resize it ? Currently it’s coming out a bit small dimension wise.

Ildar_Gabdullin · September 9, 2022, 9:08pm

Making bigger what?