/

M5 AtomS3UにWebUSB経由で設定値を保存する

WebUSB8888
WebUSB

以前に書いたM5 AtomS3UをUSBフラッシュメモリとして認識させて設定ファイルを保存するのWebUSB版となります。

使用するのは今回もM5 AtomS3Uです。

なお、今回はWebUSBを使うのでPCに挿してもUSBフラッシュメモリのようにはなりません。

仕様

  • M5 AtomS3U
  • PC - Windows 10 / 11, Mac ※LinuxではWebUSBがうまく動きませんでした。。。
  • ネットワーク - PCがインターネットに接続されている必要があります

コンパイル方法


  1. ソースコードはgithubに置いてあります。git cloneしてからcloneしたディレクトリに入り、git reset --hard 916a26e806f43db1da689c01a497b7e9b14cdf5f3で当該コミット(916a26e806f43db1da689c01a497b7e9b14cdf5f3)に移動してください。またVS CodeにPlatformIOをインストールしておいてください。

  2. PlatformIOでcloneしたレポジトリ内にあるmscram_and_spiffs_webusbディレクトリを開きます。

  3. 依存ライブラリのインストールなどで数分待つ必要があるかもしれません

  4. F1キーを押し、PlatformIO: Buildを実行してコンパイルします。

  5. M5AtomS3UをPCに接続して、リセットボタンを緑色のLEDが光るまで長押しして離し、PlatformIOでF1キーを押し、PlatformIO: Uploadを実行してコンパイルしたソースをアップロードします。

※PlatformIOの細かい操作方法は公式のドキュメントなどを参照してください。

使い方

  1. M5AtomS3Uの中央のボタンを押したままPC(Windows10 / 11)に接続します

  2. しばらく待つと下記のようなポップアップが出ます。※ポップアップが出ない場合はTinyUSB - WebUSB Serial Exampleを直接開いてみてください。

    8888

  3. クリックするとtinyusbのTinyUSB - WebUSB Serial Exampleというページを開きます。なお、PCにはEdgeかChromeが入っている必要があります。下記のようなページが開きます。右側のReceiver欄にWebUSB interface connected !!と表示されて入ればOKです。

    8888

  4. 現在の設定値を確認します。左側のSenderにget settingsと打ち込んでEnterを叩いてください。Receiver側にJSONの設定値が出ます。

    8888

  5. この例で使うキーはcolorもしくはcolorsとなります。

  6. colorsは配列になっていて値が2つ入っていますが、greenという値を追加してみます。pushと打ってEntercolorsと打ってEntergreenと打ってEntercolors配列にgreenが追加されました。

    8888

  7. 配列から値を取り除く場合はpopと打ってEntercolorsと打ってEnterで配列の最後の値が取り除かれます。

  8. 配列ではなくてcolor文字列を追加もしくは編集したい場合はsetと打ってEntercolorと打ってEnterredと打ってEnterで、colorredという値が入ります。

  9. 削除したいときはremoveと打ってEntercolorと打ってEnterで、colorが消えます。

    8888

  10. 再度PCに接続、中央ボタンを押すと設定した色に光ります。例ではcolorcolorsが設定されていて、その場合はcolorsが優先されます。ボタンを押すとorangeに光り、次に押すとcyanとなり、もう一度押すと消灯します。

    8888

設定値について

今回の例ではcolorcolorsキーしか使用しませんが、WebUSBの画面からはほかのキーも追加、削除できますので色々試してみてください。

また、上記のTinyUSB - WebUSB Serial Exampleresetと打ってEnterで設定値を初期値に戻せます。

今後

設定値をUSBフラッシュメモリ的に保存するUSB Key Senderの兄弟プロジェクトとして作成したのですが、キー入力をPCに送る部分がうまく作れず色を変更するだけのものになってしまいました。

また、この例は本来はLinuxでも動くようにしたかったのですがそれもうまくいかずあきらめました。

「PCとUSB接続する」というのは最初想定していたものよりかなり難易度が高かったです。おそらく私の技術力が不足しているのが原因だとは思うのですが1年近く開発していたのでひとまずUSBとPCの接続についての探求は一休みします。


更新ログ

  • 2024/8/18 reset機能を追加したので追記