Battery Level Indicator

How-to
1

Hi again!

After I’ve ported lvgl to my aurix board now I started to design my visuals. I am planing to design batery maagement system or battery monitor. So I need a cool battery level indicator. I have checked the user manual but coudln’t find a widget about that. Apart from that there is no index in the user manual that is frustrated.

Anyways, I am looking for a widget like below and wanted to ask you if it is already in the library or is there any convinient way to do it? Otherwise I will try to done it with geometric shapes and so on.

Thanks in adavance.

battery-energy-levels-26418514
battery-energy-levels-26418514800×467 37.2 KB

2

Hi @engineerhan,

As far as I am aware there are no widgets for this, but the included fonts have symbols defined in lv_symbol_def.h

LV_SYMBOL_BATTERY_FULL
LV_SYMBOL_BATTERY_3
LV_SYMBOL_BATTERY_2
LV_SYMBOL_BATTERY_1
LV_SYMBOL_BATTERY_EMPTY

These can be used but they are purely a monochrome character which can be printed to a label.

I hope that helps.

You can see the available symbols at this link:

https://docs.lvgl.io/v7/en/html/overview/font.html

Kind Regards,

Pete

1 Like
3

I also have a battery monitor, but I stuck with the published widgets. I have two Lithium battery banks @ 25.6V. One is 460AH (11.8kWhrs) and the other 180AH (4.6kWhrs). They charge from excess solar. Here is the front screen (there are 7 more showing individual cell volts, graphs of current etc). The needles on the gauges are red for discharging, black for resting and green for charging.
Hm, seems I cannot attach anything so sorry, cannot attach the graphic of it.
Regds,
Dave

1 Like
4

Screenshot from 2020-06-04 18-18-35

1 Like
5

Well,

why not take those six individual battery state images, convert them to LVGL accepted form (c array) or use from file system, should you have one. Then, make a img object array (or filename array), and …

lv_img_set_src(img_my_batt_indicator, imgdata_battery_level[level]);

after creating a nice *img_my_batt_indicator.

Of course this consumes more memory, but I see no alternative if the indicator really has to look like in your example figure.

1 Like
6

Thanks for all answers. Actually I am lookıng somethıngs for more precıse so from 0.0 to 100.0 or at least from 0 to 100 level. And want to show percentage in the middle.
I will go create my widget probably.

7

Hi
There is no need to have an especial widget. You can use an img object.
In my project, I used a big image that had all of the battery states. then by use of Offset feature, I could display the one I wanted based on the charge of the battery.

1 Like
8

Let’s say you have 2 images:

  1. an empty semi-transparent battery
  2. a gradient background

If it’s acceptable that the top of the gradient is cropped, you can simply set the height of the gradient image to a smaller value.

If you want a radius on the top part as well you can use the masking feature of LVGL.

1 Like