minix/share/beaglebone/weather/weatherstation.js

   1 // Main javascript for the BeagleBone Weather Cape demo.
   2 //
   3 // This code handles drawing the thermometer, gauges, and light level dot.
   4 // Most of this code is from the original weatherstation demo. There is some
   5 // room for improvement (i.e. changing the scale on the gauges requires a lot
   6 // of tweaking, not just changing pmax and pmin), but it gets the job done.
   7
   8 // global vars
   9 var PI = 3.14;
  10 var HALF_PI = 1.57;
  11 var TWO_PI = 6.28;
  12
  13 // set defaults
  14 var pressure = 0;
  15 var pmax = 1200;
  16 var pmin = 200;
  17 var pdata = 0;
  18 var punit = "hPa";
  19
  20 var temp = 0.0;
  21 var tmax = 40.0;
  22 var tmin = -20.0;
  23 var tunit = "C";
  24
  25 var humidity = 0.0;
  26 var hmax = 100.0;
  27 var hmin = 0.0;
  28 var hdata = 0.0;
  29 var hunit = "% Humidity";
  30
  31 var lux = 0;
  32 var lmax = 2000;
  33 var lmin = 0;
  34 var lunit = "lux";
  35
  36 var setWidth = function() {
  37  var canvasWidth = window.innerWidth * 0.9;
  38  if ( canvasWidth > (0.8 * window.innerHeight)) {
  39   canvasWidth = 1.8 * window.innerHeight;
  40   $('#heading').hide();
  41  } else
  42   $('#heading').show();
  43
  44  barometerWidth = canvasWidth*0.5;
  45  barometerHeight = barometerWidth;
  46  thermometerWidth = canvasWidth*0.25;
  47  lightWidth = canvasWidth*0.25;
  48 };
  49 setWidth();
  50
  51 var barometerSketchProc = function(p) {
  52  p.size(barometerWidth, barometerWidth);
  53  p.draw = function() {
  54  p.size(barometerWidth, barometerWidth);
  55  barometerWidth=p.width;
  56  p.background(0,0);
  57
  58   // barometer
  59   p.fill(220);
  60   p.noStroke();
  61   // Angles for sin() and cos() start at 3 o'clock;
  62   // subtract HALF_PI to make them start at the top
  63   p.ellipse(barometerWidth/2, barometerWidth/2, barometerWidth*0.8, barometerWidth*0.8);
  64
  65    var angle = -HALF_PI + HALF_PI / 3;
  66    var inc = TWO_PI / 12;
  67    p.stroke(0);
  68    p.strokeWeight(barometerWidth*0.015);
  69    p.arc(barometerWidth/2, barometerWidth/2, barometerWidth*0.8, barometerWidth*0.8, -(4/3)*PI, PI/3);
  70
  71    // we want a range from 200 hPa to 1200 hPa
  72    // we want a range from ±950 - ±1050 milibar
  73    // 1-5=1010-1050, 7-12=950-1000
  74    p.textSize(Math.round(barometerWidth*0.04));
  75    for ( i = 1; i <= 12; i++, angle += inc ) {
  76        if(i!=6) {
  77          p.line(barometerWidth/2 + Math.cos(angle) * barometerWidth*0.35,barometerWidth/2 + Math.sin(angle) * barometerWidth*.35,barometerWidth/2 + Math.cos(angle) * barometerWidth*0.4,barometerWidth/2 + Math.sin(angle) * barometerWidth*.4);
  78          if (i < 6) {
  79            myText = 700 + 100*i;
  80          } else {
  81            myText = 100*i - 500;
  82          }
  83          myWidth = p.textWidth(myText);
  84          p.fill(0, 102, 153);
  85          p.text(myText, Math.round(barometerWidth/2 + Math.cos(angle) * barometerWidth*0.3 - myWidth/2),Math.round(barometerWidth/2 + Math.sin(angle) * barometerWidth*0.3));
  86        } else {
  87          myText = pdata + ' ' + punit;
  88          myWidth = p.textWidth(myText);
  89          p.fill(0, 102, 153);
  90          p.text(myText, Math.round(barometerWidth/2 + Math.cos(angle) * barometerWidth*0.3 - myWidth/2),Math.round(barometerWidth/2 + Math.sin(angle) * barometerWidth*0.3));
  91        }
  92    }
  93
  94
  95    // RH scale
  96    p.fill(220);
  97    p.stroke(0);
  98    p.strokeWeight(barometerWidth*0.005);
  99    p.arc(barometerWidth/2, barometerWidth/2, barometerWidth*0.4, barometerWidth*0.4, -(4/3)*PI, PI/3);
 100
 101    // we want a range from 0 - 100%
 102    // 1-5=60-100, 7-12=0-50
 103    p.textSize(Math.round(barometerWidth*0.02));
 104    for ( i = 1; i <= 12; i++, angle += inc ) {
 105        if(i!=6) {
 106          p.line(barometerWidth/2 + Math.cos(angle) * barometerWidth*0.18,barometerWidth/2 + Math.sin(angle) * barometerWidth*.18,barometerWidth/2 + Math.cos(angle) * barometerWidth*0.2,barometerWidth/2 + Math.sin(angle) * barometerWidth*.2);
 107          if (i < 6) {
 108            myText = 50 +10*i;
 109          } else {
 110            myText = 10*i - 70;
 111          }
 112          myWidth = p.textWidth(myText);
 113          p.fill(0, 102, 153);
 114          p.text(myText, Math.round(barometerWidth/2 + Math.cos(angle) * barometerWidth*0.16 - myWidth/2),Math.round(barometerWidth/2 + Math.sin(angle) * barometerWidth*0.16));
 115        } else {
 116          myText = hdata + ' ' + hunit;
 117          myWidth = p.textWidth(myText);
 118          p.fill(0, 102, 153);
 119          p.text(myText, Math.round(barometerWidth/2 + Math.cos(angle) * barometerWidth*0.12 - myWidth/2),Math.round(barometerWidth/2 + Math.sin(angle) * barometerWidth*0.12));
 120        }
 121    }
 122
 123         //humidity needle
 124   p.stroke(60);
 125   p.strokeWeight(barometerWidth*0.005);
 126   p.line(-Math.cos(humidity) * barometerWidth*0.05  + barometerWidth/2, -Math.sin(humidity) * barometerWidth*0.05 + barometerWidth/2, Math.cos(humidity) * barometerWidth*0.15 + barometerWidth/2, Math.sin(humidity) * barometerWidth*0.15 + barometerWidth/2);
 127   //p.ellipse(barometerWidth/2, barometerWidth/2, barometerWidth/20, barometerWidth/20);
 128
 129      // pressure needle
 130   p.stroke(60);
 131   p.strokeWeight(barometerWidth*0.015);
 132   p.line(-Math.cos(pressure) * barometerWidth*0.05  + barometerWidth/2, -Math.sin(pressure) * barometerWidth*0.05 + barometerWidth/2, Math.cos(pressure) * barometerWidth*0.35 + barometerWidth/2, Math.sin(pressure) * barometerWidth*0.35 + barometerWidth/2);
 133   p.ellipse(barometerWidth/2, barometerWidth/2, barometerWidth/20, barometerWidth/20);
 134
 135  };
 136  p.noLoop();
 137 }
 138
 139 var thermometerSketchProc = function(p) {
 140  p.size(thermometerWidth, barometerHeight);
 141  p.draw = function() {
 142   p.size(thermometerWidth, barometerHeight);
 143   thermometerWidth=p.width;
 144   p.background(0,0);
 145
 146   // thermometer
 147   // contour
 148   p.stroke(0);
 149   p.strokeWeight(thermometerWidth*0.27);
 150   p.line(thermometerWidth/2,thermometerWidth*1.75,thermometerWidth/2,thermometerWidth/4);
 151   p.ellipse(thermometerWidth/2, thermometerWidth*1.75, thermometerWidth/5, thermometerWidth/5);
 152
 153   p.strokeWeight(thermometerWidth*0.22);
 154   p.stroke(255);
 155   p.line(thermometerWidth/2,thermometerWidth*1.75,thermometerWidth/2,thermometerWidth/4);
 156   // mercury bubble
 157   if(temp > 0) {
 158     p.stroke(255,0,0);
 159   } else {
 160     p.stroke(0,0,255)
 161   }
 162   p.ellipse(thermometerWidth/2, thermometerWidth*1.75, thermometerWidth/5, thermometerWidth/5);
 163   // temperature line
 164   if (temp < 44) {
 165     p.strokeCap("butt");
 166   } else {
 167     // don't exceed thermometer bounds.
 168     temp = 44;
 169     p.strokeCap("round");
 170   }
 171   p.line(thermometerWidth/2,thermometerWidth*1.75,thermometerWidth/2,thermometerWidth*1.1 - (thermometerWidth/50) * temp);
 172   // scale
 173   p.strokeCap("round");
 174   p.stroke(0);
 175   p.strokeWeight(thermometerWidth*0.03);
 176   var theight = thermometerWidth*1.5;
 177   var inc = thermometerWidth/5;
 178
 179   p.textSize(Math.round(thermometerWidth*0.06));
 180
 181   for ( i = 1; i <= 7; i++, theight -= inc ) {
 182     // longer bar at zero degrees C
 183     if(i==3) {
 184         extra = thermometerWidth/10;
 185     } else {
 186         extra = thermometerWidth/20;
 187     }
 188     p.line((thermometerWidth/2) - thermometerWidth/8,theight,(thermometerWidth/2) - thermometerWidth/8 + extra, theight );
 189
 190     myText = -30 + i*10;
 191     p.fill(0, 0, 0);
 192     p.text(myText, (thermometerWidth/2) - thermometerWidth*0.09 + extra, theight + 4);
 193
 194     // min/max marks
 195     p.strokeWeight(thermometerWidth*0.01);
 196     p.line((thermometerWidth/2) + thermometerWidth/8,thermometerWidth*1.1 - (thermometerWidth/50) * tmin,(thermometerWidth/2) + thermometerWidth/8 - thermometerWidth/20, thermometerWidth*1.1 - (thermometerWidth/50) * tmin );
 197     p.line((thermometerWidth/2) + thermometerWidth/8,thermometerWidth*1.1 - (thermometerWidth/50) * tmax,(thermometerWidth/2) + thermometerWidth/8 - thermometerWidth/20, thermometerWidth*1.1 - (thermometerWidth/50) * tmax );
 198     p.strokeWeight(thermometerWidth*0.03);
 199 }
 200   myText = temp + ' ' + tunit;
 201   p.fill(0, 0, 0);
 202   p.textSize(Math.round(thermometerWidth*0.09));
 203   myWidth = p.textWidth(myText);
 204   p.text(myText, thermometerWidth/2 - myWidth/2, thermometerWidth*1.75 + thermometerWidth*0.045);
 205  };
 206  p.noLoop();
 207 }
 208
 209
 210 var lightSketchProc = function(p) {
 211  var fill_lux;
 212  p.size(lightWidth, barometerHeight);
 213  p.draw = function() {
 214   p.size(lightWidth, barometerHeight);
 215   lightWidth=p.width;
 216   p.background(0,0);
 217
 218   // contour
 219   p.stroke(0);
 220   p.strokeWeight(lightWidth*0.01);
 221   fill_lux = lux;
 222   if(fill_lux > (3*255 - 10))
 223         fill_lux = (3*255 - 10);
 224   p.fill(fill_lux/3 + 10);
 225   p.ellipse(lightWidth/2,lightWidth,lightWidth/2,lightWidth/2);
 226
 227   myText = lux + ' ' + lunit;
 228   p.fill(0, 0, 0);
 229   p.textSize(Math.round(lightWidth*0.09));
 230   myWidth = p.textWidth(myText);
 231   p.text(myText, lightWidth/2 - myWidth/2, lightWidth*1.4 + lightWidth*0.045);
 232  };
 233  p.noLoop();
 234 }
 235
 236 var canvas = document.getElementById("barometerCanvas");
 237 var thermometerCanvas = document.getElementById("thermometerCanvas");
 238 var lightCanvas = document.getElementById("lightCanvas");
 239 var barometer = new Processing(canvas, barometerSketchProc);
 240 var thermometer = new Processing(thermometerCanvas, thermometerSketchProc);
 241 var light = new Processing(lightCanvas, lightSketchProc);
 242
 243 function set_pressure(data) {
 244
 245         var myData = parseFloat(data);
 246
 247         // Angles for sin() and cos() start at 3 o'clock;
 248         // subtract HALF_PI to make them start at the top
 249         pressure = ((myData - 700) / 10) * (TWO_PI / 120) - HALF_PI;
 250         pdata = myData;
 251
 252         if (myData > pmax) pmax = myData;
 253         if (myData < pmin) pmin = myData;
 254
 255         barometer.redraw();
 256 }
 257
 258 function set_humidity(data) {
 259
 260         var myData = parseFloat(data);
 261
 262         // Angles for sin() and cos() start at 3 o'clock;
 263         // subtract HALF_PI to make them start at the top
 264         // 30% = HALF_PI
 265         humidity = (myData - 50) * (TWO_PI / 120) - HALF_PI;
 266         hdata = myData;
 267
 268         if (myData > hmax) hmax = myData;
 269         if (myData < hmin) hmin = myData;
 270
 271         barometer.redraw();
 272 }
 273
 274 function set_temp(data) {
 275
 276         var myData = parseFloat(data);
 277
 278         temp = myData;
 279
 280         if (myData > tmax) tmax = myData;
 281         if (myData < tmin) tmin = myData;
 282
 283         thermometer.redraw();
 284 }
 285
 286 function set_lux(data) {
 287
 288         var myData = parseFloat(data);
 289
 290         lux = myData;
 291         light.redraw();
 292 }
 293
 294 function resizeHandler() {
 295
 296         setWidth();
 297         barometer.redraw();
 298         thermometer.redraw();
 299         light.redraw();
 300 }
 301
 302 window.onresize=resizeHandler;