📝 100% Templatable Lovelace Configurations

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

Mariusthvdb · March 14, 2019, 7:23pm

wow that’s very nice. Very nice indeed, and exactly what I was looking for. In the Frontend that is.

But what unreadable, and difficult to debug config file is this going to be, if we need to do that for all entities. Nested Custom cards, modders, what have you, and each entity having its own template…and several cards having their own way of more or less supporting templates, some Jinja, some CSS, and of course JS…

This is ever going to be an interface for the broader public is rather unlikely, and, tbh, it is getting much more difficult by the week…

Don’t get me wrong, I really really need these templates and option to do so, but feel we should get back to the dev’s (or need we say STAFF now) and ask if this can’t be included in the native architecture. reintroduce Customize, or custom-ui even (which still works btw, but was never officially supported)

iantrich · March 14, 2019, 8:05pm

The devs at this point are pretty much me and balloob…need more bodies

klogg · March 15, 2019, 12:12am

I don’t get it, this still doesn’t work…

Does it make any difference that I have a split Lovelace config over several !include files?

title: Test View
cards:

  - type: custom:compact-custom-header

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

...
followed by more cards
...

Something is attempting to be rendered because I get a slight card misalignment where this card should be.

DavidFW1960 · March 15, 2019, 1:55am

Trying to use this to show a WiFi link count for a sonoff switch…
In the template editor (dev-tools) this shows the number:
{{state_attr(‘sensor.sonoff1_2914_status’ ,‘WiFi LinkCount’)}}

I’ve tried this:

  - type: 'custom:config-template-card'
    config:
      type: 'custom:hui-entity-card'
      entities:
        - entity: sensor.sonoff1_2914_status
          name: "${states['sensor.sonoff1_2914_status'].attributes.WiFi_LinkCount'}"

But it’s just blank. Is there any way I can display this or do I just need to create template sensors?

iantrich · March 15, 2019, 3:05am

custom:hui-entities-card not entity

iantrich · March 15, 2019, 3:11am

I’ve been doing all my testing in storage mode, can’t think of what could make a difference as in the end the front end just has the full configuration. Search the .js file for the console.log statements. Uncomment those and see if there is anything strange being output. I was able to do your exact example, just switching out the entity for mine, without issue.

You sure you don’t have any errors in your browser console?

DavidFW1960 · March 15, 2019, 3:14am

Still blank…

type: 'custom:config-template-card'
config:
  type: 'custom:hui-entities-card'
  entities:
    - entity: sensor.sonoff1_2914_status
      name: "${states.sensor.sonoff1_2914_status.attributes.MqttCount}"
    - entity: sensor.sonoff1_2914_status
      name: "${states.sensor.sonoff1_2914_status.attributes['WiFi LinkCount']}"

Those strings show the correct value in the template editor…