글 빚는 공방

 TFT LCD에 GPS 데이터까지 출력했다면 GPS Logger project의 마지막 단계, SD card에 GPS 데이터를 저장해볼 시간이다.

1. SD card 포맷

 ESP32 보드에 SD card를 사용하려면 포맷이 필요하다. 여유가 있으면 맥에서도 지원이 가능한 포맷 프로그램을 찾아볼 수 있겠지만 시간 관계상 윈도우에서 포맷을 진행했다. 포맷 관련 내용은 조금만 검색해도 찾을 수 있기 때문에 여기서는 별도로 정리하지 않는다.

2. 라이브러리 활용

SD card를 사용하기 위해서는 앞서 설치한 ESP32 라이브러리가 필요하다. 그중에서 SD test 예제를 활용한다.

 지금까지의 과정 중 비교적 간단한 코드 수정을 거쳐 SD card 인식 여부를 확인할 수 있다. 예제 코드를 전부 실행시켜도 상관없지만 여기서는 SD card의 인식만 확인하는 것이 목적이므로 필요한 코드만 남기기로 한다. 전체 코드에서 일부 코드만 주석 처리하면 끝이다.

가끔은 주석 처리조차 귀찮을 때가 있으므로 동작을 확인한 예제를 첨부한다.

주석 처리한 코드를 ESP32에 write한 후 serial을 통해 출력되는 내용을 살펴본다.

 SD card에 저장된 파일이 있다면 파일 목록까지 모두 출력된다. 위와 같이 인식된 SD card의 정보가 모두 출력되면 SD card가 정상적으로 인식된 것이다. 이제 GPS data를 SD card에 저장할 모든 준비가 끝났다.

이제 실제 GPS 데이터를 TFT LCD에 출력해볼 것이다. 이 과정을 충분히 이해한다면 응용한다면 TFT LCD에 데이터를 출력하는 일은 어렵지 않을 것이다.

1. 라이브러리 활용

GPS 모듈을 통해 수신한 데이터를 TFT LCD에 출력하기 위해서는 앞선 예제를 모두 활용해야 한다.

TFT LCD touch를 확인한 글에서 사용한 예제와 직전 GPS 통신을 확인한 글에서 사용한 예제를 활용한다. 목표는 LCD 화면에 GPS 모듈에서 보내는 값, 그리고 ESP32의 동작 상태를 확인할 문자를 회전시키며 출력하는 것이다.

일부 추가로 작성한 코드 외에 동작에 영향을 주는 부분은 없다. 모두 기존 예제를 활용한 관계로 예제에 대한 설명은 덧붙이지 않는다. 예제 코드가 길어진 관계로 코드를 별도로 첨부한다.

이중 loop()의 코드를 살펴보면 동작은 크게 세 부분으로 이루어진다.

1. gps module에서 시리얼 통신으로 데이터 읽어오기

2. 읽어온 값 중에서 chars 값을 LCD에 출력하기

3. ESP32 동작 상태를 확인한 문자 출력하기

이 중에서 일부 코드만 살펴보자. 먼저 읽어온 값 중에서 chars 값을 LCD에 출력하도록 일부 내용을 변경한 함수다.

static void print_int(unsigned long val, unsigned long invalid, int len)
{
  char sz[32];
  if (val == invalid)
    strcpy(sz, "*******");
  else
    sprintf(sz, "%ld", val);
  sz[len] = 0;
  for (int i=strlen(sz); i<len; ++i)
    sz[i] = ' ';
  if (len > 0) 
    sz[len-1] = ' ';

  if(showInfo==1) // 이 부분에서 CHARS 값을 출력한다. TFT 라이브러리에서 제공하는 함수를 사용한다.
  {
    //myGLCD.setTextColor(TFT_BLACK,TFT_WHITE);
      myGLCD.drawCentreString("*CHARS:", 20, 20, 2);
      myGLCD.drawCentreString(sz, 100, 20, 2);
      showInfo=0;
  }
  Serial.print(sz);
  smartdelay(0);
}

그다음은 ESP32 동작 상태를 확인하는 문자를 출력하는 함수다.

static void progress(void)
{
  if(prog==0) myGLCD.drawCentreString("-",10,0,2);  
  else if(prog==1) myGLCD.drawCentreString("\\",10,0,2);
  else if(prog==2) myGLCD.drawCentreString("|",10,0,2);
  else if(prog==3) myGLCD.drawCentreString("/",10,0,2);
}

이제 코드를 동작시켜볼 차례다. 다운로드한 예제를 컴파일해서 올리면 다음과 같은 화면이 나타난다.

https://youtu.be/cF7VpY5_ziE

이제 GPS 모듈을 연결해볼 차례이다. 지금까지의 과정, 그리고 앞으로 진행할 과정 중에서 몇 안 되는 손쉬운 과정이다.

1. tinyGPS 라이브러리 설치

GPS 모듈을 동작시키기 위한 라이브러리를 설치한다.

2. GPS 연결 예제

예제를 수행하기 전에 다음의 핀맵을 참고해서 GPS 모듈을 연결한다.

5V -> VIN

GND -> GND

Module RX -> TX2(17)

Module TX -> RX2(16)

시리얼 통신을 사용하기 위해 위와 같이 코드를 수정한다.

Chars RX 값이 지속적으로 증가하면 GPS 모듈 값을 정상적으로 읽어 오는 것이다. 외부나 GPS 신호를 수신하기 용이한 위치에서는 실제 GPS 값이 출력될 수도 있다. 여기까지 아무런 문제가 없다면 다음으로 넘어가자.

이제 TFT LCD의 touch 동작을 확인할 차례이다.

1. touch 라이브러리 설치

먼저 Adafruit touchscreen 라이브러리 설치가 필요하다. 아두이노의 라이브러리 매너저를 통해 라이브러리 설치를 진행한다.

2. touch 예제

라이브러리 설치가 완료된 후 touch를 확인하기 위해 예제를 연다.

다음과 같이 touch 좌표를 입력 받기 위한 pin 정보를 수정한 후 코드를 write 한다.

*pin 정보는 다음 글에 기재한 pin map을 참고한다.

2021.05.11 - [BerryMixLab/Arduino Tutorial] - Arduino Tutorial - 3. TFT LCD 모듈 연결

화면 이곳저곳을 터치하면 값이 변하고 정상적으로 터치가 인식되는 것을 알 수 있다.

하지만 변환된 좌표 값이 정상적이지는 않아 보인다. 제대로 Touch를 설정하고 제대로 동작을 확인하기 위해서는 몇 가지 라이브러리가 더 필요하다.

3. 추가 라이브러리 설치

아두이노 라이브러리매니저에서 다음 라이브러리를 모두 설치한다.

● Adafruit gfx

● Adafruit tftlcd

a. Adafruit gfx 라이브러리 설치

b. Adafruit tftlcd 라이브러리 설치

4. 예제 응용

이제 예제를 활용해 touch에 따라 TFT LCD에 정보를 표시해볼 차례이다. pin 정보를 수정하고 업로드를 시도하자. 하지만 예상과는 달리 예제를 컴파일 하면 의미를 해석하고 싶지 않은 오류들을 출력한다.

동작하지도 않는 예제를 왜 제공하는지 따져 물을 수 있지만 현재로서 그것은 능력 밖의 일이다. 그래서 다른 방법을 통해 예제의 코드를 수행해 보았다. 방법은 다음과 같다.

ESP32 utftdemo 예제에
Adafruit tftlcd의 tftpaint 예제를
적당히 붙여 넣기 하는 것.

말은 쉽다. 하지만 시도에는 시행 착오가 따른다. 그래서 성공한 예제를 첨부한다.

코드에 별도의 주석은 없으며 예제 실행을 위해 직접 수정한 부분 중 중요하게 생각하는 내용만 일부 별도로 기재한다.

a. setup()

analogReadResolution(10); // ADC 해상도 범위를 10bit로 설정해야 touch 영역이 정상적으로 인식됨. 
// Setup the LCD 
myGLCD.init(0x9431); //본 글에서 사용하고 있는 TFT LCD의 IC인 ILI9431를 
                     //명시해야 정상적으로 초기화가 진행된다.

b. loop()

//p.x = map(p.x, TS_MINX, TS_MAXX, myGLCD.width(), 0); // 기존 코드 
p.x = map(p.x, TS_MINX, TS_MAXX, 0, myGLCD.width()); // 좌표 값을 반전 시켜야 
                                                       // touch가 정상적으로 
                                                       // TFT LCD에 반영이 된다.

*ADC 해상도 관련 내용은 다음글에 자세하게 기록해 두었다.

2020.10.20 - [BerryMixLab/Arduino Project] - 아두이노 프로젝트 - GPS Logger 만들기

다운로드한 예제를 컴파일해 다음과 같은 화면이 나타나면 touch를 확인해 볼 수 있다.

이제 약간의 응용만 가능하다면 touch를 통해 ESP32를 제어할 준비가 끝났다. 여기까지 아무런 문제가 없다면 다음으로 넘어가자.

 이제 TFT LCD를 ESP32에 연결해 보자. 본 tutorial에서는 ILI9341 TFT LCD를 사용했으며 이 TFT LCD 하나를 ESP32에 연결해서 얻는 이점은 다음과 같다.

● 데이터 출력

● Touch interface

● SD card interface

TFT LCD 하나면 이런저런 부차적인 인터페이스를 추가로 연결할 필요가 없으니 프로젝트 진행에 있어서 정말 유용한 부분이라고 생각된다.

https://www.pangodream.es/ili9341-esp32-parallel

연결 및 초기 설정은 위 사이트를 참고했으며 GPS 모듈 연결, SD 카드 동시 사용을 위해 일부 핀맵을 변경했다. ILI9341 TFT LCD 화면과 Arduino를 연결하는 방식은 SPI 방식과 parallel 방식이 있는데 여기서는 위 사이트를 참고하여 parallel 방식을 사용했다.

1. 핀맵

위에서 참고한 사이트와 동일하게 연결해도 무방하다. 하지만 GPS를 연결하려면 시리얼 포트가 필요하고 GPS를 사용하면서 동시에 LCD를 Parallel mode로 사용하려면 남겨두는 편이 좋다. 핀맵을 참고하여 LCD와 ESP32를 연결한다.

2. 라이브러리 설치

ILI9341 TFT LCD를 구동하는데 여러 라이브러리가 있지만 여기서는 TFT_eSPI 라이브러리를 설치한다.

3. Parellel 적용

TFT eSPI 라이브러리를 parellel 방식으로 동작시키려면 경로를 확인하여 User_Setup.h 파일을 변경해야 한다.

Document/Arduino Folder/libararies/TFT_eSPI/User_Setup.h 파일을 열어서 다음과 같이 수정한다. iCloud를 사용 중이라면 iCloud 문서에 Arduino 폴더가 있을 것이다.

4. 예제

다음과 같은 화면이 나타나면 모든 연결과 설정이 정상적으로 완료된 것이다.

이제 각종 예제와 라이브러리를 활용하여 화면에 무엇이든 표시할 준비가 끝났다. 여기까지 아무런 문제가 없다면 다음으로 넘어가자.

모든 코딩의 기본이 되는 ‘hello world’를 시작해보자. 보통 처음 ‘hello world’를 접하게 되는 경우는 화면이 달려 있다. 하지만 여기서는 아직 화면이 없으니 시리얼 통신으로 대체하기로 한다. 시리얼 통신은 각 산업 분야에 다양하게 적용되어 있다. 그리고 시리얼 통신은 아두이노 개발 과정에서는 필수라고 봐도 과언이 아니다.

*MAC에서 Arduino 개발 환경 준비 및 LED 제어 관련 내용은 이전 글에서 확인한다.

2020.10.20 - [BerryMixLab/Arduino Tutorial] - Arduino Tutorial - 1. GPS Logger 개발 준비

1. 시리얼 통신으로 MAC Address 출력해보기

예제를 실행하기 전에 ESP32 보드와 PC를 USB 케이블로 연결한다. 이후 다음 경로에서 예제를 선택한다.

와이파이 통신을 위한 MAC address를 출력하는 예제이다. 아래 코드 설명을 참고한다.

uint64_t chipid;  
/**
setup은 초기화 함수로 보드 부팅시에 한번만 실행된다.
*/
void setup() {
	Serial.begin(115200); // 115200bps의 보드레이트 속도로 시리얼 통신을 시작한다.
}

/**
loop는 말 그대로 루프 함수로 setup 함수 수행 이후에 보드 전원이 유지되는 동안 반복해서 수행된다.
이 예제에서는 내장된 고유 MAC address를 불러오고 출력하는 것이 전부다.
*/
void loop() {
	chipid=ESP.getEfuseMac();
    //The chip ID is essentially its MAC address(length: 6 bytes).
    /*
    ESP 라이브러리에서 제공하는 기본 함수로 총 6 bytes의 고유 MAC address를 받아 온다.
    */
	Serial.printf("ESP32 Chip ID = %04X",(uint16_t)(chipid>>32));
    //print High 2 bytes
    /*
    상위 2bytes를 먼저 출력한다. MAC address가 AABBCCDDEEFF라면 AABB까지만 출력한다.
    */
	Serial.printf("%08X\n",(uint32_t)chipid);
    //print Low 4bytes.
    /*
    하위 4bytes를 출력한다. 
    */

	delay(3000); //3초간 대기한다.
}

실제 와이파이 통신을 통해 제대로 된 MAC address를 확인해보면 좋겠지만 여기서는 MAC address만 출력해보도록 한다.

*MAC address는 이더넷 통신을 위한 하드웨어 고유 주소로 흔히 알고 있는 IP address와 함께 통신이 가능하도록 한다. (와이파이는 무선 이더넷 통신.)

이제 다음 경로를 참고하여 시리얼 모니터를 실행하자.

보드 레이트가 9600으로 설정되어 있을 것이다. 보드 레이트를 예제에서 설정된 값과 동일하게 115200으로 변경하자. 원하는 속도로 변경 가능하지만 여기서는 변경 없이 진행하도록 한다.

*보드 레이트는 시리얼 통신의 속도로 PC<->Arduino(장치 <-> 장치) 양쪽 모두 동일하게 맞춰주어야 한다.

이제 좌측 상단의 화살표를 클릭해 코드를 write 하자

코드를 정상적으로 write 했다면 다음과 같이 MAC address가 출력된다.

2. Hello world

여기까지 확인했다면 hello world를 출력해볼 차례다. 아래 코드를 참고해서 setup 부분에 Hello world를 입력한다.

Text 출력이 가능한 Print 관련 함수는 몇 가지가 있지만 그중에서도 println을 사용한다. 자동으로 줄 바꿈이 가능한 함수다.

3. 응용

이제 응용을 해볼 차례다. 앞서 진행했던 tutorial 코드를 다시 불러 오자.

그다음 아래 그림을 참고하여 각 위치에 print 함수를 추가해보자.

 코드를 디버깅하는 여러 가지 방법이 있지만 디버거를 사용할 수 없는 환경이라면 print 함수나 LED를 활용하는 편이 유용하다고 생각된다. 물론 코드를 완벽하게 이해하고 있어야 하지만.

이렇게 LED 제어, 코드 디버깅을 위한 시리얼 통신까지 확인해봤다. 여기까지 아무런 문제가 없다면 다음 단계로 넘어가자.

 지난번 수유등 만들기 프로젝트에서 밝기 조절 기능을 빼서 눈부심에 시달렸던 문제가 있었다. 그래서 이번 프로젝트에서는 밝기 조절 기능을 추가했다. 밝기 조절이 가능한 애플 스타일 수유등 만들기 프로젝트는 다음의 순서로 진행했다. 개선 프로젝트이므로 기존 진행 단계에서 몇 가지 단계를 제외했다.

●사양 정의

●구현

●제품 디자인

●제작 및 시연

*지난번 수유등 만들기 프로젝트는 다음 글을 참고한다.

2020/10/16 - [BerryMixLab/Arduino Project] - 아두이노 프로젝트 - 간단한 수유등(무드등) 만들기

* Version1 : 이전 프로젝트에서 진행한 ON/OFF 기능만 있는 무드등

**Version2 : 이번 프로젝트에서 밝기 조절 기능을 추가한 무드등

1. 사양 정의

Version1에서 사용했던 사용했던 모든 부품을 재사용했다. 거기에 밝기 제어를 위한 touch 센서를 추가했다. 아래는 사용한 부품 목록이다.

· Arduino Uno

· WS2812B LED(원형)

· 18650 배터리(3.7V)

· USB 충방전 보드

· Switch

· Touch sensor

2. 구현

 각 센서 배선은 별도로 명시하지 않는다. 관련 내용은 다른 블로그에 상세하게 잘 설명되어 있다. 구현이 필요한 기능은 아래와 같다. 실 사용 환경이 수유등(무드등)에만 의존한 환경임을 고려했다.

● 4단계 밝기 조절 (수유 시에 사용자 편의에 따라 변경)

● 최소 <-> 최대 밝기 조절 (기저귀 교체 등에 빠른 변경이 필요할 경우 사용)

다음 코드를 참고한다.

/** 타이머 인터럽트로 이벤트를 처리하는 게 깔끔하지만 
어차피 touch sensor 값만 읽을 것이기 때문에 별도로 고려하지 않았다. 
*/ 
void loop() 
{ 
	buttonState = digitalRead(buttonPin); //PWM PIN에 달린 touch sensor 값을 읽는다. 
/** 
1. touch가 일정 시간 이상 지속되면 최소 <-> 최대 밝기 조절을 처리한다. 
최소 LED 1 ON 나머지 OFF 
최대 LED 8 ON 일정 시간 : 약 3초.
(최초 시간 계산에서는 시간이 더 짧았지만 코드 수정 중에 애매하게 시간이 변경되었다.) 
*/ 
	if (buttonState == HIGH) 
    { 
    	loopCnt++; 
        if(loopCnt>8) // 일정 시간 이상 touch가 지속되었을 경우 
        { 
        	switch(ledCnt) 
            { 
            	case 1: 
                	ledCnt=8; 
                break; 
                case 8: 
                	ledCnt=1; 
                break; 
                default : 
                	ledCnt=1; 
                break; 
            } 
            //LED ON 
            for(int i=0; i<ledCnt; i++) 
            { 
            	strip.setPixelColor(i, 0xf5, 0x7f, 0x17); 
                // (A,R,G,B) A번째 LED를 RGB (0~255) 만큼의 밝기로 켭니다. 
            } 
            //LED OFF 
            for(int j=ledCnt; j<8; j++) 
            { 
            	strip.setPixelColor(j, 0x00, 0x00, 0x00); 
                // (A,R,G,B) A번째 LED를 RGB (0~255) 만큼의 밝기로 켭니다. 
            } 
            strip.show(); //LED 변경 사항 반영 
            loopCnt=0; 
            delay(250); //touch 해제 후 불필요한 동작을 막기 위한 딜레이 
        } 
    } 
    /** 2. touch 동작을 해제할때 4단계 밝기 조절을 처리한다. 
    1 단계 LED 1 ON 나머지 OFF 
    2 단계 LED 3 ON 나머지 OFF 
    3 단계 LED 6 ON 나머지 OFF 
    4 단계 LED 8 ON 
    */ 
    else 
    { 
    	if(loopCnt>1 && loopCnt<=4) // 오동작을 막기 위해 일정 시간 touch가 유지되었을 경우에만 
    	{ 
    		switch(ledCnt) 
            { 
            	case 1: 
                	ledCnt=3; 
                break; 
                case 3: 
                	ledCnt=6; 
                break; 
                case 6: 
                	ledCnt=8; 
                break; 
                case 8: 
                	ledCnt=1; 
                break; 
                default : 
                	ledCnt=1; 
                break; 
            } 
            //LED ON 
            for(int i=0; i<ledCnt; i++) 
            { 
            	strip.setPixelColor(i, 0xf5, 0x7f, 0x17); 
                // (A,R,G,B) A번째 LED를 RGB (0~255) 만큼의 밝기로 켭니다. 
            } 
            //LED OFF 
            for(int j=ledCnt; j<8; j++) 
            { 
            	strip.setPixelColor(j, 0x00, 0x00, 0x00); 
                // (A,R,G,B) A번째 LED를 RGB (0~255) 만큼의 밝기로 켭니다. 
            } 
            strip.show(); //LED 변경 사항 반영 
            loopCnt=0; 
            delay(250); //touch 해제 후 불필요한 동작을 막기 위한 딜레이 
         } 
     } 
     delay(400); 
     /* touch 제어 처리를 위한 딜레이다. 
     딜레이가 없으면 불필요하게 짧은 시간 동안 touch 값을 읽는다. 
     */ 
 }

3. 제품 디자인

Version1의 기와 디자인에서 다음과 같이 디자인을 변경했다.

 하지만 사용 중에 부분 파손이 발생했고 광확산 아크릴이 빠지는 문제가 있어 디자인을 일부 변경했다. 다음은 현재 최종 디자인으로 예전 맥북의 로고를 오마주 했다.

4. 제작 및 시연

https://youtu.be/jF1ggOwn3ow

수유등을 완성한 후 아내를 불렀다.

“진짜 예쁘다. 그런데 이제 좀 쓸만하다.”

이제 좀?

Trouble shooting

밝기 1단계에서 불규칙한 주기로 LED가 깜빡인다.

▶ LED가 깜박일 때 USB 충방전 보드의 전원 LED가 깜박이는 것으로 보아 배터리 전원 계통의 문제로 생각된다.

▶ 정확한 이유는 알 수 없지만 밝기 2단계 이후로는 정상 동작하므로 개선할 계획은 없다.

 육아에 눈코 뜰 새 없이 바쁜 나날이 이어지던 어느 날 아내가 말했다.

“3D 프린터로 휴지통 하나 뽑아줄 수 있어? 작은 거면 되는데. 옆에 두고 아기 면봉이나 이런 거 버리게. 오래 걸리면 하지 말고.”
“금방 해줄게.”

 인생사 모든 방면에서 그놈의 금방은 한 번도 금방인 적이 없다. 며칠을 미루다가 구글에서 쓸만한 디자인을 찾아보았다. 최근 깨달은 사실이지만 어차피 판매 목적이 아니고 우리 집에서만 쓸 것이기 때문에 무슨 디자인을 도용하든 상관이 없다는 것.

 애플 로고를 어디다 하나 넣을까 생각했지만 휴지통 하나 뽑는데 그런 정성을 쏟을 생각은 없었다. 그러다 오픈형의 작은 휴지통을 하나 발견했고 그것보다 더 작은 사이즈로 드로잉을 시작하기 위해 컴퓨터 앞에 앉았다. 드로잉을 시작하기 전 아내가 잠시 방에 들러 한마디를 던지고 간다.

“하얀색으로 하는데 빨간색으로 포인트 주면 좋겠다. 우리 빨간색도 있으니까.”

언제나 잊지 말아야 한다. 발주처의 요구 사항은 늘 명확하게 문서로 상세하게 받아두어야 한다.

출력하기 위해 사용한 프로그램 및 3D 프린터의 정보는 아래와 같다.

· 드로잉 : Autodesk Fusion 360

· 슬라이싱 : Ultimaker Cura 4.6.1

· 출력 : Ender 5-plus

작고 귀여운 뚜껑 없는 형태의 휴지통을 위아래 분리한 디자인으로 드로잉 했다.

Cura를 통해 슬라이싱 한 다음.

출력을 시작했다. 출력은 대략 위아래 전체 9시간 정도 걸린 것 같다.

 1mm 오차로 결합이 안 되는 것을 부수기 직전까지 힘을 줘서 간신히 끼워 넣었다. 1mm 오차 때문에 몇 시간을 기다려 다시 뽑고 싶지 않았다. 조립을 마친 뒤 아내에게 진상하자 아내가 흡족한 표정으로 말한다.

"정말 귀엽다. 역시 빨간색으로 포인트 주길 잘했지?”