Controlling the water pump in the agricultural field is a common problem. But we can overcome this problem using IoT tools. But how? Is it expensive? don’t worry we have the solution. which is the game-changing invention considering the past 10 years? my answer is ARDUINO. In 2006, the Arduino platform broke too much complexity in the electronics prototyping platform. But in 2014 another little guy changed the game again he is ESP 8266. That makes normal humans like me to do IoT stuff. I think that is a big game-changer.
But developing a web app and other end-user interfaces remains like a black box in front of IoT enthusiasts. At the end of 2015 google found a solution for this problem that is GOOGLE Firebase. Today we can use these tools and make powerful IoT tools, google Firebase is ready to deploy a cloud platform that gives powerful back-end services. ESP 32 is widely used in industrial automation and IoT.
Content
- Google Firebase
- firebase hosting
- firebase real-time database
- ESP 32
- IOXhop_FirebaseESP32 library
- architecture
- ESP circuit
- ESP code
- web app development
- integration of web app with Firebase
- MIT app inventor
- conversion of web app into android app using MIT app inventor
- Video
Google Firebase
Google Firebase is a ready to deploy back end service developed by google the first version of Firebase was released in 2012. and Firebase give API (Application Programmable Interface ) for Authentications, Web-app hosting, real-time database, cloud database, analytics, and back-end service as cloud functions new version of Google Firebase also integrated with ML Functions
Firebase Hosting
for the web, hosting Firebase hosting is a powerful and efficient platform for hosting IoT web apps that gives SLS certificate. So there is no other verification is needed. To host the web app we need to initialize Firebase in our PC
Select the hosting using space bar then Firebase shows our project directory.
Select your project and make sure that you have a public folder in your project folder. After that push your public folder into the Firebase using this command.
firebase deploy
If the deploying is completed Firebase give a URL for the web app we can run it by a common browser
Firebase Real-Time Database
Google Firebase give two different types of database. The first one is the real-time database and the second one is the cloud storage database. In this project, we use the real-time database because we need Real-time communication between the software and hardware. Real-time database contain nodes, that are the web socket or data holding position in Firebase. The type of data handled in Firebase is json so we can use any type of data with real-time database
We can read or write data from Firebase using JavaScript , typescript , c++ also in Python
ESP 32
The ESP 32 is a 32-bit dual-core micro-controller widely used in IoT and Automation industries. This module has an inbuilt WI-FI module, temperature sensor, and touch sensor. And ESP 32 can be programmed with Arduino IDE. In our project this microcontroller is the brain. That connects the Google Firebase database and the hardware. Also receive the feedback from the user to perform the actions
ESP has a total of 39 pins and 34 GPIO (General Purpose Input Output) pin. And no analogue output but has 16 PWM (Pulse Width Modulation) pins.
IOXhop_FirebaseESP32 library
IOXhop_FirebaseESP32 library is a common library used in the Arduino IDE. This library is used for connecting the ESP 32 WI-FI module to Firebase back-end https://github.com/ioxhop/IOXhop_FirebaseESP32
Architecture
This project basically contains a hardware part and a software part. The hardware part controls the motor and the software part gives the instructions to the hardware.
If the user clicks the ON button that pushes a data (1) in the Firebase, the ESP is continually read the data from the database. If the data is 1 ESP is going to switch on the motor otherwise the user clicks the off button that pushes 0 to the database so ESP read the value and switch off the motor.
ESP circuit
Components
- ESP 32 WI-FI module
- 12V 32A relay
- 1815 transistor
- 7805 regulator ic
- 7812 regulator ic
- 10k resistor
- 2200uf capacitor
- 100uf capacitor
- IN4007 diode
We are using an AC supply. So using a rectifier we can convert 230 V AC to 12 V DC. Using 7805 and 7812 we can convert 12 to 5 volt for powering ESP and powering our relay. We use 1815 transistors for switching the relay and 10k resistor for proper biasing. We use 4 capacitors for filtering and regulations. And 32 A relay for switching the motor (max 1.5 HP).
ESP code
The ESP code for our project .
//this program is developed by Abhijith S Pillai
//
//
//
#include <WiFi.h>
#include <IOXhop_FirebaseESP32.h>
#include <ArduinoJson.h>
//
#define FIREBASE_HOST "https://turbo-motor-f9781.firebaseio.com/"
#define FIREBASE_AUTH "databse_host_key"
const char* ssid = "your_wifi_name";
const char* password ="your_password";
#define stsTocken 32 //from turbo app--to motor
int val1;
#define msgTocken 13 //from hardware ---to app
int val2;
#define ovCrTocken 27 //from hardware ---to app
int val3;
#define crStsTocken 35 //from hardware ---to app
int val4;
WiFiServer server(80);
void setup()
{
Serial.begin(115200);
pinMode(stsTocken,OUTPUT);
pinMode(msgTocken,INPUT);
pinMode(ovCrTocken,INPUT);
pinMode(crStsTocken,INPUT);
pinMode(LED_BUILTIN, OUTPUT);
digitalWrite(stsTocken,LOW);
digitalWrite(msgTocken,LOW);
digitalWrite(ovCrTocken,HIGH);
digitalWrite(crStsTocken,LOW);
// We start by connecting to a WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
//digitalWrite(LED_BUILTIN, HIGH);
}
Serial.println("");
Serial.println("WiFi connected.");
digitalWrite(LED_BUILTIN, HIGH);
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
Serial.println("ESP32 Touch Test");
Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);
}
void loop(){
//
// motor on of event handler
//
//
val1=Firebase.getInt("sCominication/stsFlag"); //Reading the value of the varialble Status from the firebase
if(val1==1) // If, the Status is 1, turn on the Relay1
{
digitalWrite(stsTocken,HIGH);
Serial.println("motor is on");
//digitalWrite(LED_BUILTIN, HIGH);
}
else if(val1==0) // If, the Status is 0, turn Off the Relay1
{
digitalWrite(stsTocken,LOW);
Serial.println("motor OFF");
// digitalWrite(LED_BUILTIN, LOW);
}
//
//
//feed back section
val2 =digitalRead(msgTocken);
if(val2==HIGH)
{
Firebase.setInt("hCominication/returnFlag",0);
Serial.println("motor is off now");
}else if(val2==LOW)
{
Firebase.setInt("hCominication/returnFlag",1);
Serial.println("motor is on now");
}
//curret status flag
val4 =digitalRead(crStsTocken);
//
//
if(val4==HIGH)
{
Firebase.setInt("crtSts/crtStsFlag",1);
}
else if(val4==LOW)
{
Firebase.setInt("crtSts/crtStsFlag",0);
}
//
// over current protection
val3=digitalRead(ovCrTocken);
// //
// //
if(val3==LOW)
{
Firebase.setInt("sCominication/stsFlag",0);
Firebase.setInt("overCrt/overFlag",1);
digitalWrite(stsTocken,LOW);
Serial.println("overcurrent mode");
}
// /
Web app development
We can develop a web app using any CMS system or using full-stack development. In this project, we use the full-stack development method. In the full-stack method, we need to know javascript, HTML 5, and CSS 3. Javascript is a famous scripting language or client-side language. That gives the action to the web apps. HTML that is Hypertext Markup Language is used to build the content in the web app. We use HTML 5 also CSS stands for Cascading Style Sheet. That used for giving the structure to the web app.
HTML code
<pre class="wp-block-syntaxhighlighter-code"><!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="" type="image/gif" sizes="20x20" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Atom Turbo Motor</title>
</head>
<body>
<div class="container">
<!---atm-trbo-mtr-->
<div class="atom-welcome-msg-container">
<div class="container" id="atomWelcomeMsg">
<div class="row">
<div class="atom-welcome-msg">
<!--<h2 id="test"></h2>-for-update-only-->
<h5 id="closeBtn3">X</h5>
<h6 id="welcomeMsg">connecting to system...</h6>
</div>
</div>
</div>
</div>
<!---atm-trbo-mtr-->
<div class="row">
<div class="col-md-6">
<div id="contextBox" class="content-box">
<div id="btn1" class="btn-1">
<h1 id="userFlag">OFF</h1>
<h3 id="stsFlag">Motor is off now</h3>
</div>
</div>
</div>
</div>
<div id="footer" class="footer">
<hr />
<h5>developed by Atom Developers</h5>
</div>
</div>
</body>
<a href="https://code.jquery.com/jquery-3.3.1.slim.min.js">https://code.jquery.com/jquery-3.3.1.slim.min.js</a>
<a href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js</a>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<a href="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js">https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js</a>
<a href="https://www.gstatic.com/firebasejs/7.13.1/firebase-database.js">https://www.gstatic.com/firebasejs/7.13.1/firebase-database.js</a>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<a href="https://www.gstatic.com/firebasejs/7.15.0/firebase-analytics.js">https://www.gstatic.com/firebasejs/7.15.0/firebase-analytics.js</a>
<a href="http://index.js">http://index.js</a>
</html></pre>
This html files make basic blocks and divisions (div).
CSS code
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.content-box {
position: fixed;
width: 400px;
height: 400px;
top: 20%;
left: 8.5%;
}
.btn-1 {
position: relative;
display: none;
height: 300px;
width: 300px;
border-radius: 1000px;
background-color: white;
border: 12px solid;
border-color: #e1d2cf;
}
.btn-1 h1 {
position: relative;
float: left;
text-align: center;
color: #dcbdb7;
margin-left: 84px;
margin-top: 80px;
font-size: 55px;
}
.btn-1 h3 {
position: relative;
float: left;
text-align: center;
color: #dcbdb7;
margin-left: 56px;
margin-top: 9px;
font-size: 25px;
}
.footer {
position: fixed;
bottom: 0%;
}
.footer hr {
position: relative;
width: 325px;
margin-left: 0px;
}
.footer h5 {
position: relative;
text-align: center;
font-size: 12px;
margin-bottom: 25px;
margin-left: 10px;
color: #dcbdb7;
}
/*atom current sensing msg msg*/
.atom-welcome-msg-container {
display: block;
position: fixed;
/*overflow: auto;*/
top: 44%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid;
border-radius: 10px;
z-index: 300;
background-color: #eeddda;
border-color: #eeddda;
width: 300px;
height: 200px;
}
.atom-welcome-msg-container h2 {
color: white;
font-size: 28px;
margin-top: 30px;
margin-left: 30px;
}
.atom-welcome-msg-container h5 {
display: none;
color: white;
position: fixed;
left: 92%;
top: 4%;
cursor: pointer;
}
.atom-welcome-msg-container h5:hover {
color: #92655b;
}
.atom-welcome-msg-container h6 {
position: relative;
color: white;
text-align: center;
margin-left: 52px;
margin-top: 88px;
font-size: 20px;
}
CSS make the exact web structure and give correct dimensions to all HTML elements. Also CSS play a vital role in responsive designing.
Java Script code
var firebaseConfig = {
apiKey: "AIzaSyAiggElCEuy17NklV0GyRmQa6KFVXWmYQo",
authDomain: "turbo-motor-f9781.firebaseapp.com",
databaseURL: "https://turbo-motor-f9781.firebaseio.com",
projectId: "turbo-motor-f9781",
storageBucket: "turbo-motor-f9781.appspot.com",
messagingSenderId: "1089808311018",
appId: "1:1089808311018:web:902c5cf9c18dab6136ad93",
measurementId: "G-SEF4VMCG8K",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
let database = firebase.database();
//
//
let flag = false;
document.getElementById("btn1").addEventListener("click", function() {
//console.log("worked");
//
if (flag) {
document.querySelector("#userFlag").textContent = "OFF";
document.querySelector(".btn-1 h1").style.marginLeft = "84px";
document.querySelector(".btn-1").style.borderColor = "#E1D2CF";
document.querySelector(".btn-1 h1").style.color = "#DCBDB7";
flag = false;
//document.querySelector("#stsFlag").textContent = "Motor is off now";
//document.querySelector(".btn-1 h3").style.color = "#DCBDB7";
//sen to the sts flag is 0 to data base
firebase.database().ref("sCominication").set({
stsFlag: 0,
});
//
//
if (overCurrentData == 1) {
firebase.database().ref("overCrt").set({
overFlag: 0,
});
// firebase.database().ref("hCominication").set({
// returnFlag: 0,
// });
}
} else {
document.querySelector("#userFlag").textContent = "ON";
document.querySelector(".btn-1 h1").style.marginLeft = "95px";
document.querySelector(".btn-1").style.borderColor = "#362D2B";
document.querySelector(".btn-1 h1").style.color = "#261C19";
flag = true;
//sen to the sts flag is 1 to data base
firebase.database().ref("sCominication").set({
stsFlag: 1,
});
}
});
//over current protection mode
let overCurrentData;
firebase
.database()
.ref("overCrt")
.on("value", function(snapshot) {
overCurrentData = snapshot.val().overFlag;
//console.log(typeof data);
//
if (overCurrentData === 1) {
document.querySelector("#userFlag").textContent = "OFF";
document.querySelector(".btn-1 h1").style.marginLeft = "84px";
document.querySelector(".btn-1").style.borderColor = "#ab1111";
document.querySelector(".btn-1 h1").style.color = "#730202";
document.querySelector("#stsFlag").textContent =
"over current protection mode on";
document.querySelector(".btn-1 h3").style.marginLeft = "33px";
document.querySelector(".btn-1 h3").style.marginTop = "12px";
document.querySelector(".btn-1 h3").style.fontSize = "15px";
document.querySelector(".btn-1 h3").style.color = "#730202";
} else if (overCurrentData === 0) {
// document.querySelector("#stsFlag").textContent = "Motor is off now";
// document.querySelector(".btn-1 h3").style.color = "#DCBDB7";
// document.querySelector(".btn-1 h3").style.fontSize = "25px";
// document.querySelector(".btn-1 h3").style.marginLeft = "56px";
let data;
firebase
.database()
.ref("hCominication")
.on("value", function(snapshot) {
data = snapshot.val().returnFlag;
//console.log(typeof data);
//
if (data === 1) {
document.querySelector("#stsFlag").textContent = "Motor is on now";
document.querySelector(".btn-1 h3").style.marginLeft = "49px";
document.querySelector(".btn-1 h3").style.color = "#261C19";
document.querySelector(".btn-1 h3").style.fontSize = "25px";
} else {
document.querySelector("#stsFlag").textContent = "Motor is off now";
document.querySelector(".btn-1 h3").style.color = "#DCBDB7";
document.querySelector(".btn-1 h3").style.fontSize = "25px";
document.querySelector(".btn-1 h3").style.marginLeft = "56px";
document.querySelector(".btn-1 h3").style.marginTop = "9px";
}
});
}
});
//atom welcome msg
//
var blk3 = document.querySelector(".atom-welcome-msg-container");
//blk3.style.display = "none";
//sts checking
let onOfData;
firebase
.database()
.ref("crtSts")
.on("value", function(snapshot) {
onOfData = snapshot.val().crtStsFlag;
//console.log(typeof data);
//
if (onOfData === 1) {
blk3.style.display = "none";
document.querySelector(".btn-1").style.display = "block";
} else {
document.querySelector("#welcomeMsg").textContent =
"oops ! no power is avilable";
document.querySelector(
".atom-welcome-msg-container h6"
).style.marginLeft = "35px";
document.querySelector(".btn-1").style.display = "none";
blk3.style.display = "block";
}
});
javas file is the core file of our web app that performs all the sensory action like the integration of firebase. Reading the data from firebase , writhing data to firebase and also perform toggling of buttons in the web app
integration of firebase to JavaScript
var firebaseConfig = {
apiKey: "AIzaSyAiggElCEuy17NklV0GyRmQa6KFVXWmYQo",
authDomain: "turbo-motor-f9781.firebaseapp.com",
databaseURL: "https://turbo-motor-f9781.firebaseio.com",
projectId: "turbo-motor-f9781",
storageBucket: "turbo-motor-f9781.appspot.com",
messagingSenderId: "1089808311018",
appId: "1:1089808311018:web:902c5cf9c18dab6136ad93",
measurementId: "G-SEF4VMCG8K",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
let database = firebase.database();
firebase APIs
<pre class="wp-block-syntaxhighlighter-code">
<a href="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js">https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js</a>
<a href="https://www.gstatic.com/firebasejs/7.13.1/firebase-database.js">https://www.gstatic.com/firebasejs/7.13.1/firebase-database.js</a>
<a href="https://www.gstatic.com/firebasejs/7.15.0/firebase-analytics.js">https://www.gstatic.com/firebasejs/7.15.0/firebase-analytics.js</a></pre>
MIT app inventor
MIT app inventor is a very good application to use make android apps without knowing the android studio. It is a open source platform to make good and efficient android apps. It not using programming but use logic block programing approach.
Conversion of Web application into an Android application using MIT app inventor
To convert a web app to android app, we need to start a new project in MIT app inventor. And add a new screen:
Select a web view object from the user-interphase tab. Drag to the mobile emulator and paste the URL of our firebase web app to the home text area
and convert to a android packages(APK). And download the APK and install to any android device. You can switch on the motor from anywhere in the glob.
Video
Testing video of our project
