#1st world problem question - change default battery state color?

1 messages · Page 1 of 1 (latest)

pure rain
#

So as the title suggests, I'm sitting here wondering if there's a (simple) way to change default battery state colors. As per now, color changes from green below 70-80% (not sure of exact value), so my device with 68% is shown as orange, while there's at least 4-5months before it needs any input from my side. I would personally prefer for color to stay green until 25%, or so, and then go to red below 7%. Is this doable? Would this maybe make sense for WTH month?
(Card in question is Entities card, if that makes a difference)
Thanks!

static remnant
#

The only way I know of is by using templates and custom cards or card-mod to change this behavior

burnt charm
#

"Simple" could be a relative term around here, but definitely doable. Since you're asking about the entities card, like TPC suggested, card_mod would need to be used. Once installed, card_mod lets you modify some of the CSS values within the card. (There is a ton of reference material out there to get into some of the specific uses, but the main card_mod thread in the forum has a ton of info LINK and, specifically, the Entities card post.) Card_mod has a steep learning curve and knowledge of CSS and Jinja is helpful. But, until you get comfrotable working with it by yourself, I've thrown together an example for you:

# 
type: entities
title: Motion Detectors
entities:
  - entity: sensor.bedroom_motion_detector_battery_level
    name: Bedroom
    card_mod:
      style: |
        :host {
          {% set battery_level = states(config.entity) | int %}
          {% if battery_level >= 25 %} --state-icon-color: green;
          {% elif battery_level > 7 %} --state-icon-color: yellow;
          {% elif battery_level <= 7 %} --state-icon-color: red;
          {% else %} --state-icon-color: pink;
          {% endif %}
        }
  - entity: sensor.living_room_motion_detector_battery_level
    name: Living Room
    card_mod:
      style: |
        :host {
          {% set battery_level = states(config.entity) | int %}
          {% if battery_level >= 25 %} --state-icon-color: green;
          {% elif battery_level > 7 %} --state-icon-color: yellow;
          {% elif battery_level <= 7 %} --state-icon-color: red;
          {% else %} --state-icon-color: pink;
          {% endif %}
        }
```EDIT: Added some color options. (Interestingly, during testing, even though the Bedroom battery is 7%, it would not change unless the code caught 5% to turn it yellow. Not sure what was going on there.)
image.png
#

As you may have realized, each entity needs it own bit of code in order to work properly. This may not be too big of a deal if you only have a couple of entities. Anything more than a handful of entities then it may become a bit overwhelming. In that cause, incorporating the auto entities card could be used. That brings a whole 'nother layer of learning curve but if that's something you're interested in, lemme know and I can probably help figure something out.

pure rain
#

Thank you both, specially @burnt charm for the reply!
I'm generally not a big fan of using mods, as I can make it work using forums and other internet resources without properly understanding the matter, which can lead to things suddenly breaking down several months down the road when HA updates (happened a couple of times already), so I prefer to stick to basic HA.
However, this does look interesting, and I already have card_mod that I use on some instances, so it might be "acceptable usage".
I don't have that much battery information that I'm interested in, and it's also mostly copy/paste action, so for now I'll stay away from auto entities. 🙂

Thank you for your effort for the detailed example, much appreciated! 🤜

burnt charm
#

Even some of the stock cards can endure changes that tend to break things unexpectedly. Keeping an eye on the changelog can sometimes help with that. For example, I did notice when I was referencing the Entities card post mentioned above, Ildar_Gabdullin uses --paper-item- variables in his examples, which, IIRC, were recently removed in favor of the --state-whatever variables. His syntax also doesn't include the card_mod: which is required with card_mod 3 (pretty much the standard now-a-days), but he does mention it at the beginning of the post:

NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).
I've seen a few things break here and there. Generally, if something custom is actively developed, a fix usually doesn't take long. Mushroom card, Bubble card, card_mod, and auto entities are all relatively safe to use.

pure rain
#

I've copied your code, and of course it works (after I've disabled Show state color). But now a second 1st world problem arose - color "green" isn't as nice as the original state color green. Now I need to investigate through system files to find the exact RGB of green they use! 😆

pure rain
#

orig_vs_green

image.png
burnt charm
#

I used the Color Picker from Microsoft PowerToys to get that value.

#

Although, inspecting the card, I see rgba(76,175,80,1)... variable: var(--state-sensor-battery-high-color)

pure rain
#

Yeah, last time +bout a year or more ago when I needed their specific code of blue I also used color picker, but also went through system files (probably the one you mentioned) to be sure 🙂

#

In color.py I don't see any color starting with either 81 or 76

burnt charm
pure rain
#

Thank you so much, for all your help! I think I'm done with this "issue", for now at least 🙂

burnt charm