LCD GUI with LVGL with ESP-32 (DIY generator part 15)

This post is going to be about a graphical user interface for DIY generator’s display I have talked about earlier. Also, this post will be a short one.

Two libraries were used to display the interface. The first one is TFT_eSPI. Although it has its own screen drawing/writing functions, its main purpose is to be more like a LCD driving middle-ware for a second library. The second one is LVGL (littlevgl) library. This one is used for all advanced drawing on the screen – buttons, check-boxes, keyboards, labels and so on.

At first glance this might look cumbersome – two libraries are not efficient memory wise. On the other hand, it was somewhat the easiest and fastest way of getting the screen to show a “user friendly” GUI. Also, a similar thing has been already done.

Links to project’s all posts

1. VCA822 Gain Amplifier Circuit
2. LM7171 Offset Circuit
3. Gain and Offset Control Filter Circuit
4. Dual 5V Power Supply
5. Dual 12V TPS65131 Power Supply
6. Battery Charging Circuit with BQ24295
7. Basic WEB Interface
8. IPS Capacitive LCD on an ESP32
9. IPS LCD, ESP32 with eSPI library and Touch screen
10. Final PCB Design for the DIY Waveform Generator
11. Custom Design PCBs and How To Get Them Manufactured
12. Soldering the PCB
13. AD9833 Library and Further Output Noise Reduction
14. Arduino BQ24295 Battery Charger Library
15. LCD GUI with LVGL on ESP-32 (this post)
16. 3D Printed Enclosure
17. Finished DIY generator

TFT eSPI

The eSPI library, as I have already mentioned, is used more like a driver firmware than a full-featured library. From this library four functions are used:

tft.startWrite(); 
tft.setAddrWindow(x1, y1, w, h);
tft.pushColors(&color_p->full, w * h, true);
tft.endWrite();

So, as you can see, it is used to push some pixel data to a particular screen area and nothing more.

LVGL library

LVGL, or so called littlevgl, library used for drawing widgets on the screen. Widgets can be buttons, switches, labels, text-boxes, keyboards etc. This library is quite easily portable to different devices – it uses mainly two functions. One for drawing pixel data to the screen and the other for getting last touch position. With these functions probably any touchscreen can be used, given you are able to write to screen and get data from touch panel outside this library.

Although it might seem that LVGL has so many advanced features and creating a user interface will be easy job – it is an underestimation. It helps a lot, but only tweaking around with object placement on the screen takes huge amount of time.

So, what I have done so far is just two screens. First screen is main user screen which allows user to control generator’s output parameters. The second one is settings screen. This screen shows some settings which are not directly related to the generator or its parameters. These, at this point, are WiFi and screen brightness settings.

Those two screens are shown below:

Note, that now touch is not enabled, but it should change in the future and these two screens will become a usable user interface.

I have also written an extensive tutorial for LVGL usage which you can find here.