In recent years, home automation has become popular and accessible. DIY electronics projects improve home functionality with custom solutions. Learn how to use a D1 mini WiFi board to control digital outputs with a web server in this Arduino project article. Control lights, fans, electric locks, and other devices from anywhere with internet access. In this case keep reading to learn everything you need to know to build this project step by step.
Materials needed
- Arduino board compatible with ESP8266, such as the D1 mini WiFi board.
- USB cable to connect the board to a computer
- 5V power supply or a rechargeable lithium battery
- 4-channel relay module
- Protoboard
- Prototyping wire kit
Project Development
Arduino is an open-source hardware and software platform used for creating electronic projects. Moreover, it is a favored tool among students, hobbyists, and technology professionals. This is because it enables them to and create projects without the need to design a circuit from scratch.
You can program the pins on the platform’s board to interact with other components. These components can include sensors, motors, displays, among others. The board microcontroller acts as its brain. Makes programming and integration with different electronic devices effortless. It handles reading sensor inputs, controlling actuator outputs, and processing program logic.
What makes Arduino so useful is its ease of use and its active and collaborative community. The Arduino IDE is a free software used for writing, uploading, and running programs on the board. The IDE uses a simplified version of the C/C++ language, making it easier for users to understand and use.
Arduino enables you to create various projects, from simple to complex. Can include home automation, robotics, and IoT sensors. Is scalable, so you can progress from simple to complex projects as you gain experience.
ESP8266
Many IoT projects use the ESP8266, a low-cost WiFi microcontroller. The developer is Espressif Systems. Its affordability and internet connectivity capabilities make it a popular choice.
You can program the ESP8266-based WiFi D1 mini board using the Arduino IDE. The board is popular for its small size and WiFi connectivity.
The ESP8266 features a 32-bit processor with a clock speed of up to 80MHz and built-in flash memory of up to 16MB. You can use the GPIO pins to interact with other components, such as sensors and actuators.
What makes the ESP8266 so useful is its ability to connect to the internet and its low cost. ESP8266 enables IoT projects to connect to cloud services. This services can be like AWS and Google Cloud, creating complex solutions.
Digital Outputs
You can program the pins on the Arduino board as digital outputs to provide a high or low voltage signal. Use these pins to control LEDs, relays, and motors. Configure a digital output as “high” for positive voltage (5V) and “low” for negative voltage (0V).
You can use digital outputs to control the electronics of your project. Use digital outputs to control devices like LEDs, relays, or motors. Send control signals to sensors and actuators using digital outputs.
Program digital pins on an Arduino board as inputs or outputs based on their use. To control an LED with a digital pin, set the pin as output and its state as high or low to turn the LED on or off.
Web Server
A computer or device runs a web server program to deliver web content to web browsers like Firefox. The web server receives requests from the browsers and sends them web pages in response. The web content that the web server sends can be HTML, CSS, JavaScript, images, and other types of files.
You can create a web server with Arduino by programming the board to act as a web server using the Arduino IDE. The Arduino board generates web pages in response to received HTTP requests.
The web server controls the state of digital outputs in the project. For example, send an HTTP request via a web browser to turn a light connected to a digital output on or off.
Keep in mind that the web server created with the Arduino is not a complete web server. This server cannot handle large amounts of traffic or host complex websites. However, it is ideal for basic web control in simple IoT projects.
HTTP and CSS
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are markup languages used to create web content. You can use HTML to create the structure and content of a web page, and CSS to style and design the page.
HTML tags define web page elements. This elements can be headings, paragraphs, images, links, and buttons with specific functions.
You can use CSS to style and design a web page. CSS define text attributes and element appearance, including font, size, color,…
Create a basic web interface to control digital outputs using HTML and CSS in this project. Create a web page that shows the digital output’s state and allows users to turn it on or off by clicking a button.
JavaScript sends commands and updates digital output status for web and board interaction. Create a user-friendly web interface with HTML, CSS, and JavaScript.
Javascript
JavaScript is a programming language used to create interactivity on a web page. Adds dynamism to a web page and enables it to respond to user actions.
JavaScript runs in the user’s web browser and can interact with the web page in many different ways. Use JavaScript for animations, form validation, real-time content updates, and more.
Use JavaScript to send commands and update digital output status in this project. Send commands and update digital output status in this project. Clicking a button on the web interface sends an HTTP request to turn a digital output on or off with code. Update the web interface to show the digital output’s current status with code.
JavaScript is crucial for a responsive web interface in this project. Is a popular programming language with abundant online resources to support project development.
Building the circuit
D1 mini
5V
GND
D1
D2
D3
D4
4 channel relay
VCC
GND
IN1
IN2
IN3
IN4
DC Power Supply
(+)
(-)
Programming
- Open the Arduino IDE on your computer and select the WiFi D1 Mini board from the board selection menu.
- If the WiFi D1 Mini board does not appear, do the following: Open the File menu >> Preferences >> and in ‘Additional Boards Manager URLs’ add the following path:
http://arduino.esp8266.com/stable/package_esp8266com_index.json
This will add the ESP8266 platform in the IDE. Use the ESP8266 platform to program the WiFi D1 Mini board and other ESP8266-based devices with software tools and libraries. This platform has a WiFi library to configure wireless networks and an HTTP library to create a web server on the WiFi D1 Mini board.
- Open the board manager, search for ‘ESP8266’, and install the package. Wait for all components to finish installing.
- Now a new menu with the list of installed boards will appear.
- Select the following board: ‘LOLIN(WEMOS) D1 R2 & mini
- Connect the WiFi D1 Mini board to your computer using a USB cable.
- The first code we find when creating a project is the following:
void setup() {
// put your setup code here, to run once:
}
void loop() {
// put your main code here, to run repeatedly:
}
- Add the dependent libraries.
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
- We add the WiFi network connection data.
// WiFi Settings
const char* ssid = "name_of_wifi_lan";
const char* password = "password_of_wifi_lan";
- Create an instance of the ESP8266WebServer class on the ‘server’ object. Specifying the port number to which the web server binds. In this case, the port number is 80, which is the default port number for HTTP traffic. Use the methods of the ESP8266WebServer class to define routes and HTTP request handlers for incoming requests after creating the web server instance.
// WebServer settings
ESP8266WebServer server(80);
- Define four integer variables to represent the digital output pins for controlling the WiFi D1 Mini board’s connected devices.
// Digital output settings
const int output1 = D1;
const int output2 = D2;
const int output3 = D3;
const int output4 = D4;
- Now let’s write the code for the ‘setup()’ function. Execute this function only once at the beginning of the program, when the microcontroller turns on or restarts. Initialize project parameters and devices in setup(), including input/output pins, variables, and serial communication.Call WiFi.begin() function with ssid and password arguments to establish WiFi connection on WiFi D1 Mini board. Wait for WiFi connection using while loop and delay() function to display status message on serial monitor until WiFi status is connected (WL_CONNECTED).
Display successful WiFi network connection message and WiFi D1 Mini board IP address on serial monitor. Next, we use the server.on() methods to define the different routes and HTTP request handlers that will handle incoming requests. Define routes to toggle digital outputs using constant names (output1-4). Each route has an associated handler that will execute the corresponding action (turning on or off the digital output pin). The code calls the server.begin() method to start the web server and begin listening for incoming requests.
void setup() {
// Setting digital outputs as outputs
pinMode(output1, OUTPUT);
pinMode(output2, OUTPUT);
pinMode(output3, OUTPUT);
pinMode(output4, OUTPUT);
// Connecting to the WiFi network
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to the WiFi network...");
}
// Setting up the web server
Serial.println("Successfully connected to the WiFi network.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.on("/output1/on", handleOutput1On);
server.on("/output1/off", handleOutput1Off);
server.on("/output2/on", handleOutput2On);
server.on("/output2/off", handleOutput2Off);
server.on("/output3/on", handleOutput3On);
server.on("/output3/off", handleOutput3Off);
server.on("/output4/on", handleOutput4On);
server.on("/output4/off", handleOutput4Off);
server.begin();
}
- Execute main loop() function repeatedly while WiFi D1 Mini board is powered on. Handle web server interaction in main loop(), listening for and processing incoming HTTP requests from clients. In the main loop() function, the server.handleClient() statement is executed to continuously listen to incoming requests from the web server and process them in a timely manner.
void loop() {
server.handleClient();
}
