ESP32-C3 webserver buzzer code
/* Board: esp32C3 Dev Module
* Upload: 115200
* USB CDC : enabled
* CPU: 160Mhz
* Flash: 80MhZ
* Flash Mode: QIO
* Flash Size: 4MB (32MB)
* Partition: Default 4MB with spiffs
* Core debug: None
* Erase: Disabled
* JTAG: Disabled
* Zigbee: Disabled
* Port: COM3
*/
// first page 192.168.1.19 showInput
// second page: 192.168.1.19/get handleGet
// third page (true): 192.168.1.19/button handleButton
// third page (false): 192.168.1.19/ showInput
// fourth page: 192.168.1.19/on handleButton
#include <WiFi.h>
#include <WebServer.h>
// Replace with your network credentials
const char* ssid = "@home";
const char* password = "xxxxxxxxxxxx";
// Assign output variable to GPIO pin
const int output = 8;
String outputState = "OFF";
int nr_of_times=0;
// Variable to store the user input
String input_string_value = "";
bool passphrase = false;
// static IP
IPAddress local_IP(192, 168, 1, 19);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
// R=raw string literal no need for esc characters
const char PROGMEM RE_AUTH[] = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<title>Re-authenticate</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html { font-family: Helvetica; text-align: center; background: #f5f7fa; margin: 0; padding: 20px; }
body { max-width: 600px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h1 { color: #333; font-size: 28px; margin-bottom: 20px; }
</style>
</head>
<body>
<h1>Re-authenticate</h1>
<a href="/">Back to login</a>
</body>
</html>
)rawliteral";
// R=raw string literal no need for esc characters
const char PROGMEM INPUT_HTML[] = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<title>ESP32 Input Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html { font-family: Helvetica; text-align: center; background: #f5f7fa; margin: 0; padding: 20px; }
body { max-width: 600px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h2 { color: #333; font-size: 18px; margin-bottom: 20px; }
</style>
</head>
<body>
<h2>HTML Form to Input Data</h2>
<form action="/login" method="POST">
Enter passphrase: <input autocomplete="new-password" type="text" name="input_string" >
<input type="submit" value="Submit">
</form>
</body>
</html>
)rawliteral";
const char PROGMEM BUTTON_HTML[] = R"rawliteral(
<!DOCTYPE html><html>
<head>
<title>ESP32 webserver</title>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<style>
html { font-family: Helvetica; text-align: center; background: #f5f7fa; margin: 0; padding: 20px; }
body { max-width: 600px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h1 { color: #333; font-size: 28px; margin-bottom: 20px; }
p { color: #555; font-size: 18px; margin: 10px 0; }
.button { background: #4CAF50; border: none; color: white; padding: 12px 24px; text-decoration: none; font-size: 20px; border-radius: 8px; cursor: pointer; transition: background 0.2s ease; display: inline-block;
width: 150px; box-sizing: border-box; }
.button:hover { background: #45a049; }
.button2 { background: #555555; }
.button2:hover { background: #666666; }
</style>
</head>
<body>
<h1>ESP32 Web Server</h1>
)rawliteral";
// Create a web server object
WebServer server(80);
// Function to handle turning GPIO on
void handleGPIOOn() {
if ((!passphrase) || (nr_of_times > 4)) {
nr_of_times =0;
passphrase=false;
server.send(200, "text/html", RE_AUTH);
return;
}
outputState = "ON";
nr_of_times++;
digitalWrite(output, HIGH);
handleButton();
}
/* OLD CODE: Function to handle turning GPIO off
void handleGPIOOff() {
if (!passphrase) {
server.send(200, "text/html", RE_AUTH);
return;
}
outputState = "OFF";
digitalWrite(output, LOW);
handleButton();
}
*/
void handleInput() {
server.send(200, "text/html", INPUT_HTML);
}
// passphrase check with method post
void handleLogin() {
if (server.hasArg("input_string")) {
if (server.arg("input_string") == "xxxxxxxxxx") {
passphrase = true;
}
Serial.print("Received input: ");
Serial.println(input_string_value);
}
// Send a response back to the client
if (passphrase) handleButton();
else handleInput();
}
// Function to handle the button URL and show the current state
void handleButton() {
String html=BUTTON_HTML;
// Display GPIO controls
html += "<p>Buzzer - " + String(nr_of_times) + " times</p>";
if (outputState == "ON") {
html += "<p><a href=\"/on\"><button class=\"button\">Buzz again</button></a></p>";
delay(1000);
outputState = "OFF";
digitalWrite(output, LOW);
} else {
html += "<p><a href=\"/on\"><button class=\"button\">Buzzer</button></a></p>";
}
html += "</body></html>";
server.send(200, "text/html", html);
}
void setup() {
Serial.begin(115200);
delay(1000);
// Initialize the output variable as output
pinMode(output, OUTPUT);
// Set the onboard LED to LOW
digitalWrite(output, LOW);
if (!WiFi.config(local_IP, gateway, subnet)) {
Serial.println("STA Failed to configure");
}
// Connect to Wi-Fi network
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
// Set up the web server to handle different routes
server.on("/", handleInput);
server.on("/on", handleGPIOOn);
server.on("/login", handleLogin);
const char *headerkeys[] = {"User-Agent", "Cookie"};
size_t headerkeyssize = sizeof(headerkeys) / sizeof(char *);
//ask server to track these headers
server.collectHeaders(headerkeys, headerkeyssize);
// Start the web server
server.begin();
Serial.println("HTTP server started");
}
void loop() {
// Handle incoming client requests
server.handleClient();
}