工作記録帳

子供達と作った工作いろいろ

2023/11/18

M1 MACでM5Stack ATOM S3 をUIFlowで使う試行錯誤

event_note11月 18, 2023 forumNo comments

 

M5Stack社のATOM S3を手に入れたので遊んでみたいと思います。M1 Macで設定をした際に色々と大変だったので備忘録です。これを書いている時の環境は2023年11月現在の最新のOSはSonoma 14.1.1、UIFlow関連のバージョンもこの時点での最新のものを使用しています。

ATOM S3は液晶画面がついた小さなマイコンボードです。ESP32-S3というコントローラを搭載していて、センサーを繋いだりモーター繋いだり、WiFiもついているので色々なことができそうです。バッテリーは積んでいないので、電源は外部から供給します。

https://www.switch-science.com/products/8670


このATOMS3にプログラムを書き込む方法はいくつかあるようなのですが、UIFlowというブラウザで動作する開発環境を使ってみます。この方法ではプログラムの書き込みの際にケーブルで繋げる必要はなく、WiFiを通じて無線で行うことができます。この無線でのプログラムの書き込みを可能にするために、ATOM S3のファームウェアを書き換えてあげなければ行けないそうです。

セットアップの流れについてはこちらの記事に色々と助けてもらいました。ありがとうございました。

https://qiita.com/youtoy/items/ecc61ae5eb1cb57cc64b


ファームウェア書き換え編

まずファームウェアを書き込むソフトをダウンロードします

ここからUIFLOW FIRMWARE BURNING TOOLをダウンロード

https://docs.m5stack.com/en/download

ダウンロードしたZipファイルを解凍して中にあるm5burner.app(Windowsの場合はm5burner.exe)を起動します。

すると早速エラーが出ました。とりあえず「キャンセル」で閉じます。
左上のリンゴマークを押して、システム設定の中のプライバシーとセキュリティの中をスクロールするとAppがブロックされた旨が書かれています。「このまま開く」を押します。プライバシーとセキュリティのポップアップが出るのでMacのパスワードを入れてください。
するとこんなポップアップが出てくるので「開く」で開きます。それでも開けないときはm5burner.appのファイルをアプリケーションフォルダに移動してから開いてみてください。
初期画面が開きました。起動したら自動で最新版にアップデートしたらしく、右下にrestartしますかとメッセージが出ています。restartを押すとm5burnerが再起動します。

パソコンとATOM S3をUSBケーブルで繋いでください。
再起動したら左のリストの中からATOM S3を選択します。この時点でのファームウェアの最新versionはAlpha-28でした。ダウンロードを押してm5burner内にこのファームウェアをダウンロードします。さあ、ここでBurnを押せばATOM S3にファームウェアが書き込まれ…
エラーが出ました。ログインしなければならないそうです。なんで？
しょうがないのでここからアカウントを作ります。
Resisterを押すとアカウント作成ページに飛ぶので、そこでアカウントを作成します。アカウントが作成できたらまたm5burnerに戻ってきてEmailとパスワードを入力してログイン。
無事ログインができたらBurnを押して書き込みのセッティングを行います。
さあ、Nextを押していよいよ書き込み…
エラー出ました…
--chip auto --port /dev/tty.usbmodem2201 --baud 1500000 --before default_reset write_flash -z --flash_mode dio --flash_freq 80m --flash_size detect 0x9000 /Applications/M5Burner.app/Contents/Resources/packages/tmp/uiflow2-cfg.bin
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

エラーの文章で検索すると以下の記事が出てきました。ありがたい。

記事に従ってXcode Command Line Toolをインストールします。画面右上の虫眼鏡マークをクリックするとSpotlight検索が出てくるのでそこにTerminalと打ち込んで「ターミナル.app」をクリックして立ち上げます。
立ち上がったらそのまま以下の文を打ち込み、returnを押してください。

xcode-select --install

するとこのようなポップアップが出るのでインストールをしてください。

Xcode Command Line Tool インストールが終わったら再度試してみます。
あ、書き込む前にATOM S3の側面ボタンを長押しして書き込みモードにします。ボタンの隙間からLEDが内部で光っているのが見えたら書き込みモードに入っています。
COMはATOM S3を繋いでいるUSBポートの番号を選びます。どれだかわからないときはこの画面のままATOM S3を外したり繋いだりしてください。増えたのがATOM S3が繋がっているポートです。
Startを押すとアカウントの紐づけに関するWarningが出てきます。これでこのATOM S3の個体がアカウントに紐づきます。YESを押して次へ。
Nameは好きに設定できるようです。どの個体か見分けるための用途です。
Nextを押すと元の画面に戻るのでまたStartを押すとWIFIの設定画面になります。WIFI SSIDとWIFI Passwordは自身のWiFiの情報を入力してください。プログラムをするPCと同じWiFiに繋がっている必要があります。また、ATOM S3は2.4GHz帯にしか対応していないので注意です。Timezoneは関係あるのかわかりませんが一応設定しておきます、日本はGMT+9です。その他の項目はデフォルトのままいじっていません。
NEXTを押して

ついに書き込みに成功しました！USBを指し直すと、ATOM S3にもUIFLOW2と表示され、WiFiにも無事繋がっているようです
ここから先、ATOM S3とパソコンを直接USB-Cケーブルで繋ぐ必要はありません。ATOM S3へは電源供給だけのケーブルで大丈夫です。パソコンとATOM S3が設定した同じWiFiネットワークに繋がっていることだけ注意してください。

UIFlow編

UIFlow2.0にアクセスします
右上の人のマークをクリックして先程作ったアカウントでログインします。
ログインができたら画面下にある「Select Device」をクリック。すると先程UIFlow2をインストールした個体がありました。それをクリックしたら画面右下のConfirmをクリック。
これでプログラムの書き込み先が先程設定した個体になりました。試しに画面に"1"を表示して、画面の色を青くするプログラムを書いてみます。画面下のRunを押すと書き込まれます。
書き込み成功のメッセージが出るのですが、一瞬で消えるのでスクリーンショットを取り損ないました。なにはともあれATOM S3のスクリーンはこんな感じに青くなりました。
無事スクリーンは青くなりましたが、あれ？print "1"の部分が表示されていない…？
画面に文字を表示するやり方が違うようです。

labelという機能を使うようです。以下の画面から、ATOM S3の画面に何を表示させるかのレイアウトを編集できます。ここでLabelを画面上にマウスでドラッグして「label0」というものを作ります。
プログラムの方でこのlabel0に”Hello”という文字を代入してあげると…
あれ？変わらないじゃん！

どうやら背景色を設定するタイミングがいけなかったようです。Helloは書かれているけど、背景色が上書きされて見えなくなっているのかな。
Set screen background colorをLoopの中ではなくSetupの中に移動しました。
これでどうだ

Hello！！！
成功！

RUNとDownloadの違い

プログラムを実行するのにRunというボタンとDownloadというボタンの2つがあります。（現在のUIFlowの右側のボタンにはDownloadという文字は書いてありませんが、昔のバージョンのUIFlowにはDownloadと書いてあったようです）

RUN
1回だけ自分のプログラムを実行します。自分のプログラムが動くのはUIFlowとオンラインで繋いでいる間だけで、ATOM S3の電源を切って再度入れ直すとリセットされ、書き込んだ自分のプログラムは消えてます。

Download
ATOM S3に自分の作ったプログラムを書き込んで、電源が入ったときに最初に実行するプログラムにします。UIFlowとオンラインで繋いでなくてもATOM S3が単体で動作できるようになります。

公式の説明はこんな感じです。
原文：
https://docs.m5stack.com/en/quick_start/atoms3/uiflow
The Run/Download of the program:
1. The Run button (triangle) in the menu bar of UIFlow online version is the Single test operation, and the device will re-enter the online programming mode after reset.
2. The download button will download the current program to the device and configure it to start automatically. Note: If the downloaded program involves network communication, please add a WiFi connection program at the beginning of the program. If you need to re-enter the programming mode in offline operation mode, you can refer to the mode switching instructions at the bottom of this document.

Runで動かしているうちはATOM S3はonline programming modeとなっていて、新しいプログラムを受け付けるモードです、DownloadをするとATOM S3はApp modeになり、自分のプログラムを実行するモードになります。再びUIFlowと繋いで新しいプログラムを書き込むためにはonline programming modeにしなければなりません。このやり方がなぜかどこにもはっきりと書いてないのですが、ATOM S3の電源を切り、液晶画面スイッチを押しながら電源を入れるとonline programming modeに入れます。
m5burnerのConfigureからもできるらしいのですが、UIFlow使い始めている時点でm5burnerはもう起動してないし、m5burnerからまたログインしてからじゃないとConfigureに入れないし、入ってもどうすればonline programming modeにできるのかわからないし、ということで電源を切って入れ直す方が簡単かと思います。

なお、一度online programming modeに入り直すと、Appモードに単体では戻れません。電源をもう一度入れ直してもonline programming modeにしかならないので注意してください。Downloadで書き込んだプログラムは消えてはいないんだろうけど、UIFlowでまたプログラムを書き直さないとだめみたいです。。。
Read more

2022/03/08

iPhoneで手乗り擬似ホログラム

event_note3月 08, 2022 forumNo comments



iPhoneの上で踊る手乗り娘を作ってみました。

ホログラム…っぽいですが、厳密には違うので「擬似ホログラム」です。でも結構立体的に見えます。

Read more
続きを読む »

2021/08/20

回転双曲面体

event_note8月 20, 2021 forumNo comments

2枚の円盤の間にたくさんのゴム紐を渡しています。円盤を互いにひねると、綺麗な曲面が現れます。これが「回転双曲面体」です。双曲線を回転させるとこの形になります。

作り方はこちら。

 

instructables にも作り方をのせています


「双曲線」で一番有名なのは y=1/x ですね


もうちょっと一般化して書くとこんな感じ

ほら、これを回転させたらこんな立体になる気がしませんか？

ひねり具合によって、曲率を変えることができます。

この回転双曲面体、工学的には食違い軸歯車の形状などに用いられます。

建築の分野でも使われていて、神戸ポートタワーもこの形状ですね！



Read more

娘作品　〜2021年8月

event_note8月 20, 2021 forumNo comments


母娘合作　恐竜の親子

子供達に描いてもらった適当な線をベースに恐竜を描いています。何気ない線がいい味を出しています。

ーーーーーー

長女作　クローゼット

洋服がかかったクローゼットをイメージしているそうです。ちゃんとハンガーがあって、そこに服をかけています

ーーーーーー

次女作　お人形

最近、折り紙を切った部品を組み合わせてこんな人形を作ることが多いです。左右の足とか、狙い通りに同じ大きさに切れてますね。他の工作で余った切れ端を「ここに使える！」と再利用することもあります。よくみると、顔はニコニコ顔、手に持ったステッキの先にはハートが書いてあります。

ーーーーーー

長女お絵描き　猫バス　アンモナイト　アノマロカリス

端的に言って最高です。Tシャツのワンポイントに加工したい。

ーーーーーー

長女作　着せ替え人形

うさぎの着せ替えの服、「てんせんのところおきてね」(点線の所を切ってね)と指示が来たので切ってあげました。点線の表現、なるほど、そういうやり方もあるのか、と目から鱗でした。

ーーーーーー

最近本を作ることにはまってる長女
1ページ目「はるにえかこおしきしゃのように！」(春に絵、描こう、指揮者のように！)
2ページ目「しんとしたよるにほしおみるといいよ」(しんとした夜に星を見るといいよ)
4ページ目「とんかつおたべるといいよ　なんでかとゆうとあたまがよくなるから」
5ページ目「ごはんのときにたべるといいよ」
「おしまい」
各ページ、ちゃんとページ番号も書いてあります。

感じたことをどんどん自分の中に取り込んで、
世界をこんなふうに感じているのかなぁとしみじみ
なんだか詩集みたいなので、昔の写真と合わせてみました


（トンカツの写真はありません）


Read more

2021/08/07

ダンゴムシ

event_note8月 07, 2021 forumNo comments

トイレットペーパーの芯で作るダンゴムシの工作、芯1本から1匹作れてちゃんと丸まらせて遊べます。保育園の先生から相談を受けたことがきっかけで設計できました、先生ありがとうございます！

小さい子でも作れるようにほぼ直線のみで構成したり、手順を工夫して失敗しにくいように設計しています。

テンプレートダウンロード

詳細な手順は動画にしました。見ながら作れるように、早回しではなくリアルタイムの速さで収録しています。



Instructablesという、ものづくりを世界中の人たちを共有できるサイトでも公開しています

https://www.instructables.com/Roly-poly-Toilet-Paper-Core-Crafts/

ペーパークラフトに限らずいろんなカテゴリーがあって楽しいですよ


テンプレートに先に色を塗っておくと、カラフルなダンゴムシが作れます！



Read more

2021/05/13

娘作品　〜2021年5月

event_note5月 13, 2021 forum1 comment

長女作　クワガタ

トイレットペーパーの芯で体、目と羽根は折り紙を使って作っています。場所によって折り紙の色を使い分けていますね。裏返すとちゃんと足もついていました。

ーーーーーー

次女作　ライオン

ハサミの使い方がだいぶ上手になってきました。折り紙の周囲に切り込みを入れてタテガミにしています。ちょっと丸めてふさふさ感が出ています。目と口はマスキングテープ、キリッとした表情です。

ーーーーーー

次女作　モンスター？

目をお母さんに作ってもらって、折り紙で作った体と一緒にカレンダーの写真にレイアウトしました。セサミストリートのキャラクターみたい。

ーーーーーー

おまけ

我が家ではお手伝いしてくれたらシールをあげているのですが、よく見ると混ざっているArduinoとかDIYのシール(笑)


Read more

2021/05/12

モーターの動かし方：前進後進

event_note5月 12, 2021 forumNo comments

 モーターで動くものを作っていくと、自分で操作できるものを作りたくなってきます

「操作する」と言っても、ラジコンみたいに無線だったり、センサーでジェスチャーを読み取ったりと色々な方法が考えられますが、ここでは有線で操縦する方法を考えます。

さあ、有線ということは決まりましたが、実は有線操縦にもいろいろあります。双方にコンピュータが載っていて、電線には「この部分を動かせ！」というデジタル信号を送って動かしたりする方法もありますが、ここではシンプルにモーターが動かしたいものについていて、コントローラーで電力を送る方法について考えます。

Read more
続きを読む »