Cumulus Support

Support forum for Cumulus weather station software
https://cumulus.hosiene.co.uk/

Editing the Dashboard.js file for different guage look.

https://cumulus.hosiene.co.uk/viewtopic.php?t=3480

Page 1 of 7

Editing the Dashboard.js file for different guage look.

Posted: Thu 07 Oct 2010 12:08 am
by msjohansen
I'm hoping some one know javascript. What I am trying to do is to change the appearance of the thermos.gif image and I think I need to make modifications to the dashboard.js file as well. Here is an image I doctored up to show what I would like to see. I want to add the green line for the current temp for easier viewing. Anyone know how to do this? Please help. I am currently using Cumulus 1.9.

Re: Editing the Dashboard.js file for different guage look.

Posted: Mon 18 Oct 2010 7:09 pm
by mcrossley
Oops, ignore that, I did the humidity gauge :oops: I'll post the same for the temp gauge in a min!

Re: Editing the Dashboard.js file for different guage look.

Posted: Mon 18 Oct 2010 7:22 pm
by mcrossley
Right! In the dotemps(tit,id,eid,size,data) function, you should find at line 117...

Code: Select all

 if(!isNaN(t)){
  jg.fillRect(38,t,15,b);
  mo[c]="Current:"+valnow+" "+tu;
 }
Change this to...

Code: Select all

 if(!isNaN(t)){
  jg.setColor("#00FF00");
  jg.drawline(l,t,100,t);
  jg.setFont("verdana","9px",Font.PLAIN);
  jg.drawStringRect(valnow,104,t,20,"left")
  mo[c]="Current:"+valnow+" "+tu;
 }
Totally untested, so it may need some tweaking. It also looks like you have moved teh graphic over the left, so all the left offsets in that function may need changing.

Re: Editing the Dashboard.js file for different guage look.

Posted: Tue 19 Oct 2010 2:43 pm
by gemini06720
Mark, you "almost" got it right the first time... :twisted:

The 'drawline' command need an uppercase L, such as 'drawLine'

Here is a modified and tested version of your code:

Code: Select all

...
  if(!isNaN(t)){
    jg.fillRect(38,t,15,b);
    jg.setColor("#0000FF");
    jg.drawLine(55,t,100,t);
    jg.setFont("verdana","10px",Font.PLAIN);
    jg.drawStringRect((valnow+"°"+tu),105,t-7,30,"left");
    mo[c]="Current:"+valnow+" "+tu;
  } else {
...
Now I must experiment with the other gauges... :D

Re: Editing the Dashboard.js file for different guage look.

Posted: Tue 19 Oct 2010 2:49 pm
by mcrossley
Sorry Ray, I must try harder! :bash: :lol:

Re: Editing the Dashboard.js file for different guage look.

Posted: Tue 19 Oct 2010 2:57 pm
by gemini06720
Mark, do not beat yourself silly... :mrgreen:

I also did the humidity graph ... but I could not figure out how to do it with both the rain graph and the cloud base/heigh graph... :oops:

It is time for me to get some sleep... :|

Re: Editing the Dashboard.js file for different guage look.

Posted: Sat 23 Oct 2010 5:10 pm
by msjohansen
You both are the best. The code works great. I tweaked the code just a bit because I was getting two ° on the temp reading. I removed it from the quotes in the code and all is well now. I played around with the humidity graphs and works awesome. Here is what I did for humidity.

if(!isNaN(t)){
jg.fillRect(50,t,15,b);
jg.setColor("#0000FF");
jg.drawLine(55,t,100,t);
jg.setFont("verdana","10px",Font.BOLD);
jg.drawStringRect((+parseFloat(data[0])+" %"),105,t-7,30,"left");

Here is my webpage for review. http://home.centurytel.net/johansenms/gauges.htm

Re: Editing the Dashboard.js file for different guage look.

Posted: Sun 24 Oct 2010 12:37 am
by beteljuice
Why stop there ?
Gauge.png

Code: Select all

function dotemps(tit,id,eid,size,data){
 if(size=="large"){ 
  tgd="<div id='"+id+"' style='"+fst+"width:90px;'><img src='dbimages/thermol.gif'></div>";
  factor=1;
  bottom=375;
 }else{ 
  tgd="<div id='"+id+"' style='"+fst+"width:90px;'><img src='dbimages/thermos.gif'></div>";
  factor=2;
  bottom=195;
 } 
 
 eid.parentNode.innerHTML=tgd;
 eid=document.getElementById(id);
 
 tu = tempunits.replace("&#176;","°");
 
 if(tu.indexOf("C")>-1){
  scale=3.6/factor;maxm=60;
 }else{
  scale=2/factor;maxm=140;
 }
 
 valnow=parseFloat(data[0]);
 t=parseInt(((maxm-valnow)*scale)+16);b=(bottom-t)+1;l=31;r=60;
 var jg=new jsGraphics(id);
 jg.setColor(TempColor || "#A0C4E7");
 
 mo = new Array()
 c = 0;
 
 if(!isNaN(t)){
  jg.fillRect(38,t,15,b);
  jg.drawLine(l,t,95,t);
  jg.setFont("verdana","10px",Font.PLAIN);
  jg.setColor("#000000");
  jg.drawStringRect((valnow+" "+tu),95,t-7,50,"left");
  mo[c]="Current:"+valnow+" "+tu;
 }
 else mo[c]="Current:Not Available";
 c++;
 
 if(data[1]){
  jg.setColor("#0000FF");
  val=parseFloat(data[1]);
  t=parseInt(((maxm-val)*scale)+16);
  if(!isNaN(t))jg.drawLine(-25,t,r,t);
  jg.setFont("verdana","10px",Font.PLAIN);
  jg.drawStringRect((val+" " +tu),-55,t+2,50,"right");
  mo[c]="Min Today:"+val+" "+tu;
  c++;
 }
 
 if(data[2]){
  jg.setColor("#FF0000");
  val=parseFloat(data[2]);
  t=parseInt(((maxm-val)*scale)+16);
  if(!isNaN(t))jg.drawLine(-25,t,r,t);
  jg.setFont("verdana","10px",Font.PLAIN);
  jg.drawStringRect((val+" " +tu),-55,t-12,50,"right");
  mo[c]="Max Today:"+val+" "+tu;
  c++;
 }
  
 if(data[3]){
  jg.drawImage('dbimages/'+data[4]+'.gif',41,bottom-33,9,29);
  mo[c]="Trend:"+data[3];
 }
 
 jg.paint();
 eid.title="header=["+tit+" ("+tempunits+")] body=["+getmo(mo)+"] delay=["+mod+"]";
}
It will probably look a bit "busy" if you are using degrees F, and would need tweaking either the start / end points or reducing the font size.

Re: Editing the Dashboard.js file for different guage look.

Posted: Tue 26 Oct 2010 12:28 pm
by beteljuice
Just realized that although the 'bar' type barometer shows Min / Max, the 'anolog' (dial and needle) does not !

So:
Baro.png

Code: Select all

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);
  // do 'current' needle
  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 || "#000000"); // BLACK default unless set in html page
  jg.setStroke(2);
  jg.drawLine(110,110,to[0],to[1]);
  jg.drawEllipse(103,103,14,14);
  // do 'Max' needle
    val=0;
  if(parseFloat(bardata[3])<100){
   val=Math.ceil(bardata[3]/0.029528750668088)-565;
  }else{
   val=parseInt(bardata[3])-565;
  }
  to=getpixel(110,110,55,val,2);
  jg.setColor("#FF0000"); // RED
  jg.drawLine(110,110,to[0],to[1]);
  // do 'Min' needle
    val=0;
  if(parseFloat(bardata[4])<100){
   val=Math.ceil(bardata[4]/0.029528750668088)-565;
  }else{
   val=parseInt(bardata[4])-565;
  }
  to=getpixel(110,110,55,val,2);
  jg.setColor("#0000FF"); // BLUE
  jg.drawLine(110,110,to[0],to[1]);
  
  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();
}

Re: Editing the Dashboard.js file for different guage look.

Posted: Tue 26 Oct 2010 1:06 pm
by mcrossley
Mine does :roll:
http://weather.wilmslowastro.com/gauges.htm

Re: Editing the Dashboard.js file for different guage look.

Posted: Tue 26 Oct 2010 1:14 pm
by steve
I think your gauges should become the default...

Re: Editing the Dashboard.js file for different guage look.

Posted: Tue 26 Oct 2010 1:15 pm
by beteljuice
That is not dashboard.js - as in the title of the topic :lol:

Re: Editing the Dashboard.js file for different guage look.

Posted: Tue 26 Oct 2010 1:21 pm
by mcrossley
Well it WAS dashboard.js
steve wrote:I think your gauges should become the default...
Anyone is welcome to the code (after all most of t is other peoples anyway! :lol: ), I've never considered it finished (are these things ever?), but if you want to package it up for a future release I can do that - maybe an optional extra?

Re: Editing the Dashboard.js file for different guage look.

Posted: Tue 26 Oct 2010 1:26 pm
by steve
mcrossley wrote:but if you want to package it up for a future release I can do that - maybe an optional extra?
Yes, that would be good. I could put it on the 'downloads' page perhaps, and either keep the file on my server, and/or just link to a page in the wiki, and you could host the actual file, if you wanted.

Re: Editing the Dashboard.js file for different guage look.

Posted: Tue 26 Oct 2010 3:39 pm
by nking
Hi Mark,

I rarely look at the gauges page but I probably would with yours, they're very good. :clap:
All times are UTC
Page 1 of 7

Powered by phpBB® Forum Software © phpBB Limited