ESP32を使って学習リモコンを作る(5)　ソフトウエア webserver

#include <asynceventsource.h>
#include <asyncwebsocket.h>
#include <asyncwebsynchronization.h>
#include <espasyncwebserver.h>
#include <spiffseditor.h>
#include <stringarray.h>
#include <webauthentication.h>
#include <webhandlerimpl.h>
#include <webresponseimpl.h>

#include <httpupdate.h>

#include <spiffs.h>

#include <arduino.h>
#include <wifi.h>
#include <espasyncwebserver.h>

/* Function Prototype */
void doInitialize();
void connectToWifi();
String editPlaceHolder(const String&);
String getMessage();
String getCurTime();

// ルーター接続情報
#define WIFI_SSID "xxxxxxxx"
#define WIFI_PASSWORD "yyyyyyyy"

// NTPサーバー時刻設定用
const char* ntpServer = "pool.ntp.org";
const int   gmtOffset_sec = 9 * 3600;

/* 基本属性定義  */
#define SPI_SPEED   115200
#define CST_ON      "ON"
#define CST_OFF     "OFF"

// Webサーバーオブジェクト
#define HTTP_PORT 80
AsyncWebServer server(HTTP_PORT);

/* LEDピン */
const int ledPin = 25;              // LED出力接続ピン
String ledState = "";               // 出力ピンの状態

/*****************************************************************************
 *                          Predetermined Sequence                           *
 *****************************************************************************/
void setup(){
    doInitialize();             // 初期化処理をして
    connectToWifi();            // Wi-Fiルーターに接続する
    configTime(gmtOffset_sec, 0, ntpServer);  // まず時刻を合わせる


    // SPIFFSのセットアップを追加
    if (!SPIFFS.begin(true)) {
      Serial.println("An Error has occurred while mounting SPIFFS");
      return;
    }

    // GETリクエストに対するハンドラーを登録して
    // index.htmlにアクセスされた時のレスポンス
    server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
      request->send(SPIFFS, "/index.html", String(), false, editPlaceHolder);
    });

    // style.cssにアクセスされた時のレスポンス
    server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest * request) {
      request->send(SPIFFS, "/style.css", "text/css");
    });

   // js.jsにアクセスされた時のレスポンス
    server.on("/js.js", HTTP_GET, [](AsyncWebServerRequest * request) {
      request->send(SPIFFS, "/js.js", "js/js");
    });

    server.on("/curtime", HTTP_GET, [](AsyncWebServerRequest *request){
        request->send_P(200, "text/plain", getCurTime().c_str());
    });
    server.on("/message", HTTP_GET, [](AsyncWebServerRequest *request){
        request->send_P(200, "text/plain", getMessage().c_str());
    });
    server.on("/update", HTTP_GET, [](AsyncWebServerRequest *request){
        if (ledState == CST_ON) {
            ledState = CST_OFF;
            digitalWrite(ledPin, LOW);
        } else {
            ledState = CST_ON;
            digitalWrite(ledPin, HIGH);
        }
        Serial.print("LED changed : ");
        Serial.println(ledState);
        request->send_P(200, "text/plain", getMessage().c_str());
    });
    // サーバーを開始する
    server.begin();
}
 
void loop(){
}

/*****************************************************************************
 *                          'GET' Request Handlers                           *
 *****************************************************************************/
/* プレースホルダー処理 */
String editPlaceHolder(const String& var) {
    if (var == "MESSAGE") {
        return getMessage();
    }
    else if (var == "CURTIME") {
        return getCurTime();
    }
}

/* 現在の日時を取得する */
String getCurTime() {
    struct tm timeinfo;
    char buf[64];

    if(getLocalTime(&timeinfo)) {
        sprintf(buf,"%04d/%02d/%02d %02d:%02d:%02d",
            timeinfo.tm_year+1900, timeinfo.tm_mon+1, timeinfo.tm_mday,
            timeinfo.tm_hour, timeinfo.tm_min, timeinfo.tm_sec);
        //Serial.println(buf); //20240714
        return buf;
    }
}

/* LEDの状態を通知する */
String getMessage() {
    return ledState;
}

/*****************************< Other functions >*****************************/
/* 初期化処理 */
void doInitialize() {
    Serial.begin(SPI_SPEED);
    pinMode(ledPin, OUTPUT);           // GPIO設定：LED
    digitalWrite(ledPin, LOW);
    ledState = CST_OFF;
}

/****************************< Connect functions >****************************/
/* Wi-Fiルーターに接続する */
void connectToWifi() {
    Serial.print("Connecting to Wi-Fi ");
    WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }
    Serial.println("");
    // モニターにローカル IPアドレスを表示する
    Serial.println("WiFi connected.");
    Serial.print("  *IP address: ");
    Serial.println(WiFi.localIP());
    server.begin();
}

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p{ text-align:center; }
</style>
<link rel="stylesheet" href="./style.css"> 
<script src="js.js"></script>
</head>
<body>
<h1>Asynchronous Server</h1>
<p><table>
<tr><th>ELEMENT</th><th width="100">VALUE</th></tr>
<tr><td>LED status</td><td><span id="message" class="value">%MESSAGE%</span></td></tr>
<tr><td>Current time</td><td><span id="curtime" class="value">%CURTIME%</span></td></tr>
</table></p>
<br><button class='btn_on' onclick='btnClicked(this)' id='btn'>CHANGE</button>
<div class="button_on">
<input type="checkbox" id="btn1" name="button_on"onclick="btn1Click();">
<label id= "btn1_label" for="btn1">電源 ON</label>
</div>
</body> 
</html>

var getCurTime = function () {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("curtime").innerHTML = this.responseText;
    }
  };
  xhr.open("GET", "/curtime", true);
  xhr.send(null);
}
  
var getMessage = function () {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("message").innerHTML = this.responseText;
      }
    };
    xhr.open("GET", "/message", true);
    xhr.send(null);
}
  
function btnClicked(element) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/update", true);
  xhr.send(null);
}
  
setInterval(getCurTime, 500);
setInterval(getMessage, 200);
  
function btn1Click(){
  const button1 = document.getElementById('btn1');
  button1.checked= true;   //電源 ONボタンが押されたら、電源 ONボタンを継続してtrueにする。 
}

html {font-family: Helvetica; display: inline-block; margin: 0px auto;text-align: center;
} 
h1 {font-size:28px;
}
body {text-align: center;
} 
table {border-collapse: collapse; margin-left:auto; margin-right:auto;
}
th {padding: 12px; background-color: #0000cd; color: white; border: solid 2px #c0c0c0;
}
tr {border: solid 2px #c0c0c0; padding: 12px;
}
td {border: solid 2px #c0c0c0; padding: 12px;
}
.value {color:blue; font-weight: bold; padding: 1px;
}
.btn_on {width:100px; height:43px; padding:1px 1px; vertical-align: middle; 
  text-decoration:none; font-size:16px; background-color:
  #668ad8; color: #FFF; border-bottom: solid 4px #627295; border-radius: 4px;
}
.btn_on:active {-webkit-transform: translateY(0px); transform: translateY(0px);
  border-bottom: none;
}
.button_on{display: flex;
}
.button_on label{display: block;
  width: 150px;
  background:silver; /*silvergray*/
  color: black;
  padding: 10px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
}
.button_on input:checked+label{background:tomato; 
  color: white;
}
.button_on input{display: none;
}