LVGL 9 has been released. Since there are many updates every time LVGL
is majorly updated, you have to modify the existing project again or continue to build with the previous version. It's a bit of a hassle, but it's unavoidable
if you want to use the new features. Anyway, with the new version coming out, I
thought this could be a great starting point for people starting with LVGL. This project is LVGL 9 101, and it's a video
for beginners like me. If you already know about device configuration
and libraries you don't need this. So please look out for the next project video. Here I will guide you through the basic structure
of LVGL and help you get started with your LVGL project. Please follow me. The first thing to do is to prepare the hardware. It's a matter of choosing the MCU and display. You can select an MCU such as RP2040, and
various types of displays can also be connected. If you are a beginner, I personally recommend
choosing a display with SPI type such as ILI9341 or ST7796. It is not only easy to connect but also easy
to set up. Once the hardware is ready, the next step
is to prepare the necessary libraries. In order to draw something on the screen,
you need a library that draws the screen. Typically, TFT_eSPI is the most used GFX library. I also recommend LovyanGFX because it shows
very good performance. Other GFX are also very good, so you can use
any GFX library as long as it supports your device. Next, you need a library that makes it easy
to draw UI. Without this, it is not easy to draw a single
button on the screen. What we use here is LVGL. This is a great tool that will help you display
any graphical widget you want very easily. Through this library, you can configure the
screen and create the graphic widgets you want. Now, let’s install the necessary libraries
and set them up together. First, install TFT_eSPI. You can find the TFT_eSPI folder in your Arduino
library folder. There are two files here, user_setup.h file
and User_Setup_Select.h file. If you have a commercially available device,
setting it up is very easy. If you just uncomment your device here, the
display will be automatically selected, so you don’t need to set up the connected pin
separately. Since I connected the display directly, I
will set it up through the user_setup.h file. The display I use is ST7796, so I define this. I turn this on because the display has color
inversion. If your display shows white as black, you
can turn this on. Below are the pin settings connected to the
MCU. Update the pins you have here. Master Input Slave Output
Master Output Slave Input Clock
CS DC
Reset This information is needed for a basic SPI
display connection. For displays including touchscreen, these
settings may be slightly different. Since I will set up the touchscreen through
another library, I will not set it up here. Let me clean up. There are too many things I don't need. Next is the SPI Write speed. This example shows that the screen update
speed varies depending on the SPI speed. There are ways to update this faster by using
DMA and double buffering, but we'll cover that later. Once you set the SPI write speed like this,
you have completed the basic settings. It's time to test whether the display is working. TFT_eSPI contains many great examples. This can be a good tool to check User setup. You can choose an example that fits your screen
or try a generic example. I will use graphic_one_lib. Actually, it doesn't matter which one you
use. This is to ensure that your user setup is
correct. If the screen is not working, the user setup
is likely incorrect and you can check again. Let’s just change the serial speed and build. you can see that it is displayed without any
issues on the screen. If the colors are inverted, you can turn on
or off the color inversion option to correct this. This confirms that your MCU can properly update
your screen via the graphics driver. You cannot draw anything in LVGL without this
part, so please be sure to check it before proceeding. We're good to go for LVGL. Once installed, go to the folder where it's
installed. LVGL is a cross-platform that supports not
only the Arduino environment but also other OS environments. So some extra work is required to use it in
an Arduino environment. If you look at in the LVGL folder, you will
find the Lv_conf_template.h file. Copy this file to the src folder. Then change the name of this file to lv_conf.h
file. You can configure your LVGL settings in this
file. To use LVGL, enable line number 15. By scrolling down, You can turn the use of TFT_eSPI on or off. Since we are working on a project based on
TFT_eSPI, enable this and enable the SPI display you are using below. This makes it very easy to construct basic
LVGL code. If there is no display in use here, you can
directly implement the display callback function. Now let's load the LVGL Arduino example file. Since this is a skeleton project, it can be
easily modified and used. We use TFT_eSPI as a graphics driver. Since LV_USE_TFT_ESPI has already been enabled,
it is the same even if you leave it as is. My resolution is 480x320. I will keep going by removing unnecessary
parts. According to LVGL, partially updating the screen requires a buffer size of 1/10 of the screen size. Create a buffer that they require. Also buffer should be in the internal RAM. SPI RAM is very slow in comparison to the
internal memory. So this is for setting it to use internal
DMA memory. Since we are using TFT_eSPI and graphics driver
supported by LVGL, we can create lv display very easily. Because this includes a partial callback function
that draws the display, no extra code is required. The above LVGL Arduino string will be drawn
to the screen. Finally, in Loop LVGL needs a system tick to know the elapsed
time for animations and other tasks. In previous versions, this part was implemented
in the lv_conf.h file, but from the current version,
it needs to be implemented directly. You can input 1 in lv_tick_inc, but in this
case, you cannot know how much time has passed between the actual previous frame and the
current frame, so accurate FPS calculation is impossible. So, I think it would be right to implement
it this way. And we do everything that LVGL draws to the
actual screen via lv_task_handler. These two functions must be performed regularly. Let's build it. Oh, there was Typo.
Sorry. Let's try again. As a result, Hello Arduino and the current
version of LVGL are displayed on the screen. Let's save this project. I’ll create a working benchmark demo program
that includes a touch function. Another important thing in using LVGL is touch. Touch input is a popular input device because
it is very intuitive. The touch on my device uses the i2c interface
FT6236. Since it is not supported by TFT_espi, in
this case it must be operated separately through a library. I will use this library to drive my touch. If your touch driver supports TFT_eSPI, please
skip this step as it is not necessary. You need to create an input device for LVGL. In the case of a general touchscreen, you
can choose the pointer type. If it is an encoder or physical button type,
you can select the other types. Now we need to implement a callback function
for touch events. This is called by the LVGL system and checks
if there are touch events. If there is a touch event,
Obtain x,y coordinates from touch and write them in lv_indev_data. In my case, I need to change this because the coordinate systems
of the screen and touch do not match. The current screen is in landscape mode, but
a typical touch panel is in portrait mode. The touch library does not include rotation,
so you need to modify the coordinate system to fit the touch point to the screen. Also, since the starting point of 0,0 changes
depending on the screen rotation, you can calculate it according to
the touch screen you are currently using. If the graphics library supports touch, you
don't need to worry about this. This is because the touch rotates along with
the screen rotation. LovyanGFX has touch support for the FT6236,
so I'll mention it again in my next project. After updating the touch coordinates, change
the current state to pressed. If there is no touch, the state will always
be released. This completes the touch callback function. Aww, I forgot the initialization of the touch
panel. This touch library can set the threshold for
touches. 40 sets the threshold for touch detection,
as known as how sensitive the touchscreen is. 40 seems to be a good number. This can be an integer from 0 to 255. Now let's have a touch test on the device. You can see the coordinates of the point I
touch are captured well. As mentioned, the top left corner of the screen
is 0,0. If the touch event is not triggered like this,
please check the connection status and also the driver of the touch IC and MCU again. Finally, it's time to run a benchmark demo
of LVGL 9. Let's go to LVGL in Arduino's library folder. Here you will find a folder called demos. Move this to the src folder. After that, there is a benchmark folder under
the demos folder. Let’s open the lv_demo_benchmark.c file
here. Modify these two paths like this. Then open the lv_conf.h file again. To check the FPS while benchmark calculation,
you need to use the system monitor component. Here, enable LV_USE_SYSMON and LV_USE_PERF_MONITOR. If you keep scrolling down,
There is a Demo Widget. For the Benchmark demo, this Demo Widget and
demo benchmark must be enabled. Also, in order to use the Demo widget, you
must increase the memory allocation of LVGL. If you go to line number #45,
64K bytes is set by default. Increase this to 128K Bytes. Now going back to the source code. Just add the demo benchmark. include demos lv_demo.h Hello Arduino is removed and lv_demo_benchmark
function is called instead. Oh, it's lv_demos.h, not lv_demo.h. Sorry. This time, it says that the required font
is not enabled. Let's enable Montserrat 24 and build it again. Okay.
Now it’s working. This is a good chance to test how well your
device can perform. The quality of a project can vary depending
on FPS, that is, how many times the screen
can be redrawn per second. To increase FPS you can use DMA and double
buffering, but depending on your hardware this may be limited. We'll go deeper into this with the next project. Today we looked at using LVGL 9 from scratch. I hope this helps you get started on your
project. That's it for today. Thank you for watching. See you on the next project.
