98 lines
2.4 KiB
HTML
98 lines
2.4 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
|
||
|
|
<title>Weather Station - Powered by Minix and BeagleBone</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="jquery.js"></script>
|
||
|
|
<script type="text/javascript" src="processing.js"></script>
|
||
|
|
<script type="text/javascript" src="spin.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
// Refresh weather data every 3 seconds.
|
||
|
|
var weather_fetch_interval = 3 * 1000;
|
||
|
|
|
||
|
|
// Location of the weather data.
|
||
|
|
var weather_json_url = 'weather.json';
|
||
|
|
|
||
|
|
// Loading animation while the initial fetch is being performed.
|
||
|
|
var spinner = new Spinner().spin();
|
||
|
|
|
||
|
|
// Callback for fetching weather reports.
|
||
|
|
function weather_cb_fetch() {
|
||
|
|
|
||
|
|
var now;
|
||
|
|
var url;
|
||
|
|
|
||
|
|
// Make the URL of every request unique to help ensure
|
||
|
|
// that the browser doesn't cache the JSON data.
|
||
|
|
now = new Date();
|
||
|
|
url = weather_json_url + '?timestamp=' + now.getTime();
|
||
|
|
|
||
|
|
$.getJSON(url, weather_cb_process);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Callback for processing weather reports.
|
||
|
|
function weather_cb_process(data) {
|
||
|
|
|
||
|
|
set_lux(data.illuminance);
|
||
|
|
set_temp(data.temperature);
|
||
|
|
set_humidity(data.humidity);
|
||
|
|
set_pressure(data.pressure/100); // Pa to hPa
|
||
|
|
|
||
|
|
// hide the loading message once everything is loaded
|
||
|
|
$("#loading").fadeOut("slow", function(){
|
||
|
|
spinner.stop();
|
||
|
|
});
|
||
|
|
|
||
|
|
// weather station is initially hidden
|
||
|
|
// fade in after first paint.
|
||
|
|
$("#weatherstation").fadeIn("slow");
|
||
|
|
|
||
|
|
// Queue the next server request.
|
||
|
|
setTimeout(weather_cb_fetch, weather_fetch_interval);
|
||
|
|
}
|
||
|
|
|
||
|
|
function weather_init() {
|
||
|
|
|
||
|
|
// Start the loading animation spinning.
|
||
|
|
$("#loading").append(spinner.el);
|
||
|
|
|
||
|
|
// Fetch the initial weather report.
|
||
|
|
weather_cb_fetch();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Start getting weather reports.
|
||
|
|
$(weather_init);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Page loading animation (spin.js).
|
||
|
|
Hidden after weather canvases are loaded.
|
||
|
|
-->
|
||
|
|
<div id="loading"> </div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Thermometer, gauges, and light level dot.
|
||
|
|
Initially hidden while loading/painting.
|
||
|
|
-->
|
||
|
|
<div id="weatherstation">
|
||
|
|
<canvas id="barometerCanvas"></canvas>
|
||
|
|
<canvas id="thermometerCanvas"></canvas>
|
||
|
|
<canvas id="lightCanvas"></canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="weatherstation.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|