이 아두이노 터치 스크린 튜토리얼에서는 TFT LCD 터치 스크린을 아두이노와 함께 사용하는 방법을 배웁니다. 아래 동영상을 시청하거나 작성된 튜토리얼을 읽어보세요.
이 튜토리얼을 위해 세 가지 예제를 준비했습니다. 첫 번째 예제는 초음파 센서를 사용한 거리 측정입니다. 센서의 출력값인 거리가 화면에 표시되며, 터치 스크린을 사용하여 단위(센티미터 또는 인치)를 선택할 수 있습니다.
두 번째 예제는 세 개의 RGB 슬라이더를 사용한 RGB LED 제어입니다. 예를 들어 파란색 슬라이더를 움직이면 LED가 파란색으로 켜지고 최대값으로 갈수록 밝아집니다. 슬라이더는 0~255까지 움직일 수 있으며, 이를 조합하여 RGB LED에 어떤 색상도 설정할 수 있습니다. 다만 LED가 색상을 완벽하게 표현하지는 못한다는 점을 염두에 두세요.
세 번째 예제는 게임입니다. 실제로는 스마트폰용 인기 게임인 플래피 버드(Flappy Bird)의 복제품입니다. 푸시 버튼이나 터치 스크린 자체를 사용하여 게임을 플레이할 수 있습니다.
이제 각 예제를 단계별로 살펴보며 그 뒤에 있는 코드를 설명하겠습니다.
예제로 3.2인치 TFT 터치 스크린과 TFT LCD 아두이노 메가 쉴드를 조합하여 사용합니다. TFT 터치 스크린은 3.3V에서 작동하지만 아두이노 메가의 출력은 5V이기 때문에 쉴드가 필요합니다. 첫 번째 예제에는 HC-SR04 초음파 센서, 두 번째 예제에는 세 개의 저항이 있는 RGB LED, 게임 예제에는 푸시 버튼이 필요합니다. 또한 아두이노 보드와 TFT 쉴드 사이에 끼울 수 있도록 핀 헤더를 납땜하고 하나를 구부려 맞춤형 핀 헤더를 만들었습니다.
회로도는 다음과 같습니다. GND 핀, 디지털 핀 8~13, 그리고 14번 핀을 사용합니다. 5V 핀이 이미 TFT 스크린에서 사용 중이므로, 코드의 설정 섹션에서 13번 핀을 바로 HIGH로 설정하여 VCC로 사용합니다.
코드가 다소 길고 이해를 돕기 위해 섹션별로 나누어 설명하고, 마지막에 전체 소스 코드를 제공하겠습니다.
Henning Karlsen이 만든 UTFT와 URTouch 라이브러리를 사용합니다. 이 라이브러리들은 TFT 스크린을 매우 쉽게 사용할 수 있게 해주며, 다양한 크기의 TFT 스크린, 쉴드, 컨트롤러와 호환됩니다. 이 라이브러리는 그의 웹사이트인 RinkyDinkElectronics.com에서 다운로드할 수 있으며, 데모 예제와 상세한 문서도 제공됩니다.
라이브러리를 포함시킨 후 UTFT와 URTouch 객체를 생성합니다. 이 객체들의 매개변수는 TFT 스크린과 쉴드 모델에 따라 달라지며, 라이브러리 문서에서 확인할 수 있습니다.
다음으로 라이브러리와 함께 제공되는 폰트를 정의하고 프로그램에 필요한 변수들을 정의합니다. 설정 섹션에서는 스크린과 터치를 초기화하고, 연결된 센서, LED, 버튼의 핀 모드를 정의한 후, 홈 화면을 그리는 drawHomeScreen() 사용자 정의 함수를 처음에 호출합니다.
#include <UTFT.h>
#include <URTouch.h>
//==== 객체 생성
UTFT myGLCD(SSD1289,38,39,40,41); // 매개변수는 사용 중인 디스플레이/쉴드 모델에 맞게 조정
URTouch myTouch( 6, 5, 4, 3, 2);
//==== 변수 정의
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A];
int x, y;
char currentPage, selectedUnit;
// 초음파 센서
const int VCC = 13;
const int trigPin = 11;
const int echoPin = 12;
long duration;
int distanceInch, distanceCm;
// RGB LED
const int redLed = 10;
const int greenLed = 9;
const int blueLed = 8;
int xR=38;
int xG=38;
int xB=38;
// 플로피 버드(게임)
int xP = 319;
int yP = 100;
int yB = 30;
int fallRateInt = 0;
float fallRate = 0;
int score = 0;
const int button = 14;
int buttonState = 0;
void setup() {
// 초기 설정
myGLCD.InitLCD();
myGLCD.clrScr();
myTouch.InitTouch();
myTouch.setPrecision(PREC_MEDIUM);
// 핀 모드 정의
pinMode(VCC, OUTPUT); // VCC
pinMode(trigPin, OUTPUT); // trigPin을 출력으로 설정
pinMode(echoPin, INPUT); // echoPin을 입력으로 설정
pinMode(redLed, OUTPUT);
pinMode(greenLed, OUTPUT);
pinMode(blueLed, OUTPUT);
pinMode(button, INPUT);
digitalWrite(VCC, HIGH); // +5V - 13번 핀을 VCC로 사용
drawHomeScreen(); // 홈 화면 그리기
currentPage = '0'; // 홈 화면에 있음을 나타냄
selectedUnit = '0'; // 첫 번째 예제의 선택 단위(cm 또는 inch) 표시
}홈 화면을 만드는 방법을 설명하겠습니다. setBackColor() 함수로 텍스트가 출력될 영역의 배경색을 검은색으로 설정합니다. 그런 다음 색상을 흰색으로, 큰 폰트로 설정하고 print() 함수를 사용하여 화면 중앙과 Y축 10픽셀 아래에 "Arduino TFT Tutorial" 문자열을 출력합니다. 다음으로 색상을 빨간색으로 설정하고 텍스트 아래에 빨간 선을 그립니다. 이후 색상을 다시 흰색으로, 작은 폰트로 "by HowToMechatronics.com"을, 큰 폰트로 "Select Example"을 출력합니다.
거리 센서 버튼부터 만들겠습니다. 먼저 색상을 설정하고 fillRoundRect() 함수로 채워진 둥근 사각형을 그립니다. 그런 다음 색상을 흰색으로, drawRoundRect() 함수로 같은 위치에 채우지 않은 둥근 사각형을 그려 버튼에 프레임이 있는 것처럼 보이게 합니다. 버튼 위에 큰 폰트와 버튼 채우기와 같은 배경색으로 텍스트를 출력합니다. 같은 방식으로 나머지 두 버튼도 만듭니다.
// drawHomeScreen - 사용자 정의 함수
void drawHomeScreen() {
// 제목
myGLCD.setBackColor(0,0,0); // 텍스트 출력 영역 배경색을 검은색으로
myGLCD.setColor(255, 255, 255); // 색상을 흰색으로
myGLCD.setFont(BigFont); // 큰 폰트 설정
myGLCD.print("Arduino TFT Tutorial", CENTER, 10); // 화면에 문자열 출력
myGLCD.setColor(255, 0, 0); // 색상을 빨간색으로
myGLCD.drawLine(0,32,319,32); // 빨간 선 그리기
myGLCD.setColor(255, 255, 255); // 색상을 흰색으로
myGLCD.setFont(SmallFont); // 작은 폰트 설정
myGLCD.print("by HowToMechatronics.com", CENTER, 41); // 문자열 출력
myGLCD.setFont(BigFont);
myGLCD.print("Select Example", CENTER, 64); // 문자열 출력
// 버튼 - 거리 센서
myGLCD.setColor(16, 167, 103); // 녹색 설정
myGLCD.fillRoundRect(35, 90, 285, 130); // 채워진 둥근 사각형 그리기
myGLCD.setColor(255, 255, 255); // 색상을 흰색으로
myGLCD.drawRoundRect(35, 90, 285, 130); // 프레임용 둥근 사각형 그리기
myGLCD.setFont(BigFont);
myGLCD.setBackColor(16, 167, 103); // 텍스트 배경색을 버튼과 같은 녹색으로
myGLCD.print("DISTANCE SENSOR", CENTER, 102);
// 버튼 - RGB LED 제어
myGLCD.setColor(16, 167, 103);
myGLCD.fillRoundRect(35, 140, 285, 180);
myGLCD.setColor(255, 255, 255);
myGLCD.drawRoundRect(35, 140, 285, 180);
myGLCD.setFont(BigFont);
myGLCD.setBackColor(16, 167, 103);
myGLCD.print("RGB LED CONTROL", CENTER, 152);
// 버튼 - 버두이노 게임
myGLCD.setColor(16, 167, 103);
myGLCD.fillRoundRect(35, 190, 285, 230);
myGLCD.setColor(255, 255, 255);
myGLCD.drawRoundRect(35, 190, 285, 230);
myGLCD.setFont(BigFont);
myGLCD.setBackColor(16, 167, 103);
myGLCD.print("BIRDUINO GAME", CENTER, 202);
}이제 버튼을 눌렀을 때 해당 예제로 이동하도록 기능을 구현합니다. 설정 섹션에서 currentPage 변수에 '0' 문자를 저장하여 홈 화면임을 표시합니다. 이 조건이 참이고 화면을 터치하면 X, Y 좌표를 얻습니다. 첫 번째 버튼 영역을 터치하면 drawDistanceSensor() 함수를 호출하여 거리 센서 예제를 활성화하고, currentPage를 '1'로 설정합니다. drawFrame() 함수는 버튼이 눌렸을 때 하이라이트 효과를 줍니다. 나머지 두 버튼도 같은 방식으로 처리합니다.
//========== 루프 섹션 ========
void loop() {
// 홈 화면
if (currentPage == '0') {
if (myTouch.dataAvailable()) {
myTouch.read();
x = myTouch.getX(); // 터치된 X 좌표
y = myTouch.getY(); // 터치된 Y 좌표
// 거리 센서 버튼을 눌렀을 때
if ((x >= 35) && (x <= 285) && (y >= 90) && (y <= 130)) {
drawFrame(35, 90, 285, 130); // 버튼 하이라이트
currentPage = '1'; // 첫 번째 예제임을 표시
myGLCD.clrScr(); // 화면 지우기
drawDistanceSensor(); // 한 번만 호출됨
}
// RGB LED 제어 버튼을 눌렀을 때
if ((x >= 35) && (x <= 285) && (y >= 140) && (y <= 180)) {
drawFrame(35, 140, 285, 180);
currentPage = '2';
myGLCD.clrScr();
drawLedControl();
}
// 버두이노 게임 버튼을 눌렀을 때
if ((x >= 35) && (x <= 285) && (y >= 190) && (y <= 230)) {
drawFrame(35, 190, 285, 230);
currentPage = '3';
myGLCD.clrScr();
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(0,0,319,239);
drawGround();
drawPilars(xP,yP);
drawBird(30);
delay(1000);
}
}
}
// 거리 센서 예제
if (currentPage == '1') {
getDistance(); // 센서에서 거리 측정하여 반복적으로 최신 결과 출력
if (myTouch.dataAvailable()) {
myTouch.read();
x = myTouch.getX();
y = myTouch.getY();
// 센티미터 버튼
if ((x >= 10) && (x <= 135) && (y >= 90) && (y <= 163)) {
selectedUnit = '0';
}
// 인치 버튼
if ((x >= 10) && (x <= 135) && (y >= 173) && (y <= 201)) {
selectedUnit = '1';
}
// 뒤로 가기 버튼
if ((x >= 10) && (x <= 60) && (y >= 10) && (y <= 36)) {
drawFrame(10, 10, 60, 36);
currentPage = '0'; // 홈 화면으로
myGLCD.clrScr();
drawHomeScreen();
}
}
}
// RGB LED 제어
if (currentPage == '2') {
setLedColor();
if (myTouch.dataAvailable()) {
myTouch.read();
x = myTouch.getX();
y = myTouch.getY();
// 뒤로 가기 버튼
if ((x >= 10) && (x <= 60) && (y >= 10) && (y <= 36)) {
drawFrame(10, 10, 60, 36);
currentPage = '0';
myGLCD.clrScr();
drawHomeScreen();
// LED 끄기
analogWrite(redLed, 0);
analogWrite(greenLed, 0);
analogWrite(blueLed, 0);
}
}
}
//==== 게임 예제 코드는 다음 튜토리얼에서 설명 (복잡함) ====
// 버두이노 게임
if (currentPage == '3') {
// 게임 로직...
}
}drawDistanceSensor() 함수는 버튼이 눌렸을 때 한 번만 호출되어 홈 화면과 유사하게 그래픽을 그립니다. 그러나 getDistance() 함수는 초음파 센서로 거리를 계산하여 SevenSegNum 폰트로 녹색으로 출력하며, 센티미터 또는 인치 단위로 표시합니다. 초음파 센서 작동 원리에 대한 자세한 내용은 별도 튜토리얼을 참조하세요.
//===== getDistance() - 사용자 정의 함수
void getDistance() {
// trigPin 초기화
digitalWrite(trigPin, LOW);
delayMicroseconds(2);
// trigPin을 10마이크로초 동안 HIGH로 설정
digitalWrite(trigPin, HIGH);
delayMicroseconds(10);
digitalWrite(trigPin, LOW);
// echoPin 읽기, 음파 이동 시간(마이크로초) 반환
duration = pulseIn(echoPin, HIGH);
// 거리 계산
distanceCm = duration * 0.034 / 2;
distanceInch = distanceCm / 2.53;
// 센티미터 단위 출력
if (selectedUnit == '0' && distanceCm <= 400) {
myGLCD.setFont(SevenSegNumFont);
myGLCD.setColor(0, 255, 0);
myGLCD.setBackColor(0, 0, 0);
myGLCD.printNumI(distanceCm, 130, 145, 3, '0');
myGLCD.setFont(BigFont);
myGLCD.print("cm ", 235, 178);
}
// 인치 단위 출력
if (selectedUnit == '1' && distanceCm <= 160) {
myGLCD.setFont(SevenSegNumFont);
myGLCD.setColor(0, 255, 0);
myGLCD.setBackColor(0, 0, 0);
myGLCD.printNumI(distanceInch, 130, 145, 3, '0');
myGLCD.setFont(BigFont);
myGLCD.print("inch", 235, 178);
}
delay(10);
}두 번째 버튼을 누르면 drawLedControl() 함수가 한 번 호출되어 그래픽을 그리고, setLedColor() 함수가 반복적으로 호출됩니다. 이 함수에서는 터치 스크린으로 3개의 슬라이더 값을 0~255로 설정합니다. if문으로 각 슬라이더 영역을 제한하고 슬라이더의 X값을 얻습니다. 각 슬라이더의 X 좌표 값은 38~310픽셀이며, 이를 0~255 값으로 매핑하여 PWM 신호로 LED를 제어합니다. RGB LED 작동 원리는 별도 튜토리얼을 참조하세요.
//============= setLedColor() - 사용자 정의 함수
void setLedColor() {
if (myTouch.dataAvailable()) {
myTouch.read();
x = myTouch.getX();
y = myTouch.getY();
// 빨간색 슬라이더 영역
if ((y >= 130) && (y <= 156)) {
xR = x;
if (xR <= 38) xR = 38;
if (xR >= 303) xR = 303;
}
// 녹색 슬라이더 영역
if ((y >= 170) && (y <= 196)) {
xG = x;
if (xG <= 38) xG = 38;
if (xG >= 303) xG = 303;
}
// 파란색 슬라이더 영역
if ((y >= 210) && (y <= 236)) {
xB = x;
if (xB <= 38) xB = 38;
if (xB >= 303) xB = 303;
}
}
// X축 값(38~310)을 0~255로 매핑 (PWM용)
int xRC = map(xR, 38, 310, 0, 255);
int xGC = map(xG, 38, 310, 0, 255);
int xBC = map(xB, 38, 310, 0, 255);
// LED 핀에 PWM 신호 전송
analogWrite(redLed, xRC);
analogWrite(greenLed, xGC);
analogWrite(blueLed, xBC);
// 현재 색상 조합으로 사각형 그리기
myGLCD.setColor(xRC, xGC, xBC);
myGLCD.fillRoundRect(175, 87, 310, 119);
// 슬라이더 위치 표시기 그리기
myGLCD.setColor(255, 255, 255);
myGLCD.fillRect(xR, 139, (xR+4), 147);
myGLCD.setColor(xRC, 0, 0);
myGLCD.fillRect(31, 139, (xR-1), 147);
myGLCD.setColor(0, 0, 0);
myGLCD.fillRect((xR+5), 139, 309, 147);
// 녹색, 파란색 슬라이더도 동일하게 처리...
}아두이노 게임 예제는 복잡하여 다음 튜토리얼에서 자세히 설명하겠습니다.
코드가 작동하고 컴파일되려면 아두이노 스케치와 같은 디렉토리에 추가 ".c" 파일을 포함해야 합니다. 이 파일은 세 번째 게임 예제의 새 비트맵입니다. 다운로드 링크는 다음과 같습니다:
전체 소스 코드:
/* Arduino TFT Tutorial
* 제작: Dejan Nedelkovski, www.HowToMechatronics.com
*/
/* 이 프로그램은 Henning Karlsen의 UTFT와 URTouch 라이브러리를 사용합니다.
* www.RinkyDinkElectronics.com에서 다운로드 가능
*/
#include <UTFT.h>
#include <URTouch.h>
//==== 객체 생성
UTFT myGLCD(SSD1289,38,39,40,41);
URTouch myTouch(6, 5, 4, 3, 2);
//==== 변수 정의
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A];
int x, y;
char currentPage, selectedUnit;
// 초음파 센서
const int VCC = 13;
const int trigPin = 11;
const int echoPin = 12;
long duration;
int distanceInch, distanceCm;
// RGB LED
const int redLed = 10;
const int greenLed = 9;
const int blueLed = 8;
int xR=38; int xG=38; int xB=38;
// 플로피 버드
int xP = 319; int yP = 100; int yB = 30;
int fallRateInt = 0; float fallRate = 0; int score = 0;
const int button = 14; int buttonState = 0;
void setup() {
myGLCD.InitLCD(); myGLCD.clrScr();
myTouch.InitTouch(); myTouch.setPrecision(PREC_MEDIUM);
pinMode(VCC, OUTPUT); pinMode(trigPin, OUTPUT);
pinMode(echoPin, INPUT); pinMode(redLed, OUTPUT);
pinMode(greenLed, OUTPUT); pinMode(blueLed, OUTPUT);
pinMode(button, INPUT);
digitalWrite(VCC, HIGH);
drawHomeScreen();
currentPage = '0'; selectedUnit = '0';
}
void loop() {
// 홈 화면, 거리 센서, RGB LED, 게임 로직 등 전체 코드 포함
// (위에서 설명한 각 섹션의 코드가 모두 포함됨)
}
// ====== 사용자 정의 함수들 ======
// drawHomeScreen, drawFrame, drawDistanceSensor, getDistance,
// drawLedControl, setLedColor, drawGround, drawPilars, drawBird,
// gameOver, restartGame 등 모든 함수 정의 포함
제조공정
개요 이 프로젝트에서는 아두이노 터치스크린 MP3 뮤직 플레이어와 알람 시계 만드는 법을 보여드립니다. 아래 비디오를 시청하거나 작성된 튜토리얼을 읽어보세요. 화면 구성 홈 화면엔 큰 시계, 날짜, 온도 정보, 뮤직 플레이어와 알람 시계 진입 버튼 2개가 있습니다. 뮤직 플레이어 진입 시 화면 중앙 큰 Play 버튼으로 음악 재생. 양옆에 이전/다음 곡 버튼. 버튼 위엔 곡 진행 바, 하단엔 볼륨 바와 볼륨 다운/업 버튼. 우상단에 시계, 좌측에 Menu 버튼(홈 화면 복귀). 알람 시계 진입 시 시/분 설정용 두 버튼으로 알람
디스플레이는 이제 어디에나 있습니다. 20년 전 TV나 컴퓨터 모니터를 기억하시나요? 네모나고 거대하고 무거웠죠. 지금 여러분 앞의 얇고 가벼운 평면 스크린, 왜 이렇게 큰 차이가 나는지 궁금하지 않으셨나요? 사실 20년 전 모니터는 CRT(브라운관) 디스플레이로, 내부 부품 작동을 위해 큰 공간이 필요했습니다. 지금 여러분 눈앞의 화면은 LCD(액정 디스플레이) 스크린입니다. LCD란 무엇인가? 앞서 말했듯 LCD는 Liquid Crystal Display의 약자입니다. 액정의 광전기적 특성을 이용한 새로운 디스플레이 기술입니