Table of Contents
Introduction
In this article, we will learn how to create a web server using ESP32 from scratch. We will go through the step wise process of connecting ESP32 with relay driver and creating a web application for the user to control the relays or the devices connected to the relays.
For the web application, we will use bootstrap as our building base, as this framework is easy to understand and easy to integrate from the basic conventional HTML and CSS page. So, for the UI side code we will develop in bootstrap.
How it Works ?
After turning on the ESP32 module the default WIFI credentials will try to connect with the network, So after the connection ESP32 we provide us a local IP address in the serial monitor and then we will use IP address by copy and pasting it in any of our favorite browser. Then ESP32 will detect the new connection and a web page designed in bootstrap will be shown with multiple buttons. So, when the user clicks the button the relay will turn ON or OFF as per previous status.
This project is built on ESP32 microcontroller which will serve a web page on request from client. The client may be a computer, a mobile device or any device which is capable to run browser engine.
The ESP32 controller is connected to a 5v 4 channel relay which can control four devices at any point of time. We will understand the source code and can be downloaded from the download section.
Hardware Requirements
Disclaimer: It may contains Amazon affiliate links. which means I can get a small commission on the sale. This might be your indirect help to me. Thank You 🙏Software Requirements
ESP Board Manager Link
https://dl.espressif.com/dl/package_esp32_index.json
http://arduino.esp8266.com/stable/package_esp8266com_index.jsonAbout 5v Relay
A 5V mechanical switching relay is an electromechanical device that allows you to switch on/off electrical circuits using a low voltage control signal. It consists of a coil, a set of contacts, and a switch that is operated by an electromagnetic force generated by the coil.
When we provide proper voltage at the coil terminal the contact connected at NC normally connected point is shifted to the NO normally open point. And then completing the whole circuit. This mechanical switching is done using an digital signal through a optocoupler in the 5v relay module.
About ESP32
The ESP32 is low cost, low power and a power full microcontroller. It is widely used in embedded system and Internet of Thing applications. This microcontroller is developed by Espressif Systems and it is based on Xtensa LX6 processor. You can develop number of projects or application because of its versatility. Some on the important features are listed below.
- It has dual core processor that can be program and controlled independently, Which is the best part for multi tasking at the same time.
- ESP32 has Wi-Fi and Bluetooth dual wireless connectivity, which make best option for IoT application that require wireless connectivity.
- It has various power-saving modes, which can extend the battery life in an battery powered application.
- It has number of GPIO pins, which can be used to interface different types of sensors and actuators.
- It can be programmed using C, C++, and MicroPython.
The ESP32 board can be used as a server or as an client in a network. ESP32 can listen the incoming request from the client as a server and can be used to send the request to the server and do the data exchange as an client.
So, after connecting with the network ESP32 hostname is the IP address that is assigned to the ESP32 or the default name “Espressif”.
About Bootstrap
Bootstrap is a popular front end web development framework and it is originally developed by Twitter. It is an open source framework and it provides different built in components like HTML, CSS, and JavaScripts, which can be used to develop responsive web and mobile web pages and applications,
Bootstrap makes easy for the developers to develop a consistent and best user interface, without writing a custom CSS and JavaScript, which reduces the development time and effort while creating web applications
Circuit Diagram
Circuit Explanation
Follow the circuit diagram and build your circuit correctly.
Relay Driver: The relay driver I am using is a 5v 4-channel relay, this means I can control up to 4 devices. The circuit diagram is explained in the below table.
| Relay Driver | Raspberry Pi Pico |
| VCC | Common 5v |
| GND | Common GND |
| IN1 | GP16 |
| IN2 | GP17 |
| IN4 | GP18 |
| IN4 | GP19 |
Source Code Explanation
// Replace with your WIFI credentials
const char* SSID_NAME = "REPLACE_YOUR_SSID";
const char* SSID_PASSWORD = "REPLACE_YOUR_SSID_PASSWORD";Status of the relay updated in this variables.
String relay16Status = "off";
String relay17Status = "off";
String relay18Status = "off";
String relay19Status = "off";Relay is connected to the variables assigned.
const int relay16 = 16;
const int relay17 = 17;
const int relay18 = 18;
const int relay19 = 19;Video Tutorial
Download Source Code
Download the complete source code: click here