📝 100% Templatable Lovelace Configurations

Thanks,

Added the two lines:

        console.log(this._config.config);
        console.log(cardConfig);

But didn’t increase any “logging level” in the console

As I said above, likely a bug on lists

It can be, I am working with multiple objects inside “config”

Also the temperature one was “- type”

Checking

Doesn’t @everyone ?! :star_struck:

1 Like

Yes sorry, writing during tests so I didn’t scroll all the way down before hitting “Reply” :smiley:

1 Like

haha probably! I don’t see a use for it yet but I’ve only glanced at the git page. If I can leverage this to simplify conditional cards, then that will be a great benefit. I’m gonna look into that when I get home.

I’ll check it out tonight, but pretty much need another conditional checking if it is an array, and if so handle the array as a whole before applying back to the key value

So I think you’re right, that might be the issue, because now I changed the temperature one to this code:

                  - type: custom:config-template-card
                    config:
                      type: custom:mini-graph-card
                      name: Outside
                      icon: "${this.hass.states['sensor.dark_sky_temperature'].state >= 10 ? 'mdi:thermometer-chevron-up' : 'mdi:thermometer-chevron-down'}"
#                      icon: mdi:thermometer
                      more_info: false
                      group: false
                      entities:
                        - sensor.dark_sky_temperature
                      hour24: true
                      show:
                        graph: false
                        icon: true
                        extrema: true
                        fill: false
                      align_state: center

And in the console I see something new (it doesn’t work still, but still it’s something different)

config-template-card.js?track=true:1838 Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at Array.forEach (<anonymous>)
    at HTMLElement._evaluateConfig (config-template-card.js?track=true:2311)
    at Object.entries.forEach.entry (config-template-card.js?track=true:2315)
    at Array.forEach (<anonymous>)
    at HTMLElement._evaluateConfig (config-template-card.js?track=true:2311)
    at Object.entries.forEach.entry (config-template-card.js?track=true:2315)
    at Array.forEach (<anonymous>)
    at HTMLElement._evaluateConfig (config-template-card.js?track=true:2311)
    at Object.entries.forEach.entry (config-template-card.js?track=true:2315)
    at Array.forEach (<anonymous>)

Infinite loop…:kissing: perfection…

@iantrich Would you be willing to post a run down of what is needed to compile this? I’m thinking of contributing, but I’ve not yet compiled any typescript stuff for HA.

Thanks

npm install or yarn install
npm run rollup

That was disturbingly easy. I should have figured that out myself. Thanks!

1 Like

hehe

Side note, this is still not working even if I don’t use a list

              - type: custom:config-template-cardx
                config:
                  type: entities
                  title: House Members
                  show_header_toggle: false
                  entities:
                    - entity: person.andrea
                      type: "custom:secondaryinfo-entity-row"
                      secondary_info: "${this.hass.states['binary_sensor.andrea_oneplus5_charging'].state === 'true' ? 'Charging' : 'Not Charging'}"

I am wondering if there is also something that doesn’t work with the way that the “custom:secondaryinfo-entity-row” works

entities is a list

Fair enough, I tought you were referring to list of cards only :slight_smile:

Would something like the following work assuming the lists thing is fixed?

- type: custom:config-template-card
  config:
    type: vertical-stack
    cards: "${js_loop_thing_to_build_list_of_child_cards_with_more_templating()}"

I don’t need examples or anything (yet). Just a simple yes/no/maybe with some hackery would suffice. Wondering if it’s worth the time installing and figuring out the necessary JS to even attempt it.

1 Like

:man_shrugging:it’s pretty open-ended. Only thing to consider is that you’ll need to return a list in your case, not a single object. I haven’t played around with returning a list at all. The bug is in iterating over a list.

thanks for the pointer!
and yes, I strongly hope we can use templating in the regular cards, hope this will be implemented, sooner than later.

All custom cards are very nice, but when something odd happens we are always warned by the Devs we shouldn’t use custom ui or cards, because no official HA code…

that being said, I will most certainly check this card, and the possibilities it holds.

uhhh what devs are telling you to not use custom cards…? you’ve been told wrong, especially as the core team of devs on the front-end all produce a lot of custom cards :slight_smile:

yes, I know…and its a bit of a surprise indeed.
Before, in regular HA, when we used a custom components, we where warned not to complain or file issues for regular HA when using custom cards. As stung by wasps sometimes…
We did of course, even when using perfectly fine custom components like variable, or hue.

Now Lovelace is being pushed as the default, in its still immature state, all of a sudden all of these custom cards tumble over each other, fixing, or should I say filling in what the core cards don’t offer (yet).

Not sure what to make of that. I for one am very careful building a full Lovelace interface on custom cards mainly, as many of us here do. I very much like the looks of it, but since LL takes a lot of the system, and because of that one of my main components (Hue) is being tackled often, I hold back just yet.

Of course I have a LL setup, try to keep up as much as I can. But for me templating the interface is really important, and that’s where LL seriously lacks ( in the official cards that is).

This new Templatable card could be an improvement on that, though I much prefer to see LL embrace templating in its core.

1 Like