minix/share/beaglebone/weather/index.html

   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>