SENSORS/ACTUATORS

ESP32 C3 Super Mini OLED 128x32 디스플레이

OLED 128x32 디스플레이로 사용자 지정 디스플레이를 만들고 데이터를 시각화하세요! 컴팩트 SSD1306 OLED 화면은 센서 판독값, 상태 정보 및 그래픽을 표시하는 데 완벽한 고명암비 시각을 제공합니다. 이 초보자 친화적인 튜토리얼은 OLED 128x32 디스플레이를 ESP32 C3 Super Mini에 연결하고 I2C 통신을 사용하여 텍스트, 숫자, 모양 및 사용자 지정 이미지를 표시하도록 프로그래밍하는 방법을 보여줍니다.

배우게 될 내용:

OLED 128x32 디스플레이가 무엇이고 어떻게 작동하는지
OLED 디스플레이를 ESP32 C3 Super Mini I2C 핀에 배선하는 방법
SSD1306 OLED 라이브러리 설치 및 사용 방법
화면에 텍스트, 숫자 및 센서 데이터를 표시하는 방법
텍스트를 가로 및 세로로 중앙 정렬하는 방법
ESP32 C3 Super Mini를 사용하여 모양 및 그래픽을 그리는 방법
사용자 지정 이미지 및 비트맵을 표시하는 방법
일반적인 OLED 디스플레이 문제를 해결하는 방법

실제 응용 프로그램:

온도, 습도 및 거리 판독값을 표시하는 센서 디스플레이
시스템 상태 및 WiFi 연결을 표시하는 상태 표시기
라이브 센서 업데이트를 표시하는 데이터 로거
대화형 사용자 인터페이스를 제공하는 메뉴 시스템
예보 및 측정값을 표시하는 기상 스테이션
디지털 시계 및 카운트다운 타이머

디스플레이 기술:

OLED(유기 발광 다이오드) 디스플레이는 자체 조명을 생성하므로 백라이트가 필요하지 않습니다. 각 픽셀은 독립적으로 조명을 내보내므로 기존 LCD 디스플레이에 비해 완벽한 검정색, 높은 명암비 및 넓은 시야각을 제공합니다.

필요한 하드웨어

1	×	ESP32 C3 Super Mini	아마존
1	×	마이크로 USB 케이블	아마존
1	×	SSD1306 I2C OLED 디스플레이 128x32	아마존
1	×	점퍼 와이어	쿠팡 \| 아마존

공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

OLED 128x32 디스플레이 정보

OLED 128x32는 SSD1306 드라이버 칩을 사용하는 자체 점광 OLED 기술을 사용하는 컴팩트 흑백 디스플레이 모듈입니다.

주요 특성:

해상도: 128픽셀 너비 × 32픽셀 높이(총 4,096픽셀)
화면 크기: 일반적으로 0.91인치 대각선
기술: 유기 발광 다이오드(자체 점광 픽셀)
통신: I2C 인터페이스(2선 연결)
드라이버 칩: SSD1306
색상: 흑백(검은 배경에 흰색 또는 파란색 픽셀)
전압: 3.3V - 5V 전력 공급
전류 소비: 10-20mA(켜진 픽셀에 따라 다름)
명암비: 완벽한 검정색(픽셀이 완전히 꺼짐)
시야각: ~170도
응답 시간: <1ms

초보자가 사랑하는 이유:

간단한 I2C 배선(4개 연결만)
백라이트 필요 없음(자체 점광)
높은 명암비로 텍스트가 매우 읽기 쉬움
큰 Arduino 라이브러리 지원
낮은 전력 소비
소형 프로젝트에 맞는 컴팩트 크기

OLED vs LCD 비교:

특성	OLED	LCD
백라이트	없음(자체 점광)	필요함
명암비	완벽(무한)	제한적
검정색 수준	진정한 검정	회색/점광
시야각	~170°	~120°
전력 사용	낮음(검은 영역)	일정
두께	매우 얇음	더 두꺼움
응답 시간	빠름(<1ms)	더 느림

OLED 디스플레이 핀아웃

OLED 128x32 디스플레이 모듈은 일반적으로 전원 및 I2C 통신을 위한 4개의 핀을 가지고 있습니다.

VCC: 전력 공급 핀(3.3V 또는 5V)
GND: 접지 핀(0V 기준)
SCL: I2C 시리얼 클록 핀(ESP32 C3 Super Mini 핀 12에 연결)
SDA: I2C 시리얼 데이터 핀(ESP32 C3 Super Mini 핀 11에 연결)

I2C 통신:

데이터 전송에 2개 와이어만 사용(SCL + SDA)
기본 I2C 주소: 0x3C(일부 모듈은 0x3D 사용)
내장 풀업 저항(일반적으로 모듈에 포함)
여러 기기가 동일한 I2C 버스를 공유 가능

※ 주의:

OLED 모듈의 핀 연결은 제조업체에 따라 다를 수 있습니다. 특정 모듈의 레이블을 항상 확인하세요
이 튜토리얼은 SSD1306 I2C 드라이버 OLED 디스플레이를 사용합니다(DIYables 모듈로 테스트됨)
핀 순서는 다양합니다: 일부 모듈은 GND-VCC-SCL-SDA, 다른 모듈은 VCC-GND-SCL-SDA를 가집니다

배선도

아래의 I2C 연결을 따라 OLED 128x32 디스플레이를 ESP32 C3 Super Mini에 연결하세요.

이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.

연결 표:

OLED 모듈	ESP32 C3 Super Mini
VCC	3.3V
GND	GND
SDA	SDA (핀 11)
SCL	SCL (핀 12)

배선 팁:

연결하기 전에 특정 OLED 모듈의 핀 레이블을 다시 한 번 확인하세요
SDA가 핀 11에, SCL이 ESP32 C3 Super Mini의 핀 12에 연결되는지 확인하세요
신호 노이즈를 최소화하기 위해 짧은 점퍼 와이어를 사용하세요
ESP32 C3 Super Mini의 USB 전원은 충분합니다(OLED는 10-20mA만 소비)

ESP32 C3 Super Mini를 OLED 디스플레이로 프로그래밍

SSD1306 OLED 라이브러리 설치

Arduino IDE의 왼쪽에 있는 Libraries 아이콘을 클릭
SSD1306 검색
Adafruit의 Adafruit SSD1306 라이브러리 찾기
Install을 클릭하여 라이브러리 추가

종속성을 설치하라는 메시지가 나타나면 Install All을 클릭하여 필수 라이브러리 추가(Adafruit GFX 포함)

ESP32 C3 Super Mini adafruit gfx 센서 라이브러리

기본 OLED 프로그래밍 단계

필요한 라이브러리 포함:

#include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h>

디스플레이 치수 정의:

#define OLED_WIDTH 128 // OLED 디스플레이 너비(픽셀) #define OLED_HEIGHT 32 // OLED 디스플레이 높이(픽셀)

디스플레이 객체 생성:

// I2C 통신용 SSD1306 디스플레이 객체 생성 Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1);

setup()에서 디스플레이 초기화:

// I2C 주소 0x3C에서 OLED 초기화 if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("SSD1306 allocation failed")); while (true); // 디스플레이 초기화 실패 시 중지 }

디스플레이 내용:

그리기 함수를 사용하여 텍스트, 모양 및 이미지 추가
oled.display()를 호출하여 화면에 내용 표시

ESP32 C3 Super Mini 코드 - OLED에 텍스트 표시

필수 OLED 텍스트 함수:

oled.clearDisplay() – 화면의 모든 픽셀 지우기
oled.setTextSize(n) – 텍스트 크기 설정(1-8, 1이 가장 작음)
oled.setCursor(x, y) – 텍스트 시작 위치 설정
oled.setTextColor(WHITE) – 텍스트 색을 흰색으로 설정
oled.setTextColor(BLACK, WHITE) – 텍스트 색을 검은색, 배경을 흰색으로 설정
oled.print("text") – 줄 바꿈 없이 텍스트 인쇄
oled.println("text") – 줄 바꿈과 함께 텍스트 인쇄
oled.println(number) – 숫자 값 인쇄
oled.println(number, HEX) – 16진수 형식으로 숫자 인쇄
oled.display() – 화면을 업데이트하여 모든 변경 사항 표시

스크롤 함수:

oled.startscrollright(start, stop) – 텍스트를 왼쪽에서 오른쪽으로 스크롤
oled.startscrollleft(start, stop) – 텍스트를 오른쪽에서 왼쪽으로 스크롤
oled.startscrolldiagright(start, stop) – 대각선 스크롤(왼쪽 아래에서 오른쪽 위로)
oled.startscrolldiagleft(start, stop) – 대각선 스크롤(오른쪽 아래에서 왼쪽 위로)
oled.stopscroll() – 스크롤 애니메이션 중지

128x32 디스플레이용 텍스트 크기 참고:

크기 1: ~줄당 21자, 4줄(문자당 6×8픽셀)
크기 2: ~줄당 10자, 2줄(문자당 12×16픽셀)
크기 3: ~줄당 7자, 1줄(문자당 18×24픽셀)

OLED 디스플레이에서 텍스트 중앙 정렬

ESP32 C3 Super Mini를 사용하여 OLED 128x32 디스플레이에서 텍스트와 숫자를 가로 및 세로로 중앙 정렬하는 방법을 배우려면 이 자세한 가이드를 확인하세요:

OLED에서 텍스트 수직/수평 중앙 정렬 방법

빠른 중앙 정렬 공식:

가로 중앙: x = (128 - textWidth) / 2
세로 중앙: y = (32 - textHeight) / 2
텍스트 너비 = 문자 × 6 × textSize
텍스트 높이 = 8 × textSize

ESP32 C3 Super Mini 코드 - OLED에 모양 그리기

필수 그리기 함수:

oled.drawPixel(x, y, color) – 위치에 단일 픽셀 그리기
oled.drawLine(x0, y0, x1, y1, color) – 두 점 사이의 선 그리기
oled.drawRect(x, y, width, height, color) – 사각형 윤곽선 그리기
oled.fillRect(x, y, width, height, color) – 채워진 사각형 그리기
oled.drawCircle(x, y, radius, color) – 원 윤곽선 그리기
oled.fillCircle(x, y, radius, color) – 채워진 원 그리기
oled.drawTriangle(x0, y0, x1, y1, x2, y2, color) – 삼각형 윤곽선 그리기
oled.fillTriangle(x0, y0, x1, y1, x2, y2, color) – 채워진 삼각형 그리기
oled.drawRoundRect(x, y, width, height, radius, color) – 둥근 사각형 윤곽선 그리기
oled.fillRoundRect(x, y, width, height, radius, color) – 채워진 둥근 사각형 그리기

ESP32 C3 Super Mini 코드 - OLED에 이미지 표시

OLED 128x32 디스플레이에 사용자 지정 이미지를 표시하려면 온라인 변환기 도구를 사용하여 이미지를 비트맵 배열로 변환하세요.

이미지 변환 단계:

Image to Bitmap Converter를 방문
이미지 파일 업로드(JPG, PNG 등)
너비 및 높이 설정(이 디스플레이의 최대 128×32)
설정 선택: Monochrome, Horizontal orientation
Convert를 클릭하고 생성된 비트맵 배열 복사

사용자 지정 이미지 사용:

/* * 이 ESP32 C3 Super Mini 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 C3 Super Mini 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32-c3/esp32-c3-super-mini-oled-128x32-display */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #define SCREEN_WIDTH 128 // OLED display width, in pixels #define SCREEN_HEIGHT 32 // OLED display height, in pixels // declare an SSD1306 display object connected to I2C Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); // bitmap of DIYable-icon image int bitmap_width = 72; // MUST match to bitmap image size int bitmap_height = 32; // MUST match to bitmap image size const unsigned char bitmap_DIYables [] PROGMEM = { // 'DIYables Icon', 72x32 0x00, 0x0f, 0xff, 0xff, 0x8f, 0xf8, 0x07, 0x38, 0x07, 0x00, 0x0f, 0xff, 0xff, 0x8f, 0xfe, 0x07, 0x1c, 0x0e, 0x00, 0x0f, 0xff, 0xff, 0x8f, 0xff, 0x07, 0x1c, 0x1c, 0x00, 0x0f, 0xff, 0xff, 0x8e, 0x07, 0x87, 0x0e, 0x1c, 0x00, 0x0f, 0xff, 0xff, 0x8e, 0x03, 0xc7, 0x0f, 0x38, 0x00, 0x0f, 0xff, 0xff, 0x8e, 0x01, 0xc7, 0x07, 0x38, 0x00, 0x0f, 0xff, 0xff, 0x8e, 0x01, 0xc7, 0x03, 0xf0, 0xf0, 0x0f, 0xff, 0xff, 0x8e, 0x01, 0xc7, 0x03, 0xe0, 0xfc, 0x0f, 0xff, 0xff, 0x8e, 0x01, 0xc7, 0x01, 0xe0, 0xfe, 0x0f, 0xff, 0xff, 0x8e, 0x03, 0xc7, 0x01, 0xc0, 0xff, 0x8f, 0xff, 0xff, 0x8e, 0x03, 0x87, 0x01, 0xc0, 0xff, 0x8f, 0xff, 0xff, 0x8e, 0x0f, 0x87, 0x01, 0xc0, 0xff, 0xcf, 0xff, 0xff, 0x8f, 0xff, 0x07, 0x01, 0xc0, 0xff, 0xef, 0xff, 0xff, 0x8f, 0xfc, 0x07, 0x01, 0xc0, 0xff, 0xef, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x8f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x8f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0xfc, 0xfd, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0xfc, 0xfc, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0xfc, 0xfc, 0xff, 0xff, 0xff, 0xef, 0xff, 0xff, 0x0e, 0x0c, 0x0c, 0xc3, 0x07, 0xff, 0xef, 0xff, 0xfe, 0x0f, 0xec, 0xec, 0x99, 0x7f, 0xff, 0xef, 0xff, 0xfe, 0x0f, 0x04, 0xe4, 0x81, 0x0f, 0xff, 0xcf, 0xff, 0xfc, 0x0e, 0x32, 0xe4, 0x9f, 0xc7, 0xff, 0x8f, 0xff, 0xf8, 0x0e, 0x32, 0x4c, 0x9b, 0x67, 0xff, 0x0f, 0xff, 0xf0, 0x0e, 0x04, 0x0c, 0xc3, 0x0f, 0xfe, 0x0f, 0xff, 0xe0, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x0f, 0xff, 0x80, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x0f, 0xfc, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff }; void setup() { Serial.begin(115200); // initialize OLED display with address 0x3C for 128x32 if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("SSD1306 allocation failed")); while (true); } delay(2000); // wait for initializing } void loop() { oled.clearDisplay(); // display bitmap to the center int x = (SCREEN_WIDTH - bitmap_width) / 2; int y = (SCREEN_HEIGHT - bitmap_height) / 2; oled.drawBitmap(x, y, bitmap_DIYables, bitmap_width, bitmap_height, WHITE); oled.display(); delay(2000); }

중요 사항:

이미지 치수는 128×32픽셀을 초과하지 않아야 함
너무 크면 변환 전에 이미지 크기를 조정
oled.drawBitmap() 함수의 너비 및 높이 매개변수를 이미지 크기와 일치하도록 업데이트
ArduinoIcon 배열을 변환된 비트맵 배열로 바꾸기

이미지 표시 함수:

oled.drawBitmap(x, y, bitmap_array, width, height, color) – 위치에 비트맵 이미지 그리기

빠른 단계

ESP32 C3 Mini를 처음 사용하시나요? 개발 환경을 설정하려면 먼저 Getting Started with ESP32 C3 Mini 튜토리얼을 완료하세요.
OLED를 ESP32에 연결: VCC를 3.3V에, GND를 GND에, SDA를 핀 11에, SCL을 핀 12에 배선
라이브러리 설치: Arduino IDE Library Manager를 통해 Adafruit SSD1306 및 Adafruit GFX 라이브러리 추가
코드 복사: 위의 예제 코드 중 하나 사용(텍스트, 그리기 또는 이미지 표시)
I2C 주소 확인: 대부분의 OLED 모듈은 0x3C 사용(필요하면 0x3D로 변경)
코드 업로드: 올바른 ESP32 C3 Super Mini 보드 및 COM 포트를 선택한 후 업로드
디스플레이 확인: OLED는 코드를 기반으로 텍스트, 그래픽 또는 이미지를 표시해야 함
내용 수정: 프로젝트 필요에 따라 텍스트, 위치 및 그래픽 사용자 정의
전문가 팁: 항상 내용을 업데이트하기 전에 oled.clearDisplay()를 호출하고 화면을 올바르게 새로고침하기 위해 oled.display()를 호출

OLED 디스플레이 문제 해결

문제: 빈 화면(아무것도 표시되지 않음)

배선 확인: SDA가 핀 11에, SCL이 핀 12에, VCC가 3.3V에, GND가 GND에 연결되어 있는지 확인
I2C 주소 테스트: I2C 스캐너 코드를 실행하여 실제 주소 감지
주소 변경: oled.begin() 함수에서 0x3C가 작동하지 않으면 0x3D를 시도
전원 확인: 3.3V 또는 5V가 VCC 핀에 제대로 연결되어 있는지 확인
연결 확인: 브레드보드 구멍에 점퍼 와이어를 단단히 누르기
모듈 테스트: OLED를 다른 Arduino에서 시도하여 결함이 있는 디스플레이 제외

I2C 스캐너 코드:

#include <Wire.h> void setup() { Serial.begin(115200); Wire.begin(); Serial.println("Scanning I2C addresses..."); for (byte address = 1; address < 127; address++) { Wire.beginTransmission(address); if (Wire.endTransmission() == 0) { Serial.print("Device found at 0x"); if (address < 16) Serial.print("0"); Serial.println(address, HEX); } } Serial.println("Scan complete"); } void loop() {}

문제: 왜곡되거나 부분 표시

연결 확보: 헐거운 점퍼 와이어 확인
해상도 확인: 코드가 128×32(128×64 아님)를 사용하는지 확인
초기화 지연 추가: oled.begin() 후에 delay(2000) 포함
디스플레이 재설정: 초기화 후 oled.clearDisplay() 및 oled.display() 호출

문제: 텍스트가 너무 작거나 큼

텍스트 크기 조정: 작은 경우 oled.setTextSize(1), 중간의 경우 setTextSize(2) 사용
크기 1: 줄당 ~21자(각 6×8픽셀)
크기 2: 줄당 ~10자(각 12×16픽셀)
크기 3: 줄당 ~7자(32픽셀 높이에서 1줄만)

문제: 디스플레이 깜박임

새로고침 최적화: oled.clearDisplay()를 한 번, 업데이트당 oled.display()를 한 번 호출
지연 추가: 루프에 delay(100) 포함하여 업데이트 속도 제한
빠른 지우기 방지: 불필요하게 디스플레이를 반복해서 지우지 않기

문제: 첫 번째 줄만 표시

좌표 확인: Y 위치가 0-31 범위 내인지 확인(32픽셀 높이)
커서 설정: 각 줄 전에 oled.setCursor(x, y) 사용
텍스트 크기 오버플로우: 큰 텍스트 크기가 내용을 화면 밖으로 밀어낼 수 있음

OLED 디스플레이가 있는 프로젝트 아이디어

이러한 OLED 디스플레이 프로젝트 아이디어로 ESP32 C3 Super Mini 기술을 확장하세요:

온도 및 습도 모니터: DHT11 또는 DHT22 센서 판독값을 실시간으로 표시
초음파 거리 측정기: 시각적 진행률 표시줄이 있는 HC-SR04 측정값 표시
WiFi 신호 강도 표시기: 막대 그래프가 있는 RSSI 값 표시
스크롤 메시지 보드: 스크롤 텍스트 애니메이션이 있는 뉴스 티커 생성
RTC 모듈이 있는 디지털 시계: DS3231 실시간 시계에서 시간 및 날짜 표시
버튼으로 제어되는 메뉴 시스템: 누름 버튼을 사용하여 설정 탐색
기상 스테이션 디스플레이: BME280 센서에서 온도, 습도, 압력 표시
모션 감지기 경고: PIR 센서 상태 및 트리거 수 표시
배터리 전압 모니터: 백분율 표시줄이 있는 실시간 배터리 수준 표시
간단한 게임 콘솔: Pong, Snake 또는 breakout 게임 생성

동영상

비디오 제작은 시간이 많이 걸리는 작업입니다. 비디오 튜토리얼이 학습에 도움이 되었다면, YouTube 채널 을 구독하여 알려 주시기 바랍니다. 비디오에 대한 높은 수요가 있다면, 비디오를 만들기 위해 노력하겠습니다.

아래 비디오를 시청하여 이 ESP32 C3 Super Mini OLED 디스플레이 프로젝트의 시각적 안내를 받으세요.

직접 도전하기

OLED 디스플레이 기술을 향상시키기 위해 이러한 점진적으로 어려운 수정을 시도해보세요:

쉬움: 텍스트 크기, 색상 및 위치를 변경하여 디스플레이 레이아웃 사용자 정의
쉬움: DHT11 온도/습도 센서에서 센서 판독값을 OLED에 표시
중간: 0%에서 100%로 채워지는 애니메이션 로딩 막대 생성
중간: 계속 루프되는 스크롤 텍스트 티커 구축
중간: 누름 버튼으로 제어되는 다중 페이지 메뉴 시스템 설계
고급: 실시간 센서 데이터를 OLED에 스크롤 그래프로 표시
고급: 버튼 제어로 미니 게임(Pong 또는 Snake) 생성
고급: 라이브 예보 데이터를 표시하는 WiFi 연결 날씨 디스플레이 구축