ESP32 Web Server using AJAX [高級Ardunio手工實作 Web Server using AJAX]~ 純收藏

ESP32 Web Server using AJAX [高級Ardunio手工實作 Web Server using AJAX]~ 純收藏

ESP32 Web Server using AJAX [高級Ardunio手工實作 Web Server using AJAX]~ 純收藏


資料來源: https://akuzechie.blogspot.com/2020/12/esp32-web-server-using-ajax.html

https://www.youtube.com/watch?v=rlVR2aStjA8

Code:

//========================================================
//ESP32 Web Server: Reading Potentiometer Value using AJAX
//========================================================
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include "webpage.h"
//---------------------------------------------------
WebServer server(80);
const char* ssid = "network name";
const char* password = "password";
//---------------------------------------------------
#include "handleFunctions.h"
//===================================================
void setup()
{
  Serial.begin(115200);
  //-------------------------------------------------
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("Connecting to WiFi");
  while(WiFi.waitForConnectResult() != WL_CONNECTED)
  {
    delay(500); Serial.print(".");
  }
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  //-------------------------------------------------
  server.on("/", handleRoot);
  server.on("/readPOT", handlePOT);
  server.begin();
  Serial.println("HTTP server started");
}
//===================================================
void loop(void)
{
  server.handleClient(); delay(1);
}

Header file "handleFunctions.h":

//=============================================
//Handle functions executed upon client request
//=============================================
void handleRoot()
{
 server.send(200, "text/html", webpageCode);
}
//---------------------------------------
void handlePOT()
{
 String POTval = String(analogRead(A0));
 server.send(200, "text/plane", POTval);
}

Header file "webpage.h":

//============
//Webpage Code
//============
String webpageCode = R"***(
<!DOCTYPE html>
<head>
  <title> ESP32 Web Server </title>
</head>
<html>
<!----------------------------CSS---------------------------->
<style>
  body {background-color: rgba(128, 128, 128, 0.884)}
  h4 {font-family: arial; text-align: center; color: white;}
  .card
  {
     max-width: 450px;
     min-height: 100px;
     background: rgba(255, 0, 0, 0.521);
     padding: 10px;
     font-weight: bold;
     font: 25px calibri;
     text-align: center;
     box-sizing: border-box;
     color: blue;
     margin:20px;
     box-shadow: 0px 2px 15px 15px rgba(0,0,0,0.75);
  }
</style>
<!----------------------------HTML--------------------------->
<body>
  <div class="card">
    <h1><span style="background-color:white">ESP32 Web Server</span></h1>
    <h2>
      POT Value : <span style="color:yellow" id="POTvalue">0</span>
    </h2>
  </div>
  <h4>
    <button onclick="help()">Help</button><br><br>
    <div id="myDIV"> </div>
  </h4>
<!-------------------------JavaScrip------------------------->
  <script>
    setInterval(function()
    {
      getPOTval();
    }, 2000);
    //-------------------------------------------------------
    function getPOTval()
    {
      var POTvalRequest = new XMLHttpRequest();
      POTvalRequest.onreadystatechange = function()
      {
        if(this.readyState == 4 && this.status == 200)
        {
          document.getElementById("POTvalue").innerHTML =
          this.responseText;
        }
      };
      POTvalRequest.open("GET", "readPOT", true);
      POTvalRequest.send();
    }
    //-------------------------------------------------------
    function help()
    {
      var x = document.getElementById("myDIV");
      var message = "POT connected to ADC0 : 12-bit value (0 ---> 4095)";
      if (x.innerHTML == "") x.innerHTML = message;
      else x.innerHTML = "";
    }
  </script>
</body>
</html>
)***";

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *