Retro style WebRadio

レトロスタイルのWebRadio　　　　　　　　　　　　　　　　2023.09.28

レトロなカセットテープとオープンカセットテープを表示。
懐かしき カセットテープリールの回転と
TEAC Open Reel Cassette Tapeの回転を再現してみました。
そして アップル好きには 懐かしき Apple Cassette を。

Cassette Tape

Open Reel Cassette Tape

 

---

.
操作：
1. Volume -,+：Audio出力を増減。
2. Station -10,+10：Stationを-10,+10ステップで増減。
3. Station   -1,+1：Stationを1ステップ増減。
4. BackColor Change：Color Pickerが表示され色を選択します。
5. Invert on/off：Colorを反転。
6. Brightness -,+：明るさを増減。
7. OpenTape Change：Gold / Blue の種類を変更。
8. Music on/off：Music動画の表示を on/off。
9. Wave on/off：Wave動画の表示を on/off。

受信について：
Station(局)の受信は 使用WiFiの環境や距離、設定等により影響します。
ノイズが出る場合や受信しづらい局もあります。
その場合は WiFiの近くにしたり、WiFi環境の見直しや Stationをリストから削除します。

局について：
Station(局)は 受信できない時や廃止する場合等があります。
その場合は 削除や新規に登録してみてください。
PCやiPadで受信できる曲があっても、Libraryでは接続できない局は あります。
 

---

.
開発環境：
HARD ：Making a board of MRB3973 ESP32 S3：
_　3.97 inch 800×480 16bit Paralell NT35510 LCD Touch XPT2046
SOFT ：Arduino IDE 2.2.1, esp32 by Espressif Systems 2.0.11
_　　　　Board : “ESP32S3 Dev Module”
_　　　　Partition Scheme : “8M with spiffs (3MB APP/1.5MB SPIFFS)”
.

---

.
Down LOAD：
_　DL後 pdf(_.pdf)を削除し zipを解凍。WiFi SSIDとPASSWORDを設定します。
_　Audio出力は I2S DAC MAX98357AとSpeakerをGPIOに接続します。
_　MAX98357AとSpeakerは無くとも画面は表示します。
_　Flash Memory 使用容量：Sketch uses 84% 等と表示し画像容量を判断できます。

Down LOAD：WebRadio_MRB_Cassett.zip： 3.9″ 800×480 MRB3973 Display：Sketch uses 84%

Down LOAD：WebRadio_MRB_OpenCassett.zip： 3.9″ 800×480 MRB3973 Display：Sketch uses 91%

Down LOAD：WebRadio_MRB_AppleCassett.zip： 3.9″ 800×480 MRB3973 Display：Sketch uses 88%

Down LOAD：WebRadio_M5Stack_OpenTape.zip： 2.0″ 320×240 M5Stack：Sketch uses 84%

Down LOAD：WebRadio_2432S028R_OpenTape.zip： 2.8″ 320×240 ESP32-2432S028R：Sketch uses 77% The LCD is ILI9341. Youtube：Daradici Levente How to make the easiest RETRO STYLE webradio playerwith touchscreen – ESP32-2432S028 – STEP BY STEP
New type of board requires ILI9341_2 Driver.

Down LOAD：WebRadio_3248S035C_OpenTape.zip： 3.5″ 480×320 3ESP32-248S035C：Sketch uses 84%

Down LOAD：WebRadio_MRB3511_OpenTape.zip： 3.5″ 320×480 MRB3511 Display：Sketch uses 50%

 

---

.
画像の基本：Little endian と Big endian について。
-　jpgやpng画像の .c や .h への変換は Little endian と Big endian があります。
-　Big Endian(ビッグ エンディアン), Little Endian(リトル エンディアン) とは
-　数値のメモリーへの格納方法で,
-　数値の上位桁がメモリーの下位にあるような場合に Big endian 。
-　数値の下位桁がメモリーの下位にあるような場合に Little endian と言います。
-　
-　🟢 ESP32 は Big endian を使用するとESP内の変換少なく高速になります。
-　LovyanGFXにおいて
-　Little endian は lcd.setSwapBytes(true);
-　Big　endian は lcd.setSwapBytes(false);　の記述を行う必要があります。
-　Webやアプリでの File to C style array converter は endian 選択機能の
-　あるものが必要となります。
-　ネットの多くの記事は 無意識に Little endian を使用している例が多いです。

---

.
🔲 静止画と動画の作成と表示方法：
開発環境：
_　Arduino IDE 2.2.1。
_　espressif arduino-esp32 2.0.11。
_　Library：ESP32-audioI2S 3.0.0 Feb.10.2023
_　Library：LovyanGFX 1.1.9。
🟩 静止画の作成と表示する方法。🟦 動画の作成と表示する方法。
🟧 画像を回転する方法。　　　　🟪 Open Reel Type Cassette Tapeの作成。
メモ：画像の範囲は静止画、動画共に四角です、表示不要な部分は透明色を使用します。
_　　 透明色の例として説明は「青(RGB 0,0,255)(0x001f)」を使用します。

---

.
🟩 静止画の作成と表示する方法：
_　透明色設定と背景色表示の方法も示します。
_　jpg(or png)画像を .h(or .c) 配列に変換します。

1. カセットテープの画像を入手し画像編集アプリで編集します。
_　周囲や穴を透明色にする為に 例, 青(RGB(0,0,255) : 0x001f) にします。
_　例：16bit RGBの c3.jpg ができます。
_　カセットとボタンの例：青色が透明。背景色が黒の時は黒色になります。
_　　

2.　画像を Binary File 変換：
_　Web の File to C Style array converter に接続し jpg を Hex (0x0000 – 0xFFFF) に変換。
_　入力、設定、出力の方法：入力は c3.jpgとします。
_　2-1. Select a file=[ファイルを選択]し画像を設定します。
_　2-2. Code format=Hex(0x00)。：0x0000 から 0xffff 表示にします。
_　2-3. Pallet mod=16bit RGB。　：16bit RGB (65536色)です。
_　2-4. endianness=Little-endian。：pushImage命令は Little-endian です。
_　　　　　　　　　　　　　　  ：Sprite命令は Big-endian です。
_　　　Little-endian, Big-endian の区別は 理由不明ですが 表示できる設定です。
_　　　Library LovyanGFX内では Little-endian で処理と聞いています。
_　2-5. Data type=unit16_t。：16bitです。
_　2-6. [Convert]。： 16bit Data を出力します。下にResultが表示されます。
_　2-7. [save as file]。 ：名称等を修正し[save as file] し c3.h を取得します。

3.　変換後に c3.h ができます。中身は以下で、名前の変更は可能です。
_　サイズは横=596, 縦=374 pixel。色  16bit。Endianness=Little-endianです。

4.　Arduino IDEで使用します：
_　(uint16_t)0x001f：青色が透明になり、背景色が表示されます。
_　#include “C/c3.h” // 596×374 cassette
_　tft.pushImage(102,5,c3w,c3h,(uint16_t *)c3,(uint16_t)0x001f);
_　参考：LovyanGFX 1_simple_use
_　メモ：静止画：青(RGB 0,0,255),Little-endian, 0x001f, 透明色マスク 0x001f
.

---

.
ボタン画像：
1. 画像は無料画像を参照したりGraphicsソフトで作成します。
2. ボタンは以下の構成で 緑は Pushした時のボタンです。
3. 青(RGB : o,o,255)は 透明色に設定し背景色で表示されます。
4. ボタンの間は空白か黒の縦線を入れます。
5. １２(6×2)個のボタンでは🔴メモリー不足になります。

6. 以下６つのボタンと記号(-,+,<<,<,>>,+)を組み合わせて作ります。
_　部品毎の x, y, 縦幅x、横幅y の値を 配列に記載します。

配列：ボタンの位置を設定します。

int c[6][24]={     // Button display position
//                                                            B_          ,  -,<<.<,>,>>,+
// 0,  1, 2, 3,   4,  5, 6, 7,   8,  9,10,11,  12, 13,14,15,  16, 17,18,19,  20, 21,22,23
// x,  y, x, y,   x, y,  x, y,   x, y,  x, y,   x,  y, x, y,   x,  y, x, y,   x,  y, x, y
{  0,384,50,96,  50,384,40,96,  90,384,50,96,   0,  0, 0, 0,   0,  0, 0, 0,  58,419,25,25},//0 V-
{142,384,50,96, 192,384,40,96, 220,384,40,96,   0,  0, 0, 0, 260,384, 2,96, 192,419,32,25},//1 <<
{262,384,40,96, 301,384,40,96, 341,384,40,96, 357,384,40,96, 397,384, 2,96, 318,413,25,38},//2 <
{399,384,40,96, 439,384,40,96, 479,384,40,96, 495,384,40,96, 535,384, 2,96, 458,413,25,38},//3 > 
{537,384,40,96, 577,384,40,96, 605,384,50,96,   0,  0, 0, 0,   0,  0, 0, 0, 573,419,32,25},//4 >>
{657,384,50,96, 707,384,40,96, 747,384,50,96,   0,  0, 0, 0,   0,  0, 0, 0, 716,419,25,25} //5 V+
};

ボタンとタッチ操作：ボタン画像に合わせタッチの範囲を設定。

int b[6][12]={     // Button mouse position
//    frame      ,  button         ,  nomen
// 0,  1,  2, 3,4,   5,  6,  7, 8,9   10, 11
//x1, y1, x2,y2,r,  x3, y3, x4,y4,r,  x5, y5
{  0,420,150,60,5,   2,422,146,56,5,  30,430}, // Bd 0 VOL-
{161,420, 72,60,5, 163,422, 68,56,5, 170,425}, // Bd 1 <<
{244,420,150,60,5, 246,422,146,56,5, 275,428}, // Bd 2 <CH
{406,420,150,60,5, 408,422,146,56,5, 440,428}, // Bd 3 CH>
{566,420, 72,60,5, 568,422, 68,56,5, 575,425}, // Bd 4 >>
{650,420,150,60,5, 652,422,146,56,5, 670,430}  // Bd 5 VOL+
};

LCD画面サイズと各表示画像のサイズと表示方法。
1. M5Stack, 2432S028Rの画面サイズは、320×240。
_　Volumeボタンの画像は 56×38 pixel , Little endian で表示。
_　Opentape画像は 117×117 , Big endian , Splite 1倍で表示。
2. 3248S0535C,MRB3511の画面サイズは、480×320。
_　Volumeボタンの画像は 56×38 pixel , Big endian , Splite 1.5倍で表示。
_　pushRotateZoomWithAA アンチエイリアスでの画像の綺麗さは 1.5倍程度までで
_　それ以上にしますと画像の角が目立ち綺麗で無くなります。
_　Opentape画像は 160×160 , Big endian , Splite 1倍で表示。
3. MRB3973の画面サイズは、800×480。
_　Volumeボタンの画像は 140(50+40+50)x96 pixel を表示。
_　Opentape画像は 239×239 , Big endian , Splite 1倍で表示。
.

---

.
🟦 動画の作成と表示する方法：
gifを入手するか 画像編集アプリで作成し jpgへ変換します。
次に .h 配列に変換し xxx.h を作成。
Arduino IDEで xxx.h 配列を使用してLCD に動画を表示します。

gifを .h 配列に変換する方法：
1. gif 画像入手先：1. GIFER。 2. tenor。
2. gif から jpg変換：
_　EZGIF.COM ANMATED GIFS MADE EASY に接続します。
_　GIFのアップ(Max file size: 50MB)と使用する範囲を設定：
_　Crop animated GIF image：Upしサイズを選択し「Crop image!」を選択。
_　Cropped image: が作成されます。
_　出力サイズの設定：
_　「resize」を選択し使用サイズを入力し「Resize image!」選択。
_　Resized image: が作成されます。
3. jpgデーター出力：
_　「Split」を選択します。
_　「Split options:」で「Output images in JPG Format」を選択し
_　「Split to frames!」選択。
_　「Split images:」が表示されます。
_　「Download frames as ZIP」を選択し xxx.zip Fileを取得します。
_　この zip File には gIfを構成する JPG File が多数あります。

JPG to .h 変換：
_　.h ： プログラム用のメモリデータ、Arduino IDEで利用できるソースコードです。
_　説明：Making animation from GIF files for TFT screen (ESP32 ,
4.　変換Tool：TFTAni.zip (TFTAnimations.exe)：
_　作者 VolosR氏に感謝！ 。VolosR氏は TTGO製品で数々の作品を作成しています。
_　TFTAnimationsは Windowsソフトですので Winか Macでは wine 2.0で変換します。
5.　3. で取得した jpg file を TFTAnimations.exe で frame.h に変換します。
_　frame.h が作成されます。これは 複数のjpgを .hの配列に変換されたファイルです。
_　frame.h は Arduino IDEにて 文字形式のエラーが出る為、事前にTextアプリ等で
_　通常の文字形式に変換します。
メモ：動画はメモリーを多く使用する為、50×50 pixel 程度が目安です。

 

---

.
🟧 画像を回転する方法：
_　例：カセットテープのリール(reel)を回転させる。
_　File to C Style array converter に接続し jpg を .h に変換します。
_　2-4. endianness=Big-endian。：Sprite命令は Big-endian です。
_　回転させる静止画像を用意し Sprite命令の[pushRotateZoom]を使用します。
_　sprite.pushRotateZoom(&tft,278,172,radian,1(倍),1(倍), (uint16_t)0x001f);
_　　

_　メモ：Spriteでの青は Big-endianで 0x1f00 となり 透明色マスクは 0x001fです。
：
_　メモ：SpriteでなくpushImageでの回転方法：
_　　　　9度づつ回転した20枚の画像を配列にし pushImageで抽画します。
_　　　　使用容量は 8%増えます。
.

---

.
🟪 Open Reel Type Cassette Tapeの作成：
1.　Cassette Caseの画像を 🟩 静止画の作成と表示する方法 で作成します。
2.　Open Reel Tape画像を 🟧 画像を回転する方法 で作成します。
_　
3.　注意：サイズが大きい時は表示時間がかかり 受信不良になる場合があります。
_　
_　
_　メモ：WebRadio受信の Loop 内のサイクルは 約25msec 程度です。
_　　大きな画像の場合は表示に時間がかかります。
_　　受信に必要な約25msecより画像表示の時間が大きい時は 受信不良になります。
_　　この条件でスムーズにReelを回転させるのは、計算が必要です。
_　　Spliteは 1.5倍以上にすると角がスムーズになりにくく倍率の程度をわきまえます。
_　　完璧ではありませんが、今回の程度にしました。
.

---

.
感想：
デジタル文字表示だけでは 物足りなく
懐かしいアナログ的なカセットテープやオープンカセットテープを再現したく作りました。
静止画像と動画の基本が勉強になり、直ぐ忘れますので備忘録としてまとめました。
,
レトロなスタイルのオーディオ プレーヤー：この記事に触発されました。
FAUX-RETRO “TAPE” PLAYER RUNS ON ESP32 AND 80S VIBES
,
,

---

,
,