概要
IoTLTアドベントカレンダー10日目となります。よろしくお願いします！
もうすぐクリスマスですね。この記事では先日開催されましたクリスマス電子工作ハンズオン！Noodlもくもく会
そこでサンプル用に準備した「もくもくサンタさん1」を紹介します。
当日のもくもく会でも色々とVerUPしていましたので、どんどん改造して遊んでみてください。
もくっと召喚されるサンタさんはこちら
#Noodlもくもく会 もくもく会で作ったサンタさん pic.twitter.com/A2uOsF6Zpp
— macolent (@macolent1) December 5, 2020
画面構成
携帯・PCの窓に映る雪景色と1つのもみの木。
手元のボタン(M5Stack)を押すとひょこっとサンタさんがプレゼントをもって現れます。
サンタさんにさわる(クリックする)と、サンタさんが窓の外のもみ木ライト、現実世界のLEDライト(Neopixel)を灯してくれます。
別のボタンを押すとサンタさんは帰っていきます。
システム構成
携帯・PC画面をビジュアルプログラミングツールNoodlで作成し。手元のボタンにM5Stackを使っています。
M5Stack側のボタンをトリガーとして、MQTTメッセージをNoodl側に送信しています。
今回はMQTTブローカに[shiftr.io]を使いました。
また、画面のクリック情報を検知しMQTTメッセージをM5Stackに返しています。
M5Stack側ではMQTTメッセージを受取ると、UNITとして取り付けたNeopixelのLEDを点灯させています。
用意するもの
以下の材料をお手元にご用意ください。
| 材料 | 種類 | 購入先 |
|---|---|---|
| M5Stack本体 | M5Stack、M5StickC、Atomなど | スイッチサイエンス |
| NeoPixel互換LED | 六角形ユニット、LEDテープなど | スイッチサイエンス マルツオンライン |
サンプルファイルのダウンロード
Noodlもくもく会：Connpassページ下のほうにある資料欄のサンプルデータをダウンロードしてください
開発環境
今回はM5Stack、PC・携帯画面どちらもビジュアルプログラミング環境を使います。
UIFlowの環境構築
UIFlow自体はオンライン環境があるので環境構築は不要ですが、
M5Stack自体は以下リンクを参考に最新のフィームウェアの書込み、Wi-Fi設定、M5StackAPIキーの確認をしてください。
UIFlowのバージョンはどちらでも構いません。右側のBeta版は新しくおすすめです。
M5Stack側の設定
サンプルプログラムにはNeoixclの種類テープ型、Hex型のSampleデータが2つあります。手持ちの環境に合わせて選択して下さい
tape_LED_neopixel_sample.m5f
hex_LED_neopixel_sample.m5f
次にダウンロードしたサンプルをUIFlowの環境でファイルを読み込みます。今回はNeopixelがテープ型として進めます。
ハードウェアの設定：Neopixelの設定
Unitに表示されている「RGB LED」アイコンをクリックすると、接続しているM5のポートPortや、NeopixcelのLEDの数を変更することができます。
後はM5StackとNeopixelをGroveポートで繋げばOKです。
ソフトウェアの設定：MQTT通信の設定
使用するMQTTブローカに合わせてMQTTの設定を修正します。
今回は無料のMQTTブローカshiftr.ioを使用するので下記の部分を修正します。「Shiftr」の設定についてはこちらを確認ください。
|例|サーバ|ポート|ユーザID|パスワード|
|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
|例1|broker.shiftr.io|1883|自身のユーザID|パスワード|
|例2|xxxx.cloud.shiftr.io|1883|自身のユーザID|パスワード|
プログラムの実行
プログラムの実行は、右から2番目の矢印マーク(Run)でM5Stackへプログラムを転送・実行します。
この方法ではプログラムは電源を落とすと消えます。
電源を落としてもまたプログラムを実行したい場合は一番右のDownload：ダウンロードをしてください。M5Stackにファイルとしてプログラムが書き込まれます。
Noodlの開発環境構築
Noodlは、webアプリケーションをLow-codeで開発できるプラットフォームです。
ブラウザで動くwebアプリケーション（HTML / CSS / JavaScript / React で構築されたもの）が、「少ないコード記述」or「コード記述なし」で開発できます。
以下リンク先をご参考に、Noodlのインストールをお願いします。
### サンプルプログラムを開く
Noodl環境が準備できたら、下記手順に沿って先ほどダウンロードしたサンプルプロジェクトを開きます。
- プロジェクトのインポートをします：Import existing project
- 保存を選択します。今回はローカルを選択します:Save locally
- プロジェクト名は任意でOKです:Projectname
- ダウンロードしたプロジェクトを選択します。:Pick project folder
Noodlプログラムは3つの部品(コンポーネント)で構成されています。
MQTTサーバの設定を変更する
M5Stackと同じく、Noodl側のMQTTサーバ設定を行います。画面左のアイコンでギアマークがProjectSettingとなります。MQTT>BrokerURLを設定します。
broker.shitfr.ioの場合はプロトコルにmqtt://
新しいxxxx.cloud.shitfr.ioの場合はプロトコルにmqtts:// を設定する必要があります
携帯やタブレットから確認する
MQTT設定をすれば、Noodlのプレビュー画面から動作を確認することができます。
また、Preview in Browserに表示されているURLを携帯やタブレットで開くとNoodlの画面が表示されます。
DeployToFolderをするとHTML&Javascriptファイルを書き出すこともできるため、Webサーバにフォルダごとアップロードしてアプリケーションとしてそのまま利用することができます。
## おまけ
当日のもくもく会楽しかった！
ConnpassにNoodlもくもく会のページがあるので興味のある方は確認してみてください。
最後に、もくもく会のサンプルを改造した例を紹介して終わります。
ここまでお付き合いいただきありがとうございました。
- @youtoy さん：IFTTTを組み合わせてAlexaやGoogleアシスタントからサンタさんを召還されています。
- @kisaichi07 さん:JSON BOXとの連携で、MQTTメッセージのLogをCloud上に保存されています
- @macole ：UIFlowプログラムを改造しました。サンタさんでレインボー/サンタさんでゲーム。
- Hex型のNeopixelサンプルでは雪の結晶が光ります2
Hex型のNeopixelを光らせた場合
サンプルを改造したもくもくサンタさんレインボーとゲームのUiflowプログラム
明日は @Inoue_Minoru さんの投稿です。お楽しみに！