📝 100% Templatable Lovelace Configurations

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: Saved diff pdcHCnnA - Diff Checker

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

Yep I agree, but theoritically those entities are coming from an Integration so they should always have the same format across devices :slight_smile:

I’ve tested you N/A option and works great! Thanks for that!

No biggy, I can simply revert :slight_smile:

I know I can use templates but I’m trying to see if I can manage to have things working without having to create custom entities to reach a goal, so that others whom read my config don’t go “too crazy” (GitHub - SeLLeRoNe/HA-Config: Home Assistant Configuration If interested)

:slight_smile:

Well that was where this all started and a requirement for what I was looking for.
Browser-mod?? Yet another custom-card… pass… that was the main reason I didn’t want to use the decluttering card!! I already had to retire a card I was using due to a card becoming unsupported so I am sensitive to adding more! But Romrider is very active and I do use other cards of his so low risk. Same with Thomas.

Well I could but for no real benefit really. I could also rename the firmware and status sensor from coffee_maker to sonoff1_2914 but the benefit would outweigh the gain/pain…

Well appreciated anyway… You guys are both outstanding.

Same… I do try to avoid creating more sensors which is one of the benefits of this template card… attributes become more accessible without having to create sensors from them.

David, as I told you in one of my first posts, I know nothing about MQTT & Tasmota.
In one of your first examples I saw these entities:

              - sensor.sonoff1_2914_rssi
              - sensor.sonoff1_2914_signal
              - sensor.sonoff1_2914_wifi_connect_count
              - sensor.coffee_maker_firmware
              - sensor.coffee_maker_status

Based on these entities I simulated your case using these test sensors (for two devices - "test_david_1" & "test_david_2"):

input_number:

  test_david_1_device:
    min: 0
    max: 150
    step: 1
    mode: slider

  test_david_1_device_status:
    min: 0
    max: 10
    step: 1
    mode: slider

  test_david_1_wifi_connect_count:
    min: 0
    max: 10
    step: 1
    mode: slider

  test_david_1_signal:
    min: -100
    max: 0
    step: 1
    mode: slider

  test_david_1_rssi:
    min: 0
    max: 100
    step: 1
    mode: slider

###############################

sensor:
  - platform: template
    sensors:

      test_david_1_device:
        value_template: "{% set INPUT_NUMBER_VALUE = 'input_number.test_david_1_device' -%}
                        {{ states(INPUT_NUMBER_VALUE)|int }}"

      test_david_1_device_status:
        value_template: "{% set INPUT_NUMBER_VALUE = 'input_number.test_david_1_device_status' -%}
                        {{ states(INPUT_NUMBER_VALUE)|int }}"

      test_david_1_wifi_connect_count:
        value_template: "{% set INPUT_NUMBER_VALUE = 'input_number.test_david_1_wifi_connect_count' -%}
                        {{ states(INPUT_NUMBER_VALUE)|int }}"

      test_david_1_signal:
        value_template: "{% set INPUT_NUMBER_VALUE = 'input_number.test_david_1_signal' -%}
                        {{ states(INPUT_NUMBER_VALUE)|int }}"
        unit_of_measurement: "dB"

      test_david_1_rssi:
        value_template: "{% set INPUT_NUMBER_VALUE = 'input_number.test_david_1_rssi' -%}
                        {{ states(INPUT_NUMBER_VALUE)|int }}"
        unit_of_measurement: "%"

Then played with values of "input_number" entities while testing that "multiple-entity-row" with no idea about actual meaning of these values:
image

I hope that one day I will be ready to use this nice card which we created together.
By this moment I hope to understand which entities are required.

I do agree.Of course, in some cases I need to create template sensors instead of using attributes anyway - basically for creating graphs.

1 Like

No criticism implied or intended by me… I hope you didn’t think I was unhappy…