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 9var PI = 3.14; 10var HALF_PI = 1.57; 11var TWO_PI = 6.28; 12 13// set defaults 14var pressure = 0; 15var pmax = 1200; 16var pmin = 200; 17var pdata = 0; 18var punit = "hPa"; 19 20var temp = 0.0; 21var tmax = 40.0; 22var tmin = -20.0; 23var tunit = "C"; 24 25var humidity = 0.0; 26var hmax = 100.0; 27var hmin = 0.0; 28var hdata = 0.0; 29var hunit = "% Humidity"; 30 31var lux = 0; 32var lmax = 2000; 33var lmin = 0; 34var lunit = "lux"; 35 36var 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}; 49setWidth(); 50 51var 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 139var 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 210var 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 236var canvas = document.getElementById("barometerCanvas"); 237var thermometerCanvas = document.getElementById("thermometerCanvas"); 238var lightCanvas = document.getElementById("lightCanvas"); 239var barometer = new Processing(canvas, barometerSketchProc); 240var thermometer = new Processing(thermometerCanvas, thermometerSketchProc); 241var light = new Processing(lightCanvas, lightSketchProc); 242 243function 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 258function 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 274function 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 286function set_lux(data) { 287 288 var myData = parseFloat(data); 289 290 lux = myData; 291 light.redraw(); 292} 293 294function resizeHandler() { 295 296 setWidth(); 297 barometer.redraw(); 298 thermometer.redraw(); 299 light.redraw(); 300} 301 302window.onresize=resizeHandler; 303