Barometer & Wind Gauges look "odd"

[oman4eva]

Thanks Mark,

I am using the standard cumuls webfiles, i see that if i inspect element on the gauges page i can see the code you pointed out.

However i believe these pages are made by the cumulus template files and after doing a bit of searching i believe the barometer and wind gauge is made by the dashboard.js in the webfiles/dbimages folder (see below).


I'm not very experience in editing java script, i can see there's a whole lot of references to colours in there, any idea which ones i should change? or which lines i should add to create a box behind the gauge.

cheers
oman




function dobar(type){
if(type=="analog"){
abtc=AnalogBaroTextColor;abnc=AnalogBaroNeedleColor;
tgd="<div id='barometer' style='"+fst+"width:220px; height:180px;'><img src='dbimages/barometer2.gif'></div>";
document.getElementById("barometer").parentNode.innerHTML=tgd;
var jg=new jsGraphics("barometer");
jg.drawImage('dbimages/'+bardata[5]+'.gif',70,97,9,29);
val=0;
if(parseFloat(bardata[0])<100){
val=Math.ceil(bardata[0]/0.029528750668088)-565;
}else{
val=parseInt(bardata[0])-565;
}
to=getpixel(110,110,63,val,2);
jg.setColor(abnc || "#990000");
jg.setStroke(2);
jg.drawLine(110,110,to[0],to[1]);
jg.drawEllipse(103,103,14,14);
jg.setColor("#999999");jg.fillEllipse(105,105,12,12);
jg.setFont("verdana","9px",Font.PLAIN);
jg.setColor(abtc || "#555555");
jg.drawStringRect("Now: "+parseFloat(bardata[0]),60,138,100,"center")
jg.setFont("verdana","9px",Font.PLAIN);
jg.setColor(abtc || "#555555");
jg.drawStringRect("Max: "+parseFloat(bardata[3]),60,150,100,"center")
jg.setFont("verdana","9px",Font.PLAIN);
jg.setColor(abtc || "#555555");
jg.drawStringRect("Min: "+parseFloat(bardata[4]),60,162,100,"center")
mo[0]="Current:"+bardata[0]+" "+bardata[1];
mo[1]="Max Today:"+parseFloat(bardata[3])+" "+bardata[1];
mo[2]="Min Today:"+parseFloat(bardata[4])+" "+bardata[1];
mo[3]="Trend:"+bardata[2];
document.getElementById("barometer").title="header=[Barometer ("+bardata[1]+")] body=["+getmo(mo)+"] delay=["+mod+"]";
}else{
w=90;
h=100;
tgd="<div id='barometer' style='"+fst+"width:"+w+"px; height:"+h+"px;'></div>";
document.getElementById("barometer").parentNode.innerHTML=tgd;
var jg=new jsGraphics("barometer");
jg.setColor("#AAAAAA");
jg.fillRect(0,0,w,h);
jg.setColor("#DDDDDD");
jg.fillRect(5,5,w-10,23);
jg.setColor("#FEFEFE");
jg.drawLine(0,0,w,0);
jg.setColor("#FEFEFE");
jg.drawLine(0,0,0,h);
jg.setColor("#000000");
jg.drawLine(1,h,w,h);
jg.setColor("#000000");
jg.drawLine(w,h,w,1);
jg.setColor("#FEFEFE");
jg.drawLine(5,28,w-5,28);
jg.setColor("#FEFEFE");
jg.drawLine(w-5,5,w-5,28);
jg.setColor("#000000");
jg.drawLine(5,5,w-5,5);
jg.setColor("#000000");
jg.drawLine(5,5,5,28);
jg.setFont("verdana","18px",Font.BOLD);
jg.setColor("#000000");
jg.drawStringRect(bardata[0],5,5,w-10,"center");
jg.setFont("verdana","9px",Font.PLAIN);
jg.setColor("#FFFFFF");
jg.drawStringRect(bardata[1],5,36,70,"left");
jg.drawImage('dbimages/'+bardata[5]+'.gif',w-14,35,9,29);
jg.setFont("verdana","9px",Font.PLAIN);
jg.setColor("#FFFFFF");
jg.drawStringRect(bardata[2],5,50,70,"left");
jg.setFont("verdana","9px",Font.PLAIN);
jg.setColor("#FFFFFF");
jg.drawStringRect("Max: "+parseFloat(bardata[3]),5,70,w-10,"center");
jg.setFont("verdana","9px",Font.PLAIN);
jg.setColor("#FFFFFF");
jg.drawStringRect("Min: "+parseFloat(bardata[4]),5,82,w-10,"center");
}
jg.paint();
}

function dowind(){
toadd=2.5;maxspeed=10;

if(winddata[0].indexOf("Calm")>-1)winddata[0]=winddata[0].replace("Calm","0");
if(winddata[2].indexOf("Calm")>-1)winddata[2]=winddata[2].replace("Calm","0");

for(i=0;i<hwspd.length-1;i++){
if(hwspd>80){toadd=30;maxspeed=120;}
else if(hwspd>40 && maxspeed<80){toadd=20;maxspeed=80;}
else if(hwspd>20 && maxspeed<40){toadd=10;maxspeed=40;}
else if(hwspd>10 && maxspeed<20){toadd=5;maxspeed=20;}
}
if(Math.max(parseFloat(winddata[0]),parseFloat(winddata[2]))>80 && maxspeed<120){toadd=30;maxspeed=120;}
else if(Math.max(parseFloat(winddata[0]),parseFloat(winddata[2]))>40 && maxspeed<80){toadd=20;maxspeed=80;}
else if(Math.max(parseFloat(winddata[0]),parseFloat(winddata[2]))>20 && maxspeed<40){toadd=10;maxspeed=40;}
else if(Math.max(parseFloat(winddata[0]),parseFloat(winddata[2]))>10 && maxspeed<20){toadd=5;maxspeed=20;}

factor=toadd/10;
tgd="<div id='wind' style='"+fst+"width:220px; height:220px;'><img src='dbimages/windrose"+maxspeed+".gif'></div>";
document.getElementById("wind").parentNode.innerHTML=tgd;

mo[0]="Gust:"+winddata[0]+" "+wsu+" - "+getord(parseInt(winddata[1]));
mo[1]="Avg:"+winddata[2]+" "+wsu+" - "+getord(parseInt(winddata[3]));

tmo=winddata[4].substring(0,winddata[4].indexOf(","));
tmod=winddata[4].substring(winddata[4].indexOf(",")+1,winddata[4].indexOf("&#176;"));
tmos=parseInt(tmod);
tmo+=" - "+getord(tmos);
mo[2]="Max:"+tmo;

document.getElementById("wind").title="header=[Wind ("+wsu+")] body=["+getmo(mo)+"] delay=["+mod+"]";
var jg=new jsGraphics("wind");
jg.setFont("arial","10px",Font.PLAIN);
jg.drawStringRect(wsu,10,10,70,"left");

for(i=0;i<hwspd.length-1;i++){
hist=getpixel(110,108,maxspeed-hwspd,hwdir,factor);
jg.setColor(WindHistColor || "#777700");
jg.setStroke(1);jg.fillRect(hist[0],hist[1],2,2);
}

if(winddata[0]>winddata[2]){
plotf=new Array(0,1,WindGustColor || "#990000");
plots=new Array(2,3,WindAvgColor || "#009900");
}else{
plotf=new Array(2,3,WindAvgColor || "#009900");
plots=new Array(0,1,WindGustColor || "#990000");
}

from=getpixel(110,108,maxspeed,parseInt(winddata[plotf[1]]),factor);
to=getpixel(110,108,maxspeed-parseFloat(winddata[plotf[0]]),parseInt(winddata[plotf[1]]),factor);
jg.setColor(plotf[2]);jg.setStroke(2);jg.drawLine(from[0],from[1],to[0],to[1]);
jg.fillEllipse(from[0]-2,from[1]-2,6,6);

from=getpixel(110,108,maxspeed,parseInt(winddata[plots[1]]),factor);
to=getpixel(110,108,maxspeed-parseFloat(winddata[plots[0]]),parseInt(winddata[plots[1]]),factor);
jg.setColor(plots[2]);jg.setStroke(2);jg.drawLine(from[0],from[1],to[0],to[1]);
jg.fillEllipse(from[0]-2,from[1]-2,6,6);

jg.paint();
}

[mcrossley]

Just these two lines need amending...

tgd="<div id='barometer' style='"+fst+"width:220px; height:180px;'><img src='dbimages/barometer2.gif'></div>";

tgd="<div id='wind' style='"+fst+"width:220px; height:220px;'><img src='dbimages/windrose"+maxspeed+".gif'></div>";


Add the 'style' attribute the the <img> tags.

[oman4eva]

Thanks Mark,

That worked a charm, http://www.atmosp.physics.utoronto.ca/wstat/gauges.htm

I should mention that when i copied your style text directly it didn't work. I figured out that i needed to copy the quoting format already used in the file (pehaps?) and hence i used single quotes as apposed to double.

eg.

this didn't work

tgd="<div id='barometer' style='"+fst+"width:220px; height:180px;'><img src='dbimages/barometer2.gif' style="background-color: #EFEFEF" ></div>";

but this did

tgd="<div id='barometer' style='"+fst+"width:220px; height:180px;'><img src='dbimages/barometer2.gif' style='background-color: #EFEFEF'></div>";



cheers
oman

[mcrossley]

Yes, you have to take the nested quotation marks into account - glad it worked out.