📝 100% Templatable Lovelace Configurations

DavidFW1960 · April 13, 2021, 4:40am

OK!

So thanks to @iantrich for the idea, I ended up using custom:multiple-entity-row which lets me do pretty much what I wanted while also restoring the state card info for my Tasmota devices before I ‘upgraded’ to the Tasmota integration.

Here is what the old card looked like and also the code and what I saw when I clicked on the row…

Card Config:

          - type: 'custom:config-template-card'
            variables:
              - states['sensor.sonoff1_2914_mqtt_connect_count'].state
              - states['sensor.sonoff1_2914_wifi_connect_count'].state
              - states['sensor.sonoff1_2914_rssi'].state
              - states['sensor.sonoff2_3110_mqtt_connect_count'].state
              - states['sensor.sonoff2_3110_wifi_connect_count'].state
              - states['sensor.sonoff2_3110_rssi'].state
              - states['sensor.sonoff5_1083_mqtt_connect_count'].state
              - states['sensor.sonoff5_1083_wifi_connect_count'].state
              - states['sensor.sonoff5_1083_rssi'].state
              - states['sensor.sonoff6_3719_mqtt_connect_count'].state
              - states['sensor.sonoff6_3719_wifi_connect_count'].state
              - states['sensor.sonoff6_3719_rssi'].state
              - states['sensor.nodemcu_lounge_mqtt_connect_count'].state
              - states['sensor.nodemcu_lounge_wifi_connect_count'].state
              - states['sensor.nodemcu_lounge_rssi'].state
              - states['sensor.nodemcu_bedroom_mqtt_connect_count'].state
              - states['sensor.nodemcu_bedroom_wifi_connect_count'].state
              - states['sensor.nodemcu_bedroom_rssi'].state
              - states['sensor.sonoff3_0898_mqtt_connect_count'].state
              - states['sensor.sonoff3_0898_wifi_connect_count'].state
              - states['sensor.sonoff3_0898_rssi'].state
              - states['sensor.sonoff4_0851_mqtt_connect_count'].state
              - states['sensor.sonoff4_0851_wifi_connect_count'].state
              - states['sensor.sonoff4_0851_rssi'].state
              - states['sensor.sonoff1_2914_signal'].state
              - states['sensor.sonoff2_3110_signal'].state
              - states['sensor.sonoff5_1083_signal'].state
              - states['sensor.sonoff6_3719_signal'].state
              - states['sensor.nodemcu_lounge_signal'].state
              - states['sensor.nodemcu_bedroom_signal'].state
              - states['sensor.sonoff3_0898_signal'].state
              - states['sensor.sonoff4_0851_signal'].state
            entities:
              - sensor.sonoff1_2914_rssi
              - sensor.sonoff2_3110_rssi
              - sensor.sonoff5_1083_rssi
              - sensor.sonoff6_3719_rssi
              - sensor.nodemcu_lounge_rssi
              - sensor.nodemcu_bedroom_rssi
              - sensor.sonoff3_0898_rssi
              - sensor.sonoff4_0851_rssi
            card:
              type: 'custom:hui-entities-card'
              title: MQTT & Wifi Connections
              show_header_toggle: false
              entities:
                - entity: sensor.sonoff1_2914_rssi
                  name: "${'Coffee' + '\xa0'.repeat(16) + 'MQTT ' + vars[0] + '\xa0'.repeat(4) + 'WiFi ' + vars[1] + '\xa0'.repeat(3) + vars[24] + '\xa0' + 'dBm' + '\xa0'.repeat(3) + ( vars[2] >= 100 ? 'Excellent' : vars[2] >= 80 ? 'Good' : vars[2] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[2] >= 100 ? 'mdi:wifi' : vars[2] >= 80 ? 'mdi:wifi-strength-3' : vars[2] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.sonoff2_3110_rssi
                  name: "${'Toothbrush' + '\xa0'.repeat(7) + 'MQTT ' + vars[3] + '\xa0'.repeat(4) + 'WiFi ' + vars[4] + '\xa0'.repeat(3) + vars[25] + '\xa0' +  'dBm' + '\xa0'.repeat(3) + ( vars[5] >= 100 ? 'Excellent' : vars[5] >= 80 ? 'Good' : vars[5] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[5] >= 100 ? 'mdi:wifi' : vars[5] >= 80 ? 'mdi:wifi-strength-3' : vars[5] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.sonoff5_1083_rssi
                  name: "${'Garage' + '\xa0'.repeat(15) + 'MQTT ' + vars[6] + '\xa0'.repeat(4) + 'WiFi ' + vars[7] + '\xa0'.repeat(3) + vars[26] + '\xa0' +  'dBm' + '\xa0'.repeat(3) + ( vars[8] >= 100 ? 'Excellent' : vars[8] >= 80 ? 'Good' : vars[8] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[8] >= 100 ? 'mdi:wifi' : vars[8] >= 80 ? 'mdi:wifi-strength-3' : vars[8] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.sonoff6_3719_rssi
                  name: "${'Alarm' + '\xa0'.repeat(17) + 'MQTT ' + vars[9] + '\xa0'.repeat(4) + 'WiFi ' + vars[10] + '\xa0'.repeat(3) + vars[27] + '\xa0' +  'dBm' + '\xa0'.repeat(3) + ( vars[11] >= 100 ? 'Excellent' : vars[11] >= 80 ? 'Good' : vars[11] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[11] >= 100 ? 'mdi:wifi' : vars[11] >= 80 ? 'mdi:wifi-strength-3' : vars[11] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.nodemcu_lounge_rssi
                  name: "${'Weather' + '\xa0'.repeat(12) + 'MQTT ' + vars[12] + '\xa0'.repeat(4) + 'WiFi ' + vars[13] + '\xa0'.repeat(3) + vars[28] + '\xa0' +  'dBm' + '\xa0'.repeat(3) + ( vars[14] >= 100 ? 'Excellent' : vars[14] >= 80 ? 'Good' : vars[14] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[14] >= 100 ? 'mdi:wifi' : vars[14] >= 80 ? 'mdi:wifi-strength-3' : vars[14] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.nodemcu_bedroom_rssi
                  name: "${'Bedroom' + '\xa0'.repeat(10) + 'MQTT ' + vars[15] + '\xa0'.repeat(4) + 'WiFi ' + vars[16] + '\xa0'.repeat(3) + vars[29] + '\xa0' +  'dBm' + '\xa0'.repeat(3) + ( vars[17] >= 100 ? 'Excellent' : vars[17] >= 80 ? 'Good' : vars[17] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[17] >= 100 ? 'mdi:wifi' : vars[17] >= 80 ? 'mdi:wifi-strength-3' : vars[17] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.sonoff3_0898_rssi
                  name: "${'Office' + '\xa0'.repeat(16) + 'MQTT ' + vars[18] + '\xa0'.repeat(4) + 'WiFi ' + vars[19] + '\xa0'.repeat(3) + vars[30] + '\xa0' + 'dBm' + '\xa0'.repeat(3) + ( vars[20] >= 100 ? 'Excellent' : vars[20] >= 80 ? 'Good' : vars[20] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[20] >= 100 ? 'mdi:wifi' : vars[20] >= 80 ? 'mdi:wifi-strength-3' : vars[20] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.sonoff4_0851_rssi
                  name: "${'TV' + '\xa0'.repeat(21) + 'MQTT ' + vars[21] + '\xa0'.repeat(4) + 'WiFi ' + vars[22] + '\xa0'.repeat(3) + vars[31] + '\xa0' + 'dBm' + '\xa0'.repeat(3) + ( vars[23] >= 100 ? 'Excellent' : vars[23] >= 80 ? 'Good' : vars[23] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[23] >= 100 ? 'mdi:wifi' : vars[23] >= 80 ? 'mdi:wifi-strength-3' : vars[23] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"

Here is the new card…

Here is the config:

          - type: 'custom:config-template-card'
            variables:
              coffee: states['sensor.sonoff1_2914_rssi'].state
              toothbrush: states['sensor.sonoff2_3110_rssi'].state
              garage: states['sensor.sonoff5_1083_rssi'].state
              alarm: states['sensor.sonoff6_3719_rssi'].state
              weather: states['sensor.nodemcu_lounge_rssi'].state
              bedroom: states['sensor.nodemcu_bedroom_rssi'].state
              xcy: states['sensor.sonoff3_0898_rssi'].state
              tv: states['sensor.sonoff4_0851_rssi'].state
              coffeesignal: states['sensor.sonoff1_2914_signal'].state
              toothbrushsignal: states['sensor.sonoff2_3110_signal'].state
              garagesignal: states['sensor.sonoff5_1083_signal'].state
              alarmsignal: states['sensor.sonoff6_3719_signal'].state
              weathersignal: states['sensor.nodemcu_lounge_signal'].state
              bedroomsignal: states['sensor.nodemcu_bedroom_signal'].state
              xcysignal: states['sensor.sonoff3_0898_signal'].state
              tvsignal: states['sensor.sonoff4_0851_signal'].state
            entities:
              - sensor.sonoff1_2914_rssi
              - sensor.sonoff1_2914_signal
              - sensor.sonoff1_2914_wifi_connect_count
              - sensor.coffee_maker_firmware
              - sensor.coffee_maker_status
              - sensor.sonoff2_3110_rssi
              - sensor.sonoff2_3110_signal
              - sensor.sonoff2_3110_wifi_connect_count
              - sensor.toothbrush_firmware
              - sensor.toothbrush_status
              - sensor.sonoff5_1083_rssi
              - sensor.sonoff5_1083_signal
              - sensor.sonoff5_1083_wifi_connect_count
              - sensor.garage_door_firmware
              - sensor.garage_door_status
              - sensor.sonoff6_3719_rssi
              - sensor.sonoff6_3719_signal
              - sensor.sonoff6_3719_wifi_connect_count
              - sensor.alarm_firmware
              - sensor.alarm_status
              - sensor.nodemcu_lounge_rssi
              - sensor.nodemcu_lounge_signal
              - sensor.nodemcu_lounge_wifi_connect_count
              - sensor.nodemcu_lounge_firmware
              - sensor.nodemcu_lounge_status
              - sensor.nodemcu_bedroom_rssi
              - sensor.nodemcu_bedroom_signal
              - sensor.nodemcu_bedroom_wifi_connect_count
              - sensor.nodemcu_bedroom_firmware
              - sensor.nodemcu_bedroom_status
              - sensor.sonoff3_0898_rssi
              - sensor.sonoff3_0898_signal
              - sensor.sonoff3_0898_wifi_connect_count
              - sensor.tv_switch_firmware
              - sensor.tv_switch_status
              - sensor.sonoff4_0851_rssi
              - sensor.sonoff4_0851_signal
              - sensor.sonoff4_0851_wifi_connect_count
              - sensor.xcy_mini_pc_firmware
              - sensor.xcy_mini_pc_status
            card:
              type: 'custom:hui-entities-card'
              title: MQTT & Wifi Connections
              show_header_toggle: false
              entities:
                - entity: sensor.coffee_maker_firmware
                  type: 'custom:multiple-entity-row'
                  show_state: false
                  name: "${'Coffee' + '\xa0'.repeat(16) + ( coffee >= 100 ? 'Excellent' : coffee >= 80 ? 'Good' : coffee >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${coffee >= 100 ? 'mdi:wifi' : coffee >= 80 ? 'mdi:wifi-strength-3' : coffee >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                  entities:
                  - entity: sensor.coffee_maker_status
                    name: MQTT
                  - entity: sensor.sonoff1_2914_wifi_connect_count
                    name: WiFi
                  - entity: sensor.sonoff1_2914_signal
                    name: Signal
                  - entity: sensor.sonoff1_2914_rssi
                    name: RSSI
                - entity: sensor.toothbrush_firmware
                  type: 'custom:multiple-entity-row'
                  show_state: false
                  name: "${'Toothbrush' + '\xa0'.repeat(7) + ( toothbrush >= 100 ? 'Excellent' : toothbrush >= 80 ? 'Good' : toothbrush >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${toothbrush >= 100 ? 'mdi:wifi' : toothbrush >= 80 ? 'mdi:wifi-strength-3' : toothbrush >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                  entities:
                  - entity: sensor.toothbrush_status
                    name: MQTT
                  - entity: sensor.sonoff2_3110_wifi_connect_count
                    name: WiFi
                  - entity: sensor.sonoff2_3110_signal
                    name: Signal
                  - entity: sensor.sonoff2_3110_rssi
                    name: RSSI
                - entity: sensor.garage_door_firmware
                  type: 'custom:multiple-entity-row'
                  show_state: false
                  name: "${'Garage' + '\xa0'.repeat(15) + ( garage >= 100 ? 'Excellent' : garage >= 80 ? 'Good' : garage >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${garage >= 100 ? 'mdi:wifi' : garage >= 80 ? 'mdi:wifi-strength-3' : garage >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                  entities:
                  - entity: sensor.garage_door_status
                    name: MQTT
                  - entity: sensor.sonoff5_1083_wifi_connect_count
                    name: WiFi
                  - entity: sensor.sonoff5_1083_signal
                    name: Signal
                  - entity: sensor.sonoff5_1083_rssi
                    name: RSSI
                - entity: sensor.alarm_firmware
                  type: 'custom:multiple-entity-row'
                  show_state: false
                  name: "${'Alarm' + '\xa0'.repeat(17) + ( alarm >= 100 ? 'Excellent' : alarm >= 80 ? 'Good' : alarm >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${alarm >= 100 ? 'mdi:wifi' : alarm >= 80 ? 'mdi:wifi-strength-3' : alarm >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                  entities:
                  - entity: sensor.alarm_status
                    name: MQTT
                  - entity: sensor.sonoff6_3719_wifi_connect_count
                    name: WiFi
                  - entity: sensor.sonoff6_3719_signal
                    name: Signal
                  - entity: sensor.sonoff6_3719_rssi
                    name: RSSI
                - entity: sensor.nodemcu_lounge_firmware
                  type: 'custom:multiple-entity-row'
                  show_state: false
                  name: "${'Weather' + '\xa0'.repeat(12) + ( weather >= 100 ? 'Excellent' : weather >= 80 ? 'Good' : weather >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${weather >= 100 ? 'mdi:wifi' : weather >= 80 ? 'mdi:wifi-strength-3' : weather >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                  entities:
                  - entity: sensor.nodemcu_lounge_status
                    name: MQTT
                  - entity: sensor.nodemcu_lounge_wifi_connect_count
                    name: WiFi
                  - entity: sensor.nodemcu_lounge_signal
                    name: Signal
                  - entity: sensor.nodemcu_lounge_rssi
                    name: RSSI
                - entity: sensor.nodemcu_bedroom_firmware
                  type: 'custom:multiple-entity-row'
                  show_state: false
                  name: "${'Bedroom' + '\xa0'.repeat(10) + ( bedroom >= 100 ? 'Excellent' : bedroom >= 80 ? 'Good' : bedroom >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${bedroom >= 100 ? 'mdi:wifi' : bedroom >= 80 ? 'mdi:wifi-strength-3' : bedroom >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                  entities:
                  - entity: sensor.nodemcu_bedroom_status
                    name: MQTT
                  - entity: sensor.nodemcu_bedroom_wifi_connect_count
                    name: WiFi
                  - entity: sensor.nodemcu_bedroom_signal
                    name: Signal
                  - entity: sensor.nodemcu_bedroom_rssi
                    name: RSSI
                - entity: sensor.xcy_mini_pc_firmware
                  type: 'custom:multiple-entity-row'
                  show_state: false
                  name: "${'Office' + '\xa0'.repeat(16) + ( xcy >= 100 ? 'Excellent' : xcy >= 80 ? 'Good' : xcy >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${xcy >= 100 ? 'mdi:wifi' : xcy >= 80 ? 'mdi:wifi-strength-3' : xcy >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                  entities:
                  - entity: sensor.xcy_mini_pc_status
                    name: MQTT
                  - entity: sensor.sonoff3_0898_wifi_connect_count
                    name: WiFi
                  - entity: sensor.sonoff3_0898_signal
                    name: Signal
                  - entity: sensor.sonoff3_0898_rssi
                    name: RSSI
                - entity: sensor.tv_switch_firmware
                  type: 'custom:multiple-entity-row'
                  show_state: false
                  name: "${'TV' + '\xa0'.repeat(21) + ( tv >= 100 ? 'Excellent' : tv >= 80 ? 'Good' : tv >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${tv >= 100 ? 'mdi:wifi' : tv >= 80 ? 'mdi:wifi-strength-3' : tv >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                  entities:
                  - entity: sensor.tv_switch_status
                    name: MQTT
                  - entity: sensor.sonoff4_0851_wifi_connect_count
                    name: WiFi
                  - entity: sensor.sonoff4_0851_signal
                    name: Signal
                  - entity: sensor.sonoff4_0851_rssi
                    name: RSSI

I also started using named variables which wasn’t possible with the old card… but here is the genius of this approach…

If I click on say Coffee I get this:

even though I’m not showing the state it still shows in the state display…
But what if I click on MQTT? Well it brings up a different state card

Wifi? Uninteresting but:

Signal? yep

RSSI?? well of course…

This is WAY COOL and much better than I was hoping for!

Ildar_Gabdullin · April 13, 2021, 8:11am

Yes, this is a very convenient thing - but now we cannot use a "variable_x" to define a "variable_y" unfortunately - like we could use a "vars[x]" to define a "vars[y]" (Variables: use VARIABLE_1 to define VARIABLE_2 · Issue #47 · iantrich/config-template-card · GitHub). Sometimes it is needed…
For example, with using the old notation the code could be something like this:

variables:
  - '''sonoff5_1'''                           #0
  - '''sonoff5_2'''                           #1
  - '''sonoff5_3'''                           #2

  - '''_mqtt_connect_count'''                 #3
  - '''_wifi_connect_count'''                 #4
  - '''_rssi'''                               #5

  - 'states["sensor." + vars[0] + vars[3]]'   #6
  - 'states["sensor." + vars[0] + vars[4]]'   #7
  - 'states["sensor." + vars[0] + vars[5]]'   #8

  - 'states["sensor." + vars[1] + vars[3]]'   #9
  - 'states["sensor." + vars[1] + vars[4]]'   #10
  - 'states["sensor." + vars[1] + vars[5]]'   #11

  - 'states["sensor." + vars[2] + vars[3]]'   #12
  - 'states["sensor." + vars[2] + vars[4]]'   #13
  - 'states["sensor." + vars[2] + vars[5]]'   #14

entities:
  - '${vars[6].entity_id}'
  - '${vars[7].entity_id}'
  - '${vars[8].entity_id}'

  - '${vars[9].entity_id}'
  - '${vars[10].entity_id}'
  - '${vars[11].entity_id}'

  - '${vars[12].entity_id}'
  - '${vars[13].entity_id}'
  - '${vars[14].entity_id}'

But anyway that is a lot of repeating code.
So it could be better to use a decluttering card:

  decl_XXXXXXXXXXXXXX:
    card:
      type: 'custom:config-template-card'
      variables:
        - .............. [[SENSOR_XXXXXXXXXX]]
        - .............. [[SENSOR_YYYYYYYYYY]]
        - .............. [[SENSOR_ZZZZZZZZZZ]]
      entities:
        - '[[SENSOR_XXXXXXXXXX]]'
        - '[[SENSOR_YYYYYYYYYY]]'
        - '[[SENSOR_ZZZZZZZZZZ]]'
      row:
        type: 'custom:multiple-entity-row'
        entity: '[[SENSOR_XXXXXXXXXX]]'
        entities:
          - entity: '[[SENSOR_YYYYYYYYYY]]'
            ....
          - entity: '[[SENSOR_ZZZZZZZZZZ]]'
            ....
        name: .....
        unit: .....
        icon: .....
        toggle: false
        show_state: .....
        state_header: ''
        secondary_info: last-changed

How to use:

entities:
  - type: 'custom:decluttering-card'
    template: decl_XXXXXXXXXXXXXX
    variables:
      - SENSOR_XXXXXXXXXX: ..............
      - SENSOR_YYYYYYYYYY: ..............
      - SENSOR_ZZZZZZZZZZ: ..............
  - type: 'custom:decluttering-card'
    template: decl_XXXXXXXXXXXXXX
    variables:
      - SENSOR_XXXXXXXXXX: ..............
      - SENSOR_YYYYYYYYYY: ..............
      - SENSOR_ZZZZZZZZZZ: ..............
  - type: 'custom:decluttering-card'
    template: decl_XXXXXXXXXXXXXX
    variables:
      - SENSOR_XXXXXXXXXX: ..............
      - SENSOR_YYYYYYYYYY: ..............
      - SENSOR_ZZZZZZZZZZ: ..............
  - type: 'custom:decluttering-card'
    template: decl_XXXXXXXXXXXXXX
    variables:
      - SENSOR_XXXXXXXXXX: ..............
      - SENSOR_YYYYYYYYYY: ..............
      - SENSOR_ZZZZZZZZZZ: ..............

Regarding multiple-entity-row - you may use kind of “styles: width: 150px” to prevent these misalignment:

Regarding using spaces:

'Coffee' + '\xa0'.repeat(16)

This will look nice only in case of using a font with fixed width; for proportional fonts it will cause a misalignment:

You may display these “Fair, Excellent etc” words in the "secondary-info" like it is described here (and even colourize it by card-mod like it is described here):

type: 'custom:config-template-card'
entities:
  - sun.sun
card:
  type: entities
  entities:
    - type: 'custom:multiple-entity-row'
      entity: sun.sun
      entities:
        - entity: sun.sun
          name: xxx
          styles:
            width: 60px
        - entity: sun.sun
          name: xxx
          styles:
            width: 60px
      unit: ''
      icon: ''
      toggle: false
      show_state: false
      state_header: ''
      state_color: false
      secondary_info: '${states[''sun.sun''].state === "above_horizon" ? "Rise and shine" : "Sleep well"}'

Actually, I thought that you were already using this card - your first pic looks like multiple-entity-row…

DavidFW1960 · April 13, 2021, 8:34am

No it’s just an entities card.

Yes one of the issues I had is exactly that but I can’t make them form up in columns so open to suggestions for that.

Where would I put that? I see that issue so a solution would be welcome… can you supply an edit of one of my rows to demonstrate that?

I dont see any issue with the new variables… never used the old ones anyway and it doesnt seem to reduce the number required or make it readable anyway. I’m don’t see a point in switching to a decluttering card for this…

SeLLeRoNe · April 13, 2021, 8:50am

Sorry to jump in, just to comment one thing.

Without the decluttering card you’re replicating the same “line code” for each “device”, that’s the redundancy.

If you use the decluttering card, you’ll create a template for the “line” and then you’ll use a variable to pass the device name, which will be applied to the whole line.

So, you’ll have a big decluttering-card “template” and a small “view” for each entry.
If you check @Ildar_Gabdullin code youìll see that the " decl_XXXXXXXXXXXXXX:" your normal card (with all static config which would remain the same across devices) and then the entities card in the view will only call that newrly created template and pass the sensors name you need for that.

I would highly suggest to give it a try, I started to use it and I have to say it makes things way clearer.

DavidFW1960 · April 13, 2021, 8:55am

I will take a look at that. I remember thinking about it.

Ildar_Gabdullin · April 13, 2021, 8:59am

For displaying these “Excellent” etc words you may use 3 options:

Create a template sensor (not a good thing if you are going to use these words in one place only) and display it in a separate column.
Display these words in the "secondary-info" part (as I described above).
Use this method to create something like this:

The idea is to display ANYTHING instead of some state.
Look - this code is under "config-template-card" - but this does not need it since the templating is implemented by card-mod:

type: entities
entities:
  - type: 'custom:multiple-entity-row'
    style: |
      :host .entities-row div.entity:nth-child(1) div::before {
        color: orange;
        content: {%if is_state('sun.sun','above_horizon') -%} "Rise and shine\A" {%- else -%} "Sleep well\A" {%- endif %};
        line-height: var(--mdc-typography-body1-line-height, 1.5rem);
      }
      :host .entities-row div.entity:nth-child(1) div {
        color: transparent;
        line-height: 0px;
      }
    entity: sun.sun
    entities:
      - entity: sun.sun
        name: xxx
        styles:
          width: 60px
      - entity: sun.sun
        name: xxx
        styles:
          width: 60px
    unit: ''
    icon: ''
    toggle: false
    show_state: false
    state_header: ''
    state_color: false

Switching to decluttering is not related with “how to declare & use variables” - it is just about:

Reduce number of lines.
In case of need to change something - change it in the decluttering template only (the basis of using “function”, “procedure” etc in Programming).

I have already used it in the examples above, please check these lines:

        - entity: sun.sun
          name: xxx
          styles:
            width: 60px

Stefos · April 13, 2021, 9:10am

Ok guys I’m officially annoyed of not making it work!! So, i Have a card like the one in the picture at the end. I would like to change the “Activity” with the name of the work out that comes from strava… How can this be done?
The last one i tried was the code below and i got the “no card or row or element defined”… Any help?

title: Strava
icon: mdi:heart-pulse
cards:
  - type: "custom:config-template-card"
    title: "${states('sensor.strava_0_0')}"
    entities:
      - type: attribute
        entity: sensor.strava_0_0
        attribute: friendly_name
        name: Date
        icon: mdi:calendar-clock
      - entity: sensor.strava_0_1
        name: Duration

DavidFW1960 · April 13, 2021, 9:15am

“${states[‘sensor.strava_0_0’].state}”`

Stefos · April 13, 2021, 9:28am

I have tried that as well but the problem as i said is that i get the “No card or row or element defined” error…

Ildar_Gabdullin · April 13, 2021, 9:51am

When looking at this:

title: Strava
icon: mdi:heart-pulse
cards:

I do not see any "type: " definition here.

Stefos · April 13, 2021, 10:01am

But should i define the “custom:config-template-card” there? The other yaml files i have i’ve never set the type there… Also, I tried to put define the type there but no luck

Ildar_Gabdullin · April 13, 2021, 10:10am

The whole code is wrong.
If it should be Entities card inside the "config-template-card" then it must be kind of this:

type: 'custom:config-template-card'
entities:
  - ..........
card:
  type: entities
  title: .....
  entities:
    - ....

Stefos · April 13, 2021, 10:15am

With the code below i get “No card type defined”

title: Garmin
icon: mdi:heart-pulse
type: "custom:config-template-card"
entities:
  - entity: sensor.strava_0_1
card:
  - type: entities
    title: "${states['sensor.strava_0_0'].state}"
    entities:
      - type: attribute
        entity: sensor.strava_0_0
        attribute: friendly_name
        name: Date
        icon: mdi:calendar-clock
      - entity: sensor.strava_0_1
        name: Duration```

Ildar_Gabdullin · April 13, 2021, 10:19am

At least replace this:

card:
  - type: entities

with this:

card:
  type: entities

Stefos · April 13, 2021, 10:23am

Yeah I saw it after i posted it and i was trying to fix it. Finally it works… Thanks a lot!!

Ildar_Gabdullin · April 13, 2021, 11:10am

@DavidFW1960, sorry for direct mentioning, you wanted to use "config-template-card" for:

Displaying the “Excellent, Fair” etc words - may be done by "secondary_info" or "card-mod" (see examples above).
Changing an icon dependingly on state:

may by done by specifying an icon ("icon_template") in config (if possible);
may be done by using "Custom UI" (never used by myself so far, I am still learning, but I know that it may be used for this);
also check about a ready "device_class" for this ("signal_strength" may be? Update: seems NO).

Means - you may not use "config-template-card" at all.

DavidFW1960 · April 13, 2021, 11:52am

Yep I’ll try that tomorrow as well as a few of your other suggestions.

Deprecated so not doing that…

Maybe… I’ll need to investigate that. The sensor is an MQTT sensor… I’ll look into that.

No problem. I appreciate your help and ideas. I will respond after I have a go at it in the morning. Bed time now.

Ildar_Gabdullin · April 13, 2021, 12:42pm

Oh. I did not know that ))). Heard a lot about using it, planned it - and now it seems to be useless…

DavidFW1960 · April 14, 2021, 1:43am

Yeah so I can’t get this right.

                - entity: sensor.coffee_maker_firmware
                  type: 'custom:multiple-entity-row'
                  show_state: false
                  name: "${'Coffee'}"
                  styles:
                    width: 66%
                  icon: "${coffee >= 100 ? 'mdi:wifi' : coffee >= 80 ? 'mdi:wifi-strength-3' : coffee >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                  entities:
                  - entity: sensor.coffee_maker_status
                    name: MQTT
                    styles:
                      width: 15%
                  - entity: sensor.sonoff1_2914_wifi_connect_count
                    name: WiFi
                    styles:
                      width: 15%
                  - entity: sensor.sonoff1_2914_signal
                    name: Signal
                    styles:
                      width: 35%
                  - entity: sensor.sonoff1_2914_rssi
                    name: RSSI
                    styles:
                      width: 35%
                  secondary_info: "${( coffee >= 100 ? 'Excellent' : coffee >= 80 ? 'Good' : coffee >= 60 ? 'Fair' : 'Weak' )}"

Looks like this:

With no styling it looks like the toothbrush one.
I’m also mindful of how it looks on a mobile device.
I’d like to use percentages so it doesn’t screw up the mobile device as well.

Ideally I’d like all the columns to align with each other whereas right now if the RSSI is 100% the get thrown out of alignment and it right fills the whole row:

Tried setting

                  name: "${'Alarm'}"
                  styles:
                    width: 150px

and also

                  name: "${'Alarm'}"
                  styles:
                    width: 35%

but they just look the same.

Finally the device_class is signal_strength and the icon doesn’t change so I think I need to stick with the template. Just saw your edit lol!!

Anyway so my only remaining issue is aligning the text in the right 4 columns…

Ildar_Gabdullin · April 14, 2021, 7:06am

35px
In case of using percentage you get a relative size - relative to the initial one which is different for all entities.

As I understood HA cannot define which icon to use since levels depend on type of connectivity.