🔰
農系IoT勉強会　UiFlow2.0とAtomS3で簡単プログラミング

seya128
2024/10/18に公開
 UiFlow2.0とは？Arduino IDEのように、プログラムコードを書くのではなく、マウスでブロックをドラッグ＆ドロップしてプログラムを作成していく、ローコードとかノーコードと呼ばれるプログラミングです。

 特徴WEBブラウザでプログラム作成やAtomS3への書き込みができる
ブロックプログラミング
AtomS3の画面イメージを実際の表示に近い感じで作成できる
M5系のオプションユニットに多く対応していて簡単につかえる

 早速使ってみましょう
 UiFlow2.0のWEBページを開くWEBブラウザで「uiflow2.0」で検索するか、以下URLを開きます。

https://uiflow2.m5stack.com/
以下、画面になったら「Cancel」ボタンを押します。

 UiFlow2.0用のファームウェアの書き込みAtomS3にUiFlow2.0を使うためのプログラムを書き込みます。

UiFlow2.0の画面の、左下のほうにあるWebBurnerアイコンをクリックします。

下の画面になったら、AtomS3をUSBポートに接続して、リセットボタンを長押しします。

リセットボタンの隙間から緑のLEDが点灯したことを確認出来たら、「Confirm」ボタンを押します。

下のウィンドウが表示されたら、チェーンのアイコンをクリックします。

すると、シリアルポートの一覧が表示されるので、

「USB JTAG/serial debug unit」などと書かれたポートを選択し、「接続」ボタンをクリックします。
ウィンドウが下のように変わるので「Burn」ボタンをクリックします。

ここで、M5 Stack Communityのアカウントが必要になります。

アカウントがなければ「Create an account.」のリンクからアカウントを作成します。

ログイン後、もう一度「Burn」ボタンをクリックし、下の画面で「Confirm」をクリックします。

デバイスの情報や設定ができますが、そのまま「Bind」をクリックします。

デバイスやファームウェアのバージョンが選択できますが、そのまま「Confirm」をクリックします。

WiFiの設定が必須項目なので設定します。

Timezoneも日本時間に合わせて「GMT+9」にしておきます。

「Burn」ボタンをクリックで書き込みが開始されます。

「Burn Successfully!」で出たら成功です。

失敗したら、シリアルポートの選択を確認したり、Burnの横の「Erase」で一度消去してから書き込んでみてください。

AtomS3のリセットボタンを短く押すとUIFLLOW2の画面が表示されるはずです。

 Hello World画面に「Hello World」と表示するプログラムを作成してみましょう。
画面左上のほうにある鉛筆と定規のアイコン「Draw」をクリックします。

「Label」アイコンを、黒い画面内にドラッグ＆ドロップしLabelを作成します。

Textの項目を、「Hello World」など表示したい文字にして、「ｘ」ボタンでDrawウィンドウを閉じます。

「Run」ボタンをクリックすると、シリアルポートの選択ウィンドウが出るので「M5Stack AtomS3(UiFlow2)」を選びます。

（このようなポートが出ないときは、リセットボタンを押して再度「Run」するか、UiFlow2用のファームウェアが書き込まれていない可能性があります）

三角の実行ボタンをクリックすると、プログラムが実行されAtomS3にHelloWorldが表示されます。

この状態だと、USBケーブルを抜いたりリセットボタンを押すと実行したプログラムが消えてしまいます。

USBケーブルを抜いても、次回接続時に作成したプログラムを起動させたい場合は、三角の実行ボタンの右にあるボタンをクリックしてAtomS3に書き込みます。

 他の人が作成したプログラムを実行してみよう画面上部の土星みたいなアイコンをクリックします。

AtomS3のアイコンをクリックすると、AtomS3用のプログラムだけが表示されます。

今回は私(seya128)が作成したプログラムを実行してみましょう。
検索窓の左側を「Author」に
「seya128」と入力
検索ボタンクリック

「Import」ボタンでプログラムが読み込まれるので、「Run」ボタンで実行してみてください。

 QRコードスキャナーユニットを使ってみよう新しくプログラムを作成する場合は、フォルダの形のアイコンをクリックし「New Project」を選択します。

新しいプロジェクトのNameが必須なので入力します。

Deviceに、AtomS3を選択します。

「Confirm」をクリックします。

「Unit」の＋のところをクリックします。

対応ユニットがたくさん出るので「QRCode」を選びます。

今回はI2C接続にするので、QR-CODEユニット本体横のスイッチが「I2C」側になっていることを確認してください。

自動的に、QR-CODEユニットの初期化処理が追加されました。

QRコードで読み取った内容を表示する場所を作ります。
画面左側のラベルアイコンを黒い液晶部分にドラッグ＆ドロップします。
（細かな設定はできませんが、アイテムの追加はDraw画面を開かなくてもできます)

QRコードを読み取って画面に表示する処理を追加します。
ラベルのテキストをセットするブロックを、LOOP処理に追加

QR-CODEユニットからデータを読み取るブロックを追加

読み取ったデータを文字列にする設定に変更

「bytes」から「string」に変更します。

「Run」－三角アイコンで実行をして、QRコードを読み取ってみてください。

読み取ったデータがAtomS3の画面に表示されるはずです。