I want to keep an eye on my LQI values for my dedicated Zigbee repeaters around the house and have used the Picture Elements card overlayed with LQI entities. This works in its most basic form but I want it to be a little prettier and update it with the following:
- Colour coding based on link quality value (green = >120, orange between 80 and 120 and red for less than 80)
As you can see in my screenshot, my basic understanding of CSS isn’t helping me set the colour of the values and the circles. I want to keep the entity name hidden but simply change the numerical value colour as well as the white circle.
type: picture-elements
elements:
- type: state-badge
style:
left: 50%
top: 45%
color: blue
background-color: rgba(0,0,0,0.3)
box-shadow: 0px 0px 10px blue
border-radius: 50%
entity: sensor.texasinstruments_ti_router_lqi
- type: state-badge
style:
left: 65%
top: 65%
color: transparent
entity: sensor.ewelink_sa_003_zigbee_lqi_2
- type: state-badge
style:
left: 65%
top: 95%
color: transparent
entity: sensor.texasinstruments_ti_router_lqi_3
- type: state-badge
style:
left: 20%
top: 65%
color: transparent
entity: sensor.texasinstruments_ti_router_lqi_4
- type: state-badge
style:
left: 80%
top: 35%
color: transparent
entity: sensor.sonoff_dongle_e_r_lqi
- type: state-badge
style:
left: 40%
top: 62%
color: transparent
entity: sensor.tz3210_amleyeej_ts0501b_lqi
- type: state-badge
style:
left: 20%
top: 30%
color: transparent
entity: sensor.texasinstruments_ti_router_lqi_2
- type: state-badge
style:
left: 20%
top: 80%
color: transparent
entity: sensor.boys_new_repeater_ewelink_sa_003_zigbee_lqi
image: local/ground3d.jpg
grid_options:
columns: full
rows: auto
