minix/share/beaglebone/weather/weatherstation.js

// Main javascript for the BeagleBone Weather Cape demo.
// 
// This code handles drawing the thermometer, gauges, and light level dot.
// Most of this code is from the original weatherstation demo. There is some
// room for improvement (i.e. changing the scale on the gauges requires a lot
// of tweaking, not just changing pmax and pmin), but it gets the job done.

// global vars
var PI = 3.14;
var HALF_PI = 1.57;
var TWO_PI = 6.28;

// set defaults
var pressure = 0;
var pmax = 1200;
var pmin = 200;
var pdata = 0;
var punit = "hPa";

var temp = 0.0;
var tmax = 40.0;
var tmin = -20.0;
var tunit = "C";

var humidity = 0.0;
var hmax = 100.0;
var hmin = 0.0;
var hdata = 0.0;
var hunit = "% Humidity";

var lux = 0;
var lmax = 2000;
var lmin = 0;
var lunit = "lux";

var setWidth = function() {
 var canvasWidth = window.innerWidth * 0.9;
 if ( canvasWidth > (0.8 * window.innerHeight)) {
  canvasWidth = 1.8 * window.innerHeight;
  $('#heading').hide();
 } else
  $('#heading').show();

 barometerWidth = canvasWidth*0.5;
 barometerHeight = barometerWidth;
 thermometerWidth = canvasWidth*0.25;
 lightWidth = canvasWidth*0.25;
};
setWidth();

var barometerSketchProc = function(p) {
 p.size(barometerWidth, barometerWidth);
 p.draw = function() {
 p.size(barometerWidth, barometerWidth);
 barometerWidth=p.width;
 p.background(0,0);
  
  // barometer
  p.fill(220);
  p.noStroke();
  // Angles for sin() and cos() start at 3 o'clock;
  // subtract HALF_PI to make them start at the top
  p.ellipse(barometerWidth/2, barometerWidth/2, barometerWidth*0.8, barometerWidth*0.8);
  
   var angle = -HALF_PI + HALF_PI / 3;
   var inc = TWO_PI / 12;
   p.stroke(0);
   p.strokeWeight(barometerWidth*0.015);
   p.arc(barometerWidth/2, barometerWidth/2, barometerWidth*0.8, barometerWidth*0.8, -(4/3)*PI, PI/3);

   // we want a range from 200 hPa to 1200 hPa
   // we want a range from ±950 - ±1050 milibar
   // 1-5=1010-1050, 7-12=950-1000
   p.textSize(Math.round(barometerWidth*0.04));
   for ( i = 1; i <= 12; i++, angle += inc ) {
       if(i!=6) {
         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);
         if (i < 6) {
           myText = 700 + 100*i;
         } else {
           myText = 100*i - 500;
         }     
         myWidth = p.textWidth(myText);
         p.fill(0, 102, 153);
         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));
       } else {
         myText = pdata + ' ' + punit;  
         myWidth = p.textWidth(myText);
         p.fill(0, 102, 153);
         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));
       }
   }
   
  
   // RH scale
   p.fill(220);
   p.stroke(0);
   p.strokeWeight(barometerWidth*0.005);
   p.arc(barometerWidth/2, barometerWidth/2, barometerWidth*0.4, barometerWidth*0.4, -(4/3)*PI, PI/3);
   
   // we want a range from 0 - 100%
   // 1-5=60-100, 7-12=0-50
   p.textSize(Math.round(barometerWidth*0.02));
   for ( i = 1; i <= 12; i++, angle += inc ) {
       if(i!=6) {
         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);
         if (i < 6) {
           myText = 50 +10*i;
         } else {
           myText = 10*i - 70;
         }     
         myWidth = p.textWidth(myText);
         p.fill(0, 102, 153);
         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));
       } else {
         myText = hdata + ' ' + hunit;  
         myWidth = p.textWidth(myText);
         p.fill(0, 102, 153);
         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));
       }
   }
   
        //humidity needle
  p.stroke(60);
  p.strokeWeight(barometerWidth*0.005);
  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);
  //p.ellipse(barometerWidth/2, barometerWidth/2, barometerWidth/20, barometerWidth/20);
   
     // pressure needle
  p.stroke(60);
  p.strokeWeight(barometerWidth*0.015);
  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);
  p.ellipse(barometerWidth/2, barometerWidth/2, barometerWidth/20, barometerWidth/20);
  
 };
 p.noLoop();
}

var thermometerSketchProc = function(p) {
 p.size(thermometerWidth, barometerHeight);
 p.draw = function() {
  p.size(thermometerWidth, barometerHeight);
  thermometerWidth=p.width;
  p.background(0,0);

  // thermometer
  // contour
  p.stroke(0);
  p.strokeWeight(thermometerWidth*0.27);
  p.line(thermometerWidth/2,thermometerWidth*1.75,thermometerWidth/2,thermometerWidth/4);
  p.ellipse(thermometerWidth/2, thermometerWidth*1.75, thermometerWidth/5, thermometerWidth/5);
  
  p.strokeWeight(thermometerWidth*0.22);
  p.stroke(255);
  p.line(thermometerWidth/2,thermometerWidth*1.75,thermometerWidth/2,thermometerWidth/4);
  // mercury bubble
  if(temp > 0) {
    p.stroke(255,0,0);
  } else {
    p.stroke(0,0,255)
  }  
  p.ellipse(thermometerWidth/2, thermometerWidth*1.75, thermometerWidth/5, thermometerWidth/5);
  // temperature line
  if (temp < 44) {
    p.strokeCap("butt");
  } else {
    // don't exceed thermometer bounds.  
    temp = 44;  
    p.strokeCap("round");  
  }      
  p.line(thermometerWidth/2,thermometerWidth*1.75,thermometerWidth/2,thermometerWidth*1.1 - (thermometerWidth/50) * temp);
  // scale
  p.strokeCap("round");
  p.stroke(0);
  p.strokeWeight(thermometerWidth*0.03);
  var theight = thermometerWidth*1.5;
  var inc = thermometerWidth/5;
  
  p.textSize(Math.round(thermometerWidth*0.06));
  
  for ( i = 1; i <= 7; i++, theight -= inc ) {
    // longer bar at zero degrees C  
    if(i==3) {
        extra = thermometerWidth/10;
    } else {
        extra = thermometerWidth/20;
    }    
    p.line((thermometerWidth/2) - thermometerWidth/8,theight,(thermometerWidth/2) - thermometerWidth/8 + extra, theight );
    
    myText = -30 + i*10;
    p.fill(0, 0, 0);
    p.text(myText, (thermometerWidth/2) - thermometerWidth*0.09 + extra, theight + 4);
    
    // min/max marks
    p.strokeWeight(thermometerWidth*0.01);
    p.line((thermometerWidth/2) + thermometerWidth/8,thermometerWidth*1.1 - (thermometerWidth/50) * tmin,(thermometerWidth/2) + thermometerWidth/8 - thermometerWidth/20, thermometerWidth*1.1 - (thermometerWidth/50) * tmin );
    p.line((thermometerWidth/2) + thermometerWidth/8,thermometerWidth*1.1 - (thermometerWidth/50) * tmax,(thermometerWidth/2) + thermometerWidth/8 - thermometerWidth/20, thermometerWidth*1.1 - (thermometerWidth/50) * tmax );
    p.strokeWeight(thermometerWidth*0.03);
}
  myText = temp + ' ' + tunit;
  p.fill(0, 0, 0);
  p.textSize(Math.round(thermometerWidth*0.09));
  myWidth = p.textWidth(myText);
  p.text(myText, thermometerWidth/2 - myWidth/2, thermometerWidth*1.75 + thermometerWidth*0.045);
 };
 p.noLoop();
}


var lightSketchProc = function(p) {
 var fill_lux;
 p.size(lightWidth, barometerHeight);
 p.draw = function() {
  p.size(lightWidth, barometerHeight);
  lightWidth=p.width;
  p.background(0,0);

  // contour
  p.stroke(0);
  p.strokeWeight(lightWidth*0.01);
  fill_lux = lux;
  if(fill_lux > (3*255 - 10))
  	fill_lux = (3*255 - 10);
  p.fill(fill_lux/3 + 10);
  p.ellipse(lightWidth/2,lightWidth,lightWidth/2,lightWidth/2);
  
  myText = lux + ' ' + lunit;
  p.fill(0, 0, 0);
  p.textSize(Math.round(lightWidth*0.09));
  myWidth = p.textWidth(myText);
  p.text(myText, lightWidth/2 - myWidth/2, lightWidth*1.4 + lightWidth*0.045);
 };
 p.noLoop();
}

var canvas = document.getElementById("barometerCanvas");
var thermometerCanvas = document.getElementById("thermometerCanvas");
var lightCanvas = document.getElementById("lightCanvas");
var barometer = new Processing(canvas, barometerSketchProc);
var thermometer = new Processing(thermometerCanvas, thermometerSketchProc);
var light = new Processing(lightCanvas, lightSketchProc);

function set_pressure(data) {

	var myData = parseFloat(data);

	// Angles for sin() and cos() start at 3 o'clock;
	// subtract HALF_PI to make them start at the top
	pressure = ((myData - 700) / 10) * (TWO_PI / 120) - HALF_PI;
	pdata = myData;

	if (myData > pmax) pmax = myData;
	if (myData < pmin) pmin = myData;
 
	barometer.redraw();
}

function set_humidity(data) {

	var myData = parseFloat(data);

	// Angles for sin() and cos() start at 3 o'clock;
	// subtract HALF_PI to make them start at the top
	// 30% = HALF_PI
	humidity = (myData - 50) * (TWO_PI / 120) - HALF_PI;
	hdata = myData;

	if (myData > hmax) hmax = myData;
	if (myData < hmin) hmin = myData;
 
	barometer.redraw();
}

function set_temp(data) {

	var myData = parseFloat(data);

	temp = myData;

	if (myData > tmax) tmax = myData;
	if (myData < tmin) tmin = myData;

	thermometer.redraw();
}

function set_lux(data) {

	var myData = parseFloat(data);

	lux = myData;
	light.redraw();
}

function resizeHandler() {

	setWidth();
	barometer.redraw();
	thermometer.redraw();
	light.redraw();
}

window.onresize=resizeHandler;