How to change rectangle’s color based on the RGB sliders values?

In this article, we’ll continue working on our callback function to update the base object, which is a rectangle. Our goal is to dynamically change this rectangle’s color based on the RGB sliders’ values.

How to change rectangle’s color based on the RGB sliders values?

We’ll introduce static variables r, g, and b to store the color components to achieve this. These variables will help us maintain the current color state as we adjust the sliders. Here’s how we can implement this:

// Static variables to store color components
     Static uint8_t r, g, b; 

// Update the color components based on the slider type

     if (user_data->slider_type == SLIDER_R) 
     {
            r = value;
     }
     else if(user_data->slider_type == SLIDER_G)
    {
            g = value;
    }
   else if (user_data->slider_type == SLIDER_B) 
   {
           b = value;
  }

// Update the background color of the rectangle
      lv_obj_set_style_bg_color(rect,lv_color_make(r,g,b),LV_PART_MAIN);

To ensure that the rect variable is accessible within our callback function, we can make it a global variable.

Now, let’s create a color using the updated RGB components. We’ll use the lv_color_make function, specifying r, g, and b as arguments, and apply this color to the main part of the base object using lv_obj_set_style_bg_color. Here, we assume that rect is a global variable (rect represents the rectangle).

This approach will dynamically update the background color of the rectangle as the RGB sliders are adjusted.

Get the Mastering Microcontroller: STM32-LTDC, LCD-TFT, LVGL full course on Here.

FastBit Embedded Brain Academy Courses

https://fastbitlab.com/course1