Rain Drop Indicator Using Web Server or Blynk.

by project_iot22 in Circuits > Arduino

1099 Views, 3 Favorites, 0 Comments

Rain Drop Indicator Using Web Server or Blynk.

photo_2022-06-25_15-34-35.jpg
FQUXDBPL4SGU532.jpg
blynkphone.jpg
prop.jpg

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

photo_2022-06-27_22-36-12.jpg
  • Rain sensor
  • Breadboard
  • Jumper wire
  • ESP8266 12E
  • DHT11
  • Resistor

Illustrate the Circuit

litar.png
F86QWRIL4R1DIZR.jpg
rain.jpg

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

1.jpg
WhatsApp Image 2022-06-28 at 3.11.03 PM.jpeg
  • 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.

  1. The ESP8266 WiFi related functions are contained in the first portion as.ino files.
  2. The second part is HTML and user interface GUI. We named it index.h as you can see below.

Downloads

Connection to Web Server

Screenshot 2022-06-25 152037.jpg
humidity.jpg

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

blynk.jpg
FD1CP4OL4Y6KY1E.jpg

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

  1. Download DHT sensor library for ESPx
  2. Add the libraries in the Arduino IDE by clicking on the button after downloading the.zip files.
  3. 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.
  4. Download code.

Arduino Code

Do the code in Arduino as we provide below.

Connection to web browser.

  1. After uploading open the serial monitor and get the IP address.
  2. Open IP address in Web Browser.
  3. Click here to see a demonstration of the web server.

Connection to blynk.

  1. After uploading the code to ESP8266, it will send the data to the blynk.
  2. Blynk will display the data from sensors and notify the user.

Final Result

rain.jpg
rain.jpg
  • Web Server
  • Blynk