📝 100% Templatable Lovelace Configurations

Ryan_Grandy · June 4, 2022, 5:20am

Can this card work to send data to a lovelace_gen include statement? What kind of data is “name” below? Is it a string? The lovelace_gen acts differently if I replace the templace with a raw string equivalent of what the template should resolve to.

- type: custom:config-template-card
  entities:
    - input_select.outside_temp_duration
  card:
    !include
      - "../template/outside_temp_graph.yaml"
      - entity: input_select.outside_temp_duration
        name: ${states["input_select.outside_temp_duration"].state}

In the lovelace_gen file I try to do an if statement on the “name”. It always equates to false using the template above, even if I know that the state of the input_select is 550d. However if I swap the template for a raw string with “550d” the if statement resolves true.

{% if name == '550d' %}

DNWY90 · June 12, 2022, 12:57pm

I use this card for my floorplan, was always working great. Two days ago i did some HA updates, after not doing this for months. Everything is still working except for one of my views in my dashboard.

The page with the custom:config-template-card is now just a blank page. I did read the breaking changes and for as far i know there was nothing mentioned about custom:config-template-card. I also looked for important changes around custom:config-template-card and also cannot find something like that.

Someone a idea why this page of my dashboard is completely blank?

Below the beginning of my code:

title: 'Dannys Tablet Dashboard '
resources: null
views:
  - title: Home
    icon: mdi:home
    type: panel
    theme: Caule Black Aqua
    badges: []
    cards:
      - type: custom:config-template-card
        entities:
          - light.0x00178801027abeb3
          - light.tuin_links_achter
          - light.0x00178801027aaf78
          - light.shelly_dimmer_2_salontafel_light_0
          - light.shelly_dimmer_2_40f520017e3a_light_0
          - sensor.buienradar_condition
          - switch.shelly_1_b8b374_relay_0
          - switch.shelly_1_slaapkamer_relay_0
          - binary_sensor.lou
          - media_player.android_tv_philips
        card:
          type: picture-elements
          image: /local/floorplan/base/floorplan_night.png
          elements:
            - action: none
              entity: sun.sun
              hold_action:
                action: none
              state_image:
                above_horizon: /local/floorplan/base/floorplan_day.png
                below_horizon: /local/floorplan/base/floorplan_transparent.png
              style:
                width: 100%
                left: 50%
                top: 50%
                mix-blend-mode: lighten
                opacity: ${ states['sensor.sunlight_opacity'].state }

EDIT: retsored a back up and updated core from 2022.3.8 to 2022.6.5, this is when the card stopped working

Ildar_Gabdullin · June 12, 2022, 6:44pm

To help other people to help you - post a short code snippet w/o any special entities which can be used by people to simulate your issue.
Where is an element’s type? Is it supposed to be an image? You said that this code was working.

Any entity which presents on the card or is used in templates should be declared in the “entities” option.
This entity is NOT declared:

As well as sun:

DNWY90:

              entity: sun.sun
              ...
              state_image:
                above_horizon: /local/floorplan/base/floorplan_day.png
                below_horizon: /local/floorplan/base/floorplan_transparent.png

The “opacity” filter accepts values [0 … 1] - is the sensor.sunlight_opacity have a state with the same range?

DNWY90 · June 12, 2022, 8:11pm

After the update of HA the card didnt worked for two days. Today after restoring de back up and updating again the card stil did not work. Now, some hours later the card is working again. No idea what went wrong.

Thanks for your reply, made the card a year ago so i have to dive in to it to see if i can make it better, but for now everything is working like it should.

Ildar_Gabdullin · June 12, 2022, 8:48pm

The code you posted is WRONG. Start with correcting errors.

DNWY90 · June 13, 2022, 8:45am

I will but as i said, this card is made a year ago so i first have to look at the documentation. For now it’s working

Ildar_Gabdullin · June 13, 2022, 11:10am

OK, I stopped convincing you. The card is not supposed to work properly if it has errors. It may DISPLAY something but it will not CHANGE DISPLAY IN REALTIME since you have not specified monitored entities in your example.

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