2021/08/23
M5Stack向けのVisual Programming「UIFLOW」でカスタムブロックを作成する
M5Stackについて
← M5Stackはこんなやつ。
M5Stackとは、ESP32を使用しwifi/LCD/各種センサなどを一体化させた、使いやすいマイコンボードです。
LCDが標準装備なのが一番の特徴かと思います。
センシングした値を表示させたり、顔をつけてみたりと、いろいろ遊べます。
参考 公式HP
UIFLOWについて
UIFLOWとは、M5Stackのプログラミング環境の一つで、スクラッチのようにビジュアルプログラミングでM5Stackのコードが書ける優れものです。
更にwebベースでプログラミングできるので、プログラム環境の準備がいりません。
使い方、プログラミングの仕方などは下記のHPを参照ください。
参考1 公式HP
参考2 プログラミングページ
UIFLOWでは、事前に用意されたブロックを組み合わせてプログラミングしますので、ブロックに用意されていない機能は、自分でカスタムブロックを作る必要があります。
以降、UIFLOWでカスタムブロックを作成する方法を記載しています。
カスタムブロックのサンプル
githubにWAVファイルを再生するためのカスタムブロックをあげています。
カスタムブロックの作成手順
こちらのカスタムブロック作成ページから作成します。
作成手順は
- Pythonでプログラムを書く
- 初期設定用のブロックを作る
- 関数を実行するブロックを作る
1. Pythonでプログラムを書く
まずはブロック化したい機能のプログラムをpythonで書きます。
以下のように処理はdefで定義して、関数として呼び出しできるようにしておきます。
from machine import I2S
from wav import wave
def playwav(filePath,volume):
wav = wave.open(filePath)
i2s = I2S(mode=I2S.MODE_MASTER | I2S.MODE_TX | I2S.MODE_DAC_BUILT_IN)
i2s.set_dac_mode(i2s.DAC_RIGHT_EN)
i2s.sample_rate(wav.getframerate())
i2s.bits(wav.getsampwidth() * 8)
i2s.nchannels(wav.getnchannels())
i2s.volume(volume)
while True:
data = wav.readframes(256)
if len(data) > 0:
i2s.write(data)
else:
wav.close()
i2s.deinit()
break
2. 初期設定用のブロックを作る
import、defを行うブロックを作成します。
このブロックは最初のsetupで実行するものです。
1章で作ったようなプログラムをBlock Code欄へ丸コピします。
- NameSpace：Blockmaker上だけの識別名なので何でもOK
- BlockColor：ブロックの色を設定
- Add Block/Remove Block：ブロックの追加・削除
- Type：Executeにする
- Parameter：まずブロック名をtype:Labelで設定する
変数があれば、type:String/Number/Variableで設定する - BlockCode：作ったプログラムをコピペ
3. 関数を実行するブロックを作る
defで定義した関数を実行するブロックを作ります。
Add Blockをクリックするとブロックが増えますので、設定していきます。
引数がある場合は、parameterで設定します。
- NameSpace：Blockmaker上だけの識別名なので何でもOK
- BlockColor：ブロックの色を設定
- Add Block/Remove Block：ブロックの追加・削除
- Type：Executeにする
- Parameter：まずブロック名をtype:Labelで設定する
変数があれば、type:String/Number/Variableで設定する - BlockCode：自作関数の呼び出しを行う
引数は上記のParameterで設定して、
BlockCode内で"$(hoge)"の形で記述する
ex)playwav(${playwav},${volume})
完成したら
ページ右下のDownloadボタンをおして、DownloadファイルをUIFLOWのプログラミングページのCustomから開きます。
そうすると、UIFLOWで自作のカスタムブロックが使用できるようになります。
以上です。