Text color on ui-gauge (battery level)

Dashboard
1

In my dashboard 2 I use a ui-gauge widget, of the battery-level type, to display the percentage of battery charge of a SmartPhone that is used to monitor some information.

The widget works well, but I would like to be able to change the color of the percentage which is currently white or black depending on the aforementioned percentage.

The percentage of charge is almost always between 70 and 80% (when it drops below 70%, the socket on which the power supply is connected is turned on via MQTT and then turned off when it reaches 80%).

I have not been able to find any parameter (including a dynamic one) to be able to do this. The white is difficult to read.

Is it possible? If so, what information should I use?
Just as an example, this is what appears to me:

image

Because the percentage is almost always between 70-80%, the text color is always white.

In some circumstances (when I don't receive data from SmartPhone) I change the segments color in red and I see a black text color that is much more readable.

Thanks.

2

CSS override

.nrdb-ui-gauge-battery label.nrdb-ui-gauge-battery--bglabel,
.nrdb-ui-gauge-battery label.nrdb-ui-gauge-battery--fglabel{
    color:rgb(0, 0, 0) !important;

}

For me it feels that the breakpoint (white/black) is not well balanced. Hard of course to judge.

3

I think this is what's going on:

There are two data values superimposed
label class="nrdb-ui-gauge-battery--bglabel" (which by default seems to be black, at least for the default theme)
and
label class="nrdb-ui-gauge-battery--fglabel" (by default it seems to be white)

As the gauge level changes around 50% fglabel gradually becomes visible, overlaying bglabel.
image

You can use a CSS template to style them individually or together:

label.nrdb-ui-gauge-battery--bglabel, label.nrdb-ui-gauge-battery--fglabel {
    color: red !important;
}
4

Thank you very much: it works.

5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.