Difference between revisions of "CS404 Data Display of Weather station"

From eLinux.org
Jump to: navigation, search
Line 42: Line 42:
== User Instructions ==
== User Instructions ==
The displayed can be seen [http://students.iitmandi.ac.in/~gopal_krishan/dataDisplayWeather/OfficeWeather.html here]. It may not be visible to people outside IIT Mandi's network.
The displayed data can be seen [http://students.iitmandi.ac.in/~gopal_krishan/dataDisplayWeather/OfficeWeather.html here]. It may not be visible to people outside IIT Mandi's network.
Latest weather conditions can be seen on second line in the image below:<br />
Latest weather conditions can be seen on second line in the image below:<br />

Revision as of 14:39, 26 November 2015

thumb‎ Embedded Linux Class by Mark A. Yoder

Team Members:
1. Gopal Krishan Aggarwal
2. Siddhartha G
3. Sri Venkat

Grading Template

I'm using the following template to grade. Each slot is 10 points. 0 = Missing, 5=OK, 10=Wow!

00 Executive Summary
00 Installation Instructions 
00 User Instructions
00 Highlights
00 Theory of Operation
00 Work Breakdown
00 Future Work
00 Conclusions
00 Demo
00 Not Late
Comments: I'm looking forward to seeing this.

Score:  00/100

Executive Summary

The goal of the parent project - Local Weather Station through Remote Sensor Network, under which this projects comes, was to build and deploy a remote data network to gather environmental data from around campus and display it on a standard web interface. It is based on a model using a central server with sensors (temperature, humidity, pressure, etc.) attached to remote clients. The clients use wifi and/or Ethernet to report data back to the server. A wide range of remote clients were considered (BeagleBone, Arduino, ESP8266, etc.) making it easy to interface other types of clients in the future. Phant is used to implement the server. It presents the data in graphical form on a web server through Plotly.

Our roal: We displayed the gathered data in a human consumable form. The displayed data is interactive i.e. users are able to zoom in, to see data of higher resolutions of time and interact in many more ways - thanks to Plotly javascript library. Extensive use of jQuery has been done to add additional features to webpage, like automatic refreshing to fetch only latest datapoints, option to toggle annotations, add new annotations, view last 24 hours, last week and last months data. Option to report a problem becomes activated if latest data is not coming. Three parameters temperature, pressure and humidity are plotted.

Installation Instructions

User does not need to install anything to view the plots and related stuff. A good web-browser with javascript enabled is all that is required.

User Instructions

The displayed data can be seen here. It may not be visible to people outside IIT Mandi's network.

Latest weather conditions can be seen on second line in the image below:
{Insert Image here}
Initially past 1 month's data is fetched which take considerable time to load(about 20 seconds normally). This is plotted as shown in the graph above. User can on the first page see Temperature and Pressure Plots. Graph is properly labelled and hovering over data points brings up the corresponding data points values in the form of annotations. User can click on right side on Pressure or Temperature which toggles the corresponding plot's visibility. Double clicking zooms out of the graph. Data is displayed according to local time standard. By clicking on the buttons below user can toggle between last month, last week or last 24 hours' plot.
Annotations can be toggled by clicking on the toggle button.
User can add annotations to the plot which will be saved on the server and will be displayed to anyone who later opens the website.
The plot is automatically refreshed every 1 minute but user can do this manually too by clicking the refresh button.
User can see Humidity and Temperature plot by clicking on corresponding link which opens up a different webpage.


In a vast campus like ours, seldom are the temperature readings consistent at different places. Hence, it is our objective to gather weather inputs at several points in the campus and then deduce the mean of these readings to get a generalised value. In addition to this, we are interested in generating the statistical figures such as standard deviations and graphs for the weather changes, in the campus.

Theory of Operation

  1. Jquery is used to simplify the javascript usage.
  2. Data is fetched from a phant server. An Ajax request is made to Phant asking for last 1 month's data. The required url for ajax request is created from server's ip address, its open port, public key of the required stream and some other optional arguments.
  3. The fetched data is processed. This involves converting timestamps provided by Phant into js Date objects. Valid data is saved into a huge array object containing all data-points with time-stamps.
  4. The array object used to save data into is made such that it is compatible with plotly's required format of axes datapoints.
  5. Required layout is described in an object named layout which is again in the required format of plotly.
  6. At the same time annotations are fetched from a different stream and saved into another variable after a little processing.
  7. Toggle annotations: Since annotations are saved in a variable named annotations, toggling annotations simply involve deleting or adding the annotations from or to layout object and then again plotting the plot.
  8. Weather Ranges: A new object named newData is created which contains data from only those time stamps which fall in required interval. Then the plot is plotted again by passing this new data to it.
  9. Refresh Plot: Each time refresh button is clicked only latest datapoint is fetched from the server using suitable AJAX request and is appended to existing datapoints using unshift function. The plot is then plotted again with this new data. This button is automatically triggered after every 60 seconds for automatic updation.
  10. Add Annotations: The form HTML/CSS was designed using online tools to save time. The form is made functional by submitting the data to the server through JQuery's html(<url>) function which loads external url's content into selected DOM element. A simple AJAX request was not possible. Since, content was located on external host.
  11. Many a times it is written that "...then the plot is plotted again." This is accomplished by replacing the div element which contains existing plot to empty div and the calling the plotly function once again.

Work Breakdown

We all studied JQuery and tried to understand existing work done by Prof. Yoder. Because of exams and intern Sidhartha and Venkat could not contribute much. The features mentioned were implemented by Gopal Krishan Aggarwal.

Future Work

We would try and install a suitable set-up for measuring the wind speed in the campus. The setup could be located on the rooftop of any tall building.


As of now, we have done the groundwork to deal with the sensors and wifi module handed over to us. In the near future, we are planning to install sensor apparatus in a few whereabouts in the campus.

thumb‎ Embedded Linux Class by Mark A. Yoder