kopia lustrzana https://github.com/alanesq/esp32cam-demo
433 wiersze
14 KiB
C++
433 wiersze
14 KiB
C++
// ----------------------------------------------------------------
|
|
//
|
|
//
|
|
// ESP32 / ESp8266 very basic web server demo - 11Jan21
|
|
//
|
|
// shows use of AJAX to show updating info on the web page
|
|
//
|
|
//
|
|
// ----------------------------------------------------------------
|
|
|
|
|
|
// ---------------------------------------------------------------------------------------------------------
|
|
|
|
// Wifi Settings
|
|
|
|
#include <wifiSettings.h> // delete this line, un-comment the below two lines and enter your wifi details
|
|
|
|
//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>
|
|
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
|
|
delay(200);
|
|
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
|
|
server.on("/", handleRoot); // root web page (i.e. when root page is requested run procedure 'handleroot')
|
|
server.on("/test", handleTest); // test web page
|
|
server.on("/button", handleButton); // demo simple use of buttons
|
|
server.on("/ajax", handleAJAX); // demo using AJAX to update information on the page (also javascript buttons)
|
|
server.on("/senddata", handleSendData); // requested by the AJAX web page to request current millis value
|
|
server.on("/setLED", handleLED); // action when a button is clicked on the AJAX page
|
|
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
|
|
|
|
// log page request including clients IP address
|
|
IPAddress cip = client.remoteIP();
|
|
Serial.println("Ajax page requested from: " + String(cip[0]) +"." + String(cip[1]) + "." + String(cip[2]) + "." + String(cip[3]) );
|
|
|
|
|
|
// ---------------------- html ----------------------
|
|
|
|
client.print (R"=====(
|
|
|
|
<!DOCTYPE html>
|
|
<html lang='en'>
|
|
<head>
|
|
<title>AJAX Demo</title>
|
|
</head>
|
|
|
|
<body>
|
|
<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>
|
|
Received text : <span id='ReceivedText'>NA</span><br>
|
|
LED State is : <span id='LEDState'>NA</span><br>
|
|
</div>
|
|
|
|
)=====");
|
|
|
|
// ------------------- JavaScript -------------------
|
|
|
|
client.print (R"=====(<script>
|
|
|
|
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();}
|
|
|
|
function getData() {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
var receivedArr = this.responseText.split(',');
|
|
document.getElementById('MillisValue').innerHTML = receivedArr[0];
|
|
document.getElementById('ReceivedText').innerHTML = receivedArr[1];
|
|
}
|
|
};
|
|
xhttp.open('GET', 'senddata', true);
|
|
xhttp.send();}
|
|
|
|
setInterval(function() {
|
|
getData();
|
|
}, 2000);
|
|
|
|
</script>)=====");
|
|
// --------------------------------------------------
|
|
|
|
// close html page
|
|
client.print("</body></html>\n"); // close HTML
|
|
delay(3);
|
|
client.stop();
|
|
|
|
} // handleAJAX
|
|
|
|
|
|
// send data to AJAX web page
|
|
// it replies with two items comma separated: the value in millis and some text
|
|
void handleSendData() {
|
|
String reply = String(millis()); // item 1
|
|
reply += ",";
|
|
reply += "This text sent by handleSendtime()"; // item 2
|
|
server.send(200, "text/plane", reply); //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
|