自作ライブラリ EasyWebSocket のインストール方法

記事最終更新日:2017/7/24

スポンサーリンク

ESP-WROOM-02 ( ESP8266 ) とスマートフォンのブラウザで、双方向リアルタイム通信WebSocket通信 を行うための Arduino IDE ライブラリ、EasyWebSocket のインストール方法を説明します。
これは自作ライブラリで Arduino core for ESP8266 ライブラリを使っていますので、ライセンスは LGPL ver2.1 無保証です。
予めご了承ください。

2017/4/5 時点の最新バージョンは BETA 1.49 です。
そのインストール方法を説明します。

1.事前に最新版 Arduino IDE をインストールしておく

ESP-WROOM-02 ( ESP8266 ) をArduino 化するライブラリ、ESP8266 core for Arduino を使う場合は、Arduino.cc ページの最新版 Arduino IDE をインストールしてください。
古いIDEがインストールされている場合はこちらの記事を参照して、Arduino15フォルダを削除してから再インストールしてください。

2.Arduino IDE に ESP8266 ボードをインストールしておく

このインストール方法はこちらのページをご参照ください。
これが、ESP-WROOM-02 ( ESP8266 )をArduino化するプラグインです。

3.Arduino IDE にSPIFFSファイルシステムアップローダーをインストール

もう一つのプラグインとして、Arduino IDE にSPIFFSファイルシステムアップローダーをインストールしておきます。
こちらのページを参照してください。
これは、ESP-WROOM-02 ( ESP8266 ) のフラッシュにスケッチとは別にユーザーデータを書き込むシステムです。SDカードやEEPROMのような使い方ができて、とても便利です。

4.自作ライブラリ、EasyWebsocket_SPIFFS をArduino IDEにインストールする

では、次に私が自作したWebSocketライブラリをGitHubからダウンロードします。

Beta 1.48 ( SPIFFS用 )
Beta 1.51.2 ( SPIFFS用 )

をクリックして下図のようなところのZIPファイルをダウンロードしてください。
EasyWebSocket139_01

最新版Arduino IDE の場合はダウンロードしたZIPファイルをそのままインストールする機能があります。
その前に、必ず以前インストールしたEasyWebSocketライブラリをフォルダごと削除してください。
Windows10 64bit ならば、

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

というフォルダにありますので、その中の EasyWebSocket ライブラリのフォルダごと削除してください。

次に、下図のようにIDEのライブラリインストールファイルを選びます。
EasyWebSocket139_02

そして、先ほどダウンロードしたZIPファイルを選ぶとインストールされます。
EasyWebSocket139_03
インストールされたフォルダはドキュメントフォルダの中のArduinoフォルダの中です。

インストール成功したら、下図のようにライブラリが存在するはずです。
EasyWebSocket139_04

そうしたら、Arduino IDEを終了し、再起動します。

5.サンプルスケッチを動かすために準備するもの

●ESPr Developer ( ESP-WROOM-02 開発ボード )(スイッチサイエンス製)
Amazonさんでも販売しております。

他のESP-WROOM-02 でも良いのですが、USBシリアルコンバーターや電源レギュレーターが一つのボードに収められているこのボードをお勧めします。
動作が安定していて、とても開発しやすいです。
かなり売れていて、在庫切れの場合がありますのでご注意ください。

●5V用LED (赤、青、黒)
※3.3V の電圧をかけて、12mA 未満の電流しか流れないものを使用してください。

●場合によって固定抵抗器(LED電流制限用)
LEDに流れる電流を12mA 未満にするもの

●ブレッドボード、ジャンパーワイヤー等

●高速CPU、大容量メモリの最新スマートフォン
推奨はAndroid 5.0.2以上、 最新Google Chromeブラウザです。
2016/10/18現在で把握している動作状況は以下の通りです。

OSブラウザ (Browser)動作
Android 6.0.1GoogleChrome◎ Verry Good
Android 5.0.2GoogleChrome
47.0.2526.83
◎ Verry Good
Android 5.0.2Opera Beta○ Good
Android 5.0.2FireFox43.0× cannot
Android 4.4.2Google Chrome 47.0.2526.83○ Good
Android 4.4.2Opera Beta○ Good
Android 4.4.2FireFox 43.0× cannot
Android 4.2.2Google Chrome 47.0.2526.83○ good
iOS 10.0.2Safari◎ Verry Good
iOS 9.2Safari △ not good
iOS 9.2Google Chrome 47.0.2526.107△ not good

6.接続する

前回紹介した時と同様ですが、接続図はこんな感じです。

WS_lib13

ただ、ここで注意していただきたいのは、ESPr Developer ( ESP-WROOM-02, ESP8266 ) のGPIO端子には最大12mAまでしか流せないということです。
LEDにも様々なものがありますので、GPIOから3.3Vの電圧をかけて12mA以上流れないものを使用してください。
GPIOに12mA以上の電流が一瞬でも流れると、ESPr Developerが即壊れる可能性があります。
安全のために、LEDにそれぞれ直列に抵抗を入れて、12mA未満になるように電流調整した方が良いかもしれません。

また、このボードを購入して Windows パソコンとUSBで初めて接続すると、ドライバーが自動インストールされると思います。

7.サンプルスケッチを動かす

コンパイルする前に、少々作業があります。

下図のようにArduino IDEの「スケッチの例」でEasyWebSocket139を開きます。
EasyWebSocket139_05

スケッチを開いたら一旦、名前を付けて保存しておきます。

次にメニューの「スケッチ」の「スケッチのフォルダを表示」をクリックしてスケッチフォルダを表示します
EWS_Beta13_04

すると下図のように表示され、そこのdataフォルダを開きます。
EWS_Beta13_05

次にspiffs_01.txt というファイルをテキストエディタで開きます。
EWS_Beta13_06

このファイルはスマホへ送信するHTMLヘッダです。
下図のようなところのローカルIPアドレスをご自分のルーターで割り当てたESP-WROOM-02 ( ESP8266 ) のIPアドレスに書き換えてください。
自動割り当てで分からない場合は、一旦コンパイル実行させて、アクセスポイントコネクション確立するとシリアルモニターにIPアドレスが表示される場合があります。
私はテキストエディタは Adobe Brackets を使用してますので、こんな感じになります。
EWS_Beta13_07
Windowsメモ帳で開くと改行やタブが上手く表示されません。
こんな感じに表示されると思います。
EWS_Beta13_16
ws://192.168.0.14 という部分のIPアドレスの部分をご自分のルーターで割り当てられたESP-WROOM-02のローカルIPアドレスに変更して保存すれば問題ありません。
ただ、文字コードはUTF-8 で保存しておいてください。

次に下図のようにSPIFFSファイルシステムを使って、spiffs_01.txt ファイルをESP-WROOM-02 のフラッシュにアップロードします。白い点々が表示されれば、アップロード開始します。
IDE1.6.9の場合は赤い点々です。
また、IDE1.6.11以降の場合は転送速度を921600にしておくと早く終了します。
(※シリアルモニターは閉じておいてください)
EWS_Beta13_08

アップロード中はこんな感じで下の方に白い点々表示が進行していきます。
EWS_Beta13_09

設定でFlash Size を 1M SPIFFS にしていると、書き込みに時間がかかりますので、気長に待ってください。
もし、うまくアップロードできない場合はOTAアップロードという手法もありますので、こちらの記事をご覧ください。

8.コンパイル書き込み、実行させる

SPIFFSアップロード完了したら、「マイコンボードに書き込むボタン」を押して、サンプルスケッチのコンパイル書き込みを実行してください。
EWS_Beta13_12

書込み終了したら、シリアルモニターを開くと下図のような画面になります。

EWS_Beta13_11

次にスマートフォンのブラウザ Google Chrome を開き、下図のようにURL入力欄にESP-WROOM-02 のローカルIPアドレスを入力して実行します。
EWS_Beta13_13

するとシリアルモニターにはこのように表示されてWebSocketハンドシェイクを行います。
ブラウザからの応答が無い場合は5秒でタイムアウトするようになっています。
EWS_Beta13_14

WebSocketハンドシェイクが確立するとブラウザ側では下図のように表示されます。

EWS_Beta13_10

テキストボックスに文字列を入力して送信ボタンを押すとシリアルモニターに文字が表示されます。
ただし、日本語WindowsPC の場合はシリアルモニターの文字コードはShift_JISになっていて、ブラウザ側はUTF-8となっていますので、全角漢字は文字化けします。半角アルファベットは問題ありません。
また、その文字列をESP-WROOM-02 からブラウザに送信され、”from WROOM DATA=”のところに文字列が表示されます。ブラウザ側はUTF-8ですので、そこでは正常に全角漢字でも正常に表示されます。

その他は図の通りの動作となります。
Canvas要素スライダーはスライドするだけでなく、タッチしただけでデータを送信します。

また、接続が切れてしまった場合は、ブラウザのURLアドレス入力欄ではなく、Reloadボタンを押すと再接続しやすいです。

以上、EasyWebSocket_SPIFFS インストール方法でした。

スポンサーリンク

mgo-tec電子工作 関連コンテンツ ( 広告含む )
Amazon.co.jp 当ブログのおすすめ



コメントを残す

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

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