u8glib : OLED에 비트맵 이미지 출력하기

비트맵 이미지 출력하는 것이 이번 포스팅의 내용이지만,

사실 이 테크닉으로 나중에 한글 출력을 해보는 것이 본 목적입니다.

이 포스팅에서는 이런 방법이구나 라는것만 보시면 될 거 같네요.

 

 

OLED와 아두이노 선 연결은 일단 여기 참고하시고, 버튼은 연결 안하셔도 됩니다.

 

 

먼저 출력해야 할 이미지를 구해야겠죠.

자, 우리는 이 이미지를 출력하려고 합니다.

 

 

 

감명 깊은 포스터입니다. 꼭 출력해야겠다는 사명감마저 느껴지네요.

 

 

그런데 이번에 사용할 OLED 디스플레이는 고작 128x64의 해상도를 가지고 있을 뿐입니다.

자체적 이미지 스트레칭 기능 따위 없죠.

따라서 이쪽에서 직접 이미지를 축소시켜줄 필요가 있네요.

 

 

가로변이 긴 장치니까 이미지를 왼쪽으로 돌려주고, 크기 조정을 눌러서 픽셀 단위로 조정해줍니다.

여기서 중요한 것은 가로 픽셀은 8로 나누어 떨어지는 숫자로 선택해야 된다는 점입니다.

가로에 8로 나누어 떨어지는 숫자를 넣어가면서 세로픽셀 크기가 장치에 맞는지 체크해 봅니다.

가로 80넣으니 세로가 61 나오네요. 장치의 세로 픽셀 크기는 64니까 가로 80이 딱 맞는 거 같습니다.

 

 

 

축소시킨 이미지입니다. 

글자도 잘 안보이는 이미지가 되었지만 공공장소에서는 염장질 집어치우고 조용히 차나 마시자는 미산 준장의 숭고하신 뜻은 너무나도 잘 전해집니다.

 

 

 

자, 이미지가 준비되었으니 이 이미지에서 헥스데이터를 뽑아줘야 합니다.

이 툴을 사용하세요.

ezBMP.exe

0.13MB

 

 

 

 

그림읽기로 축소시킨 그림을 불러오고, 변환 옵션을 B/W 1bit로 바꿔준 뒤 변환 누르고 저장 누르면 헥스데이터가 확장자가 c인 파일로 추출됩니다.

 

 

 

데브 C 등의 C언어 컴파일러 아무거나로 불러와 봅니다.

const unsigned char IMG 무적의 솔로부대 축소판[ ]이라는 배열로 이미지 헥스데이터가 있네요.

통째로 복사해둡니다.

 

 

 

이 복사한 헥스데이터를 아두이노 IDE에 붙여 넣고 코딩을 시작합니다.

 

#include <avr/pgmspace.h>
#include "U8glib.h"

U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_NONE);

const unsigned char solo[] PROGMEM = {
0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,
0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xfc,0x01,
0xff,0xff,0xff,0xff,0xff,0xff,0xf8,0x00,0x00,0x01,
0xff,0xff,0xff,0xff,0xff,0xff,0xf8,0x00,0x00,0x01,
0xff,0xff,0xff,0xff,0xff,0xff,0xe0,0x00,0x00,0x01,
0xff,0xff,0xff,0xff,0xff,0xff,0xe0,0x00,0x00,0x01,
0xff,0xff,0xff,0xff,0xff,0xff,0xc0,0x00,0x00,0x01,
0xff,0xff,0xff,0xff,0xf5,0x81,0xc0,0x00,0x00,0x01,
0xff,0xff,0xff,0xff,0xc0,0x00,0x00,0x00,0x00,0x01,
0xff,0xff,0xff,0xff,0x80,0x78,0x00,0x00,0x00,0xc1,
0xff,0xff,0xff,0xff,0x00,0x3c,0x00,0x00,0x00,0x01,
0xff,0xff,0xff,0xfe,0x00,0x1f,0x00,0x00,0x00,0x51,
0xff,0xff,0xff,0xfc,0x00,0x3f,0x00,0x00,0x00,0xc5,
0xff,0xff,0xff,0xf8,0x00,0x70,0x00,0x00,0x00,0x0d,
0xff,0xff,0xff,0xf0,0x00,0x00,0x00,0x00,0x00,0xcd,
0xff,0xff,0xff,0x00,0x00,0x00,0x00,0x00,0x00,0x0d,
0xff,0xff,0xfc,0x00,0x00,0x00,0x00,0x00,0x00,0xcd,
0xff,0xff,0xf8,0x00,0x00,0x00,0x00,0x00,0x00,0x4d,
0xff,0xff,0xf0,0x00,0x00,0x20,0x00,0x00,0x00,0x11,
0xff,0xff,0xf0,0x00,0x00,0xe0,0x00,0x00,0x00,0x01,
0xff,0xff,0xf0,0x00,0x01,0xe0,0x00,0x10,0x00,0x99,
0xff,0xff,0xe0,0x00,0x01,0x41,0x00,0x40,0x00,0x6d,
0xff,0xff,0xe0,0x00,0x00,0x01,0x40,0x00,0x00,0x09,
0xff,0xff,0xe0,0x00,0x10,0x01,0xd0,0x00,0x00,0xc1,
0xff,0xff,0xe0,0x00,0x18,0x00,0xc3,0x80,0x00,0xdd,
0xff,0xff,0xf0,0x00,0x1d,0xf0,0x40,0x00,0x00,0x09,
0xff,0xff,0xf0,0x00,0x1f,0xe4,0x40,0x00,0x00,0x01,
0xff,0xff,0xf0,0x00,0x1c,0x70,0x10,0x00,0x00,0xcf,
0xff,0xf7,0xf8,0x00,0x1c,0x78,0x10,0x00,0x00,0x8f,
0xff,0xff,0xf8,0x00,0x1c,0x78,0x48,0x08,0x00,0x49,
0xff,0xf9,0xfc,0x00,0x0c,0x7d,0xc0,0x08,0x00,0xc1,
0xff,0x15,0x9c,0x00,0x04,0xf3,0xc0,0x2c,0x00,0xcd,
0xff,0x7f,0xfe,0x00,0x00,0x00,0xe2,0x00,0x00,0x89,
0xff,0x31,0xbf,0x00,0x00,0x00,0x7f,0xc0,0x00,0x19,
0xff,0xfb,0xff,0xc0,0x00,0x0f,0xff,0xfc,0x00,0xc1,
0xff,0x15,0xff,0xf0,0x00,0x1f,0xff,0xfd,0x00,0x0d,
0xff,0x1f,0xff,0xff,0xe0,0x3f,0xff,0xfd,0x80,0x19,
0xff,0xf1,0xff,0xff,0xff,0xff,0xff,0xfd,0xc0,0x01,
0xff,0xf1,0xff,0xff,0xff,0xff,0xff,0xfd,0xf0,0x89,
0xff,0x57,0xff,0xff,0xff,0xff,0xfe,0x01,0xf8,0xc5,
0xff,0xf5,0xff,0xff,0xff,0xff,0xe0,0x00,0x1c,0xd9,
0xff,0xf9,0xff,0xff,0xff,0xff,0xf0,0x00,0x00,0x01,
0xff,0xb1,0xff,0xff,0xff,0xff,0xf4,0x08,0x00,0xc1,
0xff,0xdf,0xdf,0xff,0xff,0xff,0xfc,0x74,0x00,0x09,
0xff,0x3f,0xff,0xff,0xff,0xff,0xfe,0xf4,0x00,0xc9,
0xff,0xf3,0x9f,0xff,0xff,0xff,0xfe,0xb4,0x00,0xc1,
0xff,0x35,0xff,0xff,0xff,0xff,0xff,0xb4,0x00,0x8d,
0xff,0x3b,0xff,0xff,0xff,0xff,0xff,0xbf,0x00,0xe9,
0xff,0x51,0xdf,0xff,0xff,0xff,0xff,0xff,0x80,0xe5,
0xff,0xff,0x9f,0xff,0xff,0xff,0xff,0xff,0xe0,0x01,
0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xf0,0xdd,
0xff,0xff,0x9f,0xff,0xff,0xff,0xff,0xff,0xfd,0x1d,
0xff,0x51,0xff,0xff,0xff,0xff,0xff,0xff,0xfc,0x01,
0xff,0xf5,0x9f,0xff,0xff,0xff,0xff,0xff,0xfc,0x01,
0xff,0x5f,0xff,0xff,0xff,0xff,0xff,0xff,0xfc,0x01,
0xff,0x3f,0x9f,0xff,0xff,0xff,0xff,0xff,0xfc,0x01,
0xff,0xff,0xdf,0xff,0xff,0xff,0xff,0xff,0xfc,0x01,
0xff,0x7f,0xff,0xff,0xff,0xff,0xff,0xff,0xfc,0x01,
0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xfc,0x01,
0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xfc,0x01,
0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xfc,0x01
}; 

void draw(){
  u8g.drawBitmapP (10, 1, 10, 61, solo); 
}

void setup() {
  u8g.firstPage();
  do  {
    draw();
  } while( u8g.nextPage() );
}

void loop() {
}

 

u8 glib의 헤더 파일을 열어서 확인해보면 비트맵 그리는 함수가 drawBitmap, drawBitmapP 두 가지 있는 걸로 보이지만 보통은 drawBitmapP을 사용합니다.

 

u8g.drawBitmapP( x, y, cnt, h, bitmap)

 

x, y : 비트맵이 그려질 시작점의 좌표입니다.

cnt : 비트맵의 가로 픽셀수 입니다. 단, 가로폭에 나누기 8 을해서 넣어줘야 합니다. 즉, 최소 가로폭이 8픽셀이란 얘기죠. 이것 때문에 가로 픽셀 수를 8로 나누어 떨어지는 수로 정해야 한다고 위에 언급했습니다.

h : 비트맵의 세로 픽셀수 입니다. 이건 그냥 픽셀 개수를 그대로 넣어주면 됩니다. 15픽셀이면 15, 20픽셀이면 20.

bitmap : 문자열의 배열 이름입니다.

 

또, 비트맵의 헥스데이터는 용량을 많이 차지하므로, 반드시 PROGMEM을 붙여서 아두이노의 스케치 저장 영역에 저장될 수 있도록 해줍니다.

 

 

실제 출력은 다음과 같습니다.

 

 

 

 

솔로부대 포스터에서 느껴지는 의기와 기상은 한낱 128x64짜리 좁디좁은 OLED디스플레이 안에서도 온 세상을 뒤덮는 듯합니다.

 

 

 

... 그건 그렇고,

이 방법은 비트맵 이미지를 OLED 디스플레이에 쉽게 뿌리기 위한 방법 중 하나입니다.

더 좋은 방법이 있을 수도 있지만 저는 이 방법으로 대부분의 일처리를 해왔죠.

이 방법으로 한글 출력을 해보는 게 가능하다고 말씀드렸는데,

 

원체 한글 출력이란 게 우노급 아두이노에선 용량적으로 버거운 문제라서 출력하고자 하는 한글 문자를 이미지로 도트를 찍은 다음, 위에서 솔로부대 포스터를 출력해본 요령으로 OLED에 출력하는 방식입니다.

 

무슨 한글 폰트가 어떻고 완성형이 어쩌고 조합형이 어쩌고 귀찮은 과정 거치는 것보다 이게 훨씬 편하고 빠르더군요.

 

이 방법을 실제로 해보는 건 다음 포스팅에서 보여드리겠습니다.

 

아래는 이런 방법으로 작업을 했던  의뢰 주들의 회사 로고들입니다.