ESP32 7" + LVGL almost working

atelei · January 2024

Hello,

I'm running the following code and it almost run. I can compile/upload the firmware, but the problem is: The screen does not work properly.

I've create a squareline project with just a single button and the display does not render it properly.

Packages:

ESP32 v2.0.3

Arduino GFX 1.2.8

LVGL 8.3.11

Any idea how can we make it work?

Thanks in advance.

Code: *************************************************************************************

#include <Wire.h>

#include <SPI.h>

#define USE_UI //if you want to use the ui export from Squareline, please do not annotate this line.

#if defined USE_UI

#include "lvgl.h"

#include "ui.h"

#endif

#include "Arduino_GFX_Library.h"

#define TFT_BL 2

//#define GFX_BL DF_GFX_BL // default backlight pin, you may replace DF_GFX_BL to actual backlight pin

/******Please define a corresponding line based on your development board.************/

//#define Display_43

//#define Display_50

#define Display_70

/*******************************************************************************

* Screen Driver Configuration

*******************************************************************************/

#if defined (Display_43) //4.3INCH 480x272

Arduino_ESP32RGBPanel* bus = new Arduino_ESP32RGBPanel(

GFX_NOT_DEFINED /* CS */, GFX_NOT_DEFINED /* SCK */, GFX_NOT_DEFINED /* SDA */,

40 /* DE */, 41 /* VSYNC */, 39 /* HSYNC */, 42 /* PCLK */,

45 /* R0 */, 48 /* R1 */, 47 /* R2 */, 21 /* R3 */, 14 /* R4 */,

5 /* G0 */, 6 /* G1 */, 7 /* G2 */, 15 /* G3 */, 16 /* G4 */, 4 /* G5 */,

8 /* B0 */, 3 /* B1 */, 46 /* B2 */, 9 /* B3 */, 1 /* B4 */

);

Arduino_RPi_DPI_RGBPanel* lcd = new Arduino_RPi_DPI_RGBPanel(

bus,

480 /* width */, 0 /* hsync_polarity */, 8 /* hsync_front_porch */, 4 /* hsync_pulse_width */, 43 /* hsync_back_porch */,

272 /* height */, 0 /* vsync_polarity */, 8 /* vsync_front_porch */, 4 /* vsync_pulse_width */, 12 /* vsync_back_porch */,

1 /* pclk_active_neg */, 7000000 /* prefer_speed */, true /* auto_flush */);

#elif defined (Display_50) //5.0INCH 800x480

Arduino_ESP32RGBPanel* bus = new Arduino_ESP32RGBPanel(

GFX_NOT_DEFINED /* CS */, GFX_NOT_DEFINED /* SCK */, GFX_NOT_DEFINED /* SDA */,

40 /* DE */, 41 /* VSYNC */, 39 /* HSYNC */, 0 /* PCLK */,

45 /* R0 */, 48 /* R1 */, 47 /* R2 */, 21 /* R3 */, 14 /* R4 */,

5 /* G0 */, 6 /* G1 */, 7 /* G2 */, 15 /* G3 */, 16 /* G4 */, 4 /* G5 */,

8 /* B0 */, 3 /* B1 */, 46 /* B2 */, 9 /* B3 */, 1 /* B4 */

);

Arduino_RPi_DPI_RGBPanel* lcd = new Arduino_RPi_DPI_RGBPanel(

bus,

800 /* width */, 0 /* hsync_polarity */, 210 /* hsync_front_porch */, 4 /* hsync_pulse_width */, 43 /* hsync_back_porch */,

480 /* height */, 0 /* vsync_polarity */, 22 /* vsync_front_porch */, 4 /* vsync_pulse_width */, 12 /* vsync_back_porch */,

1 /* pclk_active_neg */, 16000000 /* prefer_speed */, true /* auto_flush */);

#elif defined (Display_70) //7.0INCH 800x480

Arduino_ESP32RGBPanel* bus = new Arduino_ESP32RGBPanel(

GFX_NOT_DEFINED /* CS */, GFX_NOT_DEFINED /* SCK */, GFX_NOT_DEFINED /* SDA */,

41 /* DE */, 40 /* VSYNC */, 39 /* HSYNC */, 0 /* PCLK */,

14 /* R0 */, 21 /* R1 */, 47 /* R2 */, 48 /* R3 */, 45 /* R4 */,

9 /* G0 */, 46 /* G1 */, 3 /* G2 */, 8 /* G3 */, 16 /* G4 */, 1 /* G5 */,

15 /* B0 */, 7 /* B1 */, 6 /* B2 */, 5 /* B3 */, 4 /* B4 */

);

Arduino_RPi_DPI_RGBPanel* lcd = new Arduino_RPi_DPI_RGBPanel(

bus,

800 /* width */, 0 /* hsync_polarity */, 40 /* hsync_front_porch */, 48 /* hsync_pulse_width */, 40 /* hsync_back_porch */,

480 /* height */, 0 /* vsync_polarity */, 13 /* vsync_front_porch */, 1 /* vsync_pulse_width */, 31 /* vsync_back_porch */,

1 /* pclk_active_neg */, 33000000 /* prefer_speed */, true /* auto_flush */);

#endif

/*******************************************************************************

* Screen Driver Configuration end

*******************************************************************************/

/*******************************************************************************

Please config the touch panel in touch.h

******************************************************************************/

#include "touch.h"

#ifdef USE_UI

/* Change to your screen resolution */

static uint32_t screenWidth;

static uint32_t screenHeight;

static lv_disp_draw_buf_t draw_buf;

static lv_color_t disp_draw_buf[800 * 480 / 10]; //notice here!!! 5,7inch: lv_color_t disp_draw_buf[800*480/10] 4.3inch: lv_color_t disp_draw_buf[480*272/10]

//static lv_color_t disp_draw_buf;

static lv_disp_drv_t disp_drv;

/* Display flushing */

void my_disp_flush(lv_disp_drv_t* disp, const lv_area_t* area, lv_color_t* color_p)

{

uint32_t w = (area->x2 - area->x1 + 1);

uint32_t h = (area->y2 - area->y1 + 1);

#if (LV_COLOR_16_SWAP != 0)

lcd->draw16bitBeRGBBitmap(area->x1, area->y1, (uint16_t*)&color_p->full, w, h);

#else

lcd->draw16bitRGBBitmap(area->x1, area->y1, (uint16_t*)&color_p->full, w, h);

#endif

lv_disp_flush_ready(disp);

}

void my_touchpad_read(lv_indev_drv_t* indev_driver, lv_indev_data_t* data)

{

if (touch_has_signal())

{

if (touch_touched())

{

data->state = LV_INDEV_STATE_PR;

/*Set the coordinates*/

data->point.x = touch_last_x;

data->point.y = touch_last_y;

Serial.print("Data (x,y) : ");

Serial.print(touch_last_x);

Serial.print(",");

Serial.println(touch_last_y);

}

else if (touch_released())

{

data->state = LV_INDEV_STATE_REL;

}

else

{

data->state = LV_INDEV_STATE_REL;

}

delay(15);

}

#endif

void setup()

{

Serial.begin(115200);

Serial.println("LVGL Widgets Demo");

#if defined(Display_50) || defined(Display_70)

//IO Port Pins

pinMode(38, OUTPUT); //port_d

digitalWrite(38, LOW);

pinMode(17, OUTPUT); //i2s_sdin

digitalWrite(17, LOW);

pinMode(18, OUTPUT); //i2s_lrclk

digitalWrite(18, LOW);

pinMode(42, OUTPUT); //i2s_bclk

digitalWrite(42, LOW);

#elif defined(Display_43)

pinMode(20, OUTPUT);

digitalWrite(20, LOW);

pinMode(19, OUTPUT);

digitalWrite(19, LOW);

pinMode(35, OUTPUT);

digitalWrite(35, LOW);

pinMode(38, OUTPUT);

digitalWrite(38, LOW);

pinMode(0, OUTPUT);//TOUCH-CS

#endif

// Init Display

lcd->begin();

lcd->fillScreen(BLACK);

lcd->setTextSize(2);

delay(200);

#ifdef USE_UI

lv_init();

//delay(100);

touch_init();

screenWidth = lcd->width();

screenHeight = lcd->height();

lv_disp_draw_buf_init(&draw_buf, disp_draw_buf, NULL, screenWidth * screenHeight / 10);

// lv_disp_draw_buf_init(&draw_buf, disp_draw_buf, NULL, 480 * 272 / 10);

/* Initialize the display */

lv_disp_drv_init(&disp_drv);

/* Change the following line to your display resolution */

disp_drv.hor_res = screenWidth;

disp_drv.ver_res = screenHeight;

disp_drv.flush_cb = my_disp_flush;

disp_drv.draw_buf = &draw_buf;

lv_disp_drv_register(&disp_drv);

/* Initialize the (dummy) input device driver */

static lv_indev_drv_t indev_drv;

lv_indev_drv_init(&indev_drv);

indev_drv.type = LV_INDEV_TYPE_POINTER;

indev_drv.read_cb = my_touchpad_read;

lv_indev_drv_register(&indev_drv);

#endif

#ifdef TFT_BL

pinMode(TFT_BL, OUTPUT);

digitalWrite(TFT_BL, HIGH);

//ledcSetup(1, 300, 8);

//ledcAttachPin(TFT_BL, 1);

//ledcWrite(1, 255); /* Screen brightness can be modified by adjusting this parameter. (0-255) */

#endif

#ifdef USE_UI

ui_init();//ui from Squareline or GUI Guider

#else

//lcd->setCursor(300, 230);

//lcd->printf("Hello World!");

lcd->fillScreen(RED);

delay(800);

lcd->fillScreen(BLUE);

delay(800);

lcd->fillScreen(YELLOW);

delay(800);

lcd->fillScreen(GREEN);

delay(800);

#endif

Serial.println("Setup done");

}

void loop()

{

while (1)

{

#ifdef USE_UI

lv_timer_handler();

delay(5);

#endif

}

Elecrow · January 2024

Hello @atelei ,

Please refer to the following instruction to modify the driver:

ESP32 HMI Demo Code Updated - compatible with new version of esp32 package

Elecrow Dec 1, 2023

When we first edited the demo code, we based it on the 2.0.3 version of the esp32 package, which resulted in compilation errors for many users who installed the new version of esp32. To solve this problem, we updated the esp32 demo code. The updated content is as follows:

For 5-inch esp32 screen:

Modify the following code

https://forum.elecrow.com/uploads/111/5FZCYAHAOJCQ.png

into

Arduino_RPi_DPI_RGBPanel *lcd = new Arduino_RPi_DPI_RGBPanel(
  bus,
  800 /* width */, 0 /* hsync_polarity */, 210 /* hsync_front_porch */, 4 /* hsync_pulse_width */, 43 /* hsync_back_porch */,
  480 /* height */, 0 /* vsync_polarity */, 22 /* vsync_front_porch */, 4 /* vsync_pulse_width */, 12 /* vsync_back_porch */,
  1 /* pclk_active_neg */, 16000000 /* prefer_speed */, true /* auto_flush */);
#endif /* !defined(DISPLAY_DEV_KIT) */

For 7-inch esp32 screen:

Step 1: Download the LovyanGFX library

https://forum.elecrow.com/uploads/893/XTEWU22K7BIT.png

Step 2: Modify the code of HMI-7.0

Add the following code:

#define LGFX_USE_V1
#include <LovyanGFX.hpp>
#include <lgfx/v1/platforms/esp32s3/Panel_RGB.hpp>
#include <lgfx/v1/platforms/esp32s3/Bus_RGB.hpp>


// Define a class named LGFX, inheriting from the LGFX_Device class.
class LGFX : public lgfx::LGFX_Device {
public:
  // Instances for the RGB bus and panel.
  lgfx::Bus_RGB     _bus_instance;
  lgfx::Panel_RGB   _panel_instance;


  // Constructor for the LGFX class.
  LGFX(void) {
    // Configure the RGB bus.
    {
      auto cfg = _bus_instance.config();
      cfg.panel = &_panel_instance;


      // Configure data pins.
      cfg.pin_d0  = GPIO_NUM_15; // B0
      cfg.pin_d1  = GPIO_NUM_7;  // B1
      cfg.pin_d2  = GPIO_NUM_6;  // B2
      cfg.pin_d3  = GPIO_NUM_5;  // B3
      cfg.pin_d4  = GPIO_NUM_4;  // B4
      
      cfg.pin_d5  = GPIO_NUM_9;  // G0
      cfg.pin_d6  = GPIO_NUM_46; // G1
      cfg.pin_d7  = GPIO_NUM_3;  // G2
      cfg.pin_d8  = GPIO_NUM_8;  // G3
      cfg.pin_d9  = GPIO_NUM_16; // G4
      cfg.pin_d10 = GPIO_NUM_1;  // G5
      
      cfg.pin_d11 = GPIO_NUM_14; // R0
      cfg.pin_d12 = GPIO_NUM_21; // R1
      cfg.pin_d13 = GPIO_NUM_47; // R2
      cfg.pin_d14 = GPIO_NUM_48; // R3
      cfg.pin_d15 = GPIO_NUM_45; // R4


      // Configure sync and clock pins.
      cfg.pin_henable = GPIO_NUM_41;
      cfg.pin_vsync   = GPIO_NUM_40;
      cfg.pin_hsync   = GPIO_NUM_39;
      cfg.pin_pclk    = GPIO_NUM_0;
      cfg.freq_write  = 15000000;


      // Configure timing parameters for horizontal and vertical sync.
      cfg.hsync_polarity    = 0;
      cfg.hsync_front_porch = 40;
      cfg.hsync_pulse_width = 48;
      cfg.hsync_back_porch  = 40;
      
      cfg.vsync_polarity    = 0;
      cfg.vsync_front_porch = 1;
      cfg.vsync_pulse_width = 31;
      cfg.vsync_back_porch  = 13;


      // Configure polarity for clock and data transmission.
      cfg.pclk_active_neg   = 1;
      cfg.de_idle_high      = 0;
      cfg.pclk_idle_high    = 0;


      // Apply configuration to the RGB bus instance.
      _bus_instance.config(cfg);
    }


    // Configure the panel.
    {
      auto cfg = _panel_instance.config();
      cfg.memory_width  = 800;
      cfg.memory_height = 480;
      cfg.panel_width   = 800;
      cfg.panel_height  = 480;
      cfg.offset_x      = 0;
      cfg.offset_y      = 0;


      // Apply configuration to the panel instance.
      _panel_instance.config(cfg);
    }


    // Set the RGB bus and panel instances.
    _panel_instance.setBus(&_bus_instance);
    setPanel(&_panel_instance);
  }
};
LGFX lcd;

and delete the following code:

#include <Arduino_GFX_Library.h>
#define TFT_BL 2
//#define GFX_BL DF_GFX_BL // default backlight pin, you may replace DF_GFX_BL to actual backlight pin


/* More dev device declaration: https://github.com/moononournation/Arduino_GFX/wiki/Dev-Device-Declaration */
#if defined(DISPLAY_DEV_KIT)
Arduino_GFX *lcd = create_default_Arduino_GFX();
#else /* !defined(DISPLAY_DEV_KIT) */


//Arduino_ESP32RGBPanel *bus = new Arduino_ESP32RGBPanel(
//    GFX_NOT_DEFINED /* CS */, GFX_NOT_DEFINED /* SCK */, GFX_NOT_DEFINED /* SDA */,
//    40 /* DE */, 41 /* VSYNC */, 39 /* HSYNC */, 42 /* PCLK */,
//    45 /* R0 */, 48 /* R1 */, 47 /* R2 */, 21 /* R3 */, 14 /* R4 */,
//    5 /* G0 */, 6 /* G1 */, 7 /* G2 */, 15 /* G3 */, 16 /* G4 */, 4/* G5 */,
//    8 /* B0 */, 3 /* B1 */, 46 /* B2 */, 9 /* B3 */, 1 /* B4 */
//);
Arduino_ESP32RGBPanel *bus = new Arduino_ESP32RGBPanel(
  GFX_NOT_DEFINED /* CS */, GFX_NOT_DEFINED /* SCK */, GFX_NOT_DEFINED /* SDA */,
  41 /* DE */, 40 /* VSYNC */, 39 /* HSYNC */, 0 /* PCLK */,
  14 /* R0 */, 21 /* R1 */, 47 /* R2 */, 48 /* R3 */, 45 /* R4 */,
  9 /* G0 */, 46 /* G1 */, 3 /* G2 */, 8 /* G3 */, 16 /* G4 */, 1 /* G5 */,
  15 /* B0 */, 7 /* B1 */, 6 /* B2 */, 5 /* B3 */, 4 /* B4 */
);


// option 1:
// 7寸 50PIN 800*480
Arduino_RPi_DPI_RGBPanel *lcd = new Arduino_RPi_DPI_RGBPanel(
  bus,
  //  800 /* width */, 0 /* hsync_polarity */, 8/* hsync_front_porch */, 2 /* hsync_pulse_width */, 43/* hsync_back_porch */,
  //  480 /* height */, 0 /* vsync_polarity */, 8 /* vsync_front_porch */, 2/* vsync_pulse_width */, 12 /* vsync_back_porch */,
  //  1 /* pclk_active_neg */, 16000000 /* prefer_speed */, true /* auto_flush */);


  //  800 /* width */, 0 /* hsync_polarity */, 40 /* hsync_front_porch */, 48 /* hsync_pulse_width */, 40 /* hsync_back_porch */,
  //  480 /* height */, 0 /* vsync_polarity */, 13 /* vsync_front_porch */, 1 /* vsync_pulse_width */, 31 /* vsync_back_porch */,
  //  1 /* pclk_active_neg */, 16000000 /* prefer_speed */, true /* auto_flush */);
//  800 /* width */, 0 /* hsync_polarity */, 210 /* hsync_front_porch */, 30 /* hsync_pulse_width */, 16 /* hsync_back_porch */,
//  480 /* height */, 0 /* vsync_polarity */, 22 /* vsync_front_porch */, 13 /* vsync_pulse_width */, 10 /* vsync_back_porch */,
//  0 /* pclk_active_neg */, 16000000 /* prefer_speed */, true /* auto_flush */);
  800 /* width */, 0 /* hsync_polarity */, 210 /* hsync_front_porch */, 1 /* hsync_pulse_width */, 46 /* hsync_back_porch */,
  480 /* height */, 0 /* vsync_polarity */, 22 /* vsync_front_porch */, 1 /* vsync_pulse_width */, 23 /* vsync_back_porch */,
  0 /* pclk_active_neg */, 16000000 /* prefer_speed */, true /* auto_flush */);


#endif /* !defined(DISPLAY_DEV_KIT) */
/*******************************************************************************
   End of Arduino_GFX setting
 ******************************************************************************/

modify the following code

/* Display flushing */
void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p)
{
  uint32_t w = (area->x2 - area->x1 + 1);
  uint32_t h = (area->y2 - area->y1 + 1);


#if (LV_COLOR_16_SWAP != 0)
  lcd->draw16bitBeRGBBitmap(area->x1, area->y1, (uint16_t *)&color_p->full, w, h);
#else
  lcd->draw16bitRGBBitmap(area->x1, area->y1, (uint16_t *)&color_p->full, w, h);
#endif


  lv_disp_flush_ready(disp);
}

into

/* Display flushing */
void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p)
{


  uint32_t w = (area->x2 - area->x1 + 1);
  uint32_t h = (area->y2 - area->y1 + 1);
  


  //lcd.fillScreen(TFT_WHITE);
#if (LV_COLOR_16_SWAP != 0)
 lcd.pushImageDMA(area->x1, area->y1, w, h,(lgfx::rgb565_t*)&color_p->full);
#else
  lcd.pushImageDMA(area->x1, area->y1, w, h,(lgfx::rgb565_t*)&color_p->full);//
#endif


  lv_disp_flush_ready(disp);


}

Step 3: Use the quick search function(Ctrl+F) to replace lcd-> in the code with lcd.

https://forum.elecrow.com/uploads/115/TP8V4XT9CMK3.png

👉Back to FAQ page👈

BitBuilder27 · January 2024

Does this also apply to the PlatformIO example as well?

Elecrow · January 2024

Hello @BitBuilder27 ,

Yes, this update also applies to the PlatformIO example.

ESP32 7" + LVGL almost working

Comments