Rain Drop Indicator Using Web Server or Blynk.
by project_iot22 in Circuits > Arduino
1129 Views, 3 Favorites, 0 Comments
Rain Drop Indicator Using Web Server or Blynk.
Raindrop Indicator project used for rain detection. Rainy days are different from any other day. They hold great importance for everyone differently and are difficult to predict. This causes the daily activities of the community to be affected. Rain will affect the community's planning such as doing laundry and going fishing. This raindrop indicator helps people to manage their daily activities.
The rain sensor module is the main tool for this project. It can be used as a switch when raindrop falls through the raining board and also for measuring rainfall intensity.
Our main objective for this project:
- To make it convenient for the user to use it.
- To notify users about current weather.
- To alert the user when it rains.
Supplies
- Rain sensor
- Breadboard
- Jumper wire
- ESP8266 12E
- DHT11
- Resistor
Illustrate the Circuit
Before starting to make the actual circuit, we use software to illustrate how the circuit will come out later. We also take this sketch as a guide to start building the circuit. This helps us to overcome any mistakes that might occur during implementing the real circuit. The sensor that we choose to use for our project are rain sensor module and DHT11. The rain sensor consists of two modules, a rain board that detects the rain and a control module, which compares the analog value, and converts it to a digital value. The second sensor is DHT11, to measure temperature and humidity surrounding us. The sensor can measure temperature from 0°C to 50°C and humidity from 20% to 90% with an accuracy of ±1°C and ±1%.
Setup the Circuit
- First, make sure all the components are complete and functional before building the circuit.
- Install all the components as shown above or follow the circuit diagram.
- All the components must be installed correctly in order to make the circuit work.
- Ensure all the components install correctly as diagram below to avoid any damage.
Precaution!
Any faulty or misplaced during the installation can cause damage to the circuit and the components.
Html Code for Rain Drop Indicator Interface
The program is split into two parts.
- The ESP8266 WiFi related functions are contained in the first portion as.ino files.
- The second part is HTML and user interface GUI. We named it index.h as you can see below.
Downloads
Connection to Web Server
Raindrop indicator software working
The software consists of the following parts.
1. Connecting to WiFi
- First, we define wifi ssid and password.
const char* ssid = "xxxxx";
const char* password = "xxxxx";
- Try to connect with wifi using WiFi.begin(ssid, password)
- Use (WiFi.status() != WL_CONNECTED) and wait until connection is successful. Then the serial monitor will display the IP address by using this function WiFi.localIP().
2. Server Creation
- To create the web server, web server library must be included in Arduino code, #include <ESP8266WebServer.h>
- Define port as 80, ESP8266WebServer server(80);
In setup() we create client request handling functions, one for displaying GUI and another which sends the sensor data to the user using AJAX and JSON. AJAX is part of a web page.
3. Getting Data from Sensors.
- Create JSON data
String data = "{\"Rain\":\""+String(rain)+"\", \"Temperature\":\""+ String(temperature) +"\", \"Humidity\":\""+ String(humidity) +"\"}";
4. Sending GUI to the user.
- handleRoot() sends a web page (HTML) to the user (web browser).
void handleRoot() {
String s = MAIN_page; //Read HTML contents
server.send(200, "text/html", s); //Send web page
}
5. Updating Sensors values on the web page.
- Get Humidity temperature data after the request is complete:
humidity = dht.getHumidity();
temperature = dht.getTemperature();
Connection With Blynk
Create Blynk Template
- During creating the template, select ESP 8266 as hardware and use Virtual Pins to create Datastreams, so we can connect any microcontroller with this template.
Create Datastreams in Blynk cloud
- We have used two sensors (DHT11 and Rain sensor) so we have created two Datastreams to display the reading. So if you want to connect 10 sensors then create 10 Datastreams.
Add New Event in Blynk
- To get the Alert email or mobile notification, you have to add a new event. We have added two events (Temperature and RAIN). Whenever the event occurs, we will get the Alert on Mobile and email.
Create Web Dashboard
- After that, click and drag Gauge and Label widgets according to the number of sensors.
- Then click on “Save“.
Add Device in Blynk Cloud using Template
*For a better understanding, you can refer file that we provide below.
Downloads
Installing the Arduino Library
- Download DHT sensor library for ESPx
- Add the libraries in the Arduino IDE by clicking on the button after downloading the.zip files.
- To install the library navigate to the Sketch> Include Library > Manage Libraries to install the library. Wait for Library Manager to download the list of installed libraries and the library index.
- Download code.
Arduino Code
Do the code in Arduino as we provide below.
Connection to web browser.
- After uploading open the serial monitor and get the IP address.
- Open IP address in Web Browser.
- Click here to see a demonstration of the web server.
Connection to blynk.
- After uploading the code to ESP8266, it will send the data to the blynk.
- Blynk will display the data from sensors and notify the user.
Final Result
- Web Server
- Blynk