This is the third episode of LVGL 9 101. Today I'm gonna show you how to create a basic
layout. Ultimately, I think the reason for using LVGL
is to create a nice looking good UI in an embedded environment. LVGL's documentation is great, but I think
you can learn much faster by creating it yourself. As you can see here, the UI we will create
today is the Windows login screen. Of course, it's just UI Layout. Nothing. It may seem a little difficult, but it is
much easier to configure this screen than you might think. Let's get started right away. This is an image I found through Googling
for this episode. I looked at a lot of other login screens,
but this one looked great. It is a good idea to first plan what UI you
will create. Next, I need to reconstruct the target UI
I have set at the resolution of the device I will use. If images need to be updated at the UI level
or button events are required, they must be detached,
so each image must be prepared separately. Here, I prepared separate images for the user
placeholder and the two icons below. Also, It is a good idea to roughly determine
the size and position of each widget based on this resolution. Of course, you'll have to make a few modifications
to your code, but this can make things a lot easier. It would be a good idea to think about the
widgets in the UI that will be used on the screen. For text, use the label widget,
and for images, use the image widget to display them on the screen. Since you need to receive input from the user, you can use the textarea widget to receive
keyboard input. This is the basic project prepared in the
previous episode. Let's get started from here. All of the code I'm going to use here is on
my GitHub, so you don't have to type it out. Let's convert the image files to be used in
this project into a format that can be used in LVGL. You can easily do this from the official image
converter site supported by LVGL. Since v8 and v9 are different, please check
v9. By default, the image will use RGB565,
that is a 16-bit image. If the image you want to use has transparency,
you should use RGB565A8. This increases the file size but allows you
to use images with transparency, such as png files. Place the converted c files in the project
folder. Then you can now use these images. You can check the added files in the left
window. Okay. It's coding time. I will create a ui init function and do all
the work there. First, let's create a screen object. You can create any lvgl object using the lv_obj_create
function. Here, through lv_screen_active, you can get
the currently active screen. Through this, my screen object will be created
based on the current screen. This screen object will be the parent object
of the screen I will create. The result is a blank white canvas. We need to fill it out with other widgets. Now let's add the background image I prepared. In order to use an image, you must declare
the image to use through the function called LV_IMAGE_DECLARE. Creating an image widget through lv_image_create
is created using the parent object, the screen object. By doing this, it becomes a form that is above
the screen. This is called the parent-child structure. Set the converted background image as the
source of the image widget. Finally, fix the position of the image widget
to the center. Finally, the background image is visible on
my device. Nothing yet, but I feel good. There are a few unintended parts here. First, you can see a white border. This is one of the default settings that the
default UI object has. We can get rid of this by defining a style. You will also see a scrollbar in the bottom
right corner. This is because the image widget is larger
than its parent widget. Due to the default padding in the image widget,
the size is larger than the actual image. This can be solved by removing the parent
object's scrollbar or removing the padding of the image widget. Let's create a style to remove the white border. You can use it after initializing the style
structure. After that,
please set the width to 0 in the set_border_width function, the border will disappear. Now you can add a new style by the function,
lv_obj_add_style. Also, since we don't need a scrollbar,
we can remove the LV_OBJ_FLAG_SCROLLABLE flag from the screen. This creates a screen with no borders and
no scroll bars. Next, let's add the user placeholder image. It's the same way as the background image. But, this time the image position is Top Middle
rather than Center. We can align UI widgets anywhere. After determining alignment,
you can move the position by setting the x and y values again from there. You can understand this part right away after
trying a couple of times, Be sure to try it for yourself. If you look at the result screen,
you can see that the user placeholder image is slightly away from the top. This is because there are areas that are not
visible due to the padding included in the image widget. I'll leave it like this
because it's in the right place without any extra changes to the y position. It's time to create the user label. To create a label widget, use the lv label
create function. Also, set the parent object to the screen
object. Set the text you want here. Change the text color and font size. Changing the size of text is not easy in LVGL. LVGL fonts, unlike regular fonts, contain
bitmap information. So when an LVGL font is created,
the size is defined together. This means that to change the font size,
you need the corresponding LVGL font. I think we'll have to talk about this again
later. Let's place this label 30px up from the center. Since we use Montserrat font size 24, let's
not forget to enable this in lv_conf.h file. Now you can see the text Windows insider on
my device. Next, we need to create a Textarea that can
receive the user's password input. This widget can be very useful because it
can receive input from a virtual keyboard. The placeholder text will be PIN. This widget sets the size. Input widgets usually specify the size
and are displayed as dots when they exceed a certain length. You know what I'm saying right? If you look at the result screen, you can
see that the text area has been created, but this is not the design we want. That's why we need to create a style and apply
it again. This will be the same as we did above. After initialization of the style structure,
set the desired settings. Here we set the widget's corner radius to
0 to create a rectangular shape. After creating the style, don't forget to
apply it via the add_style function. Finally, the result I wanted was achieved. very good. Next, we need to add text, sign-in options,
and two icons. Before that, I'm going to create a panel and
put all of these inside it. By doing this, if this part needs to be hidden
for some reason later, it can be handled very easily. The menu_panel I created is just an lv object
and it can contain all lv widgets. The first screen object I created was also
an lv object. Let's create a sign-in label. The menu_panel becomes the parent widget at
this time. Now creating text labels is very simple. Since the parent widget of this label is menu_panel,
the baseline of the alignment is also menu_panel. Align to the top of menu_panel. The menu panel also needs style. Let's create a style with a border of 0 and
no background color. Also, set the padding to 0 so there is no
margin. Please don't forget to apply it to menu_panel. Now let's create two image buttons. Since this also uses an image, LV_IMAGE_DECLARE
must be used. The image button allows you to create a button
with animation by adding various images. Additionally, you can create more effects
by changing the images for each button state. Here I will only create the simplest image
button. And finally, align the button's position to
both bottom ends of the menu_panel. This completes the screen. To build and flash it to your device
Because the image files are large, so need to select a huge app
in the partition settings. After that, you can build and install it on
your device. Layout composition is really fun. With just a few practices, you can create
a great UI. Also, I believe it's the reason why we need
LVGL. In the next episode, let's try to add some
code needed to interact with the UI created today. That's it for today. See you in the next episode.
