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

 

1. 라이브러리 활용

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

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


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

esp32_gps_with_tftlcd.ino
0.01MB

 

이중 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

 

 

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

1. touch 라이브러리 설치

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

툴 > 라이브러리 관리를 선택한다.
adafruit touchscreen을 검색한다.
설치가 완료되면 위와 같이 상태가 변한다.

2. touch 예제

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

예제에서 Adafruit TouchScreen > touchscreendemo를 선택한다.

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

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

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

 

Arduino Tutorial - 3. TFT LCD 모듈 연결

 이제 TFT LCD를 ESP32에 연결해 보자. 본 tutorial에서는 ILI9341 TFT LCD를 사용했으며 이 TFT LCD 하나를 ESP32에 연결해서 얻는 이점은 다음과 같다. ● 데이터 출력 ● Touch interface ● SD card interfac..

berrymixstreet.tistory.com

 

YP, XM, YM, XP의 pin 정보를 위와 같이 수정한다.

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

X좌표 값이 마음에 들지 않는다.

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

 

3. 추가 라이브러리 설치

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

● Adafruit gfx

● Adafruit tftlcd

a. Adafruit gfx 라이브러리 설치

adafruit gfx를 검색한다.
의존성 문제를 물으니 갑자기 무섭다. 그러니 고민 없이 함께 설치한다.
설치가 완료되면 위와 같은 화면이 나타난다.

b. Adafruit tftlcd 라이브러리 설치

adafruit tftlcd 를 검색한다.

 

설치가 완료되면 위와 같은 화면이 나타난다.

4. 예제 응용

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

누군가는 인내와 끈기를 가지고 해결할 것이다. 하지만 여기서는 다른 방법을 택한다.

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

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

 

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

TFT_LCD_touch.ino
0.01MB

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

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 만들기

 

아두이노 프로젝트 - GPS Logger 만들기

세상을 바꾼 아이디어들은 형태에 변형에 따라 다양한 모습으로 진화해왔다. 기존에 있는 것들에 새로운 기능을 추가하거나 아니면 빼거나. 그것도 아니라면 완전하게 다른 시각에서 접근하기

berrymixstreet.tistory.com

다운로드한 예제를 컴파일해 다음과 같은 화면이 나타나면 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

 

ILI9341 + ESP32 (Parallel)

Today I've received two ILI9341 TFT screens that I ordered some weeks ago. These screens are in fact a shield designed for Arduino Uno but they work nicely when connected to other developer boards and the price is amazingly cheap: just US$4. [caption id=at

www.pangodream.es

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

 

 

1. 핀맵

ILI9341 TFT LCD

TFT _eSPI Library

Ref. Parallel

GPS 프로젝트 적용

LCD_CS

TFT_CS

27

33

LCD_RS

TFT_DC(RS)

14

15

LCD_RST

TFT_RST

26

32

LCD_WR

TFT_WR

12

4

LCD_RD

TFT_RD

13

2

LCD_D0

TFT_D0

16(RX2)

12

LCD_D1

TFT_D1

4

13

LCD_D2

TFT_D2

23

26

LCD_D3

TFT_D3

22

25

LCD_D4

TFT_D4

21

21

LCD_D5

TFT_D5

19

22

LCD_D6

TFT_D6

18

27

LCD_D7

TFT_D7

17(TX2)

14

 

 

 

 

SD_SS

CS

 

5

SD_DI

DI(MOSI)

 

23

SD_SCK

SCLK

 

18

SD_DO

DO(MISO)

 

19

 

 

 

 

3V3

 

 

3V3

GND

 

 

GND

 

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

 

2. 라이브러리 설치

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

툴 > 라이브러리 관리를 선택한다.
tft espi를 검색한다
설치가 완료되면 위와 같이 상태가 변한다.

3. Parellel 적용

 

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

그림의 경로를 참고한다.

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

핀맵은 위의 표를 참고한다.

4. 예제

파일 > 예제 > TFT_eSPI > 320 x 240 > UTFT_demo를 연다.
바로 좌측 상단의 화살표 버튼을 클릭하여 코드를 write 한다

 

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

 

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

 

 

 바야흐로 아두이노 세상에 살고 있다. 초등생, 혹은 유치원생부터 청장년층에 이르기까지 코딩 좀 한다 하면 아두이노의 경험이 있다. 예외도 있지만, 이렇게 많은 사람들의 관심과 노력 속에 아두이노도 많은 발전을 거듭했다. 이제는 보드 하나면 WiFi, Bluetooth까지 연결이 가능하니 말이다. 이 프로젝트는 다음의 순서에 따라 진행했다.

*전통적인 프로젝트 진행 방식과는 다를 수 있다.

 

●제품 컨셉 구상

●사양 정의

●구현

●제품 디자인

●제작 및 시연


1. 제품 컨셉 구상

 

 책상에 올려둘 수 있는 아기자기한 인테리어 소품이 뭐가 있을까 며칠을 고민했다. 이런저런 아이디어들을 고민하다가 다다른 곳은 날씨와 시계였다. 날씨와 시간은 하루에 한 번씩은 들여다보게 되어 있으므로. 그래서 정한 프로젝트의 이름은 다음과 같다.

Weather clock

 


2. 사양 정의

보드는 정했으나 어떤 인터페이스를 제공할지가 문제였다. 모든 센서를 적용하고 포털 사이트나 스마트폰 어플 정도의 기능을 지원하면 좋다고 생각했다. 하지만 부품 비용을 최소화하고 기간을 단축하는 것에 집중했다. 사양은 다음과 같다.

 

·하드웨어

MCU : ESP32 (WiFi, Bluetooth 내장)

공식 홈페이지

LCD : TFT LCD 2.4인치 (SD card 인터페이스 포함)

중국산이라 공식 홈페이지를 찾기 어렵다.


Weather clock에서 지원해야 하는 기능은 다음과 같다.

구분

설명

·필수 기능

시간 서버 동기화

기상청 RSS 받아오기

날씨와 시간 화면 출력 (JPG 이미지 출력)

··부가 기능

서버 통신 중 로고 띄우기(GIF 이미지 출력)

 


3. 구현

실제 구현 내용을 별도로 기록하지 않는 이유는 다음과 같다.

첫째, 구현 내용이 광범위하다.

둘째, 기억이 나지 않는다.

다른 블로그에서 참조해서 진행한 내용이 대부분이며 상세하게 잘 기록되어 있으니 그 부분을 참고하는 편이 좋다.


·필수 기능

ㄱ. 시간 서버 동기화

비교적 간단하다. WiFi 연결 후 time.bora.net등 익히 알고 있는 시간 서버에 연결해 time 구조체에 시간을 받아와 그대로 출력한다. 시간 출력하는 예제를 조금만 응용하면 된다.

 

ㄴ. 기상청 RSS 받아오기

3시간 단위 기상 예보만 받아올 수 있다. 욕심을 내서 구글이나 다른 곳에 있는 기상 정보로 실시간 날씨 정보를 표출하고 싶었지만 꾹 참았다. 애초에 실시간 기상 정보를 띄우기로 기획한 것은 아니었기 때문에. 추후에 기회가 된다면 진행해 볼 수도 있다.

 

ㄷ. 날씨와 시간 화면 출력(JPG 이미지 출력)

이제 받아온 시간과 날씨를 표출할 차례다. 날씨 이미지 표출은 SD card jpg 출력 예제를 활용했다. 앞서 언급한 시간 출력 예제를 함께 활용하면 큰 문제는 없다.

 

··부가 기능

ㄱ. 서버 통신 중 로고 띄우기(GIF 이미지 출력)

프로젝트 진행 중 가장 큰 문제에 봉착했다. 서버와 통신해서 받아온 데이터를 표출하기 전까지 검은 화면만 보여주게 생긴 것이다. 사전에 파악한 정보를 다시 되짚어 보았다. 눈에 띄는 정보 하나가 있었다.

Dual core

ESP32, 이건 정말 물건이다 싶었다. 바로 펌웨어 구조 수정에 들어갔다. 한쪽 코어로는 서버 통신 중에 로딩 이미지를 띄우고 다른 코어로는 서버 통신을 담당하도록 지정했다.


4. 제품 디자인

어떤 디자인을 할까 크게 고민하지 않았다. 구관이 명관이다. 존경해 마지않는 디자인, 애플의 초기 매킨토시를 참고했다.

디자인도 디자인이지만 케이스 제작이 문제였다. 무드 등을 만드는 프로젝트에서 방망이 깎는 노인처럼 했던 톱질. 그 고생을 또다시 할 수 없었다.

*톱질에 대한 이야기는 아래 DIY 아두이노 무드 등 만들기 참고.

2020/05/11 - [주전부리 레시피/berryMixLab] - DIY 아두이노 무드등 만들기

 

DIY 아두이노 무드등 만들기

나 때는 말이야.  이 글은 이렇게 시작한다. 처음 직장 생활을 시작했을 때, 스마트폰의 물결이 시작되고 있었다. 옴니아가 아이폰의 대항마로 등장했을 즈음 말이다. 그때만 해도 개발 보드 같�

berrymixstreet.tistory.com

그래서 샀다. 3D 프린터. 가성비를 최우선으로 고려했다.

Ender 5 Plus

제대로 된 물건을 출력할 때까지 애 많이 먹었다.


5. 제작 및 시연

https://youtu.be/HxMA5mHx_1g

 

완성 후 아내를 불러 동작하는 모습을 보여주었다. 그 당시에도 반응은 나쁘지 않았는데 한참이 지나 나를 다시 부른다.

“그거 부품 한 세트 밖에 없지?”

“왜?”

“있으면 하나 더 만들어서 친구 하나 줄까 했지.”

 

▶ Trouble shooting.

1. ESP32의 프로그램 업로드가 되지 않았다.

다른 호환 보드들도 이런 문제가 있는지 모르겠지만 프로그램 업로드 시 프로그램 Write 진행률이 표시될 때까지 Boot 스위치를 누르고 있어야 한다.

2. 아두이노 라이브러리로 추가한 예제로 LCD가 동작하지 않았다.

중국산이라 그런지 LCD IC의 chip 아이디가 읽히지 않아 한참 애먹었다. 예제에서 chip ID를 하나하나 선택해보면 언젠가는 동작한다.

3. ESP32와 LCD를 연결하는 핀맵 정보가 부족하다.

구글링으로 간신히 찾은 자료를 참고하여 LCD 연결에 성공했다. 판매되고 있는 TFT 2.4인치 LCD의 종류가 참 다양하다.

4. 배송사고

첫 택배는 분실됐다. 어떤 이의 손아귀에 들어갔는지 알 수는 없다. 그것도 아니라면 고물상에. 분실 보상은 받았으니 나쁠 것은 없다.

 

+ Recent posts