Even if you do lv_obj_del(), you continue to use memory

[rudgh7873]

Important: unclear posts may not receive useful answers.

Before posting

• Get familiar with Markdown to format and structure your post
• Be sure to update lvgl from the latest version from the master branch.
• Be sure you have checked the FAQ and read the relevant part of the documentation.
• If applicable use the Simulator to eliminate hardware related issues.

Delete this section if you read and applied the mentioned points.

Description

What MCU/Processor/Board and compiler are you using?

Arduino ESP32-S3

What LVGL version are you using?

8.3

What do you want to achieve?

Hi.
I’m creating a UI that represents the weather.

However, if you remove the UI for weather updates and display it again, it takes up memory.

Below is my implementation code.

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

/*You code here*/

lv_obj_t * panel;
lv_obj_t * panel1;
lv_obj_t * First_day;
lv_obj_t * Second_day;
lv_obj_t * Third_day;
lv_obj_t * Fourth_day;

void Weather(WeatherData data){
  static lv_style_t Weather_style;
  lv_style_init(&Weather_style);

  lv_style_set_bg_opa(&Weather_style, LV_OPA_COVER);
  lv_style_set_bg_color(&Weather_style, lv_color_white());
  lv_style_set_border_color(&Weather_style, lv_palette_main(LV_PALETTE_ORANGE));
  lv_style_set_border_width(&Weather_style, 2);
  lv_style_set_border_side(&Weather_style, LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_LEFT);

  panel = lv_obj_create(lv_scr_act());
  lv_obj_remove_style_all(panel);
  lv_obj_set_size(panel, 60, 380);
  lv_obj_set_pos(panel, 0, 0);
  lv_obj_add_style(panel, &Weather_style, 0);

  for(int i = 0; i < 6; i++){
    lv_obj_t *Weather_Text = lv_label_create(panel);
    if(i == 0){
      lv_label_set_text(Weather_Text, "시각");
      lv_obj_set_style_text_align(Weather_Text, LV_TEXT_ALIGN_CENTER, 0);
      lv_obj_align(Weather_Text, LV_ALIGN_CENTER, 0, -140);
    }

    if(i == 1){
      lv_label_set_text(Weather_Text, "날씨");
      lv_obj_set_style_text_align(Weather_Text, LV_TEXT_ALIGN_CENTER, 0);
      lv_obj_align(Weather_Text, LV_ALIGN_CENTER, 0, -90);
    }

    if(i == 2){
      lv_label_set_text(Weather_Text, "기온");
      lv_obj_set_style_text_align(Weather_Text, LV_TEXT_ALIGN_CENTER, 0);
      lv_obj_align(Weather_Text, LV_ALIGN_CENTER, 0, -10);
    }

    if(i == 3){
      lv_label_set_text(Weather_Text, "습도");
      lv_obj_set_style_text_align(Weather_Text, LV_TEXT_ALIGN_CENTER, 0);
      lv_obj_align(Weather_Text, LV_ALIGN_CENTER, 0, 60);
    }

    if(i == 4){
      lv_label_set_text(Weather_Text, "강수량\n(mm)");
      lv_obj_set_style_text_align(Weather_Text, LV_TEXT_ALIGN_CENTER, 0);
      lv_obj_align(Weather_Text, LV_ALIGN_CENTER, 0, 110);
    }

    if(i == 5){
      lv_label_set_text(Weather_Text, "강수\n확률");
      lv_obj_set_style_text_align(Weather_Text, LV_TEXT_ALIGN_CENTER, 0);
      lv_obj_align(Weather_Text, LV_ALIGN_CENTER, 0, 160);
    }
  }
  
  static lv_style_t Weather_Value_Style;
  lv_style_init(&Weather_Value_Style);

  lv_style_set_bg_opa(&Weather_Value_Style, LV_OPA_COVER);
  lv_style_set_bg_color(&Weather_Value_Style, lv_color_white());
  lv_style_set_border_color(&Weather_Value_Style, lv_palette_main(LV_PALETTE_ORANGE));
  lv_style_set_border_width(&Weather_Value_Style, 0);
  lv_style_set_border_side(&Weather_Value_Style, LV_BORDER_SIDE_RIGHT | LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_BOTTOM);
  
  panel1 = lv_obj_create(lv_scr_act());
  lv_obj_remove_style_all(panel1);
  lv_obj_set_size(panel1, 420, 380);
  lv_obj_set_pos(panel1, 60, 0);   
  lv_obj_add_style(panel1, &Weather_Value_Style, 0); 
  lv_obj_set_scroll_dir(panel1, LV_DIR_LEFT | LV_DIR_RIGHT);

  static lv_style_t chart_style;
  lv_style_init(&chart_style);
  lv_style_set_border_color(&chart_style, lv_color_white());

  lv_obj_t * chart;
  chart = lv_chart_create(panel1);

  lv_chart_set_div_line_count(chart, 0, 0);
  lv_obj_set_pos(chart, 15, 120);

  lv_obj_add_style(chart, &chart_style, 0);
  
  lv_chart_series_t * ser1 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_BLUE), LV_CHART_AXIS_PRIMARY_Y);
  lv_chart_set_point_count(chart, 72);
  lv_chart_set_type(chart, LV_CHART_TYPE_LINE); 
  lv_obj_set_size(chart, 4285, 110);
  lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, data.low_temp, data.high_temp); //Use the maximum and minimum temperatures to specify the range of charts
  lv_obj_clear_flag(chart, LV_OBJ_FLAG_SCROLLABLE);
  lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_CIRCULAR);
  
  int32_t pad_left = lv_obj_get_style_pad_left(chart, 0);
  lv_obj_update_layout(chart);

  int clock_zero_count = 0;
  
  int Axis_X = -180;
  for(int i = 0; i < 72; i++){
    if(i != 0)Axis_X += 60;

    if(data.Hour_data[i] == 0){
      if(clock_zero_count == 2){
        clock_zero_count = 3;
        third_axis = Axis_X + 170;
      }
      if(clock_zero_count == 1){
        clock_zero_count = 2;
        second_axis = Axis_X + 170;
      }
      if(clock_zero_count == 0){
        clock_zero_count = 1;
        first_axis = Axis_X + 170;
        if(first_axis > 200)first_vision = true;
      }
    }

    lv_obj_t *Weather_Value_Time_Text = lv_label_create(panel1);
    lv_label_set_text_fmt(Weather_Value_Time_Text, "%d시", data.Hour_data[i]);
    lv_obj_set_style_text_align(Weather_Value_Time_Text, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(Weather_Value_Time_Text, LV_ALIGN_CENTER, Axis_X, -140);

    lv_obj_t *Weather_Value_Img = lv_img_create(panel1);
    if(data.Weather_data[i] == 1){
      if(data.Hour_data[i] < 8 || data.Hour_data[i] > 17)lv_img_set_src(Weather_Value_Img, &Clear_N);
      else lv_img_set_src(Weather_Value_Img, &Clear_S);
    }
    if(data.Weather_data[i] == 2){
      if(data.Hour_data[i] < 8 || data.Hour_data[i] > 17)lv_img_set_src(Weather_Value_Img, &Mostly_Cloudy_N);
      else lv_img_set_src(Weather_Value_Img, &Mostly_Cloudy_S);
    }
    if(data.Weather_data[i] == 3)lv_img_set_src(Weather_Value_Img, &Cloudy);
    if(data.Weather_data[i] == 4)lv_img_set_src(Weather_Value_Img, &Rain); 
    if(data.Weather_data[i] == 5)lv_img_set_src(Weather_Value_Img, &Rain_Snow);
    if(data.Weather_data[i] == 6)lv_img_set_src(Weather_Value_Img, &Snow);
    if(data.Weather_data[i] == 7)lv_img_set_src(Weather_Value_Img, &shower);
    if(data.Weather_data[i] == 8)lv_img_set_src(Weather_Value_Img, &Raindrop);
    if(data.Weather_data[i] == 9)lv_img_set_src(Weather_Value_Img, &Raindrop_Snow);
    if(data.Weather_data[i] == 10)lv_img_set_src(Weather_Value_Img, &Snow_Drifting);
    lv_obj_align(Weather_Value_Img, LV_ALIGN_CENTER, Axis_X, -90);

    lv_obj_t *Weather_Value_Humidity_Text = lv_label_create(panel1);
    lv_label_set_text_fmt(Weather_Value_Humidity_Text, "%d%%", data.Humidity_data[i]);
    lv_obj_set_style_text_align(Weather_Value_Humidity_Text, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(Weather_Value_Humidity_Text, LV_ALIGN_CENTER, Axis_X, 60);

    lv_obj_t *Weather_Value_Rain_Text = lv_label_create(panel1);
    float rain = data.Rain_data[i];
    if(rain == 0)lv_label_set_text(Weather_Value_Rain_Text, "-");
    if(rain > 0 && rain < 1)lv_label_set_text(Weather_Value_Rain_Text, "~1");
    if(rain >= 1){
      char rain_str[10];
      if (rain == static_cast<int>(rain))snprintf(rain_str, sizeof(rain_str), "%d", static_cast<int>(rain));
      else dtostrf(rain, 4, 1, rain_str);
      const char* rain_const = rain_str;
      lv_label_set_text(Weather_Value_Rain_Text, rain_const);
    }
    lv_obj_set_style_text_align(Weather_Value_Rain_Text, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(Weather_Value_Rain_Text, LV_ALIGN_CENTER, Axis_X, 110);

    lv_obj_t *Weather_Value_Rain_Per_Text = lv_label_create(panel1);
    lv_label_set_text_fmt(Weather_Value_Rain_Per_Text, "%d%%", data.Rain_Per_data[i]);
    lv_obj_set_style_text_align(Weather_Value_Rain_Per_Text, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(Weather_Value_Rain_Per_Text, LV_ALIGN_CENTER, Axis_X, 160);

    lv_chart_set_next_value(chart, ser1, data.Temp_data[i]);

    lv_point_t p;
    lv_chart_get_point_pos_by_id(chart, ser1, i, &p);

    lv_obj_t *Weather_Temp_Text = lv_label_create(chart);

    lv_label_set_text_fmt(Weather_Temp_Text, "%d", data.Temp_data[i]);
	  lv_obj_set_style_text_align(Weather_Temp_Text, LV_TEXT_ALIGN_CENTER, 0);
	  lv_obj_set_width(Weather_Temp_Text, 50);

    if(data.Temp_data[i] == data.high_temp || data.Temp_data[i] == data.second_temp || data.Temp_data[i] == data.third_temp)lv_obj_set_pos(Weather_Temp_Text, p.x - 25 - pad_left, p.y - 5);
	  else lv_obj_set_pos(Weather_Temp_Text, p.x - 26 - pad_left, p.y - 35);
  }

  static lv_style_t style;
  lv_style_init(&style);

  lv_style_set_radius(&style, 5);
  lv_style_set_bg_opa(&style, LV_OPA_COVER);
  lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_BLUE));
  lv_style_set_border_width(&style, 1);
  lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
  lv_style_set_pad_all(&style, 5);
  lv_style_set_text_color(&style, lv_color_white());

  if(first_axis > 200){
    First_day = lv_label_create(panel1);
    lv_obj_add_style(First_day, &style, 0);
  }

  Second_day = lv_label_create(panel1);
  lv_obj_add_style(Second_day, &style, 0);
  
  Third_day = lv_label_create(panel1);
  lv_obj_add_style(Third_day, &style, 0);

  Fourth_day = lv_label_create(panel1);
  lv_obj_add_style(Fourth_day, &style, 0);
  
  for(int i = 0; i < 4; i++){
    String day = cal_time(i);
    char buf[day.length() + 1];
    day.toCharArray(buf, day.length() + 1);

    if(i == 0 && first_vision == true){
      lv_label_set_text(First_day, buf);
      lv_obj_set_style_text_align(First_day, LV_TEXT_ALIGN_CENTER, 0);
      lv_obj_set_pos(First_day, 0, 4);
      lv_obj_update_layout(First_day);
    }

    if(i == 1){
      lv_label_set_text(Second_day, buf);
      lv_obj_set_style_text_align(Second_day, LV_TEXT_ALIGN_CENTER, 0);
      lv_obj_set_pos(Second_day, first_axis, 4);
      lv_obj_update_layout(Second_day);
    }

    if(i == 2){
      lv_label_set_text(Third_day, buf);
      lv_obj_set_style_text_align(Third_day, LV_TEXT_ALIGN_CENTER, 0);
      lv_obj_set_pos(Third_day, second_axis, 4);
      lv_obj_update_layout(Third_day);
    }

    if(i == 3){
      lv_label_set_text(Fourth_day, buf);
      lv_obj_set_style_text_align(Fourth_day, LV_TEXT_ALIGN_CENTER, 0);
      lv_obj_set_pos(Fourth_day, third_axis, 4);
      lv_obj_update_layout(Fourth_day);
    }
  }
  lv_obj_add_event_cb(panel1, event_cb, LV_EVENT_ALL, NULL);
}


void Weather_delete(){
  lv_obj_del(panel);
  lv_obj_del(panel1);
}

void event_cb(lv_event_t * e){
  lv_event_code_t code = lv_event_get_code(e);

  if(code == LV_EVENT_SCROLL){
    lv_coord_t axis = lv_obj_get_scroll_x(panel1);
    
    if(first_vision == true)int first_width = lv_obj_get_width(First_day) + 10;
    int second_width = lv_obj_get_width(Second_day) + 10;
    int third_width = lv_obj_get_width(Third_day) + 10;
    int fourth_width = lv_obj_get_width(Fourth_day) + 10;    

    if(last_axis > axis){ // Right
      //Serial0.println("right");
      //if(first_axis <= axis && (second_axis - second_width) > axis)lv_obj_set_pos(Second_day, axis, 4);
      //if(second_axis <= axis && third_axis > axis)lv_obj_set_pos(Third_day, axis, 4);
    }

    if(last_axis < axis){ //Left
      Serial0.println("left");

    } 
    if(first_axis <= axis && (second_axis - second_width) > axis)lv_obj_set_pos(Second_day, axis, 4);
    if(second_axis <= axis && (third_axis - third_width) > axis)lv_obj_set_pos(Third_day, axis, 4);

    last_axis = axis;
    //lv_obj_set_pos(test_Text, axis, 10);
  }   
}

Screenshot and/or video

Update and clear the weather UI whenever the count increases by 1.
(Weather() → Weather_delete)
You can see that the Psram memory area decreases each time you run this code.

What am I missing?

[Tinus]

Hello,

at first glance - I think it may have to do with the styles such as chart_style, Weather_style et cetera being initialised every time, I believe these do not get deleted upon deletion of the parent panels. I suggest making your styles constants to store them in ROM and stop them having to be initialized every time:

Look for “const” in the documentation for styles here:
https://docs.lvgl.io/8.3/overview/style.html

[rudgh7873]

@Tinus

수 있다고 생각합니다. Weather_style 상위 패널을 삭제해도 이러한 스타일은 삭제되지 않는다고 생각합니다. 스타일 상수를 만들어 ROM에 저장하고 매번 초기화할 필요가 없도록 하는 것이 좋습니다.

스타일에 대한 문서(

omg thx

Resolved!