ESP8266(ESP-WROOM-02) webサーバー

ESP8266も大分枯れてきたデバイスと思いますが探し方が悪いのかUIを含めて当サイトで使ってみたいという作例がなかなか見当たりません。
WiFiマイコンということで単純に遠隔で何かをオン、オフする用途を想定してさらに最低限有ったほうがいいと思われる機能を含めてweb情報を参考にwebサーバーのベースを作成してみました。
内容については当サイトも8266.beginなので保証しかねます。

環境

ESP-WROOM-02 Arduino IDE1.8.5 + esp8266 v2.4.1 Raspberry Pi3

WiFi

WiFiは固定IP、STA modeとしています。
ローカル内の使用を想定しているため固定IPで運用をします。
名前解決は内部のDNSサーバーまたは/etc/hostsを利用しています。

Arduino OTA,SPIFFS

webサーバーとして運用するにあたり外せない機能としてはArduino OTA,SPIFFSがあります。

特にシリアルでデバッグなどを必要としない限り設定をしてしまえばWiFi経由でスケッチやデータをアップロードできるのでこれは欠かせませんね。
またindex.htmlもスケッチ内に置く必要も無いためページの作成も効率が上がります。(見栄えの良いページを作るとなるとこれはこれで難しくなります!)

sleep

sleepはlight sleep modeを設定
デフォルトはModem-SleepのようですがLight-Sleepにしても今回の用途では全く変わりないように感じられます。
正確な電流値は測ってはいませんが簡易なUSB電流計では約半分(100mA->50mA)くらいの値を示します。結果はモジュールの温度でも判別がつくかと思います。あきらかに温度が下がっているのがわかります。
sleep modeを設定していてもloop()内でsleepに入るタイミングが無いとsleep動作になりません。そのためdelay(1)を挿入しています。

NTP

NTPはこちらのページを参考にしています。ESP8266 (ESP-WROOM-02) でNTP(時刻合わせ)をするライブラリ。(Timeライブラリと連携して)
現時点では特に時刻を設定しているものは無いのですが今後活用する機会もあるということでNTPを動かしています。
時刻合わせは24時間に1回問い合わせをしています。但しリセットの度に問い合わせをすることになるので常時動いているPiをNTPサーバーに仕立ててローカル内で時刻合わせをしています。

// ntp
  setSyncInterval (86400); // 24h(86400sec)
  setTimeServer("192.168.0.115"); // local server
  ntp_begin(2390); // port 2390

またNTPは稼働していますがシリアル送りはwebサーバーのパフォーマンスに影響が出るため確認が済んだらシリアルへの送りは停止しています。

画像表示

画像表示については特に必須では無いのですが無いよりは有ったほうが気運が高まる?もんです。
という訳でこちらのページを参考にしてみました。[作業ログ]ESP8266をAP・Webサーバーとして使ってみる

画像はこちらのサイトから頂きました。(Thanks)
マップラボ-地図アイコンを無料ダウンロード maplab

画像をアップロード、表示するためにSPIFFSが必要です。
画像はgif,png,jpgで確認しています。
index.htmlから”/img1/”をアクセス、SPIFFSでファイルをオープンserver.streamFileでブラウザに渡します。
小さい画像ならば表示速度も問題ないと思います。アニメーションgifは少し遅い

setup()で関数を作成
server.on (“/img1/”, onImg1);

void onImg1() {
  SPIFFS.begin();
  File imgFile = SPIFFS.open("/shirakawago216.gif", "r");
  server.streamFile(imgFile, "image/gif");
  imgFile.close();
  server.send(200, "text/html", html);
}

index.html

index.htmlと画像はSPIFFSでアップロードします。

ボタンは少し見栄えの良いものをということでこちらのページを参考にしました。
WIFI-TNGとESP-WROOM-02で始めるWIFI Arduino
ボタンをクリックすると色が変わります。オフをクリックすることで元の色に戻ります。
JavaScript入門を少し読みました。
但しJavaScriptはクライアントサイドの実行になるので再読込やほかのデバイス、ブラウザからの実行では同期が取れません。
日付時刻表示は8266の時計ではなくクライアントの時計になります。
JavaScriptはこちらのサイトから(現在の日時を表示する)表示が動いてしまうので0値だけ追加しています。

sample esp8266.ino
sample index.html