5. OLED 디스플레이를 이용한 시계 만들기

OLED 디스플레이와 온도·기압 센서

OLED 디스플레이를 이용한 시계를 구현하고, 나아가서는 자기만의 독창적인 이미지나 문자 등을 만들어 OLED 디스플레이 화면에 표현할 수 있다. 공기의 압력을 측정하는 기압센서를 통해 온도와 기압정보, 고도 데이터를 받아 나만의 기상장치를 만들어 볼 수도 있다. 예제에서는 기압센서를 이용해 OLED 디스플레이에 온도와 고도를 출력해보고 다양한 방법으로 활용해 보자. 

OLED 디스플레이란?

---

OLED는 유기발광다이오드 또는 유기EL이라 한다. 낮은 전압에서 구동이 가능하고 넓은 시야각과 빠른 응답속도를 갖고 있어 일반 LCD와 달리 바로 옆에서 보아도 화질이 변하지 않으며 화면에 잔상이 남지 않는다. 주요 컬러 구현 방식으로 3색(Red, Green, Blue) 독립화소방식, 색변환방식(CCM), 컬러필터방식 등이 있다. OLED는 TFT구동 방식에 따라 PM OLED(수동형 OLED, Passitive Matrix OLED)와 AM OLED(능동형 OLED, Active Matrix OLED)로 구분되며, 발광 방식과 유기물 등에 따라 다시 나눠진다.

 

OLED 디스플레이는 스스로 빛을 낸다는 점이 LCD와는 확연히 다른 점이라 할 수 있다. LCD와 OLED는 디스플레이 두께와 명암비, 응답속도, 잔상현상, 전력소모, 수명과 번인현상, 색감, 유연성 등이 차이날 수 있다. OLED 픽셀은 직접 빛을 내기 때문에 백라이트가 필요 없으며, 빛의 표현 범위가 LCD보다 더 넓으며 완벽한 검정색을 구현해내는 수준이 뛰어나다. 또, LCD 보다 1000배 빠른 응답속도를 가진다.

 

LCD의 경우 빛을 내놓은 다음 밝기를 조절하고, 색을 입혀 화면을 보여주는 등 이러한 일련의 모든 과정들이 OLED 디스플레이에서는 생략이 가능하다. LCD는 광원을 사용할 수밖에 없는 구조이기 때문에 그에 따른 제약이 OLED 보다 많으며, 응답구조, 전력소모가 큰 편이다. OLED는 유기발광다이오드(Organic Light-Emitting Diode)로 스스로 빛을 내는 유기 소자로 픽셀을 구성하고 있어 기존 LCD와 달리 백라이트가 필요하지 않다.

	LCD	OLED
응답속도	30/1,000sec	1/100,000sec
시야각	제한 있음	제한 없음
작동온도	0℃ ~ 65℃	-30℃ ~ 80℃
발광방식	Back Light Unit 필요	자체 발광형
수명	약 60,000시간 이상	약 25,000시간
명암비	LCD < OLED
크기	다양	작음
유연성	낮음	높음

LCD와 OLED 디스플레이 비교

OLED는 LCD에 비하여 얇게 만드는 것이 가능하며 명암비와 시야각, 응답속도 등에서 많은 장점을 가지고 있다. 아두이노를 사용하다 보면 각종 도형이나 그래프, 이미지를 그려보고 싶은 경우가 생기기 마련이고 이때 가장 유용한 모듈이 OLED 디스플레이다. OLED를 아두이노와 함께 사용하는 데 있어 가장 큰 장점은 고해상도이면서 소형이기 때문에 휴대용 장치를 만드는데 유용하다.

OLED 디스플레이 모듈 | SH1106

---

이번 예제에서 사용되는 OLED 디스플레이는 128X64의 해상도와 1.3인치 크기의 SH1106 이다. 이 모듈은 기본적으로 SPI 통신방식으로 설정되어 있다. 아래의 표와 같이 모듈 뒤에 있는 BS1/BS0 점퍼를 연결하여 원하는 통신 방법을 선택할 수 있다. 우리는 공장에서 출시되는 상태인 4-Wire SPI 통신 방법을 이용하여 설명하겠다.

Color	Mono(Blue)
Pixels	128X64
Size	29.42X14.7(mm), 1.3inch
Interface	SPI, I2C

SH1106의 사양

Interface	BS1	BS0
3-wire SPI	0	1
4-wire SPI	0	0
I2C	1	0

SH1106의 통신방법 설정

OLED 모듈 - SH1106 앞면 / 뒷면  

SH1106	VCC	GND	NC	DIN	CLK	CS	D/C	RES
아두이노 우노	VCC	GND		D9	D10	D12	D11	D13
라두이노

SH1106의 연결 PIN MAP

OLED 디스플레이를 이용한 시계 만들기

U8G 라이브러리 설치

---

OLED를 제어하기 위해 사용하는 라이브러리 U8glib를 설치하는 과정을 살펴보자. U8g 라이브러리는 다양한 장점을 가지고 있다. 예제에서 사용하는 SH1106 외에도 지원하는 디스플레이 드라이버 칩이 다양하다. 또한 다른 그래픽 라이브러리에 비해 상대적으로 메모리를 적게 사용하면서 기본적인 그래픽 함수들을 모두 지원 가능하다.

 

드로잉(drawing) 작업방식은 화면을 업데이트 할 때마다 화면 전체를 새로 그리는데, 디스플레이 화면을 분할해서 작은 사이즈의 버퍼를 가지고 한 화면을 여러 개의 드로잉 작업으로 수행한다. U8g 라이브러리 방식은 여러 번 드로잉 작업을 수행하기 때문에 화면 갱신 속도가 느리고 processing power가 많이 소모된다는 단점이 있지만 아두이노처럼 2KB RAM에서는 제한적인 용량을 가지고 있는 8bit 임베디드 시스템에서는 작은 용량을 차지하는 라이브러리는 큰 매력을 갖는다. 또한 U8g라이브러리에서는 다양한 드라이버칩셋(driver ship-set)을 지원하기 때문에 같은 라이브러리를 사용하여 운용 가능한 디스플레이 장치의 다양성을 갖는다.

 

U8g 라이브러리 설치과정은 이전에 설치해봤던 MPU-9250의 라이브러리 설치방법과 비슷하다. 라이브러리 관리자를 통하여 U8glib 1.19.1을 설치한 후에 아두이노 통합개발환경(IDE)을 종료했다가 재실행하면 라이브러리가 프로그램 내부적으로 갱신된다. 설치된 라이브러리를 IDE에서 다시 확인해보면, 파일 > 예제 > (사용자 지정 라이브러리의 예제) > U8glib에서 확인할 수 있다. 처음 라이브러리를 이용해 OLED에 표현을 한다면 먼저 HelloWorld! 예제를 실행해서 간단하게 OLED 사용법을 익히는 것을 권한다.

라이브러리 관리자에서 U8glib 1.19.1 설치

아두이노 IDE에 추가된 U8glib 예제

U8glib는 기압센서와 초음파센서, 적외선센서 등 많은 센서 데이터를 가시적으로 보여주기 위한 그래픽 라이브러리로써 사용된다. 앞으로 나오는 예제에서 OLED를 반복적으로 사용하기 때문에 라이브러리의함수에 대하여 잘 짚고 넘어 간다면 이후 예제들을 이해하는데 훨씬 수월할 것이다.

프로세싱 설치 및 사용방법 

---

OLED 디스플레이 라이브러리(U8gLib)에 없는 도형을 새롭게 그릴 때 이용할 프로그램으로 프로세싱(Processing 3)을 사용하고자 한다. 이 프로그램을 사용하기 위해

서는 아두이노 IDE와 별개로, 응용 프로그램을 설치해야 한다. Processing 3은 아두이노 IDE와 같이 오픈소스 응용 프로그램으로, 주로 미디어 아티스트들이 쉽게 접근해서 컴퓨터를 이용한 예술을 할 수 있도록 제작되었다. 또 아두이노를 이용한 다양한 센서 값들을 Processing 3을 이용하여 시각화하여 나타낼 수 있고 자바(JAVA), 파이썬(Python) 등등 다른 도구들과도 함께 이용이 가능하다. 우선 Processing 공식 홈페이지 https://processing.org 에 접속해서 웹페이지 중앙의 다운로드(Download Processing)를 통해 사용자의 컴퓨터 사양에 맞는 설치파일을 다운로드 받으면 된다.

 

공식 홈페이지에서 Processing 다운로드 

다운로드 받은 압축파일의 압축을 풀면 별도의 설치 없이 바로 실행이 가능하다. 프로세싱 설치 완료 후 오픈소스 저장소인 Github에서 U8glib Graphical Editor를 검색하여 ‘toane/curiousgrid’ 이름의 processing 파일을 다운받으면 GridEditor 폴더에 GridEditor.pde 파일이 존재하는데 이 파일을 프로세싱을 이용하여 실행하면 된다.

 

GridEditor.pde 최초 동작 / 스케치 코드 실행 

프로세싱을 이용하여 GridEditor.pde 파일을 실행하면 두 개의 실행 팝업창이 생성된다. 하나의 창은 그림을 그리는 GridEditor로써 가로 128 pixel, 세로 64 pixel의 화면에 원, 사각형, 픽셀, 직선을 그릴 수 있다. 또 다른 팝업창은 C-code 변환창으로써 앞선 128x64의 화면에 그린 도형을 u8glib 라이브러리를 사용한 C 코드로 변환해준다. 참고로 GridEditor를 이용하여 다른 해상도의 디스플레이를 사용할 경우 프로세싱 코드의 17, 18번 라인의 gridX, gridY의 값을 바꿔주어 프로그램을 실행하도록 한다. 아래 그림을 보면 직선, 원, 사각형, 픽셀이 그려져 있고 C-code 에 코드가 출력 되어있는 것을 확인할 수 있다. 이 때, 한 가지 주의할 점은 이번 예제에 사용된 u8glib 라이브러리 함수와 약간의 차이가 있어 C-code의 출력된 코드를 수정한 후에 아두이노 스케치 코드에 넣어 사용해야한다. 

이미지 그리기 및 이미지 → 코드변환 

위의 도형들을 그리면 아래와 같은 코드가 변환되어 나오게 되는데 이번 예제에 사용한 코드에 적용하기 위해서는 약간의 수정이 필요하다.

u8g_DrawLine(&u8g,62,15,62,39); u8g_DrawCircle(&u8g,81,26,5,U8G_DRAW_ALL); u8g_DrawBox(&u8g,98,27,4,7); u8g_DrawPixel(&u8g,77,44);

→

u8g.drawLine(62,15,62,39); u8g.drawCircle(81,26,5); u8g.drawBox(98,27,4,7); u8g.drawPixel(77,44);

이렇게 수정된 코드를 아두이노 스케치 코드 void draw() { } 함수 내부에 넣어주면 위의 프로그램을 이용해 그렸던 도형들이 OLED 디스플레이에 출력된다. 다음에 나오는 예제 코드 또한 이 프로그램을 이용해 OLED 디스플레이에 출력될 모양을 미리 확인한 후 아두이노 스케치 코드를 작성하여 완성하였다. 예제에서 사용할 OLED SH1106 디스플레이, 라이브러리 설치하는 방법, 라이브러리에 없는 도형 및 그림을 그리는 방법을 배웠으니 실제로 아두이노를 이용하여 OLED 디스플레이를 해보도록 하자.

연결 회로도 

---

소개되는 예제들은 아두이노 우노 기반으로 회로도와 프로그램이 설계되었으며, 라두이노를 이용해서 동일한 예제를 구현할 수 있도록 라두이노용 회로도와 프로그램을 추가한다. 라두이노용 회로도와 프로그램은 다음과 같으며 본 예제는 동일한 프로그램을 수정 없이 사용한다.

스케치코드

---

코드 설명

---

이번 예제는 간단한 전자시계를 만들어 본다. 시계를 구현하는 알고리즘을 배우고, U8glib의 함수 사용법을 익혀 OLED에 시간을 표현한다. 앞선 MPU9250과 달리 이번에 사용하는 OLED SH1106은 U8glib 라이브러리가 상당한 수준으로 구현되어 있기 때문에 데이터 시트(datasheet)를 따로 참고 하는 수고를 덜겠다. U8glib에 포함된 라이브러리 함수에 대한 설명은 다음 링크에서 자세 알아볼 수 있다.

https://github.com/olikraus/u8glib/wiki/userreference

 

OLED에 디스플레이하는 방식은 U8glib를 사용하여 draw() 함수 내부를 구성하고 loop() 함수에 있는 picture loop를 통해 OLED에 디스플레이 한다. 시계 알고리즘은 setup()함수와 loop()함수에 있는 이전시간 변수와 현재시간 변수를 비교하여 1 초에 한 번씩 초 단위의 일의 자리를 증가시킨다. 그렇게 초 단위의 일의 자리가 9 에서 10 으로 바뀔 때 0 으로 초기화하고, 초 단위의 십의 자리를 1 증가 시킨다. 초 단위의 십의 자리는 1 씩 증가하다가 5 에서 6 로 바뀔 때 0으로 초기화한다. 이때 동시에 분 단위의 일의 자리를 1 증가시켜준다. 초 단위와 같은 방식으로 분 단위도 바꿔주고 초기화 시켜주면 된다.

<시계 알고리즘>

이번 예제 코드에서는 분 단위까지의 코드만 구현되어 있지만 몇 분만 투자하면 시 단위의 코드를 추가하여 전자시계를 완성해볼 수 있다. 약간의 차이점이 있다면 시 단위에서는 23에서 24로 넘어 갈 때 시, 분, 초를 모두 0 으로 초기화 해주어야 한다는 점이다.

함수 설명

---