Visual Studio Code와 PlatformIO IDE로 ESP32를 갖고 놀 줄 안다면, 그다음에는 그래픽 디스플레이를 갖고 놀게 됩니다.
LVGL 라이브러리로 C 코드를 입력하여 UI를 만들 수 있지만, 디자인 설계는 PC에서 해야 속편 합니다.
SquareLine Studio를 사용하면 LVGL 코드를 즉시 생성해 줍니다. 프로젝트에 코드 두 줄만 추가하면 적용이 됩니다.
SquareLine Studio
설치하기
https://squareline.io/ 사이트에 접속하여 프로그램을 내려받아 설치합니다.
가입과 가정용 라이선스는 무료입니다. 데모 프로젝트가 있으니 먼저 참고하여 원하는 디자인을 만들어보세요.
위와 같이 만들어봤습니다.
프로젝트 설정
프로젝트를 만든 후에도 변경이 가능합니다.
ESP32-2432S028
- 디스플레이 크기: 320x240
- 컬러: 16bit
ESP32-2432S028의 디스플레이는 240x320이 기본이지만 가로로 사용하기 위해 320x240으로 설정했습니다.
Board는 Arduino를 선택하고, TFT_eSPI와 LVGL 라이브러리를 사용하며, 최신 버전을 선택합니다.
파일 내보내기 설정에서 UI Files Export Path는 PlatformIO 프로젝트의 src, include, lib 같은 연결 가능한 폴더로 지정합니다.
APPLAY CHANGES 버튼을 누르면 적용됩니다.
UI 파일 내보내기
Export - Export UI Files 메뉴를 선택하면 지정된 폴더에 C언어 파일이 생성됩니다.
PlatformIO IDE
PIO 프로젝트는 LVGL 라이브러리를 사용가능한 상태로 설정합니다.
아래와 같이 ui.h을 연결하고 ui_init();만 추가하면 끝입니다.
#include "ui.h" <<-- 이 줄 추가
void setup() {
...
lv_init();
...
ui_init(); <<-- 이 줄 추가
}
label, textarea에 char 변수 값을 출력하려면 다음과 같이 합니다.
lv_label_set_text_fmt(ui_Label9, "Local Time=%d/%d/%d,%d:%d:%d;", year(), month(), day(), hour(), minute(), second());
sprintf(S, "*VAL:GPSDateTime=%04i/%d/%d,%d:%d:%d;", gps.date.year(), gps.date.month(), gps.date.day(), gps.time.hour(), gps.time.minute(), gps.time.second());
lv_textarea_set_text(ui_TextArea1, S);
업로드
참 쉽죠?😉
그래픽 작업은 많은 메모리 용량이 필요하므로 ESP32-S3 사용을 권장합니다.
AliExpress ESP-4827S043
https://s.click.aliexpress.com/e/_oCZFMmJ
참고
🛒ESP32-2432S028R - 1만원 대, 가성비 좋은 개발 모듈
VSCode + PlatformIO + ESP32 + Arduino 프로젝트 만들기
https://docs.squareline.io/docs/squareline/