https://hanaton.co.il/dbimages/dashboard.js

1/* Code by David N Brown. Copyright 2006. Version 1.02.00 BETA - 15 Feb 2006.
2
3This code is provided free of charge and without warranty of any kind. You use it at
4your own risk. You are free to modify the code as you wish but be aware that in doing
5so you will not be able to easily upgrade as the author introduces new features and
6functions.
7
8This code will not work without the required variables being set first in the calling
9html page and the required graphic files being available in the appropriate directory.
10Full instructions were provided with this file in its original zip archive.
11
12Please leave this notice intact and unmodified.  */
13
14var mod = 1000;
15var fst = "position:relative; cursor:pointer; ";
16var tds = "font-family: Verdana,Arial,Helvetica; font-size: 9px; color: #000055; "
17
18function dohums(tit,id,eid,size,data){
19
20 if(size == "large"){ 
21  tgd="<div id='"+id+"' style='"+fst+"width:90px;'><img src='dbimages/humidl.gif'></div>";
22  factor=1;
23  bottom=375;
24 }else{ 
25  tgd="<div id='"+id+"' style='"+fst+"width:90px;'><img src='dbimages/humids.gif'></div>";
26  factor=2;
27  bottom=195;
28 } 
29 
30 eid.parentNode.innerHTML=tgd;
31 eid=document.getElementById(id);
32 scale=3.6/factor;
33 maxm=100; 
34 val=parseFloat(data[0]);
35 t=parseInt(((maxm-val)*scale)+16);
36 b=(bottom-t)+1;
37 var jg=new jsGraphics(id);
38 jg.setColor(HumColor || "#A0C4E7");
39 
40 mo = new Array()
41 c = 0;
42 
43 if(!isNaN(t)){
44  jg.fillRect(50,t,15,b);
45  mo[c]="Current:"+parseFloat(data[0])+" %";
46 }
47 else mo[c]="Current:Not Available";
48 c++;
49
50 if(data[1]){
51  jg.setColor("#0000FF");
52  val=parseFloat(data[1]);
53  t=parseInt(((maxm-val)*scale)+16);
54  if(!isNaN(t)){
55   jg.drawLine(43,t,72,t);
56   mo[c]="Min Today:"+parseFloat(data[1])+" %";
57   c++
58  }
59 }
60 
61 if(data[2]){
62  jg.setColor("#FF0000");
63  val=parseFloat(data[2]);
64  t=parseInt(((maxm-val)*scale)+16);
65  if(!isNaN(t)){
66   jg.drawLine(43,t,72,t);
67   mo[c]="Max Today:"+parseFloat(data[2])+" %";
68   c++;
69  }
70 }
71  
72 if(data[3]){
73  jg.drawImage('dbimages/'+data[3]+'.gif',53,bottom-33,9,29);
74  mo[c]="Trend: "+data[3];
75 }
76 
77 jg.paint();
78 eid.title="header=["+tit+" (%)] body=["+getmo(mo)+"] delay=["+mod+"]";
79}
80
81function dotemps(tit,id,eid,size,data){
82 if(size=="large"){ 
83  tgd="<div id='"+id+"' style='"+fst+"width:90px;'><img src='dbimages/thermol.gif'></div>";
84  factor=1;
85  bottom=375;
86 }else{ 
87  tgd="<div id='"+id+"' style='"+fst+"width:90px;'><img src='dbimages/thermos.gif'></div>";
88  factor=2;
89  bottom=195;
90 } 
91 
92 eid.parentNode.innerHTML=tgd;
93 eid=document.getElementById(id);
94 
95 tu = tempunits.replace("&#176;","°");
96 
97 if(tu.indexOf("C")>-1){
98  scale=3.6/factor;maxm=60;
99 }else{
100  scale=2/factor;maxm=140;
101 }
102 
103 valnow=parseFloat(data[0]);
104 t=parseInt(((maxm-valnow)*scale)+16);b=(bottom-t)+1;l=31;r=60;
105 var jg=new jsGraphics(id);
106 jg.setColor(TempColor || "#A0C4E7");
107 
108 mo = new Array()
109 c = 0;
110 
111 if(!isNaN(t)){
112  jg.fillRect(38,t,15,b);
113  mo[c]="Current:"+valnow+" "+tu;
114 }
115 else mo[c]="Current:Not Available";
116 c++;
117 
118 if(data[1]){
119  jg.setColor("#0000FF");
120  val=parseFloat(data[1]);
121  t=parseInt(((maxm-val)*scale)+16);
122  if(!isNaN(t))jg.drawLine(l,t,r,t);
123  mo[c]="Min Today:"+val+" "+tu;
124  c++;
125 }
126 
127 if(data[2]){
128  jg.setColor("#FF0000");
129  val=parseFloat(data[2]);
130  t=parseInt(((maxm-val)*scale)+16);
131  if(!isNaN(t))jg.drawLine(l,t,r,t);
132  mo[c]="Max Today:"+val+" "+tu;
133  c++;
134 }
135  
136 if(data[3]){
137  jg.drawImage('dbimages/'+data[4]+'.gif',41,bottom-33,9,29);
138  mo[c]="Trend:"+data[3];
139 }
140 
141 jg.paint();
142 eid.title="header=["+tit+" ("+tempunits+")] body=["+getmo(mo)+"] delay=["+mod+"]";
143}
144
145function getmo(mot){
146 st = "";
147 st += "<table cellpadding=3 cellspacing=0 border=0 style='"+tds+"'>";
148 for (j=0;j<mot.length;j++){
149  st += "<tr><td align=right style='"+tds+"'>";
150  st += mot[j].substring(0,mot[j].indexOf(":")+1);
151  st += "</td><td align=left style='"+tds+"'>";
152  st += mot[j].substring(mot[j].indexOf(":")+1);
153  st += "</td></tr>";
154 }
155 st += "</table>";
156 return st;
157}
158
159function getpixel(midx,midy,speed,degrees,factor){
160 ret=new Array();
161 x=midx;
162 y=midy;
163 dia=(parseFloat(speed)/factor)*2;
164 point=parseInt(degrees);
165 angle=((90-point)*(2*Math.PI))/360;
166 xx=parseInt(Math.round(Math.cos(angle)*dia));
167 ret[0]=x+xx;
168 yy=parseInt(Math.round(Math.sin(angle)*dia));
169 ret[1]=y-yy;
170 return(ret);
171}
172
173function dobar(type){
174 if(type=="analog"){
175  abtc=AnalogBaroTextColor;abnc=AnalogBaroNeedleColor;
176  tgd="<div id='barometer' style='"+fst+"width:220px; height:180px;'><img src='dbimages/barometer2.gif'></div>";
177  document.getElementById("barometer").parentNode.innerHTML=tgd;
178  var jg=new jsGraphics("barometer");
179  jg.drawImage('dbimages/'+bardata[5]+'.gif',70,97,9,29);
180  val=0;
181  if(parseFloat(bardata[0])<100){
182   val=Math.ceil(bardata[0]/0.029528750668088)-565;
183  }else{
184   val=parseInt(bardata[0])-565;
185  }
186  to=getpixel(110,110,63,val,2);
187  jg.setColor(abnc || "#990000");
188  jg.setStroke(2);
189  jg.drawLine(110,110,to[0],to[1]);
190  jg.drawEllipse(103,103,14,14);
191  jg.setColor("#999999");jg.fillEllipse(105,105,12,12);
192  jg.setFont("verdana","9px",Font.PLAIN);
193  jg.setColor(abtc || "#555555");
194  jg.drawStringRect("Now: "+parseFloat(bardata[0]),60,138,100,"center")
195  jg.setFont("verdana","9px",Font.PLAIN);
196  jg.setColor(abtc || "#555555");
197  jg.drawStringRect("Max: "+parseFloat(bardata[3]),60,150,100,"center")
198  jg.setFont("verdana","9px",Font.PLAIN);
199  jg.setColor(abtc || "#555555");
200  jg.drawStringRect("Min: "+parseFloat(bardata[4]),60,162,100,"center")

201  mo[0]="Current:"+bardata[0]+" "+bardata[1];
202  mo[1]="Max Today:"+parseFloat(bardata[3])+" "+bardata[1];
203  mo[2]="Min Today:"+parseFloat(bardata[4])+" "+bardata[1];
204  mo[3]="Trend:"+bardata[2];
205  document.getElementById("barometer").title="header=[Barometer ("+bardata[1]+")] body=["+getmo(mo)+"] delay=["+mod+"]";
206 }else{
207  w=90; 
208  h=100;
209  tgd="<div id='barometer' style='"+fst+"width:"+w+"px; height:"+h+"px;'></div>";
210  document.getElementById("barometer").parentNode.innerHTML=tgd;
211  var jg=new jsGraphics("barometer");
212  jg.setColor("#AAAAAA");
213  jg.fillRect(0,0,w,h);
214  jg.setColor("#DDDDDD");
215  jg.fillRect(5,5,w-10,23);
216  jg.setColor("#FEFEFE");
217  jg.drawLine(0,0,w,0);
218  jg.setColor("#FEFEFE");
219  jg.drawLine(0,0,0,h);
220  jg.setColor("#000000");
221  jg.drawLine(1,h,w,h);
222  jg.setColor("#000000");
223  jg.drawLine(w,h,w,1);
224  jg.setColor("#FEFEFE");
225  jg.drawLine(5,28,w-5,28);
226  jg.setColor("#FEFEFE");
227  jg.drawLine(w-5,5,w-5,28);
228  jg.setColor("#000000");
229  jg.drawLine(5,5,w-5,5);
230  jg.setColor("#000000");
231  jg.drawLine(5,5,5,28);
232  jg.setFont("verdana","18px",Font.BOLD);
233  jg.setColor("#000000");
234  jg.drawStringRect(bardata[0],5,5,w-10,"center");
235  jg.setFont("verdana","9px",Font.PLAIN);
236  jg.setColor("#FFFFFF");
237  jg.drawStringRect(bardata[1],5,36,70,"left");
238  jg.drawImage('dbimages/'+bardata[5]+'.gif',w-14,35,9,29); 
239  jg.setFont("verdana","9px",Font.PLAIN);
240  jg.setColor("#FFFFFF");
241  jg.drawStringRect(bardata[2],5,50,70,"left");
242  jg.setFont("verdana","9px",Font.PLAIN);
243  jg.setColor("#FFFFFF");
244  jg.drawStringRect("Max: "+parseFloat(bardata[3]),5,70,w-10,"center");
245  jg.setFont("verdana","9px",Font.PLAIN);
246  jg.setColor("#FFFFFF");
247  jg.drawStringRect("Min: "+parseFloat(bardata[4]),5,82,w-10,"center");
248 }
249 jg.paint();
250}
251
252function dowind(){
253 toadd=2.5;maxspeed=10;
254 
255 if(winddata[0].indexOf("Calm")>-1)winddata[0]=winddata[0].replace("Calm","0");
256 if(winddata[2].indexOf("Calm")>-1)winddata[2]=winddata[2].replace("Calm","0");
257 
258 for(i=0;i<hwspd.length-1;i++){
259  if(hwspd[i]>80){toadd=30;maxspeed=120;}
260  else if(hwspd[i]>40 && maxspeed<80){toadd=20;maxspeed=80;}
261  else if(hwspd[i]>20 && maxspeed<40){toadd=10;maxspeed=40;}
262  else if(hwspd[i]>10 && maxspeed<20){toadd=5;maxspeed=20;}
263 }
264 if(Math.max(parseFloat(winddata[0]),parseFloat(winddata[2]))>80 && maxspeed<120){toadd=30;maxspeed=120;}
265 else if(Math.max(parseFloat(winddata[0]),parseFloat(winddata[2]))>40 && maxspeed<80){toadd=20;maxspeed=80;}
266 else if(Math.max(parseFloat(winddata[0]),parseFloat(winddata[2]))>20 && maxspeed<40){toadd=10;maxspeed=40;}
267 else if(Math.max(parseFloat(winddata[0]),parseFloat(winddata[2]))>10 && maxspeed<20){toadd=5;maxspeed=20;}
268 
269 factor=toadd/10;
270 tgd="<div id='wind' style='"+fst+"width:220px; height:220px;'><img src='dbimages/windrose"+maxspeed+".gif'></div>";
271 document.getElementById("wind").parentNode.innerHTML=tgd;
272 
273 mo[0]="Gust:"+winddata[0]+" "+wsu+" - "+getord(parseInt(winddata[1]));
274 mo[1]="Avg:"+winddata[2]+" "+wsu+" - "+getord(parseInt(winddata[3]));
275 
276 tmo=winddata[4].substring(0,winddata[4].indexOf(","));
277 tmod=winddata[4].substring(winddata[4].indexOf(",")+1,winddata[4].indexOf("&#176;"));
278 tmos=parseInt(tmod);
279 tmo+=" - "+getord(tmos);
280 mo[2]="Max:"+tmo;
281 
282 document.getElementById("wind").title="header=[Wind ("+wsu+")] body=["+getmo(mo)+"] delay=["+mod+"]";
283 var jg=new jsGraphics("wind");
284 jg.setFont("arial","10px",Font.PLAIN);
285 jg.drawStringRect(wsu,10,10,70,"left");
286 
287 for(i=0;i<hwspd.length-1;i++){
288  hist=getpixel(110,108,maxspeed-hwspd[i],hwdir[i],factor);
289  jg.setColor(WindHistColor || "#777700");
290  jg.setStroke(1);jg.fillRect(hist[0],hist[1],2,2);
291 }
292 
293 if(winddata[0]>winddata[2]){
294  plotf=new Array(0,1,WindGustColor || "#990000");
295  plots=new Array(2,3,WindAvgColor || "#009900");
296 }else{
297  plotf=new Array(2,3,WindAvgColor || "#009900");
298  plots=new Array(0,1,WindGustColor || "#990000");
299 }
300 
301 from=getpixel(110,108,maxspeed,parseInt(winddata[plotf[1]]),factor);
302 to=getpixel(110,108,maxspeed-parseFloat(winddata[plotf[0]]),parseInt(winddata[plotf[1]]),factor);
303 jg.setColor(plotf[2]);jg.setStroke(2);jg.drawLine(from[0],from[1],to[0],to[1]);
304 jg.fillEllipse(from[0]-2,from[1]-2,6,6);
305 
306 from=getpixel(110,108,maxspeed,parseInt(winddata[plots[1]]),factor);
307 to=getpixel(110,108,maxspeed-parseFloat(winddata[plots[0]]),parseInt(winddata[plots[1]]),factor);

308 jg.setColor(plots[2]);jg.setStroke(2);jg.drawLine(from[0],from[1],to[0],to[1]);
309 jg.fillEllipse(from[0]-2,from[1]-2,6,6);
310 
311 jg.paint();
312}
313
314function getord(d){
315//convert to range 0-360 - provided for Cumulus by Mark Crossley
316if(d>=360){d-=360;}
317deg = Math.ceil((d+11.25)/22.5)
318ords = new Array("N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW")
319return(ords[deg-1]);
320}
321
322function dorain(id,eid,size){
323 units=raintoday[1];total=0;maxmf=1;files="l";bot=376;
324 if(size=="small"){maxmf=2;files="s";bot=196;}
325 
326 if(units!="mm"){
327  total=parseFloat(raintoday[0])/0.04;
328 }else{
329  total=parseFloat(raintoday[0]);
330 }
331 
332 if(total<=9){
333  tgd="<div id='rain' style='"+fst+"width:90px;'><img src='dbimages/rain"+files+"10.gif'></div>";factor=1;maxm=10;
334 }else if(total<=99){
335  tgd="<div id='rain' style='"+fst+"width:90px;'><img src='dbimages/rain"+files+"100.gif'></div>";factor=10;maxm=100;
336 }else if(total<=199){
337  tgd="<div id='rain' style='"+fst+"width:90px;'><img src='dbimages/rain"+files+"200.gif'></div>";factor=20;maxm=200;
338 }else{
339  tgd="<div id='rain' style='"+fst+"width:90px;'><img src='dbimages/rain"+files+"400.gif'></div>";factor=40;maxm=400;
340 }
341 
342 eid.parentNode.innerHTML=tgd;
343 eid=document.getElementById(id);
344 if(units!="mm" && total>7.5)scale=37/factor/maxmf;
345 else scale=36/factor/maxmf;
346 t=Math.floor(bot-(total*scale));b=bot-t;
347 var jg=new jsGraphics(id);
348 jg.setColor(RainColor || "#A0C4E7");
349 if(!isNaN(t)&&t<bot)jg.fillRect(38,t,15,b);
350 jg.paint();
351 
352 mo = new Array();
353 mo[0]="Amount Today:"+parseFloat(raintoday[0])+units;
354 mo[1]="Current Rate:"+parseFloat(raintoday[2])+units+"/hour";
355 if(!isNaN(parseFloat(raintoday[3])))mo[2]="Max Rate:"+parseFloat(raintoday[3])+units+"/hour";
356 
357 eid.title="header=[Rainfall Today ("+raintoday[1]+")] body=["+getmo(mo)+"] delay=["+mod+"]";
358}
359
360function docloud(){
361 tgd = "<div id='cloudbase' style='position:relative; width:90px;'><img src='dbimages/cloudbase.gif'>";
362 document.getElementById("cloudbase").parentNode.innerHTML=tgd
363 var jg = new jsGraphics("cloudbase");
364 jg.setColor(CloudTextColor || "#000000");
365 jg.setFont("arial","10px",Font.PLAIN); 
366 jg.drawStringRect(cloudbase,10,93,70,"center"); 
367 jg.paint();
368}
369
370// Following code calls the above functions.
371
372divid = new Array("outsidetemp","insidetemp","extratemp1","extratemp2","dewpoint","heatindex","windchill");
373ddata = new Array(tempos,tempis,tempex1,tempex2,tempdp,temphi,tempwc)
374esn1 = "Extra Temperature 1";
375esn2 = "Extra Temperature 2";
376if(ExtraSensor1Name) esn1 = ExtraSensor1Name + " Temperature";
377if(ExtraSensor2Name) esn2 = ExtraSensor2Name + " Temperature";
378divti = new Array("Outside Temperature","Inside Temperature",esn1,esn2,"Dew Point","Heat Index","Wind Chill");
379for(x=0;x<divid.length;x++){
380 if(document.getElementById(divid[x])){
381  eid=document.getElementById(divid[x]);
382  dotemps(divti[x],divid[x],eid,eid.innerHTML,ddata[x]);
383 }
384}
385
386divid = new Array("outsidehumidity","insidehumidity","extrahumidity1","extrahumidity2");
387ddata = new Array(humos,humis,humex1,humex2)
388esn1 = "Extra Humidity 1";
389esn2 = "Extra Humidity 2";
390if(ExtraSensor1Name) esn1 = ExtraSensor1Name + " Humidity";
391if(ExtraSensor2Name) esn2 = ExtraSensor2Name + " Humidity";
392divti = new Array("Outside Humidity","Inside Humidity",esn1,esn2);
393for(i=0;i<divid.length;i++){
394 if(document.getElementById(divid[i])){
395  eid=document.getElementById(divid[i]);
396  dohums(divti[i],divid[i],eid,eid.innerHTML,ddata[i]);
397 }
398}
399
400if(document.getElementById("barometer")) dobar(document.getElementById("barometer").innerHTML);
401
402if(document.getElementById("cloudbase")) docloud();
403
404if(document.getElementById("rain")){
405 eid=document.getElementById("rain");
406 dorain("rain",eid,eid.innerHTML);
407}
408
409if(document.getElementById("wind")) dowind();