grbl1.1+Arduino CNCシールドV3.5+bCNCを使用中。
BluetoothモジュールおよびbCNCのPendant機能でスマホからもワイヤレス操作可能。
その他、電子工作・プログラミング、機械学習などもやっています。
MacとUbuntuを使用。

CNCマシン全般について:
国内レーザー加工機と中国製レーザー加工機の比較
中国製レーザーダイオードについて
CNCミリングマシンとCNCルーターマシンいろいろ
その他:
利用例や付加機能など:
CNCルーター関係:



*CNCマシンの制作記録は2016/04/10〜の投稿に書いてあります。


ラベル ESP8266 の投稿を表示しています。 すべての投稿を表示
ラベル ESP8266 の投稿を表示しています。 すべての投稿を表示

2017年7月31日月曜日

ワイヤレス充電器(USB:5V)

ワイヤレス充電器を購入してみました。あいかわらずAliExpressで数百円で売っていたので試してみたという感じです。

AliExpress.com Product - Ifavor Universal Qi Wireless Charging Kit Charger Pad Coil Receiver Charger Adapter For Samsung Xiaomi Android Phone Micro USB515円(送料無料)、受電(左)と送電(右:直径70mm)のセット
左側の受電用の薄っぺらいカードは厚さ1mm程度で、スマホケースを使えばスマホの裏側におさまります。ただ、MicroUSBの差し込む向き、あるいはタイプCやiPhone用のものなど、選択する必要があります。

AliExpress.com Product - Android Micro USB Universal Qi Wireless Charger Receiver Charging Adapter Receptor Receiver Pad Coil Chip For Samsung HUAWEI131円(送料無料)、受電用のカード(コイル)だけ。スマホ以外にも使えるかもしれないので、MicroUSBの向きが逆のタイプも購入してみました。

こんな感じで、受電用カード(右)は厚さ1mm程度なのでスマホケース内部に収まります。受電カード上のワイヤレスマーク(((●)))側が充電器(給電器)と向き合うように配置します。距離的には、8mmくらい離れていても給電できました。

受電用カードの裏には、5V/1000mAまでの出力と書いてあります。給電用の丸い充電器は5V/1500mAまで入力可能のようです。
Amazonでも購入できますが、やはり少し高い。

ESP8266への給電:実は、スマホ用充電器として購入したのではなく、以下のような使い方を想定していました。
ESP8266に接続して5Vをワイヤレスで給電。安定はしないかもしれませんがESP8266だと一応動くようです。


受電用カードとブレッドボードはほぼ同じサイズ。

間に電圧電流計をはさんで計測してみると、安定しているときでは0.11Aくらいでしたが、0.4〜0.25Aの間を上下していました。不安定なときは4.8Vに下がるなど、充電器の位置が多少ずれると電力が変動しているようでした。
Raspberry Pi Zero Wへの給電:試しにRaspberry Pi Zero Wも接続してみましたが、もっと電力が必要そうでダメでした。
たまに安定して起動するときもあるのですが、電圧が5.0V以下になることもあり不安定で途中で落ちてしまいます。もう少し強力な充電器が必要そうです。ちなみに、Raspberry Pi Zero Wの場合は、
18650(一本)のUSB電源であれば動きますが、右端の単3電池を2本使うタイプ(100均)のUSB電源だとやはり電力不足。ということから、18650の電源を使ったほうがよさそうですが問題はケーブルが邪魔。ケーブルを使わないで直接Raspberry Pi Zero Wに配線してしまったほうがコンパクトになりそうです。Raspberry Pi Zero Wの裏側に電源の端子があるのですが、そこに直接ケーブルをハンダつけするというよりは、以下のようなポゴピンコネクターを電気接点に使うとよさそうです。
AliExpress.com Product - 10pcs Spring Loaded Pogo Pin Connector Diameter 2.0 mm x 7.0 mm height SMT / SMD PCB brass Gold plate 1u 50g force Probe Pin505円(10個:送料無料)

ワイヤレス充電器の部品:再び、ワイヤレス充電器についてですが、以下のような5Vで2Aまで流せる部品もあります。これを使えば、Raspberry Pi Zero Wも起動するのかもしれません。
AliExpress.com Product - 5V2A Large current wireless charging module Wireless power supply module free shipping1332円(送料無料)ある程度容量があるので、これは何かに使えそうです。
AliExpress.com Product - Universal Charging Receiver Charger 3 Coils Qi Wireless Charger PCBA Circuit Board Coil Wireless Charging Micro USB Ap 25 472円(送料無料)、こちらは3個コイルがついているタイプで強力そうです。その分、横長になっています。ある程度安定して給電するには、これくらいのほうがよさそうです。
テーブルに給電器を埋め込んでおけば、ただそこに置くだけでちょっとした電化製品なら電源が入る仕組みになりそうです。ノートパソコンなどもそうなればいいとは思いますが、そこまで強力だと電磁波など問題にならないのでしょうか?

ワイヤレス充電器内蔵型家具:IKEAの家具の中には、ワイヤレス充電器を埋め込むためのキットが売っています。
IKEAワイヤレス充電ユニット:3000円直径9cm、5V/2000mAなので、スマホやタブレット程度なら充電が可能なのかもしれません。

このように既存のテーブルなどに穴を開けて埋め込むようです。

すでにワイヤレス充電器が埋め込まれているベッドサイドテーブル:6999円もあるようです。家具も電源が必要になってきたという感じです。

2017年5月12日金曜日

ESP8266:音声認識Wifiスイッチ(まとめ)

ESP8266と音声認識をつかったWifiスイッチの続きというか「まとめ」です。ほぼ一段落ついたので。
もともとは、ESP8266+赤外線LEDでエアコン制御するところから始まりましたが、その後さらに音声認識でもON/OFF可能にしようということで、ここ最近までやっていました。
以下がこれまでの経緯です。

IoTその2:ESP8266(Wifi赤外線リモコン:仮)
IoTその4:再度ESP8266+Blynk
IoTその5:音声認識でESP8266をWifi制御
音声認識:Voice Recognition Module VR3.1
IoTその6:音声認識+ESP8266(改良中)
ESP8266ファイルシステム:SPIFFSについて
ESP8266:WebサーバからHttpリクエスト
ESP8266:XMLHttpRequestで改良
ESP8266:音声認識Wifiスイッチ:フィードバックで現状表示

これまで、かなり試行錯誤しましたが、おかげでJavaScriptの勉強もでき、今回はそれほど利用しなかったのですが、Node.js、EJS、Express、Python Flask、そしてNode-RED、Blynk HTTP RESTful APIなどの使い方も多少理解できるようになったという感じです。

追記:2017年8月以降
その後、Chromeのセキュリティ仕様が改変されたためか、http://〜(ノンセキュア)のサーバにWeb Speech APIのJavascriptを含んだHTMLファイルをアップロードすると、マイクへのアクセスができなくなってしまいエラーがでてしまいました(Chromeの設定などを変えたりしてみましたがダメでした)。http://だと保護された通信ではないために自動的にマイク使用を遮断してしまうようです。そこで保護された通信とするためにhttps://のサーバへアップロードすれば大丈夫かと思いHerokuをつかってみました(以前参考にさせて頂いた「クラゲのIoTテクノロジー」さんのHerokuへのアップロードを再度参考にしました)。

さらに追記(2018年):
上記の方法でセキュアなhttpsへアップロードしても、以下のように最初はブロックされてしまいます。
おそらくこれは、Javascriptに書き込まれているESP8266のローカルIPアドレスが「http://192.168.3.12」となっているため、リンク先がノンセキュアな「http」だからだと思います。このまま「安全ではないスクリプトを読み込む」をクリックすればマイクやスピーカーが使用できるので一応機能はします(自己責任的な使い方)。
ただ、ローカルIPアドレスも「https」を使えばこういったブロックもでないはずです。そのためにはさらにもう一つ工夫が必要です。
Arduino IDEのライブラリをアップデートしておけば、以下のようなESP8266においてもhttpsサーバーを立てられるようです。
これを利用すれば、セキュアなローカルIPアドレスにアクセスすることになるためchromeのブロックや警告がでなくなるはずなのですが、このWiFiHTTPSServerで証明書と暗号鍵を生成してアップロードすると、またchromeではブロックされてしまいました。FireFoxだとセキュリティにおいて多少融通がきくのか、一度許可を与えれば大丈夫でした。しかしながら、FireFoxだとWeb Speech APIが使えないので、結局のところ最初に戻って、ESP8266のローカルIPアドレスは「http」のまま、chromeで「安全ではないスクリプトを読み込む」という方法をとっています。


以下はこれまでの内容。

手順としては:
Herokuへ登録
Heroku CLIをダウンロード&インストール
Heroku Static Providerのインストール&デプロイ
要は元々動的サーバとして使うHerokuを静的サーバとして使い、そこにWeb Speech APIのJavascriptを含んだHTMLファイルをアップロード/デプロイするという感じです。そうするとhttps://のセキュアなサーバにアクセスするためにマイク使用が遮断されなくなるようです。とりあえず動くようにはなりましたが、これ以外の方法でも可能なのか現在検討中です。


以下からは、これまでの内容。

プログラムの流れ:
・Web Speech APIのText to Speechで、音声をテキストに変換
・テキストに含まれるキーワードを正規表現を使って一致判定
・キーワードに応じたURLへリクエスト(デバイスのON/OFF制御)を出す
・リクエストを受け取ったESP8266が各デバイスのスイッチをON/OFFする
・温度/湿度の値や各スイッチのON/OFF状況はチェック用URLへリクエストを出しレスポンスとして変数を受け取る
・レスポンス(変数)の内容をブラウザ画面上に反映させ、ON/OFF状況などを表示する


今回の仕組み:
前回で、だいたいのシステムができあがったのですが、もう少し内容を整理しなおしてみました。前回までは音声出力は省いていましたが、せっかく音声を使ったスイッチなので、音声出力も復活させました。「エアコンをオンにしてください」と話しかければ、「エアコンをオンにしました」と答えてくれます。また、デバイスが非接続の状況だと「現在、エアコンは制御できません」と言い返してきます。

現在は3個のESP8266に以下のようにスイッチやセンサをつけています。今後も増える予定です。

・リビング(IP:192.168.3.12):蛍光灯(ON/OFF)
・寝室(IP:192.168.3.13):照明(ON/OFF)、エアコン(ON/OFF)、温度/湿度(センサ値)
・トイレ(IP:192.168.3.14):照明(ON/OFF)

寝室だけ、照明のON/OFF、赤外線リモコンによるエアコンのON/OFF、そして温度/湿度センサからの読み取りという感じでパラメータが多く、しかも温度/湿度の値を画面内のエアコンONのボタン上に表示させるので、ひとつだけ例外的なプログラムになってしまいました。

追記:
その後、音楽を再生させる機能もつけようと試してみました。
soundcloud.comでよく音楽を聞くので、「音楽かけて」などと言えば、window.open()で、
https://soundcloud.com/stream#play
にアクセスして自動で再生されるようにしてみましたが、音楽が流れているとうるさくて音声認識できなくなってしまうこともあり、採用するかどうか検討中です。

端末(パソコン、タブレット、スマホ)上のChromeブラウザではこんな画面になります。
1段目:音声認識の状態 [認識中/エラー/停止中]
2段目:操作結果の表示
3段目:認識された音声/ボタン操作内容の表示
4段目以降:各デバイスのON/OFF(黄/灰)スイッチ
6段目:エアコンONボタンには温度と湿度を表示
*接続確認が取れなかったESP8266のデバイスには[未接続](薄灰)を表示

ブラウザでこの操作画面のURLにアクセスし、音声認識もしくは画面上のボタンクリックで制御します。
ブラウザでアクセスした時点で、それぞれのデバイスのON/OFF状態、温度/湿度の数値、接続/非接続の状態をチェックし、画面上の文字やボタンの色分け表示に反映させています。

今回のような仕組みを可能とするために:
・音声認識Web Speech APIの使用(Speech to Text/Text to Speech)
・Web Speech APIを長時間待機させるための工夫(通常は7秒程度で自動的に停止)
・正規表現を使って認識の幅をもたせる/正規表現における変数の使い方
・画面遷移なしでのXMLHttpRequestによる非同期通信
というようなことが必要でした。それぞれについては、以下に説明があります。


エディタ:
最近はAtomエディタを使ってJavaScriptを書いています。


これまではSublime Textで書いていましたが、ESP8266やESP32でPlatformIOも使い始めたのでAtomを使うことにしました。Visual Studio Codeも便利そうですが、Atomエディタは無料だしGitHub製なのでいいかと。
Atomでは、Scriptというパッケージをインストールするとcommand+IでJavaScriptをすぐに実行できるので便利です。しかもHTMLを表示させるHTML Previewのパッケージもインストールしておけば、HTML上でどのように見えるかリアルタイムでチェックできます(ローカルなので音声認識は不可/ESP8266とは通信可)。色など変えるときはソースに書き込むと同時に反映されるので、わざわざブラウザで確かめるまでもないと言う感じです。


通信の大まかな流れ:
通信上の仕組みは前回からはあまり変わっていませんが、最終的にはこんな感じにしました。


3台あるESP8266には、簡易的なHTML(音声認識なし)をアップロードしておき、それぞれは異なるIPアドレスを持ったWebサーバとして機能しています。
それとは別に外部のWebサーバ(無料ホームページのサーバなど 追記:実はHerokuなどのhttps://〜が使えるセキュアなサーバがいい)に、今回の音声認識のJavaScriptを書いたHTMLファイルをアップロードしています。この外部WebサーバとESP8266は通信しあうわけではなく、すべてはブラウザからXMLHttpRequestでESP8266と通信しています。なので、音声認識のプログラム自体はどこにあってもいいという感じです。仮にESP8266に音声認識のプログラムをアップロードしてもいいとは思いますが、いちいち書き換えが面倒なので、外部Webサーバにドラッグ&ドロップでアップロードしたほうが早いということです。もちろんローカルネットワーク内のRaspberry Piなどにアップロードしても構いません。

前回同様に、各スイッチのON/OFF状況やセンサの値は、ブラウザを立ち上げると同時に3台のESP8266のIPアドレス/checkというURLへXMLHttpRequestしてESP8266内にある変数を送ってもらい、その値を表示画面に反映させています。どれがON/OFFになっているか、あるいは温度/湿度の値、または非接続中のESP8266などが分かります。


ESP8266上には、メインのソースのなかにこのような単純なHTMLを組み込んであるので、外部のWebサーバと通信できなくても、ESP8266のIPアドレスにつなげば、最低限のスイッチのON/OFFだけはできるようにしてあります。異なるIPアドレスのESP8266へはリクエストを出して制御しているので、3個あるESP8266のどれからでもすべてをボタン制御することができます。このへんは前回から、あまり変わっていません。


パラメータ用の配列:
今回、温度/湿度センサも加えたので、再度パラメータを格納する配列を組み直してみました。
以下のように、通常の配列と連想配列が入れ子になっています。
ESP8266が3個あるので、それぞれ
IPアドレス・通信接続・デバイス[デバイス名・画面表示名・値]
という感じで並んでいます。

var esp = [{ip:"http://192.168.3.12/",
                connection: 0,
                dev:[{
                    name: "fluo",
                    name_jp: "蛍光灯",
                    param: null
                }]},{
                ip:"http://192.168.3.13/",
                connection: 0,
                dev:[{
                    name: "bed",
                    name_jp: "寝室",
                    param: null
                },{
                    name: "air",
                    name_jp: "エアコン",
                    param: null
                },{
                    name: "temp",
                    name_jp: "温度",
                    param: null
                },{
                    name: "humid",
                    name_jp: "湿度",
                    param: null
                }]},{
                ip:"http://192.168.3.14/",
                connection: 0,
                dev:[{
                    name: "wc",
                    name_jp: "トイレ",
                    param: null
                }]}];

すべて連想配列にしようかとも思ったのですが(あるいはJSONフォーマット)、数値を使った繰り返し処理のほうがコードが書きやすかったので、[ ]を使った配列とオブジェクト型のドット表記が混在しています。エアコンの電源なら、esp[1].dev[1].paramで書き換え/読み取りできると言う感じです。今後もスイッチやESP8266を増やしていくかもしれないので、自分なりに扱いやすい並べ方にしたつもりです。
ESP8266からのパラメータの読み取りは、IPアドレス順にESP8266にリクエストを出し、レスポンスとして変数を受け取るのですが、特に寝室のESP8266からは4つの値が「1,0,28,23」などと返されるので、split(",")を使ってデリミタ分割して、JavaScript側の変数に入れ直しています。以前、クエリをつかった実験のときはエンコード/デコードを使う必要がありましたが、今回はそれほど面倒でもありません。

前回の機能に音声出力も加え、さらにすっきりしたコードにしようと思って書き直してみましたが、非同期通信であることと、エアコンの部分だけ温度/湿度表示があったりと、やや不規則にな仕組みになってしまい、結局ダラダラといまいちすっきりしないコードになってしまいました。一応現段階では期待した動きにはなっているので、とりあえずOKということにしておきました。

追加した機能は以下ですが、

・音声出力
・温度/湿度センサ
・アップデート(パラメータ)

例えば「温度は?(あるいは:何度?)」と話しかければ、音声で「現在、温度は24度、湿度22%です」と答えてくれます。同様に、画面上にも文字として表示されます。やはり音声出力があったほうが、いちいちブラウザの画面を覗き込まなくてもすむので便利です。
また、「アップデート(あるいは、リセット)」と話しかければ、再度各ESP8266と通信して現状のパラメータのアップデートができるようにしておきました。温度/湿度の値の再取得やON/OFF状況の再確認用です。


非同期通信:
今回は、ESP8266へはXMLHttpRequestを使って非同期通信しています。この非同期通信に慣れなくて、

(1)XMLHttpRequestで3つのESP8266へ連続でリクエストを送る
(2)3つのESP8266から各端子のON/OFF状況の変数をレスポンスで受け取る
(3)レスポンスで受け取った値を画面表示へ反映させる

という手順において、(3)のレスポンス結果をHTML表示へ反映させるときに(どのボタンが現在ON/OFFあるいは非接続状態となっているかを表示させる)、非同期なのでタイミングがずれてしまいエラーがでたりしていましたが、なんとかつじつまを合わせて動くようにはなりました。
非同期用にPromiseオブジェクトもあるようですが、今回の場合はそこまで複雑ではないので、普通にそのまま処理してしまいました。その分、多少ややこしい入れ子状のコードになってしまったのは仕方ありません。

以下は、XMLHttpRequestでパラメータを取得する部分です。この部分がかなりハマったところでした。

    function checkEach(i){
        var xhr = new XMLHttpRequest();
        xhr.timeout = 1000;

        xhr.onload = function() {
            esp[i].connection = 1;
            var res = xhr.response.trim().split(",");
            for(var j = 0; j < res.length; j++){
                esp[i].dev[j].param = parseInt(res[j]);
            };
            for(var j = 0; j < res.length; j++){
                updateEach(i,j);
            };
        };

        xhr.onerror = function() {
            esp[i].connection = 0;
            for(var j = 0; j < esp[i].dev.length; j++){
                esp[i].dev[j].param = null;
                updateEach(i,j);
            };
        };

        xhr.ontimeout = function () {
            esp[i].connection = 0;
            for(var j = 0; j < esp[i].dev.length; j++){
                esp[i].dev[j].param = null;
                updateEach(i,j);
            };
        };

        xhr.open("GET", esp[i].ip + "check", true);
        xhr.send();
    };

最初に受信完了までのタイムアウトを1000msに設定しておき、onloadで通信成功時はレスポンスからパラメータを取得します。タイムアウトしてしまったり、エラーの場合はonerrorやontimeoutを使ってパラメータにnullを代入することにしてあります。ここで得られたパラメータによって、つぎのupdateEach()という関数で、画面表示に反映させます。
前回まではonreadystatechangeを使っていたのですが、今回の場合はonload、onerror、ontimeoutをつかって処理したほうがやりやすかったという感じです。


音声認識(Web Speech API):
音声認識については、Web Speech APIのSpeech to Textを使用しています。Web Speech APIの問題点として、7秒くらい無言でいると自動的にタイムアウトしてしまい、それ以後音声入力を受け付けなくなってしまいます。途切れなく、あるいは長時間待機させるように使用するには、少しばかり工夫が必要です。
以下は、話しかけた声をオウム返ししてくるサンプルです(特にHTML上での画面表示はありません)。
*尚、以下のJavaScriptを含んだHTMLファイルは、Webサーバにアップロードするか、PythonやNode.jsなどでサーバを立ち上げてネットワークに接続された状態で実行しないと機能しません。

window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var rec = new webkitSpeechRecognition();
rec.lang = 'ja-JP';
rec.interimResults = false;
rec.continuous = true;

var syn=new SpeechSynthesisUtterance();
syn.lang = "ja-JP";
syn.rate=1.2;
syn.volume=0.8;

rec.onend = function(){
    setTimeout(function(){
        rec.start();
    },0)
};

rec.onresult = function(event) {
    var your_voice = event.results[0][0].transcript;
    syn.text = your_voice;
    speechSynthesis.speak(syn);
    rec.stop();
};

rec.start();

基本的に、Speech to TextとText to Speechは、このようなJavaScriptによって可能になりますが(最終的にはHTMLへ埋め込む必要がある)、音声認識機能を途切れなくするためには、コード中ほどにある

rec.onend = function(){
    setTimeout(function(){
        rec.start();
    },0)
};

のように、rec.onend()で音声認識が切れたら、rec.start()で再度開始させるようにしています。いろいろ試してみましたが、このようにsetTimeout()をつかって、発動タイミングをずらすとエラーなどでないようです。ちなみに、setTimeout()は0秒でも大丈夫です。setTimeout()なしで即rec.start()させると、もともとrec.onend()が非同期通信のためか、rec.onend()の処理が完了するまえにrec.start()が発動してしまうようでエラーがでてしまいます。このときMacBook上のブラウザ(Chrome)では特に問題ないのですが、Androidタブレットやスマホ上のChromeだと、再スタートを繰り返しているうちにブラウザが落ちてしまい(あるいはフリーズ)、長時間待機そのものが不可能になっていました。今回の場合は、setTimeout()を使うことでエラーがでなくなったために、その問題も解決できたようです。


使い方として、部屋の電源をON/OFFしたいときに、わざわざブラウザを立ち上げて、それに向かって話しかけるというのではなく(この場合、話しかけるよりも画面上でボタン操作したほうが確実で早い)、サーバのURLにアクセスした状態のタブレットをテーブルの上などに置いておき(長時間待機させておき)、気が向いたときに話しかけてON/OFF制御するという感じです(上画像)。1時間ほど長時間待機させてみましたが、途中エラーでブラウザが落ちてしまうこともなく大丈夫でした(以前は数分で落ちていた)。
音声認識だからと言って、毎回話しかけてON/OFFする必要もないかもしれません。どちらかと言えば、パソコン、スマホ、タブレットなどでボタン操作するほうが主な使い方かもしれません。音声認識については、いちおうそれも可能という程度で。
ESP8266からON/OFF状況を取得することができるようになったので、ON/OFFボタンをひとつにまとめてPUSH/ON-PUSH/OFFにしようかと思いましたが、万が一にそなえてあえてONとOFFのボタンを別々にしておきました。ONを押したのに電気がつかないというときに、再度ONボタンを押せるようにするためです。交互にON/OFFが切り替わるボタンだと、ONのつぎはOFFとなり、連続してONが押せなくなってしまいます。


正規表現:
今回の音声認識では、エアコンをオンにする場合であるならば、
「エアコンをオンにしてください」
「エアコンをオン」
「エアコンをつけて」
などと言っても認識できるように以下のような正規表現で認識の幅を持たせてあります。Speech to Textでは、たまに「オン」が「on」や「音(おん)」に自動変換されてしまうときもあるので、それも受け入れるようにしてあります。
また、「〜をオンしない」あるいは、「〜をつけない」と言えば、「〜ない」が含まれているために反応しないようにしてあります。同様に、「オン」させたい場合は「オフ」という言葉が含まれていれば反応しないようにしてあります。

var reg_exp_on = new RegExp('^(?!.*(オフ|ない)).*(?=' + dev_jp + ').*(?=(オン|on|音|つけ|付け)).*$');

さらに、蛍光灯やエアコンなどのデバイスをdev_jpという変数として正規表現内に挿入しています。「〜をオンにする」という感じです。JavaScriptにおいては、「/abc/」のようなスラッシュをつかった正規表現内では変数を使うことができないようですが、上記のようなnew RegExp()でオブジェクト生成したときは、カッコ内には正規表現にしたい文字列を入れることになるので、この文字列内で変数が挿入可能となります。変数が使えることで、ON用の正規表現、OFF用の正規表現をつくっておき、あとは変数内のデバイス名を入れ替えて使いまわすということになります。ちなみに、Rubyでは、「/#{abc}/」とすることで、abcを変数として扱えるようです。

また、Scriptularというオンラインのサイトで正規表現のチェックができます。これはJavaScript用です。

今回のような単純なキーワードによる文字列の一致判定をするには、正規表現をつかわないでincludes()でも十分可能かもしれません。プログラム的には、一致させたいキーワードが含まれているかどうか、NGワードが含まれているかどうかを判定しているだけです。


赤外線リモコン制御(エアコン用):
今回の音声認識Wifiスイッチでは、照明器具のON/OFF以外にエアコンの赤外線リモコンによるON/OFF制御も含まれています。ESP8266につけた赤外線LEDで制御します。赤外線制御については、IRremoteという便利なArduino用ライブラリもありますが、今回は使わずパルスやキャリアを生成するところからプログラムしました。
これについては、以前のこの投稿に書いてあります。



以下は、HTML+CSS+JavaScriptのコードです。このソースはESP8266にはアップロードせずに、外部サーバにアップロードします。そのURLにアクセスして、ブラウザ上で画面遷移せずに、ローカルネットワーク上に設置されたESP8266へリクエストを出して制御するということになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Speech API</title>
</head>
<body id="bg">
    <div class="title" id="status">[音声認識開始]</div>
    <div class="api"><p id="api">COM: 音声入力して下さい</p></div>
    <div class="you"><p id="you">YOU: (認識された音声)</p></div>
    <div class="btn" id="fluo_on" onclick="buttonClick(0,0,1)">蛍光灯: ON</div>
    <div class="btn" id="fluo_off" onclick="buttonClick(0,0,0)">蛍光灯: OFF</div>
    <div class="btn" id="bed_on" onclick="buttonClick(1,0,1)">寝室: ON</div>
    <div class="btn" id="bed_off" onclick="buttonClick(1,0,0)">寝室: OFF</div>
    <div class="btn" id="air_on" onclick="buttonClick(1,1,1)">エアコン: ON [T:00°C H:00%]</div>
    <div class="btn" id="air_off" onclick="buttonClick(1,1,0)">エアコン: OFF</div>
    <div class="btn" id="wc_on" onclick="buttonClick(2,0,1)">トイレ: ON</div>
    <div class="btn" id="wc_off" onclick="buttonClick(2,0,0)">トイレ: OFF</div>

<style type="text/css">
    body{
        text-align:center;
        font-family: 'Helvetica',sans-serif;
        color:#fff;
        margin:0px;
        padding:0px;
        background-color:#fff;
    }
    .title{
        width:100%;
        background-color:#fa8;
        margin:0px;
        padding:2% 0% 2% 0;
    }
    .api{
        text-align: left;
        width:98%;
        background-color:#e75;
        padding:1%;
        margin:1% 0 0 0;
    }
    .you{
        text-align: left;
        width:98%;
        background-color:#d66;
        padding:1%;
        margin:1% 0 0 0;
    }
    .btn{
        float:left;
        background-color:#aaa;
        padding:3% 0px;
        margin:1% 1% 0 1%;
        width:48%;
    }
    .btn:hover{
        opacity: 0.8;
        cursor: pointer;
    }
</style>

<script type = "text/javascript">
    window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
    var rec = new webkitSpeechRecognition();
    rec.lang = 'ja-JP';
    rec.interimResults = false;
    rec.continuous = true;

    var syn=new SpeechSynthesisUtterance();
    syn.lang = "ja-JP";
    syn.rate=1.2;
    syn.volume=0.8;

    var esp = [{ip:"http://192.168.3.12/",
                connection: 0,
                dev:[{
                    name: "fluo",
                    name_jp: "蛍光灯",
                    param: null
                }]},{
                ip:"http://192.168.3.13/",
                connection: 0,
                dev:[{
                    name: "bed",
                    name_jp: "寝室",
                    param: null
                },{
                    name: "air",
                    name_jp: "エアコン",
                    param: null
                },{
                    name: "temp",
                    name_jp: "温度",
                    param: null
                },{
                    name: "humid",
                    name_jp: "湿度",
                    param: null
                }]},{
                ip:"http://192.168.3.14/",
                connection: 0,
                dev:[{
                    name: "wc",
                    name_jp: "トイレ",
                    param: null
                }]}];

    var api_tx = "COM: 音声入力して下さい(default)";
    var you_tx = "YOU: 認識された音声(default)";

    function checkEach(i){
        var xhr = new XMLHttpRequest();
        xhr.timeout = 1000;

        xhr.onload = function() {
            esp[i].connection = 1;
            var res = xhr.response.trim().split(",");
            for(var j = 0; j < res.length; j++){
                esp[i].dev[j].param = parseInt(res[j]);
            };
            for(var j = 0; j < res.length; j++){
                updateEach(i,j);
            };
        };

        xhr.onerror = function() {
            esp[i].connection = 0;
            for(var j = 0; j < esp[i].dev.length; j++){
                esp[i].dev[j].param = null;
                updateEach(i,j);
            };
        };

        xhr.ontimeout = function () {
            esp[i].connection = 0;
            for(var j = 0; j < esp[i].dev.length; j++){
                esp[i].dev[j].param = null;
                updateEach(i,j);
            };
        };

        xhr.open("GET", esp[i].ip + "check", true);
        xhr.send();
    };

    function checkAll(){
        for(var n = 0; n < esp.length; n++){
            checkEach(n);
        };
    };

    function updateEach(i,j){
        var con = esp[i].connection;
        var _name = esp[i].dev[j].name;
        var _name_jp = esp[i].dev[j].name_jp;
        var _param = esp[i].dev[j].param;
        if(_name != "temp" || _name != "humid"){
            if(esp[i].connection == 0){
                document.getElementById(_name + "_on").innerHTML = _name_jp + ": [非接続]";
                document.getElementById(_name + "_on").style.backgroundColor = '#ccc';
                document.getElementById(_name + "_off").innerHTML = _name_jp + ": [非接続]";
                document.getElementById(_name + "_off").style.backgroundColor = '#ccc';
                if(_name == "air"){
                    document.getElementById("air_on").innerHTML = "エアコン: [非接続][温度/湿度:不明]";
                };
            }else{
                if(_param == 0){
                    document.getElementById(_name + "_on").style.backgroundColor = '#999';
                    document.getElementById(_name + "_off").style.backgroundColor = '#f94';
                }else if(_param == 1){
                    document.getElementById(_name + "_on").style.backgroundColor = '#f94';
                    document.getElementById(_name + "_off").style.backgroundColor = '#aaa';
                };
                if(_name == "air"){
                    var t_h = "[T:" + esp[1].dev[2].param + "°C H:" + esp[1].dev[3].param + "%]";
                    document.getElementById("air_on").innerHTML = "エアコン: ON " + t_h;
                };
            };
        };
        document.getElementById("api").innerHTML=api_tx;
        document.getElementById("you").innerHTML=you_tx;
        document.getElementById("bg").style.backgroundColor = '#fff';
    };

    function buttonClick(i,j,k){
        if(esp[i].connection == 1){
            var xhr = new XMLHttpRequest();
            xhr.onload = function(){
                if(k == 1){
                    api_tx = "COM: " + esp[i].dev[j].name_jp + "をONにしました";
                    you_tx = "YOU: ボタンで" + esp[i].dev[j].name_jp + "をONにしました";
                }else{
                    api_tx = "COM: " + esp[i].dev[j].name_jp + "をOFFにしました";
                    you_tx = "YOU: ボタンで" + esp[i].dev[j].name_jp + "をOFFにしました";
                };
                esp[i].dev[j].param = k;
                updateEach(i,j);
            };
            var footer = "_off";
            if(k == 1){
                footer = "_on";
            };
            xhr.open("GET", esp[i].ip + esp[i].dev[j].name + footer, true);
            xhr.send();
        }else{
            api_tx = "COM: 非接続中のため操作できません";
            you_tx = "YOU: "+ esp[i].dev[j].name_jp + "のボタンは利用不可です"
            document.getElementById("bg").style.backgroundColor = '#888';
        };
        document.getElementById("api").innerHTML=api_tx;
        document.getElementById("you").innerHTML=you_tx;
    };

    rec.onstart = function() {
        document.getElementById('status').innerHTML = "[ 認識中 ]";
    };

    rec.onerror = function() {
        document.getElementById('status').innerHTML = "[ エラー ]";
        setTimeout(function(){
            rec.stop();
            console.log("rec.error & stop");
        },0)
    };

    rec.onend = function(){
        document.getElementById('status').innerHTML = "[ 停止中 ]";
        setTimeout(function(){
            rec.start();
            console.log("rec.start again");
        },0)
    };

    rec.onresult = function(event) {
        var you_said = event.results[0][0].transcript;
        you_tx = "YOU: " + you_said;
        api_tx = "COM: 音声入力して下さい";
        for(var i = 0; i < esp.length; i++){
            var out_loop1 = false;
            var out_loop2 = false;
            var out_loop3 = false;
            for(var j = 0; j < esp[i].dev.length; j++){
                var dev_jp = esp[i].dev[j].name_jp;
                var dev_param = esp[i].dev[j].param;

                var reg_exp_on = new RegExp('^(?!.*(オフ|ない)).*(?=' + dev_jp + ').*(?=(オン|on|音|つけ|付け)).*$');
                var reg_exp_off = new RegExp('^(?!.*(オン|ない)).*(?=' + dev_jp + ').*(?=(オフ|off|切|消)).*$');
                var reg_exp_temp = new RegExp('(?=(温度|湿度|何度|何パーセント)).*$');
                var reg_exp_reset = new RegExp('(?=(リセット|reset|アップデート|update)).*$');

                if(you_said.match(reg_exp_on)){
                    if(esp[i].connection == 1){
                        var xhr = new XMLHttpRequest();
                        xhr.onload = function(){
                            api_tx = "COM: " + dev_jp + "をONにしました";
                            esp[i].dev[j].param = 1;
                            syn.text = api_tx.slice(5);
                            speechSynthesis.speak(syn);
                            updateEach(i,j);
                        };
                        xhr.open("GET", esp[i].ip + esp[i].dev[j].name + "_on", true);
                        xhr.send();
                        out_loop1 = true;
                    }else{
                        api_tx = "COM: 現在、" + dev_jp + "の制御はできません";
                        you_tx = "YOU: " + you_said + " [非接続のため無効]";
                        out_loop2 = true;
                    };
                    break;
                }else if(you_said.match(reg_exp_off)){
                    if(esp[i].connection == 1){
                        var xhr = new XMLHttpRequest();
                        xhr.onload = function(){
                            api_tx = "COM: " + dev_jp + "をOFFにしました";
                            esp[i].dev[j].param = 0;
                            syn.text = api_tx.slice(5);
                            speechSynthesis.speak(syn);
                            updateEach(i,j);
                        };
                        xhr.open("GET", esp[i].ip + esp[i].dev[j].name + "_off", true);
                        xhr.send();
                        out_loop1 = true;
                    }else{
                        api_tx = "COM: 現在、" + dev_jp + "の制御はできません";
                        you_tx = "YOU: " + you_said + " [非接続のため無効]";
                        out_loop2 = true;
                    };
                    break;
                }else if(you_said.match(reg_exp_temp) && i == 1){
                    if(esp[i].connection == 1){
                        api_tx = "COM: 温度は" + esp[1].dev[2].param + "度、湿度は" + esp[1].dev[3].param + "%です";
                    }else{
                        api_tx = "COM: 現在、温度と湿度は測定できません";
                        you_tx = "YOU: " + you_said + " [非接続のため無効]";
                    };
                    out_loop2 = true;
                    break;
                }else if(you_said.match(reg_exp_reset)){
                    api_tx = "COM: 表示内容をリセットします";
                    you_tx = "YOU: " + you_said + " [リセット]";
                    checkAll();
                    out_loop2 = true;
                    break;
                };
            };
            if(out_loop1){
                out_loop3 = false;
                break;
            };
            if(out_loop2){
                out_loop3 = false;
                syn.text = api_tx.slice(5);
                speechSynthesis.speak(syn);
                updateEach(i,j);
                break;
            };
            out_loop3 = true;
        };
        if(out_loop3){
            api_tx = "COM: " + you_said + "? もう一度、音声入力して下さい";
            you_tx = "YOU: " + you_said;
            document.getElementById("api").innerHTML = api_tx;
            document.getElementById("you").innerHTML = you_tx + " [対応項目なし]";
            syn.text = api_tx.slice(5);
            speechSynthesis.speak(syn);
        };
        rec.stop();
    };

    window.onload = function() {
        rec.start();
        checkAll();
    };
</script>

</body>
</html>



そして、以下がESP8266にアップロードするプログラム。3台ESP8266があるので、微妙に違うのですが、代表として一番複雑なエアコン制御や温度/湿度センサーが含まれているESP8266のコードです。照明器具のON/OFFに関してはリレーを使っています。

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WiFiClient.h>
#include "DHT.h"

#define bed_pin 5
#define air_pin 0

#define duty_high 8
#define duty_low 16

#define DHTPIN 2
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);

const char* ssid = "*****";
const char* password = "*****";
const char* host_0 = "192.168.3.12";
//const char* host_1 = "192.168.3.13";//This IP Address
const char* host_2 = "192.168.3.14";

String web_page = "";

String bed_param = "0";
String air_param = "0";
String temp_param = "0";
String humid_param = "0";
String param = "0,0,0,0";

unsigned int air_on[243] = {3400, 1400, 600, 250, 550, 250, 550, 1050, 550, 250,
  550, 1050, 550, 250, 550, 250, 550, 250, 550, 1050, 550, 1050, 550, 250, 550, 
  300, 500, 250, 550, 1100, 500, 1100, 500, 300, 500, 300, 500, 300, 500, 300, 
  500, 300, 500, 300, 500, 350, 450, 350, 450, 350, 450, 350, 450, 350, 450, 
  350, 450, 350, 450, 1150, 450, 350, 450, 350, 450, 350, 450, 350, 450, 350, 
  450, 400, 450, 350, 450, 1150, 450, 350, 450, 350, 450, 350, 450, 350, 450, 
  350, 450, 1150, 450, 1150, 450, 1150, 450, 1150, 450, 1150, 450, 1200, 450, 
  350, 450, 350, 450, 350, 450, 1150, 450, 350, 450, 350, 450, 350, 450, 350, 
  450, 350, 450, 350, 450, 350, 450, 350, 450, 1150, 450, 1200, 450, 350, 450, 
  350, 450, 1150, 450, 350, 450, 350, 450, 350, 450, 350, 450, 350, 450, 350, 
  450, 1150, 450, 350, 450, 400, 400, 1200, 400, 400, 450, 350, 450, 350, 450, 
  350, 450, 350, 450, 350, 450, 350, 450, 350, 450, 350, 450, 400, 400, 400, 
  400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 
  400, 450, 350, 450, 350, 450, 350, 450, 350, 450, 350, 450, 350, 450, 350, 
  450, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 
  400, 400, 400, 400, 400, 450, 350, 450, 1150, 450, 1150, 450, 350, 450, 1200, 
  400, 400, 400, 400, 400, 1200, 400, 400, 400};
  
unsigned int air_off[99] = {3400, 1450, 550, 250, 550, 250, 500, 1100, 550, 250,
  550, 1050, 550, 250, 550, 250, 550, 250, 550, 1050, 550, 1050, 550, 300, 500, 
  250, 550, 300, 500, 1100, 500, 1100, 500, 300, 500, 300, 500, 300, 500, 300, 
  500, 350, 450, 300, 500, 350, 450, 350, 450, 350, 450, 350, 450, 350, 450, 
  350, 450, 350, 450, 1150, 450, 350, 450, 350, 450, 350, 450, 350, 450, 350, 
  450, 400, 450, 350, 450, 1150, 450, 350, 450, 350, 450, 350, 450, 350, 450, 
  1150, 450, 350, 450, 350, 450, 350, 450, 350, 450, 350, 450, 350, 450};

ESP8266WebServer server(80);

void setup(void){
  web_page = "<html><head><meta charset='utf-8'>";
  web_page += "<title>WIFI SWITCH</title></head><body>";
  web_page += "<div style='text-align:center; font-size:30px;'>";
  web_page += "<a href='/fluo_on'><div>蛍光灯: ON</div></a>";
  web_page += "<a href='/fluo_off'><div>蛍光灯: OFF</div></a>";
  web_page += "<a href='/bed_on'><div>寝室: ON</div></a>";
  web_page += "<a href='/bed_off'><div>寝室: OFF</div></a>";
  web_page += "<a href='/air_on'><div>エアコン: ON</div></a>";
  web_page += "<a href='/air_off'><div>エアコン: OFF</div></a>";
  web_page += "<a href='/wc_on'><div>トイレ: ON</div></a>";
  web_page += "<a href='/wc_off'><div>トイレ: OFF</div></a>";
  web_page += "</div></body></html>";
  
  pinMode(bed_pin, OUTPUT);
  pinMode(air_pin, OUTPUT);
  dht.begin();
  
  Serial.begin(115200); 
  delay(500);
  WiFi.begin(ssid, password);
  Serial.println("");

  while (WiFi.status() != WL_CONNECTED) {
    delay(5000);
    Serial.print(".");
  }
  WiFi.config(IPAddress(192,168,3,13),IPAddress(),IPAddress());

  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
    
  server.on("/", [](){
    server.send(200, "text/html", web_page);
  });

  server.on("/check", [](){
    read_DHT();
    param = bed_param + "," + air_param + "," + temp_param + "," + humid_param;
    server.send(200, "text/plain", param);
  });

  server.on("/fluo_on", [](){
    server.send(200, "text/html", web_page);
    http_request(host_0,"/fluo_on");
    delay(1000);
  });
  
  server.on("/fluo_off", [](){
    server.send(200, "text/html", web_page);
    http_request(host_0,"/fluo_off");
    delay(1000); 
  });
  
  server.on("/bed_on", [](){
    server.send(200, "text/html", web_page);
    digitalWrite(bed_pin, HIGH);
    bed_param="1";
    delay(1000);
  });
  
  server.on("/bed_off", [](){
    server.send(200, "text/html", web_page);
    digitalWrite(bed_pin, LOW);
    bed_param="0";
    delay(1000); 
  });

  server.on("/air_on", [](){
    server.send(200, "text/html", web_page);
    air_send(air_on,243);
    air_param="1";
    delay(1000);
  });
  
  server.on("/air_off", [](){
    server.send(200, "text/html", web_page);
    air_send(air_off,99);
    air_param="0";
    delay(1000);
  });

  server.on("/wc_on", [](){
    server.send(200, "text/html", web_page);
    http_request(host_2,"/wc_on");
    delay(1000);
  });
  
  server.on("/wc_off", [](){
    server.send(200, "text/html", web_page);
    http_request(host_2,"/wc_off");
    delay(1000); 
  });

  server.begin();
  Serial.println("HTTP server started");
  read_DHT();
}

void http_request(const char* host, String url){
  WiFiClient client;
  const int http_port = 80;
  if (!client.connect(host, http_port)) {
    Serial.println("connection failed");
    return;
  }
  
  client.print(String("GET ") + url + " HTTP/1.1\r\n" +
               "Host: " + host + "\r\n" + 
               "Connection: close\r\n\r\n");
               
  unsigned long timeout = millis();
  while (client.available() == 0) {
    if (millis() - timeout > 5000) {
      Serial.println("Client Timeout!");
      client.stop();
      return;
    }
  }
}

void read_DHT(){
  temp_param = String(int(dht.readTemperature()));
  humid_param = String(int(dht.readHumidity()));
  delay(250);
}

void air_send(unsigned int data[], int d){
  for (int i = 0; i < d; i++) {
    unsigned long duration = data[i];
    unsigned long start_time = micros();
    while (start_time + duration > micros()){
      digitalWrite(air_pin, 1-(i&1));
      delayMicroseconds(duty_high);
      digitalWrite(air_pin, 0);
      delayMicroseconds(duty_low);
    }
  }
}

void loop(void){
  server.handleClient();
}

ESP8266のプログラムのほうでは、server.on()に対応したURLによって、それぞれの端子のON/OFFをしています。他のESP8266へもリクエストをおくることが可能にしてあるので、ESP8266同士でもON/OFFできるようになっています。現状では、主にローカルネットワーク上で動作する仕様にしてあります。ポートマッピングを使えば、おそらくWANからのアクセスも可能になると思います。

まだJavaScriptやESP8266のコードの改善の余地はありますが、とりあえず動くので大丈夫かと思います。今後さらにデバイス追加していくことで、コード自体も(特に非同期通信の部分)改良していこうと思います。

2017年4月26日水曜日

ESP8266:音声認識Wifiスイッチ:フィードバックで現状表示

前回までは、ブラウザを通してサーバに接続し直すたびに、プログラム自体が初期化されてすべてのスイッチがオフになってしまいましたが、今回の改良で、各ESP8266内部にもスイッチのON/OFF状況を記憶させておく変数を用意したので、現在どのスイッチがON/OFFになっているかが分かるようになりました。これで当初考えていた仕組みがほぼ完成という感じです。

これは、サーバに接続し直したときの制御画面です。一度ブラウザを閉じてしまっても、再接続と同時にフィードバック用のURLへリクエストをだし、そのレスポンスとして現在のON/OFF状態のデータを受け取る仕組みになっています。レスポンスがない場合は、一番下の「トイレ:[非接続]」というような表示になり(トイレ用のESP8266はまだ設置していないため)、それぞれのESP8266が稼働中かどうかもわかります。

それにしても今回のこの単純な仕組みを実現したいがために、Node.js、EJS、Express、Node-RED、PythonのFlaskなども試してみましたが、結局使う必要はなかったという。
しかし、ひとつ気になったのは、以前試したBlynkの応用的な使い方であるBlynk HTTP RESTful APIです。

こちらは、いわゆるスマホで操作するBlynkとは違って、パソコンのブラウザからも制御できるという仕組み。Blynkで発行したTokenを使ってBlynkサーバにリクエストすれば、接続してあるESP8266などをリアルタイムで制御できます。当然、今回のように各端子のON/OFF状況も調べることができます。おそらく登録したプロジェクト(ESP8266などのデバイス一個分)ごとにTokenが発行されるので、ESP8266を3つ使うならば3プロジェクト登録して3つのTokenを使い回せば、それぞれの制御が可能になりそうです。この機能を使えば、従来通りにスマホのBlynkアプリから操作してもいいし、パソコンのブラウザからも操作できるというわけです。
しかしながら、これはBlynkのサービスというよりも、Apiaryというモックサーバを使ってWeb開発などをするサービスでした。最近この手のクラウドコンピューティングのようなサービスが増えてきて、どう使えばいいかまだわからないのですが、ネットで調べる限りでは便利そうでした。そのうち必要があれば使ってみたいと思います。

ということで、話はもどって、

当然ながら、すべてのESP8266が接続されていない場合はこの↑ように[非接続]ばかりになります。ハードのほうがまだ出来上がっていないため、現状ではこんな感じ。

例えば、蛍光灯をONにする場合は、http://192.168.3.12/fluo_onへリクエストを出し、読み込み完了とステータス200が確認できたあとに画面表示内容(ボタンの色など)をアップデートします。この場合はレスポンスとして受け取るデータはなしです。他のボタンや音声認識による操作も同様です。
これとは別に各スイッチのON/OFF状況を知るためには、http://192.168.3.12/fluo_on_checkという別のURLへリクエストを送り、レスポンスとして変数を受け取り画面表示内容に反映させています。

接続時のプログラムの流れ:
・ブラウザでメインサーバへアクセスする
・ブラウザから各ESP8266のフィードバック用URLへリクエストをおくる
・各ESP8266との接続確認をとる
・接続確認とれた場合、レスポンスとしてON/OFF状況の変数を受け取る
・接続確認とれない場合、非接続の変数値に置き換える
・ON/OFF/非接続の状況の変数をブラウザ側のJavaScriptの変数へ入れ直す
・変数に応じて画面表示内容をアップデートする

音声認識による制御プログラムの流れ:
・音声認識を開始する
・音声入力する
・音声入力をテキスト変換する
・変換された入力テキストを正規表現でマッチングさせる
・マッチングの内容に応じて各スイッチのON/OFF制御
・対応するESP8266のON/OFF制御用URLへリクエストを送る
・読み込み完了とステータス200を確認できれば画面表示内容をアップデート
・ESP8266側で端子をON/OFFする
・読み込み完了とステータス200を確認できない場合は、「接続できません」と表示する

ボタン操作による制御プログラムの流れ:
・ON/OFFのボタンを押す
・対応するESP8266のON/OFF制御用URLへリクエストを送る
・読み込み完了とステータス200を確認できれば画面表示内容をアップデート
・ESP8266側で端子をON/OFFする
・非接続中のボタンを押しても反応せず「操作できません」と表示

結局のところ、スイッチのON/OFFの仕組みよりも、ON/OFF状態を画面に反映させるためのプログラムにかなり時間がかかってしまいました。
今回の場合はJavaScriptで非同期通信を行っているため、コマンドを発したタイミングとその処理が終了するタイミングがずれるので、値がnullになってしまったりと、エラーのでる原因を見つけるのに結構手間がかかりました。ようやく非同期通信の仕組みがわかってきたという感じです。

以下がHTML、CSS、JavaScriptのプログラム:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Speech API</title>
</head>
<body id="bg">
    <div class="title" id="status">[音声認識開始]</div>
    <div class="api"><p id="api">COM: 音声入力して下さい</p></div>
    <div class="you"><p id="you">YOU: (認識された音声)</p></div>
    <div class="btn" id="fluo_on" onclick="buttonClick(0)">蛍光灯: ON</div>
    <div class="btn" id="fluo_off" onclick="buttonClick(1)">蛍光灯: OFF</div>
    <div class="btn" id="bed_on" onclick="buttonClick(2)">寝室: ON</div>
    <div class="btn" id="bed_off" onclick="buttonClick(3)">寝室: OFF</div>
    <div class="btn" id="air_on" onclick="buttonClick(4)">エアコン: ON</div>
    <div class="btn" id="air_off" onclick="buttonClick(5)">エアコン: OFF</div>
    <div class="btn" id="wc_on" onclick="buttonClick(6)">トイレ: ON</div>
    <div class="btn" id="wc_off" onclick="buttonClick(7)">トイレ: OFF</div>

<style type="text/css">
    body{
        text-align:center;
        font-family: 'Helvetica',sans-serif;
        color:#fff;
        margin:0px;
        padding:0px;
        background-color:#fff;
    }
    .title{
        width:100%;
        background-color:#fa8;
        margin:0px;
        padding:2% 0% 2% 0;
    }
    .api{
        text-align: left;
        width:96%;
        background-color:#e75;
        padding:2%;
        margin:1% 0 0 0;
    }
    .you{
        text-align: left;
        width:96%;
        background-color:#d66;
        padding:2%;
        margin:1% 0 0 0;
    }
    .btn{
        float:left;
        background-color:#aaa;
        padding:3% 0px;
        margin:1% 1% 0 1%;
        width:48%;
    }
    .btn:hover{
        opacity: 0.8;
        cursor: pointer;
    }

</style>

<script type="text/javascript">
    var flag_speech = 0;
    var youAns=[/^(?!.*(オフ|ない)).*(?=蛍光灯).*(?=(オン|on|音|つけ|付け)).*$/,
                /^(?!.*(オン|ない)).*(?=蛍光灯).*(?=(オフ|off|切|消)).*$/,
                /^(?!.*(オフ|ない)).*(?=寝室).*(?=(オン|on|音|つけ|付け)).*$/,
                /^(?!.*(オン|ない)).*(?=寝室).*(?=(オフ|off|切|消)).*$/,
                /^(?!.*(オフ|ない)).*(?=エアコン).*(?=(オン|on|音|つけ|付け)).*$/,
                /^(?!.*(オン|ない)).*(?=エアコン).*(?=(オフ|off|切|消)).*$/,
                /^(?!.*(オフ|ない)).*(?=トイレ).*(?=(オン|on|音|つけ|付け)).*$/,
                /^(?!.*(オン|ない)).*(?=トイレ).*(?=(オフ|off|切|消)).*$/];

    var apiAns=["蛍光灯をオンにしました",
                "蛍光灯をオフにしました",
                "寝室をオンにしました",
                "寝室をオフにしました",
                "エアコンをオンにしました",
                "エアコンをオフにしました",
                "トイレをオンにしました",
                "トイレをオフにしました"];

    var button_tx=["蛍光灯: ",
                   "蛍光灯: ",
                   "寝室: ",
                   "寝室: ",
                   "エアコン: ",
                   "エアコン: ",
                   "トイレ: ",
                   "トイレ: "];

    var html_id=["fluo_on",
                 "fluo_off",
                 "bed_on",
                 "bed_off",
                 "air_on",
                 "air_off",
                 "wc_on",
                 "wc_off"];

    var ip_address=["http://192.168.3.12/",
                    "http://192.168.3.12/",
                    "http://192.168.3.13/",
                    "http://192.168.3.13/",
                    "http://192.168.3.13/",
                    "http://192.168.3.13/",
                    "http://192.168.3.14/",
                    "http://192.168.3.14/"];

    var url_param = [0,0,0,0];

    var api_tx="COM: 音声入力して下さい";
    var you_tx="YOU: 認識された音声";

    //画面ボタンクリック処理
    function buttonClick(button_id){
        var param_id = parseInt(button_id / 2);
        if(url_param[param_id] >= 0){
            url_param[param_id]=1-(button_id % 2);
            you_tx = "YOU: ボタンで" + apiAns[button_id];
            request(html_id[button_id],button_id);
        }else{
            api_tx = "COM: 非接続中のため操作できません";
            you_tx = "YOU: ボタンで" + apiAns[button_id] + "が、操作不可能です"
            document.getElementById("bg").style.backgroundColor = '#ebf';
            updateHtml();
        };
    };

    //チェックした各種パラメータをセット
    function setParam(){
        for(var i = 0; i < url_param.length; i++){
            checkParam(ip_address[i*2]+html_id[i*2]+"_check",i);
        };
    };

    //非同期リクエストでパラメータを取得
    function checkParam(url,index){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                url_param[index] = parseInt(xhr.response);
                updateHtml();
            }else{
                url_param[index] = -1;
                updateHtml();
            };
        };
        xhr.open("GET", url, true);
        xhr.send();
    };

    //ボタン操作や音声認識による制御をリクエスト
    function request(url, index){
        var req_url = ip_address[index] + url;
        if(url_param[parseInt(index/2)] >= 0){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status === 200){
                    api_tx = "COM: " + apiAns[index];
                    updateHtml();
                    document.getElementById("bg").style.backgroundColor = '#fff';
                }else{
                    api_tx = "COM: 接続できません";
                    updateHtml();
                    document.getElementById("bg").style.backgroundColor = '#eef';
                };
            };
            xhr.open("GET", req_url, true);
            xhr.send();
        }else{
            api_tx = "COM: 現在、接続していませんよ";
            updateHtml();
            document.getElementById("bg").style.backgroundColor = '#ebf';
        };
    };

    //HTML画面表示アップデート
    function updateHtml(){
        for(var i=0;i<url_param.length;i++){
            if(url_param[i] == 1 ){
                document.getElementById(html_id[i*2]).innerHTML=button_tx[i*2]+"ON";
                document.getElementById(html_id[i*2+1]).innerHTML=button_tx[i*2+1]+"OFF";
                document.getElementById(html_id[i*2]).style.backgroundColor = '#c2b';
                document.getElementById(html_id[i*2+1]).style.backgroundColor = '#999';
            }else if(url_param[i] == 0){
                document.getElementById(html_id[i*2]).innerHTML=button_tx[i*2]+"ON";
                document.getElementById(html_id[i*2+1]).innerHTML=button_tx[i*2+1]+"OFF";
                document.getElementById(html_id[i*2]).style.backgroundColor = '#999';
                document.getElementById(html_id[i*2+1]).style.backgroundColor = '#c2b';
            }else{
                document.getElementById(html_id[i*2]).innerHTML=button_tx[i*2]+"[非接続]";
                document.getElementById(html_id[i*2+1]).innerHTML=button_tx[i*2+1]+"[非接続]";
                document.getElementById(html_id[i*2]).style.backgroundColor = '#ccc';
                document.getElementById(html_id[i*2+1]).style.backgroundColor = '#ccc';
            };
        };
        document.getElementById("api").innerHTML=api_tx;
        document.getElementById("you").innerHTML=you_tx;
    };

    //ここから音声認識処理
    function vr_function() {
        window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
        var rec = new webkitSpeechRecognition();
        rec.lang = 'ja-JP';
        rec.interimResults = false;
        rec.continuous = true;

        rec.onstart = function() {
            document.getElementById('status').innerHTML = "[ 認識中 ]";
        };

        rec.onerror = function() {
            document.getElementById('status').innerHTML = "[ エラー ]";
            if(flag_speech == 0){
                vr_function();
            };
        };

        rec.onsoundend = function() {
            document.getElementById('status').innerHTML = "[ 停止中 ]";
            vr_function();
        };

        rec.onresult = function(event) {
            var results = event.results;
            for (var i = event.resultIndex; i < results.length; i++) {
                if (results[i].isFinal){
                    var youSaid = results[i][0].transcript;
                    for(var j=0;j<youAns.length;j++){
                        if(youSaid.match(youAns[j])){
                            var param_id=parseInt(j/2);
                            if(url_param[param_id] >= 0){
                                url_param[param_id]=1-(j%2);
                            };
                            you_tx = "YOU: " + youSaid;
                            request(html_id[j], j);
                            break;
                        }else{
                            document.getElementById("api").innerHTML ="COM: 音声入力をどうぞ!";
                            document.getElementById("you").innerHTML ="YOU: " + youSaid;
                            document.getElementById("bg").style.backgroundColor = '#fc9';
                        };
                    };
                    vr_function();
                }else{
                    document.getElementById('you').innerHTML = "[解析中]:" + results[i][0].transcript;
                    flag_speech = 1;
                };
            };
        };
        flag_speech = 0;
        document.getElementById('status').innerHTML = "[ 起動中 ]";
        rec.start();
    };

    window.onload = function() {
        setParam();
        vr_function();
    };
</script>

</body>
</html>


尚、Web Speech API(途切れなくする方法)は、こちらを参考にしました。
追記:
実は上記の途切れなくする方法だと、スマホChromeでは繰り返しているうちにエラーが出てフリーズしてしまうので、その後改良してエラーなしで動作するようになりました(まとめのページ中ほどに書いてあります)。

以下が、ESP8266のプログラム(複数あるうちの一つ):

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WiFiClient.h>

#define ledPin 2
#define relayPin 16

const char* ssid = "*****";
const char* password = "*****";
const char* reqHost = "192.168.3.13";

String webPage = "";

String fluo_param="0";

ESP8266WebServer server(80);

void setup(void){
  webPage="<html><head><meta charset='utf-8'><title>WIFI SWITCH</title></head><body>";
  webPage+="<div style='text-align:center; font-size:30px;'>";
  webPage+="<a href='/fluo_on'><button>蛍光灯: ON</button></a><br/>";
  webPage+="<a href='/fluo_off'><button>蛍光灯: OFF</button></a><br/>";
  webPage+="<a href='/bed_on'><button>寝室: ON</button></a><br/>";
  webPage+="<a href='/bed_off'><button>寝室: OFF</button></a><br/>";
  webPage+="<a href='/air_on'><button>エアコン: ON</button></a><br/>";
  webPage+="<a href='/air_off'><button>エアコン: OFF</button></a><br/>";
  webPage+="<a href='/wc_on'><button>トイレ: ON</button></a><br/>";
  webPage+="<a href='/wc_off'><button>トイレ: OFF</button></a><br/>";
  webPage+="</div></body></html>";
  
  pinMode(ledPin, OUTPUT);
  pinMode(relayPin, OUTPUT);
  
  Serial.begin(115200); 
  delay(500);
  WiFi.begin(ssid, password);
  Serial.println("");

  while (WiFi.status() != WL_CONNECTED) {
    delay(5000);
    Serial.print(".");
  }
  WiFi.config(IPAddress(192,168,3,12),IPAddress(192,168,3,1),IPAddress(255,255,255,0));

  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
    
  server.on("/", [](){
    server.send(200, "text/html", webPage);
  });
  
  server.on("/fluo_on", [](){
    server.send(200, "text/html", webPage);
    digitalWrite(ledPin, HIGH);
    fluo_param="1";
    delay(1000);
  });
  
  server.on("/fluo_off", [](){
    server.send(200, "text/html", webPage);
    digitalWrite(ledPin, LOW);
    fluo_param="0";
    delay(1000); 
  });

  server.on("/fluo_on_check", [](){
    server.send(200, "text/html", fluo_param);
    delay(1000);
  });
  
  server.on("/bed_on", [](){
    server.send(200, "text/html", webPage);
    http_request(reqHost,"/bed_on");
    delay(1000);
  });
  
  server.on("/bed_off", [](){
    server.send(200, "text/html", webPage);
    http_request(reqHost,"/bed_off");
    delay(1000); 
  });

  server.on("/air_on", [](){
    server.send(200, "text/html", webPage);
    http_request(reqHost,"/air_on");
    delay(1000);
  });
  
  server.on("/air_off", [](){
    server.send(200, "text/html", webPage);
    http_request(reqHost,"/air_off");
    delay(1000); 
  });

  server.on("/wc_on", [](){
    server.send(200, "text/html", webPage);
    http_request(reqHost,"/wc_on");
    delay(1000);
  });
  
  server.on("/wc_off", [](){
    server.send(200, "text/html", webPage);
    http_request(reqHost,"/wc_off");
    delay(1000); 
  });

  server.begin();
  Serial.println("HTTP server started"); 
}

void http_request(const char* host, String url){
  WiFiClient client;
  const int httpPort = 80;
  if (!client.connect(host, httpPort)) {
    Serial.println("connection failed");
    return;
  }
  client.print(String("GET ") + url + " HTTP/1.1\r\n" +
               "Host: " + host + "\r\n" + 
               "Connection: close\r\n\r\n");
  unsigned long timeout = millis();
  while (client.available() == 0) {
    if (millis() - timeout > 5000) {
      Serial.println("Client Timeout!");
      client.stop();
      return;
    }
  }
}

void loop(void){
  server.handleClient();
}

fluo_paramというのが、ESP8266内における蛍光灯のON/OFF状況の変数です。ONのとき"1"、OFFのとき"0"で、フィードバック用URLである/fluo_on_checkにリクエストがくると、そのレスポンスとしてfluo_paramの値("0"か"1")をブラウザへ返します。
その他は前回とほぼ同じで、仮にこのESP8266のIPアドレスにアクセスしてもボタン操作できる画面(音声認識なし)が表示されます。このESP8266から他のESP8266(他のIPアドレス)へもリクエストを送ることができるので、他のESP8266を制御することも可能です。おそらくメインサーバからそれぞれのESP8266を制御することになると思うのですが、基本的にどのESP8266からであっても接続されている全てのESP8266の制御が可能になっています。

追記:
その後、非接続のESP8266に対するボタン操作や音声入力した場合の処理や表示についても追加しておきました。こういったものは、操作するたびに矛盾する処理が見つかるのできりがありません。

関連:
音声認識Wifiスイッチ/ESP8266使用(まとめ)についてはこちら

2017年4月25日火曜日

ESP8266:XMLHttpRequestで改良

ESP8266を使った音声認識Wifiスイッチのさらなる改良の続きです。
前回は、複数あるESP8266の一つをメインサーバとして、そこから他のESP8266へもHTTPリクエストを送る仕組みにしていましたが、今回はAjaxのXMLHttpRequestを使って、それぞれのESP8266へリクエストを送る仕組みに変更しました。
そもそも、XMLHttpRequestは同ドメイン内でしか使えないと思っていたので、前回のようなやり方になってしまったのですが、よく調べてみたらChromeやFireFoxでは異なるドメインへのリクエストも問題ないということでした。結局かなり遠回りしていましたが、クエリもサーバ同士の通信も不要で元の単純なアイデアに戻ってきた感じです。


これは↑、左側のESP8266(server A)がメインサーバとなり、ここに音声認識を含んだJavaScript、ならびにHTML+CSSファイルをアップロードしておき、ブラウザからこのIPアドレスにアクセスします。ブラウザ上では音声認識によるスイッチのON/OFF、そしてボタンでも操作できます。右側のもう一つのESP8266には、speech.html内に記述されたJavaScript(XMLHttpRequest)でON/OFFのリクエストを出します。
要は、画面遷移せずに複数あるESP8266に割り振った静的IPアドレスにリクエストを出しているだけです。一応XMLHttpRequestでリクエストを出したら、onreadystatechangeで反応の確認をとってから、画面内表示をアップデートするようにしています。以下の部分が今回のリクエストの仕方です(ほぼサンプル通りですが)。

    function request(url){
        var index = html_id.indexOf(url);
        var req_url = ip_address[index] + url;
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                updateHtml();
                console.log(xhr.response);
            }
        }
        xhr.open("GET", req_url, true);
        xhr.send();
    }

それぞれのスイッチをON/OFFするにはそれに対応したURL("/fluo_on"や"/fluo_off"など)へリクエストをすればいいのですが、画面表示上ボタンもあることから、どれがONになっていて、どれがOFFになっているか分かるようにボタンの色を変える(この場合updateHtmlという関数)必要もあります。今回のようなやり方の場合は、onreadystatechangeで確認したのちにupdateHtmlで画面表示内容を変更するので、もしリクエスト先のESP8266から返事がなければボタンを押しても色が変わらないということになります。

これ↑は、前々回クエリをつかってやりとりしていた画面です(ボタンなどに表示画面自体は今回も同じ)。URLのあとに長々とクエリをつけて異なるサーバへ表示用変数を渡す面倒なやり方になっていましたが、今回は画面表示に関してはメインサーバとのやりとりだけなので、メインサーバ内のJavaScriptの変数に記憶させているだけでクエリは不要となりました。



もうひとつの方法として、ESP8266をメインサーバとして使わず、外部にある普通のWebサーバに音声認識も含むJavaScriptならびにHTML+CSSファイルをアップロードしておき、そこをメインサーバにしてしまうというのもあります。
この場合、ESP8266には簡単なボタン操作するだけのHTMLデータ(音声認識なし、画面表示も単純)を書いておき、万が一中央のメインサーバと通信不能になっても、一応それぞれのESP8266へアクセスすればON/OFFだけはできるようにしておきます。
こんな感じ↑の臨時用ボタンくらいは表示できるようにしておく。

ESP8266にはわざわざHTMLファイルをアップロードしなくてもいいので、その分手間が省けそうです。外部サーバをメインサーバとすれば、ファイルが巨大になってもなんとかなりそうです。あるいは、ローカルで使うのであれば、Raspberry Piでサーバを立ち上げていてもいいかもしれません。

あと改良しなければいけない点は、メインサーバと再接続したときに、現状だとすべてがリセット(すべてOFF)になってしまうので、再接続の際にそれぞれのスイッチのON/OFF状態を確認するプログラムが必要という感じです。そのためには、それぞれのESP8266にON/OFF状態の変数を用意しておき、再接続の際に状態チェック用のURLにアクセスして、それぞれのESP8266からそのデータを受け取る仕組みにすればいいかなと考えています。

追記:
音声認識Wifiスイッチ/ESP8266使用(まとめ)についてはこちら

2017年4月23日日曜日

ESP8266:WebサーバからHttpリクエスト

前回までの複数のESP8266を用いた音声認識Wifiスイッチの続きです。
複数の部屋(リビング、寝室、トイレなど)に異なるIPアドレスを割り振ったESP8266があるので、リビングの電源をON/OFFするには、リビングに設置したESP8266のIPアドレスにリクエストしていましたが、リビングから寝室の電源をON/OFFするには、寝室のIPアドレスへ画面遷移してリクエストを送るというややこしい仕組みになってました。


仕組みとしてはこんな感じで、電源をON/OFFさせたい場所のESP8266へ直接リクエストを送って、それぞれのサーバからレスポンスを受け取っていたという感じです。画面遷移しないで、AからBあるいはBからAへリクエストできないものかと、以下のようなシステムに変更してみました。


この場合は、serverAがメインサーバとなり、端末からもこのIPアドレスにアクセスして、Aの電源をON/OFFする場合は従来通りAへリクエストを送り、Bの電源をON/OFFするには、Aにリクエストを送り、Aが内部的にBへHTTPリクエストを送ることになります。
逆にBのIPアドレスへアクセスしても、同様にAに対してリクエストを送ることができるので、AであれBであれ、どちらにアクセスしようと画面遷移せずに両方の電源を制御できます。

今までは、サーバはクライアントからのリクエストを待ち、リクエストがあるときだけレスポンスするのだと思っていたので、サーバから別のURLへHTTPリクエストを送ることはできないと思っていました。しかし、サーバからも普通にHTTPリクエストできるということでした(もっと早く気づけば)。

以下がサンプルコード。今回は音声認識の部分は外しています。単にサーバAを介してサーバBを制御するという仕組みの部分だけです。

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WiFiClient.h>

#define ledPin 2

const char* ssid = "******";
const char* password = "******";
const char* reqHost = "192.168.3.13";

String webPage = "";

ESP8266WebServer server(80);

void setup(void){
  webPage="<http><head><meta charset='utf-8'><title>WIFI SWITCH</title></head><body>";
  webPage+="<div style='text-align:center; font-size:30px;'>";
  webPage+="<a href='/this_on'><button>THIS: ON</button></a><br/>";
  webPage+="<a href='/this_off'><button>THIS: OFF</button></a><br/>";
  webPage+="<a href='/other_on'><button>OTHER: ON</button></a><br/>";
  webPage+="<a href='/other_off'><button>OTHER: OFF</button></a><br/>";
  webPage+="</div></body></html>";
  
  pinMode(ledPin, OUTPUT);
  
  Serial.begin(115200); 
  delay(500);
  WiFi.begin(ssid, password);
  Serial.println("");

  while (WiFi.status() != WL_CONNECTED) {
    delay(5000);
    Serial.print(".");
  }
  WiFi.config(IPAddress(192,168,3,12),IPAddress(192,168,3,1),IPAddress(255,255,255,0));

  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
    
  server.on("/", [](){
    server.send(200, "text/html", webPage);
  });
  
  server.on("/this_on", [](){
    server.send(200, "text/html", webPage);
    digitalWrite(ledPin, HIGH);
    delay(1000);
  });
  
  server.on("/this_off", [](){
    server.send(200, "text/html", webPage);
    digitalWrite(ledPin, LOW);
    delay(1000); 
  });
  
  server.on("/other_on", [](){
    server.send(200, "text/html", webPage);
    http_request(reqHost,"/this_on");
    delay(1000);
  });
  
  server.on("/other_off", [](){
    server.send(200, "text/html", webPage);
    http_request(reqHost,"/this_off");
    delay(1000); 
  });

  server.begin();
  Serial.println("HTTP server started"); 
}

void http_request(const char* host, String url){
  //host="192.168.3.13";
  //url="/this_on";
  WiFiClient client;
  const int httpPort = 80;
  if (!client.connect(host, httpPort)) {
    Serial.println("connection failed");
    return;
  }
  client.print(String("GET ") + url + " HTTP/1.1\r\n" +
               "Host: " + host + "\r\n" + 
               "Connection: close\r\n\r\n");
  unsigned long timeout = millis();
  while (client.available() == 0) {
    if (millis() - timeout > 5000) {
      Serial.println("Client Timeout!");
      client.stop();
      return;
    }
  }
}

void loop(void){
  server.handleClient();
}


ということで、http_request()という関数をつくり、他のIPアドレスのボタンを押したら、レスポンスとしてHTMLデータ(webPage:ボタン画面)を返しつつ、リクエストをもう一方のESP8266へ送るということにしました。setup()内にある以下の部分です。

  server.on("/other_on", [](){
    server.send(200, "text/html", webPage);
    http_request(reqHost,"/this_on");
    delay(1000);
  });
  
  server.on("/other_off", [](){
    server.send(200, "text/html", webPage);
    http_request(reqHost,"/this_off");
    delay(1000); 
  });

少しずつ曖昧な部分の理解が深まってきたので、徐々にまともなシステムになりつつあります。
Raspberry Pi上にNode-REDで全体を管理するサーバを立ち上げようと思いましたが、今回のやり方で大丈夫そうなので、Node-REDやMQTTなどは使わずいけそうです。
電気的な制御は単純なON/OFFですが、Wifiが絡んでくると、サーバだとかクライアントだとか、通信の仕組みで手間がかかります。ということで、またもやRaspberry Pi(サーバ利用)は不要となってしまいました。もっと複雑なことをしない限り、しばらくは中枢的なサーバはいらなさそうです。
このシステムは近々完成させて、次は再度IPカメラに戻りたいと思います。

追記:
改良案はこちら(XMLHttpRequestを使ったサンプル)
音声認識Wifiスイッチ/ESP8266使用(まとめ)についてはこちら

2017年4月17日月曜日

ESP8266ファイルシステム:SPIFFSについて

ESP8266にHTMLファイルなどの外部ファイルを添付する際に、SPIFFSを使いますが、いまいちよくわからない部分もあったので、覚書として書いておきます。Arduino IDEでのやり方です。

Toolのインストール(下準備):
基本はこのESP8266のGitに書いてあるので、ここを見ればだいたい分かるはず。
まず、アップロードTool「esp8266fs.jar」をダウンロード(こちらのサイトここから)。
現在のバージョンは0.3.0のようです。
ダウンロードした「ESP8266FS-0.3.0.zip」を解凍。
Macならアプリケーション>Arduinoを右クリックで「パッケージの内容を表示」。
Arduino>Contents>Java>tools>ESP8266FS>tool>esp8266fs.jar
となるような場所にファイルもしくはフォルダごと移動し、Arduino IDEを再起動で準備OK。

外部ファイルのアップロード:
Arduino IDEのメインのソースとなるinoファイルに添付したい外部ファイル(HTMLファイルなど)を取り込みます。
「ファイルを追加...」で任意の場所から外部ファイルを選択(今回はデスクトップ上にあるindex.htmlを選択)。


 外部ファイルを追加したら、「スケッチのフォルダを表示」で中身確認。

こんな感じ↑で、メインのinoファイルと同じディレクトリにdataフォルダが自動的に作成されており、その中に追加した外部ファイル(この場合index.html)が入っていることを確認できます。

つぎに、先ほどのツールを使って外部ファイルだけ(この場合index.htmlファイルだけ)をESP8266へ先にアップロードしておきます。

Arduino IDEのコンソール画面には、こんな感じでアップロード状況が表示されます。
3%くらいずつアップロードしているようで、かなり時間かかります。

この段階では、まだ外部ファイルだけのアップロードなので、メインのinoファイルに書かれたプログラムはアップロードされていないないはず。

最初に外部ファイルだけアップロードするときにこのような画面が出てきて、ファイルsizeなどが表示されています。この場合3052なので、約3kバイトという感じでしょうか。実際のindex.htmlを「情報を見る」で見てみると、8765バイトあるのですが、この差についてはよくわかりません。

メインのプログラムに外部ファイル読み込みコマンドを追加:
外部ファイルを読み込むためのプログラムを追加しておきます。
ESP8266では、Webサーバの表示用HTMLデータを用いることがよくあります。HTMLデータを読み込んだのちにString変数に入れておき、それをクライアント側に送信ということになります。
以下はinoファイルの冒頭部分です。

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <WiFiClient.h>
#include "FS.h"

#define ledPin 13
#define relayPin 2

MDNSResponder mdns;

const char* ssid = "*****";
const char* password = "*****";
String webPage = "";
ESP8266WebServer server(80);

void setup(void){
  SPIFFS.begin();
  File f = SPIFFS.open("/index.html", "r");
  if (!f) {
    Serial.println("file open failed");
  }else{
    webPage = f.readString();
    f.close();
  }

最初のほうで、
#include "FS.h"
を呼んでおき、
setup()内で、

 SPIFFS.begin();
  File f = SPIFFS.open("/index.html", "r");
  if (!f) {
    Serial.println("file open failed");
  }else{
    webPage = f.readString();
    f.close();
  }

と書いて、index.htmlを読み込みつつ、String変数のwebPageに入れてしまいます。
Arduino IDEでのディレクトリは、data/index.htmlでしたが、ESP8266内では/index.htmlで読み込めます。
あとはこのままメインのプログラムと一緒に「マイコンボードに書き込む」でアップロードすればOK。

外部ファイルの確認や消去方法:
外部ファイルがアップロードされているのかどうかなど確認するには、SPIFFSのGitに詳しく書かれているので参考にするといいと思いますが、実際確認してみるプログラムを書いてみました。
#include "FS.h"

int val;
String filename;

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

void loop(){
  if(Serial.available()>0){
    val=Serial.read();
    if(val=='a'){//ファイル名やサイズの確認
      Dir dir = SPIFFS.openDir("/");
      while (dir.next()) {
        filename=dir.fileName();
        Serial.println("File Name: "+dir.fileName());
        File f = dir.openFile("r");
        Serial.println(f.size());
      }
      Serial.println("---a end");
      Serial.println("");
    }else if(val=='b'){//ファイルが存在するかどうか?
      if(SPIFFS.exists(filename)){
        Serial.println("File exists");
      }else{
        Serial.println("not exists");
      }
      Serial.println("---b end");
      Serial.println("");
    }else if(val=='c'){//ファイル削除
      SPIFFS.remove(filename);
      Serial.println("File removed");
      Serial.println("---c end");
      Serial.println("");
    }
  }
}


外部ファイルをアップロードしたESP8266に、このプログラムをアップロードします。この場合、inoファイルに書かれているプログラムはこれだけなので、もうすでに何らかのプログラムが書き込まれている場合は上書きされてしまうため要注意。
シリアルモニタを開いて、
a を入力でファイル名、サイズ(---a endで終了)
b を入力でそのファイルが存在するかどうか?(---b endで終了)
c を入力でそのファイルを削除(---c endで終了)
という感じです。
特にaはサンプルとほぼ同じですが、 while(dir.next())があるため、複数ファイル(html、css、jsファイルなど)あるならば、順次複数出力するのだと思います。

以下がシリアルモニタの出力結果の画面。


最初に、aでファイル名(ディレクトリも含め)、8765バイト(Macのファイルの「情報を見る」と同じ結果)。
次に、bで/index.htmlファイルが存在するかどうか?File existsで存在確認。
そして、cで/index.htmlファイルを削除。File removedで消去済み。
ファイル削除後、bで/index.htmlファイルの存在の再確認。もちろんnot existsで不在確認。
ちなみに、aを入力すると特に返答なし(ファイルがないため)。

たまに、複数あるESP8266にどの外部ファイルがアップロードされているか(あるいはアップロードされていないか)忘れてしまうときがあります。そのようなときには、内容確認としてこのようなことができれば便利かと。
さらに、ファイルの中身まで確認したいというなら、
File f=SPIFFS.open("/index.html","r");
String contents=f.readString();
Serial.println(contents);
などとすればいいのかもしれません。


人気の投稿