[HoloEye] 04_IPS TFT LCD 이미지 출력

04_IPS이미지출력

enter image description here

[HoloEye] 04_IPS TFT LCD 이미지 출력

1. 이미지 준비

이전에 했던 테스트까지 문제 없이 잘되었다면 이번에는 이미지를 올려보려고 한다.
우선은 240x240 픽셀이 맞는 이미지를 다운받거나 원하는 이미지를 잘라서 이미지 파일로 저장한다.

https://ezgif.com/

위 링크의 사이트를 이용하면 이미지를 240x240 으로 쉽게 만들 수 있다.
추후에 GIF 파일도 위 링크 사이트를 이용해 GIF 파일을 여러 이미지 파일로 쪼갤 수 있다.

2. Image Converters

240x240 픽셀의 이미지 파일이 준비되었다면 TFT 파일에 표시를 해야 하는데 이 때 여러가지 방법이 있다.
임베디드 시스템 특성상 하드웨어 성능에 많은 제약조건이 따르는데 이미지 압축 여부와 용량으로도 MCU 마다 내부에 저장을 못하는 경우도 발생한다. 때문에 내/외부 FLASH에 넣어서 사용하거나 SD 카드와 같은 용량 큰 외부 메모리에 넣어서 사용하게 된다.

NodeMCU의 경우 무려 4MByte 의 FLASH를 가지고 있으므로 FLASH를 이용하여 이미지를 띄워 보겠다.

이미지 파일을 MCU에서 LCD로 띄우려면 여러가지 이슈로 가장 빠른 것이 bit 배열로 만들어서 LCD에 전달해주는 것이다. 때문에 여러 개발자들이 관련된 이미지 컨버터들을 만들었는데 여기서는 UTFT 라는 컨버터를 사용한다.

http://www.rinkydinkelectronics.com/

다운 받아서 메뉴얼을 보면 되는데 GUI 실행 파일을 사용해도 되고 콘솔을 사용해도 된다.
콘솔을 사용하면 여러 파일을 동시에도 변환 가능하므로 콘솔을 사용해 보겠다.
필자는 BMP파일과 PNG 파일 두 개만 테스트 해봤다.

2_convert
UTFT 압축을 풀어서 ImgConv.exe 파일을 이미 경로와 동일한 경로에 두고

ImgConv.exe HoloEye.jpg /c

위와 같이 하면 HoloEye.c 파일이 하나 생긴다.

HoloEye.c 파일 확장자를 .h 로 수정하고
240x240 픽셀 코드를 추가 한다.

3_image convert output
HoloEye.h 일부

const uint16_t HoloEyeWidth = 240;
const uint16_t HoloEyeHeight = 240;

이제 컨버팅 이미지가 준비되고 IDE 실행 폴더에 넣어 준다.

3. 이미지 출력

이제 이미지를 출력하면 되는데 TFT_eSPI의 예제코드를 활용하면 된다.
TFT_eSPI - Generic - TFT_Flash_Bitmap
위 예제코드를 열고 같은 폴더에 HoloEye.h 파일을 넣은 후 아래와 같이 코드를 수정한다.

#include <TFT_eSPI.h>       // Hardware-specific library

TFT_eSPI tft = TFT_eSPI();  // Invoke custom library

// Include the header files that contain the icons
#include "HoloEye.h"

void setup()
{
  Serial.begin(115200);
  tft.begin();
  tft.setRotation(4);	// landscape

  tft.fillScreen(TFT_BLACK);

  // Swap the colour byte order when rendering
  tft.setSwapBytes(true);

  // Draw the icons
  tft.pushImage(0, 0, HoloEyeWidth, HoloEyeHeight, HoloEye);

  // Pause here to admire the icons!
  delay(2000);
}

void loop()
{

}

4. 결과

4_TFT_LCD_result

IPS TFT LCD에 출력 된 이미지를 확인할 수 있고 화면을 회전하고 싶다면

tft.setRotation(4);

파라메터 값을 1~4 사이 값을 넣어주면 된다.

이제 먼가 감이 왔을 것 같은데 GIF 파일은??

이미지 여러장을 연속해서 뿌려주면 된다!!

그럼 다음에는 GIF 파일을 뿌려주는 방법에 대해서 알아보겠다.

도움이 되셨다면 더 좋은 정보 공유를 위해 광고 클릭 부탁 드립니다 :)

댓글 쓰기

0 댓글