YouTubeで見る

ESP32-S3 RGB LEDマトリックスプロジェクト 2 - スクロールテキスト

プロジェクト2 - ESP32-S3 RGB LEDマトリックス上のテキストスクロール

このプロジェクトでは、ESP32-S3 RGB LEDマトリックスを小さなテキストバナーに変えます。短いメッセージ（例えばRobojax8×8 RGBディスプレイ上でテキストがスクロールし、コード内で直接テキスト、色、明るさ、スクロール速度を簡単に変更できます。これは、シンプルな通知、名札、または小さなステータスメッセージに非常に便利です。

このシリーズの6つのプロジェクトはすべて、1本のYouTube動画でデモと説明がなされています。同じ動画がこのページに埋め込まれているので、テキストスクロールがリアルタイムでどのように見えるか、各設定がアニメーションにどのように影響するかを正確に見ることができます。このプロジェクトの完全なコードは記事の下に自動的に読み込まれ、コードセクションにリストされた提携ストアからESP32-S3 RGB LEDマトリックスモジュールを購入することができます。

このプロジェクトは、プロジェクト1の基本（移動するドットと色の制御）を基にし、NeoMatrixライブラリを使用してテキストのレンダリングとスクロールを追加します。

ESP32-S3 RGB LEDマトリックスモジュールの概要

ハードウェアは6つのプロジェクトすべてで同じです：Wi-FiとBluetoothを搭載したESP32-S3マイクロコントローラー、8×8 RGB LEDマトリックス（64個のアドレス指定可能なRGB LED）、QMI8658C加速度センサー、USBポート、およびアクセス可能なIOピンです。：contentReference[oaicite:0]{index=0}

• ESP32-S3- 高度なプロジェクト向けのWi-Fi/BLEを搭載したメインCPU。
• 8×8 RGBマトリックス- アイコン、テキスト、アニメーション用の64 RGB LED。
• QMI8658C加速度計- 後のプロジェクトで傾きとオリエンテーションに使用されました。
• USBポート- Arduino IDEを介して電力とプログラミングに使用されます。
• 露出ピン- 通常のESP32と同様に他のIOのためにボードを使用できるようにします。
• ブート / リセットボタン- ファームウェアのアップロードとスケッチの再起動用。

プロジェクト2では、主にマトリックスとNeoMatrixテキスト機能に焦点を当てています。加速度センサーはまだ使用されていませんが、同じボードがその後のすべてのインタラクションとゲームプロジェクトを処理します。

動画で取り上げられたプロジェクト（タイムスタンプ）

この記事に関連する動画は、全6つのプロジェクトを紹介しています。おおよそのタイムスタンプは次のとおりです：

• 00:00- はじめに
• 02:01- ESP32ボードのインストール
• 03:32- ライブラリのインストール
• 05:32- プロジェクト 1: 移動する点
• 11:11- プロジェクト2: テキストスクロール
• 12:59- プロジェクト3：HTTPテキスト
• 16:41- プロジェクト4: チルトドット
• 18:55- プロジェクト5: アローアップ
• 20:02- プロジェクト6: ターゲットゲーム

この記事を読みながら、ビデオを見ることをお勧めします。LEDマトリックス上でテキストがリアルタイムでスクロールする様子が示され、Arduino IDEのすべてのステップを説明します。

Arduino IDEでESP32ボードをインストールする

テキストスクロールコードを実行する前に、Arduino IDEにESP32サポートがインストールされていることを確認してください。

1. 開くFile > PreferencesESP32 ボードの URL を「追加のボードマネージャーの URL」に追加します。
2. 行くTools > Board > Boards Manager…検索するESP32、公式のESP32パッケージをインストールします。
3. ESP32-S3 RGBマトリックスボードを選択してくださいTools > Board.
4. USB経由でモジュールを接続し、正しいCOM/シリアルポートを選択してください。Tools > Port.

ボードタイプやポートが正しくない場合、スケッチはアップロードされません。

NeoMatrixと必要なライブラリのインストール

テキストスクロールはAdafruit NeoMatrixとその依存関係を使用して実装されています。ビデオでは、ライブラリマネージャーを介してインストールされています。

必要なもの：

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

1. 開くSketch > Include Library > Manage Libraries….
2. 検索するAdafruit NeoMatrixクリックしてくださいインストール.
3. 促されたら、インストールを許可してください。Adafruit GFXとAdafruit NeoPixel依存関係として。

インストールが成功すると、以下にサンプルスケッチが表示されるはずです。File > Examples > Adafruit NeoMatrix無しFile > Examples > Adafruit NeoPixel.

プロジェクト 2 - コード設定 (テキストスクロール)

この記事の下には、ウェブサイト上で自動的に全テキストのスクロールスケッチが読み込まれます。ここでは、編集したいと思われる設定値のみを中心に説明します：ピン、マトリックスサイズ、明るさ、テキスト文字列、色、スクロール速度、オプションの方向。

以下のスニペットはすべて、スケッチの冒頭にある設定セクションから取られており、主要なロジックに手を加えることなく、動作をすぐに調整できます。

マトリックスピンとサイズ

プロジェクト1と同様に、RGBマトリックスはGPIO 14に接続されており、64個のLED（8×8）を含んでいます。これらの2行があなたのモジュールと一致していることを確認してください。

 // Pin connected to 8×8 RGB matrix 
const int MATRIX_PIN = 14; // must be 14 on this module // Matrix size (width and height)
 const int MATRIX_WIDTH = 8; 
const int MATRIX_HEIGHT = 8; 

NeoMatrixライブラリから例をコピーする場合、異なるピンやサイズを使用している可能性があります。常にこれに合わせて変更してください。

テキストの明るさ

明るさは通常、0から255の範囲の値で制御されます。0はオフ、255は最大の明るさを示します。中程度の値で十分なことが多いです：

// Overall matrix brightness (0–255) 
uint8_t matrixBrightness = 40; // comfortable indoor brightness // In 
setup(): 
matrix.setBrightness(matrixBrightness); 

明るい環境でパネルを使用する場合や短時間使用する場合は、この値を増やすことができますが、ディスプレイに近い場合はあまり高くしないようにしてください。

スクロールするテキスト

実際のメッセージは文字列として保存されています。動画では、例のテキストがRobojax好きな短いラベルやメッセージに変更できます。

 // Text to scroll on the 8×8 matrix const char scrollText[] = "Robojax";
 // change this to your message 

これは8×8のマトリックスであることを考慮してくださいので、非常に長いメッセージはスクロールするのに時間がかかり、読みづらくなる可能性があります。

テキストの色（RGB値）

スクロールテキストの色は、赤、緑、青の成分（0-255）によって設定されます。例えば、純粋な赤は(255, 0, 0)純粋な緑は(0, 255, 0)、そして純粋な青は(0, 0, 255)スケッチには次のようなものが表示されます:

 // Text color (R, G, B) uint8_t textRed = 255; // red component uint8_t textGreen = 0; // green component uint8_t textBlue = 0; // blue component 

色を変更するには：

• 黄色:textRed = 255; textGreen = 255; textBlue = 0;
• シアンtextRed = 0; textGreen = 255; textBlue = 255;
• ホワイト:textRed = 255; textGreen = 255; textBlue = 255;

そのビデオでは、オンラインカラーピッカーを使用してRGB値を見つけ、それをコードに入力する方法も示されています。:contentReference[oaicite:1]{index=1}

スクロール速度（フレーム間の遅延）

スクロール速度は、各更新ステップ間の遅延値（ミリ秒単位）によって制御されます。値が小さいほどテキストは速く動き、大きいほど遅くなります。スケッチには次のような変数があるはずです：

// Delay between scroll steps (in milliseconds) int scrollDelayMs = 50; 
// smaller = faster, larger = slower 

例:

• scrollDelayMs = 20;→ 高速スクロール。
• scrollDelayMs = 50;→ 中速（ビデオに似ています）。
• scrollDelayMs = 100;または、遅くて読みやすいスクロール。

内部でloop()この値は、〜に使用されますdelay(scrollDelayMs);テキスト位置の再描画後に呼び出す。

スクロール方向（オプション）

「基本テキストスクロール」プロジェクトでは通常左にスクロールしますが、後で他の方向（左、右、上、下）を試すことができるように、象徴的な方向変数を定義することが有用です。

一般的なパターンの一つは：

 // Scroll direction selector // 0 = left, 1 = right, 2 = up, 3 = down 
int scrollDirection = 0; // default: scroll to the left 

メインループは次にチェックします。scrollDirection選択した方向にテキストを移動します。プロジェクト2では、それをそのままにしておくことができます。0（左側）ですが、スケッチを後で拡張する場合は、次のような条件を追加できます：

 if (scrollDirection == 0) { 
// move text left 
} else if (scrollDirection == 1) { 
// move text right 
} else if (scrollDirection == 2) { 
// move text up
 } else if (scrollDirection == 3) { 
// move text down 
}
 

この記事では設定についてのみ記録します。完全な実装は、記事の下に読み込まれているコードの一部です。

要約

プロジェクト2は、あなたのESP32-S3 RGB LEDマトリックスをシンプルでありながら目を引くテキストディスプレイに変えます。コードの先頭にあるいくつかの変数を編集するだけで、すぐに変更できます：

• どのメッセージが表示されますか？scrollText).
• テキストの色textRed,textGreen,textBlue).
• マトリックスの明るさ (matrixBrightness).
• スクロールの速度scrollDelayMs).
• スクロールの方向scrollDirection、使用することを選択した場合)。

この記事の下にこのプロジェクトの完全なスケッチが掲載されています（ウェブサイトによって自動的に読み込まれます）。詳細なステップバイステップの設定方法や、実際に動作しているスクロールテキストのデモを見たい場合は、ビデオの対応するセクションを必ずチェックしてください。このプロジェクトが気に入ったら、自分で作成するために、コードの下に記載されたアフィリエイトリンクからESP32-S3 RGB LEDマトリックスモジュールを購入することもできます。

画像

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3-Mtrix - Alway Up

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3-Mtrix - Alway Up

/*
 * プロジェクト2: テキストスクロール - ESP32-S3 RGB LEDマトリックス (Waveshare)
 * 
 * このスケッチは8x8マトリックス上にスクロールテキストを表示します
 * 
 * ▶️ ビデオチュートリアル:
 * https://youtu.be/JKLuYrRcLMI
 * 
 * 📚⬇️ リソースとコードページ:
 * https://robojax.com/RJT829
 * 
 * QMI8658_RGB_2
 */
#include <Arduino.h>
#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>
#include <Adafruit_NeoPixel.h>

 // -------- LEDマトリックスセットアップ --------
#define MATRIX_PIN    14
#define MATRIX_WIDTH  8
#define MATRIX_HEIGHT 8

Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(
  MATRIX_WIDTH, MATRIX_HEIGHT, MATRIX_PIN,
  NEO_MATRIX_TOP + NEO_MATRIX_LEFT +
  NEO_MATRIX_ROWS + NEO_MATRIX_PROGRESSIVE,
  NEO_RGB + NEO_KHZ800
);

 // =========================
 // ユーザー設定
 // =========================

 // スクロールするテキスト
const char* MESSAGE = "ROBOJAX ";

 // 明るさ (0-255)
uint8_t BRIGHTNESS = 10;

 // スクロール速度（ステップ間のミリ秒）
 // 小さいほど速い
uint16_t SCROLL_DELAY = 80;

 // スクロール方向
enum ScrollDir {
  SCROLL_LEFT,
  SCROLL_RIGHT,
  SCROLL_UP,
  SCROLL_DOWN
};

 // これを方向を設定するように変更してください。
ScrollDir DIRECTION = SCROLL_LEFT;

 // テキストカラー（ここにRGBを設定）
uint8_t COLOR_R = 255;
uint8_t COLOR_G = 0;
uint8_t COLOR_B = 0;

 // =========================
 // 内部状態
 // =========================
uint16_t textColor;
int16_t posX, posY;
int16_t textWidth, textHeight;
uint32_t lastStepTime = 0;

 // デフォルトの5x7フォントのテキストサイズをピクセルで計算する
void computeTextSize() {
  int16_t x1, y1;
  uint16_t w, h;
  matrix.getTextBounds((char*)MESSAGE, 0, 0, &x1, &y1, &w, &h);
  textWidth  = (int16_t)w;
  textHeight = (int16_t)h;
}

 // 方向に基づいて初期位置を設定する
void resetScrollPosition() {
  switch (DIRECTION) {
    case SCROLL_LEFT:
 // 右端のすぐ横から始める
      posX = matrix.width();
      posY = 0; // 8x8の最上部の行
      break;

    case SCROLL_RIGHT:
 // 左端のすぐ外で始める
      posX = -textWidth;
      posY = 0;
      break;

    case SCROLL_UP:
      posX = 0;
      posY = matrix.height(); // 下の下から始める
      break;

    case SCROLL_DOWN:
      posX = 0;
      posY = -textHeight; // 上部から始める
      break;
  }
}

 // 1つのスクロールステップ
void stepScroll() {
 // 位置を移動する
  switch (DIRECTION) {
    case SCROLL_LEFT:
      posX--;
      if (posX < -textWidth) {
        posX = matrix.width();
      }
      break;

    case SCROLL_RIGHT:
      posX++;
      if (posX > matrix.width()) {
        posX = -textWidth;
      }
      break;

    case SCROLL_UP:
      posY--;
      if (posY < -textHeight) {
        posY = matrix.height();
      }
      break;

    case SCROLL_DOWN:
      posY++;
      if (posY > matrix.height()) {
        posY = -textHeight;
      }
      break;
  }

 // フレームを描く
  matrix.fillScreen(0);
  matrix.setCursor(posX, posY);
  matrix.print(MESSAGE);
  matrix.show();
}

void setup() {
  matrix.begin();
  matrix.setBrightness(BRIGHTNESS);
  matrix.setTextWrap(false); // 自動ラッピングなし
  matrix.setTextSize(1); // デフォルト5x7フォント
  textColor = matrix.Color(COLOR_R, COLOR_G, COLOR_B);
  matrix.setTextColor(textColor);

  computeTextSize();
  resetScrollPosition();

  matrix.fillScreen(0);
  matrix.show();
}

void loop() {
  uint32_t now = millis();
  if (now - lastStepTime >= SCROLL_DELAY) {
    lastStepTime = now;
    stepScroll();
  }
}