Device_class: battery - change icon_color

Configuration Frontend
1

Hello to everyone,
i´ve successfully installed some Smoke Detectors, including battery status in volts.
The card shows the icon in red color because of 3.14 V value.
Is it possible to change the color to green if value is upon 3.0 volts?

  • Core 2023.11.2
  • Supervisor 2023.11.0
  • Operating System 11.1
  • Frontend 20231030.2

Smole_Detector

MQTT rule:

{"name":"Fire Alarm Batt Volt","state_topic":"stat/RM-02/STATUS11","value_template": "{{ value_json.StatusSTS.Vcc | round (2)}}","unit_of_measurement": "V","device_class":"battery","unique_id":"ABCD1234_battery_voltage","device":{"connections":[["mac","ABCD1234"]]}}

MQTT outcome:

{"StatusSTS":{"Time":"2023-11-12T11:06:53","Uptime":"0T00:00:05","UptimeSec":5,"Vcc":3.098,"Heap":29,"SleepMode":"Dynamic","Sleep":50,"LoadAvg":23,"MqttCount":1,"POWER":"OFF","Wifi":{"AP":1,"SSId":"ABCD","BSSId":"ABCD1234","Channel":1,"Mode":"11n","RSSI":76,"Signal":-62,"LinkCount":1,"Downtime":"0T00:00:03"}}}

Help is highly appreciated, with thanks in advance!

2

I think you’ll be better off not to use device_class battery for this?
I guess you just need a “good” or “bad” state for the voltage?

3

Absolutely.
Battery device_class for sensors is supposed to use for battery levels only (measured in “%”).

To colorize the voltage icon dependingly on the voltage value there are 2 ways:

  1. Card-mod (go to the huge card-mod thread for details) - to change the icon color in a particular card(s).
  2. Custom UI - to chge the icon color in all cards + in more-info window.
1 Like
4

yes I know, I use it myself.
device_class battery looks for a value between 0 and 100 %, not Volt.
when you provide it with a value of 3,14 it will see it as 3,14% = an almost drained battery.

5

… ok, solved.
Deleted the battery_class from MQTT Rule, now it´s white.
Not the solution for my target, but looks better than red :wink:

possible turnaround?
if I multiply the output with 30 I have round about 3,14 x 30 = 90,45
only for icon, and divide throug 30 for the shown value?

6

best way to solve this is to take the ‘on’ or ‘off’ route.
< 3V being off , and > 3V being on.
icon style and color can than be changed accordingly by templating.

1 Like