What do you want to achieve?
I need to dynamically update some states and values of objects already rendered on the screen as I receive new data from the serial port, such as text values or styles like background color.
What have you tried so far?
I’m using PlatformIO with Arduino and creating my LVGL components within setup(), using the function:
component_cicles_sensors(lv_scr_act()),
This function creates 6 sets of 2 circles (one for “going up” and one for “going down”).
After creation, I tested it by calling the function:
update_circles_from_serial()
within the loop()
However, nothing happens on the screen — the circles don’t change color or update as expected.
What am I doing wrong?
How can I dynamically update the components (e.g., change the colors of the circles) based on new data?
Code to reproduce
const char *raise_state = "001101";
const char *lower_state = "110010";
void loop()
{
lv_tick_inc(5);
delay(5);
update_circles_from_serial(raise_state, lower_state);
delay(1000);
}
#define NUM_GROUPS 6
static lv_obj_t *circle_up[NUM_GROUPS];
static lv_obj_t *circle_down[NUM_GROUPS];
void update_circles_from_serial(const char *sensors_raise, const char *sensors_lower)
{
for (int i = 0; i < NUM_GROUPS; i++)
{
if (sensors_raise[i] == '1')
{
lv_obj_set_style_bg_color(circle_up[i], COLOR_PRIMARY, 0);
lv_obj_set_style_border_color(circle_up[i], COLOR_TERTIARY, 0);
}
else
{
lv_obj_set_style_bg_color(circle_up[i], COLOR_BACKGROUND_DISABLE, 0);
lv_obj_set_style_border_color(circle_up[i], COLOR_GREY_DARK, 0);
}
if (sensors_lower[i] == '1')
{
lv_obj_set_style_bg_color(circle_down[i], COLOR_PRIMARY, 0);
lv_obj_set_style_border_color(circle_down[i], COLOR_TERTIARY, 0);
}
else
{
lv_obj_set_style_bg_color(circle_down[i], COLOR_BACKGROUND_DISABLE, 0);
lv_obj_set_style_border_color(circle_down[i], COLOR_GREY_DARK, 0);
}
}
}
static void component_cicles_sensors(lv_obj_t *parent)
{
const int circle_size = 25;
const int positions[NUM_GROUPS][3] = {
{13, -34, -65}, // 1º grup
{214, -34, -65}, // 2º grup
{325, -26, -57}, // 3º grup
{364, -26, -57}, // 4º grup
{498, -34, -65}, // 5º grup
{743, -34, -65} // 6º grup
};
for (int i = 0; i < NUM_GROUPS; i++)
{
circle_down[i] = lv_obj_create(parent);
lv_obj_set_size(circle_down[i], circle_size, circle_size);
lv_obj_set_style_radius(circle_down[i], LV_RADIUS_CIRCLE, 0);
lv_obj_set_style_border_width(circle_down[i], 2, 0);
lv_obj_set_style_border_color(circle_down[i], COLOR_GREY_DARK, 0);
lv_obj_set_style_bg_color(circle_down[i], COLOR_BACKGROUND_DISABLE, 0);
lv_obj_set_style_pad_all(circle_down[i], 0, 0);
lv_obj_align(circle_down[i], LV_ALIGN_BOTTOM_LEFT, positions[i][0], positions[i][1]);
circle_up[i] = lv_obj_create(parent);
lv_obj_set_size(circle_up[i], circle_size, circle_size);
lv_obj_set_style_radius(circle_up[i], LV_RADIUS_CIRCLE, 0);
lv_obj_set_style_border_width(circle_up[i], 2, 0);
lv_obj_set_style_border_color(circle_up[i], COLOR_GREY_DARK, 0);
lv_obj_set_style_bg_color(circle_up[i], COLOR_BACKGROUND_DISABLE, 0);
lv_obj_set_style_pad_all(circle_up[i], 0, 0);
lv_obj_align(circle_up[i], LV_ALIGN_BOTTOM_LEFT, positions[i][0], positions[i][2]);
}
}
I didn’t include the void setup() code because it’s just the call to the component_cicles_sensors function.
Screenshot and/or video
Environment
- MCU/MPU/Board:
- LVGL version: See
v9.2.2