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 
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 
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
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:
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
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)
Here is Option 2 with the columns re-organised (Using)
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
And if anything, you helped me put my hand on a nice looking card 
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 
Iāve tested you N/A option and works great! Thanks for that!
No biggy, I can simply revert
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)
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:
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ā¦