Home Assistant Community

📝 100% Templatable Lovelace Configurations

lovelace
templates
Tags: #<Tag:0x00007f375cca1440> #<Tag:0x00007f375cca0f40>
#66

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

0 Likes

#67

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.

0 Likes

#68

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

#69

Release 1.0.2

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

#70

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

#71

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

0 Likes

#72

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)';
0 Likes

#73

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
0 Likes

#74

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:

0 Likes

#75

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

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

0 Likes

#76

That’s exactly why balloob didn’t want templates in Lovelace :wink:

0 Likes

#77

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.

0 Likes

#78

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

#79

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

0 Likes

#80

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

0 Likes

#81

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'
        config:
          type: 'custom:hui-entities-card'
          title: Stocks
          show_header_toggle: false
          entities:
            - type: custom:card-modder
              style:
                --paper-item-icon-color: "${ parseFloat(states['sensor.dow_futures_change_pct'].state) > 0 ? 'green' : 'red' }"
              card:
                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
              style:
                --paper-item-icon-color: "${ parseFloat(states['sensor.s_p_futures_change_pct'].state) > 0 ? 'green' : 'red' }"
              card:
                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:
image

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

3 Likes

#82

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

0 Likes

#83

Wow can’t wait to get into this thanks a lot!!
A game changer in my opinion

0 Likes

#84

If you really want to go crazy with the template, here’s one that allows different color for the icon based on the current market conditions.

      - type: 'custom:config-template-card'
        config:
          type: 'custom:hui-entities-card'
          title: Stocks Futures
          show_header_toggle: false
          entities:
            - type: custom:card-modder
              style:
                --paper-item-icon-color: "${var state = parseFloat(states['sensor.dow_futures_change_pct'].state);
                  state < -5 ? 'rgb(151, 26, 30)' :
                  state < -4 ? 'rgb(194, 39, 45)' :
                  state < -3 ? 'rgb(236, 27, 33)' :
                  state < -2 ? 'rgb(244, 101, 35)' :
                  state < -1 ? 'rgb(248, 147, 29)' :
                  state < 0 ? 'rgb(255, 194, 15)' :
                  state < 1 ? 'rgb(202, 219, 43)' :
                  state < 2 ? 'rgb(142, 198, 65)' :
                  state < 3 ? 'rgb(106, 158, 47)' :
                  state < 4 ? 'rgb(37, 145, 60)' : 'rgb(0, 111, 58)'}"
              card:
                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' }"

I am sure there is a better way to do this and would love to hear your thoughts.

2 Likes

#85

Edit: To be clear, as of 1.0.2, this is theoretical and not implemented.
I think an optional temp_var or something might be beneficial in this madness that you have created…something like:

 - type: 'custom:config-template-card'
        config:
          type: 'custom:hui-entities-card'
          title: Stocks Futures
          show_header_toggle: false
          temp_var: "parseFloat(states['sensor.dow_futures_change_pct'].state)"
          entities:
            - type: custom:card-modder
              style:
                --paper-item-icon-color: "${if (temp_var < -5) 'rgb(151, 26, 30)';
                  else if (temp_var < -4) 'rgb(194, 39, 45)';
                  else if (temp_var < -3) 'rgb(236, 27, 33)';
                  else if (temp_var < -2) 'rgb(244, 101, 35)';
                  else if (temp_var < -1) 'rgb(248, 147, 29)';
                  else if (temp_var < 0) 'rgb(255, 194, 15)';
                  else if (temp_var < 1) 'rgb(202, 219, 43)';
                  else if (temp_var < 2) 'rgb(142, 198, 65)';
                  else if (temp_var < 3) 'rgb(106, 158, 47)';
                  else if (temp_var < 4) 'rgb(37, 145, 60)';
                  else 'rgb(0, 111, 58)'}"
              card:
                type: custom:hui-sensor-entity-row
                entity: sensor.dow_futures
                icon: "${temp_var > 0 ? 'mdi:arrow-up-bold-circle' : 'mdi:arrow-down-bold-circle' }"
0 Likes