Blynk アプリで 遠方から スマホ とESP32 の双方向リアルタイム同時通信

記事公開日:2017年6月21日
最終修正日:2017年9月9日

スポンサーリンク

こんばんは。

Twitter でもつぶやいていますが、前回の記事で、Arduino – ESP32 のWiFiClientSecure ライブラリで、数十回~200回程度、Web へ定期的に  connect  していると固まる現象が解決できなかったので、諦めて次に進もうと思います。

で、今回は、スマホアプリについて紹介します。
ある程度、聞いてはいたけど、実際使ってみて
「知らなかった~・・・」
という驚きのアプリの話題です。

Twitter の@ H0meMadeGarbage さんが Blynk というスマホアプリで ESP32 をリアルタイムコントロールしているのを見て、こんなに追従してくれるのなら自分も試してみようと思い立ったわけです。
H0meMadeGarbageさんの以下のブログ記事もご参照ください。

http://homemadegarbage.0t0.jp/pov-sphere08

Blynk というアプリは今までいろいろな方が使っているのはネットで見てはいたのですが、いつくかのアイテムが無料で、追加すると有料というところが、私にとっては敷居が高く、使おうという気にはなれなかったんです。

以前、私は自作ライブラリを作って、ESP32 と Wi-Fi リアルタイム双方向通信をやったことがあります。
以下の2つの記事をご参照ください。

ESP32 -DevKitC ( ESP-WROOM-32 )でスマホとWi-Fi リアルタイム双方向同時通信
オブジェの LED カラー を スマホ ブラウザ で WiFi リアルタイム コントロール してみた

これである程度満足していましたし、果たして同じようにここまで追従するのかという疑問もあって、今まで手を付けずにいました。

ところが、ところが・・・、

実際やってみると、何とも・・・、GREAT!!!
実にスバラシかったんです。

一番感動したのは、ローカルエリアだけでなく、3G や 4G 回線を使って、世界中のどこからでもリアルタイム操作が可能なことです。
ネットのつながる Wi-Fi環境さえあれば、地球の裏側からでも操作可能です。
しかも、リアルタイム双方向同時通信です。

クラウド系アプリというと、リアルタイム性は無く、連続データ送受信はまだ無理だろうと思っていました。
しかし、やってみると、意外とイイんです。
トラフィックを軽減するために、インターバルは長めですが、3G、4G回線などを使って地球の裏側から操作するには十分な追従性です。

私が作った Websocket ライブラリでは、ローカルエリアネットワーク(LAN) のみの対応だったので、これは新鮮でした。
しかも、Arduino スケッチも簡単!!!

それに、もう一つ特筆すべきは、複数の端末から同時に操作できて、複数の端末にセンサー値が返ってくるんです。
いゃぁ~・・・、これには参りましたね。
自分でそれを作って実現しようとすると、途方もない作業になります。
お見事!!!

やはり、実際にやってみるのとやってみないのとでは大違いですね。
改めて実感した次第です。

では、これの使い方を説明してみようと思います。

準備するもの

ESP32 – DevKitC ( ESP-WROOM-32 開発ボード )

私は秋月電子通商さんで購入しましたが、Amazonさんでも以下の販売店にありました。

CdSセル 1MΩ GL5528

ESP32_EWS_CdS_02

手元にあったものを使いましたが、Amazon.co.jp では以下で販売していました。
因みに私はここでは買ったことがありません。

定電流ダイオード E-103

マルツさん販売の定電流ダイオードがお勧めです。
10mAです。

1/4W 100kΩ程度の固定抵抗

100kΩ程度なら何でもよいと思います。

ブレッドボード SAD-101 (サンハヤト)

このブレッドボードは ESP32-DevKitC を載せても、片側1列、もう片側2列空くのでとても重宝しています。

日東 自己融着粘着テープ

電気工事でよく使うブチルゴムテープです。
LEDとCdSセルをくっつける時に使います。
ビニールテープみたいに粘着剤でくっつけるのではなく、粘土みたいに融着できるので便利です。

出来るだけ高速CPU の最新スマホ

双方向リアルタイム通信を行う為、出来るだけ最新の高性能CPU スマートフォンが良いです。

インターネットにつながった Wi-Fi ルーター環境

事前にインターネットにつながった Wi-Fi ルーター(アクセスポイント)環境は構築しておいてください。
インターネットにつながっていないと、Blynk が動作しません。
それに、ESP32 – DevKitC がセキュリティーで弾かれないように、ファイアウォールやMACアドレスフィルタリングなどの設定は済ませておいてください。

ジャンパーワイヤー、パソコン、USBケーブル等

ESP32 – DevKitC の接続

GPIO に接続した LED の明るさを光センサーの CdS セルを通して電圧値を AD コンバーターで読み取るという簡単な回路です。

ESP32_Blynk_01

実際に接続した写真はこんな感じです。

ESP32_Blynk_02

CdSセルに自己融着テープでくっ付けています。
これは、外部の光を遮断して、LED の光だけセンサー値に反映させたいためです。
それでも環境光に影響されてしまいます。
ESP32_EWS_CdS_12
付け方は以下の記事を参照してください。

ESP32 -DevKitC ( ESP-WROOM-32 )でスマホとWi-Fi リアルタイム双方向同時通信

Blynk について

まだ使い始めて間もなく、良く分からないのですが、ザッと説明します。
本家のページは以下のリンクです。

http://www.blynk.cc/

2015年2月から「KickStarter」で資金を募集してできたプロジェクトらしく、オープンソースライセンスの MIT だそうです。
通信は、昨今の流行りのクラウドサーバーを経由して行います。

大まかな概念図は以下のような感じです。

ESP32_Blynk_03

Blynk専用クラウドサーバーを経由しますので、ネットが繋がるWi-Fi 環境さえあれば、世界中のどの地域からでも通信が可能です。
Bluetooth 通信も可能らしいのですが、私はまだ試していません。

アプリは、Android と iPhone 用がありますが、デスクトップやノートパソコンは基本的に操作できません。

スマホアプリは無料でインストールすることができ、数種類のアイテムならば無料で使うことが出来ます。
それ以上アイテムが必要な場合は有料になります。

そして、ESP32 や ESP8266 は Arduino で開発ができます。
Arduino ライブラリをインストールする必要があります。

スマホにBlynk アプリをインストール

まず、Android スマホの場合は Play ストアから以下のリンクをタッチしてください。
インストールは無料で、数種類のアイテムを無料で使うことができます。

Blynk - Arduino, ESP8266, RPi
Blynk - Arduino, ESP8266, RPi
Developer: Blynk Inc.
Price: Free+

iPhone の場合は App Store から以下のページをタッチしてください。
こちらもインストールは無料で数種類のアイテムを無料で使うことができます。

以下、インストール方法は Android (アンドロイド)で説明します。

Play ストアで、以下のようにインストールをタッチして、インストールします。
終了後は「開く」をタッチします。

ESP32_Blynk_10

スマホ側 Blynk の設定

アカウントの登録

まずは、Blynk アカウントを作成します。
Facebook アカウントを使わない場合で説明します。
ご自分のメールアドレスを用意し、パスワードを事前に考えておいて、下図の様に入力してください。
Sign UP をタッチすると登録完了し、すぐにプロジェクト作成画面へ移行します。

ESP32_Blynk_11

新規プロジェクトの作成

まず最初に、プロジェクトというものを作成しなければなりません。
下図の様に、「New Project」をタッチ

ESP32_Blynk_12

次に、下図の様にプロジェクト名を好きな名前で入力し、Device は ESP32 Dev Board を選択してください。

ESP32_Blynk_13

次に、Connection Type を WiFi にして、「Create」ボタンをタッチすると下図の様なメッセージウィンドウが表示されます。
「OK」をタッチすると、ご自分のメールアドレスに Auth コードが送られてきます。

ESP32_Blynk_14

下図が送られてきたメールの内容です。
Auth コードは Arduino スケッチに入力するものですので、大切に保管しておいてください。
もし、無くした場合はプロジェクトを新たに作り直せば、また別の Auth コードが送られてくるので、あまりシビアになる必要はありません。

ESP32_Blynk_15

スマホから送信するコントローラーの設置

次に、スマホ側から操作するコントローラーを設置します。
ここでは、LED を連続調光コントロールするためのスライダーを設置してみます。

test という名前のプロジェクトを作成すると、下図の左のようになり、タッチするなりスワイプするなりするとアイテムが表示されます。

ESP32_Blynk_16

そして、下図の様に「 Slider 」をタッチするとスライダーが自動配置されます。

ESP32_Blynk_17

再度、空白にタッチするなり、スワイプさせると、下図の様に電池マークの Energy が減っています。
Slider は 200 Energy なので、残り 1800 Energy となっています。
つまり、2,000 Energy まで無料で使えますので、それ以上使いたい場合は「+Add」ボタンをタッチして追加すればよいわけです。

ESP32_Blynk_18

スライダーアイテムをタッチすると、下図の様に設定画面が出てきますので、OUTPUT のところのPIN のところをタッチします。

ESP32_Blynk_19

すると下図の様な画面になるので、Virtual の V0 に設定します。
これは、後で述べる Arduino IDE スケッチで使うハンドル名です。
スライダーを操作する毎に送信するデータは 100ms のインターバルを置いて送信するようにします。
これが最速です。
それ以外に PUSH というものがあるのですが、通信トラフィックを圧迫して、まともに操作できないので、100ms 以上にします。
LED は スケッチ上で sigmaDelta 関数を使うので、0-255 の範囲の値としておきます。

ESP32_Blynk_20

次に、下図の様にアイテムを長押しすると、位置を自由に変えられ、大きさも変えられます。
これは便利ですね。

ESP32_Blynk_21

ESP32 側からの受信データを表示するアイテムの設置

では、ESP32 – DevKitC 側から送信されてくるデータを表示させるアイテムを設置していきます。

例えば、下図の様に Level H というアイテムを選択します。
これは、水平表示のレベルメーターです。

ESP32_Blynk_22

そして、アイテムを長押しして好きな位置と大きさに設定し、下図の様に Virtual を V1 にします。
センサー値はとりあえず下図の様にしておいて、後で LED の明るさを見ながら調整していきます。
Reading Rate は 1秒以上に設定します。
通信トラフィックを軽減させるためには 1秒以上ないとフリーズしてしまうので、止むを得ないでしょう。

ESP32_Blynk_23

また、下図の様にアイテムの色を変えることができますので、いろいろ試してみて下さい。

ESP32_Blynk_24

Arduino IDE および、Arduino core for the ESP32のインストール

Arduino IDE は 1.8.2 で動作確認しましたのでそれをインストールすることをお勧めします。

Arduino core for the ESP32 のインストール方法については以下の記事を参照してください。
Arduino core for the ESP32 は最新版を使うようにしてください。
頻繁に更新されていますので要注意です。

Arduino core for the ESP32 のインストール方法

Arduino IDE に Blynk ライブラリをインストールする

今度は Arduino IDE に Blynk ライブラリをインストールします。

先ほど、スマホに Blynk アプリをインストールしてプロジェクトを作成した時に送られてきたメールを見てみて、そこに下図の様にライブラリのリンクがありますので、そこをクリックします。
すると、ZIPファイルが自動ダウンロードされます。
(Windows の場合)

ESP32_Blynk_15

そのZIP ファイルを以下の記事を参照して、Arduino IDE にインストールしてください。

GitHubにある ZIP形式ライブラリ のインストール方法 ( Arduino IDE )

ただし、この場合は ZIP ファイルを直接インストールできないようです。
その場合、ZIPファイルを解凍すると、libraries とtools フォルダがありますので、それをコピーする必要があります。

Windows 10 の場合、以下のようなパスになります。

C:\Users\ユーザー\Documents\Arduino\libraries
C:\Users\ユーザー\Documents\Arduino\tools

そこに下図の様な必要なファイルをコピーすればインストール完了です。

ESP32_Blynk_25

ESP32_Blynk_26

その後、Arduino IDE を起動してください。

Arduino IDE にスケッチを入力

では、Arduino IDE に以下のサンプルスケッチを入力してみてください。

#define BLYNK_PRINT Serial

#include <WiFi.h>
#include <WiFiClient.h>
#include <BlynkSimpleEsp32.h>

char auth[] = "xxxxxxxxxxxxx"; //Blynkから送られてきたメール内にある Auth コード
char ssid[] = "xxxx"; //ご自分のルーターの SSID
char pass[] = "xxxx"; //ご自分のルーターのパスワード

const uint8_t LED_pin = 27; //LED GPIO #27
const uint8_t ADC_pin = 34; //AD converter GPIO #34

void setup()
{
  Serial.begin(115200);

  Blynk.begin(auth, ssid, pass);

  sigmaDeltaSetup(0, 312500);
  sigmaDeltaAttachPin(LED_pin, 0);
  sigmaDeltaWrite(0, 0); // LED OFF ( level 0 )
}

void loop()
{
  Blynk.run();
}

BLYNK_WRITE(V0){
  //スマホ側 Blynk アプリで設定したスライダー値の受信
  int LED_level = param[0].asInt();
  sigmaDeltaWrite(0, LED_level);

  Serial.printf("LEDpin#%d = %d\r\n", LED_pin, LED_level);
}

BLYNK_READ(V1){
  //スマホ側 Blynk アプリで設置したレベルメーターに ADC値を送信
  int adc = analogRead(ADC_pin);
  Blynk.virtualWrite(V1, adc);

  Serial.printf("adc = %d\r\n", adc);
}

【解説】

●1-5行目:
これは、Blynk のサンプルスケッチそのままです。

●7行目:
ここで、先ほど説明した Blynk から送られてきたメールにある、Auth コードを入力します。

●20-22行:
LED をPWM 制御して明るさをコントロールするための関数です。
Arduino core for the ESP32 のサンプルスケッチを流用しました。

●30-36行:
ここで、スマホ側の Blynk アプリで設置したスライダーから送られてきたデータを受信して、それを sigmaDeltaWrite 関数へ代入して、LED を調光させます。
シリアルモニターにも値を出力しています。
この関数で V0 という値を持っていて、スマホBlynkアプリのスライダーの V0 とリンクしているわけです。

●38-44行:
ここで V1 という値を持っていて、スマホBlynk アプリ側のレベルメーターの V1 とリンクしています。
光センサーの CdS セルを通した電圧値をGPIO #34 で読み取り、analogRead で 12bit ADコンバーターで変換します。
それを41行でスマホ側へ送信しているわけです。
ここでも V1 という値が使われていることに注意してください。

以上、スケッチはとってもシンプルで簡単ですね。

コンパイル書き込み実行

では、インターネットにつながった Wi-Fi ルーターを立ち上げて、しばらく経ってからコンパイル書き込みおよび実行してみてください。
ルーターの設定のファイアウォールや、MACアドレスフィルタリングを設定している方は、ESP32 – DevKitC が弾かれないように設定しておいてください。

コンパイル終了して、間髪入れずにシリアルモニターを 115200bps で起動するとこうなります。

ESP32_Blynk_27

こんな感じで表示されれば、ESP32 ( ESP-WROOM-32 )と Blynk サーバーと通信ができているということになります。

次に、スマホ Blynk アプリ上で下図の様なところをタッチして操作してみてください。
すると、ESP32 ( ESP-WROOM-32 )と通信開始します。

ESP32_Blynk_28

停止する場合は下図の四角をタッチすると停止します。

ESP32_Blynk_29

では、これの動作している様子を動画でご覧ください。
レベルメーターやスライダーの最小値や最大値を途中で修正している様子が分かると思います。
使っているスマホは、Android 7.0 で、
SONY Xperia X Performance SO-04H
です。

いかがでしょうか。
最小値、最大値の値修正も簡単ですね。
ほんとに素晴らしいアプリだと思います。

では、複数の端末でこれを操作したらどうなるのでしょうか?
以下の動画をご覧ください。
手前のスマホが4G 回線で、もう一つがインターネットにつながった Wi-Fi 回線で接続されています。
使っているもう一方のスマホは、3年前の Android 6 スマホです。

どうですか?
これ、素晴らし過ぎませんか?

他の端末もプロジェクトが同じならば値が即座に更新されていますね。
4G回線は多少追従性が悪いですが、これだけ追従していれば文句なしです。
これができれば、いろいろなリモートコントロールが想像できますね。
いゃぁ~・・・スゴイっす!!!

まとめ

いかがでしたでしょうか?

このBlynk というアプリは今まで見向きもしなかったのですが、使ってみるとあまりの素晴らしさに感動してしまいました。
もっとリアルタイム性があっても良いかと思いましたが、3G、4G回線を使ってもある程度追従していて、複数端末のデータも即座に更新されるとあれば、「あっぱれ」としか言いようがありません。

自分もこんなアプリを作りたかったんだと思いました。
双方向通信の WebSocket ライブラリを作ったりしましたが、やはり通信トラフィックがネックで、インターバルを取って通信しないと双方向通信は難しいんだということが改めて分かりました。
私が作っていたことと同じセオリーでこのBlynkアプリが作られていて、
「やっぱりそうなんだ!」と納得しながら使っていた次第です。

とりあえず、これを使えば、地球の裏側のデバイスとリアルタイム双方向通信ができますね。
介護や農業分野にも大いに役立ちそうです。

Blynk の他にもクラウド系アプリが沢山ありますが、これは大変な世の中になったものだと実感した次第です。

ということで、今回はここまでです。

ではまた・・・。

mgo-tec電子工作 関連コンテンツ ( 広告含む )

スポンサーリンク

Amazon.co.jp 当ブログのおすすめ







投稿者:

mgo-tec

Arduino , ESP32 ( ESP-WROOM-32 ) , ESP8266 ( ESP-WROOM-02 )等を使って、主にスマホと連携した電子工作やプログラミング記事を書いてます。ライブラリも作ったりしてます。趣味、独学でやってますので、動作保証はしません。 電子回路やプログラミングの専門家ではありません。 畑違いの仕事をしてます。 でも、少しだけ電気の知識が必要な仕事なので、電気工事士や工事担任者等の資格は持ってます。

コメントを残す

メールアドレスが公開されることはありません。

*画像の文字を入力してください。(スパム防止の為)