Hardware components | ||||||
 |
| × | 1 | |||
 |
| × | 1 | |||
 |
| × | 1 | |||
| × | 1 | ||||
 |
| × | 1 | |||
 |
| × | 1 | |||
_ztBMuBhMHo.jpg?auto=compress%2Cformat&w=48&h=48&fit=fill&bg=ffffff) |
| × | 1 | |||
Software apps and online services | ||||||
 |
| |||||
 |
| |||||
| ||||||
In this project we will be building a personal weather station for home use. We will be using an ESP8266 based board, i.e. NodeMCU. We will be monitoring light, temperature and humidity. For this, we will be using an LDR and a DHT11 sensor.
This project consists of three parts:
1. Collecting data from the sensors.
2. Sending the data to an online database (Google Firebase in our case).
3. Displaying the data stored in the database on a web app.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. Collecting DataWe will be using a light detecting resistor (LDR) to get values of atmospheric light. Connect the LDR to A0 pin of the NodeMCU as shown in the schematic.
We will be using a light detecting resistor (LDR) to get values of atmospheric light. Connect the LDR to A0 pin of the NodeMCU as shown in the Schematic.
The DHT11 sensor is used to measure the humidity and temperature. We use the DHT.h library here. Make the following connections:
Vcc ==> 3v
Gnd ==> Gnd
Data ==> D3
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2. Sending Data to FirebaseTo upload data to firebase we need to connect to the internet first and then access firebase. For this we need to use the following two libraries:
1. ESP8266WiFi.h
2. FirebaseArduino.h
Once connected to the wifi network as per the code we can now use the functions of FirebaseArduino.h library to upload data.
The sensor data is stored in light, temp and hum variables of float type.
So we will use setFloat() function to upload the value to the real time database of firebase. See the code to understand it better.
Firebase.setFloat("light", light);
// handle error
if (Firebase.failed()) {
Serial.print("setting /light failed:");
Serial.println(Firebase.error());
return;
}
Once our data is uploaded we can display it on a web app in real time and access it from anywhere in the world.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3. Displaying Data on the Web AppClick here to see my web app.
This is were you can get really creative. If you are familiar to HTML and CSS then you can make user own UI. I used Bootstrap to create mine. For those who are new to web here is the code for a very basic UI (I'm not providing my code here as that would be spoon feeding and I want you guys to build your own UI. Trust me it is fun!)
Step 1:
Paste this code in notepad and save it as index.html in a folder lets say web at any desired location.
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.5/firebase-database.js"></script>
</head>
<body style="background-color: #4d4d4d;">
<ul>
<li><h1>LIGHT</h1>
<pre id="light" style="font-size:24px;"></pre></li>
<li><h1>TEMPERATURE</h1>
<pre id="temp" style="font-size:24px;"></pre></li>
<li><h1>HUMIDITY</h1>
<pre id="hum" style="font-size:24px;"></pre></li>
</ul>
<script src="app.js"></script>
</body>
</html>
Step 2:
Create a database in firebase. Open Firebase website. Login with your Gmail account. Create a realtime database by clicking on database. Then follow the direction in the images to get you secret key.
Step 3:
Copy and paste the below code in notepad and save it as app.js in the same folder in which you saved index.html file.
(function() {
// Initialize Firebase
var config = {
firebase.initializeApp(config);
//Get element
const prelight= document.getElementById('light');
//Create refences
const dbReflight= firebase.database().ref().child('light');
// sync logs cahnges
dbReflight.on('value', snap => {
prelight.innerText=JSON.stringify(snap.val(),null,3);
});
const pretemp= document.getElementById('temp');
//Create refences
const dbReftemp= firebase.database().ref().child('temperature');
// sync logs cahnges
dbReftemp.on('value', snap => {
pretemp.innerText=JSON.stringify(snap.val(),null,3)+"° C";
});
const prehum= document.getElementById('hum');
//Create refences
const dbRefhum= firebase.database().ref().child('moisture');
// sync logs cahnges
dbRefhum.on('value', snap => {
prehum.innerText=JSON.stringify(snap.val(),null,3)+" %";
});
}());
You have to change the values inside var config as per your database.
Once this is done you are all set to go.
Upload the code on to your NodeMCU, make connections and power up the board. It will start uploading data to Firebase.
--------------------------------------------------------------------------------------
NOTE: DON'T FORGET TO CHANGE YOUR WIFI SSID, WIFI PASSWORD, SECRET CODE, AND HOST NAME IN THE.INO FILE.
#define FIREBASE_HOST "YOUR DATABASE LINK"
#define FIREBASE_AUTH "SECRET CODE"
#define WIFI_SSID "YOUR SSID"
#define WIFI_PASSWORD "YOUR PASSWORD"
--------------------------------------------------------------------------------------
Once this is done just open the index.html file to see your data in real time.
I hope you guys understood this project. Thank you for reading this tutorial. If you got any doubt or queries then do drop a comment in the comment section.
Best of luck!
Comments