M5Stack Japan Creativity Contest 2022に出品してみた


## はじめに

[昨年のアドベントカレンダー](https://qiita.com/riraosan/items/e9bb01715497777da011#%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89)を読み返すと、こんなことを書いていました。

>今年の11月、この記事を書いている最中に、らびやんさん作のLovyanGFXライブラリを見つけました。どうやら、M5Stack界隈では有名なパネル表示ライブラリのようです。M5 Stack Core2などのでかいほうのM5Stackは使ったことがなかったので知りませんでした。勉強になりました。
>まず、LovyanGFXをESP_8_BIT_compositeにマージしてみたいと思います。AnalogPanelとでもしましょうか。

この記事を1年後の11月に書いているということになります。しみじみ。

結局、ESP_8_BIT_compositeライブラリとLovyanGFXをつなぐパネルクラス(Panel_CVBS)を作成して、2つのライブラリを繋ぐことに成功しました。その自作ライブラリを使った作品をコンテストに出品した話を書きたいと思います。

## ふりかえり

今年は、こちらのソースをGitHubへコミットして貢献させていただきました。

- https://github.com/riraosan/ESP32JMADisasterPrevention
  - 日本気象協会の防災サイトの雨雲レーダーをコンポジット経由でデジタルテレビに表示してみました。
- https://github.com/riraosan/arduino-HD-0158-RG0019A_with_LGFX
  - デジットで売っているLEDマトリクス用の[描画ライブラリ(@techno作)](https://github.com/techno/arduino-HD-0158-RG0019A)をM5GFX（LovyanGFX)に置き換えました。
- https://github.com/riraosan/ESP32MSGraph
  - こちらは[原作者](https://github.com/toblum)からプロジェクトを引き継いで、Micrsoft Graph APIを叩いてOutlookメール受信やTeamsの在席情報を表示させてみました。（彼はなにか健康上の理由で継続できないようなのです。原作者と対話と合意のうえ転載させてもらっています。）
  - [Arduino Library](https://www.arduino.cc/reference/en/libraries/esp32-microsoft-graph/)に公開済みです
- https://github.com/riraosan/ESP32_8BIT_CVBS
  - こちらが描画ライブラリにLovyanGFXが利用できるCVBS信号表示用ESP32ライブラリです。ATOM Liteでのみ動作確認をしています。ほかのESP32でも動くと思います。こちらに[サンプル動画](https://www.instagram.com/p/CbXvBUovzNE/?utm_source=ig_web_copy_link)があります。（ちなみにLovyanGFX≒M5GFXです）
  - [CVBS(Composite Video, Blanking, and Sync)](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%9D%E3%82%B8%E3%83%83%E3%83%88%E6%98%A0%E5%83%8F%E4%BF%A1%E5%8F%B7)とは「映像信号を構成する同期/輝度/カラーを合成して1本のケーブルで使用できる複合伝送(重畳)信号のこと」です。「コンポジット映像信号」と言えば聞いたことがあるのではないでしょうか。デジタルTVの裏側にある黄色い丸の端子（[RCA端子](https://oes.ne.jp/data/rca.html)）へCVBS信号を入力するとカラー映像を表示できます。解像度はインタレース走査方式の480iです。横のサイズは色々あるようです。

ESP32_8BIT_CVBSはESP_8_BIT_compositeが使っていたAdafruit_GFX描画ライブラリを、M5GFX(LovyanGFX)に置き換えたものです。ESP_8_BIT_compositeライブラリの作者のご助言により2つのライブラリに依存する形で自作ライブラリとして作成しました。
その後、[LovyanGFXのサンプルプログラムをテスト用プログラムとして利用](https://www.instagram.com/p/CbXvBUovzNE/?utm_source=ig_web_copy_link)してテストを続け、リリースすることができました。

## 自作ライブラリを使った作品をコンテストに出品してみた

### M5Stack Japan Creativity Contestとは？

このコンテストの主催はスイッチサイエンス社とM5Stack社で、協賛がProtpedia社です。今年で2回目でしょうか。作品はProtpediaにコミットすることとなっています。今年は9月12日が締め切りでした。10月15日に審査があって結果が出ています。

- 2021年 
    - スイッチサイエンスのサイト https://info.switch-science.com/m5stack-creativity-contest-2021
    - プロトペディアのコンテスト会場 https://protopedia.net/event/22

- 2022年 
    - スイッチサイエンスのサイト https://info.switch-science.com/m5stack-creativity-contest-2022
    - プロトペディアのコンテスト会場 https://protopedia.net/event/m5stack2022
    

[@riraosan](https://www.github.com/riraosan/)は2022年のコンテストに出品して参加賞をゲットしましたｗ。

2022年の受賞者は次のページを参照してください。

https://protopedia.net/event/m5stack2022

個人的な感想ですが、みなさん造形が凝っていて驚きの連続でした。わたしも、造形＋電子工作＋Arduinoライブラリで来年も出品したいと思いました。やはり、少しでもなにかヒトや環境に役立つ、社会貢献できる作品を作りたいと思いました。

### 出品作品について
こちらがriraosanの出品作品です。インターネット老人会世代のriraosanにはとても懐かしい作品となりました。完全に参加賞狙いですｗ
よろしければ、詳細はリンク先を参照してください。

https://protopedia.net/prototype/3085

コンテスト規約ではないですけれども、英文を添付して欲しいという要望があったので、ところどころ英文をつけています。riraosanは英作文が非常に苦手で少々英文が読めるぐらいなので、DeepL先生に翻訳してもらって、英文を読んでみておかしな文がないか確認した上で貼り付けました。

## lovyan03さんのCVBSライブラリを使ってみた

lovyan03さんは外部のライブラリに依存しない形で超爆速の描画ライブラリと初めから合体したCVBSライブラリ(Panel_CVBS）を作成されました。さっそく使用させてもらいました。ESP_8_BIT_compositeライブラリ（CVBSライブラリ）を使用したときよりも発色が良く、さらに表示速度が爆速だったので驚きましたw。

M5GFX版のPanel_CVBSライブラリを使用したサンプルを作成しました。もしよろしければご参照ください。

こちらはM5GFXのリポジトリ

https://github.com/m5stack/M5GFX

こちらはサンプルのリポジトリ

https://github.com/riraosan/LGFX_CVBS_brownian

- TwitterでLovyanGFXのサンプルソースコードを改修してブラウン運動背景の環境モニターを作っている[人](https://twitter.com/zeromem0)がいたのでソースを公開してもらって、ブラウン管テレビ用NTP時計としてみました。こちらのサンプルはGitHubリポジトリの[M5GFX#develop](https://github.com/m5stack/M5GFX/tree/develop)に公開されているPanel_CVBSを使用しています。(developはブランチのタグ名称です）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ほんまに直ったわ。。<br>昭和のテレビの直し方。<br>ブラウン運動NTP時計を映しています。<br>デバイスはATOM Liteです。<br>エモい。👍 <a href="https://t.co/E3BmsMyQ3J">pic.twitter.com/E3BmsMyQ3J</a></p>&mdash; riraosan@再起動 (@riraosan_0901) <a href="https://twitter.com/riraosan_0901/status/1593919512759664640?ref_src=twsrc%5Etfw">November 19, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### M5GFX#developリポジトリにあるCVBSライブラリについて

GitHubのM5GFXリポジトリのdevelopブランチにmasterへまだマージされていない作成中のCVBSライブラリが配置されています。
とりあえず爆速で動きましたのでシェアしておきます。

`/lgfx/v1/platforms/esp32/`
こちらに、Panel_CVBS.cpp, Panel_CVBS.hppがあります。このソースはG26、G25からCVBS信号（コンポジットビデオ信号）を出力するための信号生成用クラスです。I2Sドライバを使用して信号を生成しています。（ほとんどががインライン化されていますね。。）

`lgfx/v1/panel`
こちらに、Panel_FrameBufferBase.cpp, Panel_FrameBufferBase.hppがあります。
Panel_FrameBufferBaseクラスはジェネレータとM5GFX描画APIをつなぐクラスです。
基本的に、M5GFXのCVBSライブラリはI2SドライバとDACが使用できるESP32デバイスで使用できると思います。

~~そのうちmainにマージされるかもしれないし、されないかもしれません。~~
2022-12-17時点
M5GFXリポジトリのmain(master)にPanel_CVBSクラスがマージされていました。

### RCAユニットについて

つい最近、M5StackよりRCAユニットが正式にリリースされました。

https://shop.m5stack.com/products/rca-audio-video-composite-unit?mc_cid=27ad7f8133&mc_eid=d7b61cc369

たぶん、私がつぶやいたアイデアが採用されたように見えます。もはや確かめようもないのですが。。
TwitterでM5Stack Core用のRCAモジュールを作っているというM5Stack中の人のつぶやきがありました。そのリプライでriraosanが「ATOM Lite用のRCAユニットが個人的に欲しい」と言ったところ、中の人が製品化してくれました。ありがとうございます。助かります！！さっそくポチりました。
もしよろしければ、ATOM LiteとRCAユニットとM5GFXで大画面映像作品など作ってみてはいかがでしょうかｗｗ？

こちらはその時のスレッドです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">そしてgrove経由ですがAtomで使えるRCAポートが現実に<a href="https://t.co/qmICZCiLtz">https://t.co/qmICZCiLtz</a></p>&mdash; ぎっしり⋈ ♨️7M4GKR (@yamagisk) <a href="https://twitter.com/yamagisk/status/1599402485038579717?ref_src=twsrc%5Etfw">December 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## これから

ネタやアイデアは尽きません。。

- PID制御を勉強する目的でATOM Matrix＋DCモーターでドローンの研究（1モーターヤジロベエからやってみる。）
- テオ・ヤンセン機構ラジコンを作ってみる
- toioで何か
- ATOMFly2で遊んでみる
- ~~ESP32Libを利用してM5Stationで廃棄寸前のVGA液晶テレビを復活させてみる~~ 
    - ←256色出せないのであきらめた。Panel_CVBSライブラリとAmazonで売っているRCA→VGA変換コンバーターを組み合わせて実現すればいいということとした。

などなど。

趣味なので、特に優先順位は設けませんww

## 謝辞

> 私がかなたを見渡せたのだとしたら、それは巨人の肩の上に乗っていたからです。
Isaac Newton

M5Stack周辺のライブラリ作者の方々と中の人のご貢献に感謝します。