šŸ“ 100% Templatable Lovelace Configurations

Share your Projects! Dashboards & Frontend
,
26

Unfortunately somehow is not working and I think 50% of this is my fault :smiley:

             - type: custom:config-template-card
                config:
                  - type: entities
                    title: House Members
                    show_header_toggle: false
                    entities:
                      - entity: person.andrea
                        type: "custom:secondaryinfo-entity-row"
                        secondary_info: "OnePlus 5 Battery: [[ sensor.andrea_oneplus5_battery ]]% - ${this.hass.is_states['binary_sensor.andrea_oneplus5_charging', 'true'] 'Charging' : 'Not Charging'}"
                      - entity: person.xxxxx
                        type: "custom:secondaryinfo-entity-row"
                        secondary_info: "Honor 8 Battery: [[ sensor.xxxxx_honor8_battery ]]%"

This is the code I am using, true is that the line in the template check in HA doesnā€™t seem to return not an error nor the expected result, so, not sure if itā€™s me or what :slight_smile:

@Maaniac code aswell does the same in the template test to be fair :slight_smile:

I also tried the same with the mini-graph-card using @Maaniac icon config, still got a configuration error:

                        icon: "${this.hass.states['sensor.dark_sky_temperature'].state >= '10' ? 'mdi:thermometer-chevron-up' : 'mdi:thermometer-chevron-down'}"

My guess in this one is the >= but to be honest, that seems to be correct to me

Any hint please? ^^

Thanks

27

your first one isnā€™t defining templates correctly ${}. Also, youā€™ll need to template the full line, not just parts of it. The full thing is evaluated as Javascript code.

on your 2nd one, youā€™ll need to convert the string to a number to evaluate most likely

28

Thanks @iantrich , I will check that :slight_smile:

29

Side note, the dark_sky sensor return a number as far as I can tell :slight_smile:
image

Also becaue I believe that various graph cards are using those values as they are to generate the graph (but again, I might be wrong)

30

You have '10' though, which is a string

31

There is a typo in the card name.

32

Hi @arsaboo
Yes I saw that and already fixed, didnā€™t help tho :smiley:

Thanks :slight_smile:

33

Oh, okay that makes sense :slight_smile:
I will try without quotes!

Cheers

34

Thank you for your contribution! If I understand this thing correctly, itā€™s a card that allows you to template other cards. In effect, it overrides other cards and gives them templating abilities with access to the hass object.

If my interpretation is correct, it makes me wonder why templating isnā€™t a common ability of all cards. It seems one often finds a need to tweak a cardā€™s appearance, or even conditional visibility, in a way that the cardā€™s author never envisioned. Maybe templating should be part of Lovelaceā€™s DNA, an inheritable trait in order to make it easily available to existing stock, custom, and future cards.

Of course, I offer this opinion with little knowledge of Lovelaceā€™s innards so I might just be asking for the impossible.

2 Likes
35

So, I tried the following and it does not work for me (Invalid Configuration):

      - type: custom:config-template-card
        card:
          type: entities
          title: Stocks
          show_header_toggle: false
          entities:
            - entity: sensor.dow_futures
              icon: "${parseFloat(this.hass.states['sensor.dow_futures_change_pct'].state) > 0 ? 'mdi:arrow-up-bold-circle' : 'mdi:arrow-down-bold-circle'}"

I tried without parseFloat and it still did not work.

Also, I am guessing we cannot change icon_color.

36

Ok my attempt without quote didnā€™t help, still same issue.

icon: "${this.hass.states['sensor.dark_sky_temperature'].state >= 10 ? 'mdi:thermometer-chevron-up' : 'mdi:thermometer-chevron-down'}"

The other one, I tried 3 different way, none of them work an the second one should simply work

#secondary_info: "OnePlus 5 Battery: [[ sensor.andrea_oneplus5_battery ]] - ${this.hass.states['binary_sensor.andrea_oneplus5_charging'].state === "true" ? 'Charging' : 'Not Charging'}"
#secondary_info: "${this.hass.states['binary_sensor.andrea_oneplus5_charging'].state === "true" ? 'Charging' : 'Not Charging'}"
secondary_info: "${this.hass.is_state['binary_sensor.andrea_oneplus5_charging', 'true'] ? 'Charging' : 'Not Charging'}"

I am not sure about what am I doing that wrong to be honest

I tested all those templates in the UI and none of them give error, but all of them just print the same code, not the result for some reasonā€¦

I am lost xD

37

Curious thing, not ure if anyhow related.
On the temperature issue, I got an error in the browser console:

    at HTMLElement.setConfig (config-template-card.js?track=true:2290)
    at create_card_element_createElement (401352253e833b70a294.chunk.js:4823)
    at createCardElement (401352253e833b70a294.chunk.js:4823)
    at HTMLElement._createCardElement (401352253e833b70a294.chunk.js:3618)
    at _cards.config.cards.map.card (401352253e833b70a294.chunk.js:3615)
    at Array.map (<anonymous>)
    at HTMLElement.setConfig (401352253e833b70a294.chunk.js:3615)
    at create_card_element_createElement (401352253e833b70a294.chunk.js:4823)
    at createCardElement (401352253e833b70a294.chunk.js:4823)
    at HTMLElement._createCardElement (401352253e833b70a294.chunk.js:3618)

On the second one (charging/not charging) I donā€™t get any error in the console.

38

Lovelace core will not support templating, that has been stated from the beginning by balloob, but this should cover all use cases, I believe where templating could be beneficial. I think

1 Like
39

Add these logs back if you want to see what youā€™re getting for the evaluated template: https://github.com/custom-cards/config-template-card/commit/bcad27dc9ed96520a5cbbd11a79a4a2da5caaafa#diff-9adab9572c0667f4f32ee92b4e87df0cL40

40

You can only do what the card supports. entities card does not support icon_color.

As noted in the readme, you need to use the full name of cards, i.e. custom:hui-entities-card

Edit: I COULD drop the custom requirementā€¦but not sure if I should or not. Seems to fit better with what is done by core already :woman_shrugging:, but Iā€™m not going to maintain a list of what cards/rows/elements are in core, so the full name will be required regardless

41

That wasnā€™t the case until 20 seconds back :wink:

In any case, the following doesnā€™t work either:

      - type: custom:config-template-card
        card:
          - type: custom:hui-entities-card
            title: Stocks
            show_header_toggle: false
            entities:
              - entity: sensor.dow_futures
                icon: "${this.hass.states['sensor.dow_futures_change_pct'].state > 0 ? 'mdi:arrow-up-bold-circle' : 'mdi:arrow-down-bold-circle'}"
42

It was in the readme, below the example, just not the example itself. And since apparently asking for people to update Readme is rude, I did it myself just nowā€¦

43

@arsaboo Havenā€™t you missed off a config?

In any case this doesnā€™t work either.

  - type: custom:config-template-card
    config:
      type: custom:hui-entities-card
      title: TESTING
      entities: 
        - entity: switch.hall_light
          icon: "${this.hass.states['switch.hall_light'].state === 'on' ? 'mdi:music' : 'mdi:sleep'}"
44

Add some logs, might be a bug in the traversing of the nested objects

Edit: Yeah there probably is, I think i ONLY did objects and not lists :man_facepalming: maybe someone can check it out.

45

@Mariusthvdb, didnā€™t you want this