M5Stack FireでUIFlowプログラミング（その5）「HelloWorld!」、入門編始めました

講習用の資料作りを兼ねてブログに「M5StackでIoT　UIFlow入門」を掲載します。

まずは「HelloWorld!」から。

Webブラウザで「UIFlow」を開きます。以下のサイトにアクセスすると表示されます。
https://flow.m5stack.com

---

最初の一歩、「HelloWorld!」を表示する

1. 左にある「描画ツール」から[Label]をドラッグしてM5Stackの画面上に配置します。
2. 画面上にTextと表示されますので、それをダブルクリックします。
3. Labelの設定画面が開きますので、以下のように修正します。
   • X:　20
   • Y:　100
   • Color:　黄緑
   • Font:　DejaVuSans 40
4. Labelの設定画面の右上にある[×](閉じる)ボタンをクリックして閉じます。

1. ブロック一覧から[UI]をクリックします。
2. 展開されますので、[ラベル]をクリックします。
3. [ラベルLabel0に“Hello M5”を表示]ブロックをクリックします。
4. プログラミングエリアに配置されます。

1. [Setup]ブロックの下に接続します。
2. “Hello World!”と入力します。

※ M5Stackはプログラムを実行すると、[Setup]から順番に実行していきます。実行したいブロックは[Setup]に接続していく必要があります。

右下にある[▶Run]ボタンをクリックします。

プログラムがM5Stack本体に送られ、実行されます。

画面に「Hello World!」が表示されました！

---

表示の見た目を変える

1. [UI]-[画面]より[画面の背景色を○色に設定する]ブロックを追加します。
2. [UI]-[ラベル]より[ラベルLabel0の文字色を○色に設定する]ブロックを追加します。
3. 画像のように接続し、背景色を黄色、文字色を赤色に指定します。

[▶Run]ボタンをクリックして実行します。

背景色が黄色、文字色が赤色に変わりました。

---

画面の表示をチカチカさせる

1. [イベント]から[ずっと]ブロックを追加します。
2. [UI]-[画面]から[画面の明るさを○に設定する]ブロックを追加します。
3. [タイマー]から[○秒停止]ブロックを追加します。
4. 画像のように配置し、数値の部分を次のように設定します。
   • [画面の明るさを100に設定する]
   • [1秒停止]
   • [画面の明るさを0に設定する]
   • [1秒停止]

1秒おきに画面を点けたい、消したりします。

---

作成したプログラムを保存する

1. プロジェクト名に「dispchika」と入力します。
2. 右上の[Save]ボタンをクリックします。
3. [ダウンロード]フォルダに「dispchka.m5f」というファイル名で保存されます。（というか、ダウンロードされます。）

新しくプログラムを作成する

1. 右上の[New file]ボタンをクリックします。
2. 「新しいプロジェクトを作成すると今あるものを消えてしまうけどどうする？」と聞いてきますので、[Create but don’t save](新規で作成するけど、保存はしません)ボタンをクリックします。
   ※ 既に保存しているので再度保存する必要はありません。）

プログラムファイルを開く

1. 右上の[Open](開く)ボタンをクリックします。
2. [アップロードするファイルを選択]画面が表示されますので、先ほど保存した「dispchikaｓ.m5f」を選択して、[アップロード]ボタンをクリックします。

完成したプログラムをM5Stackに書き込む

プログラムの作成中は何回も直して実行を繰り返す（プロトタイピング）のでパソコンにM5Stackを接続した状態で行います。

この場合、パソコンにつながっているときだけ[▶Run]でプログラムを実行できます。しかし、パソコンから切り離すと実行できなくなります。

プログラムが完成し、M5Stack単独でプログラムを実行する場合、プログラムをM5Stackに書き込む必要があります。

[ダウンロード]ボタンをクリックして、プログラミングをM5Stack本体に書き込みます。