Webラジオ ２号機（9）Ticker表示

前回、Seeed ESP32S3のWebラジオでアルバムアートを表示出来るようになった。

『Webラジオ ２号機（8）アルバムアート』

しかし、ストリームタイトルが長いと、文字が小さくして全体を表示しようとするのだが、おじさんの目では見えなくなってしまう。

LCDを大きな物にしようかとも考えてはいるが、それでも小さい文字は読みにくいのである。

そこで、文字数多い場合はTicker表示（ニュース等が右から左へ流れる表示方式）にしてみることにした。

そこで早速、Google Geminiにお願いしてサンプルプログラムを書いてもらった。

#include <WiFi.h>

#include <HTTPClient.h>

#include <NetworkClientSecure.h>

#include <ArduinoJson.h>

 

extern LGFX tft;

LGFX_Sprite sprArtist(&tft); // アーティスト用スプライト

LGFX_Sprite sprTitle(&tft);  // 曲名用スプライト

 

// スクロール用変数

int offsetArtist = 0;

int offsetTitle = 0;

String currentArtist = "";

String currentTitle = "";

 

void setupTicker() {

  // スプライトの設定 (幅160, 高さ30程度)

  sprArtist.createSprite(160, 32);

  sprArtist.setFont(&fonts::lgfxJapanGothicP_24);

  sprArtist.setTextColor(TFT_WHITE);

 

  sprTitle.createSprite(160, 32);

  sprTitle.setFont(&fonts::lgfxJapanGothicP_24);

  sprTitle.setTextColor(TFT_CYAN); // 曲名は色を変えるとおしゃれ

}

 

// 個別のティッカー更新関数

void updateTicker(LGFX_Sprite &spr, String text, int &offset, int yPos) {

  int textWidth = spr.textWidth(text);

  spr.clear();

 

  if (textWidth <= 160) {

    // 幅に収まる場合は中央（または左）固定

    spr.drawString(text, 0, 0);

  } else {

    // 幅を超える場合はスクロール

    spr.drawString(text, -offset, 0);

    // テキストが消えきる前に少し余白を入れてループさせる

    offset++;

    if (offset > textWidth + 20) {

      offset = -160; // 右端から再び現れる

    }

  }

  spr.pushSprite(5, yPos); // 画面の左端(x=5)に描画

}

 

void loop() {

  const char* songs[] = {

    "hunter/x - GOLDEN",

    "Sabrina Carpenter - Manchild",

    "Taylor Swift - Opalite"

  };

 

  for (const char* song : songs) {

    // --- 楽曲情報の分離 ---

    String s = String(song);

    int sep = s.indexOf(" - ");

    currentArtist = s.substring(0, sep);

    currentTitle = s.substring(sep + 3);

    // リセット

    offsetArtist = 0;

    offsetTitle = 0;

    tft.fillScreen(TFT_BLACK);

    // アルバムアート取得（前回のロジックを実行）

    displayAlbumArt(s);

 

    // 10秒間ティッカーを回す

    uint32_t startMs = millis();

    while (millis() - startMs < 10000) {

      updateTicker(sprArtist, currentArtist, offsetArtist, 20); // y=20に配置

      updateTicker(sprTitle, currentTitle, offsetTitle, 60);    // y=60に配置

      delay(20); // スクロール速度の調整

    }

  }

}

にゃるほど。

スプライトを用意して、そこに表示テキストを毎回１dotづつ ずらして表示させると、ちらつきなく流れるように表示できる。

これを、ちょっとアレンジして前回のプログラムに組み込んで動かしてみた。

写真では分かりにくいが、20ms毎に1dotづつスムーズに横スクロールしてくれる。

なかなかに良い感じで、何とも「それっぽい」雰囲気を醸し出してくれるのである。

このように表示領域に収まる場合は、スクロールしない。

横スクロールすると見た目は良いが、全体を読みたいと思った時には少し煩わしく感じてしまうことも。

ということで、全体表示モードと、Tickerモードを切り替え出来るようにした。

そのかわり、ほとんど使うことの無かった詳細表示モードは廃止した。

全体表示モード

まぁ、こんなもんぢぁろう。

あと、たまにアルバムアートに関係の無い画像が表示されることが有ったのだが、Google Geminiにお願いして、精度を上げるコードを書いてもらって組み込んだ。

どの程度改善したかは分からないが、しばらく様子を見てみようと思う。

ああ、出来たら良いなと思った事は だいたい実現したような気がする。これで2.4インチ版では最終バージョンになると思う。たぶん。知らんけど・・

今回のコードは以下に入れておきますので、興味のある方はご自由にどうぞ。

SeeedESP32S3_WebRadio_V1_6

-----------------------------

なお、Arduino IDEでコンパイル時の注意点は以前の記事と同様に、ツールメニューから

・USB CDC On BootをEnabledに設定 

　（これをしないとシリアルモニタが動かない）

・Flash ROMサイズを8MBに

・パーテーションを8Mで、3M APP/1.5MB SPIFFSに

・PSRAM：OPI PSRAM　に設定

　PSRAM無しではこのプログラムは動作しない。

・ボードライブラリは3.0.7を使用

　他バージョンでも動作するかもしれないが、3.0.7を推奨

　（最新版の3.3.7でも動作した。）

・ESP32-audioI2S-master ライブラリは3.0.13を使用

　このプログラムでは3.0.13が安定動作　

----------------------------------

「ふ〜ん、まだいじり倒すんぢゃろ？

　それよりおいらをかまってくれていいにゃよ」

もちろん、かまってあげますとも。

------------------------------------------------------------

補足

注1）エンコーダー センターＳＷを押すと、Ch、Vol切り替え。

　　センターSW長押しで、Tickerモード ↔ 全体表示モード切替え

注2）WiFi設定はセンターSWを押しながら電源オンでWiFi設定モードが立ち上がるので、

　　スマホ等からアクセスして設定してください。こちらを参考に。

回路図はこちら

アンプ付きスピーカーに繋ぐことにしたので、モノラルのアンプは取り外した。

画像更新の際に「ジッ」とノイズが載る場合、以下のようにLCDのSCLとSDAに330Ω程度の抵抗を挿入すると低減します。（抵抗値の最適値は配線等で変わるので、現物に合わせて調整してください）SCL、SDAラインをGNDとツイストペアで配線するのもあり。

ブレッドボードでこんな感じ

主な部品

・Seeed Studio XIAO ESP32S3

・PCM5102Aモジュール

・2.4インチLCD （240ｘ320）（ST7789）(Ali-Expressあたりで売っている）

・Push SW付きロータリエンコーダー　（Ali-Expressで安く売ってるのでOK） 

その他

　ここにアクセスすると、世界中のWebラジオステーション情報が手に入る。

　お好みのステーションを探して組み込んで欲しい。