Hello,
I am working on a customized card to show the RSSI of HomeMatic components.
I have started using the custom:config-template-card to simplify the card using variables, because I need to track an attribute of an entity and not the entity itself.
However I was not able to use variables in the “Style” component for the icon colors. Anyone knows if there is a way to do it?
I have more than 70 elements to track and I want to optimize the way the cards are written. Any idea if there is another simpler way to do it?
At the moment this is the outcome…
… and this is the card…
type: 'custom:config-template-card'
variables:
- 'states[''binary_sensor.0000dbe997221a_state''].attributes[''rssi_device'']'
- 'states[''binary_sensor.0000dbe9972176_state''].attributes[''rssi_device'']'
- 'states[''binary_sensor.0000dbe9972298_state''].attributes[''rssi_device'']'
- 'states[''binary_sensor.0000dbe99722aa_state''].attributes[''rssi_device'']'
- 'states[''binary_sensor.0000dbe9973969_state''].attributes[''rssi_device'']'
- 'states[''binary_sensor.0000dbe997282c_state''].attributes[''rssi_device'']'
- 'states[''binary_sensor.0000dbe997395a_state''].attributes[''rssi_device'']'
entities:
- binary_sensor.0000dbe997221a_state
- binary_sensor.0000dbe9972176_state
- binary_sensor.0000dbe9972298_state
- binary_sensor.0000dbe99722aa_state
- binary_sensor.0000dbe9973969_state
- binary_sensor.0000dbe997282c_state
- binary_sensor.0000dbe997395a_state
card:
type: 'custom:hui-entities-card'
title: Windows downstairs
show_header_toggle: false
entities:
- entity: binary_sensor.0000dbe997221a_state
name: "${'Office' + '\_'.repeat(17) + '\_'.repeat(5) + 'RSSI ' + '\_'.repeat(3) + vars[0] + ' dBm' + '\_'.repeat(9) + ( vars[0] <= -100 ? 'Weak' : vars[0] <= -80 ? 'Fair' : vars[0] <= -40 ? 'Good' : 'Excellent' )}"
icon: |-
${vars[1] <= -100 ? 'mdi:wifi-strenght-1' :
vars[1] <= -80 ? 'mdi:wifi-strength-2' :
vars[1] <= -40 ? 'mdi:wifi-strength-3' :
'mdi:wifi-strenght-4' }
style: |
:host {
--paper-item-icon-color:
{% if states['binary_sensor.0000dbe997221a_state'].attributes['rssi_device'] <= -100 %} red
{% elif states['binary_sensor.0000dbe997221a_state'].attributes['rssi_device'] <= -80 %} orange
{% elif states['binary_sensor.0000dbe997221a_state'].attributes['rssi_device'] <= -40 %} lightgreen
{% else %} green
{% endif %}
}
- entity: binary_sensor.0000dbe9972176_state
name: "${'Bathroom' + '\_'.repeat(10) + '\_'.repeat(5) + 'RSSI ' + '\_'.repeat(3) + vars[1] + ' dBm' + '\_'.repeat(9) + ( vars[1] <= -100 ? 'Weak' : vars[1] <= -80 ? 'Fair' : vars[1] <= -40 ? 'Good' : 'Excellent' )}"
icon: |-
${vars[0] <= -100 ? 'mdi:wifi-strenght-1' :
vars[0] <= -80 ? 'mdi:wifi-strength-2' :
vars[0] <= -40 ? 'mdi:wifi-strength-3' :
'mdi:wifi-strenght-4' }
style: |
:host {
--paper-item-icon-color:
{% if states['binary_sensor.0000dbe9972176_state'].attributes['rssi_device'] <= -100 %} red
{% elif states['binary_sensor.0000dbe9972176_state'].attributes['rssi_device'] <= -80 %} orange
{% elif states['binary_sensor.0000dbe9972176_state'].attributes['rssi_device'] <= -40 %} lightgreen
{% else %} green
{% endif %}
}
- entity: binary_sensor.0000dbe9972298_state
name: "${'Kitchen 1' + '\_'.repeat(11) + '\_'.repeat(5) + 'RSSI ' + '\_'.repeat(3) + vars[2] + ' dBm' + '\_'.repeat(9) + ( vars[2] <= -100 ? 'Weak' : vars[2] <= -80 ? 'Fair' : vars[2] <= -40 ? 'Good' : 'Excellent' )}"
icon: |-
${vars[2] <= -100 ? 'mdi:wifi-strenght-1' :
vars[2] <= -80 ? 'mdi:wifi-strength-2' :
vars[2] <= -40 ? 'mdi:wifi-strength-3' :
'mdi:wifi-strenght-4' }
style: |
:host {
--paper-item-icon-color:
{% if states['binary_sensor.0000dbe9972298_state'].attributes['rssi_device'] <= -100 %} red
{% elif states['binary_sensor.0000dbe9972298_state'].attributes['rssi_device'] <= -80 %} orange
{% elif states['binary_sensor.0000dbe9972298_state'].attributes['rssi_device'] <= -40 %} lightgreen
{% else %} green
{% endif %}
}
- entity: binary_sensor.0000dbe99722aa_state
name: "${'Kitchen 2' + '\_'.repeat(11) + '\_'.repeat(5) + 'RSSI ' + '\_'.repeat(3) + vars[3] + ' dBm' + '\_'.repeat(9) + ( vars[3] <= -100 ? 'Weak' : vars[3] <= -80 ? 'Fair' : vars[3] <= -40 ? 'Good' : 'Excellent' )}"
icon: |-
${vars[2] <= -100 ? 'mdi:wifi-strenght-1' :
vars[2] <= -80 ? 'mdi:wifi-strength-2' :
vars[2] <= -40 ? 'mdi:wifi-strength-3' :
'mdi:wifi-strenght-4' }
style: |
:host {
--paper-item-icon-color:
{% if states['binary_sensor.0000dbe99722aa_state'].attributes['rssi_device'] <= -100 %} red
{% elif states['binary_sensor.0000dbe99722aa_state'].attributes['rssi_device'] <= -80 %} orange
{% elif states['binary_sensor.0000dbe99722aa_state'].attributes['rssi_device'] <= -40 %} lightgreen
{% else %} green
{% endif %}
}
- entity: binary_sensor.0000dbe9973969_state
name: "${'Bedroom 1' + '\_'.repeat(8) + '\_'.repeat(5) + 'RSSI ' + '\_'.repeat(3) + vars[4] + ' dBm' + '\_'.repeat(9) + ( vars[4] <= -100 ? 'Weak' : vars[4] <= -80 ? 'Fair' : vars[4] <= -40 ? 'Good' : 'Excellent' )}"
icon: |-
${vars[2] <= -100 ? 'mdi:wifi-strenght-1' :
vars[2] <= -80 ? 'mdi:wifi-strength-2' :
vars[2] <= -40 ? 'mdi:wifi-strength-3' :
'mdi:wifi-strenght-4' }
style: |
:host {
--paper-item-icon-color:
{% if states['binary_sensor.0000dbe9973969_state'].attributes['rssi_device'] <= -100 %} red
{% elif states['binary_sensor.0000dbe9973969_state'].attributes['rssi_device'] <= -80 %} orange
{% elif states['binary_sensor.0000dbe9973969_state'].attributes['rssi_device'] <= -40 %} lightgreen
{% else %} green
{% endif %}
}
- entity: binary_sensor.0000dbe997282c_state
name: "${'Bedroom 2' + '\_'.repeat(8) + '\_'.repeat(5) + 'RSSI ' + '\_'.repeat(3) + vars[5] + ' dBm' + '\_'.repeat(9) + ( vars[5] <= -100 ? 'Weak' : vars[5] <= -80 ? 'Fair' : vars[5] <= -40 ? 'Good' : 'Excellent' )}"
icon: |-
${vars[2] <= -100 ? 'mdi:wifi-strenght-1' :
vars[2] <= -80 ? 'mdi:wifi-strength-2' :
vars[2] <= -40 ? 'mdi:wifi-strength-3' :
'mdi:wifi-strenght-4' }
style: |
:host {
--paper-item-icon-color:
{% if states['binary_sensor.0000dbe997282c_state'].attributes['rssi_device'] <= -100 %} red
{% elif states['binary_sensor.0000dbe997282c_state'].attributes['rssi_device'] <= -80 %} orange
{% elif states['binary_sensor.0000dbe997282c_state'].attributes['rssi_device'] <= -40 %} lightgreen
{% else %} green
{% endif %}
}
- entity: binary_sensor.0000dbe997395a_state
name: "${'Kid room' + '\_'.repeat(12) + '\_'.repeat(5) + 'RSSI ' + '\_'.repeat(3) + vars[6] + ' dBm' + '\_'.repeat(9) + ( vars[6] <= -100 ? 'Weak' : vars[6] <= -80 ? 'Fair' : vars[6] <= -40 ? 'Good' : 'Excellent' )}"
icon: |-
${vars[2] <= -100 ? 'mdi:wifi-strenght-1' :
vars[2] <= -80 ? 'mdi:wifi-strength-2' :
vars[2] <= -40 ? 'mdi:wifi-strength-3' :
'mdi:wifi-strenght-4' }
style: |
:host {
--paper-item-icon-color:
{% if states['binary_sensor.0000dbe997395a_state'].attributes['rssi_device'] <= -100 %} red
{% elif states['binary_sensor.0000dbe997395a_state'].attributes['rssi_device'] <= -80 %} orange
{% elif states['binary_sensor.0000dbe997395a_state'].attributes['rssi_device'] <= -40 %} lightgreen
{% else %} green
{% endif %}
}
Thanks!