šŸ“ 100% Templatable Lovelace Configurations

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.

: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

Youā€™ll likely not see 95% of what is in custom cards in core, ever. But that discussion isnā€™t really for this threadā€¦

Donā€™t know if itā€™s on your side or custom-card-modder. The issue is when applying custom-card-modder to your card it works without errors but after maybe 5 seconds it will lose the custom-card-modder modifications, no error is reported in the log and all works normally just the mod who disappear.

Here is the code

card:
  type: 'custom:config-template-card'
  config:
    entity: sensor.co
    name: CO
    show_card: true
    stroke_width: 20
    fill: 'rgba(100,100,100,0.0)'
    type: 'custom:circle-sensor-card'
    stroke_color: >-
      ${this.hass.states['sensor.co'].state === 'Clear' ? '#55f26e' :
      this.hass.states['sensor.co'].state === 'Warning' ? '#e8e400' : '#d30000'}
style:
  border-radius: 100px
  font-size: 1.1em
  font-weight: bold
  line-height: 1.5
type: 'custom:card-modder'

Thanks for looking into it.

looks like weā€™re in business with lists! :tada:
going to do some actual testing this time and hopefully have a release later tonight :slight_smile: I got excited last night and released it after ~2 minutes of testing :rofl:

Iā€™ll put the config of the above in the Readme as well as it uses all demo platforms and is an easy one to test with

Update: I managed a full 15 minutes of testing before I got distracted :crossed_fingers:

6 Likes

Release 1.0.2

  • Now properly support lists within configurations
  • New template variables introduced to cleanup templates states and user
3 Likes

I wouldnā€™t put the card-modder on my card, put it at the top level of config instead. Iā€™m not really rendering anything. Havenā€™t played with it much, in general actually, to say for sure though.

3 Likes

I still canā€™t get this to workā€¦

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

sure, appreciate that.

my fear is the lovelace-ui.yaml is going to be littered with all these customizations in the cards, where we could use the customize section, and of course the custom-ui in regular Ha to keep things tidy.

imagine needing something like this customize_glob in Lovelace:

sensor.*_motion_sensor_temperature:
  templates:
    icon_color: >
      if (state < -5) return 'rgb(30, 255, 255)';
      if (state < 0) return 'rgb(30, 144, 255)';
      if (state < 10) return 'rgb(255, 255, 0)';
      if (state < 15) return 'rgb(255, 211, 30)';
      if (state < 20) return 'rgb(0, 128, 0)';
      if (state < 25) return 'rgb(255, 165, 0)';
      if (state < 30) return 'rgb(255, 0, 0)';
      if (state < 35) return 'rgb(85, 0, 0)';
      return 'rgb(47, 0, 0)';

just a few lines now, neatly separated from the config itselfā€¦

or maybe an even better example used on 153 states in my instanceā€¦:

automation.*:
  templates:
    icon_color: >
      if (state === 'on') return 'rgb(251, 210, 41)';
      return 'rgb(54, 95, 140)';

I have tested latst version and there mut be something odd going on with the mini-graph-card and second-entity-row because there is nothing wrong in my opinion with the code.

Without the template card it works, with it it doesnā€™t, and to test, I used the example code from git repo

          - type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:config-template-card
                    config:
                      - type: custom:mini-graph-card
                        name: "${states['sensor.dark_sky_temperature'].state > 10 ? 'Cozy' : 'Too Hot/Cold'}"
                        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

1 Step forward!
I donā€™t have to use ā€œ- type: custom:mini-graph-cardā€
I do have to use ā€œtype: custom:mini-graph-cardā€

Now the odd thing is that is ā€œblinkingā€
image
image

And the icon is not loading at all :smiley:

Put double quotes on the outside and single quotes in the inside

icon: "${states['switch.hall_light'].state === 'on' ? 'mdi:music' : 'mdi:sleep'}"

Thatā€™s exactly why balloob didnā€™t want templates in Lovelace :wink:

Iā€™ll play around with it tonight, but my guess is that the show is being botched.

As for the blinking, I was afraid of this happening, especially with things with animations. Pretty much what is happening, is that anytime there is ANY state change, the full card is being redrawn. Perhaps @rhodges idea to have an entity to use could be beneficial in that we would only watch for a state change on that entity. Or perhaps a list of entities to watch for state changes fromā€¦? Will have to ponder on that.

As @iantrich suggested, the card-modder has to be used inside the template card. The following works:

      - type: 'custom:config-template-card'
        config:
          type: 'custom:card-modder'
          style:
            --paper-item-icon-color: "${ parseFloat(states['sensor.dow_futures_change_pct'].state) > 0 ? 'green' : 'red' }"
          card:
            type: 'custom:hui-entities-card'
            title: Stocks
            show_header_toggle: false
            entities:
              - entity: sensor.dow_futures
                icon: "${parseFloat(states['sensor.dow_futures_change_pct'].state) > 0 ? 'mdi:arrow-up-bold-circle' : 'mdi:arrow-down-bold-circle' }"
2 Likes

Thank you for testing i will try it later when my time becomes mine again.