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