ESP32 Arduino: ウェブサーバ上で温湿度センサの情報表示

平成30年度公開講座で演習する内容です。

温湿度センサ(HTU21D)の計測結果をブラウザでモニターします。ESP32にはウェブサーバの機能が実装されています。この機能を使うことで，ブラウザさえあればWindowsやMac，Linux，Androidなど，OSに依存せずセンサで取得した情報を見ることができます。次のコードは，温湿度センサの情報をブラウザ上で表示させるコードです。温湿度センサにはHTU21Dという温度センサと湿度センサが実装されたセンサ基板を使用しています。

#include <WiFi.h>
#include "SparkFunHTU21D.h"

HTU21D htu21d;

const char *ssid = "<your SSID>";  // SSID
const char *pass = "<your Password>";      // password
const IPAddress ip(192, 168, 4, 1);      // IPアドレス
const IPAddress subnet(255, 255, 255, 0); // サブネットマスク

WiFiServer server(80);

void setup() {
  Serial.begin(115200);
  delay(100);
  htu21d.begin(); // 温湿度センサの初期化
  WiFi.softAP(ssid, pass);           // SSIDとパスの設定
  WiFi.softAPConfig(ip, ip, subnet); // IPアドレス、ゲートウェイ、サブネットマスクの設定
  IPAddress myIP = WiFi.softAPIP();  // WiFi.softAPIP()でWiFi起動
  server.begin();                    // サーバーを起動(htmlを表示させるため)
}

float temp, humd;
void getTemperature() {
  temp = htu21d.readTemperature();
  humd = htu21d.readHumidity();
}

void loop() {
  WiFiClient client = server.available();
  if (client) {
    String blank_line = "";
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
//        Serial.print(c);
        if (c == '\n') {
          if (blank_line.length() == 0) {
            getTemperature();
            client.println("HTTP/1.1 200 OK");
            client.println("Content-Type: text/html; charset=utf-8;");
            client.println();

            client.println("<!DOCTYPE HTML>");
            client.println("<html>");
            client.println("<head><meta http-equiv=\"refresh\" content=\"5\"></head><body><h1>ESP32 - HTU21D温湿度センサ</h1><h3>温度: ");
            client.println(temp, 2);
            client.println("度</h3><h3>湿度: ");
            client.println(humd, 2);
            client.println("%RH</h3></body></html>");
            client.println();
            break;
          } else {
            blank_line = "";
          }
        } else if (c != '\r') {
          blank_line += c;
        }
      }
    }
    client.stop();
  }
}

コードの説明

・WiFiServer server(80); により，80番ポートでウェブサーバを起動することを定義します。

・setup関数内の server.beginにより，サーバを起動します。

・loop関数内のWiFiClient client = server.available(); により，サーバが稼働中か確認します。

・もし，クライアントからの接続があった場合には，if (connected()) 内でデータを読み込みます。

・クライアントからの「リクエスト」として，次のような接続情報が送られてきます。例えば，ブラウザから「192.168.4.1」にアクセスした場合など。Serial.print(c);のコメントアウトを取ると，同じ内容を見ることができます。

GET /favicon.ico HTTP/1.1
Host: 192.168.4.1
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Referer: http://192.168.4.1/
Accept-Encoding: gzip, deflate
Accept-Language: ja,en-US;q=0.9,en;q=0.8

・これに対して，「ステータス」と「レスポンス」を返します。ポイントは，ホームページを日本語に対応させるために，charset=utf-8を加えているところです。

<ステータス>
HTTP/1.1 200 OK
<レスポンス（メタデータ）>
Content-Type: text/html; charset=utf-8;

・続けて，「メッセージ」を返します。これは，HTMLなどのホームページに相当する内容です。HTML言語の記述と同じ<html>～</html>です。ポイントは，変数tempと変数humidには，ブラウザからの接続がある毎にセンシングされた結果が格納されます。

・ブラウザ上の温湿度データの更新は，<meta http-equiv=”refresh” content=5>として，5秒毎に自動的にリフレッシュ（リロード）が発生して表示・計測データが更新されます。

<!DOCTYPE HTML>
<html>
<head><meta http-equiv=\"refresh\" content=\"5\"></head><body><h1>ESP32 - HTU21D温湿度センサ</h1><h3>温度: 
temp
度</h3><h3>湿度:
humd
%RH</h3></body></html>