はじめに
この記事ではESP32-C3 SuperMiniでST7735 (128×128)ディスプレイを使用して、簡単な表示試験を行う。
Arduino IDEでESP32-C3 SuperMiniに書き込む方法は以下の記事を確認
使用したもの
- Arduino IDE
- ESP32-C3 SuperMini
- ST7735 TFTディスプレイ（128×128）
- ライブラリ
- Adafruit_GFX
- Adafruit_ST7735
fig.1 ESP32-C3 SuperMini
fig.2 ST7735 TFTディスプレイ（128×128）
ライブラリ導入
- Arduino IDE を起動
- メニューから ツール → ライブラリを管理 を開く
- 検索ボックスに
Adafruit GFXと入力 - Adafruit GFX Library をインストール
- 次に検索ボックスに
ST7735と入力 - Adafruit ST7735 and ST7789 Library をインストール
インストールが完了したら、Arduino IDE を一度再起動しておくと安心。
接続例
| ST7735 | ESP32-C3 SuperMini |
|---|---|
| VCC | 3.3V |
| GND | GND |
| SCLK | GPIO 4 |
| MOSI | GPIO 6 |
| DC | GPIO 2 |
| CS | GPIO 7 |
| BL | VCC |
| RST | VCC |
BL（バックライト）
→ 常時点灯でOKな場合はVCC直結で問題なし
RST（リセット）
→ ソフトリセットしない設計なら VCC 直結でOK
fig.3 接続図
実装コード１
#include <Arduino.h> // Arduino 標準ヘッダ
#include <SPI.h> // SPI 通信用ライブラリ
#include <Adafruit_GFX.h> // Adafruit の描画基盤ライブラリ
#include <Adafruit_ST7735.h> // ST7735 用ディスプレイライブラリ
// ==================================================
// 配線設定（ESP32-C3 SuperMini 想定）
//
// TFT 側の BL (バックライト) と RST は
// VCC（3.3V）に直結している前提
// ==================================================
#define TFT_SCLK 4 // SPI クロック（SCK）
#define TFT_MOSI 6 // SPI データ（SDA / MOSI）
#define TFT_DC 2 // データ・コマンド切り替えピン
#define TFT_CS 7 // チップセレクト
// RST ピンを使わないため第4引数は -1
Adafruit_ST7735 tft(&SPI, TFT_CS, TFT_DC, -1);
// ==================================================
// 12色のカラーテーブル（RGB565形式）
//
// ST77XX_〜 は Adafruit ライブラリで定義済みの色
// それ以外は 16bit の RGB565 生値
// ==================================================
const uint16_t colors[12] = {
ST77XX_BLACK, // 0: 黒
ST77XX_RED, // 1: 赤
ST77XX_YELLOW, // 2: 黄
ST77XX_GREEN, // 3: 緑
ST77XX_CYAN, // 4: シアン
ST77XX_BLUE, // 5: 青
ST77XX_MAGENTA, // 6: マゼンタ
ST77XX_WHITE, // 7: 白
0xFD20, // 8: オレンジ系
0xF81F, // 9: ピンク系
0x8410, // 10: グレー
0xA145 // 11: 茶色系
};
// ==================================================
// 初期化処理
// ==================================================
void setup() {
// USB シリアルが安定するまで少し待つ
delay(2000);
Serial.begin(115200);
// SPI を開始
// MISO は使わないため -1
SPI.begin(TFT_SCLK, -1, TFT_MOSI, TFT_CS);
// ------------------------------------------------
// ディスプレイ初期化
// ------------------------------------------------
tft.initR(INITR_GREENTAB); // ST7735 の初期化（モジュール依存）
tft.setSPISpeed(27000000); // SPI 通信速度（安定しない場合は下げる）
tft.setRotation(0); // 表示の向き（0〜3）
tft.invertDisplay(true); // 色反転（不要なら false）
// 起動時は黒画面にする
tft.fillScreen(ST77XX_BLACK);
Serial.println("TFT color cycle test start");
}
// ==================================================
// メインループ
// ==================================================
void loop() {
// 登録した 12 色を順番に表示する
for (int i = 0; i < 12; i++) {
// 今回表示する色
uint16_t c = colors[i];
// 画面全体を指定色で塗りつぶす
tft.fillScreen(c);
// シリアルに現在の色インデックスを表示
Serial.print("Color index: ");
Serial.println(i);
// 表示を確認できるように待つ（500ms）
delay(500);
}
}
実行結果１
動画のように、色が順番に切り替われば成功
実装コード２
#include <Arduino.h>
#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
// ==== 配線（ESP32-C3 SuperMini想定）====
// TFT_BL と RST は VCC に直結している前提
#define TFT_SCLK 4 // SCK
#define TFT_MOSI 6 // SDA
#define TFT_DC 2 // DC
#define TFT_CS 7 // CS
// RST を使わないので -1 を指定
Adafruit_ST7735 tft(&SPI, TFT_CS, TFT_DC, -1);
// 表示する文字列
const char* MESSAGE = "Hello";
// 文字ごとに使う色（RGB565）
const uint16_t letterColors[] = {
ST77XX_RED, // 赤
ST77XX_YELLOW, // 黄
ST77XX_GREEN, // 緑
ST77XX_CYAN, // 水色
ST77XX_BLUE, // 青
ST77XX_MAGENTA, // マゼンタ
0xFD20, // オレンジっぽい
0xF81F, // ピンクっぽい
0x8410, // グレー
0xA145 // 茶色っぽい
};
const int NUM_COLORS = sizeof(letterColors) / sizeof(letterColors[0]);
void setup() {
delay(2000); // USBシリアル待ち（お好み）
Serial.begin(115200);
// ===== SPI開始 =====
// MISO は使わないので -1
SPI.begin(TFT_SCLK, -1, TFT_MOSI, TFT_CS);
// ===== TFT初期化 =====
tft.initR(INITR_GREENTAB); // モジュールによっては BLACKTAB など
tft.setSPISpeed(27000000); // 速すぎる場合は少し下げる
tft.setRotation(0); // 向きはお好みで 0〜3
tft.invertDisplay(true); // 反転した方が見やすい場合だけ true
tft.fillScreen(ST77XX_BLACK);
// ====== ここで Hello world を中央に描画 ======
const int textSize = 3; // 文字サイズ
tft.setTextSize(textSize);
const int charWidth = 6 * textSize; // Adafruit_GFX の 1文字幅(5px+スペース1px) × textSize
const int charHeight = 8 * textSize; // 1文字の高さ
const int len = strlen(MESSAGE); // 文字数
const int textWidth = charWidth * len; // 全体の横幅
// 画面サイズを取得（回転を考慮した width()/height() を使う）
const int screenW = tft.width();
const int screenH = tft.height();
// 中央に配置するための開始座標(X,Y)を計算
int startX = (screenW - textWidth) / 2;
int startY = (screenH - charHeight) / 2;
Serial.print("screenW=");
Serial.print(screenW);
Serial.print(", textWidth=");
Serial.println(textWidth);
Serial.print("startX=");
Serial.print(startX);
Serial.print(", startY=");
Serial.println(startY);
// 画面クリア
tft.fillScreen(ST77XX_BLACK);
// ===== 1文字ずつ色を変えて描画 =====
for (int i = 0; i < len; i++) {
char ch = MESSAGE[i];
// i番目の文字のX座標
int x = startX + i * charWidth;
int y = startY;
// 色をローテーション
uint16_t col = letterColors[i % NUM_COLORS];
tft.setTextColor(col);
// カーソルをセットして1文字だけ描画
tft.setCursor(x, y);
tft.print(ch);
}
Serial.println("Draw Hello world (centered, per-letter color) done.");
}
void loop() {
// 今回は静止表示なので何もしない
}
実行結果２
画像のように、各色でHelloが表示されれば成功
最後に
現在、ディスプレイを使用したミャクミャクの電子工作動画を制作しています。
完成次第、ここに YouTubeリンクを追記する予定です。