Hi guys. Welcome back to my project. This is Eric. I personally like LVGL a lot. This is because it's a great tool that allows
me to draw colorful graphics in a low-power MCU. So far, I have carried out several projects
using LVGL. Perhaps those who like my channel
know what projects I have done and shared. As LVGL continues to upgrade, many parts are
changing. So, there are parts that need to be changed
in order to use the new version of LVGL in the existing project. I have a plan to carry out several projects
based on the LVGL version 8. In this video, I'm gonna start by creating
a development environment to run LVGL. If you're ready for development, you don't
need this video, so please move on to the next video. Okay. Let's get started. LVGL is a graphics Library that draws a UI. This alone doesn't make everything work. In Arduino-based ESP32, the representative
graphics drivers we can choose from are TFT_eSPI and LovyanGFX. There is a video comparing the two in the
past. If you're interested in it, please watch it. It's currently connected to 4 wire spi, and
both use the latest version of the library. In ESP32, the APB, Advanced Peripheral Bus
can be set to 40MHz or 80MHz. However, at 80MHz, graphics are broken,
so both tests are set to 40MHz. As you can see, the results show that
LovyanGFX is performing much better. In ESP32 and 4-Wire SPI,
LovyanGFX is the best. I will build an environment for LVGL8 using
LovyanGFX. It's about wiring. There is nothing special,
but it's sharing SPI for both a display panel and a touch panel. Also, this model's touch panel is XPT2046. When using a touch panel, it must be connected
to the MISO pin of MCU and the touch DO pin, not SDO. The LED pin is also connected because the
backlight can be easily adjusted on the LovyanGFX. If you don't need to adjust the brightness,
connect it to 3volts right away and always make it to the maximum brightness. I will use the pin information
above as it is. Let's open Arduino IDE. Install LovyanGFX first. I'm using version 0.4.3. After the installation is complete, select
Example>LovyanGFX>How To Use>2_User_setting. It seems difficult to read due to Japanese
comments, but it's not difficult because you only need to set the necessary parts. I'll try to change the setting for my display
while removing the unnecessary parts. We only need to set up this LGFX class part, so it's very easy to use once the setting
is completed. Most of the settings are already set by default,
so you only need to set the pin number, resolution, touch panel and color invert which is false. My setup is complete. Let's see how it works. It'll be built without any problems
and upload will begin. Here you are. If it has a touch panel, it's coded to trigger
touch calibration first. When you complete this part,
you can check where you are currently being touched with the touchpoint. It's working very well. If you know the readings of the touch calibration
in advance, you don't have to do it next time. From now on, let's get the calibration values. There are still a lot of comments. This part will be copied as it is and used
in the LVGL code, so I will organize it further. I'm gonna print the touch correction values
on the console. In order to output to the console, you must
first do Serial Begin. Let's create an array to save the calibration
values. The size of this array is 8. You can put this empty array in the calibrateTouch
function as the first parameter. The touch calibration values will be stored
in this array. After calibration, read this array and print
it to the console. Let me try the calibration again. The touch calibration is again. Touch each corner. There are 8 values. With this, you can get a touch event right
away without calibration. Okay. Let's move on. From now on, it's LVGL8. Install LVGL from the library. I'm using version 8.0.2. After the installation is complete,
go to your Arduino library folder, there is a folder called lvgl. What we have to do here is copy the lv_conf_template
header file to the source folder and change the name to the lv_conf header file. Then, I will open the lv_conf header file
and change the necessary part. The first part to change is LVGL enable. Change this to 1. The color depth is 16 bits instead of 32 bits. I need to use Custom tick because I work based
on Arduino. I change this to 1. This is the most basic setting. If you look at LVGL in the example, there
is lvgl arduino. Let's start with this as a base. The reason for using the example code is that
it's already verified code, so it's good to start with it. This example has a resolution of 480 by 320. It's the same as ILI9488 I have, so I'll use
it as it is. TFT_eSPI is being used as a graphics driver. Let's clean up the unnecessary parts first
and get started. One change in LVGL8 is that
the display buffer has been renamed with draw buf. The type also has the format lv_disp_draw_buf_t. lv_task_handler() changed to lv_timer_handler(). Please refer to this. The basic code has been organized. The code now is the minimal code for running
LVGL without the graphics driver. Now, what we have to do is bring the graphics
driver of the previous lovyanGFX with this code. Simply copy and paste the display part. This lvgl code is shared through my GitHub
repository. You can find the link in the description below. I'll set the touch calibration first. I'll put the values obtained from the previous
touch calibration in the calData array. And put this using setTouchCalibrate, a member
function of tft. This function is not in TFT_eSPI but only
in LovyanGFX. I will set the brightness to the maximum. Maximum brightness can be set to 255. The next thing to set is the display write
part. In the my_disp_flush part, writePixels are
used instead of pushColors. Finally, the touch part. Here, we remove the last parameter value from
the tft.getTouch part. LovyanGFX's getTouch function doesn't need
this part. This is the minimal source code for drawing
LVGL with LovyanGFX. You can create the UI you want
by adding the source code that draws the screen here. One of the basic examples provided by LVGL
is a button. In the LVGL folder, in the example folder,
and then get started folder, open the file lv_example_get_started_1.c file. Using this, I will draw a button in the center
of the screen, and when a click event occurs, it will increment the number on the button
one by one. With this code, the position of the button
is drawn x 10, y 10 from the top left. Let me modify this to be centered. All Done. Let's build it and upload it. Each time I press the button,
you will see the button's number count increase by one. If there is a problem with the touch event,
the button will not work. In this case, please check the driver of the
touch panel of the display you have. I'm currently waiting for a new version of
Edgeline which is the LVGL UI Editor. The current version 0.3.1 is only exported
for LVGL7. I'll do a project using Edgeline when LVGL8
is supported. I hope it will be supported soon. That's all for today's video. Thanks for watching. See you in the next project.
