Waveshare esp32-s3-touch-lcd-7 help

Hi everyone

Hoping I can be sent down the right road, When I built my camper 5 years ago, I wrote a control unit using a Pi4b and 7inch touch screen, that controlled all the electrics from turning on the lights and water pumps to locking and opening the doors, from the touch panel or phone, laptop etc. It was local and web based. Since then, I have added extra remote ESP32’s to control the roof vents, monitor the water tanks and monitor the battery charging (developed each module as I went along) and controlled the relays for the lights etc with the PI controlling and displaying it all.

SO I saw one of these 7” esp32 touchscreens and figured, why not let the Pi go to another project as it is under utilised in the van and I have ESP32 running my shed solar system via the web. So bought one,.
Im a 60+, not an expert just learn as I go, but this ESP32 screen has got me baffled. I downloaded Squareline and designed a new user interface for the touch screen with buttons etc wtich changing colours when acvtive etc, have tried various LVGL librairies with Platformio but cannot get them to build without errors for a vast variety of reasons. I have scavenged the Git files I could find but even the Wavershare demo file failes to actually work.

I did find one demo that didnt fail, did upload but the screen remained blank.

My question is, has anyone had any luck with these screens using a custom UI etc, as all the videos I have found have all had the standard demo driver test and nothing else. Its as iff these were made but to get them to work is nearly impossible. If I could get this one project to work, the sky is the limit.
So far I using esp32-s3-devkitc-1 board with this library GitHub - lovyan03/LovyanGFX: SPI LCD graphics library for ESP32 (ESP-IDF/ArduinoESP32) / ESP8266 (ArduinoESP8266) / SAMD51(Seeed ArduinoSAMD51). (which has got me closer than any of the others, but still fails on the build)

If I could be pointed in the right direction, I reckon I could figure the rest out

1 Like

How’d you get on with this John? I’ve just bought one of these boards, and I’m struggling too. After a lot of frustration, I’ve managed to draw a static picture on the LCD, by hacking some of the examples and using the Waveshare_ST7262_LVGL library. It did take me ages to work out how to use this library due to a complete lack of documentation, but eventually realised my issue was that I was overcomplicating it. Here is my code, that is a hack of the LVGL example clock:-


#include "img_hand.h"
#include <lvgl.h>
#include <Waveshare_ST7262_LVGL.h>

static const uint16_t screenWidth = 800;
static const uint16_t screenHeight = 480;
static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[screenWidth * screenHeight / 10];


// Global pointers for the meter indicators (the clock hands)
static lv_obj_t * meter;
static lv_meter_indicator_t * indic_hour;
static lv_meter_indicator_t * indic_min;
static lv_meter_indicator_t * indic_sec;


// Simulated track time variables
static int current_hour = 10;
static int current_min = 10;
static int current_sec = 0;


static void set_value(void * indic, int32_t v)
{
    Serial.println("Start set_value"); // Print start message for RGB LCD example
    lv_meter_set_indicator_end_value(meter, (lv_meter_indicator_t*)indic, v);
    Serial.println("End set_value"); // Print start message for RGB LCD example
}

// UI Generation function
void create_analogue_clock() {
    meter = lv_meter_create(lv_scr_act());
    lv_obj_set_size(meter, 400, 400);
    lv_obj_center(meter);


    /*Create a scale for the minutes*/
    /*61 ticks in a 360 degrees range (the last and the first line overlaps)*/
    lv_meter_scale_t * scale_min = lv_meter_add_scale(meter);

    lv_meter_set_scale_ticks(meter, scale_min, 61, 1, 10, lv_palette_main(LV_PALETTE_GREY));

    lv_meter_set_scale_range(meter, scale_min, 0, 60, 360, 270);

    /*Create an other scale for the hours. It's only visual and contains only major ticks*/

    lv_meter_scale_t * scale_hour = lv_meter_add_scale(meter);

    lv_meter_set_scale_ticks(meter, scale_hour, 12, 0, 0, lv_palette_main(LV_PALETTE_GREY));               /*12 ticks*/

    lv_meter_set_scale_major_ticks(meter, scale_hour, 1, 2, 20, lv_color_black(), 10);    /*Every tick is major*/

    lv_meter_set_scale_range(meter, scale_hour, 1, 12, 330, 300);       /*[1..12] values in an almost full circle*/


    LV_IMG_DECLARE(img_hand)


    /*Add a the hands from images*/
    lv_meter_indicator_t * indic_min = lv_meter_add_needle_img(meter, scale_min, &img_hand, 5, 5);

    lv_meter_indicator_t * indic_hour = lv_meter_add_needle_img(meter, scale_min, &img_hand, 5, 5);

    // 3. Second Hand (Thin, long, distinct red color)
    lv_meter_indicator_t * indic_sec = lv_meter_add_needle_line(meter, scale_min, 2, lv_palette_main(LV_PALETTE_RED), -10);

    // lv_meter_indicator_t * indic_sec = lv_meter_add_needle_img(meter, scale_min, &img_hand, 5, 5);

    /*Create an animation to set the value*/
    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_exec_cb(&a, set_value);
    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);

    a.start_value = 12;
    lv_anim_set_values(&a, 0, 60);
    lv_anim_set_time(&a, 1000 * 60);     /* 60 sec for 1 turn of the second hand */

    lv_anim_set_var(&a, indic_sec);
    lv_anim_start(&a);
    a.start_value = 5;
    lv_anim_set_values(&a, 0, 60);
    lv_anim_set_time(&a, 3600*1000);     /*3600 sec for 1 turn of the minute hand (1 hour)*/

    lv_anim_set_var(&a, indic_min);
    lv_anim_start(&a);
    a.start_value = 20;
    lv_anim_set_var(&a, indic_hour);
    lv_anim_set_time(&a, 12*3600*1000);    /*12 hour for 1 turn of the hour hand*/
    lv_anim_set_values(&a, 0, 60);
    lv_anim_start(&a);
}

void setup() {

    Serial.begin(115200);
    Serial.println("Clock example start"); // Print start message for RGB LCD example

    lvgl_port_lock(-1);

    // init lvl for our panel
    lcd_init ();

    // Render our UI components
    create_analogue_clock();
    lvgl_port_unlock();

    Serial.println("Clock example end"); // Print start message for RGB LCD example
}

void loop() {
    // Drive the LVGL graphics pipeline engine 

    Serial.println("IDLE loop"); // Print idle loop message
    lv_timer_handler(); 
    delay(1);
}

For the life of me, I can’t get the hands to animate. The loop() function seems to repeat about 30 odd times, then exit. Given that that’s equivalent to about 30ms, it doesn’t give the second hand a change to advance at all.

If anyone out there has enough experience with these boards to shed some light on this, I’d be enterally grateful.

Cheers,
Garrick

Hi Garrick

Yes I did. Mine is a dashboard for my solar system on the shed. I ended up designing it in Squareline and then with some help from Claude, sorted out all the LVGL issues. Even when using Waveshare files, there were still some issues. But eventually we got it sorted.
Adding time based screen blanking and force screen on was a bit of nightmare too. Seaching for the pin allocations for backlight etc. Can’t remember how much time I spent before using AI to tidy up the finer details.

I have since done a new control panel for my campervan to replace my old Raspberry Pi unit, and this time went with the Elecrow Advance higher res screens and that was so much easier. Started with one of the examples as a base. Added my UI files, added my code and it just worked. (this one iI designed more complicated UI to include relay control, water tank levels and power displays rather than a single screen of the Waveshare) and it just worked. No having to adjust the LVGL files to make it work.

Sorry cant help with the animation, I have kept all mine to data display dashboards or digital clock instead.

Hey there, @Garrick290908, if loop is stopping up 30 times, that’s going to be a crash. It should just loop until power is disconnected Arduino loop() shouldn’t just finish and stay finished.

When you’re saying that it exits, are you getting an error code in the serial monitor? Or is it just browning out?