I2C OLED Module JP: 두 판 사이의 차이
잔글편집 요약 없음 |
잔글편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
{{#seo:|title= | {{#seo:|title=アドウィキ:I2C OLEDモジュールガイド|title_mode=append|keywords=Arduino, 情報科学, メーカーレーニング, 実施評価, I2C OLEDモジュール, Arduinoプロジェクト, キャップストーンプロジェクト, Arduino例コード|description=このガイドでは、Arduinoを使用してI2C OLEDモジュールを制御する方法(基本情報、回路、例コード)を紹介します。情報科学とメーカーレッスンに役立ちます。}} | ||
[[파일:OLED 사진.jpg|center|class=coders100]] | [[파일:OLED 사진.jpg|center|class=coders100]] | ||
== '''概要''' == | == '''概要''' == | ||
Arduino | Arduino OLEDモジュールは、小型で高解像度のディスプレイモジュールで、さまざまなプロジェクトに活用できます。OLED(有機EL)技術に基づいており、優れた色彩とコントラストを提供します。 | ||
=== OLEDの動作原理 === | === OLEDの動作原理 === | ||
* ''' | * '''有機物''': OLEDは薄い有機物層を含んでおり、この層は電流によって光を放出します。有機化合物は電気的刺激を受けると発光する特性があります。 | ||
* '''電極''': | * '''電極''': OLEDパネルは通常、二つの電極(陽極と陰極)で構成されており、電流が流れると有機物が電子を放出し、この電子と正孔が結びついて光を生成します。 | ||
=== SSD1306 === | === SSD1306 === | ||
SSD1306はOLEDディスプレイを駆動するためのドライバIC(集積回路)です。 | |||
1KBのグラフィックディスプレイ専用RAM(GDDRAM)を内蔵しており、これを使用して表示するビットパターンを保存します。 | |||
[[파일:SSD1306 구조.jpg|center|class=coders100]] | |||
{| class="wikitable" | {| class="wikitable" | ||
!項目 | !項目 | ||
| 24번째 줄: | 26번째 줄: | ||
|- | |- | ||
|'''ページ数''' | |'''ページ数''' | ||
| | |8ページ(ページ0-7) | ||
|- | |- | ||
|''' | |'''縦のライン数''' | ||
| | |128縦のライン(0-127) | ||
|- | |- | ||
|'''ビット情報''' | |'''ビット情報''' | ||
| | |各縦のラインにつき8ビット(ビット0-7) | ||
|- | |- | ||
|'''計算''' | |'''計算''' | ||
|8ページ | |8ページ x 128縦のライン x 8ビット = 8192ビット = 1024バイト(1KB) | ||
|} | |} | ||
| 47번째 줄: | 49번째 줄: | ||
|128x64ピクセルまたは128x32ピクセル | |128x64ピクセルまたは128x32ピクセル | ||
|- | |- | ||
|''' | |'''ディスプレイタイプ''' | ||
|OLED(有機EL) | |OLED(有機EL) | ||
|- | |- | ||
|'''色''' | |'''色''' | ||
| | |モノクロ(ホワイトまたはブルー) | ||
|- | |- | ||
|'''インターフェース''' | |'''インターフェース''' | ||
| | |I2C(2線式) | ||
|- | |- | ||
|'''電圧''' | |'''電圧''' | ||
|3. | |3.3V〜5V | ||
|- | |- | ||
|'''消費電力''' | |'''消費電力''' | ||
| | |待機電力:約0.1mA、最大電力:約20mA | ||
|} | |} | ||
== ''' | == '''活用例''' == | ||
=== 回路構成 === | === 回路構成 === | ||
| 72번째 줄: | 74번째 줄: | ||
|- | |- | ||
|VCC | |VCC | ||
| | |5Vまたは3.3V | ||
| | |5Vまたは3.3V | ||
|- | |- | ||
|GND | |GND | ||
| 87번째 줄: | 89번째 줄: | ||
|22 | |22 | ||
|} | |} | ||
=== | [[파일:OLED회로.jpg|center|class=coders100]] | ||
<syntaxhighlight lang="c++" line="1"> | === デバイスアドレス確認 === | ||
I2Cバスに接続されたデバイスのアドレスを確認するために使用するコードです。 | |||
以下の例を実行する前に、まずI2Cスキャナーを実行してモジュールのアドレスを確認してください。<syntaxhighlight lang="c++" line="1"> | |||
#include <Wire.h> | #include <Wire.h> | ||
... | |||
void setup() { | |||
Serial.begin(9600); // シリアル通信開始 | |||
Wire.begin(); // I2Cバス開始 | |||
Serial.println("I2Cスキャナー開始..."); | |||
} | |||
void loop() { | |||
byte error, address; | |||
int nDevices = 0; | |||
Serial.println("I2Cデバイス検索中..."); | |||
for (address = 1; address < 127; address++) { | |||
// I2Cデバイスへの接続を試みる | |||
Wire.beginTransmission(address); | |||
error = Wire.endTransmission(); | |||
if (error == 0) { | |||
Serial.print("デバイス発見! アドレス:0x"); | |||
if (address < 16) { | |||
Serial.print("0"); | |||
} | |||
Serial.print(address, HEX); | |||
Serial.println(); | |||
nDevices++; | |||
} else if (error == 4) { | |||
Serial.print("アドレス0x"); | |||
Serial.print(address, HEX); | |||
Serial.println("でエラーが発生しました!"); | |||
} | |||
} | |||
if (nDevices == 0) { | |||
Serial.println("I2Cデバイスが見つかりませんでした。"); | |||
} else { | |||
Serial.println("デバイス検索完了。"); | |||
} | |||
delay(5000); // 5秒待機してから再スキャン | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
==== 実行結果 ==== | ==== 実行結果 ==== | ||
[[파일: | [[파일:I2C스캐너결과.png|center|class=coders100]] | ||
=== ライブラリ === | === ライブラリ === | ||
Adafruit SSD1306ライブラリを使用します。 | Adafruit SSD1306ライブラリを使用します。 | ||
SSD1306をインストールする際に、必要なAdafruit BusIOおよびAdafruit GFXライブラリも一緒にインストールするために「INSTALL ALL」を押してください。 | |||
[[파일: | [[파일:OLED라이브러리설치.jpg|center|class=coders100]] | ||
=== 1. | === 1. ライブラリの基本提供例 === | ||
ファイル - サンプル - Adafruit SSD1306 - ssd1306_128x64 i2cをクリックして例を開いてください。 | |||
[[파일: | [[파일:OLED라이브러리기본제공예제.png|class=coders50]] | ||
例コード内のAddress部分を、以前にI2Cスキャナーで確認したデバイスのアドレスに変更してください。 | |||
[[파일: | [[파일:OLED장치주소수정.jpg|center|class=coders100]] | ||
==== 実行結果 ==== | ==== 実行結果 ==== | ||
| 120번째 줄: | 164번째 줄: | ||
</div> | </div> | ||
=== 2. | === 2. テキスト出力 === | ||
<syntaxhighlight lang="c++" line="1"> | 簡単なテキストを表示する例です。 | ||
0.91インチOLEDを使用し、このモジュールの解像度は128 x 32ピクセルであるため、SCREEN_HEIGHTを64から32に変更しました。<syntaxhighlight lang="c++" line="1"> | |||
#include <Wire.h> | #include <Wire.h> | ||
... | #include <Adafruit_GFX.h> | ||
#include <Adafruit_SSD1306.h> | |||
#define SCREEN_WIDTH 128 // OLED画面の幅 | |||
#define SCREEN_HEIGHT 32 // OLED画面の高さ | |||
// OLEDモジュールのI2Cアドレス(通常0x3Dまたは0x3C) | |||
#define OLED_ADDR 0x3C | |||
// Adafruit_SSD1306オブジェクト作成 | |||
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); | |||
void setup() { | |||
// OLED初期化 | |||
display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR); | |||
display.clearDisplay(); // 画面クリア | |||
display.setTextSize(1); // テキストサイズ設定 | |||
display.setTextColor(SSD1306_WHITE); // テキスト色設定 | |||
display.setCursor(0, 0); // カーソル位置設定 | |||
display.println("GONGZIPSA"); // テキスト表示 | |||
display.setCursor(0, 10); // カーソル位置設定 | |||
display.println("ArduWiki"); // テキスト表示 | |||
display.display(); // 画面に出力 | |||
} | |||
void loop() { | |||
// ループ内での処理はなし | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
使用される関数の役割は以下の通りです: | |||
{| class="wikitable" | {| class="wikitable" | ||
!関数名 | !関数名 | ||
| 131번째 줄: | 205번째 줄: | ||
|- | |- | ||
|<code>begin()</code> | |<code>begin()</code> | ||
| | |OLEDディスプレイを初期化します。I2Cアドレスと解像度を設定します。 | ||
|- | |- | ||
|<code>clearDisplay()</code> | |<code>clearDisplay()</code> | ||
| | |現在のディスプレイ内容をクリアします。 | ||
|- | |||
|<code>setTextSize(size)</code> | |||
|表示するテキストのサイズを設定します。<code>size</code>は倍率を示します(例:1, 2など)。 | |||
|- | |||
|<code>setTextColor(color)</code> | |||
|テキストの色を設定します。一般的に<code>SSD1306_WHITE</code>、<code>SSD1306_BLACK</code>が使われます。 | |||
|- | |||
|<code>setCursor(x, y)</code> | |||
|表示するテキストの位置を設定します。<code>x</code>は水平位置、<code>y</code>は垂直位置です。 | |||
(0, 0)は左上隅で、<code>x</code>が増えると右へ、<code>y</code>が増えると下へ移動します。 | |||
|- | |||
|println("表示内容") | |||
|表示する内容を設定します。 | |||
|- | |||
|<code>display()</code> | |||
|バッファに保存された内容をOLEDディスプレイに表示します。 | |||
|} | |} | ||
==== 実行結果 ==== | ==== 実行結果 ==== | ||
[[파일: | [[파일:OLED예제2실행결과.jpg|center|class=coders100]] | ||
=== 3. | === 3. 簡単な図形出力 === | ||
<syntaxhighlight lang="c++" line="1"> | 四角形、三角形、円などの簡単な図形を表示する例です。<syntaxhighlight lang="c++" line="1"> | ||
#include <Wire.h> | #include <Wire.h> | ||
... | #include <Adafruit_GFX.h> | ||
#include <Adafruit_SSD1306.h> | |||
#define SCREEN_WIDTH 128 | |||
#define SCREEN_HEIGHT 64 | |||
#define OLED_ADDR 0x3C | |||
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); | |||
void setup() { | |||
display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR); | |||
display.clearDisplay(); // 画面初期化 | |||
display.drawTriangle(10, 10, 40, 30, 10, 30, WHITE); // 小さな三角形 | |||
display.drawRect(50, 10, 30, 20, WHITE); // 四角形 | |||
display.fillRect(90, 10, 30, 20, WHITE); // 塗りつぶし四角形 | |||
display.drawCircle(25, 50, 13, WHITE); // 円 | |||
display.drawRoundRect(50, 40, 30, 20, 7, WHITE); // 丸角四角形 | |||
display.fillRoundRect(90, 40, 30, 20, 7, WHITE); // 塗りつぶし丸角四角形 | |||
display.display(); | |||
} | |||
void loop() { | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
図形関連の関数は以下の通りです: | |||
{| class="wikitable" | {| class="wikitable" | ||
!関数名 | !関数名 | ||
| 152번째 줄: | 265번째 줄: | ||
|- | |- | ||
|<code>drawLine(x1, y1, x2, y2, color)</code> | |<code>drawLine(x1, y1, x2, y2, color)</code> | ||
| | |2点を結ぶ線を描画します。 | ||
|- | |||
|<code>drawRect(x, y, width, height, color)</code> | |||
|空の四角形を描きます。 | |||
|- | |||
|<code>fillRect(x, y, width, height, color)</code> | |||
|塗りつぶし四角形を描きます。 | |||
|- | |||
|<code>drawCircle(x, y, radius, color)</code> | |||
|空の円を描きます。 | |||
|- | |||
|<code>fillCircle(x, y, radius, color)</code> | |||
|塗りつぶし円を描きます。 | |||
|- | |||
|<code>drawTriangle(x1, y1, x2, y2, x3, y3, color)</code> | |||
|三角形を描きます。 | |||
|- | |||
|<code>drawRoundRect(x, y, width, height, radius, color)</code> | |||
|丸角の四角形を描きます。 | |||
|- | |||
|<code>fillRoundRect(x, y, width, height, radius, color)</code> | |||
|塗りつぶし丸角四角形を描きます。 | |||
|} | |} | ||
==== 実行結果 ==== | ==== 実行結果 ==== | ||
[[파일: | [[파일:OLED예제3실행결과.jpg|center|class=coders100]] | ||
=== 4. ASCIIコード出力 === | |||
ASCIIコード表に対応する1〜8番の文字を表示する例です。 | |||
より多くの文字を表示するにはASCIIコード表を参照してください。<syntaxhighlight lang="c++" line="1"> | |||
<syntaxhighlight lang="c++" line="1"> | |||
#include <Wire.h> | #include <Wire.h> | ||
... | #include <Adafruit_GFX.h> | ||
#include <Adafruit_SSD1306.h> | |||
#define SCREEN_WIDTH 128 | |||
#define SCREEN_HEIGHT 64 | |||
#define OLED_ADDR 0x3C | |||
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); | |||
void setup() { | |||
display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR); | |||
display.clearDisplay(); // 画面初期化 | |||
// テキスト出力設定 | |||
display.setTextSize(1); // テキストサイズ設定 | |||
display.setTextColor(WHITE); // テキスト色設定 | |||
display.setCursor(0, 0); // カーソル位置設定 | |||
// ASCIIコード文字出力 | |||
display.println("ASCII Code Print"); | |||
// ASCIIコード文字出力 | |||
for (char c = 1; c < 9; c++) { // ASCIIコード1〜8 | |||
display.print(c); // 各文字を表示 | |||
display.print(" "); // 空白追加 | |||
} | |||
display.display(); // バッファ内容を画面に表示 | |||
} | |||
void loop() { | |||
// ループ内での処理はなし | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
==== 実行結果 ==== | ==== 実行結果 ==== | ||
[[파일: | [[파일:OLED예제4아스키코드출력.jpg|center|class=coders100]] | ||
=== 5. ビットマップ画像出力 === | |||
画像をバイト配列に変換し、OLEDで表示する例です。 | |||
==== 画像をバイト配列に変換する方法 ==== | |||
1. [https://javl.github.io/image2cpp/ image2cpp (javl.github.io)] にアクセスします。 | |||
'''2. 画像をアップロード''' | |||
左側の「Select image」から画像を選択してアップロードします。 | |||
[[파일:Img2cpp이미지업로드.png|center|class=coders100]] | |||
'''3. 画像設定''' | |||
キャンバスサイズに画像のサイズを入力し、プレビューを確認します。画像が大きすぎてサイズ調整がうまくいかない場合、プレビューに正しく画像が表示されません。 | |||
<syntaxhighlight lang="c++" line="1"> | [[파일:Img2cpp이미지세팅.png|center|class=coders100]] | ||
'''4. 出力''' | |||
「Code output format」を「Arduino Code」に設定し、「Generate code」をクリックすると、下に配列が表示されます。 | |||
出力された配列をコピーし、例のコードで使用してください。 | |||
[[파일:Img2cpp출력.png|center|class=coders100]] | |||
==== 例コード ==== | |||
<code>drawBitmap(x, y, bitmap, width, height, color)</code> 関数を使用して、指定した位置にビットマップ画像を描画します。 | |||
<code>color</code> はホワイトに設定されており、画像は白色で表示されます。 | |||
12行目のconst unsigned char ~ 部分を、先ほど作成したバイト配列に置き換えて使用してください。 | |||
例画像(64 x 64サイズ)とサイズが異なる場合、56行目のdrawBitmap関数のx、yカーソル位置、width、heightの写真サイズを変更する必要があります。<syntaxhighlight lang="c++" line="1"> | |||
#include <Wire.h> | #include <Wire.h> | ||
... | #include <Adafruit_GFX.h> | ||
#include <Adafruit_SSD1306.h> | |||
#define SCREEN_WIDTH 128 | |||
#define SCREEN_HEIGHT 64 | |||
#define OLED_ADDR 0x3C | |||
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); | |||
// GONGZIPSA ロゴ | |||
const unsigned char GONGZIPSA [] PROGMEM = { | |||
0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x7f, 0xff, 0xff, | |||
... | |||
}; | |||
void setup() { | |||
display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR); | |||
display.clearDisplay(); // 画面初期化 | |||
} | |||
void loop() { | |||
display.clearDisplay(); // 画面クリア | |||
// 64x64ビットマップ画像描画 | |||
display.drawBitmap(32, 0, GONGZIPSA, 64, 64, WHITE); // (x, y, bitmap, width, height, color) | |||
display.display(); // バッファ内容を画面に表示 | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
==== 実行結果 ==== | ==== 実行結果 ==== | ||
[[파일: | フリッカー現象のため、撮影時に画像が切れて表示されることがありますが、実際には丸いロゴがきれいに表示されます。 | ||
[[파일:OLED예제5비트맵이미지출력.jpg|center|class=coders100]] | |||
2025년 3월 27일 (목) 20:54 기준 최신판

概要
Arduino OLEDモジュールは、小型で高解像度のディスプレイモジュールで、さまざまなプロジェクトに活用できます。OLED(有機EL)技術に基づいており、優れた色彩とコントラストを提供します。
OLEDの動作原理
- 有機物: OLEDは薄い有機物層を含んでおり、この層は電流によって光を放出します。有機化合物は電気的刺激を受けると発光する特性があります。
- 電極: OLEDパネルは通常、二つの電極(陽極と陰極)で構成されており、電流が流れると有機物が電子を放出し、この電子と正孔が結びついて光を生成します。
SSD1306
SSD1306はOLEDディスプレイを駆動するためのドライバIC(集積回路)です。
1KBのグラフィックディスプレイ専用RAM(GDDRAM)を内蔵しており、これを使用して表示するビットパターンを保存します。

| 項目 | 説明 |
|---|---|
| メモリ容量 | 1KB(8192ビット) |
| ページ数 | 8ページ(ページ0-7) |
| 縦のライン数 | 128縦のライン(0-127) |
| ビット情報 | 各縦のラインにつき8ビット(ビット0-7) |
| 計算 | 8ページ x 128縦のライン x 8ビット = 8192ビット = 1024バイト(1KB) |
仕様
| 項目 | 説明 |
|---|---|
| 画面サイズ | 0.91インチ、0.96インチ、1.3インチ、2.42インチなど |
| 解像度 | 128x64ピクセルまたは128x32ピクセル |
| ディスプレイタイプ | OLED(有機EL) |
| 色 | モノクロ(ホワイトまたはブルー) |
| インターフェース | I2C(2線式) |
| 電圧 | 3.3V〜5V |
| 消費電力 | 待機電力:約0.1mA、最大電力:約20mA |
活用例
回路構成
| OLEDモジュールピン | Arduino UNO/Nano | Arduino Mega |
|---|---|---|
| VCC | 5Vまたは3.3V | 5Vまたは3.3V |
| GND | GND | GND |
| SCL | A5 | 21 |
| SDA | A4 | 22 |

デバイスアドレス確認
I2Cバスに接続されたデバイスのアドレスを確認するために使用するコードです。
以下の例を実行する前に、まずI2Cスキャナーを実行してモジュールのアドレスを確認してください。
#include <Wire.h>
void setup() {
Serial.begin(9600); // シリアル通信開始
Wire.begin(); // I2Cバス開始
Serial.println("I2Cスキャナー開始...");
}
void loop() {
byte error, address;
int nDevices = 0;
Serial.println("I2Cデバイス検索中...");
for (address = 1; address < 127; address++) {
// I2Cデバイスへの接続を試みる
Wire.beginTransmission(address);
error = Wire.endTransmission();
if (error == 0) {
Serial.print("デバイス発見! アドレス:0x");
if (address < 16) {
Serial.print("0");
}
Serial.print(address, HEX);
Serial.println();
nDevices++;
} else if (error == 4) {
Serial.print("アドレス0x");
Serial.print(address, HEX);
Serial.println("でエラーが発生しました!");
}
}
if (nDevices == 0) {
Serial.println("I2Cデバイスが見つかりませんでした。");
} else {
Serial.println("デバイス検索完了。");
}
delay(5000); // 5秒待機してから再スキャン
}
実行結果

ライブラリ
Adafruit SSD1306ライブラリを使用します。
SSD1306をインストールする際に、必要なAdafruit BusIOおよびAdafruit GFXライブラリも一緒にインストールするために「INSTALL ALL」を押してください。

1. ライブラリの基本提供例
ファイル - サンプル - Adafruit SSD1306 - ssd1306_128x64 i2cをクリックして例を開いてください。
例コード内のAddress部分を、以前にI2Cスキャナーで確認したデバイスのアドレスに変更してください。

実行結果
2. テキスト出力
簡単なテキストを表示する例です。
0.91インチOLEDを使用し、このモジュールの解像度は128 x 32ピクセルであるため、SCREEN_HEIGHTを64から32に変更しました。
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128 // OLED画面の幅
#define SCREEN_HEIGHT 32 // OLED画面の高さ
// OLEDモジュールのI2Cアドレス(通常0x3Dまたは0x3C)
#define OLED_ADDR 0x3C
// Adafruit_SSD1306オブジェクト作成
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
void setup() {
// OLED初期化
display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR);
display.clearDisplay(); // 画面クリア
display.setTextSize(1); // テキストサイズ設定
display.setTextColor(SSD1306_WHITE); // テキスト色設定
display.setCursor(0, 0); // カーソル位置設定
display.println("GONGZIPSA"); // テキスト表示
display.setCursor(0, 10); // カーソル位置設定
display.println("ArduWiki"); // テキスト表示
display.display(); // 画面に出力
}
void loop() {
// ループ内での処理はなし
}
使用される関数の役割は以下の通りです:
| 関数名 | 説明 |
|---|---|
begin()
|
OLEDディスプレイを初期化します。I2Cアドレスと解像度を設定します。 |
clearDisplay()
|
現在のディスプレイ内容をクリアします。 |
setTextSize(size)
|
表示するテキストのサイズを設定します。sizeは倍率を示します(例:1, 2など)。
|
setTextColor(color)
|
テキストの色を設定します。一般的にSSD1306_WHITE、SSD1306_BLACKが使われます。
|
setCursor(x, y)
|
表示するテキストの位置を設定します。xは水平位置、yは垂直位置です。
(0, 0)は左上隅で、 |
| println("表示内容") | 表示する内容を設定します。 |
display()
|
バッファに保存された内容をOLEDディスプレイに表示します。 |
実行結果

3. 簡単な図形出力
四角形、三角形、円などの簡単な図形を表示する例です。
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_ADDR 0x3C
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
void setup() {
display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR);
display.clearDisplay(); // 画面初期化
display.drawTriangle(10, 10, 40, 30, 10, 30, WHITE); // 小さな三角形
display.drawRect(50, 10, 30, 20, WHITE); // 四角形
display.fillRect(90, 10, 30, 20, WHITE); // 塗りつぶし四角形
display.drawCircle(25, 50, 13, WHITE); // 円
display.drawRoundRect(50, 40, 30, 20, 7, WHITE); // 丸角四角形
display.fillRoundRect(90, 40, 30, 20, 7, WHITE); // 塗りつぶし丸角四角形
display.display();
}
void loop() {
}
図形関連の関数は以下の通りです:
| 関数名 | 説明 |
|---|---|
drawLine(x1, y1, x2, y2, color)
|
2点を結ぶ線を描画します。 |
drawRect(x, y, width, height, color)
|
空の四角形を描きます。 |
fillRect(x, y, width, height, color)
|
塗りつぶし四角形を描きます。 |
drawCircle(x, y, radius, color)
|
空の円を描きます。 |
fillCircle(x, y, radius, color)
|
塗りつぶし円を描きます。 |
drawTriangle(x1, y1, x2, y2, x3, y3, color)
|
三角形を描きます。 |
drawRoundRect(x, y, width, height, radius, color)
|
丸角の四角形を描きます。 |
fillRoundRect(x, y, width, height, radius, color)
|
塗りつぶし丸角四角形を描きます。 |
実行結果

4. ASCIIコード出力
ASCIIコード表に対応する1〜8番の文字を表示する例です。
より多くの文字を表示するにはASCIIコード表を参照してください。
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_ADDR 0x3C
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
void setup() {
display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR);
display.clearDisplay(); // 画面初期化
// テキスト出力設定
display.setTextSize(1); // テキストサイズ設定
display.setTextColor(WHITE); // テキスト色設定
display.setCursor(0, 0); // カーソル位置設定
// ASCIIコード文字出力
display.println("ASCII Code Print");
// ASCIIコード文字出力
for (char c = 1; c < 9; c++) { // ASCIIコード1〜8
display.print(c); // 各文字を表示
display.print(" "); // 空白追加
}
display.display(); // バッファ内容を画面に表示
}
void loop() {
// ループ内での処理はなし
}
実行結果

5. ビットマップ画像出力
画像をバイト配列に変換し、OLEDで表示する例です。
画像をバイト配列に変換する方法
1. image2cpp (javl.github.io) にアクセスします。
2. 画像をアップロード
左側の「Select image」から画像を選択してアップロードします。

3. 画像設定
キャンバスサイズに画像のサイズを入力し、プレビューを確認します。画像が大きすぎてサイズ調整がうまくいかない場合、プレビューに正しく画像が表示されません。

4. 出力
「Code output format」を「Arduino Code」に設定し、「Generate code」をクリックすると、下に配列が表示されます。
出力された配列をコピーし、例のコードで使用してください。

例コード
drawBitmap(x, y, bitmap, width, height, color) 関数を使用して、指定した位置にビットマップ画像を描画します。
color はホワイトに設定されており、画像は白色で表示されます。
12行目のconst unsigned char ~ 部分を、先ほど作成したバイト配列に置き換えて使用してください。
例画像(64 x 64サイズ)とサイズが異なる場合、56行目のdrawBitmap関数のx、yカーソル位置、width、heightの写真サイズを変更する必要があります。
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_ADDR 0x3C
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
// GONGZIPSA ロゴ
const unsigned char GONGZIPSA [] PROGMEM = {
0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x7f, 0xff, 0xff,
...
};
void setup() {
display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR);
display.clearDisplay(); // 画面初期化
}
void loop() {
display.clearDisplay(); // 画面クリア
// 64x64ビットマップ画像描画
display.drawBitmap(32, 0, GONGZIPSA, 64, 64, WHITE); // (x, y, bitmap, width, height, color)
display.display(); // バッファ内容を画面に表示
}
実行結果
フリッカー現象のため、撮影時に画像が切れて表示されることがありますが、実際には丸いロゴがきれいに表示されます。

