{"id":15998,"date":"2023-09-22T10:29:10","date_gmt":"2023-09-22T04:59:10","guid":{"rendered":"https:\/\/fastbitlab.com\/?p=15998"},"modified":"2023-09-22T10:31:08","modified_gmt":"2023-09-22T05:01:08","slug":"stm32-ltdc-lcd-tft-lvglmcu3-exercise-slider-background-colors-in-lvgl","status":"publish","type":"post","link":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-exercise-slider-background-colors-in-lvgl\/","title":{"rendered":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 58| Exercise implementation on simulator part-3"},"content":{"rendered":"
\n
\n
\n
<\/div>\n
\n

 <\/p>\n

Slider Widget Background Colors in LVGL<\/strong><\/span><\/h1>\n
\n
\n
\n
<\/div>\n

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

In this article, we use the LVGL (Light and Versatile Graphics Library) library to apply background colors to different parts of a slider widget. <\/span><\/p>\n

Before that, you must understand the widget’s different parts. For that, you have to refer to the respective widget.<\/span><\/p>\n

Lvgl documentation 8.3<\/span><\/a><\/span><\/p>\n

For example, in the Button, it has only the MAIN part. <\/span> <\/span><\/span><\/p>\n

\"Figure
Figure 1. Button widget<\/figcaption><\/figure>\n

 <\/p>\n

The checkbox widget has 2 parts here ‘Main’ and ‘Indicator’.<\/span><\/p>\n

\"Figure
Figure 2. Checkbox widget<\/figcaption><\/figure>\n

 <\/p>\n

The slider has three parts here: \u2018Main\u2019, \u2018Indicator\u2019, and \u2018Knob\u2019.<\/span><\/p>\n

\"Figure
Figure 3. Slider widget<\/figcaption><\/figure>\n

 <\/p>\n

 <\/p>\n

Background Color Configuration for Slider Parts:<\/b><\/span><\/p>\n

\"Figure
Figure 4. Slider parts<\/figcaption><\/figure>\n

We are now in the process of defining background colors for specific sections of a slider widget. In LVGL, these sections are referred to as parts. LV_PART_MAIN corresponds to the main background of the entire slider. We are utilizing an LVGL API named <\/span>lv_obj_set_style_bg_color(bg_color, part)<\/b> to achieve this.<\/span><\/span><\/p>\n

\/\/ Apply red background color to the indicator and knob parts of the red slider<\/span><\/strong>\r\nlv_obj_set_style_bg_color(slider_r, lv_palette_main(LV_PALETTE_RED),LV_PART_INDICATOR);<\/span>\r\nlv_obj_set_style_bg_color(slider_r, lv_palette_main(LV_PALETTE_RED), LV_PART_KNOB);<\/span><\/pre>\n
 <\/p>\n
Here’s a step-by-step explanation of the API usage:<\/span><\/p>\n