Here 2 templates:
- “Excellent” etc in
"secondary_info". - In a separate column.
decluttering_templates:
decl_test_david:
card:
type: 'custom:config-template-card'
variables:
varDEVICE: 'parseFloat(states[''[[SENSOR_DEVICE]]''].state)'
entities:
- '[[SENSOR_DEVICE]]'
- '[[VALUE_DEVICE_NAME]]'
- '[[SENSOR_DEVICE_STATUS]]'
- '[[SENSOR_DEVICE_WIFI_CONNECT_COUNT]]'
- '[[SENSOR_DEVICE_SIGNAL]]'
- '[[SENSOR_DEVICE_RSSI]]'
card:
type: 'custom:mod-card'
style:
multiple-entity-row:
$:
hui-generic-entity-row:
$: |
.info.pointer .secondary {
{% if states('[[SENSOR_DEVICE]]')|int >= 100 %}
color: green;
{% elif states('[[SENSOR_DEVICE]]')|int >= 80 %}
color: orange;
{% elif states('[[SENSOR_DEVICE]]')|int >= 60 %}
color: red;
{% else %}
color: magenta;
{% endif %}
}
card:
type: 'custom:multiple-entity-row'
entity: '[[SENSOR_DEVICE]]'
show_state: false
name: '[[VALUE_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]]'
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_test_david_2:
card:
type: 'custom:config-template-card'
variables:
varDEVICE: 'parseFloat(states[''[[SENSOR_DEVICE]]''].state)'
entities:
- '[[SENSOR_DEVICE]]'
- '[[VALUE_DEVICE_NAME]]'
- '[[SENSOR_DEVICE_STATUS]]'
- '[[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]]')|int >= 100 %}
color: green;
content: "Excellent\A";
{% elif states('[[SENSOR_DEVICE]]')|int >= 80 %}
color: orange;
content: "Good\A";
{% elif states('[[SENSOR_DEVICE]]')|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]]'
show_state: false
name: '[[VALUE_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]]'
name: Quality
styles:
width: 55px
- entity: '[[SENSOR_DEVICE_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
Both templates use the "config-template-card":
- For displaying an icon dependingly on the state.
- For displaying those “Excellent” etc words in the
"secondary-info"section (the 1st template).
Alternatively you may change the icon in the Config in an "icon_template" section (if possible).
How to use the templates:
type: entities
entities:
- type: 'custom:decluttering-card'
template: decl_test_david
variables:
- SENSOR_DEVICE: sensor.test_david_1_device
- VALUE_DEVICE_NAME: Coffee
- SENSOR_DEVICE_STATUS: sensor.test_david_1_device_status
- SENSOR_DEVICE_WIFI_CONNECT_COUNT: sensor.test_david_1_wifi_connect_count
- SENSOR_DEVICE_SIGNAL: sensor.test_david_1_signal
- SENSOR_DEVICE_RSSI: sensor.test_david_1_rssi
How it looks like on desktop (Chrome) for both templates:
How it looks like in iPhone 5s (Safari):
Since the 2nd option is a kind of trick, I would recommend you to use the 1st option - it is more reliable.
Of course, those "::before" & "content" CSS things are supported with many browsers, but you decide yourself which option to choose.
P.S. I really like the "multiple-entity-row" - but it does not show "last-changed" for every item, this is rather important for me.
)
