[아두이노] 128 x 64 OLED에 이미지 넣기

익명 12/18/2020

안녕하세요 대짜이찐입니다.

이전에 i2c oled를 한번 다뤄보는 포스팅을 했었습니다.


이번엔 oled 모듈에 원하는 이미지를 넣는 포스팅을 진행하려 합니다.

사용할 라이브러리는 이전 포스팅과 마찬가지로
u8glib라이브러리를 사용하겠습니다.


라이브러리 매니저에서 u8glib를 검색해서 라이브러리를 다운받거나,

https://github.com/olikraus/U8glib_Arduino/releases/tag/1.19.1

깃허브에서 다운받아 쓰시면 됩니다.


연결은 간단하게 전원과 I2C 통신만 아두이노와 해주세요.
I2C 통신의 SCL은 A5에 SDA는 A4에 연결해주세요.

Arduino Uno

OLED Module

5V

VCC(VDD)

GND

GND

SDA

A4(SDA)

SCL

A5(SCL)

예제중에 Bitmap을 보면서 설명하겠습니다.

이 라이브러리는 여러 칩을 사용한 oled를 지원하기 때문에
저희가 사용하는 칩의 oled 타입을 선택해줘야합니다.


이번에 사용하는 제품은 I2C통신을 하는 128 x 64 사이즈의 oled이며
이 제품은 칩을 SSD1306을 쓰기 때문에
위에서 해당되는 제품의 주석을 해제합니다.


이 예제를 그대로 아두이노에 업로딩 해보면 
이런 타워 모양의 이미지가 출력됩니다.



이 예제에서 oled의 각 도트를 제어해서 이미지를 모양을 나타내는 코드는
const uint8_t rook_bitmap[] PROGMEM = {}
안에 들어가는 배열부분입니다.



OLED에서 이미지를 출력하고 싶다면,
이 PROGMEM 안에 부분에 원하는 이미지의 배열을 넣으면 됩니다.
이제 원하는 이미지의 배열을 얻는 방법에 대해 설명하겠습니다.

저는 위 이미지의 파일을 넣고 싶은데요.
사실 파일을 다운받을 때, 픽셀을 정할 수 있다면 제일 좋습니다.


이렇게 말이죠 위에 큰 이미지는 512픽셀로다운로드
아래의 작은 이미지는 32픽셀의 이미지로 다운받았습니다.


저는 더 작은 이미지를 넣고 싶기 때문에
그림판에서 해당 이미지의 픽셀을 줄여주겠습니다.


그림판에서 선택 옆에 있는 크기조정을 눌러줍니다.
저는 24픽셀의 이미지를 원하기에 24픽셀을 입력하고 확인을 눌렀습니다.


그림판 아래쪽 빨간선으로 표시한 부분을보면 
가로 세로 픽셀이 24로 되어있는걸 확인할 수 있습니다.


그 후에 BMP파일로 저장해줍니다.



이 때 제일 추천드리는건 단품 BMP파일입니다.


다만 이런식으로 데이터가 조금 깨질 수 있습니다.

그 다음 이 이미지 파일을 배열로 바꿔야하는데요.
이전에 포스팅 중

https://devicemart.blogspot.com/2020/11/lcd-3.html

아두이노로 LCD 사용하기#3

이 포스팅에서도 사용했었던 LCD Assistant라는 프로그램을 사용할 겁니다.


해당프로그램은 아래링크에서 다운로드 가능합니다.


해당 프로그램에서 File-Load image를 통해 BMP파일을 불러옵니다.

그리고 Byte orientation은 Horizontal로 바꿔주시고
사이즈는 Width, Height 모두 24로 해줍니다.

다시 File-Save output으로 파일을 저장해주시고,
메모장을 통해 열어주세요.


그러면 이렇게 배열 파일을 볼 수 있는데,
이 배열을 복사해서 Bitmap예제의 PROGMEM에 넣어줍니다.


이 후 u8g.drawBitmapP코드를 보면
(0, 0, 3, 24, rook_bitmap)을 볼 수 있는데

순서대로 각각 (x좌표, y좌표, 가로이미지, 세로이미지, 배열이름)입니다.
이때 가로이미지의 경우는 24가 아닌 3이 적혀있는데, 가로이미지의 경우는
가로픽셀값 / 8을 해준 값을 넣어야 하기 때문입니다.


해당 파일을 업로드 하면 위와 같이 이미지가 제대로 출력되는것을 볼 수 있습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

 

#include "U8glib.h"

 

U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_NONE|U8G_I2C_OPT_DEV_0);    // I2C / TWI 

 

const uint8_t rook_bitmap[] PROGMEM = {

0x00, 0x00, 0x00, 0x00, 0x18, 0x00, 0x00, 0x18, 

0x00, 0x00, 0x18, 0x00, 0x0C, 0x00, 0x30, 0x0E,

0x00, 0x70, 0x06, 0x7E, 0x60, 0x00, 0xFF, 0x00, 

0x01, 0xFF, 0x80, 0x03, 0xFF, 0xC0, 0x03, 0xFF,

0xC0, 0x73, 0xFF, 0xCE, 0x73, 0xFF, 0xCE, 0x03, 

0xFF, 0xC0, 0x03, 0xFF, 0xC0, 0x01, 0xFF, 0x80,

0x00, 0xFF, 0x00, 0x06, 0x7E, 0x60, 0x0E, 0x00, 

0x70, 0x0C, 0x00, 0x30, 0x00, 0x18, 0x00, 0x00,

0x18, 0x00, 0x00, 0x18, 0x00, 0x00, 0x00, 0x00, 

};

 

void draw(void) {

  // graphic commands to redraw the complete screen should be placed here  

  u8g.drawBitmapP( 0, 0, 3, 24, rook_bitmap);

}

 

void setup(void) {

}

 

void loop(void) {

  // picture loop

  u8g.firstPage();  

  do {

    draw();

  } while( u8g.nextPage() );

  

  // rebuild the picture after some delay

  delay(1000);

}

 

Colored by Color Scripter

cs


본 포스팅에 사용된 제품은 모두 디바이스마트에서 구매할 수 있습니다

아두이노 우노 - https://www.devicemart.co.kr/goods/view?no=1245596
2.42인치 i2c oled - https://www.devicemart.co.kr/goods/view?no=12525556







Tags:

댓글 쓰기

0 댓글