Here is How to Create a Webpage to Control a Relay Module Using ESP32 Arduino. For this project, one needs to setup ESP32 with Arduino in the manner we described earlier. It is a Wi-Fi based project (not IoT). This is a basic example which provides the base of advanced projects. Previously we published few basic projects with relay. Use separate DC voltage supply for the relay (avoid AC for testing without guidance according to your age and experience). Using relay with Arduino is easy, it is just like using LED directly :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
int relay_pin = 4; void setup() { pinMode(relay_pin, OUTPUT); } void loop() { digitalWrite(relay_pin, HIGH); delay(4000); digitalWrite(relay_pin, LOW); delay(4000); } |
---
Now, for the Wi-Fi part, we need to modify the code in this way :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
#include <WiFi.h> const char* wifi_name = "your_ssid"; // Your Wifi network name here const char* wifi_pass = "your_pass"; // Your Wifi network password here WiFiServer server(80); // Server will be at port 80 int relay_pin = 4; void setup() { Serial.begin (115200); pinMode (relay_pin, OUTPUT); Serial.print ("Connecting to "); WiFi.begin (wifi_name, wifi_pass); // Connecting to the wifi network while (WiFi.status() != WL_CONNECTED) // Waiting for the response of wifi network { delay (500); Serial.print ("."); } Serial.println(""); Serial.println("Connection Successful"); Serial.print("IP address: "); Serial.println(WiFi.localIP()); // Getting the IP address Serial.println("Type the above IP address into browser search bar"); server.begin(); // Starting the server } ... |
Now, we need to create a webpage with this kind of HTML code :
|
1 2 3 4 5 6 7 8 9 |
<html> <title>ESP32</title> <body> <h1>ESP32 Standalone Relay Control </h1> <p>Relay Control</p> <a href="/?relayon"><button>ON</button></a> <a href="/?relayoff"><button>OFF</button></a> </body> </html> |
We can write the above code for Arduino in this way :
|
1 2 3 4 5 6 7 8 9 10 11 |
client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println(); client.print("<HTML><title>ESP32</title>"); client.print("<body><h1>ESP32 Standalone Relay Control </h1>"); client.print("<p>Relay Control</p>"); client.print("<a href=\"/?relayon\"\"><button>ON</button></a>"); client.print("<a href=\"/?relayoff\"\"><button>OFF</button></a>"); client.print("</body></HTML>"); break; // break out of the while loop: |
The complete code will go like this :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
#include <WiFi.h> const char* wifi_name = "your_ssid"; // Your Wifi network name here const char* wifi_pass = "your_pass"; // Your Wifi network password here WiFiServer server(80); // Server will be at port 80 int relay_pin = 4; void setup() { Serial.begin (115200); pinMode (relay_pin, OUTPUT); Serial.print ("Connecting to "); WiFi.begin (wifi_name, wifi_pass); // Connecting to the wifi network while (WiFi.status() != WL_CONNECTED) // Waiting for the response of wifi network { delay (500); Serial.print ("."); } Serial.println(""); Serial.println("Connection Successful"); Serial.print("IP address: "); Serial.println(WiFi.localIP()); // Getting the IP address Serial.println("Type the above IP address into browser search bar"); server.begin(); // Starting the server } void loop() { WiFiClient client = server.available(); //Checking if any client request is available or not if (client) { boolean currentLineIsBlank = true; String buffer = ""; while (client.connected()) { if (client.available()) // if there is some client data available { char c = client.read(); buffer+=c; // read a byte if (c == '\n' && currentLineIsBlank) // check for newline character, { client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println(); client.print("<HTML><title>ESP32</title>"); client.print("<body><h1>ESP32 Standalone Relay Control </h1>"); client.print("<p>Relay Control</p>"); client.print("<a href=\"/?relayon\"\"><button>ON</button></a>"); client.print("<a href=\"/?relayoff\"\"><button>OFF</button></a>"); client.print("</body></HTML>"); break; // break out of the while loop: } if (c == '\n') { currentLineIsBlank = true; buffer=""; } else if (c == '\r') { if(buffer.indexOf("GET /?relayon")>=0) digitalWrite(relay_pin, LOW); if(buffer.indexOf("GET /?relayoff")>=0) digitalWrite(relay_pin, HIGH); } else { currentLineIsBlank = false; } } } client.stop(); } } |
Notice the logic how we are receiving the command.
About Abhishek Ghosh
Here’s what we’ve got for you which might like :
Additionally, performing a search on this website can help you. Also, we have YouTube Videos.
Take The Conversation Further ...
We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!
If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.
Contact Us