LVGL 9, [Ep. 02], Examples, We can understand better and faster through LVGL Examples #LVGL #UI

We always need examples. Especially when learning something new, it becomes very difficult to learn without example source code. Today I wanna show some examples provided by LVGL. Let's say we need to show the user a firmware upgrade screen. How do we make the screen for this? We show the user the current status while saving or flashing a new firmware file into it. How can we create a screen like this? It doesn't seem easy. As a tool for drawing UI, LVGL provides many examples. Simply put, there is a button on the screen, There are also menu structure examples that have very complex menu structures. What else could there be? How about the animation? Animations have never been easier in the MCU environment. You can play JPEG files continuously or GIF files, but Lottie allows you to play animations more effectively. This is a personal favorite and I will definitely cover it in this series. Just a few more steps. Anyway, if you are a first-time user, I recommend you take a look at the LVGL example. Let me briefly show you how to use it. This is the code we prepared in the previous episode and was able to run the demo benchmark. Let's run an example here instead of a benchmark. If you look in the LVGL folder, you will see the example folder there. Let's move this down to the source folder. As previously mentioned, this is necessary because the Arduino IDE only references the library's source folder. Let me open this example folder through VS Code. You don't have to follow this step. This is just to check the example structure easily. Okay. Here you are. Here are the examples provided by default. It contains a lot more than you might think, so please take your time and review the code through it. The first example to try is the get started 1. This simply prints Hello World to the screen. Now let's include the lv examples header file. Please don't forget the example folder path. All right. All looks good. Let me build and flash it to my device. As I said, this is just a Hello World example with a background color. It's nothing but we confirmed you can try all the examples now. This time, the example we gonna try is a very important example to learn about touch events. There are more events in a single button than you might think. Rather than simply pressing the button, you can also press it for a long time, and each event state exists. In this example, you can check the states of the button on the screen according to the button event. Basically, whether a button is pressed or released is determined by low-level touch events. After that, you can handle the states that buttons can have in detail. This time, I will show you an example where it has some issues when you build it. This is a case where you need other parts on the example source code. So, if there are any necessary parts to run it, you must enable them in the lv_conf.h file. For instance, if it needs a specific font but it is not enabled, you can see this kind of error. Because it's inside an if statement, if it is not a true the specific condition then your compiler cannot find it. Let's see what we need. It says that the font Montserrat 30 is required. Let's enable this in lv_conf.h and try again. The build goes without any problems. Let's talk about this example a little bit. This example is a menu composition example using the observer design pattern. When studying Object Oriented programming, you learn the observer pattern next to the Singleton pattern. I forgot the exact order. Anyway In short, an observer pattern is a design pattern that sends notifications to related objects when the state of an object changes. I hope we have time to talk about this later. In this episode, we looked at examples provided by LVGL. This is definitely a very useful weapon to help you better understand and use LVGL better. Please look through the many examples and try copying and pasting the necessary parts into your own project. Then it will be easier to understand the overall UI composition. All right. That's it for today. Thank you for watching. See you on the next project.

Channel: That Project

Views: 5,437

Keywords: UI/UX design, LVGL, User interface development, GUI programming, LVGL 9 tutorial, Embedded GUI, LVGL framework, Embedded graphics, Touchscreen interfaces, Graphic design, Display technology, Embedded UI, Cross-platform UI, LVGL library, LVGL basics, UI prototyping, Widget-based UI, LVGL components, Responsive design, LVGL customization, LVGL setup, LVGL widgets, Interface design, UI development tools, LVGL configuration, LVGL styling, UI animation

Id: NlU4DTx7_1k

Length: 5min 45sec (345 seconds)

Published: Fri Feb 16 2024