반응형

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만원 대, 가성비 좋은 개발 모듈

 

🛒ESP32-2432S028R - 1만원 대, 가성비 좋은 개발 모듈

ESP32 + 터치패널 + TFT-LCD + TF슬롯 등이 포함된 개발 모듈입니다.알리익스프레스구입가: $15.58 (아크릴 포함가)배송: 무료. 7일 만에 도착.상품페이지https://s.click.aliexpress.com/e/_oEWKFFl ESP32 MCU 2.8 Inch Sm

tsblog.simulz.kr

VSCode + PlatformIO + ESP32 + Arduino 프로젝트 만들기

 

VSCode + PlatformIO + ESP32 + Arduino 프로젝트 만들기

사용 중인 아두이노 IDE 버전이 2.3.4인데 버그 때문에 코딩이 불편합니다. 정의로 이동하는 기능(F12)과 바로가기 링크(Ctrl+LMB)가 수시로 먹통이 되어 코드 추적이 너무 힘듭니다. 컴파일 속도도 엄

tsblog.simulz.kr

https://docs.squareline.io/docs/squareline/

 

SquareLine Studio 1.5.0 Documentation | SquareLine Studio

Welcome to the official documentation of SquareLine Studio!

docs.squareline.io

 

반응형

관련글