Wi-Fi リモート LEDスイッチ を スマホ ブラウザ で作ってみました。

今回は Wi-Fi リモート LEDスイッチ を スマホ ブラウザ で作ってみました。
ESP-WROOM-02 ( ESP8266 ) と Arduino UNO で UART ( シリアル )通信を使い、スマートフォンブラウザの Google Chrome や iOS Safari にＬＥＤボタンスイッチを設置し、Arduino のdigital端子に接続したLEDの点灯制御をしてみました。なんと、すべてATコマンドでやってのけました。

 

これはAndroidスマホで、Google Chromeですが、
iOSのSafariではこうなります。

iOSの方がボタンが丸くなってカッコいいですね。
もっとボタンを装飾したかったのですが、Arduino UNOではメモリの関係上なのかどうかわからないのですが、長いHTMLは送れませんでした。　結局ほとんどノーマルボタンです。
これ以上のボタンは厳しいですね。
これのポイントは、前回の記事で述べたように、Arduino UNO のソフトウェアシリアルが115200bpsの速度では処理しきれず、文字化けしてしまうということです。
また、ロジックレベル変換モジュールはハードウェアシリアルとソフトウェアシリアルの微妙に異なる速度が影響してか、まともに動作してくれないので、WROOMの出力はAruduinoに直で入れました。
そして、ハードウェアリセットをArduinoのデジタルピンで制御していたのですが、これも誤作動してリセットしてしまうことがあったので、やめました。
文字化けが解消したので、ハードウェアリセットではなく、ソフトウェアリセットで十分だったのです。
そうしたら、けっこうサクサク良好に受信できるようになり、誤作動もほとんどなくなりました。
動画はこんな感じです。

なかなかサクサク動いてくれますよね。

ESP-WROOM-02はamazonさんのマイクロテクニカさん代理店のブレークボードを使用してます。
２ｍｍピンヘッダもハンダ付けしてジャンパーピンをセットしてます。
(※2015年当初とはタイプが異なっています）

これを購入すると取扱説明書がダウンロードできますので、その通りに接続します。

その他の配線はこんな感じです。

 

ロジックレベル変換は１ｃｈしか使わないので、スペースがもったいないです。
これを抵抗で減圧してやってみたのですが、うまくいかなかったので、とりあえずこのモジュールは残しておきます。
青色LEDは電流少なくてもかなり明るかったので、10kΩの抵抗にして、赤と緑は1kΩでちょうどよい明るさでした。
またまた、見切り発車的にプログラムソースコードを一応載せておきますが、まだベータのベータ版ですので、誤り等ありましたらコメントかご連絡ください。 素人的なコードですみません・・・

※88行目を Accept-Encoding から Accept-Language に変更しました
(Arduino IDE 1.6.13で動作確認済み)　（2016/12/29更新）

 

【ソースコード】 (※無保証　※PCの場合、ダブルクリックすればコード全体を選択できます)

#include <SoftwareSerial.h>

SoftwareSerial ESP8266_Serial(2,3); // RX, TX(2番は使わない)

long LastTime = 0;

boolean WROOM_boot = false;//WROOMが起動したかどうかの判定
boolean WiFi_setup = false;//WIFIセットアップが済んだかどうかの判定

void setup()
{
  Serial.begin(115200);
  while (!Serial) {
    ; // wait for serial port to connect. Needed for Leonardo only
  }
  ESP8266_Serial.begin(115200);
  Serial.println("Wait.");
  delay(5000);
  //LEDのピンモード設定 
  pinMode(8,OUTPUT);
  digitalWrite(8,LOW);
  pinMode(9,OUTPUT);
  digitalWrite(9,LOW);
  pinMode(10,OUTPUT);
  digitalWrite(10,LOW);
  
  ESP8266_Serial.print("AT+RST");//ソフトウェアリセット
  ESP8266_Serial.print("\r\n");
}

void loop()
{
  String str;
  char c;

  if(Serial.available()){//WROOM購入時はreadyのみ返って来る。
    if(WROOM_boot == false){//シリアルが有効であれば、WROOMが起動していると判定
      Serial.println("ESP-WROOM-02 Serial Boot OK!");
      WROOM_boot = true;
    }
    Serial.print(".");
    switch (WiFi_setup){
      case false:
        if(Serial.find("ready")){
          //セットアップ済みならばWIFI CONNECTが返ってきてWIFI GOT ITという文字が返るまで約４秒
          delay(4000);
          Serial.println();
          Serial.println("-----WIFI setup IN");
          //ステーションモード有効コマンド
          ESP8266_Serial.print("AT+CWMODE=1");
          ESP8266_Serial.print("\r\n");
          Data_Read_Display("OK");  //ＷＲＯＯＭからのＯＫレスポンスを受けたら次へ進む
          //アクセスポイントのＳＳＩＤ、パスワード設定コマンド
          ESP8266_Serial.print("AT+CWJAP=\"xxxx\",\"xxxx\"");//ご自分のルーターのＳＳＩＤとパスワード  
          ESP8266_Serial.print("\r\n");
          Data_Read_Display("WIFI GOT IP");  //ＷＲＯＯＭからＷＩＦＩ　ＧＯＴ　ＩＰというレスポンスを受けたら次へ進む
          //ＡＰから割り当てられたＩＰアドレスとＷＲＯＯＭのＭＡＣアドレス確認
          delay(1000);
          ESP8266_Serial.print("AT+CIFSR");
          ESP8266_Serial.print("\r\n");
          Data_Read_Display("OK");//ＷＲＯＯＭからのＯＫレスポンスを受けたら次へ進む
          //マルチプルコネクション有効コマンド
          ESP8266_Serial.print("AT+CIPMUX=1");
          ESP8266_Serial.print("\r\n");
          Data_Read_Display("OK");  //ＷＲＯＯＭからのＯＫレスポンスを受けたら次へ進む
           //サーバーモード有効、ポート番号設定
          ESP8266_Serial.print("AT+CIPSERVER=1,1001");
          ESP8266_Serial.print("\r\n");
          Data_Read_Display("OK");
          Serial.println("Arduino WROOM Server OK!");//この表示が出たらＷＲＯＯＭのサーバー設定終了
          WiFi_setup = true;
        }
        break;
      case true:
        byte ipd_no = 0;
        str = "";
        while(1){
          if(Serial.available()){
            c = Serial.read();
            if(c<0x80 && c>=0){//　不要な文字や読み取り不能な文字をカット
              str += c;
            }
          }
          if(c=='\n'){
            if(str.indexOf("+IPD")>=0){
              ipd_no = str[str.indexOf("+IPD")+5]-0x30;//これが重要。このID番号を取得しておかねばならない
              if(str.indexOf("GET / HTTP")>=0){
                HTTP_Request_Display("Accept-Language",ipd_no);
                delay(1500);//------各自のネットワーク環境に合わせて変えてください
                HTTP_response("WROOM LED SWITCH",ipd_no);
                str = "";
                break;
              }
             
              if(str.indexOf("?")>=0){  //ＨＴＴＰ　ＧＥＴリクエストで？という文字を検知したらＬＥＤ表示
                char sw = str.charAt(str.indexOf("?")+1);
                switch(sw){
                  case '0':
                    Serial.println("Blue ON");
                    digitalWrite(8,HIGH);
                    digitalWrite(9,LOW);
                    digitalWrite(10,LOW);
                    HTTP_response("Blue LED ON", ipd_no);
                    break;
                  case '1':
                    Serial.println("RED ON");
                    digitalWrite(8,LOW);
                    digitalWrite(9,HIGH);
                    digitalWrite(10,LOW);
                    HTTP_response("RED LED ON", ipd_no);
                    break;
                  case '2':
                    Serial.println("GREEN ON");
                    digitalWrite(8,LOW);
                    digitalWrite(9,LOW);
                    digitalWrite(10,HIGH);
                    HTTP_response("GREEN LED ON", ipd_no);
                    break;
                }
                str = "";
              }else{     //Google ChromeではGET送信の後すぐにfaviconを投げかけてくるところの対処
                HTTP_Request_Display("\r\n",ipd_no);
                delay(1000);
                ESP8266_Serial.print("AT+CIPCLOSE=");
                ESP8266_Serial.print(ipd_no); //------Client IDをかならず付ける
                ESP8266_Serial.print("\r\n");
                Data_Read_Display("OK");
                Serial.println("Connection Close");
                str = "";
                break;
              }
            }
            str = "";
          }
        }
        break;
    }
  }
  
  if((WiFi_setup == false) && (millis()-LastTime > 40000)){//40秒たってもセットアップできない場合、リセット
    Serial.println("Software Reset Again");
    ESP8266_Serial.print("AT+RST");
    ESP8266_Serial.print("\r\n");
    WROOM_boot = false;
    LastTime = millis();
  }
}

//コマンドモニター用関数***********************************
void Data_Read_Display(String response)
{
  char c;
  String str;
  while(1){
    if(Serial.available()){
      c = Serial.read();
      if(c<0x80 && c>=0){//　不要な文字や読み取り不能な文字をカット
        str += c;
      }
    }
    if(c=='\n'){
      if(str.indexOf(response)==0){
        Serial.println(str);
        str = "";
        break;
      }else if(str.indexOf("ERROR")>=0){
        break;
      }
      Serial.print(str);
      str = "";
    }
  }
}
//ＨＴＴＰリクエストを表示する関数**********************************
void HTTP_Request_Display(String response,byte ipd_no)
{
  char c;
  String str;
  while(1){
    if(Serial.available()){
      c = Serial.read();
      if(c<0x80 && c>=0){//　不要な文字や読み取り不能な文字をカット
        str += c;
      }
    }
    if(c=='\n'){
      if(str.indexOf(response)>=0){
        Serial.println(str);
        str = "";
        break;
      }else if(str.indexOf("GET")>=0){//ブラウザがフリーズした時にGET送信すれば離脱できるようにした
        ESP8266_Serial.print("AT+CIPCLOSE=");
        ESP8266_Serial.print(ipd_no); //-----Client IDをかならず付ける
        ESP8266_Serial.print("\r\n");
        Serial.println("Connection Close");
        str = "";
        Data_Read_Display("\r\n");
        break;
      }
      Serial.print(str);
      str = "";
    }
  }
}

//HTTPレスポンスをブラウザに送信する関数******************************************
void HTTP_response(String message, byte ipd_no)
{
  String http_res;
  String html_str;
  //Stringが長すぎると受け付けないので、２回に分けて送信
  http_res = "HTTP/1.1 200 OK\r\n";
  http_res += "Content-Type: text/html\r\n";
  http_res += "Connection: close\r\n";
  http_res += "\r\n";
  http_res += "<!DOCTYPE html>\r\n";
  http_res += "<html>\r\n";
  http_res += "<head>\r\n";
  http_res += "<meta name=\"viewport\" content=\"initial-scale=1.5\">\r\n";
  http_res += "</head>\r\n";
  
  html_str = "<body>\r\n";
  //ご自分のWROOMローカルアドレスとポート番号を指定  
  html_str += "<form action=\"http://192.168.0.21:1001/\" method=\"get\">\r\n";
  html_str += message;
  html_str += "<br>\r\n";
  html_str += "<input type=\"submit\" name=0 value=\"BLUE\" style=\"color:#00f;\">";
  html_str += "  <input type=\"submit\" name=1 value=\"RED\" style=\"color:#f00;\">";
  html_str += "  <input type=\"submit\" name=2 value=\"GREEN\" style=\"color:#0f0;\">";
  html_str += "</form>\r\n";
  html_str += "</body>\r\n";
  html_str += "</html>\r\n";
  html_str += "\0";
   
  ESP8266_Serial.print("AT+CIPSEND="); //文字送信コマンド。
  ESP8266_Serial.print(ipd_no); //--------Client IDをかならず付ける
  ESP8266_Serial.print(',');
  ESP8266_Serial.print(http_res.length()+html_str.length()); //ＨＴＭＬのバイト数も送る
  ESP8266_Serial.print("\r\n");
  Serial.readStringUntil('>');  //この記号がＷＲＯＯＭから返ってきたら送信スタンバイＯＫとなる。
  ESP8266_Serial.print(http_res); //ＨＴＭＬ１回目送信
  ESP8266_Serial.print("\r\n");
  ESP8266_Serial.print(html_str);  //ＨＴＭＬ２回目送信
  ESP8266_Serial.print("\r\n");
  HTTP_Request_Display("SEND OK",ipd_no);  //ＳＥＮＤ　ＯＫという文字が返ってきたら次へ進む
  http_res = "";
  html_str = "";
  ESP8266_Serial.print("AT+CIPCLOSE=");//ここでクローズしないと、ブラウザがフリーズする
  ESP8266_Serial.print(ipd_no); //--------Client IDをかならず付ける
  ESP8266_Serial.print("\r\n");
  Serial.println("Connection Close");
  HTTP_Request_Display("\r\n",ipd_no);
}

以前のHello Worldを表示させたプログラムより、遙かにマシになりました。
以前のプログラムはいつかこの方法に近い形で直したいと思います。
因みに、このプログラムで起きたトラブルは当方では責任を負いかねますので、それをご承知おきください。
54行目のSSIDとパスワードはご自分のルーターで設定したものに書き換えてください。
また、224行目もご自分のルーターで設定したローカルＩＰアドレスに書き換えてください。

このスケッチの詳しい説明は省きますが、大きなポイントはWROOMから発信される
+IPD,0,…
というメッセージで、この番号がスマホなどの端末にWROOMが番号を割り当てているのです。
この番号を使って、ブラウザから送られてきたGETリクエストをクローズしなければ、ブラウザがフリーズします。
プログラムのザックリした流れは以下の通り。

1. 電源投入後セットアップでシリアルとＬＥＤ制御ピン設定をし、その後ＷＲＯＯＭのソフトウェアリセット
2. ＷＲＯＯＭのシリアル信号をArduinoのハードウェアシリアル０番ピンで有効と判断したらＷＩＦＩセットアップ開始。
3. 再起動直後のWROOMからの76.8kbps信号は無視し、次のいずれかのメッセージで一旦送信が止まります。
   WIFI GOT IT
   (事前にWROOMのWi-Fiセットアップが済んでいる場合）
   WIFI DISCONNECT
   (Wi-Fiセットアップが済んでないか、初めて実行する場合）
   この２種類のパターンがあって、２種類の文字列判別プログラムを組むとメモリーを食いそうだったので、”WIFI”という文字でセットアップ開始を判断させました。
4. ATコマンドでWi-Fiセットアップ
   AT+CIPSERVER=1,1001　コマンドで、”OK”という文字が返ってきたらセットアップ終了。
   ここで　”ＥＲＲＯＲ”と出た場合はAruduino を再起動してください。
   エラーになったらＯＫになるまで再起動を繰り返すプログラムは組んでいません。
   エラー処理はメモリー不足で極力カットしました。
5. ブラウザからＧＥＴリクエストがあったら、HTTPレスポンスを返し、HTMLを送信。
   ここで、必ずCLOSEコマンドをブラウザに送信する。
6. ブラウザでＬＥＤスイッチが表示されたら、スイッチを押し、ブラウザからＧＥＴリクエスト送信。
7. 受信したリクエスト文字列中の”？”の文字を検出して、次の１文字でＬＥＤの点灯種類を識別して、ＬＥＤ点灯。
   その後、ブラウザにＣＬＯＳＥコマンドを送信。
8. HTTPリクエストを表示する関数で、ブラウザがフリーズ状態になっても、ボタンを押してブラウザからGETリクエストを受ければ、ＣＬＯＳＥコマンドを返信して離脱できるようにしました。

以上です。
他にもまだあるのですが、またいつか解説したいと思います。質問等ありましたらご連絡ください。
ここでコンパイルするときに重要な注意があります。
コンパイルするときにはゼロ番ピンを外してください。
そして、プログラムをＲＵＮするときはゼロ番ピンにWROOMからの送信信号を挿してください。

コンパイル中は０番ピン、１番ピンを使用してコンパイルしていますので、特に受信用の０番ピンに何か接続してあると、コンパイルできませんのでご注意！！
また、ネットワーク速度の環境によって、受信しきれないなどの問題が発生する場合があります。
当方では2.4GHz 100Mbps　で、他のシステムにそんなに繋げてませんので、サクサク動きました。
それに合わせてDelayの秒数を変えてください。
Arduinoのシリアルモニター結果はこんな感じです。

文字化けもすっかりなくなり、バッチリです。
文字列の取りこぼしも殆どなくなりました。
コンパイルし終えたら、ＵＳＢシリアル変換を使って、Tera Termなどのシリアル用のフリーソフトなどを使って、WROOMからの送信メッセージを同時に見ることをお勧めします。
かなり、ちゃんとしたメッセージが出ていることが確認できると思います。
Arduino WROOM Server OK!
という表示が出たら、ブラウザのURL入力欄で
http://192.168.0.21:1001
というふうに、AT+CIFSRコマンドで得たローカルＩＰアドレス（または、ルーターのDHCPで割り当てられたアドレス）を入力して、プログラムで指定したポート番号を入力します。
このコマンドに関しては、以前の記事をご覧ください。
そしたら、シリアルモニターがこんな感じで表示されます。

StringクラスやSerial.printを沢山使うと、メモリーがかなり減りますので、できるだけ省略した結果、こうなりました。
WROOMからのメッセージはＵＳＢシリアルで確認してください。
この方法はネットの先駆者が沢山おりますので・・・。
では、ちょっと長くなりましたので、今回はここまでにします。
あくまで、ベータのベータ版でいつものごとく見切り発車的な記事で申し訳ございません。
誤りや意見等ありましたら、コメント等ご連絡ください。
では、また・・・

最近は ESP-WROOM-02 ( ESP8266 )をさらに使い易くした ESPr Developer を使っています。
USB-シリアル変換、余裕のある容量の電源レギュレーター、ロジックレベル変換をパッケージにした ESP-WROOM-02 開発ボードです。
Wi-Fi通信が安定して実現できるので、超お勧めです。
こちらの記事も合わせてご覧ください。
https://www.mgo-tec.com/blog-entry-ss-wroom-howto01.html

その他、以下の記事では Wi-Fi 双方向通信したり、画像を転送したりもできてしまいました。
https://www.mgo-tec.com/blog-entry-jr-train-message-board-01.html
こちらの記事では、スマホのLEDスイッチが簡単に実現できています。
https://www.mgo-tec.com/blog-entry-easywebsocket-beta13.html
https://www.mgo-tec.com/blog-entry-wroom-esp8266-bme280-ssd1351-sd.html
https://www.mgo-tec.com/blog-entry-neopixel-paper-illumination01.html

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