{"id":16102,"date":"2023-10-16T11:38:26","date_gmt":"2023-10-16T06:08:26","guid":{"rendered":"https:\/\/fastbitlab.com\/?p=16102"},"modified":"2023-10-16T11:38:26","modified_gmt":"2023-10-16T06:08:26","slug":"stm32-ltdc-lcd-tft-lvglmcu3-lecture-60-exercise-implementation-on-simulator-part-5","status":"publish","type":"post","link":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-lecture-60-exercise-implementation-on-simulator-part-5\/","title":{"rendered":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 60| Exercise implementation on simulator part-5"},"content":{"rendered":"
\n
\n
\n
<\/div>\n
\n

 <\/p>\n

Creating Labels in LVGL<\/strong><\/span><\/h1>\n
\n
\n
\n
<\/div>\n

 <\/p>\n<\/div>\n<\/div>\n<\/div>\n

In this article, let’s understand how to add some labels. <\/span><\/p>\n

 <\/p>\n

Before you can add labels, you need to initialize LVGL. This typically involves configuring the display driver, input devices, and initializing LVGL itself. Make sure you have LVGL set up and running in your project.<\/span><\/p>\n

Create a Container or Screen:<\/b><\/span><\/p>\n

Labels are usually placed inside containers or screens. You can create a container using the lv_cont_create<\/strong> function or the main screen (lv_scr_act())<\/strong>.<\/span><\/p>\n

 <\/p>\n

Create a Label:<\/b><\/span><\/p>\n

To create a label, you can use the lv_label_create<\/strong> function. This function returns a pointer to the label object.<\/span><\/p>\n

 <\/p>\n

Set Label Text:<\/b><\/span><\/p>\n

You can set the text displayed by the label using the lv_label_set_text<\/strong> function.<\/span><\/p>\n

 <\/p>\n

Position and Align the Label:<\/b><\/span><\/p>\n

You can use the lv_obj_align<\/strong> or lv_obj_set_pos<\/strong> function to position the label within the container or screen.<\/span><\/p>\n

 <\/p>\n

Create a label for the heading “RGB Mixer”<\/b><\/span><\/p>\n

\/\/ Create a label for the heading \"RGB Mixer.\" <\/span>\r\n\r\n  <\/b>  <\/b>lv_obj_t<\/b>* heading = lv_label_create(lv_scr_act());<\/b>\r\n\r\n\/<\/span>\/ Set the text for the heading label<\/span><\/span>\r\n\r\n    lv_label_set_text(heading, \"RGB Mixer\");<\/b>\r\n\r\n\/\/ Align the heading label to the top center with a y offset of 10<\/span>\r\n\r\n    lv_obj_align(heading, LV_ALIGN_TOP_MID, 0, 10);<\/b><\/pre>\n
 <\/p>\n
Output<\/b><\/span><\/p>\n
The output “RGB Mixer” label is shown in Figure 1.<\/span><\/p>\n
Here, we create a label object for the “RGB Mixer” heading and position it at the top center with a slight y-offset.<\/span><\/p>\n
\"Figure
Figure 1. \u201cRGB Mixer\u201d label<\/figcaption><\/figure>\n
 <\/p>\n
Create labels for R, G, and B values<\/b><\/span><\/p>\n
Let’s create the remaining labels, as shown in Figure 2. (like 88, 255, 0) <\/span><\/p>\n
\"Figure
Figure 2. Demo<\/figcaption><\/figure>\n
These labels should be updated during sliding. That’s why let’s create the handles globally. Because when you use the slider, there will be a callback, and we have to update that label in the callback.<\/span><\/p>\n
For that, let’s do one thing. Let’s create one structure called rgb_mixer_t, which has one member element called label and slider_type. <\/span><\/p>\n
And slider_type is nothing but just an enum of SLIDER_R, SLIDER_G and SLIDER_B.<\/span><\/p>\n
 <\/p>\n
#include\"lvgl\/lvgl.h\"<\/span>\r\n\r\nenum { SLIDER_R = 0, SLIDER_G, SLIDER_B };<\/span>\r\n\r\n\/\/ Define a structure to represent RGB mixer elements<\/b><\/span>\r\n\r\ntypedef struct <\/span>{<\/span>\r\n\r\n   <\/span> uint8_t<\/span> slider_type;<\/span>\r\n\r\n    <\/span>lv_obj_t*<\/span> label;<\/span>\r\n\r\n}<\/span>rgb_mixer_t<\/span>;<\/span>\r\n\r\n\/\/ create a few objects of this structure type<\/b><\/span>\r\n\r\nRgb_mixer_t r,g,b;<\/span><\/pre>\n
 <\/p>\n
\/\/Create the first slider label<\/b><\/span>\r\n\r\n      r.label = lv_label_create(lv_scr_act());<\/span>\r\n\r\n\/\/ Set it to initially 0.<\/b><\/span>\r\n\r\n     lv_label_set_text(r.label, \"0\");<\/span>\r\n\r\n\/\/Align TOP_MID<\/b><\/span>\r\n\r\n     lv_obj_align_to(r.label, slider_r, LV_ALIGN_TOP_MID, 0, 0);<\/span><\/pre>\n
 <\/p>\n
Let’s see how this looks. You can see that it is a top mid aligned to slider_r. <\/span><\/p>\n
Output<\/b><\/span><\/p>\n
We create labels for the R, G, and B values associated with sliders. These labels are initially set to “0” and aligned to the top center of their respective sliders.<\/span><\/p>\n
\"LVGL
Figure 3. Slider_r label<\/figcaption><\/figure>\n
 <\/p>\n
Explanation of label alignment options<\/b><\/span><\/p>\n