ArduinoでOLEDディスプレイに色々表示する(XIAO ESP32C6+SSD1306版)


参考
----


https://qiita.com/jakalada/items/793a6cf5ff2796db4e86

いろいろ、注意
----

- 過去の記事を読みましょう。

目的
----

現在風(20250424)のXIAO ESP32C6+SSD1306バージョン

デフォルトのI2Cを使う場合は、「Wire.begin」は、不要?



テキストを描画
----

![o_coq880.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/36f528a9-8245-4af0-b893-adea70bf5adc.jpeg)



```c++


//OLED_SSD1331_ex1_XIAO_ESP32C6


//ヘッダーファイル
#include <Arduino.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>


//定義
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);


//初期化
void setup() {

  //I2Cの初期化
  Wire.begin(D9,D10); //XIAO ESP32C6+SSD1306
  //Wire.begin(D10,D9); //XIAO ESP32C6+GROVE

  // I2Cアドレスは使用するディスプレイに合わせて変更する
  display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS);

}//setup


//メインループ
void loop() {

  // 画面表示をクリア
  display.clearDisplay();

  // テキストサイズを設定
  display.setTextSize(3);
  // テキスト色を設定
  display.setTextColor(WHITE);
  // テキストの開始位置を設定
  display.setCursor(0, 10);

  // 1行目に"Hello"を表示
  display.println("Hello");
  // 2行目に"World!"を表示
  display.println("World!");

  // 描画バッファの内容を画面に表示
  display.display();

  delay(1000); //1秒待つ

}//loop






```


点を描画
----

![o_coq881.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/21c2385d-fc6e-4e3a-907c-196a8f655c6c.jpeg)



```c++


//OLED_SSD1331_ex2_XIAO_ESP32C6


//ヘッダーファイル
#include <Arduino.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>


//定義
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);


//初期化
void setup() {

  //I2Cの初期化
  Wire.begin(D9,D10); //XIAO ESP32C6+SSD1306
  //Wire.begin(D10,D9); //XIAO ESP32C6+GROVE

  // I2Cアドレスは使用するディスプレイに合わせて変更する
  display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS);

}//setup


//メインループ
void loop() {

  // 画面表示をクリア
  display.clearDisplay();

  // 画面の左上に点を描画
  // display.drawPixel(座標x, 座標y, 点の色);
  display.drawPixel(10, 10, WHITE);

  // 画面の右上に点を描画
  // display.drawPixel(座標x, 座標y, 点の色);
  display.drawPixel(117, 10, WHITE);

  // 画面の右下に点を描画
  // display.drawPixel(座標x, 座標y, 点の色);
  display.drawPixel(117, 53, WHITE);

  // 画面の左下に点を描画
  // display.drawPixel(座標x, 座標y, 点の色);
  display.drawPixel(10, 53, WHITE);

  // 描画バッファの内容を画面に表示
  display.display();

  delay(1000); //1秒待つ

}//loop






```

線を描画
----

![o_coq883.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/93869e20-7d0c-4b40-bf56-1389472fcfff.jpeg)




```c++


//OLED_SSD1331_ex3_XIAO_ESP32C6


//ヘッダーファイル
#include <Arduino.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>


//定義
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);


//初期化
void setup() {

  //I2Cの初期化
  Wire.begin(D9,D10); //XIAO ESP32C6+SSD1306
  //Wire.begin(D10,D9); //XIAO ESP32C6+GROVE

  // I2Cアドレスは使用するディスプレイに合わせて変更する
  display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS);

}//setup


//メインループ
void loop() {

  // 画面表示をクリア
  display.clearDisplay();

  // 画面の左上から右下に線を描画
  // display.drawLine(始点x, 始点y, 終点x, 終点y, 線の色);
  display.drawLine(0, 0, 127, 63, WHITE);

  // 画面の右上から左下に線を描画
  // display.drawLine(始点x, 始点y, 終点x, 終点y, 線の色);
  display.drawLine(127, 0, 0, 63, WHITE);

  // 描画バッファの内容を画面に表示
  display.display();

  delay(1000); //1秒待つ

}//loop






```


長方形を描画
----

![o_coq882.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/f718d44c-209b-4c8d-894a-1af9e4f98622.jpeg)



```c++





//OLED_SSD1331_ex4_XIAO_ESP32C6


//ヘッダーファイル
#include <Arduino.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>


//定義
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);


//初期化
void setup() {

  //I2Cの初期化
  Wire.begin(D9,D10); //XIAO ESP32C6+SSD1306
  //Wire.begin(D10,D9); //XIAO ESP32C6+GROVE

  // I2Cアドレスは使用するディスプレイに合わせて変更する
  display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS);

}//setup


//メインループ
void loop() {

  // 画面表示をクリア
  display.clearDisplay();

  // 画面の左側に長方形(塗りつぶしなし)を描画
  // display.drawRect(左上x, 左上y, 幅, 高さ, 線の色)
  display.drawRect(10, 10, 44, 44, WHITE);

  // 画面の右側に長方形(塗りつぶしあり)を描画
  // display.fillRect(左上x, 左上y, 幅, 高さ, 線の色)
  display.fillRect(74, 10, 44, 44, WHITE);

  // 描画バッファの内容を画面に表示
  display.display();

  delay(1000); //1秒待つ

}//loop






```


角丸の長方形を描画
----

![o_coq884.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/0d737388-7c9e-40f4-881e-8ed36a256864.jpeg)



```c++


//OLED_SSD1331_ex5_XIAO_ESP32C6


//ヘッダーファイル
#include <Arduino.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>


//定義
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);


//初期化
void setup() {

  //I2Cの初期化
  Wire.begin(D9,D10); //XIAO ESP32C6+SSD1306
  //Wire.begin(D10,D9); //XIAO ESP32C6+GROVE

  // I2Cアドレスは使用するディスプレイに合わせて変更する
  display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS);

}//setup


//メインループ
void loop() {

  // 画面表示をクリア
  display.clearDisplay();

  // 画面の左側に長方形(塗りつぶしなし)を描画
  // display.drawRoundRect(左上x, 左上y, 幅, 高さ, r, 線の色)
  display.drawRoundRect(10, 10, 44, 44, 6, WHITE);

  // 画面の右側に長方形(塗りつぶしあり)を描画
  // display.fillRoundRect(左上x, 左上y, 幅, 高さ, r, 線の色)
  display.fillRoundRect(74, 10, 44, 44, 6, WHITE);

  // 描画バッファの内容を画面に表示
  display.display();

  delay(1000); //1秒待つ

}//loop




```

円を描画
----

![o_coq885.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/fd236292-5724-4aa7-a911-3e536b3cc544.jpeg)



```c++


//OLED_SSD1331_ex6_XIAO_ESP32C6


//ヘッダーファイル
#include <Arduino.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>


//定義
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);


//初期化
void setup() {

  //I2Cの初期化
  Wire.begin(D9,D10); //XIAO ESP32C6+SSD1306
  //Wire.begin(D10,D9); //XIAO ESP32C6+GROVE

  // I2Cアドレスは使用するディスプレイに合わせて変更する
  display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS);

}//setup


//メインループ
void loop() {

  // 画面表示をクリア
  display.clearDisplay();

  // 画面の左側に円(塗りつぶしなし)を描画
  // display.drawCircle(円の中心x, 円の中心y, 円の半径, 線の色)
  display.drawCircle(32, 32, 30, WHITE);

  // 画面の右側に円(塗りつぶしあり)を描画
  // display.fillCircle(円の中心x, 円の中心y, 円の半径, 線の色)
  display.fillCircle(96, 32, 30, WHITE);

  // 描画バッファの内容を画面に表示
  display.display();

  delay(1000); //1秒待つ

}//loop






```



三角形を描画
----

![o_coq886.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/acc6b348-660a-4fad-8315-094b13cea3dd.jpeg)



```c++


//OLED_SSD1331_ex7_XIAO_ESP32C6


//ヘッダーファイル
#include <Arduino.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>


//定義
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);


//初期化
void setup() {

  //I2Cの初期化
  Wire.begin(D9,D10); //XIAO ESP32C6+SSD1306
  //Wire.begin(D10,D9); //XIAO ESP32C6+GROVE

  // I2Cアドレスは使用するディスプレイに合わせて変更する
  display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS);

}//setup


//メインループ
void loop() {

  // 画面表示をクリア
  display.clearDisplay();

  // 画面の左側に三角形(塗りつぶしなし)を描画
  // display.drawTriangle(x0, y0, x1, y1, x2, y2, 線の色)
  display.drawTriangle(32, 25, 57, 50, 7, 50, WHITE);

  // 画面の右側に三角形(塗りつぶしあり)を描画
  // display.fillTriangle(x0, y0, x1, y1, x2, y2, 線の色)
  display.fillTriangle(96, 25, 121, 50, 71, 50, WHITE);

  // 描画バッファの内容を画面に表示
  display.display();

  delay(1000); //1秒待つ

}//loop






```



描画を反転
----


![o_coq887.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/d5e636e1-9c06-44a1-8c0b-c69f65c1c8c9.jpeg)


![o_coq888.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/8ac36677-8934-4671-aa8c-191d5b911244.jpeg)



```c++


//OLED_SSD1331_ex8_XIAO_ESP32C6


//ヘッダーファイル
#include <Arduino.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>


//定義
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);


//初期化
void setup() {

  //I2Cの初期化
  Wire.begin(D9,D10); //XIAO ESP32C6+SSD1306
  //Wire.begin(D10,D9); //XIAO ESP32C6+GROVE

  // I2Cアドレスは使用するディスプレイに合わせて変更する
  display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS);

}//setup


//メインループ
void loop() {

  
  // 画面表示をクリア
  display.clearDisplay();

  // 画面の中心に長方形(塗りつぶしあり)を描画
  display.fillRect(10, 10, 108, 44, WHITE);
  
  // 1秒間隔で画面全体を点滅させる
  for (int i = 0; i < 10; i++) {
    // 描画バッファを反転
    if (i % 2 == 0) {
       display.invertDisplay(true);
    } else {
       display.invertDisplay(false);
    }

    // 描画バッファの内容を画面に表示
    display.display();
    delay(1000);
  }


  delay(1000); //1秒待つ

}//loop



```