#### What Will I Learn? <br><hr>

-  You will learn how to configure a water sensor module with NodeMCU devkit v1.o
board to make a circuit that sensed water overflow.
- You will learn how to make a web server that automatically gives on-screen alert
when water overflows on a setup.
- You will learn some possible application of this tutorial in electronic projects, studies or in the industry.<p></p>
#### Requirements
<center><hr><b>Materials Needed</b><hr></center>
- NodeMCU devkit v1.0
- Water Level Sensor
- A bowl of water
- 220 ohms Resistor (1/4 W)
- USB Cable (Type A to Mini B)
- Junction Wires
- Power Supply Unit (+5V)
- Computer

<center><hr><b>Software Applications </b><hr></center>
- Open-Source Arduino Software (IDE) / Arduino IDE

#### Difficulty<hr>
- Intermediate

<hr><p><br>
<b>Description: </b><p><center>https://res.cloudinary.com/hpiynhbhq/image/upload/v1517423070/ufuvbyhhu0sx72lygkrd.png<sup><sub>Image References: <a href="http://ecosoftt.org/wp-content/uploads/2014/04/water-smart-accessories-01.jpg">1</a>, <a href="https://ae01.alicdn.com/kf/HTB1UFG3SpXXXXafXpXXq6xXFXXXk/New-Wireless-Module-CH340-NodeMcu-V3-Lua-WIFI-Internet-of-Things-Development-Board-Based-ESP8266.jpg_640x640.jpg">2</a>, <a href="https://arduino-elektronika.eu/4659-thickbox/water-level-sensor-depth-of-detection-water-sensor-for-arduino.jpg">3</a> </sub></sup></center><p>
Water level measurements or monitoring systems have many known uses in manufacturing, science experiments, navigations and even in public safety. There are known automation for water level indicators that mostly uses light emitting diodes or piezoelectric buzzers as an indicator once certain levels of water is already reached. But there are areas for development in these systems with the use of IoT technology.<p>Hence, I made this tutorial about making a <b>Water Overflow System with Online Updates using NodeMCU devkit v1.0</b>. With this system, the water overflow alert will be automatically updated with the use of a web server that displays an alarm when a certain level of water level is already reached.<p>
The <b>Water Level Sensor</b> is an electronic module that is generally used for sensing rainfall,
liquid leakage and water level. This sensor can easily communicate to a dedicated and compatible
microcontroller like the NodeMCU devkit v1.0 board. It has three terminals: VCC (Source), GND and the V<sub>out</sub>. The
V<sub>out</sub> is connected to an input digital pin on the board.
<blockquote>For more information about the Water Sensor Brick, here is its <a href="https://www.mouser.com/ds/2/744/Seeed_101020018-1217524.pdf">user manual</a>.</blockquote><p></p>


<h2>Tutorial Contents</h2><hr>
<center><b>"Water Overflow Alarm with Online Updates using NodeMCU devkit v1.0"</b></center><p></p>
<b>Step 1:</b><center><b><em>"Downloading the ESP8266 Boards<br>and its Necessary Files"</em></b></center><hr>
<br>Open Arduino IDE. And create a new sketch.<p>
<em><b>Note:</b> Make sure that you have already downloaded and installed the boards and the necessary files to make the NodeMCU devkit v1.0. If you haven't install or download them, kindly click <a href="https://utopian.io/u/25578052">here</a>. And follow the first step of my tutorial there.</em>
<p>
After the installation of ESP8266, go to the <b>Tools</b> tab and change the board to <em>NodeMCU 1.0 (ESP-12E Module)</em><p><center>https://res.cloudinary.com/hpiynhbhq/image/upload/v1516177346/khn1srl1nqv4vlel6oav.png</center>
<b>Step 2:</b><center><b><em>"Programming  your Board"</em></b></center><hr>
<p>We have to start with programming our board, first. Thus, after we finished assembling the circuit on our next step, we can position the system on a remote place within our local area network, so we can remotely check the response of the web server to the water overflow.
<p>On your new sketch in Arduino IDE, input this program:<p>
<pre><code>
#include <<a href="">Arduino.h</a>>
#endif
#include <<a href="">ESP8266WiFi.h</a>>
#define watersensor D2
const char* ssid = "my WiFi SSID";
const char* password = "my WiFi Password";
WiFiServer server(301);
IPAddress ip(192, 168, 43, 67);
IPAddress gateway(192, 168, 43, 1);
IPAddress subnet(255, 255, 255, 0);
IPAddress dns(192, 168, 43, 1);
void setup() {
Serial.begin(115200);
delay(10);
// Connect to WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
//Static IP Setup Info Here...
WiFi.config(ip,dns,gateway,subnet);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
 Serial.println("WiFi connected");
// Start the server
server.begin();
Serial.println("Server started");
// Print the IP address
Serial.print("Use this URL to connect: ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("/");
}
void loop() 
{
// Check if a client has connected
 <WiFiClient client = server.available();
 if (!client) {
return;
}
// Wait until the client sends some data
Serial.println("new client");
while(!client.available()){
//    delay(1);
client.setNoDelay(1);
 }
// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// Set ledPin according to the request
// Return the response
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); //  do not forget this one
client.println("<!DOCTYPE HTML>");
client.println("<<a href="">html</a>>");
client.println("<<a href="">meta http-equiv='refresh' content='20'</a>>");
client.println("<<a href="">title</a>>WATER OVERFLOW ALARM WITH ONLINE UPDATES<<a href="">/title</a>>");
client.println("<<a href="">center</a>>");
client.println("<<a href="">style</a>>");
client.println("H1 {");
client.println("background-color: blue;");
client.println("}");
client.println("<<a href="">/style</a>>");
client.println("<<a href="">H1 style='color:white'</a>><<a href="">table</a>>");
client.println("<<a href="">tr</a>>");
client.println("<<a href="">td</a>><<a href="">div class='inner'</a>><<a href="">font size= '+3' color='white'</a>><<a href="">b</a>>");
client.println("WATER OVERFLOW ALARM WITH ONLINE UPDATES<<a href="">br</a>>");
client.println("USING NODEMCU 1.0 BOARD<<a href="">/font</a>><<a href="">/b</a>>");
client.println("<<a href="">/div</a>><<a href="">/td</a>>");
 client.println("<<a href="">td</a>><<a href="">div class='relative'</a>>");
if (digitalRead(watersensor)==LOW)
 {
client.println("<<a href="">button style='background-color:red;width:200px;height:100px'</a>><<a href="">font size= '+2' color='white'</a>><<a href="">b</a>>FULL LEVEL ALERT<<a href="">/b</a>><<a href="">/font</a>><<a href="">/button</a>><<a href="">br</a>>");
}
else
{
client.println("<<a href="">button style='background-color:gray;width:200px;height:100px'</a><<a href="">font size= '+2' color='white'</a>><<a href="">b</a>>NOT FULL<<a href="">/b</a>><<a href="">/font</a>><<a href="">/button</a>><<a href="">br</a>>");
}
client.println("<<a href="">/div</a>><<a href="">/td</a>>");
client.println("<<a href="">/tr</a>>");
client.println("<<a href="">/table</a>><<a href="">hr</a>><<a href="">/center</a>>");
client.println("<<a href="">body style = 'background-color:lightgray;'</a>>");
client.println("<<a href="">br</a>>");
client.println("<<a href="">style</a>>");
client.println("div.relative {");
client.println("position: relative;");
client.println("left:100px;");
client.println("}");
client.println("div.inner {");
client.println("position: relative;");
client.println("left:10px;");
client.println("}");
client.println("div.sample1 {");
client.println("position: relative;");
client.println("left:85px;");
client.println("}");
client.println("<<a href="">/style</a>><<a href="">hr</a>><<a href="">br</a>>");
client.println("<<a href="">b</a>>LEGENDS: <<a href="">/b</a>> <<a href="">button style='background-color:gray;width:100px;height:50px'</a>><<a href="">font color='white'</a><<a href="">b</a>>NOT FULL<<a href="">/b</a>><<a href="">/font</a>><<a href="">/button</a>>");
client.println("<<a href="">font color='black'</a>><<a href="">b</a>>WATER LEVEL IS BELOW SENSOR.<<a href="">/b</a>><<a href="">/font</a>><<a href="">p</a>>");
client.println("<<a href="">div class='sample1'</a>><<a href="">button style='background-color:red;width:100px;height:50px'</a>><<a href="">font color='white'</a>><<a href="">b</a>>FULL LEVEL ALERT<<a href="">/b</a>><<a href="">/font</a>><<a href="">/button</a>><<a href="">font color='black'</a>><<a href="">b</a>> WATER LEVEL IS ALREADY FULL.<<a href="">/b</a>><<a href="">/font</a>>");
client.println("<<a href="">/div</a>><<a href="">br</a>><<a href="">hr</a>>");
client.println("<<a href="">/body</a>>");
client.println("<<a href="">/html</a>>");
delay(1);
Serial.println("Client disconnected");
Serial.println("");
delay(500);
}</code></pre>    
<p>
<blockquote>The program of this system uses a digital pin D2 as an input pin based on the code
<code>pinMode(D2, INPUT)</code>. We have defined the pin D2 as equivalent to the variable <b>watersensor</b> by the code <code>#define watersensor D2</code>. The if condition, <code>if (digitalRead(watersensor)==LOW)</code>, implies that when water contacts with the water sensor, the sensor reading will be low. Thus, changing the online update to big red button with a text <b> FULL LEVEL ALERT</b>. But if the sensor does not sense water, the reading will be HIGH and thus, 
the display on the web page is a big gray button with a text <b> NOT FULL</b>.<br>The program simply let your NodeMCU devkit v1.0 board to connect to your local access point or your Wi-Fi hotspot <code>const char* ssid = "my wifi SSID"</code> and use the password <code>const char* password = "my wifi password"</code> to authenticate.<br>I have set the port, ip, default gateway, subnet mask and the dns addresses of the web server as static in the program. But we may have different configurations of IP addresses. It will depend on the network address of your local area network. This is to make sure that when your server shuts down, it will still have the same ip address when it is establish again. </blockquote><p>
Now, connect your NodeMCU devkit v1.0 to your computer using the USB cable (Type A to Mini B). <p><center>https://res.cloudinary.com/hpiynhbhq/image/upload/v1517415721/ca0yfpahxehz1fzlq0vu.jpg<br><sup><sub>Actual Photo</sub></sup></center>
<p>Go to the <b>device manager</b> then, identify its port number if it is your first time to use this board. Now, go the Arduino IDE and click <b>Tools</b> > <b>Port</b> and look for the port of your NodeMCU devkit v1.0.  <p>Input the program above properly. And click <b>Verify/Compile</b> when you are done to check for errors.<em>I have already compiled this program and it has no errors based on my screenshot.</em><p><center>https://res.cloudinary.com/hpiynhbhq/image/upload/v1517415914/wll7ewwq2lty5uigyxst.png<br><sup><sub>Actual Photo</sub></sup></center>
<p>If your program has no  errors after you compiled, click on <b>Upload</b>.<p>After you are done uploading your program to your board, you can test your web server by using your web browser. But make sure that your computer or device is connected on the same local access point or Wi-Fi hotspot.<p>To access your simple web server, just type the ip address you set like in my case, it is <code>192.168.43.67:301</code>. Your web page must look like this.<p>
<center>https://res.cloudinary.com/hpiynhbhq/image/upload/v1517416704/vc8lnr8pmgsioix5au2c.png<br><sup><sub>Actual Photo</sub></sup></center>
<p>
<b>Step 3:</b> <center><b><em>"Assembling your Circuit"</em></b></center><hr>
<p>Get your breadboard and other components and carefully assemble the circuit below. <br><b>IMPORTANT SAFETY REMINDER:</b> Make your wires from your water level sensor lengthy. It must be at least a feet away from your board and other electronic components because we will be partially soaking the water level sensor into the bowl of water to test our circuit after.
<br><center>https://res.cloudinary.com/hpiynhbhq/image/upload/v1517416877/ogihvdhwtbr1komp2knl.png<br><sup><sub>Made with Fritzing</sub></sup></center>
<p><b>Take note of the pin configurations of the NodeMCU devkit v1.0 and the Water Level Sensor</b><center>http://simba-os.readthedocs.io/en/latest/_images/nodemcu-pinout.png</center><br><a href="http://simba-os.readthedocs.io/en/latest/_images/nodemcu-pinout.png"><center>NodeMCU devkit v1.0 Board</center></a><p><center>https://res.cloudinary.com/hpiynhbhq/image/upload/v1517417376/ee8clyxobyiu8we9qz9b.png</center><br><a href="http://www.emartee.com/Images/websites/emartee.com/42285-1.jpg"><center>Water Level Sensor</center></a>
<b>Step 4:</b> <center><b><em>"Testing your System"</em></b></center><hr>
<p>
Get the bowl of water you had prepared. Hold the water level sensor by its edge and carefully soak, just a half of it, into the bowl of water. Make sure that you are not touching the copper strips, just the plastic. The big gray button with a text <b>NOT FULL</b> on the upper right corner of our web page must be replaced by a big red button with a text <b>FULL LEVEL ALERT</b> now. If your web page is unresponsive, try to examine if you had missed something on my steps or check the connections of your circuit and troubleshoot.
<p><center>https://media.giphy.com/media/3o7WIMKBsa1ORxeyac/giphy.gif<br><sup><sub>Made with <a href="https://media.giphy.com/media/3o7WIMKBsa1ORxeyac/giphy.gif">GIPHY</a></sub></sup></center><p>
Now, you have successfully made a Water Overflow Alarm System with Online Updates using NodeMCU devkit v1.0 Board.<p>


<h3> Curriculum</h3><hr> <br>
•	<a href="https://utopian.io/u/25578052">Auxiliary Wireless TV Power Remote Control using NodeMCU devkit v1.0</a><br>
•	<a href="https://utopian.io/u/26198599">Make Your Own Web Server using NodeMCU devkit v1.0</a><br>
•	<a href="https://utopian.io/u/26718005">External GPIO Pin State Monitoring using HTTP Client Request for NodeMCU Devkit v1.0 Boards</a><br>
•	<a href="https://utopian.io/u/27254457">Web-controlled Servomotor using NodeMCU devkit v1.0 board</a><br>
•	<a href="https://utopian.io/u/27813598">Intruder Alarm System with Automatic Online Updates using NodeMCU devkit v1.0</a><br>
•	<a href="https://utopian.io/u/28656117">Online Temperature Monitor using NodeMCU devkit v1.0</a>

<p></p>This tutorial has a potential application in automated flood detection alert systems and automated controls with water measurements. <br><br>
<blockquote>I hope you enjoy this tutorial. Till next time!</blockquote><p>
Your contributor, @japh

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@japh/water-overflow-alarm-with-online-updates-using-nodemcu-devkit-v1-0">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>