Anas Dalintakam
Published © GPL3+

Live Weather Reporting Website using Electric Imp

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

IntermediateFull instructions provided2 hours764
Live Weather Reporting Website using Electric Imp

Things used in this project

Hardware components

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

Software apps and online services

electric imp ide
electric imp

Story

Read more

Code

Device Code

C/C++
#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();

Agent Code

HTML (Ruby)
#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 class='container'> 
           <h1 class='text-center'><u><font color=blue>WIRING IT MY WAY-- WEATHER REPORT</font></u></h1> 
           <div class='current-status'> 
               <h2 class='temp-status'><font color=Darkcyan>Temperature:</font> <span></span>&deg;C</h2> 
               <h2 class='humid-status'><font color=Darkcyan>Humidity:</font><span></span> per cent</h2> 
               <h2 class='locale-status'><font color=Darkcyan>Location:</font><span></span></h2> 
           </div> 
           <br> 
           <div class='controls'> 
               <div class='update-button'> 
                   <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); 

Credits

Anas Dalintakam

Anas Dalintakam

12 projects • 29 followers
Electronics and communication engineer-IoT researcher-DIY electronics hobbyist-blogger-hackster-maker

Comments