ESP-01をWiFiBridgeで使って見ました。
ESP-01の次の応用として、ESP-01にWiFiとUartのBridgeを行う機能を
搭載してスマホからホストPC経由のWiFiでfirmataを搭載したUNOを
コントロールする方法を検討して見ました。ホストPC用にはJavaScriptを
利用したNode.jsとJohnny-fiveが用意されていて、これらを利用すると
上手くWiFiのIOTが実現できるのが判りました。Arduinoは懐が深い様です。以下が検討した内容です。
＜ESP-01 の WiFi Bridge での利用＞
ESP-01をWiFiとUartを繋ぐBridgeとして利用し、従来はPCのUSBから
USBtoTTLのデバイスを繋いで利用していたUNOのfirmataを、同じ様に
WiFiを通して利用する方法を検討しました。
[全体の構成]
１．UNOには「StandardFirmata」を実装
２．ESP-01にはWiFiをUartに変換するBridge機能を実装
（今回開発したもの）
３．ホストPCにはNode.jsを実装し、合わせて次の３つのパッケージも
インストール （etherport-client, socket.io, johnny-filve）
４．HTTPサーバとしてはApacheを実装し、http.conf を必要に応じて
編集してHTTPサーバのルートにHTMLとJavaScriptのファイルを置く
５．ESP-01+UNO、HTTPサーバルートのJavaScriptファイルを
起動して、スマホからHTTPサーバを呼び出す
[使用した主要部品]
１．ESP-01 WIFI 基板
２．Arduino UNO
３．Proto shield for UNO & MEGA
４．SSD1306 0.96" OLED (I2C対応品）
（SSH1106 1.3" OLED でも可能、また、無しでもシリアルモニタ
から割り付けIP等の確認が可能）
５．手作りのオリジナルI/Oテスト基板
(Red & Green LED, slide switch, pre-set resister が実装)
[動作状況]
動作状況は次のURLから確認できます。
＜関連資料＞
ESP-01のWiFiBridgeのコード作成には次のURLからのものを参考に
しました。 (UNOからのUart受信部分を変更して、ネットワークの
SSIDとパスワードの設定機能とOLEDへの表示機能を追加しました。）
URL : https://github.com/NaoNaoMe/ESP8266-WiFi-UART-transparent-bridge
Node.js URL : https://nodejs.org/
Johnny-five URL : http://johnny-five.io/
Apache URL : http://httpd.apache.org/
JavaScriptのリファレンスとしては次のものを参考にしました。
URL : http://rfs.jp/sb/javascript
URL : http://www.tohoho-web.com/js/
Node.jsとSocket.ioの使い方に関しては次のものを参考にしました。
URL : http://l-w-i.net/t/arduino/socketio_001.txt
WiFiからJohnny-fiveをコントロールする方法は次のものを参考に
しました。
URL : http://make.kosakalab.com/make/electronic-work/js_robotics_wifi/
＜テスト内容と結果＞
ESP-01のWiFiBridgeでの利用に関しては次の様な内容で、スマホから
WiFiでUNOに目的の動作を行わせる事にしました。
１．UNOに接続されたLEDのON/OFFの制御
２．スマホのスライドバーでのUNOに接続されたLEDの明るさの制御
３．スマホからUNOに接続されたアナログおよびデジタル入力の確認
動作させた結果としては、次の様なものでした。
１．WiFiBridgeを利用した場合でも、ホストPCのHTTPサーバのHTML
ファイルへの記述内容で様々な表現ができる事が判りました。
２．また、socket.ioを利用する事により、スマホからの操作が時間遅れ
無しにWiFiBridgeの端末に伝えられる事も判りました。
３．WiFiBridge端末側の具体的な操作に関しては、ホストPC上に
置くので複雑な操作でも端末側のメモリへの心配なしに使える
ので、その点は楽になると感じました。
４．でも、スマートな操作を実現するには、HTMLとJavaScriptに
対する知識が要求され、自分には更に勉強が必要な事が
判りました。（既にこの方面の知識が十分な方々には非常に
面白い手段かとも思いました。）
[テストでの機器の接続]
上記のUNOの0(RXD)と1(TXD)端子の接続に関しては、ESP-01側の
準備と設定が済んでWiFiBridgeの機能を利用する時のもので、ESP-01
側の準備と設定の段階では別の接続となります。（下記参照。初期段階
では、この部分が変更できる様にしている事が必要です。）
[起動方法]
テストの起動は次の操作で行います。
１．ESP-01にWiFiBridgeのプログラクを書き込む（下記参照）
２．Network SSID とその Password を設定（下記参照）
３．UNOにStandardFirmataを書き込む（書き込む時の配線は下記を
参照）
４．UNOのRXD／TXDの配線を元に戻して、UNOのリセットを押して
モジュール全体を再起動
５．ホストPCにNode.jsと追加パッケージをインストール（下記参照）
６．ホストPCにApacheをインストールしコンフィグレーション
ファイルを設定する（下記参照）
７．必要に応じて、PCからのWiFiBridgeの動作を確認（下記参照）
８．ホストPCのHTTPのルートにダウンロードしたファイル
（index.html/server.js)を置き、サーバを起動する
９．ホストPCのHTTPルートに有るserver.jsをコマンドプロンプトから
起動する
１０．スマホからホストPCのHTTPルートを呼び出す。（ポート番号の
設定が必要）
http://192.168.xx.yy:8000/ ; (コードをそのまま利用する場合は
ポート番号は8000番）
(server.jsとApacheが起動していないとアクセスできません、
Apacheが動いているとポート番号無しでindex.htmlの内容のみは
表示されます。）
ホストPCのIPアドレスはコマンドプロンプトで「ipconfig/all」を
実行すれば確認可能です。
[コード類]
コード類は次のURLからダウンロードできます。
Code download URL : https://www.dropbox.com/s/vczhyigbx0x3qzl/WiFiUartBridge.zip?dl=0
その内容の内訳は次の様になります。
- ESP-01 /ESP-01_WiFi_Uart_Bridge --- ESP-01 WiFiBridge source code
/ESP-01_WiFi_Uart_Bridge_flasher --- ESP-01 WiFiBridge
binary code &
code write program
- UNO /UNO_TXD_release --- UNO set code for ESP-01 flash
writing period
- HostPC /Http_Server --- Put them to the Host HTTP server root
(HTML&JavaScript)
/LED_Blink --- Test JavaScript to blink LED on the UNO
with WiFi
＜HostPC側の準備と設定＞
[Node.jsのインストール]
１．上記のNode.jsのページからダウンロードしてインストール
２．コマンドプロンプトを起動して次の２つでバージョンが正しく
出るのを確認
node --version <--- Node.jsのバージョンを確認
npm --version <--- npmのバージョンを確認
３．追加で次の３つのパッケージをインスト―ル
npm -g install etherport-client
npm -g install socket.io
npm -g install johnny-five
４．上記のインストール先のパスを設定（システム環境変数に追加）
NODE_PATH = C:\User\xxxx\AppData\Roaming\npm\node_modules
[Apatcheのインストール]
１．上記のApacheのページからダウンロードして展開
２．展開後のApacheのフォルダを希望のディレクトリに配置
３．「(インストールしたディレクトリ)\Apachexx\conf\」に有る
「http.conf」を編集
(CドライブのルートにApachexxのフォルダを置けば編集は不要、 ドキュメントのルートはApachexx\htdocsとなります。）
４．配置と編集が完了したら、Apacheを起動
管理者モードでコマンドプロンプトを開いた後、
「Apachxx\bin」に移動して
httpd -k start <--- 起動
httpd -k stop [or shutdown] <--- 停止
（起動状態はPCの再起動後も継続されます。）
＜ESP-01側の準備と設定＞
[ESP-01とUNOのUart接続]
ESP-01とUNOのUartの配線は、WiFiBridgeの機能実装までに次の３の
状態に変更します。
１．接続の切り離し
UNOのflashにプログラムを書き込む時にこの状態にします。
２．TX／RXの入れ替え
USBtoTTLの出力をESP-01に接続して、ESP-01のflashへの
書き込みやESP-01にSSID/Passwordを設定する時にこの状態に
します。ただし、この状態の前には上記１の接続でUNOのTXDを
入力状態にしてUNOのTXDとESP-01のTXが競合しない為の
プログラムをUNOに書き込んで置く必要が有ります。
３．UNOとESP-01との正常接続
UNOとESP-01を接続してWiFiBridgeの機能を実現する時に
この状態にします。USBtoTTLの出力との競合に関しては、
USBtoTTLのチップの出力に1KΩの抵抗が挿入されているので、
それで対応させる事としています。
[ESP-01へのコードの書き込み]
ESP8266の開発環境をお持ちの方は、「ESP-01_WiFi_Uart_Bridge」の
コードを書き込む事でも対応可能です。開発環境をお持ちでない場合は、
次の方法でコンパイル済みのバイナリコードを書き込む事ができます。
１．Uartの接続を１にしてUNO_TXD_releaseのコードをUNOに
書き込む
次のESP-01への書き込み時にポート番号の設定が必要と
なりますので、ここで確認して置いて下さい。
２．次にUartの接続を２にして、ESP-01を書き込みモードに設定
書き込みモード：ESP-01 Reset SW と GPIO0 GND SW を押し、
先にESP-01 Reset SW を離す
３．Arduino IDE を閉じて、ESP-01_WiFi_Uart_Bridge_flasher\
esp8266_flasher.exeを開き、ポート番号、書き込みファイルを
設定して「Download」を実行してバイナリコードのESP-01への
書き込みを行う
[Network SSID & Password の設定]
１．Uartの接続を１にしてUNO_TXD_releaseのコードをUNOに
書き込む（上記の１と同じ）
２．書き込み後、Uartの接続を２にする。（ESP-01の書き込み後は、
そのまま利用可能）
３．Arduino IDE を起動してシリアルモニタを開き、57600bpsを
設定する
４．ESP-01 Reset Switch を押して、ESP-01を再起動する
５．シリアルモニタ上にSSID/Password 設定モードにする問い
合わせが出るので"y"を押す（５秒以内に）
６．以後、画面に従ってネットワークの SSID とパスワードを
設定する。（SSID/Passwordは記憶されるので、ネットワーク
を変えない限りは再設定不要）
７．SSID/Passwordの設定が終了したら、Uartの接続を一旦
切り離して１の状態にしてUNOにStandardFirmataを書き込む
８．StandardFirmataの書き込みが終了したら、Uartの接続を
本来の３に戻して、UNOのリセットでモジュール全体を
再起動させる。
＜WiFiBridgeの動作確認＞
WiFiBridgeの機能を直接ホストPCから確認するには次の２つが
利用できます。
１．Microsoftストアの「Windows Remote Arduino Experience」を使う（無料）
アプリのインストールが完了して、WiFiBridgeのモジュールを
起動したら、アプリを開きNetworkの接続でWiFiBridgeに
割り当てられたIPアドレスとポート番号を設定して
「Connect」を押します。
接続が完了したら、画面が次の様に変わり、UNOの各ポートが
画面上からコントロールできます。
２．テスト用のLED_Blink（Lチカ）を利用する
ダウンロードしたHostPC\LED_Blink フォルダにこちらで
利用したチェック用のスクリプトが有ります。このファイルの
IPアドレス（とポート番号）の部分をご利用のアクセスポイント
から割り振られたものに変更してNode.jsから実行すると確認
できます。（コマンドプロンプトから「node WiFi_blink.js」 を
実行）
＜その他＞
今回利用した部品のいくつかは先のESP-01のATコマンドの検討で
使用したものを流用しています。その為、テスト基板の回路図やOLEDの
改造等はここでは書いていません。必要で有ればこちらの記事で御確認
下さい。(Related article is here.)
搭載してスマホからホストPC経由のWiFiでfirmataを搭載したUNOを
コントロールする方法を検討して見ました。ホストPC用にはJavaScriptを
利用したNode.jsとJohnny-fiveが用意されていて、これらを利用すると
上手くWiFiのIOTが実現できるのが判りました。Arduinoは懐が深い様です。以下が検討した内容です。
＜ESP-01 の WiFi Bridge での利用＞
ESP-01をWiFiとUartを繋ぐBridgeとして利用し、従来はPCのUSBから
USBtoTTLのデバイスを繋いで利用していたUNOのfirmataを、同じ様に
WiFiを通して利用する方法を検討しました。
[全体の構成]
１．UNOには「StandardFirmata」を実装
２．ESP-01にはWiFiをUartに変換するBridge機能を実装
（今回開発したもの）
３．ホストPCにはNode.jsを実装し、合わせて次の３つのパッケージも
インストール （etherport-client, socket.io, johnny-filve）
４．HTTPサーバとしてはApacheを実装し、http.conf を必要に応じて
編集してHTTPサーバのルートにHTMLとJavaScriptのファイルを置く
５．ESP-01+UNO、HTTPサーバルートのJavaScriptファイルを
起動して、スマホからHTTPサーバを呼び出す
[使用した主要部品]
１．ESP-01 WIFI 基板
２．Arduino UNO
３．Proto shield for UNO & MEGA
４．SSD1306 0.96" OLED (I2C対応品）
（SSH1106 1.3" OLED でも可能、また、無しでもシリアルモニタ
から割り付けIP等の確認が可能）
５．手作りのオリジナルI/Oテスト基板
(Red & Green LED, slide switch, pre-set resister が実装)
[動作状況]
動作状況は次のURLから確認できます。
＜関連資料＞
ESP-01のWiFiBridgeのコード作成には次のURLからのものを参考に
しました。 (UNOからのUart受信部分を変更して、ネットワークの
SSIDとパスワードの設定機能とOLEDへの表示機能を追加しました。）
URL : https://github.com/NaoNaoMe/ESP8266-WiFi-UART-transparent-bridge
Node.js URL : https://nodejs.org/
Johnny-five URL : http://johnny-five.io/
Apache URL : http://httpd.apache.org/
JavaScriptのリファレンスとしては次のものを参考にしました。
URL : http://rfs.jp/sb/javascript
URL : http://www.tohoho-web.com/js/
Node.jsとSocket.ioの使い方に関しては次のものを参考にしました。
URL : http://l-w-i.net/t/arduino/socketio_001.txt
WiFiからJohnny-fiveをコントロールする方法は次のものを参考に
しました。
URL : http://make.kosakalab.com/make/electronic-work/js_robotics_wifi/
＜テスト内容と結果＞
ESP-01のWiFiBridgeでの利用に関しては次の様な内容で、スマホから
WiFiでUNOに目的の動作を行わせる事にしました。
１．UNOに接続されたLEDのON/OFFの制御
２．スマホのスライドバーでのUNOに接続されたLEDの明るさの制御
３．スマホからUNOに接続されたアナログおよびデジタル入力の確認
動作させた結果としては、次の様なものでした。
１．WiFiBridgeを利用した場合でも、ホストPCのHTTPサーバのHTML
ファイルへの記述内容で様々な表現ができる事が判りました。
２．また、socket.ioを利用する事により、スマホからの操作が時間遅れ
無しにWiFiBridgeの端末に伝えられる事も判りました。
３．WiFiBridge端末側の具体的な操作に関しては、ホストPC上に
置くので複雑な操作でも端末側のメモリへの心配なしに使える
ので、その点は楽になると感じました。
４．でも、スマートな操作を実現するには、HTMLとJavaScriptに
対する知識が要求され、自分には更に勉強が必要な事が
判りました。（既にこの方面の知識が十分な方々には非常に
面白い手段かとも思いました。）
[テストでの機器の接続]
上記のUNOの0(RXD)と1(TXD)端子の接続に関しては、ESP-01側の
準備と設定が済んでWiFiBridgeの機能を利用する時のもので、ESP-01
側の準備と設定の段階では別の接続となります。（下記参照。初期段階
では、この部分が変更できる様にしている事が必要です。）
[起動方法]
テストの起動は次の操作で行います。
１．ESP-01にWiFiBridgeのプログラクを書き込む（下記参照）
２．Network SSID とその Password を設定（下記参照）
３．UNOにStandardFirmataを書き込む（書き込む時の配線は下記を
参照）
４．UNOのRXD／TXDの配線を元に戻して、UNOのリセットを押して
モジュール全体を再起動
５．ホストPCにNode.jsと追加パッケージをインストール（下記参照）
６．ホストPCにApacheをインストールしコンフィグレーション
ファイルを設定する（下記参照）
７．必要に応じて、PCからのWiFiBridgeの動作を確認（下記参照）
８．ホストPCのHTTPのルートにダウンロードしたファイル
（index.html/server.js)を置き、サーバを起動する
９．ホストPCのHTTPルートに有るserver.jsをコマンドプロンプトから
起動する
１０．スマホからホストPCのHTTPルートを呼び出す。（ポート番号の
設定が必要）
http://192.168.xx.yy:8000/ ; (コードをそのまま利用する場合は
ポート番号は8000番）
(server.jsとApacheが起動していないとアクセスできません、
Apacheが動いているとポート番号無しでindex.htmlの内容のみは
表示されます。）
ホストPCのIPアドレスはコマンドプロンプトで「ipconfig/all」を
実行すれば確認可能です。
[コード類]
コード類は次のURLからダウンロードできます。
Code download URL : https://www.dropbox.com/s/vczhyigbx0x3qzl/WiFiUartBridge.zip?dl=0
その内容の内訳は次の様になります。
- ESP-01 /ESP-01_WiFi_Uart_Bridge --- ESP-01 WiFiBridge source code
/ESP-01_WiFi_Uart_Bridge_flasher --- ESP-01 WiFiBridge
binary code &
code write program
- UNO /UNO_TXD_release --- UNO set code for ESP-01 flash
writing period
- HostPC /Http_Server --- Put them to the Host HTTP server root
(HTML&JavaScript)
/LED_Blink --- Test JavaScript to blink LED on the UNO
with WiFi
＜HostPC側の準備と設定＞
[Node.jsのインストール]
１．上記のNode.jsのページからダウンロードしてインストール
２．コマンドプロンプトを起動して次の２つでバージョンが正しく
出るのを確認
node --version <--- Node.jsのバージョンを確認
npm --version <--- npmのバージョンを確認
３．追加で次の３つのパッケージをインスト―ル
npm -g install etherport-client
npm -g install socket.io
npm -g install johnny-five
４．上記のインストール先のパスを設定（システム環境変数に追加）
NODE_PATH = C:\User\xxxx\AppData\Roaming\npm\node_modules
[Apatcheのインストール]
１．上記のApacheのページからダウンロードして展開
２．展開後のApacheのフォルダを希望のディレクトリに配置
３．「(インストールしたディレクトリ)\Apachexx\conf\」に有る
「http.conf」を編集
(CドライブのルートにApachexxのフォルダを置けば編集は不要、 ドキュメントのルートはApachexx\htdocsとなります。）
４．配置と編集が完了したら、Apacheを起動
管理者モードでコマンドプロンプトを開いた後、
「Apachxx\bin」に移動して
httpd -k start <--- 起動
httpd -k stop [or shutdown] <--- 停止
（起動状態はPCの再起動後も継続されます。）
＜ESP-01側の準備と設定＞
[ESP-01とUNOのUart接続]
ESP-01とUNOのUartの配線は、WiFiBridgeの機能実装までに次の３の
状態に変更します。
１．接続の切り離し
UNOのflashにプログラムを書き込む時にこの状態にします。
２．TX／RXの入れ替え
USBtoTTLの出力をESP-01に接続して、ESP-01のflashへの
書き込みやESP-01にSSID/Passwordを設定する時にこの状態に
します。ただし、この状態の前には上記１の接続でUNOのTXDを
入力状態にしてUNOのTXDとESP-01のTXが競合しない為の
プログラムをUNOに書き込んで置く必要が有ります。
３．UNOとESP-01との正常接続
UNOとESP-01を接続してWiFiBridgeの機能を実現する時に
この状態にします。USBtoTTLの出力との競合に関しては、
USBtoTTLのチップの出力に1KΩの抵抗が挿入されているので、
それで対応させる事としています。
[ESP-01へのコードの書き込み]
ESP8266の開発環境をお持ちの方は、「ESP-01_WiFi_Uart_Bridge」の
コードを書き込む事でも対応可能です。開発環境をお持ちでない場合は、
次の方法でコンパイル済みのバイナリコードを書き込む事ができます。
１．Uartの接続を１にしてUNO_TXD_releaseのコードをUNOに
書き込む
次のESP-01への書き込み時にポート番号の設定が必要と
なりますので、ここで確認して置いて下さい。
２．次にUartの接続を２にして、ESP-01を書き込みモードに設定
書き込みモード：ESP-01 Reset SW と GPIO0 GND SW を押し、
先にESP-01 Reset SW を離す
３．Arduino IDE を閉じて、ESP-01_WiFi_Uart_Bridge_flasher\
esp8266_flasher.exeを開き、ポート番号、書き込みファイルを
設定して「Download」を実行してバイナリコードのESP-01への
書き込みを行う
[Network SSID & Password の設定]
１．Uartの接続を１にしてUNO_TXD_releaseのコードをUNOに
書き込む（上記の１と同じ）
２．書き込み後、Uartの接続を２にする。（ESP-01の書き込み後は、
そのまま利用可能）
３．Arduino IDE を起動してシリアルモニタを開き、57600bpsを
設定する
４．ESP-01 Reset Switch を押して、ESP-01を再起動する
５．シリアルモニタ上にSSID/Password 設定モードにする問い
合わせが出るので"y"を押す（５秒以内に）
６．以後、画面に従ってネットワークの SSID とパスワードを
設定する。（SSID/Passwordは記憶されるので、ネットワーク
を変えない限りは再設定不要）
７．SSID/Passwordの設定が終了したら、Uartの接続を一旦
切り離して１の状態にしてUNOにStandardFirmataを書き込む
８．StandardFirmataの書き込みが終了したら、Uartの接続を
本来の３に戻して、UNOのリセットでモジュール全体を
再起動させる。
＜WiFiBridgeの動作確認＞
WiFiBridgeの機能を直接ホストPCから確認するには次の２つが
利用できます。
１．Microsoftストアの「Windows Remote Arduino Experience」を使う（無料）
アプリのインストールが完了して、WiFiBridgeのモジュールを
起動したら、アプリを開きNetworkの接続でWiFiBridgeに
割り当てられたIPアドレスとポート番号を設定して
「Connect」を押します。
接続が完了したら、画面が次の様に変わり、UNOの各ポートが
画面上からコントロールできます。
２．テスト用のLED_Blink（Lチカ）を利用する
ダウンロードしたHostPC\LED_Blink フォルダにこちらで
利用したチェック用のスクリプトが有ります。このファイルの
IPアドレス（とポート番号）の部分をご利用のアクセスポイント
から割り振られたものに変更してNode.jsから実行すると確認
できます。（コマンドプロンプトから「node WiFi_blink.js」 を
実行）
＜その他＞
今回利用した部品のいくつかは先のESP-01のATコマンドの検討で
使用したものを流用しています。その為、テスト基板の回路図やOLEDの
改造等はここでは書いていません。必要で有ればこちらの記事で御確認
下さい。(Related article is here.)
