šŸ“ 100% Templatable Lovelace Configurations

Like this:

decluttering_templates:
  decl_test_david:
    card:
      type: 'custom:config-template-card'
      .................
views:
  - title: '-----'
    path: '-----'
    badges: []
    cards:
      - type: entities
        entities:
          - entity: sensor.test_timestamp
            format: total
            ...................
1 Like

Also, David, if you like, you may display "last-changed" for every item:

Thanks but itā€™s not really useful for my use hereā€¦ the signal and RSSI jump around like a drunken sailorā€¦

I have actually a question hereā€¦ Where (or how) did you get that _firmware entity?
Iā€™ve checked my Tasmota Integration and I donā€™t have such entity (not even in the disabled list).

Iā€™m trying to replicate your same config (the goal was to provide you an even more shorter amount of code), but I am struggling to find that piece (not really important, but now Iā€™m curious :smiley: )

Thanks

Hahaha! Itā€™s a hack. I think itā€™s STATUS2 and I publish that to the group topic and then use a mqtt sensor with json_attributes to read it it. Itā€™s an upper PITA compared to the old MQTT discovery method. Check my github for the githun_sensors package. home-assistant/github_version_sensors.yaml at 81d01e00944884a724ef5deaa5af0a2a0f41c056 Ā· DavidFW1960/home-assistant Ā· GitHub Line 111ā€¦

Ah! Thatā€™s what I thought!

Thanks!

I do a status 11 as well because that returns interesting info as wellā€¦ even though the state Iā€™m getting is the same as one of the ones provided by the integration - but if I use that then when I click on the row I get all the other info as well in the pop up as I showed way up aboveā€¦ (Iā€™m only saying this because itā€™s not immediately obvious why Iā€™m doing that so if you suggest a new config just remember my end goal is the information in the pop ups as well as the formatting of the rssi etc)

So, basically what Iā€™m trying to do to reduce the code is this:
decluttering_card:

tasmota_info:
  card:
    type: 'custom:config-template-card'
    variables:
      - varDEVICE: parseFloat(states['sensor.[[device]]_rssi'].state)
    entities:
      - sensor.[[device]]_mqtt_connect_count
      - sensor.[[device]]_wifi_connect_count
      - sensor.[[device]]_signal
      - sensor.[[device]]_rssi
    card:
      type: 'custom:mod-card'
      style:
        multiple-entity-row:
          $:
            hui-generic-entity-row: |
              .entities-row div.entity:nth-child(1) div::before {
                {% if states(sensor.[[device]]_rssi)|int >= 100 %}
                color: green;
                content: "Excellent\A";
                {% elif states(sensor.[[device]]_rssi)|int >= 80 %}
                color: orange;
                content: "Good\A";
                {% elif states(sensor.[[device]]_rssi)|int >= 60 %}
                color: red;
                content: "Fair\A";
                {% else %}
                color: magenta;
                content: "Weak\A";
                {% endif %}
                line-height: var(--mdc-typography-body1-line-height, 1.5rem);
                text-align: center;
                white-space: pre;
              }
              .entities-row div.entity:nth-child(1) div {
                color: transparent;
                line-height: 0px;
              }
      card:
        type: 'custom:multiple-entity-row'
        entity: sensor.time
        show_state: false
        name: '[[device_name]]'
        icon: >-
          ${varDEVICE >= 100 ? "mdi:wifi" : (varDEVICE >= 80 ?
          "mdi:wifi-strength-3" : (varDEVICE >= 60 ? "mdi:wifi-strength-2" :
          "mdi:wifi-strength-1")) }
        secondary_info: last-changed
        entities:
          - entity: sensor.[[device]]_rssi
            name: Quality
            styles:
              width: 55px
          - entity: sensor.[[device]]_mqtt_connect_count
            name: MQTT
            styles:
              width: 23px
          - entity: sensor.[[device]]_wifi_connect_count
            name: WiFi
            styles:
              width: 23px
          - entity: sensor.[[device]]_signal
            name: Signal
            styles:
              width: 48px
          - entity: sensor.[[device]]_rssi
            name: RSSI
            styles:
              width: 38px

Entity code:

  - type: 'custom:decluttering-card'
    template: tasmota_info
    variables:
      - device: studio_desk_andrea_lamp
      - device_name: Lamp

So, the idea is that you provide the device and itā€™s name, and thatā€™s it, the rest is in the template so that you really need just to add 2 things for each item you want to be visualized.

Right now tho, it is not yet working.
Iā€™m pretty sure it should be possible because I use this on other templates, maybe @Ildar_Gabdullin spot something I did wrong?

Thatā€™s very nice indeed, would be even better if HA expose those two entities and related info automatically :stuck_out_tongue:

Ok, got it working! @DavidFW1960

Decluttering template:

tasmota_info:
  card:
    type: 'custom:config-template-card'
    variables:
      varDEVICE: 'parseFloat(states[''sensor.[[device]]_rssi''].state)'
    entities:
      - 'sensor.[[device]]_rssi'
      - 'sensor.[[device]]_signal'
      - 'sensor.[[device]]_mqtt_connect_count'
      - 'sensor.[[device]]_wifi_connect_count'
    card:
      type: 'custom:mod-card'
      style:
        multiple-entity-row:
          $:
            hui-generic-entity-row: |
              .entities-row div.entity:nth-child(1) div::before {
                {% if states('sensor.[[device]]_rssi')|int >= 100 %}
                color: green;
                content: "Excellent\A";
                {% elif states('sensor.[[device]]_rssi')|int >= 80 %}
                color: orange;
                content: "Good\A";
                {% elif states('sensor.[[device]]_rssi')|int >= 60 %}
                color: red;
                content: "Fair\A";
                {% else %}
                color: magenta;
                content: "Weak\A";
                {% endif %}
                line-height: var(--mdc-typography-body1-line-height, 1.5rem);
                text-align: center;
                white-space: pre;
              }
              .entities-row div.entity:nth-child(1) div {
                color: transparent;
                line-height: 0px;
              }
      card:
        type: 'custom:multiple-entity-row'
        entity: sensor.[[device]]_rssi
        show_state: false
        name: '[[device_name]]'
        icon: >-
          ${varDEVICE >= 100 ? "mdi:wifi-strength-4" : (varDEVICE >= 80 ?
          "mdi:wifi-strength-3" : (varDEVICE >= 60 ? "mdi:wifi-strength-2" :
          "mdi:wifi-strength-1")) }
        secondary_info: last-changed
        entities:
          - entity: sensor.[[device]]_rssi
            name: Quality
            styles:
              width: 55px
          - entity: sensor.[[device]]_mqtt_connect_count
            name: MQTT
            styles:
              width: 23px
          - entity: sensor.[[device]]_wifi_connect_count
            name: WiFi
            styles:
              width: 23px
          - entity: sensor.[[device]]_signal
            name: Signal
            styles:
              width: 48px
          - entity: sensor.[[device]]_rssi
            name: RSSI
            styles:
              width: 38px

Entitiy card:

  - type: entities
    entities:
      - type: 'custom:decluttering-card'
        template: tasmota_info
        variables:
          - device: studio_desk_andrea_lamp
          - device_name: Lamp Andrea
      - type: 'custom:decluttering-card'
        template: tasmota_info
        variables:
          - device: studio_desk_sonia_lamp
          - device_name: Lamp Sonia

Outcome:

Please note, I also changed ā€œmdi:wifiā€ to ā€œmdi:wifi-strength-4ā€ so that the icon always use the same format, it looks better that way in my own opinion, feel free to revert it if you prefer the other :slight_smile:

There is only 1 thing that I can see it might need to be improved which is the ā€œUnavailableā€ handling, so that if something is Unavailable it shows N/A instead of that long text :slight_smile:

I like this too.

Usually I do this kind of decluttering only if I am absolutely sure that names of these auto-generated entities will be always in the same format.

Could be done by using template sensor in Config.

OK, these things may be done:
image

  decl_test_david_4:
    card:
      type: 'custom:config-template-card'
      variables:
        varDEVICE: 'parseFloat(states[''sensor.[[DEVICE]]_rssi''].state)'
      entities:
        - 'sensor.[[DEVICE]]_rssi'
        - 'sensor.[[DEVICE]]_signal'
        - 'sensor.[[DEVICE]]_mqtt_connect_count'
        - 'sensor.[[DEVICE]]_wifi_connect_count'
      card:
        type: 'custom:mod-card'
        style:
          multiple-entity-row:
            $:
              hui-generic-entity-row: |
                .entities-row div.entity:nth-child(1) div::before {
                  {% if states('sensor.[[DEVICE]]_rssi')|int >= 100 %}
                  color: green;
                  content: "Excellent\A";
                  {% elif states('sensor.[[DEVICE]]_rssi')|int >= 80 %}
                  color: orange;
                  content: "Good\A";
                  {% elif states('sensor.[[DEVICE]]_rssi')|int >= 60 %}
                  color: red;
                  content: "Fair\A";
                  {% elif states('sensor.[[DEVICE]]_rssi') in ['unavailable','unknown'] %}
                  color: brown;
                  content: "N/A\A";
                  {% else %}
                  color: magenta;
                  content: "Weak\A";
                  {% endif %}
                  line-height: var(--mdc-typography-body1-line-height, 1.5rem);
                  text-align: center;
                  white-space: pre;
                }
                .entities-row div.entity:nth-child(1) div {
                  color: transparent;
                  line-height: 0px;
                }
                .entities-row div.entity:nth-child(2) div::before {
                  {% if states('sensor.[[DEVICE]]_mqtt_connect_count') in ['unavailable','unknown'] %}
                  color: brown;
                  content: "N/A\A";
                  line-height: var(--mdc-typography-body1-line-height, 1.5rem);
                  {% endif %}
                }
                .entities-row div.entity:nth-child(2) div {
                  {% if states('sensor.[[DEVICE]]_mqtt_connect_count') in ['unavailable','unknown'] %}
                  color: transparent;
                  line-height: 0px;
                  {% endif %}
                }
                .entities-row div.entity:nth-child(3) div::before {
                  {% if states('sensor.[[DEVICE]]_wifi_connect_count') in ['unavailable','unknown'] %}
                  color: brown;
                  content: "N/A\A";
                  line-height: var(--mdc-typography-body1-line-height, 1.5rem);
                  {% endif %}
                }
                .entities-row div.entity:nth-child(3) div {
                  {% if states('sensor.[[DEVICE]]_wifi_connect_count') in ['unavailable','unknown'] %}
                  color: transparent;
                  line-height: 0px;
                  {% endif %}
                }
                .entities-row div.entity:nth-child(4) div::before {
                  {% if states('sensor.[[DEVICE]]_signal') in ['unavailable','unknown'] %}
                  color: brown;
                  content: "N/A\A";
                  line-height: var(--mdc-typography-body1-line-height, 1.5rem);
                  {% endif %}
                }
                .entities-row div.entity:nth-child(4) div {
                  {% if states('sensor.[[DEVICE]]_signal') in ['unavailable','unknown'] %}
                  color: transparent;
                  line-height: 0px;
                  {% endif %}
                }
                .entities-row div.entity:nth-child(5) div::before {
                  {% if states('sensor.[[DEVICE]]_rssi') in ['unavailable','unknown'] %}
                  color: brown;
                  content: "N/A\A";
                  line-height: var(--mdc-typography-body1-line-height, 1.5rem);
                  {% endif %}
                }
                .entities-row div.entity:nth-child(5) div {
                  {% if states('sensor.[[DEVICE]]_rssi') in ['unavailable','unknown'] %}
                  color: transparent;
                  line-height: 0px;
                  {% endif %}
                }
                .entities-row {
                  justify-content: flex-start;
                  align-items: unset;
                }
        card:
          type: 'custom:multiple-entity-row'
          entity: 'sensor.[[DEVICE]]_rssi'
          show_state: false
          name: '[[DEVICE_NAME]]'
          icon: >-
            ${varDEVICE >= 100 ? "mdi:wifi-strength-4" : (varDEVICE >= 80 ?
            "mdi:wifi-strength-3" : (varDEVICE >= 60 ? "mdi:wifi-strength-2" :
            "mdi:wifi-strength-1")) }
          entities:
            - entity: 'sensor.[[DEVICE]]_rssi'
              name: Quality
              styles:
                width: 55px
            - entity: 'sensor.[[DEVICE]]_mqtt_connect_count'
              name: MQTT
              styles:
                width: 23px
            - entity: 'sensor.[[DEVICE]]_wifi_connect_count'
              name: WiFi
              styles:
                width: 23px
            - entity: 'sensor.[[DEVICE]]_signal'
              name: Signal
              styles:
                width: 48px
            - entity: 'sensor.[[DEVICE]]_rssi'
              name: RSSI
              styles:
                width: 38px

BUT - once again I propose you to use template sensors in the Config.
Otherwise you have to use a lot of CSS tricks & a lot of code - not sure it is really worth it.

Also, there is one thing here: using that "::before" etc method anyway causes a little horizontal misalignment. It is a little but it is there. So, that could be a nice trick but so far I do not recommend it.

Yeah I donā€™t like thatā€¦ Iā€™d actually prefer all the icons to use the wifi style with lines instead of fill. Iā€™m going to move the quality to be next to the RSSI as well instead of first column.
Will have a go in a bit and show result and code.

Ok itā€™s good BUT none of them are bringing up the state cards like in this post šŸ“ 100% Templatable Lovelace Configurations - #464 by DavidFW1960

David, although your answer was not addressed to me, anyway I wonder - what do you mean ?
Are you talking about ā€œmore-infoā€ cards when clicking items?
When using my last template (as well as my first ones), that ā€œmore-infoā€ pop-ups as supposed.

Yeah your ones work perfectlyā€¦ itā€™s Andreaā€™s ones that donā€™t

Strange, the differences seem to not affect this: Untitled Diff - Diffchecker

The sensor_device_firmware and sensor_device_status are what provides the full info and they are both missing

OK I got it working.
Here is what Option 1 looks like (Not using this)
image
Here is Option 2 with the columns re-organised (Using)
image

Templates:

decluttering_templates:
  decl_sonoff1:
    card:
      type: 'custom:config-template-card'
      variables:
        varDEVICE: 'parseFloat(states[''sensor.[[device]]_rssi''].state)'
      entities:
        - 'sensor.[[device]]_rssi'
        - 'sensor.[[device]]_signal'
        - 'sensor.[[device]]_mqtt_connect_count'
        - 'sensor.[[device]]_wifi_connect_count'
        - 'sensor.[[device_status]]_status'
        - 'sensor.[[device_status]]_firmware'
      card:
        type: 'custom:mod-card'
        style:
          multiple-entity-row:
            $:
              hui-generic-entity-row:
                $: |
                  .info.pointer .secondary {
                    {% if states('sensor.[[device]]_rssi')|int >= 100 %}
                    color: green;
                    {% elif states('sensor.[[device]]_rssi')|int >= 80 %}
                    color: orange;
                    {% elif states('sensor.[[device]]_rssi')|int >= 60 %}
                    color: red;
                    {% else %}
                    color: magenta;
                    {% endif %}
                  }
        card:
          type: 'custom:multiple-entity-row'
          entity: sensor.[[device_status]]_firmware
          show_state: false
          name: '[[device_name]]'
          icon: >-
            ${varDEVICE >= 100 ? "mdi:wifi" : (varDEVICE >= 80 ?
            "mdi:wifi-strength-3" : (varDEVICE >= 60 ? "mdi:wifi-strength-2" :
            "mdi:wifi-strength-1")) }
          secondary_info: >-
            ${ varDEVICE >= 100 ? "Excellent" : (varDEVICE >= 80 ? "Good" :
            (varDEVICE >= 60 ? "Fair" : "Weak"))}
          entities:
            - entity: sensor.[[device_status]]_status
              name: MQTT
              styles:
                width: 23px
            - entity: sensor.[[device]]_wifi_connect_count
              name: WiFi
              styles:
                width: 23px
            - entity: sensor.[[device]]_signal
              name: Signal
              styles:
                width: 48px
            - entity: sensor.[[device]]_rssi
              name: RSSI
              styles:
                width: 38px
  decl_sonoff2:
    card:
      type: 'custom:config-template-card'
      variables:
        varDEVICE: 'parseFloat(states[''sensor.[[device]]_rssi''].state)'
      entities:
        - 'sensor.[[device]]_rssi'
        - 'sensor.[[device]]_signal'
        - 'sensor.[[device]]_mqtt_connect_count'
        - 'sensor.[[device]]_wifi_connect_count'
        - 'sensor.[[device_status]]_status'
        - 'sensor.[[device_status]]_firmware'
      card:
        type: 'custom:mod-card'
        style:
          multiple-entity-row:
            $:
              hui-generic-entity-row: |
                .entities-row div.entity:nth-child(4) div::before {
                  {% if states('sensor.[[device]]_rssi')|int >= 100 %}
                  color: green;
                  content: "Excellent\A";
                  {% elif states('sensor.[[device]]_rssi')|int >= 80 %}
                  color: orange;
                  content: "Good\A";
                  {% elif states('sensor.[[device]]_rssi')|int >= 60 %}
                  color: red;
                  content: "Fair\A";
                  {% else %}
                  color: magenta;
                  content: "Weak\A";
                  {% endif %}
                  line-height: var(--mdc-typography-body1-line-height, 1.5rem);
                  text-align: center;
                  white-space: pre;
                }
                .entities-row div.entity:nth-child(4) div {
                  color: transparent;
                  line-height: 0px;
                }
        card:
          type: 'custom:multiple-entity-row'
          entity: sensor.[[device_status]]_firmware
          show_state: false
          name: '[[device_name]]'
          icon: >-
            ${varDEVICE >= 100 ? "mdi:wifi" : (varDEVICE >= 80 ?
            "mdi:wifi-strength-3" : (varDEVICE >= 60 ? "mdi:wifi-strength-2" :
            "mdi:wifi-strength-1")) }
#          secondary_info: last-changed
          entities:
            - entity: sensor.[[device_status]]_status
              name: MQTT
              styles:
                width: 23px
            - entity: sensor.[[device]]_wifi_connect_count
              name: WiFi
              styles:
                width: 23px
            - entity: sensor.[[device]]_signal
              name: Signal
              styles:
                width: 48px
            - entity: sensor.[[device]]_rssi
              name: Quality
              styles:
                width: 55px
            - entity: sensor.[[device]]_rssi
              name: RSSI
              styles:
                width: 38px

Card:

          - type: entities
            title: MQTT & Wifi Connections
            show_header_toggle: false
            entities:
              - type: 'custom:decluttering-card'
                template: decl_sonoff2
                variables:
                  - device: sonoff1_2914
                  - device_name: Coffee
                  - device_status: coffee_maker
              - type: 'custom:decluttering-card'
                template: decl_sonoff2
                variables:
                  - device: sonoff2_3110
                  - device_name: Toothbrush
                  - device_status: toothbrush
              - type: 'custom:decluttering-card'
                template: decl_sonoff2
                variables:
                  - device: sonoff5_1083
                  - device_name: Garage
                  - device_status: garage_door
              - type: 'custom:decluttering-card'
                template: decl_sonoff2
                variables:
                  - device: sonoff6_3719
                  - device_name: Alarm
                  - device_status: alarm
              - type: 'custom:decluttering-card'
                template: decl_sonoff2
                variables:
                  - device: nodemcu_lounge
                  - device_name: Weather
                  - device_status: nodemcu_lounge
              - type: 'custom:decluttering-card'
                template: decl_sonoff2
                variables:
                  - device: nodemcu_bedroom
                  - device_name: Bedroom
                  - device_status: nodemcu_bedroom
              - type: 'custom:decluttering-card'
                template: decl_sonoff2
                variables:
                  - device: sonoff3_0898
                  - device_name: Office
                  - device_status: xcy_mini_pc
              - type: 'custom:decluttering-card'
                template: decl_sonoff2
                variables:
                  - device: sonoff4_0851
                  - device_name: TV
                  - device_status: tv_switch

I added 2 entities based on device_status to the template and added device_status to the card which accesses the status and firmware entities so I can show them as more-info when tapped.

Side Note: Looks like crap on my ipad in Landscape mode but is ok in portrait mode. Just not enough pixels in landscape with 3 columns. This is portrait:


This is Landscape:

I had a bit of a play with the widths but it didnā€™t seem to help much. I think I can just live with this.

BIG THANKS TO @Ildar_Gabdullin and @SeLLeRoNe for all of this. This was no small task and you both went above and beyond so I hope I can help you guys one day as well.

3 Likes

Also just so you know I have a script running with an automation every 10 minutes to publish the status11 command otherwise it doesnā€™t seem to updateā€¦ all the tasmota integration sensors do of course by themselvesā€¦

Yes sorry I didnā€™t integrate that entity but usually I prefer to drop the ā€œmore-infoā€ so I wasnā€™t checking it, the idea would be to maybe use browser-mod in the future to open a custom popup with pre-defined info.

Beside, I did a really small part, all the credit is absolutely for @Ildar_Gabdullin here :slight_smile:
And if anything, you helped me put my hand on a nice looking card :smiley:

If I may suggest one thing, Iā€™m not sure why you have device and device_status, wouldnā€™t be easier to rename the sonoff1_2914 into coffee_maker from the integration page so that you donā€™t have 2 different name for the same thing?

1 Like