はじめに

唐突に「あー！７セグに、なんでも鑑定団みたいな感じで数字を表示したい！！！気温とか出したい！！！」
と思うこと、人生に５度ぐらいは有ると思います。

『開運なんでも鑑定団』にレコード鑑定士として出演いたします！ | COCONUTS DISKより引用

とは言ってもモノホンの７セグメントディスプレイはハードウェア制御が絡み、表示させるところまでが色々と面倒です。

[8.]と表示できる、これが7セグ

しかし近日、弊社ビット・トレード・ワンより、
USB経由のシリアル通信だけで英数字等の表示が可能なAD7SGPRという製品が出ます。
マイコンにRP2040、7セグドライバにTM1638を使用しています。回路図等Githubで公開中

AD7SGPR本体画像

USBシリアル通信だけで文字を表示できるので、WEBSerialAPIを使用すれば、
ブラウザ上で様々なAPIから引っ張ってきた数字を7セグに表示することとかが可能です。
ブラウザで作成すればマルチプラットフォーム対応にもなりますし。
接続イメージ

本記事ではAD7SGPRを使って東京の気温を7セグで表示するwebアプリを
GPT4に書いてもらいます。

ソースを持って来てGPTにコーディングさせる

いくらGPT-4にコーディングしてもらうとしても中々面倒な作業です。
そこで骨となるソースコードを用意します。
弊社からAD7SGPRでyoutubeチャンネル登録者数が表示できる
WEBアプリがMITと同等のライセンスで公開されているため、

このコードのSerial通信部分などは流用し、APIから値を取ってくるところだけを書いてもらいます。

私は曖昧な指示をしてAI(部下)が面白いものを作ってくれるのを待つという、
庵野秀明氏にしか許されない方法でAIに成果物を作ってもらうのが好きなので、
天気を取得するAPIを指定しないで作ってもらうことにしました。楽ですしね。

以下のようにGPT-4に指示をしました。

「以下はyoutubeのチャンネル登録者数を所得し、その数をシリアル通信で送信するwebアプリのソースです。コレのyoutube登録者数取得部分を東京の気温を取得するAPIに置き換えてください。
<サンプルソースをベタ貼り>」

簡単なwebアプリの場合、HTML,CSS,JSがそれぞれ別ファイルになっていないものを渡したり、出力してもらうのが楽です。

私の中々に大雑把な指示を元に、GPT-4は返信でソースを書いてくれました。

優秀ですね。後は動くかを確認し、エラーコードなどが出た場合はGPT-4に報告し、仕上げていきます。

今回のやり取りはこちらからご覧いただけます。
(最後の方なんてこの記事の雛形書かせてます......)

動作の様子

Appの画面

ソースを提示したことも有り、
試行錯誤も合わせて10回程度の会話ラリーで
webアプリから7セグにAPIの値を表示させることに成功しました！

APIキーと頻度を設定すると東京の気温を取得し、
シリアル接続ボタンからAD7SGPRと接続を行うと値を表示できます。

(なんでも鑑定団風のアニメーションは本体側のファームウェアで実現しています。電源起動時のデフォルトでは値表示前のアニメーションは無しになってます。)

本WEBAppをGtihubにソースを上げたので閲覧はこちらからどうぞ。

皆様も7セグ表示欲が出てしまった際はこの記事を参考にしてください。

以上です。