100% Templatable Lovelace Configurations

templates
lovelace
Tags: #<Tag:0x00007fd078b9f6b8> #<Tag:0x00007fd078b9f4d8>

#83

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


#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.


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

#86

This post was flagged by the community and is temporarily hidden.


#88

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

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)


#89

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


#90

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.

image


#91

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?


#92

custom:hui-entities-card not entity


#93

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?


#94

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…


#95

I didn’t look closely enough at your previous post after seeing the entity thing. This is not like the template editor, this is just Javascript. The states object has each entity on it, so you need to access it appropriately "${states['sensor.sonoff1_2914_status'].attributes['WiFi LinkCount']}"


#96

Ah!!! Thought I tried that…
Now:
image

Can I make it show the description as well as the state?

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

#97

I don’t know what description you are referring to


#98

I’d like the icon, text like MQTT Disconnects and then the number (1 in this case)
Similar for WiFi Disconnects. The graphic as I posted it doesn’t show much useful information to see what it is showing… Basically a description on each line for what it is showing.

I have 2 cards at the moment:


I’d love to just have one and show the MQTT & Wifi info for each switch…
The state is just the RSSI and the MQTT and WiFi are attributes of that entity.


#99

So I’m down to this now:

          - type: 'custom:config-template-card'
            config:
              type: 'custom:hui-entities-card'
              title: MQTT & Wifi Connections
              show_header_toggle: false
              entities:
                - sensor.sonoff1_2914_status
                - 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']}"
                - sensor.sonoff2_3110_status
                - entity: sensor.sonoff2_3110_status
                  name: "${states['sensor.sonoff2_3110_status'].attributes['MqttCount']}"
                - entity: sensor.sonoff2_3110_status
                  name: "${states['sensor.sonoff2_3110_status'].attributes['WiFi LinkCount']}"
                - sensor.sonoff5_1083_status
                - entity: sensor.sonoff5_1083_status
                  name: "${states['sensor.sonoff5_1083_status'].attributes['MqttCount']}"
                - entity: sensor.sonoff5_1083_status
                  name: "${states['sensor.sonoff5_1083_status'].attributes['WiFi LinkCount']}"
                - sensor.sonoff6_3719_status
                - entity: sensor.sonoff6_3719_status
                  name: "${states['sensor.sonoff6_3719_status'].attributes['MqttCount']}"
                - entity: sensor.sonoff6_3719_status
                  name: "${states['sensor.sonoff6_3719_status'].attributes['WiFi LinkCount']}"

Still ugly, duplicates the RSSI on all 3 lines and I can’t tell it it’s displaying MQTT or WiFi… so if I could get rid of the extra RSSI’s and label the MQTT and Wifi that would be perfect…


#100

OK how about this…

          - type: 'custom:config-template-card'
            config:
              type: 'custom:hui-entities-card'
              title: MQTT & Wifi Connections
              show_header_toggle: false
              entities:
                - entity: sensor.sonoff1_2914_status
                  name: "${'Coffee MQTT ' + states['sensor.sonoff1_2914_status'].attributes['MqttCount'] + ' WiFi ' + states['sensor.sonoff1_2914_status'].attributes['WiFi LinkCount']}"
                - entity: sensor.sonoff2_3110_status
                  name: "${'Toothbrush MQTT ' + states['sensor.sonoff2_3110_status'].attributes['MqttCount'] + ' WiFi ' + states['sensor.sonoff2_3110_status'].attributes['WiFi LinkCount']}"
                - entity: sensor.sonoff5_1083_status
                  name: "${'Garage MQTT ' + states['sensor.sonoff5_1083_status'].attributes['MqttCount'] + ' WiFi ' + states['sensor.sonoff5_1083_status'].attributes['WiFi LinkCount']}"
                - entity: sensor.sonoff6_3719_status
                  name: "${'Alarm MQTT ' + states['sensor.sonoff6_3719_status'].attributes['MqttCount'] + ' WiFi ' + states['sensor.sonoff6_3719_status'].attributes['WiFi LinkCount']}"

image

Great card and I learned a bunch. Thanks @iantrich

Any way to line up the MQTT and Wifi over to the right a bit? It seems to ignore spacing


#101

&nbsp maybe?


#102

not sure how to add those… it goes blank if I add here
"${'Garage &nbsp MQTT ’ + states
"${‘Garage’ + &nbsp + 'MQTT ’ + states
"${‘Garage’ + ‘&nbsp’ + ’ MQTT ’ + states

any other ways I can do that?


#103

&nbsp;

Sometimes the 10 character minimum allowed length of a forum post is kind of anoying, don’t you think?