ESP32S3 - Chart widget bug

ouweseun · March 8, 2024, 2:18pm

Description

I am making a project where a raspberry sends sensor data over MQTT to my ESP32S3 (with screen integrated from china). This works fine except for the line graph widget. This fails to render correct sometimes. I am using Squareline studio generated code.
I am a programmer but am not that familiar with C.

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

ESP32S3 - ESPTool programmer.

What do you want to achieve?

A non-distorted graph. Sometimes it runs fine for a while but at other times it will never show a good graph. So its quite an inconsistent thing I guess…

What have you tried so far?

Improving my code to support looping mqtt and gui tasks in seperate loops by using xTaskCreatePinnedToCore.

Code to reproduce

Setup apart from lvgl init code:

client.setServer(WiFi.gatewayIP(), mqtt_port);
  client.setCallback(callback);
  client.subscribe(mqtt_topic);
  xTaskCreatePinnedToCore(guiTask, "guiTask", 4096, NULL, 1, NULL, 1);
  set_main_screen();

Loop of GUI:

void guiTask(void* parameter) {
  while (1) {
    lv_task_handler(); // Update LVGL widgets
    vTaskDelay(5 / portTICK_PERIOD_MS);
  }
}

Main loop:

void loop()
{
    while(1){
        if (!client.connected()) {
            reconnect();
        }
        client.loop();
    }
}

Mqtt Callback:

int previous_leds = 0;
StaticJsonDocument<1024> doc;
#define MAX_ARRAY_SIZE 40

void callback(char* topic, byte* payload, unsigned int length) {
  char msg[1024];
  memcpy(msg, payload, length);
  msg[length] = '\0'; // Null-terminate the string

  // Deserialize the JSON document
  DeserializationError error = deserializeJson(doc, msg);

  if (error) {
    // Log the specific error
    set_start_text("ERROR");
    return;
  }

  // Check if 'leds' field has changed
  if (doc["leds"] != previous_leds) {
    leds(doc["leds"]);
  }

  // Process the 'status' array
  JsonArray array = doc["status"].as<JsonArray>();
  const size_t maxArraySize = MAX_ARRAY_SIZE;
  int data_array[maxArraySize];
  size_t i = 0;
  for (JsonVariant j : array) {
    if (i < maxArraySize) {
      data_array[i] = j.as<int>();
      i++;
    } else {
      // Handle array overflow
      break;
    }
  }

  add_chart(data_array);
}

Add_chart function:

void add_chart(int* list){

    lv_coord_t* ui_Chart1_series_1_array = (lv_coord_t*)malloc(20 * sizeof(lv_coord_t));
    lv_coord_t* ui_Chart1_series_2_array = (lv_coord_t*)malloc(20 * sizeof(lv_coord_t));
    // Copy elements from 'list' to the dynamically allocated array
    for (int i = 0; i < 40; i++) {
        if(i < 20){
           ui_Chart1_series_1_array[i] = list[i];
           //ui_Chart1_series_1_array[i] = -50; 
        }else{
            ui_Chart1_series_2_array[(i - 20)] = list[i];
            //ui_Chart1_series_2_array[i] = -50;   
        }
        
    }

    lv_chart_set_ext_y_array(ui_Chart1, ui_Chart1_series_1, ui_Chart1_series_1_array);
    lv_chart_set_ext_y_array(ui_Chart1, ui_Chart1_series_2, ui_Chart1_series_2_array);
    free(ui_Chart1_series_1_array);
    free(ui_Chart1_series_2_array);
}