124 lines
4.3 KiB
C++
124 lines
4.3 KiB
C++
/*********
|
|
Rui Santos
|
|
Complete project details at https://RandomNerdTutorials.com/esp32-async-web-server-espasyncwebserver-library/
|
|
The above copyright notice and this permission notice shall be included in all
|
|
copies or substantial portions of the Software.
|
|
|
|
|
|
*********/
|
|
|
|
// Import required libraries
|
|
#include <WiFi.h>
|
|
#include <AsyncTCP.h>
|
|
#include <ESPAsyncWebServer.h>
|
|
|
|
// Replace with your network credentials
|
|
const char* ssid = "ESP_ping";
|
|
const char* password = "pong";
|
|
|
|
const char* PARAM_INPUT_1 = "output";
|
|
const char* PARAM_INPUT_2 = "state";
|
|
|
|
// Create AsyncWebServer object on port 80
|
|
AsyncWebServer server(80);
|
|
|
|
const char index_html[] PROGMEM = R"rawliteral(
|
|
<!DOCTYPE HTML><html>
|
|
<head>
|
|
<title>ESP Web Server</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" href="data:,">
|
|
<style>
|
|
html {font-family: Arial; display: inline-block; text-align: center;}
|
|
h2 {font-size: 3.0rem;}
|
|
p {font-size: 3.0rem;}
|
|
body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
|
|
.switch {position: relative; display: inline-block; width: 120px; height: 68px}
|
|
.switch input {display: none}
|
|
.slider {background-color: #ccc; border-radius: 6px}
|
|
.slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}
|
|
input:checked+.slider {background-color: #b30000}
|
|
input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>ESP Web Server</h2>
|
|
%BUTTONPLACEHOLDER%
|
|
<script>
|
|
|
|
function sendSliderValue(element) {
|
|
var slider1 = document.getElementById("slider1");
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "/update?output="+slider1.id+"&state=" + slider1.value, true);
|
|
xhr.send();
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
)rawliteral";
|
|
|
|
// Replaces placeholder with button section in your web page
|
|
String processor(const String& var){
|
|
//Serial.println(var);
|
|
if(var == "BUTTONPLACEHOLDER"){
|
|
String buttons = "";
|
|
buttons += "<div class=\"slidecontainer\"><input type=\"range\" min=\"20\" max=\"450\" value=\"250\" class=\"slider\" id=\"slider1\" onchange=\"sendSliderValue(this.value)\"\"></div>";
|
|
buttons += "<div class=\"slidecontainer\"><input type=\"range\" min=\"20\" max=\"450\" value=\"250\" class=\"slider\" id=\"slider2\" onchange=\"sendSliderValue(this.value)\"\"></div>";
|
|
buttons += "<div class=\"slidecontainer\"><input type=\"range\" min=\"20\" max=\"450\" value=\"250\" class=\"slider\" id=\"slider3\" onchange=\"sendSliderValue(this.value)\"\"></div>";
|
|
buttons += "<div class=\"slidecontainer\"><input type=\"range\" min=\"20\" max=\"450\" value=\"250\" class=\"slider\" id=\"slider4\" onchange=\"sendSliderValue(this.value)\"\"></div>";
|
|
buttons += "<div class=\"slidecontainer\"><input type=\"range\" min=\"20\" max=\"450\" value=\"250\" class=\"slider\" id=\"slider5\" onchange=\"sendSliderValue(this.value)\"\"></div>";
|
|
|
|
|
|
return buttons;
|
|
}
|
|
return String();
|
|
}
|
|
|
|
|
|
void setup(){
|
|
// Serial port for debugging purposes
|
|
Serial.begin(115200);
|
|
|
|
|
|
Serial.print("Setting AP (Access Point)…");
|
|
WiFi.softAP(ssid);
|
|
|
|
IPAddress IP = WiFi.softAPIP();
|
|
Serial.print("AP IP address: ");
|
|
Serial.println(IP);
|
|
|
|
// Route for root / web page
|
|
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
|
|
request->send_P(200, "text/html", index_html, processor);
|
|
});
|
|
|
|
// Send a GET request to <ESP_IP>/update?output=<inputMessage1>&state=<inputMessage2>
|
|
server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
|
|
String inputMessage1;
|
|
String inputMessage2;
|
|
// GET input1 value on <ESP_IP>/update?output=<inputMessage1>&state=<inputMessage2>
|
|
if (request->hasParam(PARAM_INPUT_1) && request->hasParam(PARAM_INPUT_2)) {
|
|
inputMessage1 = request->getParam(PARAM_INPUT_1)->value();
|
|
inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
|
|
int requestedValue = inputMessage2.toInt();
|
|
}
|
|
else {
|
|
inputMessage1 = "No message sent";
|
|
inputMessage2 = "No message sent";
|
|
}
|
|
Serial.print("GPIO: ");
|
|
Serial.print(inputMessage1);
|
|
Serial.print(" - Set to: ");
|
|
Serial.println(inputMessage2);
|
|
request->send(200, "text/plain", "OK");
|
|
});
|
|
|
|
// Start server
|
|
server.begin();
|
|
}
|
|
|
|
void loop() {
|
|
|
|
}
|