ESP32-S3(Platformio 아두이노 IDE) LVGL , SquareLine

SquareLine을 이용해 생성한 코드를 VSCode Platformio를 통해 ESP32-8048S043에 업로드 하는 예제입니다.

1) 설치

*SquareLine 최신 버전 설치

SquareLine Studio - Design and build UIs with ease

30일 무료 이후 조건에 따라 무료 사용 가능합니다.

 

*VSCode에서 Platformio 설치

 

 

2) Platformio 보드 추가

C:\Users\사용자명\.platformio\platforms\espressif32\boards

Platformio가 설치된 위치에서 위의 경로에 아래 보드를 다운받아 넣어줍니다.

*위 경로가 보이지 않을 경우 esp32 프로젝트 하나 만들어 주면 보입니다.

platform-espressif32/boards at esp32-s3-devkitc-1-n16r8v · handledexception/platform-espressif32

 

 

3) 프로젝트 생성

- New Project

 

Name 입력 - Board 선택 - Finish

 

4) SquareLine 프로젝트 생성

Arduino with TFT_eSPI 선택

PROJECT SETTINGS에서 Resolution , Color depth만 수정 - CREATE

Resolution : 800*480

Color depth : 16bit

 

5) SquareLine Export

화면에 원하는 위젯 올리고

Export - Create template project - 원하는 위치에 폴더 만들고 - 폴더 선택

 

Export - Export UI Files 클릭

 

5) SquareLine에서 Export한 소스코드 Platformio화 합치기

Create template project 때 생성된 폴더 - SquareLine_Project - libraries

위의 라이브러리 중 'TFT_eSPI'를 제외하고 복사하여 아래 Platformio로 생성한 프로젝트의 lib 경로에 붙여넣기

아래 Arduino_GFX-master.zip 라이브러리 다운 받아 압축 풀고 붙여넣기

Arduino_GFX-master.zip

7.42MB

 

Create template project 때 생성된 폴더 - SquareLine_Project - ui의 ui.ino 파일 복사하여 Platformio -  src에 붙여넣기

main.cpp 삭제 - ui.ino 파일명 ui.cpp로 변경

 

6) Arduino_GFX-master 라이브러리에 맞게 코드 수정

주석 처리한 부분이 원래 코드에서 삭제한 라인이고, 나머지 코드 추가

// #include <TFT_eSPI.h>
#include <Arduino_GFX_Library.h>
#define TFT_BL 2


//TFT_eSPI tft = TFT_eSPI();
Arduino_ESP32RGBPanel *bus = new Arduino_ESP32RGBPanel(
    GFX_NOT_DEFINED, GFX_NOT_DEFINED, GFX_NOT_DEFINED,
    40, 41, 39, 42,
    45, 48, 47, 21, 14,
    5, 6, 7, 15, 16, 4,
    8, 3, 46, 9, 1
);

Arduino_RPi_DPI_RGBPanel *gfx = new Arduino_RPi_DPI_RGBPanel(
    bus,
    800, 0, 8, 4, 8,
    480, 0, 8, 4, 8,
    1, 16000000, true
);



//tft.begin();
//tft.setRotation(1);
//tft.fillScreen(TFT_BLACK);
gfx->begin();
gfx->fillScreen(BLACK);
pinMode(TFT_BL, OUTPUT);
digitalWrite(TFT_BL, HIGH);


//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);
//     tft.startWrite();
//     tft.setAddrWindow(area->x1, area->y1, w, h);
//     tft.pushColors((uint16_t *)&color_p->full, w * h, true);
//     tft.endWrite();
//     lv_disp_flush_ready(disp);
// }
void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p) {  // TFT_eSPI와 같음
    uint32_t w = (area->x2 - area->x1 + 1);  // TFT_eSPI와 같음
    uint32_t h = (area->y2 - area->y1 + 1);  // TFT_eSPI와 같음

    gfx->draw16bitRGBBitmap(area->x1, area->y1, (uint16_t *)color_p, w, h);
    lv_disp_flush_ready(disp);  // TFT_eSPI와 같음
}

 

아래는 위 수정된 내용을 포함한 ui.cpp의 전체 코드 입니다.

ui.cpp

0.00MB

 

7) ESP32-8048S043로 업로드

하단 포트 선택 눌러서 상단의 연결된 COM숫자 포트 선택 (ch340 드라이버가 설치되어 있지 않다면 아래 설치)

ch340_드라이버.zip

0.18MB

업로드