Hardware | SSD1306 에 로고를 세겨보자

1. 이제 때가 되었군

그렇습니다.

OLED 를 사용하다 보면, 커스텀 로고 새기는 방법을 익혀야 하는 경우가 몇번 있었습니다만,

대세에 지장이 없어서 무시하고 왔습니다.

그러나 UV Meter 를 가지로 놀려고 아래 링크를 따라해 보니,

커스텀 로고를 새기는 방법을 익혀야 할 때가 된걸 느꼈습니다.

* Arduino UV Meter using the UV31A Ultraviolet Sensor

- http://www.electronics-lab.com/project/arduino-uv-meter-using-uv30a-ultraviolet-sensor/

아래 그림처럼, 처음 시작을 커스텀 로고로 시작되는 것을 볼 수 있습니다.

또한, 예전에 VU Meter 를 만들 때, 제작자가 한번 언급한 경우도 있었습니다.

이때는 그냥 제작자 코드를 따라하기만 하면 되는거였죠.

* Hardware | SSD1306 monochrome OLED 를 가지고 VU meter 를 만들어보자

 - http://chocoball.tistory.com/entry/Hardware-VU-meter-using-SSD1306-monochrome-OLED

자 그럼, 한번 시작해 볼까요?

2. Arduino micro 의 I2C 연결

여기서 잠깐.

평소 사용하는 Arduino Nano 와는 다르게, 요즘 자주 사용하고 있는 Arduino Micro 의 I2C pinout 이 달라 조금 헤매었습니다.

OLED 의 SCL / SDA 연결을 위해서는 D3 / D2 pin 을 이용해야 합니다.

 SSD1306  | Arduino Micro
--------------------------
   VCC    |     3.3V
   GND    |     GND
   SDL    |     D3
   SDA    |     D2
--------------------------

연결은 다음과 같아요.

3. OLED 의 너비와 높이를 구해보자

우선 사용할 OLED 의 가로, 세로 pixel 수를 구해야 합니다.

이는 최종적으로 만들 그림의 크기를 정하기 위한거죠.

연결한 OLED 에 가로, 세로 pixel 수를 알아보기 위해 아래 code 를 사용합니다.

#include "SPI.h"
#include "Wire.h"
#include "Adafruit_GFX.h"
#include "Adafruit_SSD1306.h"
 
#define OLED_RESET 4
Adafruit_SSD1306 display(OLED_RESET);

void setup() {
	display.begin(SSD1306_SWITCHCAPVCC, 0x3C);
	display.clearDisplay();
	display.display();
}

void loop() {
	display.clearDisplay();
	
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.setTextSize(2);
	display.println(display.width());
	display.print(display.height());
	
	display.display();
}

결과는 다음과 같습니다.

SSD1306 이지만 128x64 가 아닌, 128x32 군요.

높이가 일반적인 OLED 보다 반쪽이라서 그림을 신경써야 합니다.

4. 필요한 그림파일 찾기

UV Meter 를 위해서는, 우선 태양 그림이 필요합니다.

Googling 하여 태양 그림을 찾아 봅니다.

키워드는 "sun shining icon image" 로 검색했습니다.

주르륵 뜨는군요. 적당한 것을 하나 골라 봅니다.

5. 흑백 및 적당한 크기로

그림을 생성하기 위해 Paint.net 이라는 어플을 사용합니다.

* paint.net

- https://www.getpaint.net/

우선 OLED 의 크기가 128x32 이므로, 그림 크기를 OLED 크기에 맞게 생성해 줍니다.

태양 그림 파일을 불러와서 크기를 줄여줍니다.

OLED 가 32 이므로, 32로 하면 그림이 다 들어가겠지만, 그렇게 되면 너무 작아 보여,

64x64 로 줄여줍니다.

또한 OLED 에 표시하기 위해서는 on/off, 0/1, white/black 으로 표시해야 합니다.

최대한 근접하게 우선 Brightness / Contrast 를 설정해 줍니다.

전체적으로 다음과 같이 꾸며 봅니다.

Contrast 를 최대로 높히면 Bitmap 생성시 완전한 흑백으로 근접하게 만들 수 있습니다.

마지막으로 Windows 에 기본으로 들어 있는,

mspaint ( %windir%\system32\mspaint.exe ) 를 사용하여,

최종적으로 Monochrome BMP 파일로 생성해 줍니다.

Save as Monochrome Bitmap 으로 하면서 완전히 white/black 으로 변경됩니다.

6. LCD Assistant

이제 C 코드용 bitmap 을 만들어주는 어플을 다운로드 받아서 실행합니다.

* LCD Assistant

- http://en.radzio.dxp.pl/bitmap_converter/

실행한 후, 위에서 만든 파일을 load 합니다.

이제 "Save output" 으로 최종적으로 text 파일로 export 합니다.

Output 된 text 파일을 열어보면 아래와 같이 생성되어 있습니다.

Monochrome Bitmap 으로만 잘 만들면,

LCD Assistant 를 이용하여 C code map 을 만드는데 쉽게 진행됩니다.

7. OLED 에 커스텀 코드를 올려보자

C code map 을 array 로 올린 다음,

display.drawBitmap 을 이용하여 표현할 수 있는 준비가 되었습니다.

최종 코드는 다음과 같습니다.

#include "SPI.h"
#include "Wire.h"
#include "Adafruit_GFX.h"
#include "Adafruit_SSD1306.h"
 
#define OLED_RESET 4
Adafruit_SSD1306 display(OLED_RESET);

static const unsigned char PROGMEM UVMeter[] = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x03, 0x80, 0x00, 0x00, 0x00, 0x18, 0x03, 0x18, 0x01, 0x80, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x03, 0x80, 0x00, 0x00, 0x00, 0x1C, 0x03, 0x18, 0x03, 0x80, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x07, 0x80, 0x00, 0x00, 0x00, 0x1C, 0x03, 0x1C, 0x03, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x80, 0x07, 0xC0, 0x07, 0x00, 0x00, 0x1C, 0x03, 0x0C, 0x03, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0xC0, 0x0F, 0xC0, 0x0E, 0x00, 0x00, 0x1C, 0x03, 0x0C, 0x06, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0xE0, 0x0F, 0xE0, 0x3E, 0x00, 0x00, 0x1C, 0x03, 0x0E, 0x06, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0xF0, 0x0F, 0xF0, 0x7E, 0x00, 0x00, 0x1C, 0x03, 0x06, 0x06, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0xFC, 0x0F, 0xF8, 0xFE, 0x00, 0x00, 0x1C, 0x03, 0x06, 0x0C, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0xFF, 0xDF, 0xFD, 0xFE, 0x00, 0x00, 0x1C, 0x03, 0x07, 0x0C, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0xFF, 0xFF, 0xFF, 0xFE, 0x00, 0x00, 0x1C, 0x03, 0x03, 0x0C, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0xFF, 0xFF, 0xFF, 0xFE, 0x00, 0x00, 0x1C, 0x03, 0x03, 0x18, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0xFF, 0xFF, 0xFF, 0xFF, 0x00, 0x00, 0x1C, 0x03, 0x03, 0x98, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x7F, 0xE0, 0x03, 0xFF, 0x00, 0x00, 0x1C, 0x07, 0x01, 0x98, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x7F, 0x03, 0xE0, 0x7F, 0x00, 0x00, 0x0C, 0x06, 0x01, 0xB0, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0xFC, 0x3F, 0xFE, 0x1F, 0x3F, 0xF0, 0x0E, 0x0E, 0x01, 0xF0, 0x00, 0x00, 0x00, 0x00,
0x06, 0x0F, 0xF8, 0xFF, 0xFF, 0x8F, 0xFF, 0xC0, 0x07, 0xFC, 0x00, 0xF0, 0x00, 0x00, 0x00, 0x00,
0x07, 0xFF, 0xF1, 0xFF, 0xFF, 0xC7, 0xFF, 0x80, 0x03, 0xF8, 0x00, 0xE0, 0x00, 0x00, 0x00, 0x00,
0x03, 0xFF, 0xE7, 0xFF, 0xFF, 0xF3, 0xFF, 0x00, 0x00, 0x00, 0x60, 0x18, 0x00, 0x00, 0x00, 0x00,
0x03, 0xFF, 0xCF, 0xFF, 0xFF, 0xF9, 0xFF, 0x00, 0x00, 0x00, 0x70, 0x38, 0x00, 0x20, 0x00, 0x00,
0x01, 0xFF, 0x9F, 0xFF, 0x7F, 0xFC, 0xFF, 0x00, 0x00, 0x00, 0x70, 0x38, 0x00, 0x20, 0x00, 0x00,
0x00, 0xFF, 0x9F, 0xF0, 0x07, 0xFC, 0xFE, 0x00, 0x00, 0x00, 0x58, 0x28, 0x38, 0x78, 0x38, 0x48,
0x00, 0x7F, 0x3F, 0xC0, 0x01, 0xFE, 0x7E, 0x00, 0x00, 0x00, 0x58, 0x68, 0x6E, 0x78, 0xCC, 0x7C,
0x00, 0x3E, 0x7F, 0x80, 0x00, 0xFF, 0x3E, 0x00, 0x00, 0x00, 0x48, 0x48, 0xC6, 0x20, 0x84, 0x60,
0x00, 0x1E, 0x7F, 0x00, 0x00, 0x7F, 0x3C, 0x00, 0x00, 0x00, 0x4C, 0xC8, 0xC2, 0x21, 0x86, 0x40,
0x00, 0x1E, 0x7E, 0x00, 0x00, 0x3F, 0x3C, 0x00, 0x00, 0x00, 0x4C, 0x88, 0xFE, 0x21, 0xFE, 0x40,
0x00, 0x3C, 0xFE, 0x00, 0x00, 0x3F, 0x9F, 0x00, 0x00, 0x00, 0x46, 0x88, 0x80, 0x21, 0x80, 0x40,
0x00, 0x7C, 0xFC, 0x00, 0x00, 0x1F, 0x9F, 0xF0, 0x00, 0x00, 0x47, 0x88, 0xC0, 0x21, 0x80, 0x40,
0x00, 0xFC, 0xFC, 0x00, 0x00, 0x1F, 0x9F, 0xFC, 0x00, 0x00, 0x43, 0x08, 0x42, 0x30, 0xC0, 0x40,
0x03, 0xFC, 0xFC, 0x00, 0x00, 0x1F, 0x9F, 0xFE, 0x00, 0x00, 0x43, 0x08, 0x7E, 0x1C, 0x7C, 0x40,
0x07, 0xFC, 0xFC, 0x00, 0x00, 0x1F, 0x9F, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};


void setup() {
	display.begin(SSD1306_SWITCHCAPVCC, 0x3C);
	display.clearDisplay();
	display.display();
}

void loop() {
	display.clearDisplay();
	
	display.drawBitmap(0, 0, UVMeter, 128, 32, WHITE);

	display.display();
}

짜잔~!!!

잘 나오는군요.

FIN

사실 이렇게까지 만드는데 거진 8시간정도 걸렸습니다.

Arduino micro 의 I2C pinout 이나, 순수한 Monochrome Bitmap 을 만드는 방법을 찾는데 많이 걸렸네요.

본 포스트가 다른 분들에게 많이 도움이 되었으면 합니다.