{"id":15945,"date":"2023-09-18T11:11:18","date_gmt":"2023-09-18T05:41:18","guid":{"rendered":"https:\/\/fastbitlab.com\/?p=15945"},"modified":"2023-09-18T11:11:18","modified_gmt":"2023-09-18T05:41:18","slug":"stm32-ltdc-lcd-tft-lvglmcu3-rgb-sliders-creation-alignment-user-interfaceui-design","status":"publish","type":"post","link":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-rgb-sliders-creation-alignment-user-interfaceui-design\/","title":{"rendered":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 57| Exercise implementation on simulator part-2"},"content":{"rendered":"
\n
\n
\n
<\/div>\n
\n

 <\/p>\n

RGB Sliders Creation, Alignment, and Customization<\/strong><\/span><\/h1>\n
\n
\n
\n
<\/div>\n

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

In this article, we’ll delve into the implementation of RGB sliders on a simulator interface. These sliders are a key component in creating an interactive RGB color mixer.<\/span><\/p>\n

In our user interface (UI) design, we aim to build three sliders, each responsible for adjusting one of the RGB color components: Red (R), Green (G), and Blue (B). Let’s get started.<\/span><\/p>\n

\"Figure
Figure 1. RGB Mixer demo<\/figcaption><\/figure>\n

 <\/p>\n

 <\/p>\n

Creating the Red Slider<\/span><\/strong><\/span><\/p>\n

Our first task is to create the slider for the Red component (R). We can achieve this with the following code snippet:<\/p>\n

lv_obj_t<\/span>* slider_r = lv_slider_create(lv_scr_act());<\/b><\/p>\n

Here, <\/span>slider_r<\/span> is a variable that will store the slider object. By using <\/span>lv_slider_create()<\/span>, we create the slider itself. The <\/span>lv_scr_act()<\/span> function is used to mention the parent of the slider, which means the slider will be placed on the active screen.<\/span><\/p>\n

#include<\/span>\"lvgl\/lvgl.h\"<\/span>\r\nvoid<\/span> rgb_mixer_create_ui(void<\/span>)<\/span>\r\n{<\/span>\r\n    \/*Create sliders*\/<\/span>\r\n     lv_obj_t<\/span>* slider_r = lv_slider_create(lv_scr_act());<\/span>\r\n}<\/span><\/pre>\n
 Creating a Slider<\/p>\n
 <\/p>\n
After running the code, you can see the result in Figure 2, where the slider is successfully created and displayed. <\/span>A slider is a child of the parent, that is the screen. That’s why, when you display the screen, it also displays its child. Screen’s child is a slider. <\/span><\/span><\/p>\n
\"Figure
Figure 2. Output<\/figcaption><\/figure>\n
 <\/p>\n
With these steps, we’ve successfully created the first slider. Now, let’s proceed to create sliders for Green and Blue using a similar approach.<\/p>\n
We create the variables <\/span>slider_g<\/span> and <\/span>slider_b<\/span> to represent the Green and Blue sliders. We use the<\/span> lv_slider_create(<\/span>)<\/span> function again, and as before, they will be created as children of the screen.<\/span><\/p>\n
#include<\/span>\"lvgl\/lvgl.h\"<\/span>\r\nvoid<\/span> rgb_mixer_create_ui(void<\/span>)<\/span>\r\n{<\/span>\r\n     \/*Create sliders*\/<\/span>\r\n    lv_obj_t<\/span>* slider_r = lv_slider_create(lv_scr_act());<\/span>\r\n    lv_obj_t<\/span>* slider_g = lv_slider_create(lv_scr_act());<\/span>\r\n    lv_obj_t<\/span>* slider_b = lv_slider_create(lv_scr_act());<\/span>\r\n}<\/span><\/pre>\n
Slider creation for R, G, B<\/p>\n
Slider creation for R, G, B<\/span><\/strong><\/p>\n
After running the code, you will notice that all three sliders are created, but by default, they are stacked on top of each other. <\/span> <\/span><\/p>\n
As a result, it’s not clear which slider corresponds to each RGB component. To address this, we need to position them separately.<\/span><\/p>\n
 <\/p>\n
\"Figure
Figure 3. Output<\/figcaption><\/figure>\n
To avoid confusion, let’s focus on one slider at a time, and then activate the others when needed. This way, we can differentiate between the RGB sliders easily.<\/span><\/p>\n
In summary, this article guides us through the process of creating sliders for RGB values. After creating the sliders, we need to arrange them properly on the screen to avoid overlap. By following the steps provided, you will be able to create and manage the sliders effectively.<\/span><\/p>\n
 <\/p>\n
 <\/p>\n
Aligning the Sliders<\/span><\/p>\n
In Figure 4, you can observe some alignments in the RGB Mixer UI. To achieve such alignments, we need to explore object alignment techniques.<\/span><\/p>\n
As you can observe, there are both y and x offsets. How can we achieve this? To achieve this, you have to explore object alignment.  <\/span><\/p>\n
\"Figure
Figure 4.RGB Mixer UI<\/figcaption><\/figure>\n
You won’t find any function like lv_slider_align or anything of the sort. Because it’s a basic property, that’s why, you have to use lv_obj_align.<\/span><\/p>\n
In the <\/span>LVGL documentation<\/span><\/a><\/span> (version 8.3), you’ll find a segment titled <\/span>Alignment<\/b><\/span> within the Base object section. This is where you can utilize the lv_obj_align function.<\/span><\/p>\n
Now, let’s employ the lv_obj_align function. Specify the desired alignment type. In this case, I’ll use LV_ALIGN_TOP_MID.<\/span><\/p>\n
\"Figure
Figure 5. Base object alignment<\/figcaption><\/figure>\n
 <\/p>\n
void<\/span> rgb_mixer_create_ui(void<\/span>)<\/span>\r\n{<\/span>\r\n\r\n \/*Create sliders*\/<\/span><\/strong>\r\n     lv_obj_t<\/span>* slider_r = lv_slider_create(lv_scr_act());\r\n<\/span>     lv_obj_t<\/span>* slider_g = lv_slider_create(lv_scr_act());<\/span>\r\n     lv_obj_t<\/span>* slider_b = lv_slider_create(lv_scr_act());<\/span>\r\n\r\n\r\n \/*Align sliders*\/<\/span><\/strong>\r\n     lv_obj_align(slider_r,LV_ALIGN_TOP_MID,0, 40);<\/span>\r\n     lv_obj_align_to(slider_g, slider_r, LV_ALIGN_TOP_MID,0,40);<\/span>\r\n     lv_obj_align_to(slider_b, slider_g, LV_ALIGN_TOP_MID, 0, 40);<\/span>\r\n\r\n\r\n\/* Create a base object to use it as rectangle *\/<\/span><\/strong>\r\n     lv_obj_t<\/span>* rect = lv_obj_create(lv_scr_act());<\/span>\r\n     lv_obj_set_size(rect, 300, 80);<\/span>\r\n     lv_obj_align_to(rect, slider_b, LV_ALIGN_TOP_MID, 0, 30);\r\n<\/span>}<\/span><\/pre>\n
 <\/p>\n
Slider Creation:<\/strong><\/span><\/p>\n