Webブラウザから操作する

解説

ESP-WROOM-02自体が、WIFIモジュールですので、部品の追加なしで、Webサーバーにできます。

ESP8266WiFiライブラリを使用すると、簡単にWebサーバーにできます。

Webブラウザからpostメソッドでデータを送り、Arduino側で送られてくるデータを適切に処理することで、WebブラウザからArduinoを操作することができます。

部品表、接続表、接続例

Webブラウザから、ESP-WROOM-02 に接続したLEDを操作するようにしたため、「LEDを点滅させる」を参照

サンプルコード

#include <ESP8266WiFi.h> // for WIFI // 接続ピン設定 #define LEDPIN (13) // Wi-Fi設定 const char* ssid = "your-ssid"; const char* password = "your-password"; IPAddress ip( 192, 168, 1, 94 ); WiFiServer g_server(80); // デバッグ設定 //#define DEBUG // 有効にするとシリアル出力が有効になります。 #ifdef DEBUG #define Serialbegin Serial.begin #define Serialprint Serial.print #define Serialprintln Serial.println #else #define Serialbegin #define Serialprint #define Serialprintln #endif #define LEN_RNRN (4) // 4 : "\r\n\r\n"の文字数 boolean g_led = false; int g_speed = 3; void setup() { // LEDの初期化処理 pinMode(LEDPIN, OUTPUT); // シリアル通信の初期化処理 Serialbegin(9600); delay(10); // WiFiネットワーク接続 Serialprint("Connecting to "); Serialprintln( ssid ); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serialprint("."); } Serialprintln(""); Serialprintln("WiFi connected"); // 固定IPアドレスの設定 WiFi.config( ip, WiFi.gatewayIP(), WiFi.subnetMask() ); // WEBサーバー開始 g_server.begin(); Serialprintln("Server started"); // IPアドレスの表示 Serialprintln(WiFi.localIP()); } void loop() { WiFiClient client = g_server.available(); if( client ) { Serialprintln("new client"); String strHttpRequest; ReadHttpRequest( client, strHttpRequest ); if( 0 != strHttpRequest.length() ) { // HTTPリクエストあり Serialprintln( strHttpRequest ); int iIndexRNRN = strHttpRequest.indexOf( "\r\n\r\n" ); if( -1 != iIndexRNRN && '\0' != strHttpRequest.charAt(iIndexRNRN + LEN_RNRN) ) { // POSTデータあり（空行「\r\n\r\n」より後ろにデータがあればそれはPOSTデータ） HandlePostData( strHttpRequest, iIndexRNRN, client ); } PrintHtml(client); } // Webブラウザに対して、データを取得するための時間を与える。 delay(1); // コネクションを閉じる。 client.stop(); Serialprintln("client disconnected"); } if( g_led ){ digitalWrite(LEDPIN, HIGH); } delay( map( g_speed, 1, 5, 500, 10 ) ); // speed[1 5]->interval[500ms 10ms] digitalWrite(LEDPIN, LOW); delay( map( g_speed, 1, 5, 500, 10 ) ); // speed[1 5]->interval[500ms 10ms] } // POSTデータに関する処理 void HandlePostData( const String& strHttpRequest, int iIndexRNRN, WiFiClient& client ) { // "led=1" if( -1 != strHttpRequest.indexOf( "led=1", iIndexRNRN + LEN_RNRN ) ) { g_led = true; } else { g_led = false; } // "spped=?" int iIndexSpeed = strHttpRequest.indexOf( "speed", iIndexRNRN + LEN_RNRN ); if( -1 != iIndexSpeed ) { char chSpeed = strHttpRequest.charAt(iIndexSpeed + 6); // 6 : "speed="の文字数 g_speed = chSpeed - '0'; } } // HTTPリクエスト読み込み void ReadHttpRequest( WiFiClient& client, String& rstrHttpRequest ) { int iCounter = 0; // HTTPリクエストがまったくないときに処理を抜ける用カウンタ。 while( client.connected() && 100 > iCounter ) { iCounter++; if( !client.available() ) { // データが利用できるようになるまで待つ。 Serialprint("."); // Webブラウザに対して、データを送信するための時間を与える。 delay(1); continue; } // HTTPリクエストの一括読み込み rstrHttpRequest = client.readString(); break; } return; } // HTML出力 void PrintHtml( WiFiClient& client ) { String str = ""; str += "HTTP/1.1 200 OK\n" "Content-Type: text/html\n" "\n"; str += "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\">\n" "<html lang=\"ja\">\n" "<head>\n" "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n" "<meta http-equiv=\"Content-Style-Type\" content=\"text/css\">\n" "<title></title>\n" "</head>\n" "<body>\n"; str += "<form method=\"post\" action=\"\">\n" "<input type=\"checkbox\" name=\"led\" value=\"1\""; if(g_led){ str += " checked"; } str += ">LED<br><br>\n"; str += "速さ<br>\n" "1 \n" "<input type=\"radio\" name=\"speed\" value=\"1\""; if(1==g_speed){ str += " checked"; } str += "> \n" "<input type=\"radio\" name=\"speed\" value=\"2\""; if(2==g_speed){ str += " checked"; } str += "> \n" "<input type=\"radio\" name=\"speed\" value=\"3\""; if(3==g_speed){ str += " checked"; } str += "> \n" "<input type=\"radio\" name=\"speed\" value=\"4\""; if(4==g_speed){ str += " checked"; } str += "> \n" "<input type=\"radio\" name=\"speed\" value=\"5\""; if(5==g_speed){ str += " checked"; } str += "> \n" " 5<br>\n" "<br>\n" "<input type=\"submit\" value=\"送信\">\n" "<input type=\"reset\" value=\"リセット\"></form>\n" "<hr>\n"; str += "</body>\n" "</html>"; client.print( str ); }

実行

Webブラウザから ESP-WROOM-02 にアクセスします。
Webブラウザ画面にLEDの動作状態が表示されます。
（・「LED」の右のチェックボックスは、LEDの点滅するしないの状態。
　・「速さ」は、1は、ゆっくり点滅、５は高速に点滅。）
Webブラウザ画面のLEDの動作状態を変更し、「送信」ボタンをクリックすると、LEDの動作が変わります。

ダウンロード

サンプルスケッチファイル