├── ESP32-Web-Server.ino ├── README.md ├── Schematic Diagram.png └── index.html /ESP32-Web-Server.ino: -------------------------------------------------------------------------------- 1 | // Load Wi-Fi library 2 | #include 3 | 4 | // Network credentials Here 5 | const char* ssid = "ESP32-Network"; 6 | const char* password = "Esp32-Password"; 7 | 8 | // Set web server port number to 80 9 | WiFiServer server(80); 10 | 11 | // Variable to store the HTTP request 12 | String header; 13 | 14 | //variables to store the current LED states 15 | String statePin16 = "off"; 16 | String statePin17 = "off"; 17 | //Output variable to GPIO pins 18 | const int ledPin16 = 16; 19 | const int ledPin17 = 17; 20 | 21 | // Current time 22 | unsigned long currentTime = millis(); 23 | // Previous time 24 | unsigned long previousTime = 0; 25 | // Define timeout time in milliseconds 26 | const long timeoutTime = 2000; 27 | 28 | void setup() { 29 | Serial.begin(115200); 30 | 31 | pinMode(ledPin16, OUTPUT); // set the LED pin mode 32 | digitalWrite(ledPin16, 0); // turn LED off by default 33 | pinMode(ledPin17, OUTPUT); // set the LED pin mode 34 | digitalWrite(ledPin17, 0); // turn LED off by default 35 | 36 | WiFi.softAP(ssid,password); 37 | 38 | // Print IP address and start web server 39 | Serial.println(""); 40 | Serial.println("IP address: "); 41 | Serial.println(WiFi.softAPIP()); 42 | server.begin(); 43 | } 44 | 45 | void loop() { 46 | WiFiClient client = server.available(); // Listen for incoming clients 47 | 48 | if (client) { // If a new client connects, 49 | currentTime = millis(); 50 | previousTime = currentTime; 51 | Serial.println("New Client."); // print a message out in the serial port 52 | String currentLine = ""; // make a String to hold incoming data from the client 53 | 54 | while (client.connected() && currentTime - previousTime <= timeoutTime) { 55 | // loop while the client's connected 56 | currentTime = millis(); 57 | if (client.available()) { // if there's bytes to read from the client, 58 | char c = client.read(); // read a byte, then 59 | Serial.write(c); // print it out the serial monitor 60 | header += c; 61 | if (c == '\n') { // if the byte is a newline character 62 | // if the current line is blank, you got two newline characters in a row. 63 | // that's the end of the client HTTP request, so send a response: 64 | if (currentLine.length() == 0) { 65 | // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK) 66 | // and a content-type so the client knows what's coming, then a blank line: 67 | client.println("HTTP/1.1 200 OK"); 68 | client.println("Content-type:text/html"); 69 | client.println("Connection: close"); 70 | client.println(); 71 | 72 | // turns the GPIOs on and off 73 | if (header.indexOf("GET /16/on") >= 0) { 74 | statePin16 = "on"; 75 | digitalWrite(ledPin16, HIGH); // turns the LED on 76 | } else if (header.indexOf("GET /16/off") >= 0) { 77 | statePin16 = "off"; 78 | digitalWrite(ledPin16, LOW); //turns the LED off 79 | } 80 | 81 | if (header.indexOf("GET /17/on") >= 0) { 82 | statePin17 = "on"; 83 | digitalWrite(ledPin17, HIGH); // turns the LED on 84 | } else if (header.indexOf("GET /17/off") >= 0) { 85 | statePin17 = "off"; 86 | digitalWrite(ledPin17, LOW); //turns the LED off 87 | } 88 | 89 | // Display the HTML web page 90 | client.println(""); 91 | client.println(""); 92 | client.println(""); 93 | // CSS to style the on/off buttons 94 | client.println(""); 98 | 99 | client.println("

ESP32 Web Server

"); 100 | client.println("

Control LED State

"); 101 | 102 | if (statePin16 == "off") { 103 | client.println("

"); 104 | } else { 105 | client.println("

"); 106 | } 107 | if (statePin17 == "off") { 108 | client.println("

"); 109 | } else { 110 | client.println("

"); 111 | } 112 | client.println(""); 113 | 114 | // The HTTP response ends with another blank line 115 | client.println(); 116 | // Break out of the while loop 117 | break; 118 | } else { // if you got a newline, then clear currentLine 119 | currentLine = ""; 120 | } 121 | } else if (c != '\r') { // if you got anything else but a carriage return character, 122 | currentLine += c; // add it to the end of the currentLine 123 | } 124 | } 125 | } 126 | // Clear the header variable 127 | header = ""; 128 | // Close the connection 129 | client.stop(); 130 | Serial.println("Client disconnected."); 131 | Serial.println(""); 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ESP32-Web-Server 2 | In this project you’ll create a web server with an ESP32 that controls outputs (two LEDs) from any device using WiFi. 3 | -------------------------------------------------------------------------------- /Schematic Diagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enjoy-Mechatronics/ESP32-Web-Server/a097cc2f7377cdbcc1ab331ac31e4ea182f196f9/Schematic Diagram.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 27 | 28 | 29 |

ESP32 Web Server

30 |

Control LED State

31 |

32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | --------------------------------------------------------------------------------