Custom LVGL+ST7789 configuration on ESP32-S

[brskt-dev]

I'm migrating from TFT_eSPI to LovyanGFX in my project... both versions need to use LVGL!

Config in TFT_eSPI:

#define ST7789_DRIVER      // Full configuration option, define additional parameters below for this display
#define TFT_SDA_READ      // This option is for ESP32 ONLY, tested with ST7789 and GC9A01 display only
#define TFT_RGB_ORDER TFT_BGR  // Colour order Blue-Green-Red
#define TFT_BL   32            // LED back-light control pin
#define TFT_BACKLIGHT_ON HIGH  // Level to turn ON back-light (HIGH or LOW)
#define TFT_MISO 35
#define TFT_MOSI 18
#define TFT_SCLK 23
#define TFT_CS   15  // Chip select control pin
#define TFT_DC    2  // Data Command control pin
#define TFT_RST   4  // Reset pin (could connect to RST pin)
#define SPI_FREQUENCY  27000000
#define SPI_READ_FREQUENCY  20000000
#define SPI_TOUCH_FREQUENCY  2500000

Additionally, the config for LVGL in lv_conf.h (color relationed):

/*Color depth: 1 (1 byte per pixel), 8 (RGB332), 16 (RGB565), 32 (ARGB8888)*/
#define LV_COLOR_DEPTH 16

/*Swap the 2 bytes of RGB565 color. Useful if the display has an 8-bit interface (e.g. SPI)*/
#define LV_COLOR_16_SWAP 0

So I changed TFT_eSPI to LovyanGFX, and that is my configuration:

class LGFX : public lgfx::LGFX_Device
{
  lgfx::Panel_ST7789      _panel_instance;
  lgfx::Bus_SPI        _bus_instance;
  lgfx::Light_PWM     _light_instance;

public:

  // コンストラクタを作成し、ここで各種設定を行います。
  // クラス名を変更した場合はコンストラクタも同じ名前を指定してください。
  LGFX(void)
  {
    { // バス制御の設定を行います。
      auto cfg = _bus_instance.config();    // バス設定用の構造体を取得します。
      cfg.spi_host = VSPI_HOST;     // 使用するSPIを選択  ESP32-S2,C3 : SPI2_HOST or SPI3_HOST / ESP32 : VSPI_HOST or HSPI_HOST
      cfg.spi_mode = 2;             // SPI通信モードを設定 (0 ~ 3)
      cfg.freq_write = 80000000;    // 送信時のSPIクロック (最大80MHz, 80MHzを整数で割った値に丸められます)
      cfg.freq_read  = 20000000;    // 受信時のSPIクロック
      cfg.spi_3wire  = false;        // 受信をMOSIピンで行う場合はtrueを設定
      cfg.use_lock   = true;        // トランザクションロックを使用する場合はtrueを設定
      cfg.dma_channel = SPI_DMA_CH_AUTO; // 使用するDMAチャンネルを設定 (0=DMA不使用 / 1=1ch / 2=ch / SPI_DMA_CH_AUTO=自動設定)
      cfg.pin_sclk = 23;            // SPIのSCLKピン番号を設定
      cfg.pin_mosi = 18;            // SPIのMOSIピン番号を設定
      cfg.pin_miso = 35;            // SPIのMISOピン番号を設定 (-1 = disable)
      cfg.pin_dc   = 2;            // SPIのD/Cピン番号を設定  (-1 = disable)
      _bus_instance.config(cfg);    // 設定値をバスに反映します。
      _panel_instance.setBus(&_bus_instance);      // バスをパネルにセットします。
    }

    { // 表示パネル制御の設定を行います。
      auto cfg = _panel_instance.config();    // 表示パネル設定用の構造体を取得します。
      cfg.pin_cs           =    15;  // CSが接続されているピン番号   (-1 = disable)
      cfg.pin_rst          =    4;  // RSTが接続されているピン番号  (-1 = disable)
      cfg.pin_busy         =    -1;  // BUSYが接続されているピン番号 (-1 = disable)
      cfg.memory_width     =   240;  
      cfg.memory_height    =   320; 
      cfg.panel_width      =   240;  // 実際に表示可能な幅
      cfg.panel_height     =   320;  // 実際に表示可能な高さ
      cfg.offset_x         =     0;  // パネルのX方向オフセット量
      cfg.offset_y         =     0;  // パネルのY方向オフセット量
      cfg.offset_rotation  =     0;  // 回転方向の値のオフセット 0~7 (4~7は上下反転)
      cfg.dummy_read_pixel =     16;  // ピクセル読出し前のダミーリードのビット数
      cfg.dummy_read_bits  =     1;  // ピクセル以外のデータ読出し前のダミーリードのビット数
      cfg.readable         =  true;  // データ読出しが可能な場合 trueに設定
      cfg.invert           = false;  // パネルの明暗が反転してしまう場合 trueに設定
      cfg.rgb_order        = true;  // パネルの赤と青が入れ替わってしまう場合 trueに設定
      cfg.dlen_16bit       = false;  // 16bitパラレルやSPIでデータ長を16bit単位で送信するパネルの場合 trueに設定
      cfg.bus_shared       =  false;  // SDカードとバスを共有している場合 trueに設定(drawJpgFile等でバス制御を行います)
      _panel_instance.config(cfg);
    }

//*
    { // バックライト制御の設定を行います。（必要なければ削除）
      auto cfg = _light_instance.config();    // バックライト設定用の構造体を取得します。

      cfg.pin_bl = 32;              // バックライトが接続されているピン番号
      cfg.invert = false;           // バックライトの輝度を反転させる場合 true
      cfg.freq   = 44100;           // バックライトのPWM周波数
      cfg.pwm_channel = 7;          // 使用するPWMのチャンネル番号
      _light_instance.config(cfg);
      _panel_instance.setLight(&_light_instance);  // バックライトをパネルにセットします。
    }
//*/
    setPanel(&_panel_instance); // 使用するパネルをセットします。
  }
};

Plus Configs:
- Display Flush:

void display_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p)
{
    int w = (area->x2 - area->x1 + 1);
    int h = (area->y2 - area->y1 + 1);

    gfx.startWrite();
    gfx.setAddrWindow(area->x1, area->y1, w, h);

    gfx.writePixels((lgfx::rgb565_t *)&color_p->full, w * h);

    gfx.endWrite();
    lv_disp_flush_ready(disp);
}

- Display Init

void display_init()
{
    gfx.begin();
    gfx.setColorDepth(16);
    lv_init();

    gfx.setRotation(ROTATION);

    lv_disp_draw_buf_init(&draw_buf, buf, NULL, screenWidth * 10);

    static lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);

    disp_drv.hor_res = screenWidth;
    disp_drv.ver_res = screenHeight;
    disp_drv.flush_cb = display_flush;
    disp_drv.draw_buf = &draw_buf;
    lv_disp_drv_register(&disp_drv);

    lv_disp_t *disp = lv_disp_drv_register(&disp_drv);
    lv_theme_t *theme = lv_theme_default_init(disp, background_dark, background_light, true, &Roboto_18);
    lv_disp_set_theme(disp, theme);

    lv_disp_trig_activity(NULL);
}

Result is:

(The problem: Yellow colors is being displayed as Red...)

[tobozo]

what happens when you set this to false ?

cfg.rgb_order = true;

[brskt-dev]

Already tried to change this config but:
false results in yellow colors (expected) turning blue.
true results in yellow colors (expected) turning red.

[tobozo]

Please use a LGFX only sketch to adjust your configuration, and only adjust LVGL settings once you're 100% sure your LGFX config is correct.

    tft.fillScreen( TFT_RED  );
    tft.drawString( "RED", 10, 10 );
    delay( 1000 );
    // repeat for blue, green ...

now there's another LGFX Panel setting you can combine with rgb_order, so 4 different possibilities:

    cfg.invert;
    cfg.rgb_order;

[brskt-dev]

Thanks for the attention!

I did the tests using just LGFX functions and reached what I need:
cfg.invert = true;
cfg.rgb_order = false;

Now I will try again enabling LVGL and reply the results!

[brskt-dev]

Happy to tell that it works as the expected, thank u so much for your time!

[brskt-dev]

Just want to tell for others with the same question:

The colors on my lv_conf after the solution by @tobozo:

/*Color depth: 1 (1 byte per pixel), 8 (RGB332), 16 (RGB565), 32 (ARGB8888)*/
#define LV_COLOR_DEPTH 16

/*Swap the 2 bytes of RGB565 color. Useful if the display has an 8-bit interface (e.g. SPI)*/
#define LV_COLOR_16_SWAP 0