📝 100% Templatable Lovelace Configurations

iantrich · March 13, 2019, 11:10pm

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

vjmindlab · March 14, 2019, 1:49am

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.

iantrich · March 14, 2019, 2:34am

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

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

iantrich · March 14, 2019, 3:24am

Release 1.0.2

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

iantrich · March 14, 2019, 3:47am

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.

klogg · March 14, 2019, 9:53am

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

Mariusthvdb · March 14, 2019, 10:56am

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

SeLLeRoNe · March 14, 2019, 12:07pm

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

SeLLeRoNe · March 14, 2019, 12:17pm

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

iantrich · March 14, 2019, 3:29pm

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

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

iantrich · March 14, 2019, 3:30pm

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

iantrich · March 14, 2019, 3:36pm

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.

arsaboo · March 14, 2019, 3:54pm

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

vjmindlab · March 14, 2019, 4:04pm

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

SeLLeRoNe · March 14, 2019, 4:06pm

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

arsaboo · March 14, 2019, 4:19pm

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:

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

iantrich · March 14, 2019, 4:20pm

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

vjmindlab · March 14, 2019, 4:21pm

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

arsaboo · March 14, 2019, 5:39pm

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.

iantrich · March 14, 2019, 5:44pm

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