Hi, I’m new to LVGL after I got me a LilyGo T-RGB device (ESP32-S3 with round touch display).
I already created a nice UI with SquareLineStudio and also setup a simulator programm to test the UI on my PC.
UI is shown correctly and some basic events are already working (switch to second screen by image click and use gesture to swipe back).
There are two widgets that should be settable by the user: A roller and a slider.
On the T-RGB device these widgets follow my touch input (in a very responsive way, so no recognizable delay), but after release the slider jumps to zero position and the roller to the last value.
In the simulator application, the UI behaves fines.
I also had an arc that behaved incorrectly (more erratical, however as it was not supposed to be changeable by user, i removed the clickable flag and no longer tested it).
So, what I’m doing wrong?
Hardware/Version details:
Hardware:
- LilyGo T-RGB (ESP32-S3, Touch FT3267, Display 480px (round, 480x480 framebuffer, parallel RGB)
- Simulator (Linux SDL2)
LVGL version: 8.3.4 (via platformio), simulator uses 8.3.3
Framework:
- framework-arduinoespressif32 @ 2.0.5+sha.2d6ca35 (git+https://github.com/espressif/arduino-esp32.git#2.0.5)
- tool-esptoolpy @ 1.40201.0 (4.2.1)
- toolchain-riscv32-esp @ 8.4.0+2021r2-patch3
- toolchain-xtensa-esp32s3 @ 8.4.0+2021r2-patch3
Code to reproduce
Configuration of the slider:
ui_ScreenWifi_Slider1 = lv_slider_create(ui_ScreenWifi);
lv_slider_set_range(ui_ScreenWifi_Slider1, 10, 100);
lv_slider_set_value(ui_ScreenWifi_Slider1, 60, LV_ANIM_OFF);
if(lv_slider_get_mode(ui_ScreenWifi_Slider1) == LV_SLIDER_MODE_RANGE) lv_slider_set_left_value(ui_ScreenWifi_Slider1, 0,
LV_ANIM_OFF);
lv_obj_set_width(ui_ScreenWifi_Slider1, 320);
lv_obj_set_height(ui_ScreenWifi_Slider1, 25);
lv_obj_set_x(ui_ScreenWifi_Slider1, 0);
lv_obj_set_y(ui_ScreenWifi_Slider1, lv_pct(25));
lv_obj_set_align(ui_ScreenWifi_Slider1, LV_ALIGN_CENTER);
lv_obj_clear_flag(ui_ScreenWifi_Slider1, LV_OBJ_FLAG_GESTURE_BUBBLE | LV_OBJ_FLAG_SNAPPABLE); /// Flags
And the one of the roller:
ui_S1RollerStatMode = lv_roller_create(ui_S1Main);
lv_roller_set_options(ui_S1RollerStatMode, "Auto\nTrip\nTour", LV_ROLLER_MODE_INFINITE);
lv_obj_set_height(ui_S1RollerStatMode, 128);
lv_obj_set_width(ui_S1RollerStatMode, LV_SIZE_CONTENT); /// 1
lv_obj_set_x(ui_S1RollerStatMode, 172);
lv_obj_set_y(ui_S1RollerStatMode, 0);
lv_obj_set_align(ui_S1RollerStatMode, LV_ALIGN_CENTER);
lv_obj_clear_flag(ui_S1RollerStatMode,
LV_OBJ_FLAG_CLICK_FOCUSABLE | LV_OBJ_FLAG_GESTURE_BUBBLE | LV_OBJ_FLAG_SNAPPABLE); /// Flags
lv_obj_set_style_text_font(ui_S1RollerStatMode, &lv_font_montserrat_24, LV_PART_MAIN | LV_STATE_DEFAULT);
Because the simulator works fine, and the most relevant difference between real device and the simulator may be the input device, here is my indev callback (copied from Lilygo T-RGB examples):
static void lv_touchpad_read(lv_indev_drv_t *indev_driver, lv_indev_data_t *data) {
if (touch_pin_get_int) {
uint8_t touch_points_num;
uint16_t x, y;
ft3267_read_pos(&touch_points_num, &x, &y);
data->point.x = x;
data->point.y = y;
data->state = LV_INDEV_STATE_PR;
touch_pin_get_int = false;
} else {
data->state = LV_INDEV_STATE_REL;
}
}