The initial prototypes of the UI were done using HTML & CSS.

The top bar will, in some way, show the current mode (standard or measuring DC-DC efficiency) and battery voltage. Then we'll have three rows, one for each channel. When the "efficiency" mode is selected, the last channel will disappear, and the resulting percentage will be shown instead.

A couple of months ago, I was playing with SquareLine Studio (a fancy UI editor for LVGL) and found it quite promising, so why not use it for this project? As my trial period has expired, the free version will be used here. It allows 50 widgets, 5 screens, and 1 component. Maybe it sounds more than enough for such a project, but soon you'll see — it isn't.

As channels look identical, they were created as a component. I thought reusing the component wouldn't add all its widgets to the total count, but it does. So, after recreating the mockup, I have only 8 spare widgets that can be used in further development... Each value (voltage, current, power) uses a separate label to show its unit. Theoretically, 3 widgets per channel can be saved by showing the unit as part of the value label, but it won't look as good as now (with a smaller font).

Here is the DC-DC efficiency mode screen.

Any channel can be in one of two states: enabled or disabled (based on its voltage).

SquareLine Studio produces .c and .h files that can be added to the PlatformIO project and then included as extern "C". The tricky part is how to deal with the groups (they are required when an encoder is used as the input device). For now, the group creation and adding the mode selection combo to it were done manually, but I'll try to find out the proper way. The current code can be found in the GitHub repo.

A separate question is: will I use SquareLine Studio in further development? It looks like I won't be able to add all the required controls due to the widgets limit, so I have two options:

1. Re-create the current UI in a code.
2. Keep the main screen as is but add all next as pure code.

I'll try the 2nd option first.

Overall, LVGL is an amazing library, and I need to learn it more.