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