Display battery icon based on percentage

ESPHome
1

Hi, can anyone point me in the right direction?

I am trying to map battery sensor values to specific mdi icons in order to show charge level as an icon. I have seen examples in other posts where weather states were mapped to corresponding icons. However, that was string to string mapping:

      std::map<std::string, std::string> weather_icon_map
        {
          {"cloudy", "\U000F0590"},
          {"cloudy-alert", "\U000F0F2F"},
          {"cloudy-arrow-right", "\U000F0E6E"},
          {"fog", "\U000F0591"},
          {"hail", "\U000F0592"},
          {"hazy", "\U000F0F30"},
          {"hurricane", "\U000F0898"},
          {"lightning", "\U000F0593"},
          {"lightning-rainy", "\U000F067E"},
          {"night", "\U000F0594"},
          {"night-partly-cloudy", "\U000F0F31"},
          {"partlycloudy", "\U000F0595"},
          {"partly-lightning", "\U000F0F32"},
          {"partly-rainy", "\U000F0F33"},
          {"partly-snowy", "\U000F0F34"},
          {"partly-snowy-rainy", "\U000F0F35"},
          {"pouring", "\U000F0596"},
          {"rainy", "\U000F0597"},
          {"snowy", "\U000F0598"},
          {"snowy-heavy", "\U000F0F36"},
          {"snowy-rainy", "\U000F067F"},
          {"sunny", "\U000F0599"},
          {"sunny-alert", "\U000F0F37"},
          {"sunny-off", "\U000F14E4"},
          {"sunset", "\U000F059A"},
          {"sunset-down", "\U000F059B"},
          {"sunset-up", "\U000F059C"},
          {"tornado", "\U000F0F38"},
          {"windy", "\U000F059D"},
          {"windy-variant", "\U000F059E"},
        };

Is it possible to do the same with value ranges, i.e. 100-90, 90-75 to the corresponding mdi icons?

I am new to this and trying to figure this out, unfortunately I can’t find anything remotely similar on ESPHome website.

Any tips?

Thanks.

2

How about the battery state card?

3

Sorry, I forgot to specify that this is for a eInk display. I already have this card in HA anyway, but I want to use the display to quickly give me a visual indication on the display without checking it within HA.

Once sorted, I can use the same method to add variable Wi-Fi icon changing based connection ESP32 is reporting. I hope that this makes sense.

4

Once again I missed an esphome tag.

What font are you using?

5

Here is one that has a battery symbol:

6

There’s a GitHub page in the link you posted and has some yaml code for a battery sensor, can you get an idea from that ?

Lines 217-228 and 350-384

7

Lol, I must have found the very same GitHub page when you were writing your post.

The code there pushed me in the right direction. Everything seems to be working fine now.

Thank you all.

8

It’s material design icon font.