自作CNCマシン・レーザーカッターについて

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からそのデータを受け取る仕組みにすればいいかなと考えています。

追記：

さらに改良：ON/OFF状態を知るためのリクエストを入れたサンプル

音声認識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月22日土曜日

久しぶりのRaspberry Pi3: PIXELとかNode-REDとか

最近はESP8266やESP32を扱っていたので、サーバ用Raspberry Piを使ってみようかと。
しばらくアップデートなどしていなかったのですが、どうやら今はPIXELというのに変わっていて、ブラウザもChromiumが標準となっているようだったので、Web Speech APIを使うにはちょうどいいかなと。
ということで、PIXELにアップデートしてみました。

また最初から設定し直しなので、いちいちターミナルで手入力なのかと思いきや、PIXELに変えてみるともはや普通のOSという感じで、ほとんどの設定がGUIで可能でした。
Bluetoothのペアリングなども、Bluetoothアイコンからすぐに設定できるので、ほぼMacと同じような感じの使い勝手で設定などはスムースに進みました。

Raspberry Piはモニタ、マウス、キーボードなどつなげると配線だらけになってしまうので、少し前にBluetoothのタッチパッドつき小型キーボードにしてしまいました。

AliExpress.com Product - Windows PC 59 Keys Ultra Slim Mini Bluetooth Keyboard with Touch Pad Panel RR6V1451円（送料込み）
サイズ、23x15x0.6cm。充電はミニUSBで。
たぶん、これと同じものを、楽天ポイントがあったので楽天で購入。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

NEC(日本電気) LAVIE Tab W TW708/CAS PC-TW708CAS キーボード 7-8インチ汎用キーボードタッチパッド式マルチOS対応(Android/Windows対応) [JP配列/US配列両方対応] 超薄型 Bluetoothキーボード [タブレットスタンド付き] 日本語取扱説明書付きメール便発送不可
価格：2580円（税込、送料無料) (2017/4/22時点)

Raspberry Piとは簡単に接続でき（再接続も一発）、日本語（青Fn+Qで切り替え）も対応しているので問題なく使えます。タッチパッドの部分もスワイプ可能、押すとクリックも可能、タップでクリックも可能。安いわりになかなか高性能です。厚さ6mmなのでかなり薄いし、その分軽いので持ち運びにもいいかもしれません。思った以上につくりは雑ではないです。

キーボードだけのものにしようかと思いましたが、Raspberry Piにはマウスは繋がないで、これひとつで済ませようとタッチパッドつきにしてしまいました（とは言っても、画面自体がタッチパネルだったので、もはやタッチパッドもマウスもどちらも必要なかった）。

AliExpress.com Product - Raspberry Pi 3 B 7inch HDMI LCD 1024 * 600 Resistive Touch Screen LCD Display5823円（送料無料）
同じ大きさで同じ解像度のモニターを使っていますが、最近だとこのタイプがよさそうです。
裏に直接Raspberry Piを差し込めるピンと専用のHDMIプラグもついているようです。

AliExpress.com Product - Elecrow HDMI Connector for 5 inch HDMI Raspberry Pi Screen Dispaly DIY HDMI Connector Kit　113円（送料無料）この180度折り返しのHDMIプラグを探していたのですが、単品だとここで売っているようです。

この折り返しのプラグがないため、現在は以下のようなアダプタなどで接続。

モニターにアクリル板を取り付け、ケーブル類もコネクターを複数つないで、できるだけコンパクトにしようと試みましたが、現状はこんな感じ。これにさらに電源用USB、マウス、キーボード、その他のUSBなどがつながるとケーブル類はごちゃごちゃになってしまいます。できるだけBluetoothなどでつないだほうがすっきりするし、その他のデバイスもUSB接続できます。

AliExpress.com Product - 180/360 Degree Rotating Adapter HDMI Male to Female HDMI Cable Adaptor Connector extender for 1080P HDTV250円（送料無料）
モニターとは、この360度どちらにも折り曲げ可能で、しかも首振りも180度回転可能なHDMIアダプタでなんとかつないでいます。

AliExpress.com Product - LVSUN 5V 3A 9V 12V Universal Qucik Charger 2.0 Portable Travel AC Adapter USB Wall Charger EU UK US Plug for Mobile Phone Tablet1212円（送料込み）
Raspberry Pi3用の電源は2.5A以上が推奨となっているため、以前こんな感じの5V3A出力のUSB電源を購入しました（当時850円くらい）。

実際Raspberry Piに電源を入れてどのくらいの電流が流れているか調べてみると、

何もしていないと1A前後で、ブラウザを使用すると1.2A前後になります。
たぶん、特別なことをしないかぎり2.5Aにはならないと思うので、2.1Aのモバイルバッテリーを試してみると大丈夫でした。以下。

モバイルバッテリーはAliExpressだとなぜか高いので以前Amazonで購入したもの。10000mAhで1.0Aと2.1A出力のもの（現在のタイプは2.4Aに改良されたみたいです）。Raspberry Pi3は消費電力が高いので、持ち運びのバッテリーを用意するのが難しいのですが、この2.4A（2.1Aでもぎりぎり大丈夫）であれば、わざわざAC100Vにつながなくてもよさそうです。

2.1Aでも大丈夫ということなら、以下のAliExpressで売っている安いUSB電源（115円）ではどうか？

こんな感じの小型なタイプなのに、1.0Aと2.1A、合計で3.1A使えるらしい。以下。

AliExpress.com Product - HOT SALE 5V 1.0A 2.1AHome Travel Dual Port AC USB Wall Charger US Plug for iPhones for smart phones ideal for travel115円（送料無料）。
安いので買ってみましたが、Raspberry Pi3で試してみると、

起動中に5V以下になってしまい無理っぽい。これはAliExpressにありがちなスペック詐欺の商品かもしれません。この手の小型タイプは、せいぜい1Aが限度なはず。内部の保護回路など外して無理やり2.1Aとか言っているのかも。まあ、115円だから仕方ないという感じ（というか、そもそもESP8266用にAC100VからDC5Vをとるための降圧回路が欲しかったので分解用に買ったものです）。

ちなみに、このUSBテスターは3.3〜33V、0〜5A。165Wまで計測できるようです。

AliExpress.com Product - USB tester DC Voltmeter ammeter current voltage meters capacity monitor qc2.0/qc3.0 quick charger Battery Power Bank detector442円（送料無料）

USBプラグ/ソケットがついているワニ口クリップをつなげると、以下のような使い方もできるようです。

AliExpress.com Product - USB Crocodile wire Alligator clips Male/female to USB tester Detector voltage meter ammeter capacity power meter monitor, etc　167円（送料込み）

という感じで、あいかわらずAliExpressでつい買ってしまいます。

Raspberry Piに話はもどりますが、PIXELにしてから、Chromiumが使えるのとすでにNode-REDが入っているので便利そうです。

IoTにはよく出てくるNode-Redですが、これをRaspberry Piで立ち上げておけばいろいろできそうです。また覚えなければいけないことが増えますが、音声認識による部屋の電源のON/OFF制御に使えそうです。
ノードと線をつないで、フローチャートのようなシステムを組んでいくタイプで、一見簡単そうに組めそうですが、ある程度全体像が見えて、それぞれのノードの役割も理解していないと難しそうです。
これとは別に一旦システムを組んだものを、Node-REDに置き換えるというのなら、やりやすいのかもしれません。

それから、Raspberry Pi Zero Wですが、日本仕様はもう少しで発売といいながらなかなか発売しない。発売開始しても、おそらくすぐに完売で、しばらくは入手困難になるはず。
ESP32でもいいのですが、同じような値段であればRaspberry Pi Zero Wのほうが様々なインターフェースを持ち合わせているので便利なはず。
ESP32のほうもたまにやってみてはいるのですが、いまだにSPIFFSを使っての外部ファイル読み込みが難しい。どうやらESP8266とは仕組みが違うようで、かなり面倒な感じ。SDカードを使うサンプルはあるので、外部ファイル読み込みなら今のところそれを使うという感じでしょうか。
ESP32に、Micro PythonやJavaScriptで動かすEspduinoやDuktapeをのせてしまったほうがいいのかもしれないけれども、まだ保留中。おそらくNode.jsを使うことになるので、JavaScriptで統一してしまったほうがよさそう。
しかし、Raspberry Pi Zero Wが発売になってしまうと、少し事態は変わって、ちょっとしたものはESP8266でやって、メモリが必要そうなものは、ESP32を使うというよりも、Raspberry Pi Zero Wでやるという感じになるのかもしれません。そうなるとArduino Unoレベルのマイコンは出番がないかもしれません。

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);
などとすればいいのかもしれません。

登録: 投稿 (Atom)