UiFlowでESPNOW通信をしよう!

初投稿です。あまり良い記事ではないかもしれませんがご容赦ください。

この記事の趣旨

この記事で取り扱うESPNOW自体はQiitaでも多く取り扱われています。しかしその多くは、自分でプログラムを記述するタイプのものです。そこで
「コードを書くことはできないけどプログラミングをしたい!」
「ESPNOW通信をしてみたいけどやり方がわからない」
という方のために、ブロックでESPNOW通信を行う方法をこの記事で残しておきます。
僕自身もコードが苦手で、ブロックでのESPNOW通信の方法を探すのに

ESPNOW通信とは

そもそもESPNOW通信ってなに？という方のためにざっくりと説明します。ESPNOW通信とはEspressif Systems（エスプレッシフ・システムズ）社が開発した通信方式です。一対一もしくは一対多で行う方式で、基本的にEspressif社で開発されたマイコンでのみ利用可能です。
例を挙げるとESP32、ESP8266、ESP32-S3、ESP32-C3などがあります。
詳しく知りたい方は下記のwebページで詳しく解説されているのでご参照ください。

必要な物

デバイス間で通信を行うのでマイコンを2つ用意してください。
ESPNOW通信ができて、UiFlowで開発できる物であれば何でも大丈夫です。
個人的にはM5シリーズのM5Stackをおすすめします。液晶画面が付いてるので、値や文字列を表示させたいときに便利です。

UiFlowとUiFlow2は別物です。この記事では取り扱いません。
気が向けばUiFlow2の方も解説記事を作ろうと思います。

僕はM5シリーズのM5Stack CoreとM5Stack Grayと呼ばれるものを使いました。
何が使えるかはこちらでも確認できます
https://flow.m5stack.com/

UiFlowの使い方

ESPNOW通信の前にUiFlowの使い方がわからない方のために解説します。ご存じの方は読まなくても大丈夫です。

初期設定
初期設定に関しては下記のページをご覧ください。

使い方
UiFlowはブロックの組み合わせによってプログラムをつくれる開発環境です。Scratchがかなり近い物だと思います。
使い方としては視覚的にブロックをつなげ合わせるだけです。ブロックの色は画面左側の縦に羅列されているもの(「イベント」や「ラベル」など)と対応しています。画面左に羅列されテイル部分は引き出しのようになっていて、クリックするとそれにまつわるブロックが見れます。言葉ではわかりづらいかもしれませんが、やってみれば大体わかります。

プログラミングの基礎
プログラムは最初に1度だけ実行される部分(Setup)とずっと繰り返す部分(loop)に分かれます
例えば"hello world"と画面に表示するだけであればプログラムは一度だけ実行されれば良いのでloopさせる必要はありません。

ですが、センサーの値を読み取ってそれを常に画面に表示させたい場合、センサーの値は常に変動するのでその都度読み取って表示する必要があります。その場合はloopで「センサーの値の読み取り」と「読み取った値の表示」を繰り返し実行します。

この基本的な概念がわかれば多分大丈夫です。

UiFlowでESPNOW通信を行う

本題です
UiFlowではESPNOW通信をする際、チャンネルと
とりあえず実例を見せながら解説します

送信側

簡単に解説すると、
1．「num」という変数を作って0する
2．「num」を1000ミリ秒(1秒)ごとに1増やす
3．「num」の値をリストにして相手へ送信する
というプログラムです。
Setupの次にあるブロックがESPNOWをチャンネル0のLIST型で初期化しています。チャンネルはお互い同じなら何でもいいです。LIST型で初期化するとデータはリストでしか送信できません。LIST型とは別にSTRING型があります。この場合は文字列しか送信できません。
さらにその下のブロックでは接続相手を指定しています。ピアに相手のデバイスのMACアドレスを入力します。IDはお互い同じなら何でも大丈夫です。一対多で通信する際はIDが被らないように設定する必要があります。MACアドレスを表示させる方法は受信側で説明します。

受信側

こちらは
1．ラベル0を用意してMACアドレスを表示する
2．受信データを「data」(リストになってる)という変数に入れる
3．ラベル1を用意して「data」の最初の値を表示する
というプログラムです。
Setupの下にあるブロックでラベル0に取得したMACアドレスを表示させています。このときに画面に表示されるものがそのデバイスのMACアドレスです。MACアドレスは個体ごとに1つ決まっています。
「受信コールバックを有効化」とあります。受信コールバックとはなにかのデータを受信したときに実行されるプログラムのことです。受信したときにのみ実行されます。受信したかどうかをloopでずっと監視しなくても、受信コールバックを決めておくことで受信したかどうかがわかります。この場合、
「受信したデータを「data」に入れてラベル1に表示させる」
というのが受信コールバックです。

結果

これらのプログラムを実行すると送信側と受信側の両方に同じ数字が表示され、それが1秒ごとに1増えていきます。特にエラーも無く、問題なく実行されます。しかし、このプログラムでは送信側の値が256になると受信側が0になります。
UiFlowのESPNOWに関するブロックでは、値を勝手に1バイト(8ビット)の整数として解釈して送信します。1バイトで表現できるのは0～255までです。255は2進数で11111111(1が8つ)と表現されます。256は2進数で100000000(1が1つと0が8つ)と表現されますが、1バイトで解釈されるので、9ビット目の1は切り捨てられます。つまり00000000(0が8つ)として解釈されてしまうのです。
これは一般にオーバーフローと呼ばれる現象で、根本的に解決しようとなると自分でコードを変えるしかないようです。　^q^＜ｵﾜﾀ
もしブロックプログラミングだけでこの問題を解決できる方法があればぜひ共有してほしいです。

まとめ

かなりざっくりとした説明になってしまいました。分かりづらいところもあると思います。ですが、基礎的な部分が理解できれば、後は少し応用するだけだと思うので、そこまで難しいものでもないはずです。最後に僕がESPNOW通信でラジコンを作ったときのプログラムを置いておきます。やりたいことにもよりますがあとはそちらの方で頑張ってみてください。

送信側

受信側

プログラムの解説
1．送信側のM5Stackのジャイロセンサーからデバイスの角度を読み取って送信
2．受信側のM5Stackが角度の大きさに応じてモーターの出力を変える
サーボモーターがステアリングで、DCモーターが前後移動です
参考程度にどうぞ