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