1<!doctype html>
2<html lang="en">
3<head>
4	<meta charset="utf-8" />
5
6	<title>Weather Station - Powered by Minix and BeagleBone</title>
7
8	<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
9
10	<script type="text/javascript" src="jquery.js"></script>
11	<script type="text/javascript" src="processing.js"></script>
12	<script type="text/javascript" src="spin.js"></script>
13
14	<script type="text/javascript">
15
16		// Refresh weather data every 3 seconds.
17		var weather_fetch_interval = 3 * 1000;
18
19		// Location of the weather data.
20		var weather_json_url = 'weather.json';
21
22		// Loading animation while the initial fetch is being performed.
23		var spinner = new Spinner().spin();
24
25		// Callback for fetching weather reports.
26		function weather_cb_fetch() {
27
28			var now;
29			var url;
30
31			// Make the URL of every request unique to help ensure
32			// that the browser doesn't cache the JSON data.
33			now = new Date();
34			url = weather_json_url + '?timestamp=' + now.getTime();
35
36			$.getJSON(url, weather_cb_process);
37		}
38
39		// Callback for processing weather reports.
40		function weather_cb_process(data) {
41
42			set_lux(data.illuminance);
43			set_temp(data.temperature);
44			set_humidity(data.humidity);
45			set_pressure(data.pressure/100); // Pa to hPa
46
47			// hide the loading message once everything is loaded
48			$("#loading").fadeOut("slow", function(){
49								spinner.stop();
50							});
51
52			// weather station is initially hidden
53			// fade in after first paint.
54			$("#weatherstation").fadeIn("slow");
55
56			// Queue the next server request.
57			setTimeout(weather_cb_fetch, weather_fetch_interval);
58		}
59
60		function weather_init() {
61
62			// Start the loading animation spinning.
63			$("#loading").append(spinner.el);
64
65			// Fetch the initial weather report.
66			weather_cb_fetch();
67		}
68
69		// Start getting weather reports.
70		$(weather_init);
71
72	</script>
73
74	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
75</head>
76<body>
77
78	<!--
79		Page loading animation (spin.js).
80		Hidden after weather canvases are loaded.
81	-->
82	<div id="loading"> </div>
83
84	<!--
85		Thermometer, gauges, and light level dot.
86		Initially hidden while loading/painting.
87	-->
88	<div id="weatherstation">
89		<canvas id="barometerCanvas"></canvas>
90		<canvas id="thermometerCanvas"></canvas>
91		<canvas id="lightCanvas"></canvas>
92	</div>
93
94	<script type="text/javascript" src="weatherstation.js"></script>
95
96</body>
97</html>
98