ESP-32 LVGL 그래픽을 사용한 고급 기술 - 소개

 

ESP-32 및 LVGL 그래픽을 사용한 고급 기술 - 소개

 

솔직히 말해서, 이 새로운 튜토리얼 시리즈의 제목을 고르는 데 꽤 애를 먹었습니다. 이 시리즈는 2.4인치 컬러 그래픽 디스플레이와 ESP32 프로세서가 깔끔하게 통합된 하나의 패키지에 포함된 CrowPanel 장치( 자세한 내용은 여기 참조 )를 사용하여 골프 카트용 속도계를 개발하는 방법을 설명합니다. 이러한 장치를 직접 제작하고 싶어 하는 독자도 있겠지만, 이 튜토리얼의 진정한 가치는 프로젝트에 사용된 여러 고급 구성 및 프로그래밍 개념을 설명하는 데 있다고 생각합니다. 이 튜토리얼 시리즈는 다음과 같은 주제를 다룹니다.

 

 

 

프로그래밍에 Arduino IDE를 사용하도록 CrowPanel 장치를 구성하는 방법과 독점 라이브러리 대신 일반적으로 사용되는 그래픽 라이브러리를 활용하는 방법을 설명합니다. 관련 자료는 산발적이고 이해하기 어렵습니다.

 

스프라이트란 무엇이며, 디스플레이 장치에서 애니메이션 효과를 생성하는 데 어떻게 사용할 수 있을까요? 최신 자동차의 디지털 대시보드가 ​​아날로그 계기판을 모방한 사실적인 계기판과 다이얼을 어떻게 표시할 수 있는지 궁금했던 적이 있다면, 곧 답을 알게 될 것입니다.

 

시간 기반 인터럽트와 이벤트 기반 인터럽트를 사용하여 ESP-32를 프로그래밍하는 방법입니다. 이 프로젝트에서는 두 가지 인터럽트를 모두 사용합니다. 이벤트 기반 인터럽트는 홀 효과 센서가 감지한 각 바퀴 회전 시간을 기록하고, 시간 기반 인터럽트는 시스템의 경과 시간을 기록합니다. 최종 출력은 시속(마일)을 나타내는 게이지와 총 주행 시간, 총 주행 거리, 그리고 각각에 대한 재설정 가능한 트립 표시기를 기록하는 내부 레지스터입니다.

 

장치 전원이 꺼져도 사라지지 않는 비휘발성 정보를 저장하는 방법. 물론 SD 저장 장치를 추가할 수도 있지만, 속도계 애플리케이션의 경우 주행 시간과 주행 거리와 같은 몇 가지 데이터만 저장하면 되므로 과할 수 있습니다. 우리는 이미 아두이노 IDE를 사용하여 컴파일된 프로그램을 장치의 플래시 메모리에 프로그래밍하는 방법을 알고 있으며, 이 프로그램은 재프로그래밍될 때까지 유지됩니다. 그런데 플래시 메모리에 프로그램 변수를 저장, 수정 및 검색할 수도 있다는 사실을 알고 계셨나요? ESP-32 장치에서 이 작업을 매우 간편하게 수행할 수 있는 편리한 아두이노 라이브러리가 있습니다.

 

ESP-32와 블루투스 통신을 활용하는 방법입니다. 기기의 그래픽을 깔끔하고 단순하게 유지하고 싶었기 때문에 주행 거리계 기능을 화면에 표시하는 대신 블루투스를 활용하여 안드로이드 폰에서 사용할 수 있도록 했습니다. ESP-32는 기존 블루투스 프로토콜을 지원하며, 연결된 기기의 요청에 간단한 직렬 데이터 스트림을 통해 응답하도록 설정되어 있습니다. Bluetooth Serial이라는 표준 안드로이드 앱을 다운로드하고 설정하여 정보를 쉽게 가져올 수 있습니다.

 

마지막으로, MIT App Inventor라는 온라인 개발자 애플리케이션을 사용하여 기기와 연동되는 맞춤형 안드로이드 앱을 제작합니다. 모든 Google 계정을 사용하여 웹에서 접속할 수 있으며, 안드로이드 사용자 인터페이스를 디자인하고 로직(즉, 프로그래밍)을 추가하여 완전한 안드로이드 앱을 구축할 수 있는 간단한 그래픽 인터페이스를 제공합니다. 저는 취미 수준의 프로그래머로서 안드로이드 앱(apk 파일)을 만들어 본 적이 없지만, 이 온라인 도구 덕분에 매우 쉽게 제작할 수 있습니다.

 

흥미를 끌기에 충분하신가요? 좋습니다. 계속해 볼까요?

 

배경

 

코스타리카의 해변 마을에 살고 있는 저희는 마을 내 단거리 이동 시 전기 골프 카트를 주요 교통수단으로 사용합니다. 몇 년 전, 골프 카트의 기존 납축 ​​전지를 리튬 전지로 교체했습니다. 새로 설치한 전지에는 기존 아날로그 배터리 게이지를 대체하는 전자식 배터리 충전 표시기가 포함되었습니다. 대시보드 중앙에 있는 사용하지 않는 게이지를 잠시 살펴본 후, 전자식 속도계로 개조하기로 했습니다. 속도계가 있어야 할 대시보드 중앙에 바로 있었기 때문입니다. 게이지를 떼어내고 분해한 후 모든 전자 장치를 제거했습니다.

 

그런 다음 게이지 케이스 에 1.28인치 전자식 LED 디스플레이를 구입하여 설치했습니다 . ESP-32 WROOM 프로세서와 폐품 상자에 있던 12VDC-5VDC 전력 변환기를 사용하여 디스플레이와 ESP32에 전원을 공급하고 제어했습니다. 마지막으로 뒷바퀴 허브에 자석을 붙이고 뒷차축에 홀 효과 센서를 부착했습니다. 홀 효과 센서는 ESP32의 IO 핀 중 하나에 연결되어 타이어가 한 바퀴 회전할 때마다 전압 펄스를 보냅니다.

 

여기에 약간의 C++ 코드를 추가하면 작동 속도계가 완성됩니다. 주행 거리계와 주행 시간 데이터로 디스플레이를 복잡하게 만들고 싶지 않았고, 여러 디스플레이 화면 사이를 전환하는 버튼도 추가하고 싶지 않았습니다. 그래서 ESP32의 블루투스 기능을 사용하여 주행 거리계와 주행 시간 데이터를 안드로이드 폰에 표시하기로 했습니다.

 

 

 

 

제 장치를 그대로 복제하고 싶어 하는 독자는 많지 않겠지만, 제가 사용한 몇 가지 기법은 다른 사람들에게 매우 유용할 수 있습니다. 이 튜토리얼에서는 원형 디스플레이와 ESP32 장치를 단일 장치로 교체했습니다. 이 장치는 320 x 240 픽셀 디스플레이와 이전에 사용했던 WROOM 모델과 호환되는 ESP32 프로세서를 탑재한 CrowPanel 장치입니다. 이 튜토리얼은 아래에 설명된 대로 여러 레슨으로 구성됩니다.

 

1부 — PC에 Arduino IDE를 로드하고 CrowPanel 장치를 처리하도록 구성합니다. 코딩에 사용할 여러 라이브러리를 다운로드합니다. 그런 다음 디스플레이 프로그래밍 도구를 살펴보고 CrowPanel 화면에 속도계 게이지 면을 코딩합니다.

 

2부 - "그래픽 스프라이트"의 개념을 살펴보고 이를 활용하여 속도계 포인터를 만들어 보겠습니다. 간단한 애니메이션을 보여주기 위해 디스플레이에서 포인터를 동적으로 움직이는 프로그램을 작성해 보겠습니다. 마지막으로, 포인터를 수정하고 애니메이션으로 제어되는 디지털 판독값을 디스플레이에 추가합니다. 이제 최종 디스플레이 구성이 완료되었습니다. 이제 속도, 거리, 경과 시간을 감지하고 표시하는 코드를 추가하는 것만 남았습니다.

 

3부 - 홀 효과 센서 장치를 추가하고 바퀴가 한 바퀴 회전할 때마다 처리하는 인터럽트 기반 코드를 작성합니다. 이 정보를 통해 차량 속도와 주행 거리를 계산할 수 있습니다. 주행 거리 카운터가 1/10마일에 도달할 때마다 주행 거리계를 업데이트하고 카운터를 재설정합니다. 6분(1/10시간)마다 트리거되는 시간 기반 인터럽트를 사용하여 경과 시간 레지스터를 업데이트합니다. 속도계 게이지 디스플레이는 메인 루프의 최신 속도로 1초에 두 번씩 업데이트됩니다. 또한 경과 시간 및 거리 정보를 비휘발성 플래시 메모리에 저장하여 시스템 전원이 켜질 때마다 최신 값을 사용할 수 있도록 하는 방법도 알아봅니다. Arduino IDE에는 ESP-32 제품군 장치에서 이 작업을 매우 쉽게 수행할 수 있는 특수 라이브러리가 포함되어 있습니다. 또한 오늘날 대부분의 자동차에서 볼 수 있는 거리 및 시간 표시기를 0으로 재설정하고 증분 값을 기록할 수 있는 트립 표시기를 추가할 것입니다.

 

4부 - ESP-32의 블루투스 기능을 사용하여 안드로이드 기기를 통해 시간과 주행 거리 값을 확인하고, 사용자가 주행 거리계를 재설정하고 마일에서 킬로미터로 디스플레이를 전환할 수 있도록 합니다. 이 단계에서는 기기와 상호 작용할 표준 안드로이드 애플리케이션(블루투스 시리얼)을 구성합니다.

 

5부 - 기기와 상호작용할 맞춤형 안드로이드 애플리케이션(APK)을 만들어 보겠습니다. 웹 브라우저에서 실행되는 온라인 개발 도구를 사용하여 새 애플리케이션을 디자인, 프로그래밍, 다운로드할 것입니다. 이 애플리케이션의 이름은 MIT 앱 인벤터이며, 배우고 사용하기 매우 쉽습니다.

 

이 튜토리얼 시리즈가 여러분에게 흥미롭고, 여러분의 다음 프로젝트 에 대한 아이디어를 제공하기를 바랍니다 .

 

 

참고 문서의 링크를 연결합니다. 원문으로 이동하시려면 이 링크를 따라가세요.