아두이노 #57 TFT LCD 텍스트 문자열 출력 방법 정리
Lucy Archive
Lucy 2023
2020. 12. 16. 01:16

Arduino MCUFRIEND 2.4Inch TFT LCD 텍스트 출력

지난 포스트에서 사용중인 TFT LCD의 스펙과, 사용하기 위한 셋업 방법에 대해 소개하였습니다. 이번 포스트는

MCU FRIEND의 2.4Inch TFT LCD에 텍스트를 출력하는 기초적인 방법을 설명

합니다.

사전 참고 사항

이 포스트에서는 MCUFRIEND의 2.4Inch TFT LCD를 사용하였습니다. MCUFRIEND의 장치 설정을 위해 MCUFRIEND_kbv 라이브러리를 사용합니다. MCUFRIEND_kbv의 디자인 기능은 Adafruit_GFX 라이브러리를 참조하여 사용합니다. 특별한 경우가 아니면, 다른 제조사의 TFT LCD를 사용하는 경우 드라이버 초기화하는 라이브러리만 다르고, 디자인 기능은 아래 코드와 동일하게 사용할 수 있을 것이라 예상됩니다. MCUFIREND의 초기 설정 관련 코드 설정은 이전 포스트를 참조해주세요.

MCUFRIEND 2.4inch TFT LCD 초기화 설정 및 Hello World 출력

 

아두이노 #56 2.4inch TFT LCD 초기화 설정 및 시작하기

Arduino TFT LCD 초기화 설정 및 Hello World! 출력 이번 포스트에서는 TFT LCD를 사용하기 위한 초기화 코드에 대해 알아보고, 간단하게 Hello World! 문자를 출력하는 법 을 소개합니다. MCU FRIEND 2.4inch TF..

juahnpop.tistory.com


개요

아래 항목은 TFT LCD에 문자열을 출력하기 위해 기본적으로 필요한 항목입니다. TFT LCD가 아니고, 다른 디스플레이장치이더라도 아래 항목의 기능 구현 방법만 정리되어 있으면 쉽게 코드 작성을 할 수 있을 것이라 생각됩니다.

  • 텍스트 출력
  • 커서 설정
  • 텍스트 크기
  • 텍스트 색상
  • 폰트 선택

텍스트 출력 함수

구문

텍스트 출력 함수는 아두이노의 Serial에 사용되는 print(), println(), write() 사용법과 동일합니다. 텍스트를 출력하는 경우 커서는 문자열 길이에 따라 자동적으로 이동합니다.

tft.print() / tft.println()

Syntax

  • tft.print(val);
  • tft.print(val, format);
  • tft.println(val);
  • tft.println(val, format);

Parameters

  • val : 출력할 데이터 - 모든 데이터 타입 사용 가능
  • format : 정수를 출력할 경우 진법 옵션, 실수를 출력하는 경우 소수점 자리수
    • BIN : 2진수로 출력
    • OCT : 8진수로 출력
    • DEC(Default) : 10진수 출력
    • HEX : 16진수 출력
    • Number : 실수 출력하는 경우 소수점 자리수 (Default 2자리)
tft.write()

Syntax

  • tft.write(val);
  • tft.write(str);
  • tft.write(buf, len);

Parameters

  • val : 8bit 크기의 데이터
  • str : 문자열 - "Hello" 와 같이 사용 가능
  • buf : 배열
  • len : 전송할 배열의 크기

시리얼 송신 관련 자세한 설명은 아래의 링크를 참조해주세요.

시리얼 통신 초기화 및 송신

 

아두이노 강좌 #5 시리얼 통신 2. UART 초기화 및 송신 프로그래밍

아두이노 시리얼(UART) 통신 출력 지난 포스트에서는 아두이노의 시리얼 통신이 무엇인지 알아보고, 간단히 아두이노 -> PC 로 문자열을 출력 하는 방법에 대해 알아보았습니다. 본 포스트에서는

juahnpop.tistory.com

예시

아래와 같이 문자열 출력 비교, 소수점 출력, 진수표현, print()/write() 차이를 위한 테스트 코드를 작성하였습니다.

#include "Adafruit_GFX.h"
#include "MCUFRIEND_kbv.h"

//MCUFRIEND_kbv tft(A3, A2, A1, A0, A4);
MCUFRIEND_kbv tft;

void setup()
{
    uint16_t ID = tft.readID();
    tft.reset();
    tft.begin(ID);
    tft.setRotation(0);
}

void loop()
{
    int iNum = 64;
    float fNum = 3.141592;

    tft.fillScreen(TFT_BLACK);
    tft.setTextColor(TFT_WHITE);
    tft.setTextSize(1);
    
    tft.print("Hello world!\n");
    tft.println("Hello world!"); 
    tft.write("Hello world!\n");
    tft.println("");tft.println("");

    tft.println("print(3.141592, Option); Float..");
    tft.print("- Option : None -> ");
    tft.println(fNum, 2); // 소수점 2자리
    tft.print("- Option : 4 -> "); 
    tft.println(fNum, 4); // 소수점 4자리
    tft.println("");tft.println("");

    tft.println("print(16, Option); Number Notation..");
    tft.print("- Option : None -> ");
    tft.println(iNum);         // 10진수 출력    
    tft.print("- Option : BIN -> ");
    tft.print("0b");
    tft.println(iNum, BIN);    // 2진수로 출력
    tft.print("- Option : HEX -> ");
    tft.print("0x");
    tft.println(iNum, HEX);    // 16진수로 출력
    tft.println("");tft.println("");

    tft.println("String Output Compare");
    tft.print("print(64) : ");
    tft.print(64); // print() : 64를 문자열 "64" 로 출력
    tft.println();
    tft.print("write(64) : ");
    tft.write(64); // wrtie() : ascii '64'번 값을 출력 -> A
    tft.println(); 

    while(1);
}

위 코드를 실행하면 아래와 같이 TFT LCD 창에 출력됩니다.

2.4Inch TFT LCD 텍스트 출력

커서 지정 / 현재 커서 읽기

구문

아래는 커서를 설정하는 함수입니다. int16_t 데이터형의 좌표를 x, y에 입력하면 됩니다.

커서지정

Syntax

  • tft.setCursor(int16_t x,int16_t y);

Parameter

  • x : width 픽셀
  • y : height 픽셀
커서읽기

Syntax

  • tft.getCursorX(); // x좌표 읽기
  • tft.getCursorY(); // y좌표 읽기

Return

  • int16_t 형의 좌표 데이터 반환

예시

커서 지정 및 현재 커서 불러오기를 테스트하기 위한 코드입니다.

#include "Adafruit_GFX.h"
#include "MCUFRIEND_kbv.h"

//MCUFRIEND_kbv tft(A3, A2, A1, A0, A4);
MCUFRIEND_kbv tft;

void setup()
{
    uint16_t ID = tft.readID();
    tft.reset();
    tft.begin(ID);
    tft.setRotation(0);
}

void loop()
{
    int16_t x;
    int16_t y;

    tft.fillScreen(TFT_BLACK);
    tft.setTextColor(TFT_WHITE);
    tft.setTextSize(2);
    
    for(int i = 0 ; i < 320 ; i += 50){
        tft.setCursor(0, i);
        tft.println("Hello World!");
        
        x = tft.getCursorX();
        y = tft.getCursorY();

        tft.print(x);
        tft.print(",");
        tft.println(y);
    }
    while(1);
}

위 코드 실행화면은 아래와 같습니다. 아래 결과로 부터 Default 폰트 사이즈 높이는 8 Pixel인 것을 확인할 수 있습니다. 위 코드에서 txt.setTextSize(2)는 글자 크기를 2배로 설정하는 메소드입니다.

2.4inch TFT LCD 커서 지정 및 읽기 테스트

 

텍스트 크기

구문

텍스트 크기는 아래의 setTextSize() 메소드를 사용하면 쉽게 설정 가능합니다.

텍스트 크기 설정

Syntax

  • tft.setTextSize(uint8_t size);

Parameter

  • size : 1 ~ 5 사이의 정수

예시

아래 코드는 텍스트 사이즈 테스트를 위한 코드입니다.

#include "Adafruit_GFX.h"
#include "MCUFRIEND_kbv.h" 

MCUFRIEND_kbv tft;

void setup()
{
    uint16_t ID = tft.readID();
    tft.reset();
    tft.begin(ID);
    tft.setRotation(0);
}

void loop()
{
    int16_t x;
    int16_t y;

    tft.fillScreen(TFT_BLACK);
    tft.setTextColor(TFT_WHITE);
    
    for(int i = 1 ; i < 6 ; i++){
        tft.setTextSize(i);
        tft.println("Hello");
        x = tft.getCursorX();
        y = tft.getCursorY();
        tft.setCursor(x,y+10);
    }
    while(1);
}

아래 사진의 위 코드 실행 결과입니다. 

2.4inch TFT LCD 텍스트 크기 테스트

아래의 코드는 문장과 문장 사이 간격을 10 pixel로 설정하는 코드입니다.

x = tft.getCursorX();
y = tft.getCursorY();
tft.setCursor(x,y+10);

 

텍스트 색상

색상 포맷

색상은 RGB565 포맷을 사용합니다. RGB565는 Red 5Bit, Green 6Bit, Blue 5Bit으로 색을 표현합니다. 아래 링크는 일반적인 RGB 컬러를 RGB565로 변환해주는 링크입니다. 이곳뿐만이 아니라 구글에 검색하면 다양한 방법 또는 웹 계산기들이 있습니다. (※ Adafruit_GFX.h 코드 내부를 보니 RGB565 로 입력받아 RGB555로 변환해서 사용하네요.)

👉 RGB -> RGB565 변환 : www.rinkydinkelectronics.com/calc_rgb565.php

MCUFRIEND_kbv 라이브러리를 사용하는 경우 MCUFRIEND_kbv.h 파일 내에 자주 사용하는 컬러들이 매크로로 정의되어 있습니다. 코드 작성 시 매크로로 지정된 이름을 보기 위해 MCUFRIEND_kbv.h 파일에 들어갈 수 없으니 코드 상단 선언부에 선언 후 사용하면 편리하게 사용할 수 있습니다.

#define TFT_BLACK       0x0000      /*   0,   0,   0 */
#define TFT_NAVY        0x000F      /*   0,   0, 128 */
#define TFT_DARKGREEN   0x03E0      /*   0, 128,   0 */
#define TFT_DARKCYAN    0x03EF      /*   0, 128, 128 */
#define TFT_MAROON      0x7800      /* 128,   0,   0 */
#define TFT_PURPLE      0x780F      /* 128,   0, 128 */
#define TFT_OLIVE       0x7BE0      /* 128, 128,   0 */
#define TFT_LIGHTGREY   0xC618      /* 192, 192, 192 */
#define TFT_DARKGREY    0x7BEF      /* 128, 128, 128 */
#define TFT_BLUE        0x001F      /*   0,   0, 255 */
#define TFT_GREEN       0x07E0      /*   0, 255,   0 */
#define TFT_CYAN        0x07FF      /*   0, 255, 255 */
#define TFT_RED         0xF800      /* 255,   0,   0 */
#define TFT_MAGENTA     0xF81F      /* 255,   0, 255 */
#define TFT_YELLOW      0xFFE0      /* 255, 255,   0 */
#define TFT_WHITE       0xFFFF      /* 255, 255, 255 */
#define TFT_ORANGE      0xFDA0      /* 255, 180,   0 */
#define TFT_GREENYELLOW 0xB7E0      /* 180, 255,   0 */
#define TFT_PINK        0xFC9F

구문

텍스트 컬러 설정은 RGB565 포맷을 사용하여 쉽게 적용 가능합니다.

텍스트 컬러 설정

Syntax

  • tft.setTextColor(uint16_t color);

Parameter

  • color : RGB565 포멧의 uint16_t 형 컬러데이터

예시

아래 코드는 텍스트 컬러를 테스트하기 위한 코드입니다. 

#include "Adafruit_GFX.h"
#include "MCUFRIEND_kbv.h" 

#define BLACK       0x0000      /*   0,   0,   0 */
#define NAVY        0x000F      /*   0,   0, 128 */
#define DARKGREEN   0x03E0      /*   0, 128,   0 */
#define DARKCYAN    0x03EF      /*   0, 128, 128 */
#define MAROON      0x7800      /* 128,   0,   0 */
#define PURPLE      0x780F      /* 128,   0, 128 */
#define OLIVE       0x7BE0      /* 128, 128,   0 */
#define LIGHTGREY   0xC618      /* 192, 192, 192 */
#define DARKGREY    0x7BEF      /* 128, 128, 128 */
#define BLUE        0x001F      /*   0,   0, 255 */
#define GREEN       0x07E0      /*   0, 255,   0 */
#define CYAN        0x07FF      /*   0, 255, 255 */
#define RED         0xF800      /* 255,   0,   0 */
#define MAGENTA     0xF81F      /* 255,   0, 255 */
#define YELLOW      0xFFE0      /* 255, 255,   0 */
#define WHITE       0xFFFF      /* 255, 255, 255 */
#define ORANGE      0xFDA0      /* 255, 180,   0 */
#define GREENYELLOW 0xB7E0      /* 180, 255,   0 */
#define PINK        0xFC9F

MCUFRIEND_kbv tft;

void setup()
{
    uint16_t ID = tft.readID();
    tft.reset();
    tft.begin(ID);
    tft.setRotation(0);
}

void loop()
{
    tft.fillScreen(BLACK);
    tft.setTextSize(2);
    
    tft.setTextColor(WHITE);
    tft.println("Hello");

    moveCursor(0,10);

    tft.setTextColor(PURPLE);
    tft.println("Hello");

    moveCursor(0,10);
    
    tft.setTextColor(CYAN);
    tft.println("Hello");

    moveCursor(0,10);
    
    tft.setTextColor(ORANGE);
    tft.println("Hello");
    
    while(1);
}

void moveCursor(int16_t xAxis, int16_t yAxis){
    int16_t x;
    int16_t y;
    x = tft.getCursorX();
    y = tft.getCursorY();
    tft.setCursor(x+xAxis,y+yAxis);
}

아래 사진은 위 코드의 출력 화면입니다.

2.4inch TFT LCD 텍스트 컬러 테스트

 

폰트

폰트 종류

기본 폰트 이외의 폰트를 사용하고 싶은 경우 폰트 데이터가 저장된 .h 파일을 선언부에 추가해야 합니다.

MCUFRIEND_kgv.h 라이브러리가 설치된 경로의 FreeDefaultFonts.h 파일에 3개의 폰트를 제공하고 있습니다.

  • FreeSmallFont : 기본 폰트
  • FreeBigFont : 큰 글자 폰트
  • FreeSevenSegNumFont : 7-SEGMENT 모양의 폰트로 0 ~ 9까지의 숫자만 지원

해당 파일의 경로를 알고 싶으신 분은 Everything 프로그램을 사용하면 파일명으로 쉽게 경로를 찾을 수 있습니다. 

빠른 파일 검색 프로그램 : Everything 사용법 및 유용한 설정

 

(무료) Everything 빠른 파일 검색 프로그램 : 네트워크 드라이브 추가, 유용한 옵션, 검색 안될 때

윈도우 필수 추천 프로그램 : Everything 윈도우에서 별도의 검색 프로그램을 사용하지 않거나, Everything 을 사용해 보지 않으신 분이라면 강력하게 추천하는 프로그램입니다. 본 포스트에서는 Everht

juahnpop.tistory.com

Ardafruit_GFX.h 라이브러리가 설치된 경로의 Font 폴더에 가면 아래와 같이 총 48개의 폰트가 있습니다. 적용하고 싶은 폰트의 파일명으로 폰트 적용 가능합니다.

Adafruit_GFX 라이브러리의 폰트

구문

텍스트를 출력하기 전에 아래의 tft.setFont() 메서드를 사용하여 폰트 지정이 가능합니다.

제목

Syntax

  • tft.setFont(const GFXfont *f);

Example

  • tft.setFont(&FreeSmallFont);
  • tft.setFont(&FreeSans9pt7b.h);

예시

아래 코드는 폰트 적용을 테스트하기 위한 코드입니다.

#include "Adafruit_GFX.h"
#include "MCUFRIEND_kbv.h" 
#include "FreeDefaultFonts.h"
#include "Fonts/FreeSans9pt7b.h"
#include "Fonts/FreeSans12pt7b.h"

MCUFRIEND_kbv tft;

void setup()
{
    uint16_t ID = tft.readID();
    tft.reset();
    tft.begin(ID);
    tft.setRotation(0);
}

void loop()
{
    tft.fillScreen(TFT_BLACK);
    tft.setTextSize(1);

    moveCursor(0,10);
    
    tft.setFont(&FreeSmallFont);
    tft.println("Hello!");

    moveCursor(0,10);

    tft.setFont(&FreeBigFont);
    tft.println("Hello!");

    moveCursor(0,10);

    tft.setFont(&FreeSans9pt7b);
    tft.println("Hello!");

    moveCursor(0,10);

    tft.setFont(&FreeSans12pt7b);
    tft.println("Hello!");

    moveCursor(0,30);
    
    tft.setFont(&FreeSevenSegNumFont);
    tft.println("0123456");
    
    while(1);
}

void moveCursor(int16_t xAxis, int16_t yAxis){
    int16_t x;
    int16_t y;
    x = tft.getCursorX();
    y = tft.getCursorY();
    tft.setCursor(x+xAxis,y+yAxis);
}

아래 사진은 위 코드를 실행한 결과입니다.

2.4inch TFT LCD 폰트 테스트


끝까지 읽어 주셔서 감사합니다^^

관련포스트

👉 아두이노 TFT LCD 관련글 목록 보기

👉 아두이노 디스플레이 장치 목록 보기

👉 아두이노 관련글 전체 목록 보기