Scribd
Upload
21 views10 pages

New Microsoft Word Document

The document outlines the process to create a webpage on an ESP32 for controlling a DC panel and engine using a web server. It details hardware setup, including connections to GPIO pins and optional relay modules, as well as software setup using the Arduino IDE to handle HTTP requests and control the GPIO pins. The document also includes code snippets for setting up the web server and managing the state of the DC panel and engine through a web interface.

Uploaded by

Mithan Debnath
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views10 pages

New Microsoft Word Document

The document outlines the process to create a webpage on an ESP32 for controlling a DC panel and engine using a web server. It details hardware setup, including connections to GPIO pins and optional relay modules, as well as software setup using the Arduino IDE to handle HTTP requests and control the GPIO pins. The document also includes code snippets for setting up the web server and managing the state of the DC panel and engine through a web interface.

Uploaded by

Mithan Debnath
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

To create a webpage on an ESP32 that controls a DC panel (ON/OFF) and engine

(START/STOP), you'll need to set up a web server on the ESP32, create an HTML
page with buttons, and then write code to handle the button presses and control
the corresponding GPIO pins.
Here's a breakdown of the process:
1. Hardware Setup:
 ESP32:
Your microcontroller with web server capabilities.
 DC Panel Control:
Connect the ESP32's GPIO pins to a relay or transistor circuit that controls the DC
panel power.
 Engine Start/Stop:
Similarly, connect GPIO pins to a relay or transistor circuit that controls the
engine's start/stop mechanism.
 Motor Driver (Optional):
If controlling a DC motor, use a motor driver like L298N to interface with the
ESP32.
2. Software Setup (Arduino IDE):
 Install Libraries: Include the necessary libraries: WiFi.h for Wi-Fi
and WebServer.h for the web server.
 Connect to Wi-Fi: Configure the ESP32 to connect to your local Wi-Fi
network.
 Start Web Server: Create a web server object and define the routes for
handling requests.
 Create HTML Page: Design an HTML page with buttons for "DC Panel
ON/OFF" and "Engine START/STOP".
 Handle Button Press: Implement code to handle HTTP requests from the
web page and control the GPIO pins accordingly.
 Update Webpage: Update the webpage to reflect the current state of the
DC panel and engine.
#include <WiFi.h>
#include <ESPAsyncWebServer.h>

// Replace with your network credentials


const char* ssid = "Your_SSID";
const char* password = "Your_PASSWORD";

// Define GPIO pins for relay control


#define DC_PANEL_PIN 26
#define ENGINE_PIN 27

// Create an AsyncWebServer on port 80


AsyncWebServer server(80);

// Function to set up the hardware


void setup() {
Serial.begin(115200);

// Configure GPIO as output


pinMode(DC_PANEL_PIN, OUTPUT);
pinMode(ENGINE_PIN, OUTPUT);

// Set initial state (OFF)


digitalWrite(DC_PANEL_PIN, LOW);
digitalWrite(ENGINE_PIN, LOW);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi!");

// Serve the web page


server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
String html = "<html>\
<head>\
<title>DG MONITORING SYSTEM</title>\
<style>\
button {font-size: 20px; margin: 10px; padding: 10px;}\
</style>\
<script>\
function sendRequest(url) { fetch(url); }\
</script>\
</head>\
<body>\
<h2>ESP32 Web Control</h2>\
<button onclick=\"sendRequest('/dc/on')\">DC Panel
ON</button>\
<button onclick=\"sendRequest('/dc/off')\">DC Panel
OFF</button><br>\
<button onclick=\"sendRequest('/engine/on')\">Engine
START</button>\
<button onclick=\"sendRequest('/engine/off')\">Engine
STOP</button>\
</body>\
</html>";
request->send(200, "text/html", html);
});

// API endpoints to control relays


server.on("/dc/on", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(DC_PANEL_PIN, HIGH);
request->send(200, "text/plain", "DC Panel ON");
});

server.on("/dc/off", HTTP_GET, [](AsyncWebServerRequest *request){


digitalWrite(DC_PANEL_PIN, LOW);
request->send(200, "text/plain", "DC Panel OFF");
});

server.on("/engine/on", HTTP_GET, [](AsyncWebServerRequest *request){


digitalWrite(ENGINE_PIN, HIGH);
request->send(200, "text/plain", "Engine START");
});

server.on("/engine/off", HTTP_GET, [](AsyncWebServerRequest *request){


digitalWrite(ENGINE_PIN, LOW);
request->send(200, "text/plain", "Engine STOP");
});

// Start server
server.begin();
}

void loop() {
// Nothing needed in loop() since AsyncWebServer handles everything

}
To create a webpage on an ESP32 that controls a DC panel (on/off) and engine
(start/stop), you'll need to set up a web server on the ESP32, create an HTML
page with buttons, and then write code to handle the button presses and control
the GPIO pins connected to the DC panel and engine.
Here's a breakdown of the process:
1. Hardware Setup:
 ESP32: You'll need an ESP32 development board (like ESP32 DevKitC or
NodeMCU).
 DC Panel & Engine: Connect the DC panel and engine to the ESP32's
GPIO pins, using a motor driver (like L298N) for the engine.
 Relay Module (Optional): If you need to control higher voltage or
current, use a relay module to switch the DC panel and engine.
2. Software Setup (Arduino IDE):
 Install ESP32 Board Support: Add the ESP32 board support to your
Arduino IDE.
 Include Libraries:
o WiFi.h (for Wi-Fi connectivity)

o WebServer.h (for creating the web server)

 Set up Wi-Fi: Define your Wi-Fi network credentials (SSID and password)
in the code.
 Define GPIO Pins: Assign the GPIO pins to control the DC panel and
engine.
 Create Web Server:
o Create a WebServer object.

o Define the web server's port (default is 80).

o Handle HTTP requests (GET and POST).

 Create HTML Page:


o Create an HTML file (e.g., index.html) with buttons for "DC Panel
On/Off" and "Engine Start/Stop".
o Use JavaScript to send HTTP requests to the ESP32 when the
buttons are clicked.
 Handle Button Presses:
o In the ESP32 code, parse the HTTP requests to determine which
button was pressed.
o Control the GPIO pins accordingly to turn the DC panel on/off and
start/stop the engine.
 Upload Code and Files:
o Upload the code to the ESP32.

o Upload the HTML file (and any other files) to the ESP32's SPIFFS (SPI
Flash File System).
#define PANEL_ON_PIN 5 // GPIO pin for DC panel ON/OFF
#define ENGINE_START_PIN 18 // GPIO pin for engine START
#define ENGINE_STOP_PIN 19 // GPIO pin for engine STOP

void setup() {
pinMode(PANEL_ON_PIN, OUTPUT);
pinMode(ENGINE_START_PIN, OUTPUT);
pinMode(ENGINE_STOP_PIN, OUTPUT);

digitalWrite(PANEL_ON_PIN, LOW);
digitalWrite(ENGINE_START_PIN, LOW);
digitalWrite(ENGINE_STOP_PIN, LOW);
}

void turnOnPanel() {
digitalWrite(PANEL_ON_PIN, HIGH);
}

void turnOffPanel() {
digitalWrite(PANEL_ON_PIN, LOW);
}

void startEngine() {
digitalWrite(ENGINE_START_PIN, HIGH);
delay(2000); // Simulate start signal
digitalWrite(ENGINE_START_PIN, LOW);
}

void stopEngine() {
digitalWrite(ENGINE_STOP_PIN, HIGH);
delay(2000); // Simulate stop signal
digitalWrite(ENGINE_STOP_PIN, LOW);
}

void loop() {
// Example sequence
turnOnPanel();
delay(5000);
startEngine();
delay(10000);
stopEngine();
delay(5000);
turnOffPanel();
delay(10000);
}

🔌 Connections:

Component Connection

ESP32 GPIO (e.g., GPIO 23) Relay IN

ESP32 GND Relay GND

ESP32 5V Relay VCC

Relay COM (Common 12V Power Supply


Terminal) Positive

Relay NO (Normally Open Positive Terminal of the


Terminal) Panel

GND of 12V Power


Panel Negative Terminal
Supply

⚡ How It Works?
 When ESP32 GPIO is HIGH, the relay closes, and the 12V panel turns
ON.
 When ESP32 GPIO is LOW, the relay opens, and the panel turns OFF

You might also like