ESP32 터치 디스플레이를 활용한 멀티페이지 매크로패드 구축 가이드

이 글은 Waveshare의 ESP32-S3-2.8인치 터치 디스플레이를 기반으로 멀티페이지 매크로패드를 설정하는 과정을 소개합니다. 모든 단계는 간단하며, 추가 하드웨어 없이 진행 가능합니다. 아래 내용을 참조하여 함께 작업을 시작해 봅시다!

 

필요 소프트웨어 및 사전 조건

1. EEZ Studio 다운로드 EEZ Studio는 프로젝트 생성을 위해 꼭 필요합니다. 다음 링크에서 Windows 버전을 다운로드하십시오: envox.eu 지원 페이지 다른 플랫폼에서도 동일한 단계를 따르면 됩니다.
2. LVGL 문서 참고 이 프로젝트는 LVGL(Light and Versatile Graphics Library) 기반으로 작업합니다. 주요 문서는 여기서 확인하세요: LVGL 문서 모든 단계 후 Ctrl+S를 눌러 저장하세요!
3. GitHub 저장소 확인 코드 파일과 이미지는 제공된 GitHub 저장소에서 확인 가능합니다.

1단계: EEZ Studio로 LVGL 프로젝트 생성하기

1. 프로젝트 생성
   • LVGL V8.x 프로젝트를 생성합니다.
   • 프로젝트는 읽기/쓰기 권한이 있는 폴더에 저장해야 합니다.
   • 프로젝트 이름은 예를 들어 InstructablesDemo처럼 공백 없이 설정하세요.
2. 기본 화면 속성 설정
   • 기본 섹션을 선택한 뒤, 오른쪽 속성 메뉴에서 너비(Width)와 높이(Height)를 각각 240과 320으로 변경합니다.
   • 이 값은 세로 방향을 기준으로 하며, 가로 방향으로 전환하려면 240과 320을 뒤집으세요.
3. 설정 문제 해결
   • 속성 필드가 빨간색으로 강조된다면, 설정 메뉴에서 디스플레이의 너비와 높이도 동일하게 240과 320으로 설정합니다.
   • 문제는 곧 해결될 것입니다.

2단계: UI 구성하기

1. Hello World 위젯 추가
   • Widgets Structure 창에서 Hello World 레이블 위젯을 화면 중앙으로 드래그합니다.
2. LVGL 헤더 파일 설정
   • 설정 메뉴에서 필드를 lvgl.h로 변경합니다.

공급

빠른 시작 가이드의 모든 단계를 수행했으며 데모 프로그램을 실행하고 있다고 가정합니다

추가 하드웨어가 필요하지 않습니다(이 지침에서는 온보드 GPIO 핀을 사용하는 방법을 보여주지 않습니다).

다음에서 다운로드할 수 있는 EEZ Studio가 필요합니다.

1. https://www.envox.eu/support-us/

Windows 시스템을 사용하고 있기 때문에 Windows 버전을 사용하겠지만 단계는 다른 플랫폼에서도 동일하다고 가정합니다.

LVGL 문서는 다음과 같은 작업을 수행하는 데 필수적입니다.

1. https://docs.lvgl.io/8.3/

(Ctrl+S를 눌러 모든 단계 또는 작업 후에 저장)

Zip 폴더, 코드 파일 및 이미지는 내 github 저장소에서 찾을 수 있습니다.

1단계: EEZ Studio LVGL 프로젝트 만들기

(이 단계의 이미지 1 참조)

1. LVGL V8.x 프로젝트를 만들어야 합니다.
2. 프로젝트를 액세스 할 수 있고 읽기 / 쓰기 권한이있는 한 모든 폴더에 저장할 수 있습니다
3. 내 프로젝트를 'InstructablesDemo'라고 부르고 있습니다 (프로젝트 이름에 공백을 피하십시오. 대신 밑줄 사용)

 

(이 단계의 이미지 2 참조)

1. 프로젝트 만들기를 누르면 이미지 2와 같은 내용이 표시됩니다
2. 왼쪽의 페이지 섹션에서 기본을 선택하면 오른쪽에 채워진 속성 메뉴가 표시됩니다.
3. 속성>POSITION 및 SIZE에서 너비와 높이를 각각 240 및 320으로 변경합니다.

메모: 우리 프로젝트는 세로 방향입니다. 가로 방향으로 make something을 사용하려면 240과 320을 바꿉니다.

Width 및 Height에 대한 필드는 빨간색으로 강조 표시될 가능성이 높습니다. 우리는 즉시 해결할 것입니다.

(이 단계의 이미지 3 참조)

1. 톱니바퀴 아이콘을 눌러 설정 메뉴를 열고 디스플레이의 너비와 높이에 대해 동일한 값을 씁니다.

Width 및 Height 필드는 더 이상 빨간색으로 강조 표시되지 않아야 합니다

(이 단계의 이미지 4 및 5 참조)

Widgets Structure(위젯 구조) 창 아래에 있는 Hello World 레이블 위젯을 클릭하고 화면 중앙으로 드래그합니다.

(이 단계의 이미지 6 및 7 참조)

1. 설정 메뉴를 다시 엽니다.
2. 표시된 필드를 lvgl.h로 변경합니다.

 

2단계: 첫 번째 EEZ 프로젝트의 코드 파일 저장 및 생성

(이 단계의 이미지 1 참조)

1. 확인 버튼을 눌러 모든 것이 올바른지 확인합니다.
2. 모든 것이 올바르면 경고나 오류가 표시되지 않습니다.

(이 단계의 이미지 2, 3, 4 참조)

1. Build 버튼을 눌러 GUI용 코드 파일을 생성합니다.
2. 프로젝트 디렉토리에 'ui'폴더가있는 src 폴더가 표시되어야합니다.

 

 

3단계: 화면에서 코드 실행

Arduino IDE를 시작하고 빠른 시작 가이드에서 데모 코드가 실행된 스케치북을 엽니다.

(이 단계의 이미지 1 및 2 참조)

1. 새 스케치를 작성합니다. 이렇게 하면 스케치 폴더도 자동으로 생성됩니다.
2. 내 스케치 이름은 Instructables_EEZ_Demo입니다 (그리고 작업을 빠르게 유지하기 위해 일부 코드 파일을 복사하여 붙여 넣어야 하므로 동일한 이름을 사용하는 것이 좋습니다)
3. 'Instructables EEZ Demo Base.zip'의 내용을 스케치 폴더에 붙여넣습니다. 나는 당신이 나와 같은 스케치 이름을 사용했다고 가정합니다. 불필요한 자이로, sd, 오디오 등의 파일없이 빠른 시작 가이드의 LVGL_Arduino 파일과 동일한 파일입니다.

 

코드를 업로드하여 모든 것이 실행 중인지 확인할 수 있습니다. Hello Arduino 메시지가 표시됩니다 (일종의).

(이미지 3 및 4 참조)

1. 2단계에서 만든 ui 폴더를 libraries 폴더에 붙여넣습니다.
2. 이미지 4와 같이 두 줄의 코드를 추가하고 컴파일 및 업로드를 시도합니다.

이제 이 단계의 이미지 5와 동일한 내용이 표시됩니다

 

 

4단계: 애니메이션 피카츄 배경

프로젝트로 돌아가서 Hello World 레이블을 삭제합니다.

이 떠 다니는 피카츄 GIF를 찾아 Ezgif로 240x320으로 크기를 조정했습니다. 공간을 절약하기 위해 프레임 수도 줄였습니다.

프레임으로 분할된 GIF는 링크된 GitHub 저장소의 '피카츄 이미지 Frames.zip'에서 찾을 수 있습니다.

(이 단계의 이미지 1 및 2 참조)

1. 파란색 화살표를 클릭하여 이미지를 추가합니다. 이미지는 개별적으로 추가해야 합니다.
2. 색상 형식으로 'INDEXED 4 BIT'를 선택합니다.
3. 비트맵 이름을 이미지 이름과 동일하게 유지합니다. 예: Frame0

(이 단계의 이미지 3 참조)

1. 모든 프레임을 추가하면 섹션이 파란색 화살표로 표시된 내 섹션처럼 보일 것입니다.
2. 그런 다음 AnimationImage 위젯을 화면으로 끌어다 놓고 전체 공간을 덮도록 크기를 조정합니다.
3. 위젯 이름을 PikachuBackground로 바꿉니다.

(이 단계의 이미지 4, 5, 6 참조)

1. '+' 버튼을 누른 후 이전에 추가한 이미지(프레임)를 선택하여 각 이미지(프레임)를 추가합니다.
2. 모든 이미지를 추가한 후에는 이 단계의 이미지 6과 같은 이미지가 있어야 합니다
3. 이제 피카츄가 떠 있을 것입니다.
4. 무한 반복 이 켜져 있어야 합니다. gif 애니메이션의 속도를 변경하기 위해 지속 시간을 조정할 수 있습니다.

저장, 확인 및 빌드 버튼을 누릅니다. 그런 다음 3단계와 같이 UI 폴더를 화면에 붙여넣고 코드를 업로드합니다.

결과는 이미지 7과 같아야 합니다(물론 피카츄는 떠 있어야 합니다)

 

5단계: 시간 표시

참고: GitHub 리포지토리에서 이 단계에 대한 코드 파일을 다운로드할 수 있습니다. 'Instructables Pikachu Clock.zip' 다운로드

이 zip에 UI 폴더도 포함하겠습니다. UI 폴더를 잘라내어 라이브러리 폴더에 붙여넣어야 합니다. 그런 다음 새 Arduino 스케치 및 폴더를 만들고 내 ino 파일의 내용을 해당 스케치에 복사할 수 있습니다. 마지막으로 다른 코드 파일을 Arduino 스케치로 폴더에 붙여넣어야 합니다.

(이 단계의 이미지 1 참조)

1. 텍스트 레이블을 추가하고 피카츄 위의 화면 중앙에 배치합니다.
2. '텍스트' 입력란을 지웁니다(필요하지 않음).
3. 레이블 이름을 'TimeLabel'로 지었습니다.

(이 단계의 이미지 2 참조)

1. 레이블의 ALIGN 필드를 CENTER로 변경합니다.
2. 글꼴을 MONTSERRAT_30로 변경

(이 단계의 이미지 3 및 4 참조)

1. 빨간색 마커로 강조 표시된 선을 추가합니다.
2. ssid 및 password 필드에서 SSID와 비밀번호를 바꿉니다.
3. 시간대에 따라 timeClient.setTimeOffset() 의 값을 변경하십시오.
4. 온보드 RTC를 사용하지 않습니다.

 

지금 코드를 업로드하면 사용된 글꼴과 관련하여 오류가 발생할 수 있습니다

(이 단계의 이미지 5 및 6 참조)

1. 이 오류를 해결하려면 라이브러리 폴더의 Lvgl 폴더로 이동합니다
2. Lvgl->src->lv_conf.h
3. VSCode와 같은 파일에서 파일을 엽니다. Ctrl+F를 사용하여 '글꼴'을 검색합니다.
4. font에 대한 정의 문 목록을 찾을 수 있습니다. 사용하려는 모든 글꼴에 대해 0을 1로 변경합니다.

 

업로드 후 피카츄의 시간을 볼 수 있습니다.

텍스트 레이블, 글꼴 스타일 및 기타 옵션의 위치를 가지고 놀 수 있습니다.

이미지 7에서 내 것을 참조하십시오.

코드에 대한 참고 사항:

1) 나는 두 개의 다른 줄에 시간을 보내고 싶었고 문자열을 그렇게 포맷했다. 코드에서 다음 줄을 참조하십시오.

formattedDate = timeClient.getFormattedTime().substring(0, 5);

String formattedTime = formattedDate.substring(0, 2) + "\n" + formattedDate.substring(2, 5);

원하는 대로 형식을 변경할 수 있습니다.

2) 'objects.time_label'를 주의합니다. 이것은 EEZ Studio가 'TimeLabel'에 부여한 이름입니다.

사용되는 모든 위젯은 개체를 사용하여 액세스할 수 있습니다. (위젯 이름)을 클릭합니다. Arduino IDE의 자동 완성 기능을 통해 또는 ui 폴더의 screens.c 파일을 통해 이름을 가져올 수 있습니다.

3) 애니메이션은 CPU 집약적이기 때문에 RTOS를 사용하여 시간 계산과 lvgl_update 작업을 분할해야 했습니다.

6단계: 페이지 추가 - 1부

이제 LVGL GUI에 대한 추가 페이지를 만들 때입니다. 이 페이지에는 컴퓨터의 미디어 재생을 위한 기본 음악 컨트롤이 있습니다.

먼저 메인 페이지에 버튼을 추가하여 음악 페이지로 이동합니다

(이 부분은 이미지 1-6 참조)

1. 원하는 위치에 버튼 위젯을 배치하세요. 버튼 위젯의 이름을 'MusicPgBtn'으로 바꿨습니다.
2. Button 위젯에는 중첩된 Label 위젯이 있습니다. 라벨 위젯을 클릭하고 텍스트를 원하는 대로 변경하십시오. 우리의 목적을 위해 거기에 '음악'을 쓰는 것은 의미가 있습니다. 레이블에 이름을 지정해야 합니다.
3. 레이블의 STYLE에서 DEFAULT->TEXT->Color로 이동하여 #000000(검은색의 경우 16진수 코드)으로 변경합니다. 텍스트의 불투명도는 255여야 합니다.
4. 피카츄 이미지 프레임을 추가한 것처럼 구름 비트맵을 추가합니다. GitHub 저장소에서 'Main Page Button.zip' 폴더에 있는 클라우드 이미지를 다운로드합니다. 비트 맵을 'Cloud'로 저장했습니다.
5. 버튼 위젯으로 돌아갑니다. DEFAULT->BACKGROUND로 이동하여 이미지 4와 같이 변경합니다.
6. 그래도 MusicPgBtn의 경우 DEFAULT->SHADOW로 이동하여 불투명도를 0으로 변경합니다. (이미지 5 참조)
7. 이제 GUI가 이미지 6에서와 같이 보일 것입니다. 화살표 키를 사용하여 음악 레이블을 위/아래로 이동해 보십시오.

이제 음악 페이지를 추가하기 시작합니다.

(이미지 7-9 참조)

1. '페이지' 열이 있는 왼쪽 상단 창에서 '+' 버튼을 눌러 새 페이지를 추가합니다(이미지 7 참조).
2. 페이지의 이름을 입력할 수 있는 새 페이지 대화 상자가 표시됩니다. 저는 이 페이지를 음악이라고 부르겠습니다.
3. 시작 메인 페이지와 유사한 빈 페이지가 표시되어야 합니다.

 

 

7단계: 페이지 추가 2부

이제 메인 페이지로 돌아가서 MusicPgBtn을 눌렀을 때 음악 페이지로 이동하도록 구성합니다.

(이미지 1-3 참조)

1. '사용자 작업' 창으로 이동합니다. 페이지 창 옆에 있습니다. (이 단계의 이미지 1 참조)
2. '+' 버튼을 눌러 사용자 작업을 추가합니다. 원하는 이름을 액션에 지정합니다. 나는 그것을 'GoToMusicPg'라고 부를 것입니다 (이미지 2 참조).
3. 그렇게 많은 속성이 없습니다. 이에 대한 설명을 작성할 수 있습니다. (이 단계의 이미지 3 참조)

이제 MusicPgBtn에 이벤트 핸들러를 추가합니다

(이미지 4-6 참조)

1. 메인 화면으로 이동하여 Button->EVENTS->'+'를 선택합니다. (이미지 4 참조)
2. '새 이벤트 처리기' 대화 상자가 표시되어야 합니다. 작업 드롭다운에서 원하는 작업을 선택할 수 있습니다. 지금은 작업이 하나뿐이므로 해당 작업을 선택합니다. (이미지 5 참조)
3. 이 단계의 이미지 6과 유사한 내용이 표시되어야 합니다

모든 것을 확인하고 빌드 버튼을 누릅니다.

(이미지 7-10 참조)

1. ui 폴더로 이동합니다. 이제 actions.h 파일이 표시됩니다(이미지 7 참조).
2. 원하는 텍스트 편집기에서 actions.h 파일을 엽니다. 제 경우에는 VSCode입니다. ui 폴더에서 screens.h 파일도 엽니다.
3. screens.h 파일에 화면 ID가 표시되어야 합니다. (이미지 8 참조)
4. 동일한 ui 폴더에 actions.c 파일을 만들고 이미지 9에 표시된 코드 줄을 추가합니다. 아래에도 붙여 넣습니다. (이미지 9 참조)
5. action 헤더 파일에서 이벤트 처리기/action 메서드 이름을 가져올 수 있습니다. (이미지 10 참조)

(actions.c 코드)

#include "actions.h"

#include "ui.h"

 

무효 action_go_to_music_pg(lv_event_t * e){

loadScreen(SCREEN_ID_MUSIC);

}

이전과 같이 ui 폴더를 복사하여 라이브러리 폴더에 붙여넣습니다.

Arduino 스케치에는 약간의 변경이 필요합니다. 음악 페이지에 있지 않은데 시간을 업데이트해야 하는 이유는 무엇입니까? 활성 화면이 메인 화면인 경우에만 시간 작업에서 로직을 실행합니다.

time_update_task 다음과 같이 변경합니다.

무효 time_update_task(무효 *pvParameters)

{

정적 문자열 lastFormattedTime = "";

 

동안 (1)

{

if(lv_scr_act()==objects.main){

timeClient.update();

formattedDate = timeClient.getFormattedTime().substring(0, 5);

String formattedTime = formattedDate.substring(0, 2) + "\n" + formattedDate.substring(2, 5);

 

if (formattedTime != lastFormattedTime) {

formattedTime.toCharArray(시간 배열, sizeof(시간 배열));

lv_label_set_text(objects.time_label, 시간 배열);

lastFormattedTime = 포맷된 시간;

}

}

vTaskDelay(pdMS_TO_TICKS(1000)); 초당 업데이트 시간

}

}

변경 사항이 굵게 표시되었습니다.

디스플레이에 코드를 업로드합니다. 동일한 떠 있는 피카츄가 보여야 하지만 이제 그 아래에 음악 버튼이 있습니다. (이미지 11 참조).

버튼을 누르면 빈 화면이 표시되어야 합니다. (이미지 12 참조)

8단계: 페이지 추가 - 3부

이제 배경, 위젯 및 기타 항목을 추가하여 음악 페이지를 디자인합니다. 나는 이것을 매우 간단하게 유지할 것입니다.

(이 단계의 코드 파일 및 ui 폴더는 Instructables Final Project.zip에서 찾을 수 있습니다.)

앞에서 다룬 개념을 사용하여 짧은 애니메이션 배경 및/또는 이미지 배경이 있는 버튼을 추가할 수 있습니다.

디자인 대신, 디지털 버튼 누름을 통해 미디어 제어를 트리거하는 방법을 보여 드리고자 합니다.

(이미지 1 참조)

1. 4 개의 버튼을 추가했습니다.
2. LVGL 이름: PlayPauseBtn (재생 및 일시 중지용)
3. LVGL 이름: VolUpBtn(볼륨 높이기용)
4. LVGL 이름: VolDnBtn(볼륨 낮추기용)
5. LVGL 이름: GoToMainBtn (메인 페이지로 돌아가기 위해)

(이미지 2 참조)

1. 이전과 같이 사용자 작업을 만듭니다. 나는 내 것을 'GoToMainPg'라고 부르고 있습니다.
2. 'GoToMainBtn'의 짝수 핸들러 아래에 추가합니다.

(이미지 3 참조)

1. 다음 세 가지 작업을 더 만듭니다.
2. PlayPause액션
3. VolUp액션
4. VolDown액션
5. PlayPauseBtn, VolUpBtn 및 VolDnBtn에 각각 추가합니다.
6. 빌드 버튼을 확인하고 누릅니다.

(이미지 4 및 5 참조)

1. actions.h 및 actions.c 파일을 다시 엽니다. 헤더 파일에는 이제 훨씬 더 많은 이벤트 함수가 있어야 하며 .c 파일(소스 파일)은 이전 단계와 동일해야 합니다.
2. actions.c 파일을 업데이트하여 이제 메인 화면을 로드합니다(이미지 5 참조).

(업데이트된 actions.c 코드)

#include "actions.h"

#include "ui.h"

무효 action_go_to_music_pg(lv_event_t * e){

loadScreen(SCREEN_ID_MUSIC);

}

무효 action_go_to_main_pg(lv_event_t * e){

로드스크린(SCREEN_ID_MAIN);

}

(변경 사항은 굵게 표시되었습니다)

이전과 같이 libraries 폴더에 ui 폴더를 복사하여 붙여넣습니다.

 

Arduino 스케치를 다시 엽니다. 이벤트 메소드 서명을보다 쉽게 복사하기 위해 actions.h 파일을 유지하는 것이 좋습니다

1. 다른 이벤트도 정의해야 합니다

(이미지 6 및 7 참조)

1. 강조 표시된 이벤트를 정의해야 합니다. 이를 Arduino 스케치에 복사합니다. (extern 키워드는 Arduino 스케치의 메소드 서명에 없어야 합니다.)

(이미지 8-11 참조)

1. 이미지 8에 표시된 필수 라이브러리를 추가합니다. 이러한 라이브러리가 아직 없는 경우 설치해야 합니다.

#include <actions.h>

#include "USB.h"

#include "USBHIDKeyboard.h"

#include "USBHIDConsumerControl.h"

1. setup() 함수 외부에 다음 줄을 추가합니다.

USBHID키보드 키보드;

USBHIDConsumerControl 컨슈머컨트롤;

1. setup() 함수에서 다음 줄을 추가합니다.

USB.begin();

소비자Control.begin();

1. 이제 이벤트를 정의할 수 있습니다

무효 action_play_pause_action(lv_event_t * e){

consumerControl.press(CONSUMER_CONTROL_PLAY_PAUSE);

소비자Control.release();

}

무효 action_vol_up_action(lv_event_t * e){

consumerControl.press(CONSUMER_CONTROL_VOLUME_INCREMENT);

소비자Control.release();

}

무효 action_vol_down_action(lv_event_t * e){

consumerControl.press(CONSUMER_CONTROL_VOLUME_DECREMENT);

소비자Control.release();

}

Arduino IDE에서 Tools->USB CDC On Boot->Enabled 설정을 변경합니다(이미지 12 참조).

코드를 확인하고 디스플레이에 업로드합니다.

 

이제 두 번째 페이지의 버튼을 눌러 볼륨을 제어하고 노래나 비디오를 재생하거나 일시 중지할 수 있습니다.

내 결과를 보려면 이미지 13과 14를 확인하십시오.

9 단계 : 결론

이 지침에서 무언가를 배웠기를 바랍니다.

더 명확하게 하고 싶은 것이 있으면 알려주세요.

일반적인 문제 해결 팁:

1. 디스플레이에 코드를 업로드하는 데 문제가 있는 경우 장치를 부트로더 모드로 전환해 보십시오. (위키의 FAQ 섹션에서 이 작업을 수행하는 방법을 알아보세요.)
2. 버튼이 예상된 작업을 실행하지 않는 경우 관련 이벤트를 할당했는지 다시 확인하십시오.