M5 Paper+PlatformIO+Arduino의 Hello World

며칠 전에 뜻밖의 일로 손에 넣었다M5Paper.
e-ink 배터리로도 잘 들고 있어요. 집의 온도 등을 표시하고 싶어요.
개발환경 정비만으로도 힘든 만큼 헬로월드가 할 수 있는 만큼 정리했다.

컨디션

Macbook Air (M1, 2020)

macOS Big Sur 11.2.3

Visual Studio Code 1.55.0 Darwin arm64

M5Paper

절차.

드라이버 설치

제작된 프로그램을 M5 페이퍼에게 보내기 위해서는 드라이버가 필요하다.
M5Stack 페이지로 이동합니다.
CP 2104Driver의 "Download"를 클릭하면 플랫폼을 선택하고 활성 환경을 선택하며 드라이버를 다운로드할 수 있습니다.

다운로드한 드라이버를 실행하고 설치합니다.

PlaatformIO 설치

아두노의 개발 환경으로 최근 몇 년 동안 자주 사용된PlatformIO을 설치한다.
공식 홈페이지에 따르면 PlaatformIO는 다음과 같은 특징을 가지고 있다.

교차 플랫폼

다양한 소프트웨어 개발 키트(SDK) 또는 프레임워크 지원

고급 디버그(Debugging)

단일 테스트(Debugging)

자동 코드 분석(정적 코드 분석)

원격 관리(원격 개발)

PlaatformIO는 Visual Studio Code 플러그인으로 제공됩니다.
빨리 설치해.먼저 Visual Code를 시작합니다.

왼쪽 사각형의 아이콘 "Extensions"

선택

검색 표시줄에서 "platformio"로 검색

PlaatformIO IDE

선택

Install

선택
이렇게 하면 PlaatformIO IDE 설치가 완료됩니다.

PlaatformIO 프로젝트 제작

PlaatformIO 프로젝트를 먼저 작성합니다.

아래 집의 아이콘을 선택하면 PIO Home 화면이 열립니다.Quick Access의 New Project를 선택하여 새 프로젝트를 작성합니다.
Project Wizard가 열리면 다음과 같이 설정합니다.

Name: (임의의 이름)

Board: M5Stack Fire

Framework: Arduino

문제가 없으면 Finish를 누릅니다.
프로젝트가 만들어지면 편집 화면platformio.ini이 표시됩니다.

라이브러리 추가

M5 Paper 화면 표시에 필요한 라이브러리 추가

아래 집 아이콘을 선택하고 PIO Home

을 엽니다.

라이브러리 화면 열기

Registry 검색 표시줄에서 "M5 EPD"로 검색

검색 결과에서 M5 EPD

를 선택합니다.

Add to Project를 통해 프로젝트에 추가할 M5EPD의 라이브러리 정보를 표시합니다.

Add project dependency 화면이 표시되므로 방금 만든 항목을 선택하고 "Add"를 선택합니다.
platform.io의 libdeps에 추가된 것을 확인합니다m5stack/M5EPD.
platformio.ini

; PlatformIO Project Configuration File
;
;   Build options: build flags, source filter
;   Upload options: custom upload port, speed and extra flags
;   Library options: dependencies, extra library storages
;   Advanced options: extra scripting
;
; Please visit documentation for the other options and examples
; https://docs.platformio.org/page/projectconf.html

[env:m5stack-fire]
platform = espressif32
board = m5stack-fire
framework = arduino
lib_deps = m5stack/M5EPD@^0.1.1

.pio/libdeps/m5stack-fire 부하들에게 M5EPD의 목록을 추가했다.

$ tree -d .pio -L 4
.pio
├── build
│   └── m5stack-fire
└── libdeps
    └── m5stack-fire
        └── M5EPD
            ├── examples
            ├── src
            └── tools

소스 코드 수정

우선, example에서 HelloWorld의 코드를 복사합니다.
우선 복사본의 소스를 넣은 소스를 열어주세요.

아래 집 아이콘을 선택하고 PIO Home

을 엽니다.

라이브러리 화면 열기

Installed를 선택하면 설치된 쿠일란

을 표시합니다.

개요에서 M5EPD

를 선택합니다.

Examples 태그에 샘플 코드를 표시하고 검색 표시줄에 "Hello World"로 검색한 다음 소스 코드를 복사합니다.
복제된 코드는 src/main입니다.cpp에 붙여넣기.
GUI의 화면 마이그레이션이 번거롭다면GitHub 복제를 시작하면 됩니다.
src/main.cpp

#include <M5EPD.h>

M5EPD_Canvas canvas(&M5.EPD);

void setup()
{
    M5.begin();
    M5.EPD.SetRotation(90);
    M5.EPD.Clear(true);
    M5.RTC.begin();
    canvas.createCanvas(540, 960);
    canvas.setTextSize(3);
    canvas.drawString("Hello World", 45, 350);
    canvas.pushCanvas(0,0,UPDATE_MODE_DU4);
}

void loop()
{

}

라이브러리를 읽을 수 없으며 오류가 발생하면 Visual Studio Code를 다시 시작합니다.(더 좋은 방법이 있을 수 있으니 누가 알려주세요.)

구축

코드도 썼으니까 드디어 빌딩이야.
화면 아래에 있는 검사 단추를 누르면 구축이 시작됩니다.

로 표시되는지 확인합니다.

프로그램 설계

드디어 디버깅이 시작된다.
USB로 M5 Paper를 연결하고 화면 아래에 있는 → 버튼을 클릭하여 빌드를 시작합니다.

로 표시되는지 확인합니다.
M5Paper에 이미지가 표시됩니다!잘 됐다!