{"id":16132,"date":"2023-10-20T14:05:02","date_gmt":"2023-10-20T08:35:02","guid":{"rendered":"https:\/\/fastbitlab.com\/?p=16132"},"modified":"2023-10-20T14:05:02","modified_gmt":"2023-10-20T08:35:02","slug":"stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl","status":"publish","type":"post","link":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/","title":{"rendered":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 61| Exercise implementation on simulator part-6"},"content":{"rendered":"
\n
\n
\n
<\/div>\n
\n

 <\/p>\n

Creating an RGB Mixer UI with LVGL Slider Callbacks<\/b><\/span><\/h1>\n
\n
\n
\n
<\/div>\n

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

This tutorial will demonstrate how to add a callback to a slider widget in LVGL for creating an RGB Mixer UI. The callback will be invoked whenever the slider’s value changes.<\/span><\/p>\n

In this UI (Figure 1), whenever you drag the slider, whenever you leave the slider, a widget may generate many events.<\/span><\/p>\n

All those events are sent to the callback if the callback is implemented. <\/span><\/p>\n

This callback function will be triggered whenever the user interacts with the slider.<\/span><\/p>\n

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

But we don’t have any callbacks here. You can add one using the function lv_obj_add_event_callback.<\/span><\/p>\n

So, what are all the events a slider generates? Let’s see. For that, you can go to the LVGL documentation(8.3) Widget section, go to the Slider, and you can click on Events.<\/span><\/p>\n

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

 <\/p>\n

\"Creating
Figure 2. Events<\/figcaption><\/figure>\n

LV_EVENT_VALUE_CHANGED:<\/b><\/span> This event is generated when the slider’s value changes. It is the most commonly used event for sliders. You can register a callback function to handle this event, and the callback will be triggered whenever the slider’s value changes. This event is essential when you want to respond to the user’s interaction with the slider.<\/span><\/p>\n

LV_EVENT_PRESSED:<\/span> <\/b>This event is generated when the user starts pressing (clicks or touches) the slider. It can be useful if you want to perform some action when the user starts interacting with the slider, such as updating a display or initiating a specific operation.<\/span><\/p>\n

LV_EVENT_RELEASED:<\/span> <\/b>This event is generated when the user releases the slider after interacting with it. It can be useful to perform specific actions when the user stops interacting with the slider.<\/span><\/p>\n

These event callbacks allow you to respond to different interactions with the slider widget. <\/span><\/p>\n

Please note that the exact details and functions may have evolved in newer versions of LVGL, so it’s important to refer to the latest documentation for the most accurate and up-to-date information.<\/span><\/p>\n

 <\/p>\n

Adding Callbacks<\/b>:<\/b><\/span><\/p>\n

Let’s see how to add a callback. <\/span><\/p>\n

To add a callback function to a slider, you can use lv_obj_add_event_cb<\/strong>. It associates a callback function with a specific event type for the given LVGL object.<\/span><\/p>\n

Simple slider example<\/span><\/strong><\/span><\/p>\n

\/*Create a slider in the center of the display*\/ <\/span><\/strong>\r\n\r\nlv_obj_t * slider = lv_slider_create(lv_scr_act());<\/span>\r\n\r\nlv_obj_center(slider); <\/span>\r\n\r\nlv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);<\/b><\/span><\/pre>\n
lv_obj_add_event_cb<\/b>: <\/b><\/span>This function is used to add an event callback to an LVGL object. It allows you to specify a function (<\/span>slider_event_cb<\/span>) that will be called when a particular event occurs on the object.<\/span><\/p>\n
slider<\/b>:<\/b><\/span> This is the LVGL object (in this case, a slider) to which you want to add the event callback.<\/span><\/p>\n
slider_event_cb<\/b>:<\/b><\/span> This is the name of the callback function that you want to associate with the slider. This function should have a specific signature to handle events, typically accepting two parameters: the object that triggered the event and the event type.<\/span><\/p>\n
LV_EVENT_VALUE_CHANGED<\/b>:<\/b><\/span> This parameter specifies the type of event you want to listen for. In this case, <\/span>LV_EVENT_VALUE_CHANGED<\/span> is an event type that is triggered when the value of the slider changes. It’s a common event used with sliders to detect when the user interacts with the slider and moves its handle to a new position.<\/span><\/p>\n
NULL<\/b>:<\/b><\/span> This parameter is typically used to pass user data to the callback function. In this code snippet, it’s set to <\/span>NULL<\/span>, indicating that no specific user data is being passed to the <\/span>slider_event_cb<\/span> function. If you need to pass additional information to your callback function, you can replace <\/span>NULL<\/span> with a pointer to the data you want to pass.<\/span><\/p>\n
 <\/p>\n
 <\/p>\n
How many callback functions do we need to implement?<\/span><\/strong><\/p>\n
Only one remembers that. It doesn’t matter which slider is being dragged, we want one callback function to be called, and there we will examine the values of all three sliders, and we have to update the color of the rectangle.<\/span><\/p>\n
 <\/p>\n
Callback Function<\/b>:<\/span><\/span><\/p>\n
void slider_callback<\/span>(lv_event_t* e)<\/b>\r\n\r\n{<\/b>\r\n\r\n   <\/b> static uint8_t r, g, b;<\/span>\r\n\r\n    lv_obj_t* slider = lv_event_get_target(e);<\/span>\r\n\r\n    rgb_mixer_t* user_data = lv_event_get_user_data(e);<\/span>\r\n\r\n    int32_t value = lv_slider_get_value(slider);<\/span>\r\n\r\n    lv_label_set_text_fmt(user_data->label, \"%d\", value);<\/span>\r\n\r\n     }<\/span><\/pre>\n
Your callback function must be of lv_event_t type, which is a function pointer that receives a pointer to the lvgl event.<\/span><\/p>\n
static uint8_t r, g, b;<\/b><\/span> Static variables are declared to store the red, green, and blue (RGB) values.<\/span><\/p>\n
lv_obj_t* slider = lv_event_get_target(e);<\/b><\/span>: This line retrieves a pointer to the slider object that triggered the event.<\/span><\/p>\n
rgb_mixer_t* user_data = lv_event_get_user_data(e);<\/b><\/span>: Here, the user_data pointer is obtained from the event. It should contain information about the slider’s type and label.<\/span><\/p>\n
int32_t value = lv_slider_get_value(slider);<\/b><\/span>: The current value of the slider is retrieved.<\/span><\/p>\n
lv_label_set_text_fmt(user_data->label, “%d”, value);<\/b><\/span>: The value is converted to a string and displayed on the associated label.<\/span><\/p>\n
The <\/span>slider_callback<\/b><\/span> function is designed to respond to changes in slider values by updating the associated label and adjusting RGB color components accordingly. It is a common pattern for handling user interface events in LVGL-based applications.<\/span><\/p>\n
 <\/p>\n
Now, let’s register this callback. A callback function, slider_callback, is registered for three sliders: slider_r, slider_g, and slider_b. The callback is triggered when the event type LV_EVENT_VALUE_CHANGED occurs, which indicates that the value of the respective slider has changed.<\/span><\/p>\n
To provide additional context to the callback function, user data is being sent. The user data is the address of variables r, g, and b, allowing the callback to access and manipulate these variables when called.<\/span><\/p>\n
lv_obj_add_event_cb(slider_r, slider_callback, LV_EVENT_VALUE_CHANGED, &r);     <\/b><\/span><\/p>\n
lv_obj_add_event_cb(slider_g, slider_callback, LV_EVENT_VALUE_CHANGED, &g);<\/b><\/span><\/p>\n
lv_obj_add_event_cb(slider_b, slider_callback, LV_EVENT_VALUE_CHANGED, &b);<\/b><\/span><\/p>\n
This setup ensures that when any of the sliders (red, green, or blue) is manipulated, the same slider_callback function is invoked, and it can modify the corresponding color value (r, g, or b) based on the slider’s new value.<\/span><\/p>\n
 <\/p>\n
Since we are using only one callback, we need this field <\/span>slider_type<\/b>. <\/span><\/p>\n
 typedef struct {<\/b><\/span><\/p>\n
     uint8_t slider_type;<\/b><\/span><\/p>\n
     lv_obj_t* label;<\/b><\/span><\/p>\n
    } rgb_mixer_t;<\/b><\/span><\/p>\n
So, we want to understand which slider is being dragged. That’s why I think we should also populate this field.<\/span><\/p>\n
 Let’s initialize the slider_type field for each slider as follows:<\/span><\/p>\n
r.slider_type = SLIDER_R;<\/b><\/span><\/p>\n
g.slider_type = SLIDER_G;<\/b><\/span><\/p>\n
b.slider_type = SLIDER_B;<\/b><\/span><\/p>\n
 <\/p>\n
 <\/p>\n
Additionally, we need to initialize the <\/span>label<\/span> field for each slider:<\/span><\/p>\n
    <\/span>r.label = lv_label_create(lv_scr_act());<\/span>\r\n\r\n    lv_label_set_text(r.label, \"0\");<\/span>\r\n\r\n    lv_obj_align_to(r.label, slider_r, LV_ALIGN_TOP_MID, 0, 0);<\/span>\r\n\r\n\r\n\r\n\r\n    g.label = lv_label_create(lv_scr_act());<\/span>\r\n\r\n    lv_label_set_text(g.label, \"0\");<\/span>\r\n\r\n    lv_obj_align_to(g.label, slider_g, LV_ALIGN_TOP_MID, 0, 0);<\/span>\r\n\r\n\r\n\r\n\r\n    b.label = lv_label_create(lv_scr_act());<\/span>\r\n\r\n    lv_label_set_text(b.label, \"0\");<\/span>\r\n\r\n    lv_obj_align_to(b.label, slider_b, LV_ALIGN_TOP_MID, 0, 0);<\/span><\/pre>\n
 <\/p>\n
Execute the code.<\/span><\/p>\n
 <\/p>\n
Output<\/b><\/span><\/p>\n
In Figure 3, you can observe that the slider’s range goes from 0 to 100. <\/span><\/p>\n
\"Creating
Figure 3. Output<\/figcaption><\/figure>\n
However, our requirement is for it to span from 0 to 255. Adjusting the slider range is a special attribute, which can be set using the <\/span>lv_slider_set_range<\/strong><\/span> function.<\/span><\/p>\n
If you’re wondering where the slider was created, it should have been created prior to the code provided, likely in an earlier part of your program.<\/span><\/p>\n
In the upcoming lecture, we will cover how to update the rectangle’s background color in response to the slider values.<\/span><\/p>\n
 <\/p>\n
Code<\/b><\/span><\/p>\n
#include\"lvgl\/lvgl.h\"<\/span>\r\n\r\n\r\nenum { SLIDER_R = 0, SLIDER_G, SLIDER_B };<\/span>\r\n\r\n\r\n\r\ntypedef struct {<\/span>\r\n\r\n    uint8_t slider_type;<\/span>\r\n\r\n    lv_obj_t* label;<\/span>\r\n\r\n}rgb_mixer_t;<\/span>\r\n\r\n\r\n\r\n\r\nlv_obj_t* rect;<\/span>\r\n\r\n\r\nvoid slider_callback(lv_event_t* e)<\/span>\r\n\r\n{<\/span>\r\n\r\n    static uint8_t r, g, b;<\/span>\r\n\r\n    lv_obj_t* slider = lv_event_get_target(e);<\/span>\r\n\r\n    rgb_mixer_t* user_data = lv_event_get_user_data(e);<\/span>\r\n\r\n    int32_t value = lv_slider_get_value(slider);<\/span>\r\n\r\n    lv_label_set_text_fmt(user_data->label, \"%d\", value);<\/span>\r\n\r\n    }<\/span>\r\n\r\n\r\n\r\n\r\n   <\/span>void rgb_mixer_create_ui(void)<\/span>\r\n\r\n{<\/span>\r\n\r\n    static rgb_mixer_t r, g, b;<\/span>\r\n\r\n    r.slider_type = SLIDER_R;<\/span>\r\n\r\n    g.slider_type = SLIDER_G;<\/span>\r\n\r\n    b.slider_type = SLIDER_B;<\/span>\r\n\r\n\r\n\r\n\r\n    \/*Create sliders*\/<\/span><\/strong><\/span>\r\n\r\n    lv_obj_t* slider_r = lv_slider_create(lv_scr_act());<\/span>\r\n\r\n    lv_obj_t* slider_g = lv_slider_create(lv_scr_act());<\/span>\r\n\r\n    lv_obj_t* slider_b = lv_slider_create(lv_scr_act());<\/span>\r\n\r\n\r\n\r\n\r\n    \/*Set value range for sliders*\/<\/strong><\/span><\/span>\r\n\r\n    lv_slider_set_range(slider_r, 0, 255);<\/span>\r\n\r\n    lv_slider_set_range(slider_g, 0, 255);<\/span>\r\n\r\n    lv_slider_set_range(slider_b, 0, 255);<\/span>\r\n\r\n\r\n\r\n\r\n    \/*Align sliders*\/<\/strong><\/span><\/span>\r\n\r\n    lv_obj_align(slider_r,LV_ALIGN_TOP_MID,0, 40);<\/span>\r\n\r\n    lv_obj_align_to(slider_g, slider_r, LV_ALIGN_TOP_MID,0,40);<\/span>\r\n\r\n    lv_obj_align_to(slider_b, slider_g, LV_ALIGN_TOP_MID, 0, 40);<\/span>\r\n\r\n\r\n\r\n\r\n    \/* Create a base object to use it as rectangle *\/<\/strong><\/span><\/span>\r\n\r\n    rect = lv_obj_create(lv_scr_act());<\/span>\r\n\r\n    lv_obj_set_size(rect, 300, 80);<\/span>\r\n\r\n    lv_obj_align_to(rect, slider_b, LV_ALIGN_TOP_MID, 0, 30);<\/span>\r\n\r\n    lv_obj_set_style_border_color(rect, lv_color_black(), LV_PART_MAIN);<\/span>\r\n\r\n    lv_obj_set_style_border_width(rect, 5, LV_PART_MAIN);<\/span>\r\n\r\n\r\n\r\n\r\n    \/*Setting background color to the various parts of the slider*\/<\/strong><\/span><\/span>\r\n\r\n    lv_obj_set_style_bg_color(slider_r,lv_palette_main(LV_PALETTE_RED),LV_PART_INDICATOR);<\/span>\r\n\r\n    lv_obj_set_style_bg_color(slider_r, lv_palette_main(LV_PALETTE_RED), LV_PART_KNOB);<\/span>\r\n\r\n    lv_obj_set_style_bg_color(slider_g, lv_palette_main(LV_PALETTE_GREEN), LV_PART_INDICATOR);<\/span>\r\n\r\n    lv_obj_set_style_bg_color(slider_g, lv_palette_main(LV_PALETTE_GREEN), LV_PART_KNOB);<\/span>\r\n\r\n    lv_obj_set_style_bg_color(slider_b, lv_palette_main(LV_PALETTE_BLUE), LV_PART_INDICATOR);<\/span>\r\n\r\n    lv_obj_set_style_bg_color(slider_b, lv_palette_main(LV_PALETTE_BLUE), LV_PART_KNOB);<\/span>\r\n\r\n\r\n\r\n\r\n    lv_obj_t* heading = lv_label_create(lv_scr_act());<\/span>\r\n\r\n    lv_label_set_text(heading,\"RGB Mixer\");<\/span>\r\n\r\n    lv_obj_align(heading,LV_ALIGN_TOP_MID,0,10);<\/span>\r\n\r\n\r\n\r\n\r\n    r.label = lv_label_create(lv_scr_act());<\/span>\r\n\r\n    lv_label_set_text(r.label, \"0\");<\/span>\r\n\r\n    lv_obj_align_to(r.label, slider_r, LV_ALIGN_TOP_MID, 0, 0);<\/span>\r\n\r\n\r\n\r\n\r\n    g.label = lv_label_create(lv_scr_act());<\/span>\r\n\r\n    lv_label_set_text(g.label, \"0\");<\/span>\r\n\r\n    lv_obj_align_to(g.label, slider_g, LV_ALIGN_TOP_MID, 0, 0);\r\n<\/span>    \r\n\r\n\r\n    b.label = lv_label_create(lv_scr_act());<\/span>\r\n\r\n    lv_label_set_text(b.label, \"0\");<\/span>\r\n\r\n    lv_obj_align_to(b.label, slider_b, LV_ALIGN_TOP_MID, 0, 0);<\/span>\r\n\r\n    lv_obj_add_event_cb(slider_r, slider_callback, LV_EVENT_VALUE_CHANGED, &r);<\/span>\r\n\r\n    lv_obj_add_event_cb(slider_g, slider_callback, LV_EVENT_VALUE_CHANGED, &g);<\/span>\r\n\r\n    lv_obj_add_event_cb(slider_b, slider_callback, LV_EVENT_VALUE_CHANGED, &b);<\/span>\r\n\r\n <\/span>\r\n\r\n}<\/span><\/pre>\n
 <\/p>\n
 <\/p>\n
FastBit Embedded Brain Academy Courses<\/strong><\/span><\/p>\n
 <\/p>\n<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
  Creating an RGB Mixer UI with LVGL Slider Callbacks   This tutorial will demonstrate how to add a callback to a slider widget in LVGL for creating an RGB Mixer UI. The callback will be invoked whenever the slider’s value changes. In this UI (Figure 1), whenever you drag the slider, whenever you leave […]<\/p>\n","protected":false},"author":1,"featured_media":16137,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"off","ocean_gallery_id":[],"footnotes":""},"categories":[8],"tags":[],"class_list":["post-16132","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","entry","has-media"],"yoast_head":"\nHow to add a callback to a slider widget in LVGL?<\/title>\n<meta name=\"description\" content=\"Learn how to add event callbacks to LVGL slider widgets to create an RGB Mixer user interface. The tutorial explains how to register callback\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add a callback to a slider widget in LVGL?\" \/>\n<meta property=\"og:description\" content=\"Learn how to add event callbacks to LVGL slider widgets to create an RGB Mixer user interface. The tutorial explains how to register callback\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/\" \/>\n<meta property=\"og:site_name\" content=\"FastBit EBA\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/fastbiteba\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-20T08:35:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/10\/Figure-3-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"605\" \/>\n\t<meta property=\"og:image:height\" content=\"429\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"FastBitLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fastbiteba\" \/>\n<meta name=\"twitter:site\" content=\"@fastbiteba\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"FastBitLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\\\/\"},\"author\":{\"name\":\"FastBitLab\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/person\\\/e32b38e733a0d76ffa7e6bc998652e5d\"},\"headline\":\"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 61| Exercise implementation on simulator part-6\",\"datePublished\":\"2023-10-20T08:35:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\\\/\"},\"wordCount\":1259,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/Figure-3-1.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\\\/\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\\\/\",\"name\":\"How to add a callback to a slider widget in LVGL?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/Figure-3-1.png\",\"datePublished\":\"2023-10-20T08:35:02+00:00\",\"description\":\"Learn how to add event callbacks to LVGL slider widgets to create an RGB Mixer user interface. The tutorial explains how to register callback\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\\\/#primaryimage\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/Figure-3-1.png\",\"contentUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/Figure-3-1.png\",\"width\":605,\"height\":429,\"caption\":\"Figure 3. Output\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 61| Exercise implementation on simulator part-6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\",\"name\":\"FastBit EBA\",\"description\":\"Your Online Academy of Embedded Systems\",\"publisher\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\",\"name\":\"FastBit EBA\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-EzNrEnyr.png\",\"contentUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-EzNrEnyr.png\",\"width\":640,\"height\":640,\"caption\":\"FastBit EBA\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/fastbiteba\\\/\",\"https:\\\/\\\/x.com\\\/fastbiteba\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/fastbit-embedded-brain-academy-b3167b124\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCa1REBV9hyrzGp2mjJCagBg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/person\\\/e32b38e733a0d76ffa7e6bc998652e5d\",\"name\":\"FastBitLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"caption\":\"FastBitLab\"},\"description\":\"The FastBit Embedded Brain Academy uses the power of internet to bring the online courses related to the field of embedded system programming, Real time operating system, Embedded Linux systems, etc at your finger tip with very low cost. Backed with strong experience of industry, we have produced lots of courses with the customer enrolment over 3000+ across 100+ countries.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add a callback to a slider widget in LVGL?","description":"Learn how to add event callbacks to LVGL slider widgets to create an RGB Mixer user interface. The tutorial explains how to register callback","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/","og_locale":"en_US","og_type":"article","og_title":"How to add a callback to a slider widget in LVGL?","og_description":"Learn how to add event callbacks to LVGL slider widgets to create an RGB Mixer user interface. The tutorial explains how to register callback","og_url":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/","og_site_name":"FastBit EBA","article_publisher":"https:\/\/www.facebook.com\/fastbiteba\/","article_published_time":"2023-10-20T08:35:02+00:00","og_image":[{"width":605,"height":429,"url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/10\/Figure-3-1.png","type":"image\/png"}],"author":"FastBitLab","twitter_card":"summary_large_image","twitter_creator":"@fastbiteba","twitter_site":"@fastbiteba","twitter_misc":{"Written by":"FastBitLab","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/#article","isPartOf":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/"},"author":{"name":"FastBitLab","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/person\/e32b38e733a0d76ffa7e6bc998652e5d"},"headline":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 61| Exercise implementation on simulator part-6","datePublished":"2023-10-20T08:35:02+00:00","mainEntityOfPage":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/"},"wordCount":1259,"commentCount":1,"publisher":{"@id":"https:\/\/fastbitlab.com\/blog\/#organization"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/#primaryimage"},"thumbnailUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/10\/Figure-3-1.png","articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/","url":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/","name":"How to add a callback to a slider widget in LVGL?","isPartOf":{"@id":"https:\/\/fastbitlab.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/#primaryimage"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/#primaryimage"},"thumbnailUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/10\/Figure-3-1.png","datePublished":"2023-10-20T08:35:02+00:00","description":"Learn how to add event callbacks to LVGL slider widgets to create an RGB Mixer user interface. The tutorial explains how to register callback","breadcrumb":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/#primaryimage","url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/10\/Figure-3-1.png","contentUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/10\/Figure-3-1.png","width":605,"height":429,"caption":"Figure 3. Output"},{"@type":"BreadcrumbList","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-add-a-callback-to-a-slider-widget-in-lvgl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fastbitlab.com\/blog\/"},{"@type":"ListItem","position":2,"name":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 61| Exercise implementation on simulator part-6"}]},{"@type":"WebSite","@id":"https:\/\/fastbitlab.com\/blog\/#website","url":"https:\/\/fastbitlab.com\/blog\/","name":"FastBit EBA","description":"Your Online Academy of Embedded Systems","publisher":{"@id":"https:\/\/fastbitlab.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fastbitlab.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/fastbitlab.com\/blog\/#organization","name":"FastBit EBA","url":"https:\/\/fastbitlab.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2026\/04\/logo-EzNrEnyr.png","contentUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2026\/04\/logo-EzNrEnyr.png","width":640,"height":640,"caption":"FastBit EBA"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/fastbiteba\/","https:\/\/x.com\/fastbiteba","https:\/\/www.linkedin.com\/in\/fastbit-embedded-brain-academy-b3167b124\/","https:\/\/www.youtube.com\/channel\/UCa1REBV9hyrzGp2mjJCagBg"]},{"@type":"Person","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/person\/e32b38e733a0d76ffa7e6bc998652e5d","name":"FastBitLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","caption":"FastBitLab"},"description":"The FastBit Embedded Brain Academy uses the power of internet to bring the online courses related to the field of embedded system programming, Real time operating system, Embedded Linux systems, etc at your finger tip with very low cost. Backed with strong experience of industry, we have produced lots of courses with the customer enrolment over 3000+ across 100+ countries."}]}},"_links":{"self":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/16132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/comments?post=16132"}],"version-history":[{"count":5,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/16132\/revisions"}],"predecessor-version":[{"id":16154,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/16132\/revisions\/16154"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/media\/16137"}],"wp:attachment":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/media?parent=16132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/categories?post=16132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/tags?post=16132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
https:\/\/fastbitlab.com\/course1<\/a><\/span><\/p>\n