LVGL Battery Indicator made with LVGL's Editor

My projects
1

Here is battery indicator component inspired by iOS made in XML in the LVGL UI Editor. It’s comprised of simple objects and a slider for its central part.

I also added some buttons and a slider for controlling this component. It can have a Low Power state, a charging state, and low battery indication.

battery_indicator

Using the Editor helped a lot here since I could get some XML properties from the Figma design using the LVGL Figma plugin. It was also very easy to work with fonts and images because the Editor converts it automatically to source code. So no need to convert images and assets manually.

I could test the behavior of the component using the Editor Preview even before running the project in a real hardware.

battery_indicator_editor
battery_indicator_editor1851×1253 303 KB

Here’s the GitHub link to the project:

You can also test it in your browser using this link:
https://viewer.lvgl.io/?repo=giobauermeister/battery-indicator-lvgl-editor/tree/main/battery_indicator

Just login with your GitHub account and wait for it to load.

And the Figma file: https://www.figma.com/design/HVvM9m0egZy0wYZDLKKPTA/Battery-Indicator

battery_indicator_figma
battery_indicator_figma1810×879 89.7 KB

Have you guys used the Editor already? What do you think?

3 Likes
2

Very nice! Thank you for sharing!

As I see now it’s functional, but still there are some UX and stability issues. We are ironing out these in September.

1 Like
3

Thank you for sharing :hugs:. Need to try more with LVGL editor & Figma :innocent:

1 Like
4

I just pushed a new update to the battery indicator project. Now I added a new battery design made as a widget (XML + custom C code). This way I could expand the possibilities for more styles and states for the battery, making it a little bit more similar to the latest iOS battery indicator.

battery_indicator_widget

1 Like