아두이노, 플랫폼IO등의 IDE에서 ESP32, STM32와 같은 MCU를 다룰 때 TFT-LCD, OLED, EPD 등의 디스플레이와 터치패널이 있으면 조작하기가 편리해집니다.
디스플레이 화면을 꾸미려면 그래픽 요소를 배치하고 기능을 할당해야 합니다. 디자인 작업을 프로그램 언어로 코딩하는 것은 엄청난 시간 낭비입니다. 코딩과 디자인 작업을 분리하면 업무 효율이 상승됩니다.
마우스로 디자인을 해봅시다.
EEZ Studio
EEZ Studio는 2018년 5월부터 릴리스(배포)된 오픈소스 프로그램입니다. LVGL은 그래픽 라이브러리 중에 하나이며 다양한 라이브러리를 지원합니다.
https://github.com/eez-open/studio Github에서 최신 버전을 내려받을 수 있습니다. 수년째 베타 버전이기 때문에 메이저 번호는 0입니다.
프로젝트 만들기
먼저 예제를 살펴보면 프로젝트를 만드는데 도움이 됩니다.
CREATE 탭으로 이동합니다.
LVGL with EEZ Flow 템플릿을 선택합니다. LVGL 템플릿에 EEZ Flow 기능이 추가된 것으로, LabVIEW와 같이 연결선으로 개체 설정을 할 수 있습니다.
LVGL version은 9.x를 선택합니다.
Create Project 버튼을 누르면 새 프로젝트가 시작됩니다.
먼저 환경설정을 해야합니다.
도구 모음에서 톱니 아이콘을 누릅니다.
Settings
Display width, height 항목에 표시될 디스플레이의 가로, 세로 픽셀을 입력합니다. 화면 방향은 LVGL 코드에서 설정해야 합니다.
트리메뉴에서 Build를 누릅니다.
출력 폴더 위치를 지정합니다. PlatformIO 프로젝트의 하위 폴더로 지정하면 즉시 빌드하기 편리합니다.
LVGL include 값은 lvgl.h로 입력합니다. lvgl 라이브러리 폴더는 이미 platformio에서 include 경로로 등록되어 있기 때문입니다.
Main 탭을 눌러 페이지 설정을 합니다.
페이지를 선택하고 POSITION AND SIZE 섹션을 보면 Width, Height 부분이 빨갛게 표시됩니다.
이렇게 하면 작은 화면에서 큰 페이지를 드래그하면서 볼 수 있습니다.😍 스크롤바는 FLAGS 섹션에서 설정해야 합니다. 페이지, 탭 전환만 하려면 디스플레이 크기와 같도록 설정합니다.
빌드하기
도구 모음에서 렌치(🔧) 아이콘을 누르면 지정한 폴더에 .C 파일이 생성됩니다.
PlatformIO IDE
PIO 프로젝트는 LVGL 라이브러리를 사용가능한 상태로 준비합니다.
EEZ 코드를 사용하려면 아래와 같이 ui.h을 연결하고 ui_init(); ui_tick();을 추가하면 끝입니다.
#include "ui.h" <<-- 이 줄 추가
void setup() {
...
lv_init();
...
ui_init(); <<-- 이 줄 추가
}
void loop() {
...
ui_tick(); <<-- 이 줄 추가
delay(lv_timer_handler());
}
ui_tick()은 eez-flow, animation 효과를 처리합니다.
UI 개체 접근과 EEZ-Flow 기능을 사용하려면 추가 .h 파일을 연결해야 합니다.
#include "ui.h"
#include "vars.h"
#include "screens.h"
UI 속성 값을 조작할 때에는 screens.h 파일을 참고하여 개체 이름을 확인 후 사용하면 됩니다.
lv_label_set_text_fmt(objects.ui_local_time_value, "%04i/%02d/%02d,%02d:%02d:%02d;", year(), month(), day(), hour(), minute(), second());
lv_arc_set_value(objects.arc_hour, hour() % 12);
Q&A
사용 중 발생하는 대부분의 문제 해결 방법은 아래 페이지에 나와있으니 꼭 읽어보세요.
https://github.com/eez-open/studio/wiki/Q&A