Live Weather Reporting Website Using Electric Imp

About the project

Here I will explain how to make your own weather reporting website using Electric Imp and its environment.

Project info

Difficulty: Moderate

Platforms: Electric Imp

Estimated time: 5 hours

License: GNU General Public License, version 3 or later (GPL3+)

Items used in this project

Hardware components

electric imp env sensor tail electric imp env sensor tail x 1
Electric Imp April Breakout Board Electric Imp April Breakout Board x 1
Electric Imp Electric Imp x 1

Software apps and online services

electric imp electric imp
electric imp ide electric imp ide

Story

Introduction

We are going to make our own live weather reporting website. All you need is some experience in Electric Imp platform and some knowledge in HTML coding. In my previous project I already explained how to get started with Electric Imp. After configuring your Electric Imp using mobile app we can start coding.

all connected

all connected

all connected

env tail,impee-april breakout,electric imp

env tail,impee-april breakout,electric imp

env tail,impee-april breakout,electric imp

As we discussed earlier, in the project there will be two codes for an Electric Imp project: a device code and an agent code.

Device Code
#require "Si702x.class.nut:1.0.0" 
// CONSTANTS 
const sleepTime = 120; 
// GLOBALS 
local tail = null; 
local led = null; 
// FUNCTIONS 
function getData() { 
   // Get the temperature using the Si7020 object’s read() method 
   tail.read(processData); 
} 
function processData(data) { 
   if ("err" in data) { 
       server.error(err); 
   } else { 
       // Create a Squirrel table to hold the data - handy if we 
       // later want to package up other data from other sensors 
       local sendData = {}; 
       // Add the temperature using Squirrel’s 'new key' operator 
       sendData.temp <- data.temperature; 
       sendData.humid <- data.humidity; 
       // Send the packaged data to the agent 
       agent.send("reading", sendData); 
       // Flash the LED to show we've taken a reading and log temp 
       flashLed(); 
   } 
   // All done, we can put the device to sleep for 'sleepTime' minutes, 
   imp.onidle(function() { 
       server.sleepfor(sleepTime); 
   }); 
} 
function flashLed() { 
   led.write(1); 
   imp.sleep(0.5); 
   led.write(0); 
} 
// START OF PROGRAM 
// Instance the Si702x and save a reference in tailSensor 
hardware.i2c89.configure(CLOCK_SPEED_400_KHZ); 
tail = Si702x(hardware.i2c89, 0x80); 
// Configure the LED (on pin 2) as digital out with 0 start state 
led = hardware.pin2; 
led.configure(DIGITAL_OUT, 0); 
// Take a temperature reading as soon as the device starts up 
// Note: when the device wakes from sleep (caused by line 32) 
// it runs its device code afresh - ie. it does a warm boot 
getData(); 

The tail is working on I2C protocol. The above code works with sleeping in between, so that we can save battery. For the agent code, you need to know some HTML. If you are an expert in HTML you can make this website even better than me. As I am not an expert in HTML, I just made a simple try on it.

Agent Code
#require "Rocky.class.nut:1.3.0" 
// GLOBALS 
local api = null; 
local savedData = null; 
// CONSTANTS 
const htmlString = @" 
<!DOCTYPE html> 
<html> 
   <head> 
       <title>Environment Data</title> 
       <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> 
       <meta name='viewport' content='width=device-width, initial-scale=1.0'> 
       <style> 
           .center { margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: auto; } 
       </style> 
   </head> 
   <body style=background-color:powderblue> 
       <div > 
           <h1 ><u><font color=blue>WIRING IT MY WAY-- WEATHER REPORT</font></u></h1> 
           <div > 
               <h2 ><font color=Darkcyan>Temperature:</font> <span></span>&deg;C</h2> 
               <h2 ><font color=Darkcyan>Humidity:</font><span></span> per cent</h2> 
               <h2 ><font color=Darkcyan>Location:</font><span></span></h2> 
           </div> 
           <br> 
           <div > 
               <div > 
                   <form id='name-form'> 
                       <label>Update Location:</label> <input id='location'></input> 
                       <button type='submit' id='location-button'>Set Location</button> 
                   </form> 
               </div> 
           </div> <!-- controls --> 
           <br> 
           <small>From: %s</small> 
       </div>  <!-- container --> 
       <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> 
       <script> 
           var agenturl = '%s'; 
           getState(updateReadout); 
           $('.update-button button').on('click', getStateInput); 
           function getStateInput(e){ 
               e.preventDefault(); 
               var place = document.getElementById('location').value; 
               setLocation(place); 
               $('#name-form').trigger('reset'); 
           } 
           function updateReadout(data) { 
               $('.temp-status span').text(data.temp); 
               $('.humid-status span').text(data.humid); 
               $('.locale-status span').text(data.locale); 
               setTimeout(function() { 
                   getState(updateReadout); 
               }, 120000); 
           } 
           function getState(callback) { 
               $.ajax({ 
                   url : agenturl + '/state', 
                   type: 'GET', 
                   success : function(response) { 
                       if (callback && ('temp' in response)) { 
                           callback(response); 
                       } 
                   } 
               }); 
           } 
           function setLocation(place) { 
               $.ajax({ 
                   url : agenturl + '/location', 
                   type: 'POST', 
                   data: JSON.stringify({ 'location' : place }), 
                   success : function(response) { 
                       if ('locale' in response) { 
                           $('.locale-status span').text(response.locale); 
                       } 
                   } 
               }); 
           } 
       </script> 
       <footer> 
 <p><font color=red>Posted by: Anas Dalintakam</font></p> 
 <p>Contact information: <a href='mailto:anasdalintakam@gmail.com'>anasdalintakam@gmail.com</a>.</p> 
 <p><a href=https://anasdalintakam.blogspot.com>Visit my  blog</a></p> 
 <p><a href=https://www.hackster.io/anasdalintakam>Visit my  hackster projects</a></p> 
 <p><a href=https://www.facebook.com/anas.dalintakam>Connect me on facebook</a></p> 
 <p><a href=https://twitter.com/dalintakam>follow me on twitter</a></p> 
 <p><a href=https://plus.google.com/110308692053862260875>follow me on google plus</a></p> 
 <p><a href=https://in.linkedin.com/in/anasdalintakam>connect me on linkdin</a></p> 
 <h2><marquee><font color=red>WIRING IT MY WAY</font></marquee></h2> 
        </footer> 
   </body> 
</html> 
"; 
// FUNCTIONS 
function postReading(reading) { 
   savedData.temp = format("%.2f", reading.temp); 
   savedData.humid = format("%.2f", reading.humid); 
   local result = server.save(savedData); 
   if (result != 0) server.error("Could not back up data"); 
} 
// START OF PROGRAM 
// Instantiate objects 
api = Rocky(); 
// Set up the app's API 
api.get("/", function(context) { 
   // Root request: just return standard web page HTML string 
   context.send(200, format(htmlString, http.agenturl(), http.agenturl())); 
}); 
api.get("/state", function(context) { 
   // Request for data from /state endpoint 
   context.send(200, { temp = savedData.temp, humid = savedData.humid, locale = savedData.locale }); 
}); 
api.post("/location", function(context) { 
   // Sensor location string submission at the /location endpoint 
   local data = http.jsondecode(context.req.rawbody); 
   if ("location" in data) { 
       if (data.location != "") { 
           savedData.locale = data.location; 
           context.send(200, { locale = savedData.locale }); 
           local result = server.save(savedData); 
           if (result != 0) server.error("Could not back up data"); 
           return; 
       } 
   } 
   context.send(200, "OK"); 
}); 
// Set up the backup data 
savedData = {}; 
savedData.temp <- "TBD"; 
savedData.humid <- "TBD"; 
savedData.locale <- "Unknown"; 
local backup = server.load(); 
if (backup.len() != 0) { 
   savedData = backup; 
} else { 
   local result = server.save(savedData); 
   if (result != 0) server.error("Could not back up data"); 
} 
// Register the function to handle data messages from the device 
device.on("reading", postReading); 

Here is the screenshot of my weather site:

website screenshot

website screenshot

website screenshot

You will get your site link after building it in the IDE. It will be shown as agent link. My weather website link: https://agent.electricimp.com/BbM3A-Q4XQcJ

Please try it for yourself and share your hacks. Happy hacking!

Code

Device Code

Agent Code

Credits

Photo of anas

anas

Electronics and communication engineer || DIY hobbyist || IoT enthusiast || Blogger||Startup||Medtech

   

Leave your feedback...