CS404 Data Display of Weather station
Embedded Linux Class by Mark A. Yoder
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
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.
However a developer can easily edit the his/her own version of the page by following steps:
- Clone project's github repo.
- Install plotly by typing "npm install plotly" in terminal 
- A developer need to have good grasp on jQuery for which w3schools has a great tutorial.
- 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 create your phant stream online for free!
The displayed data can be seen here. It may not be visible to people outside IIT Mandi's network.
The second line on the page as can be seen from the picture shows latest weather conditions.
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.
- Displaying the collected pressure, temperature and humidity data on a plot through plotly.
- Interactive plot.
- Option to add annotations.
- Automatic and manual refreshing of page.
- Report a problem feature.
- View data in different time period ranges.
- Data displayed according to Indian Standard Time.
Theory of Operation
- 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.
- The fetched data is processed. This involves converting time-stamps provided by Phant into js Date objects. Valid data is saved into a huge array object containing all data-points with time-stamps.
- The array object is made such that it is compatible with plotly's required format of axes datapoints.
- Required layout is described in an object named layout which is again in the required format of plotly.
- At the same time annotations are fetched from a different stream and saved into another variable after a little processing.
- 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.
- 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 newData to it.
- 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.
- 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 because content was located on external host.
- Many a times it is written above, "...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.
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.
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.
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.
The video demo of the project can be seen on youtube.
Embedded Linux Class by Mark A. Yoder