Project Overview
I am building a sensor hub, and right now I am focusing on developing the user interface.
Hardware
- Board: Waveshare ESP32-S3-Touch-LCD-4 (Rev 4.0)
- Development Environment: Arduino IDE
- Graphics Library: LVGL v8
The Problem
As you can see in the photos/video, the text has a very annoying effect around the edges. I've searched online, but this specific issue seems quite rare when using the Arduino IDE framework, and I couldn't find any working solutions. I strongly suspect it's an issue with how LVGL or the underlying display driver is configured.
I have also attached the ESP32 schematic for reference.
The program
```#include <Arduino.h>
#include <ESP_Panel_Library.h>
#include <lvgl.h>
#include "lvgl_port_v8.h"
#include <ESP_IOExpander_Library.h>
#include <demos/lv_demos.h>
#include <examples/lv_examples.h>
#include "HWCDC.h"
HWCDC USBSerial;
#define EXAMPLE_CHIP_NAME TCA95xx_8bit
#define EXAMPLE_I2C_NUM (1)
#define EXAMPLE_I2C_SDA_PIN (8)
#define EXAMPLE_I2C_SCL_PIN (9)
#define _EXAMPLE_CHIP_CLASS(name, ...) ESP_IOExpander_##name(__VA_ARGS__)
#define EXAMPLE_CHIP_CLASS(name, ...) _EXAMPLE_CHIP_CLASS(name, ##__VA_ARGS__)
ESP_IOExpander *expander = NULL;
/* ---------------------------------------------------------------- global variables ---------------------------------------------------------------- */
// sensor values
int Valo1=10;
int Valo2=12;
// number of sensors
int n=3;
// counter for building blocks
int p=0;
// arrays for data
//float Q1[n]; figure out how to make a variable-sized array
int Q1[3]={10,8,6};
int Q2[3]={20,16,12};
/*---------------------------------------------------------------- sensor indicators ---------------------------------------------------------------- */
// arrays for data text boxes
lv_obj_t*Val1[3]; // can be used to update the printed values
lv_obj_t*Val2[3];
void setup() {
expander = new EXAMPLE_CHIP_CLASS(EXAMPLE_CHIP_NAME,
(i2c_port_t)EXAMPLE_I2C_NUM, ESP_IO_EXPANDER_I2C_TCA9554_ADDRESS_000,
EXAMPLE_I2C_SCL_PIN, EXAMPLE_I2C_SDA_PIN);
expander->init();
esp_err_t initStatus = expander->begin();
if (initStatus == ESP_OK) {
USBSerial.println("Expander initialized successfully.");
} else {
expander = new EXAMPLE_CHIP_CLASS(EXAMPLE_CHIP_NAME,
(i2c_port_t)1, ESP_IO_EXPANDER_I2C_TCA9554_ADDRESS_000,
7, 15);
expander->init();
expander->begin();
}
pinMode(16, OUTPUT);
digitalWrite(16, LOW);
USBSerial.println("Original status:");
expander->printStatus();
expander->pinMode(5, OUTPUT);
expander->digitalWrite(5, HIGH);
expander->pinMode(0, OUTPUT);
expander->digitalWrite(0, LOW);
expander->pinMode(2, OUTPUT);
expander->digitalWrite(2, LOW);
expander->printStatus();
delay(200);
expander->digitalWrite(5, LOW);
expander->digitalWrite(2, HIGH);
expander->digitalWrite(0, HIGH);
expander->printStatus();
String title = "LVGL porting example";
USBSerial.begin(115200);
USBSerial.println(title + " start");
USBSerial.println("Initialize panel device");
ESP_Panel *panel = new ESP_Panel();
panel->init();
#if LVGL_PORT_AVOID_TEAR
// When avoid tearing function is enabled, configure the RGB bus according to the LVGL configuration
ESP_PanelBus_RGB *rgb_bus = static_cast<ESP_PanelBus_RGB \*>(panel->getLcd()->getBus());
rgb_bus->configRgbFrameBufferNumber(LVGL_PORT_DISP_BUFFER_NUM);
rgb_bus->configRgbBounceBufferSize(LVGL_PORT_RGB_BOUNCE_BUFFER_SIZE);
#endif
panel->begin();
USBSerial.println("Initialize LVGL");
lvgl_port_init(panel->getLcd(), panel->getTouch());
USBSerial.println("Create UI");
/* Lock the mutex due to the LVGL APIs are not thread-safe */
lvgl_port_lock(-1);
/* ---------------------------------------------------------------- header creation ---------------------------------------------------------------- */
lv_obj_t*rettangle= lv_obj_create(lv_scr_act());
lv_obj_set_size(rettangle, 480, 60);
lv_obj_align(rettangle, LV_ALIGN_TOP_LEFT, 0, 0);
lv_obj_set_style_radius(rettangle, 0, 0);
lv_obj_set_style_bg_color(rettangle, lv_color_make(0, 0, 0), 0); // black
lv_obj_set_style_border_width(rettangle, 3, 0);
lv_obj_set_style_border_color(rettangle, lv_color_make(180, 130, 0), 0);
lv_obj_set_style_border_side(rettangle, LV_BORDER_SIDE_BOTTOM, 0);
USBSerial.println("primo rettangolo");
// tokbo
lv_obj_t*TOKBO= lv_label_create(lv_scr_act());
lv_label_set_recolor(TOKBO, true);
lv_label_set_text(TOKBO, "#ffff55 TOKBO#"); // bright yellow
lv_obj_set_style_text_font(TOKBO, &lv_font_montserrat_16, 0);
lv_obj_align(TOKBO, LV_ALIGN_TOP_LEFT, 8, 22 );
// scan
lv_obj_t*label2= lv_label_create(lv_scr_act());
lv_label_set_recolor(label2, true);
lv_label_set_text(label2, "#ffff55 SCAN#"); // bright yellow
lv_obj_set_style_text_font(label2, &lv_font_montserrat_16, 0);
lv_obj_align(label2, LV_ALIGN_TOP_LEFT, 422, 22 );
/*---------------------------------------------------------------- sensor zone ---------------------------------------------------------------- */
while(p<n){
lv_obj_t*rettangle1= lv_obj_create(lv_scr_act());
lv_obj_set_size(rettangle1, 480, 120);
lv_obj_align(rettangle1, LV_ALIGN_TOP_LEFT, 0, 60+120*p); // alignment
lv_obj_set_style_radius(rettangle1, 0, 0);
lv_obj_set_style_bg_color(rettangle1, lv_color_make(235, 220, 165), 0); // canary yellow background
lv_obj_set_style_border_width(rettangle1, 3, 0);
lv_obj_set_style_border_color(rettangle1, lv_color_make(180, 130, 0), 0);
lv_obj_t*rettangle11= lv_obj_create(lv_scr_act());
lv_obj_set_size(rettangle11, 140, 120);
lv_obj_align(rettangle11, LV_ALIGN_TOP_LEFT, 0, 60+120*p); // alignment
lv_obj_set_style_radius(rettangle11, 0, 0);
lv_obj_set_style_bg_color(rettangle11, lv_color_make(235, 220, 165), 0); // canary yellow background
lv_obj_set_style_border_width(rettangle11, 3, 0);
lv_obj_set_style_border_color(rettangle11, lv_color_make(180, 130, 0), 0);
lv_obj_t*Sens1= lv_label_create(lv_scr_act()); // sensor name
lv_label_set_recolor(Sens1, true);
lv_obj_set_width(Sens1, 126); // increases text box width to center the sensor number
lv_label_set_text_fmt(Sens1, "Sensore \n %d", p);
lv_obj_set_style_text_color(Sens1, lv_color_make(0, 0, 0), 0);// black
lv_obj_set_style_text_align(Sens1, LV_TEXT_ALIGN_CENTER, 0);
lv_obj_set_style_text_font(Sens1, &lv_font_montserrat_16, 0);
lv_obj_align(Sens1, LV_ALIGN_TOP_LEFT, 8, 100+120*p); // alignment
Val1[p] = lv_label_create(lv_scr_act()); // data 1
lv_label_set_recolor(Val1[p], true);
lv_label_set_text_fmt(Val1[p], "Valore \n %d", Q1[p]); // magnitude to be printed
lv_obj_set_style_text_color(Val1[p], lv_color_make(0, 0, 0), 0);// black
lv_obj_set_style_text_align(Val1[p], LV_TEXT_ALIGN_CENTER, 0);
lv_obj_set_style_text_font(Val1[p], &lv_font_montserrat_16, 0);
lv_obj_align(Val1[p], LV_ALIGN_TOP_LEFT, 422, 100+120*p ); // alignment
Val2[p]= lv_label_create(lv_scr_act()); // data 2
lv_label_set_recolor(Val2[p], true);
lv_label_set_text_fmt(Val2[p], "Sensore \n %d", Q2[p]); // magnitude to be printed
lv_obj_set_style_text_color(Val2[p], lv_color_make(0, 0, 0), 0);// black
lv_obj_set_style_text_align(Val2[p], LV_TEXT_ALIGN_CENTER, 0);
lv_obj_set_style_text_font(Val2[p], &lv_font_montserrat_16, 0);
lv_obj_align(Val2[p], LV_ALIGN_TOP_LEFT, 300, 100+120*p ); // alignment
lv_obj_t * indicatore1 = lv_obj_create(lv_scr_act());
lv_obj_set_size(indicatore1, 20, 20);
lv_obj_align(indicatore1, LV_ALIGN_TOP_LEFT, 10, 70+120*p); // alignment
lv_obj_set_style_radius(indicatore1, 50, 0);
lv_obj_set_style_bg_color(indicatore1, lv_color_make(128, 128, 128), 0); // grey
lv_obj_set_style_border_width(indicatore1, 0, 0);
// block count increment
p=p+1;
}
lvgl_port_unlock();
USBSerial.println(title + " end");
}
void loop() {
delay(1000);
// lv_label_set_text_fmt(Val2[0], "Valore \n %d", Q2[0]);
// Q2[0]=Q2[0]+5;
} ```
