100% Templatable Lovelace Configurations

Tags: #<Tag:0x00007fd07413da48> #<Tag:0x00007fd0757ffe70>


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.


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

  type: 'custom:config-template-card'
    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'}
  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:


Release 1.0.2

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


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.


I still can’t get this to work…

  - type: 'custom:config-template-card'
      type: custom:hui-entities-card
      title: TESTING
        - 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:

    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…:

    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
              - type: horizontal-stack
                  - type: custom:config-template-card
                      - 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
                          - sensor.dark_sky_temperature
                        hour24: true
                          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”

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


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


Thanks :slight_smile:
Much appreciated, so far all my tests attempt unfortuantely failed otherwise I would have posted some use examples


Actually, we can even take the combination between card-modder and template card even futher to modify every row in the card. So, for example, you could use:

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

And you would get something like:

Basically, every row in the card is using its own style template.


I’m so pumped that we figured this out. Did you know about this @thomasloven? We tried it on a whim