Gotechies is back with another quick guide about ESP 32 Wi-Fi Communication Via Local Server.
If you want to connect ESP-32 Wi-Fi Communication Via Local Server, send and receive messages via local server, complete code and circuit diagram are available below, as well as how simple communication with the Adafruit IO server is.
First, you need to install ESP32 in your Arduino IDE, If you want some help with that, here is a link to a complete basic article for that process:
Absolute Beginner Guide to ESP32 & ESP8266 – 2021
Now that you have installed the ESP32 board in your Arduino IDE, connect any output device with a digital output pin. We have connected an LED to pin G17 of our ESP32 board as below:
Step 2 Will be to upload the code, Complete Code is attached here below:
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
WebServer server ( 80 );
const char* ssid = "yourSSID";
const char* password = "yourPassword";
#define LEDPIN 17
void setup()
{
pinMode(LEDPIN,OUTPUT);
Serial.begin(9600);
connectToWifi();
beginServer();
}
void loop() {
server.handleClient();
delay(1000);
}
void connectToWifi()
{
WiFi.enableSTA(true);
delay(2000);
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());
}
void beginServer()
{
server.on ( "/", handleRoot );
server.begin();
Serial.println ( "HTTP server started" );
}
void handleRoot(){
if ( server.hasArg("LED") ) {
handleSubmit();
} else {
server.send ( 200, "text/html", getPage() );
}
}
void initSensor()
{
}
void handleSubmit() {
String LEDValue;
LEDValue = server.arg("LED");
if ( LEDValue == "1" ) {
digitalWrite(LEDPIN, HIGH);
server.send ( 200, "text/html", getPage() );
}
else if( LEDValue == "0" )
{
digitalWrite(LEDPIN, LOW);
server.send ( 200, "text/html", getPage() );
}
else
{
Serial.println("Error Led Value");
}
}
int reading1=35;
String getPage(){
String page = "<html lang=en-EN><head><meta http-equiv='refresh' content='60'/>";
page += "<title>ESP32 Wifi Server Sample</title>";
page += "<style> body { background-color: #fffff; font-family: Arial, Helvetica, Sans-Serif; Color: #000000; }</style>";
page += "</head><body><h1>ESP32 Wifi Server Sample</h1>";
page += "<h3>Sensor 1</h3>";
page += "<ul><li>Reading1: ";
page += reading1;
page += " hPa</li></ul>";
page += "<h3>GPIO</h3>";
page += "<form action='/' method='POST'>";
page += "<ul><li>LED";
page += "";
page += "<INPUT type='radio' name='LED' value='1'>ON";
page += "<INPUT type='radio' name='LED' value='0'>OFF</li></ul>";
page += "<INPUT type='submit' value='Submit'>";
page += "</body></html>";
return page;
}In this code we have used Wifi Libraries first to initialize the wifi, connected our wifi in setup function with SSID and PASSWORD (you have to change it to yours)
Then we have created an HTML page:
String page = "<html lang=en-EN><head><meta http-equiv='refresh' content='60'/>";
page += "<title>ESP32 Wifi Server Sample</title>";
page += "<style> body { background-color: #fffff; font-family: Arial, Helvetica, Sans-Serif; Color: #000000; }</style>";
page += "</head><body><h1>ESP32 Wifi Server Sample</h1>";
page += "<h3>Sensor 1</h3>";
page += "<ul><li>Reading1: ";
page += reading1;
page += " hPa</li></ul>";
page += "<h3>GPIO</h3>";
page += "<form action='/' method='POST'>";
page += "<ul><li>LED";
page += "";
page += "<INPUT type='radio' name='LED' value='1'>ON";
page += "<INPUT type='radio' name='LED' value='0'>OFF</li></ul>";
page += "<INPUT type='submit' value='Submit'>";
page += "</body></html>";
return page;These are the lines where you edit your Web page, you can change title & body with your project title
Reading1 is where you can send your variable of any reading.
& LED value = 1 and 0 are the button functions sending values to the esp32
So if you have any output device, simply connect it with ESP like relay, buzzer, motor, or Light & it will turn ON/OFF using this function.
Then the important part is this one:
if ( LEDValue == "1" ) {
digitalWrite(LEDPIN, HIGH);
server.send ( 200, "text/html", getPage() );
}
else if( LEDValue == "0" )
{
digitalWrite(LEDPIN, LOW);
server.send ( 200, "text/html", getPage() );
}
else
{
Serial.println("Error Led Value");
}Here, ESP32 takes action according to the values, you can change the functions when the values are 0 and 1, and you can even add buttons in the HTML part and add functions accordingly, Hopefully this helps you. If you need any kind of help, we will be very happy to help you. We will be waiting for your comments.
Keep following our website gotechies for more interesting tricks, Tips and tutorials and also subscribe our youtube channel:)
