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

From eLinux.org
Jump to: navigation, search
Line 45: Line 45:
# Plotly's javascript library can be referenced from it's [https://plot.ly/javascript/reference/ official documentation].
# Plotly's javascript library can be referenced from it's [https://plot.ly/javascript/reference/ official documentation].
# To test plots, one can use phant stream running on a local host or on a remote host. (latter is used in this project).
# To test plots, one can use phant stream running on a local host or on a remote host. (latter is used in this project).
# You can even [https://data.sparkfun.com/ create your phant stream online] for free!
== User Instructions ==
== User Instructions ==

Revision as of 02:17, 28 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. The data in graphical form on a web server through Plotly.

Our roal: We displayed the gathered data in a human consumable form. Three parameters temperature, pressure and humidity are plotted. The displayed plot is interactive i.e. users are able to zoom in, to see data of higher resolutions of time and select various time ranges. This could be accomplished by using Plotly's 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.

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.

However a developer can easily edit the his/her own version of the page by following steps:

  1. Clone project's github repo.
  2. Install plotly by typing "npm install plotly" in terminal [1]
  3. A developer need to have good grasp on jQuery for which w3schools has a great tutorial.
  4. Plotly's javascript library can be referenced from it's official documentation.
  5. To test plots, one can use phant stream running on a local host or on a remote host. (latter is used in this project).
  6. You can even create your phant stream online for free!

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.


  1. Displaying the collected pressure, temperature and humidity data on a plot through plotly.
  2. Interactive plot.
  3. Option to add annotations.
  4. Automatic and manual refreshing of page.
  5. Report a problem feature.
  6. View data in different time period ranges.
  7. Data displayed according to Indian Standard Time.

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

Talking about the project as a whole, several things can be done e.g. measuring more weather parameters including wind-speed and direction(not very relevant in a valley though). Moreover, daily sunshine, sunrise, sunset time on campus can also be measured. System can be made more robust. On display side, interface can be made faster e.g. by fetching initially just say 3 days weather data and then fetching 1 month's data in background. Annotations can be added only by privileged users (will require creating a sign-in option). Option to share plot with other people (say on social media). Instead of asking the user to send a email through his/her own mail client creating a form on the webpage only which can be used to send email(need PHP at back-end for that). One thing we unfortunately couldn't do was to install a public display of weather, so that can be done in future too. Humidity and other new weather parameters can be plotted through a more elegant way then what is currently being used.


The project is quite complete but there is always scope of improvement. Several things as mentioned above can still be done. We faced several challenges like not knowing jQuery, Phant etc. Moreover, knowing a bit of javascript already from the bonescript helped quite a lot. I hope to make this weather station a permanent system for IIT Mandi.

I decided to stick to data display (which does not involve too much related to Embedded Systems as is) because of two reasons: I knew it would involve fair amount of coding in which I like a lot and also because the whole project is only useful when users can use it! Therefore, displaying the gathered data was a crucial aspect which needed to be completed. Although, much work was already done by Prof. Yoder, it still turned out to be a great learning experience. We got to learn a lot of JQuery, AJAX. Also, learnt using a Phant server, creating new streams in it and using the streams. One main reason of taking this course was to learn IoT and I definitely found some IoT in this project! That is to say, I learnt how to send collected data to Internet and how to retrieve it in an easy and convenient way through Phant.


Since the server is down at the moment (27 Nov morning) I am unable to make the demo. I will make as soon as it is up again.

thumb‎ Embedded Linux Class by Mark A. Yoder