kopia lustrzana https://github.com/alanesq/esp32cam-demo
429 wiersze
14 KiB
C++
429 wiersze
14 KiB
C++
// ----------------------------------------------------------------
|
|
//
|
|
//
|
|
// ESP32 / ESp8266 very basic web server demo - 10Jan21
|
|
//
|
|
// shows use of AJAX to show updating info on the web page
|
|
//
|
|
//
|
|
// ----------------------------------------------------------------
|
|
|
|
|
|
|
|
// ---------------------------------------------------------------------------------------------------------
|
|
|
|
// Wifi settings
|
|
|
|
const char *SSID = "your_wifi_ssid";
|
|
|
|
const char *PWD = "your_wifi_pwd";
|
|
|
|
|
|
// ---------------------------------------------------------------------------------------------------------
|
|
|
|
|
|
|
|
bool serialDebug = 1; // enable debugging info on serial port
|
|
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
|
|
|
|
//#include <arduino.h> // required by platformio?
|
|
|
|
#if defined ESP32
|
|
// esp32
|
|
byte LEDpin = 2;
|
|
#include <WiFi.h>
|
|
#include <WebServer.h>
|
|
#include <HTTPClient.h> // Web server running on port 80
|
|
WebServer server(80);
|
|
#elif defined ESP8266
|
|
//Esp8266
|
|
byte LEDpin = D4;
|
|
#include <ESP8266WiFi.h>
|
|
#include <ESP8266WebServer.h>
|
|
#include "ESP8266HTTPClient.h"
|
|
ESP8266WebServer server(80);
|
|
#else
|
|
#error "This sketch only works with the ESP8266 or ESP32"
|
|
#endif
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
|
|
|
|
// this section runs once at startup
|
|
|
|
|
|
void setup() {
|
|
|
|
Serial.begin(115200); // start serial comms at speed 115200
|
|
Serial.println("\n\nWebserver demo sketch");
|
|
Serial.println("- Reset reason: " + ESP.getResetReason());
|
|
|
|
// onboard LEDs
|
|
pinMode(LEDpin, OUTPUT);
|
|
digitalWrite(LEDpin, HIGH);
|
|
|
|
// Connect to Wifi
|
|
Serial.print("Connecting to ");
|
|
Serial.println(SSID);
|
|
WiFi.begin(SSID, PWD);
|
|
while (WiFi.status() != WL_CONNECTED) {
|
|
Serial.print(".");
|
|
delay(500);
|
|
}
|
|
Serial.print("\nConnected - IP: ");
|
|
Serial.println(WiFi.localIP());
|
|
|
|
// set up web server pages to serve (API resources)
|
|
server.on("/test", handleTest); // test URL is requested, run the procedure named 'handleTemp'
|
|
server.on("/ajax", handleAJAX); // demo using AJAX to update information on the page (also javascript buttons)
|
|
server.on("/sendtime", handleSendtime); // requested by the AJAX web page to request data
|
|
server.on("/setLED", handleLED); // action button clicks on AJAX page
|
|
server.on("/button", handleButton); // demo simple use of buttons
|
|
server.on("/", handleRoot); // root web page requested
|
|
server.onNotFound(handleNotFound); // if invalid url is requested
|
|
|
|
// start web server
|
|
server.begin();
|
|
|
|
// stop the wifi being turned off if not used for a while
|
|
#if defined ESP32
|
|
WiFi.setSleep(false);
|
|
#else
|
|
WiFi.setSleepMode(WIFI_NONE_SLEEP);
|
|
#endif
|
|
|
|
WiFi.mode(WIFI_STA); // turn off access point - options are WIFI_AP, WIFI_STA, WIFI_AP_STA or WIFI_OFF
|
|
|
|
} // setup
|
|
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
|
|
|
|
// this section runs repeatedly in a loop
|
|
|
|
|
|
void loop() {
|
|
|
|
server.handleClient(); // service any web page requests
|
|
|
|
//// flash onboard LED
|
|
//digitalWrite(LEDpin, !digitalRead(LEDpin)); // invert onboard LED status
|
|
//delay(200); // wait 200 milliseconds
|
|
|
|
} // loop
|
|
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// -test web page requested i.e. http://x.x.x.x/
|
|
// ----------------------------------------------------------------
|
|
// demonstrate sending a plain text reply
|
|
|
|
void handleRoot(){
|
|
|
|
if (serialDebug) Serial.println("Root page requested");
|
|
|
|
String message = "root web page";
|
|
|
|
server.send(404, "text/plain", message); // send reply as plain text
|
|
|
|
} // handleRoot
|
|
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// -test web page requested i.e. http://x.x.x.x/test
|
|
// ----------------------------------------------------------------
|
|
// demonstrate sending html reply
|
|
|
|
void handleTest(){
|
|
|
|
if (serialDebug) Serial.println("Test page requested");
|
|
|
|
WiFiClient client = server.client(); // open link with client
|
|
|
|
// html header
|
|
client.print("<!DOCTYPE html> <html lang='en'> <head> <title>Web Demo</title> </head> <body>\n"); // basic html header
|
|
|
|
// html body
|
|
client.print("<h1>Test Page</h1>\n");
|
|
|
|
// end html
|
|
client.print("</body></html>\n");
|
|
delay(3);
|
|
client.stop();
|
|
|
|
} // handleTest
|
|
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// -button web page requested i.e. http://x.x.x.x/button
|
|
// ----------------------------------------------------------------
|
|
// demonstrate simple use of a html buttons without using Javascript
|
|
|
|
void handleButton(){
|
|
|
|
if (serialDebug) Serial.println("Button page requested");
|
|
|
|
// check if button1 has been pressed
|
|
if (server.hasArg("button1")) {
|
|
Serial.println("Button 1 was pressed");
|
|
}
|
|
|
|
// check if button2 has been pressed
|
|
if (server.hasArg("button2")) {
|
|
Serial.println("Button 2 was pressed");
|
|
}
|
|
|
|
|
|
// send reply to client
|
|
|
|
WiFiClient client = server.client(); // open link with client
|
|
|
|
// html header
|
|
client.print("<!DOCTYPE html> <html lang='en'> <head> <title>Web Demo</title> </head> <body>\n"); // basic html header
|
|
client.print("<FORM action='/button' method='post'>\n"); // used by the buttons in the html (action = the web page to send it to
|
|
|
|
// html body
|
|
client.print("<h1>Button demo page</h1>\n");
|
|
if (server.hasArg("button1")) client.print("Button 1 has been pressed!");
|
|
if (server.hasArg("button2")) client.print("Button 2 has been pressed!");
|
|
client.print("<br><br><input style='height: 35px;' name='button1' value='Demo button 1' type='submit'> \n");
|
|
client.print("<br><br><input style='height: 35px;' name='button2' value='Demo button 2' type='submit'> \n");
|
|
|
|
// end html
|
|
client.print("</body></html>\n");
|
|
delay(3);
|
|
client.stop();
|
|
|
|
} // handleButton
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// -ajax web page requested i.e. http://x.x.x.x/ajax
|
|
// ----------------------------------------------------------------
|
|
// demonstrate use of AJAX to refresh info. on web page
|
|
// see: https://circuits4you.com/2018/02/04/esp8266-ajax-update-part-of-web-page-without-refreshing/
|
|
|
|
void handleAJAX() {
|
|
|
|
WiFiClient client = server.client(); // open link with client
|
|
|
|
// HTML header
|
|
client.print("\
|
|
<!DOCTYPE html>\
|
|
<html>\
|
|
<body>\
|
|
");
|
|
|
|
// HTML body
|
|
client.print("\
|
|
<div id='demo'>\
|
|
<h1>Update web page using AJAX</h1>\
|
|
<button type='button' onclick='sendData(1)'>LED ON</button>\
|
|
<button type='button' onclick='sendData(0)'>LED OFF</button><BR>\
|
|
</div>\
|
|
<div>\
|
|
Current Millis : <span id='MillisValue'>0</span><br>\
|
|
LED State is : <span id='LEDState'>NA</span>\
|
|
</div>");
|
|
|
|
|
|
// Javascript
|
|
|
|
client.print("<script>");
|
|
|
|
// triggered when a button is pressed - calls the 'handleLED()' procedure below via '/setled'
|
|
client.print("\
|
|
function sendData(led) {\
|
|
var xhttp = new XMLHttpRequest();\
|
|
xhttp.onreadystatechange = function() {\
|
|
if (this.readyState == 4 && this.status == 200) {\
|
|
document.getElementById('LEDState').innerHTML = this.responseText;\
|
|
}\
|
|
};\
|
|
xhttp.open('GET', 'setLED?LEDstate='+led, true);\
|
|
xhttp.send();\
|
|
}");
|
|
|
|
// auto triggers 'getData' every 2 seconds
|
|
client.print("\
|
|
setInterval(function() {\
|
|
getData();\
|
|
}, 2000);");
|
|
|
|
// 'getdata' = requests the current millis() value - calls the 'handleSendtime()' procedure below via '/sendtime'
|
|
client.print("\
|
|
function getData() {\
|
|
var xhttp = new XMLHttpRequest();\
|
|
xhttp.onreadystatechange = function() {\
|
|
if (this.readyState == 4 && this.status == 200) {\
|
|
document.getElementById('MillisValue').innerHTML = this.responseText;\
|
|
}\
|
|
};\
|
|
xhttp.open('GET', 'sendtime', true);\
|
|
xhttp.send();}");
|
|
|
|
client.print("</script>");
|
|
|
|
|
|
// close HTML
|
|
client.print("\
|
|
</body>\
|
|
</html>\
|
|
");
|
|
|
|
delay(3);
|
|
client.stop();
|
|
|
|
} // handleAJAX
|
|
|
|
|
|
// send millis (ajax request)
|
|
// it just replies with the current Millis value as plain text
|
|
void handleSendtime() {
|
|
String cTime = String(millis());
|
|
server.send(200, "text/plane", cTime); //Send millis value only to client ajax request
|
|
}
|
|
|
|
|
|
// handle button clicks on AJAX web page
|
|
// it sets the onboard LED status and replies with it's status as plain text
|
|
void handleLED() {
|
|
String ledState = "OFF";
|
|
String t_state = server.arg("LEDstate"); //Refer xhttp.open("GET", "setLED?LEDstate="+led, true);
|
|
Serial.println(t_state);
|
|
if(t_state == "1") {
|
|
digitalWrite(LEDpin,LOW); //LED ON
|
|
ledState = "ON"; //Feedback parameter
|
|
} else {
|
|
digitalWrite(LEDpin,HIGH); //LED OFF
|
|
ledState = "OFF"; //Feedback parameter
|
|
}
|
|
server.send(200, "text/plane", ledState); //Send web page
|
|
}
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// -invalid web page requested
|
|
// ----------------------------------------------------------------
|
|
// send this reply to any invalid url requested
|
|
|
|
void handleNotFound() {
|
|
|
|
if (serialDebug) Serial.println("Invalid page requested");
|
|
|
|
String tReply;
|
|
|
|
tReply = "File Not Found\n\n";
|
|
tReply += "URI: ";
|
|
tReply += server.uri();
|
|
tReply += "\nMethod: ";
|
|
tReply += ( server.method() == HTTP_GET ) ? "GET" : "POST";
|
|
tReply += "\nArguments: ";
|
|
tReply += server.args();
|
|
tReply += "\n";
|
|
|
|
for ( uint8_t i = 0; i < server.args(); i++ ) {
|
|
tReply += " " + server.argName ( i ) + ": " + server.arg ( i ) + "\n";
|
|
}
|
|
|
|
server.send ( 404, "text/plain", tReply );
|
|
tReply = ""; // clear variable
|
|
|
|
} // handleNotFound
|
|
|
|
|
|
|
|
// ----------------------------------------------------------------------------------------------------------------
|
|
|
|
|
|
// Not used in this sketch but provided as an example of how to request an external web page and receive the reply as a string
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// request a web page
|
|
// ----------------------------------------------------------------
|
|
// parameters = ip address, page to request, port to use (usually 80), maximum chars to receive, ignore all in reply before this text
|
|
// e.g. String reply = requestWebPage("192.168.1.166","/log",80,600,"");
|
|
|
|
String requestWebPage(String ip, String page, int port, int maxChars, String cuttoffText = ""){
|
|
|
|
int maxWaitTime = 3000; // max time to wait for reply (ms)
|
|
|
|
char received[maxChars + 1]; // temp store for incoming character data
|
|
int received_counter = 0; // number of characters which have been received
|
|
|
|
if (!page.startsWith("/")) page = "/" + page; // make sure page begins with "/"
|
|
|
|
if (serialDebug) {
|
|
Serial.print("requesting web page: ");
|
|
Serial.print(ip);
|
|
Serial.println(page);
|
|
}
|
|
|
|
WiFiClient client;
|
|
|
|
// Connect to the site
|
|
if (!client.connect(ip.c_str() , port)) {
|
|
if (serialDebug) Serial.println("Web client connection failed");
|
|
return "web client connection failed";
|
|
}
|
|
if (serialDebug) Serial.println("Connected to host - sending request...");
|
|
|
|
// send request - A basic request looks something like: "GET /index.html HTTP/1.1\r\nHost: 192.168.0.4:8085\r\n\r\n"
|
|
client.print("GET " + page + " HTTP/1.1\r\n" +
|
|
"Host: " + ip + "\r\n" +
|
|
"Connection: close\r\n\r\n");
|
|
|
|
if (serialDebug) Serial.println("Request sent - waiting for reply...");
|
|
|
|
// Wait for a response
|
|
uint32_t ttimer = millis();
|
|
while ( !client.available() && (uint32_t)(millis() - ttimer) < maxWaitTime ) {
|
|
delay(10);
|
|
}
|
|
if ( ((uint32_t)(millis() - ttimer) > maxWaitTime ) && serialDebug) Serial.println("-Timed out");
|
|
|
|
// read the response
|
|
while ( client.available() && received_counter < maxChars ) {
|
|
delay(4);
|
|
received[received_counter] = char(client.read()); // read one character
|
|
received_counter+=1;
|
|
}
|
|
received[received_counter] = '\0'; // end of string marker
|
|
|
|
if (serialDebug) {
|
|
Serial.println("--------received web page-----------");
|
|
Serial.println(received);
|
|
Serial.println("------------------------------------");
|
|
Serial.flush(); // wait for serial data to finish sending
|
|
}
|
|
|
|
client.stop(); // close connection
|
|
if (serialDebug) Serial.println("Connection closed");
|
|
|
|
// if cuttoffText was supplied then only return the text following this
|
|
if (cuttoffText != "") {
|
|
char* locus = strstr(received,cuttoffText.c_str()); // locus = pointer to the found text
|
|
if (locus) { // if text was found
|
|
if (serialDebug) Serial.println("The text '" + cuttoffText + "' was found in reply");
|
|
return locus; // return the reply text following 'cuttoffText'
|
|
} else if (serialDebug) Serial.println("The text '" + cuttoffText + "' WAS NOT found in reply");
|
|
}
|
|
|
|
return received; // return the full reply text
|
|
}
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// end
|