Capt. Horatio T.P. Webb

HTML 5 GAUGE EXAMPLES Parks -- Fall 2013

Here are two canvas elements:

<canvas id="canvas1" width="400" height="400" style="border:solid black 1px;"></canvas>
<canvas id="canvas2" width="400" height="400" style="border:solid black 1px;"></canvas>

var gex;
var g;
var fs3;
var xc;
var yc;
var bgcolor;
var curd;
var spdval;
// *********************************************
// *                                           *
// *  Captain Webb's Speedometer Using Canvas  *
// *                                           *
// *********************************************

function init()
{
gex = document.getElementById("gauge1");
g = gex.getContext("2d");

sx=0;
sy=0;
xc=200;
yc=200;
w=400;
g.clearRect(0,0,w,w);
bgcolor="#aaaaaa";

t1="CAPT. WEBB'S";
t1b="WIND GAUGE";
t1color="#000000";
t2="WIND SPEED IN KNOTS";
t2color="#333333";
fs1=16;      // top font size
fs2=12;      // bottom font size
fs3=40;      // value font size
fs4=16;      // tick scale font

outrad=xc-8; // radius of scale ring
scalew=8     // windth of scale ring

nscale_colors=3;
var scale_start_colors= new Array("green","yellow","red");
var scale_pc_colors=new Array (0.0,0.333,0.666,1.0);

scale_actual_start=0.0;
scale_actual_end=200.0;

nticks=10; // doesn't count start and end
tickdif=300.0/nticks; //nticks
minorticks=5;

scale_actual_start=0.0;
scale_actual_end=200.0;

// arc calculated like this:
  a1=120.0*Math.PI/180.0;   // start angle in radians
//a2=420.0*Math.PI/180.0;  end angle in radians (300 degree sweep)

spdval=document.dform.spd.value; // get textbox value
curpc=spdval/200.0;   // convert to between 0.0 and 1.0 (proportion of 200 MPH)
curdeg=a1+curpc*300.0*Math.PI/180.0; // a1 (the start angle in radians) + % of 300 degrees in randians
curd=curpc*300.0; // actual degrees from start
// lose the digits beyopund two after the decimal
curdeg=curdeg*100.0;
curdeg=Math.round(curdeg);
curdeg=curdeg/100.0;
// *** fill area
g.clearRect(sx,sy,w,w);
g.fillStyle=bgcolor;
g.fillRect(sx,sy,w,w);

// ** text upper and lower
g.font="bold "+fs1.toString()+"px Trebuchet MS";
g.fillStyle=t1color;
txtmeasure=g.measureText(t1);
g.fillText( t1, (xc-txtmeasure.width/2.0) , (yc/2+fs1) );
txtmeasure=g.measureText(t1b);
g.fillText( t1b, (xc-txtmeasure.width/2.0) , (yc/2+3*fs1) );

g.font="bold "+fs2.toString()+ "px Trebuchet MS";
g.fillStyle=t2color;
txtmeasure=g.measureText(t2);
g.fillText( t2, (xc-txtmeasure.width/2.0) , (1.30*yc) );
//
// **** draw ticks
//
deg=-150.0;
g.strokeStyle="black";
ctick=scale_actual_start;
ctickdiff=(scale_actual_end - scale_actual_start)/nticks;
for (i=0;i<(nticks+1);i++)
    {
     g.beginPath();
     g.lineWidth=3;
     x1=xc+Math.sin(deg*Math.PI/180.0)*(xc-4);
     y1=yc+Math.cos(deg*Math.PI/180.0)*(xc-4)*(-1.0);
     x2=xc+Math.sin(deg*Math.PI/180.0)*(xc-25.0);
     y2=yc+Math.cos(deg*Math.PI/180.0)*(xc-25.0)*(-1.0);
     //alert(" x1="+x1.toString()+" y1="+y1.toString()+" x2="+x2.toString()+" y2="+y2.toString());
     g.moveTo(x1,y1);
     g.lineTo(x2,y2);
     g.stroke();
     g.font="bold "+fs4.toString()+"px Trebuchet MS";
     tvalue=ctick.toString();
     txtmeasure=g.measureText(tvalue);
     x3=xc+Math.sin(deg*Math.PI/180.0)*(xc-40);
     y3=yc+Math.cos(deg*Math.PI/180.0)*(xc-40)*(-1.0);
     g.fillText(tvalue,x3-txtmeasure.width/2,y3+fs4/2.0);
     ctick=ctick+ctickdiff;
     deg=deg+tickdif;
     g.strokeStyle="black";
     g.closePath();
    }
//
// *** draw color scales
//
g.lineWidth=scalew;
for (i=0;i<nscale_colors;i++)
    {
    g.beginPath();
    g.strokeStyle=scale_start_colors[i];
    sangle1=a1+scale_pc_colors[i]   *300.0*Math.PI/180.0;
    sangle2=a1+scale_pc_colors[i+1] *300.0*Math.PI/180.0;
    g.arc(xc,yc,outrad,sangle1,sangle2,false);
    g.stroke();
    g.closePath();
    }
    draw_current(curpc);
}
function draw_current(x) // ******************************************* draw_current *****************
{
 var ndigits_right=1
 g.font="bold "+fs3.toString()+"px Trebuchet MS";
 g.fillStyle=t1color;
 display_value=scale_actual_start+ x *(scale_actual_end-scale_actual_start);

 p0=display_value.toString();
 p0_len=p0.length;
 loc_dec=p0.indexOf(".");
 if (loc_dec == -1)
     display_value=p0+".00";
 else
      {
       p1=p0.substr(0,loc_dec)
       p2=p0.substr( (loc_dec+1), ndigits_right);
       display_value=p1+"."+p2;
      }

 txtmeasure=g.measureText(display_value);
 g.fillStyle="black";
 g.fillRect((xc-txtmeasure.width/2.0-5),(1.37*yc),txtmeasure.width+15,fs3+8);
 g.fillStyle="green";
 g.fillText( display_value, (xc-txtmeasure.width/2.0) , (1.55*yc) );

 bw=30;
 bw2=bw/2.0;
 blen=40;
 flen=140;
 degp=-240.0+curd;

 px1=-blen;
 py1=-bw2;
 px2=flen;
 py2=-1;
 px3=flen;
 py3=1;
 px4=-blen;
 py4=bw2;

 g.fillStyle="white";
 g.shadowColor = "black";
 g.shadowOffsetX = 3;
 g.shadowOffsetY = 3;
 g.shadowBlur = 3;
 g.save();
 g.translate(xc,yc);
 g.rotate(degp*Math.PI/180.0);
 g.beginPath();
 g.moveTo(px1,py1);
 g.lineTo(px2,py2);
 g.lineTo(px3,py3);
 g.lineTo(px4,py4);
 g.fill();
 g.translate(-xc,-yc);
 g.restore();

 g.beginPath();
 g.arc(xc,yc,30,0.0,2.0*Math.PI,false);
 g.fill();
 g.closePath();

 g.shadowColor = "bgcolor";
 g.shadowOffsetX = 0;
 g.shadowOffsetY = 0;
 g.shadowBlur = 0;
}
function randomdemo()
{
 demotimer = setInterval ( "showone()", 2000 )
 // alert ("created interval");
}
function showone()
{
  tval=200.0*Math.random();
  document.dform.spd.value=tval;
  init();
}
function stopdemo()
{
 clearInterval ( demotimer ) ;
 // alert ("clearInterval");
}

var gex2;
var g2;
var fs32;
var xc2;
var yc2;
var bgcolor2;
var curd2;
var spdval2;
// *************************************************************************
// *                                                                       *
// *       Captain Webb's Compass  -- Using HTML5 Canvas                   *
// *                                                                       *
// *************************************************************************
function init2()
{
gex2 = document.getElementById("gauge2");
g2 = gex2.getContext("2d");

sx=0;
sy=0;
xc=200;
yc=200;
w=400;
g2.clearRect(0,0,w,w);
bgcolor2="#aaaaaa";

t12="CAPT. WEBB'S"
t12b="COMPASS";
t12color="#000000";
t22="COURSE DIRECTIONS IN DEGREES";
t22color="#333333";

fs1=16;      // top font size
fs2=12;      // bottom font size
fs32=40;      // value font size
fs4=16;      // tick scale font
fs5=36;

outrad=xc-8; // radius of scale ring
scalew=8     // windth of scale ring

scale_actual_start=0.0;
scale_actual_end=360.0;

nticks=16; // doesn't count start and end
tickdif=360.0/nticks; //nticks


scale_actual_start=0.0;
scale_actual_end=360.0;


// arc calculated like this:
  a1=150.0*Math.PI/180.0;   // start angle in radians
//a2=450.0*Math.PI/180.0;  end angle in radians (360 degree sweep)

spdval2=document.dform2.spd2.value; // get textbox value
curpc=spdval2/360.0;   // convert to between 0.0 and 1.0 (proportion of 200 MPH)
curdeg=a1+curpc*360.0*Math.PI/180.0; // a1 (the start angle in radians) + % of 300 degrees in radians
curd=curpc*360.0; // actual degrees from start
// lose the digits beyopund two after the decimal
curdeg=curdeg*100.0;
curdeg=Math.round(curdeg);
curdeg=curdeg/100.0;
// *** fill area
g2.clearRect(sx,sy,w,w);
g2.fillStyle=bgcolor2;
g2.fillRect(sx,sy,w,w);

// ** text upper and lower
g2.font="bold "+fs1.toString()+"px Trebuchet MS";
g2.fillStyle=t12color;
txtmeasure=g2.measureText(t12);
g2.fillText( t12, (xc-txtmeasure.width/2.0) , (yc/2+fs1) );
txtmeasure=g2.measureText(t12b);
g2.fillText( t12b, (xc-txtmeasure.width/2.0) , (yc/2+3*fs1) );

g2.font="bold "+fs2.toString()+ "px Trebuchet MS";
g2.fillStyle=t22color;
txtmeasure=g2.measureText(t22);
g2.fillText( t22, (xc-txtmeasure.width/2.0) , (1.30*yc) );

//
// **** draw ticks
//
deg=0.0;

ctick=scale_actual_start;
ctickdiff=(scale_actual_end - scale_actual_start)/nticks;
var dn = new Array("N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW");
   for (i=0;i<16;i++)
     {
     g2.strokeStyle="black";
     g2.lineWidth=3;
     g2.beginPath();
     x1=xc+Math.sin(deg*Math.PI/180.0)*(xc-4);
     y1=yc+Math.cos(deg*Math.PI/180.0)*(xc-4)*(-1.0);
     x2=xc+Math.sin(deg*Math.PI/180.0)*(xc-25.0);
     y2=yc+Math.cos(deg*Math.PI/180.0)*(xc-25.0)*(-1.0);
     //alert(" x1="+x1.toString()+" y1="+y1.toString()+" x2="+x2.toString()+" y2="+y2.toString());
     g2.moveTo(x1,y1);
     g2.lineTo(x2,y2);
     g2.stroke();

     g2.fillStyle="red";
     if (i==0 || i==4 || i== 8 || i==12)
         g2.font="bold "+fs5.toString()+"px Trebuchet MS";
     else
         g2.font="bold "+fs4.toString()+"px Trebuchet MS";
     tvalue=dn[i].toString();
     txtmeasure=g2.measureText(tvalue);
     x3=xc+Math.sin(deg*Math.PI/180.0)*(xc-50);
     y3=yc+Math.cos(deg*Math.PI/180.0)*(xc-50)*(-1.0);
     g2.fillText(tvalue,x3-txtmeasure.width/2,y3+fs4/2.0);

     ctick=ctick+ctickdiff;
     deg=deg+tickdif;
     g2.strokeStyle="black";
     g2.closePath();
    }
   deg=0.0
   for (i=0;i<72;i++)
     {
     g2.beginPath();
     g2.strokeStyle="black";
     g2.lineWidth=1;
     x1=xc+Math.sin(deg*Math.PI/180.0)*(xc-4);
     y1=yc+Math.cos(deg*Math.PI/180.0)*(xc-4)*(-1.0);
     x2=xc+Math.sin(deg*Math.PI/180.0)*(xc-20.0);
     y2=yc+Math.cos(deg*Math.PI/180.0)*(xc-20.0)*(-1.0);
     g2.moveTo(x1,y1);
     g2.lineTo(x2,y2);
     g2.stroke();
     g2.closePath();
     deg=deg+5.0;
     }
//
// *** draw color scales
//
g2.lineWidth=scalew;


    g2.beginPath();
    g2.strokeStyle="black";
    sangle1=a1+0   *300.0*Math.PI/180.0;
    sangle2=a1+1.0 *360.0*Math.PI/180.0;
    g2.arc(xc,yc,outrad,sangle1,sangle2,false);
    g2.stroke();
    g2.closePath();

    draw_current2(curpc);
}
function draw_current2(x) // ******************************************* draw_current *****************
{
 var ndigits_right=1
 g2.font="bold "+fs32.toString()+"px Trebuchet MS";
 g2.fillStyle=t12color;
 display_value=scale_actual_start+ x *(scale_actual_end-scale_actual_start);

 p0=display_value.toString();
 p0_len=p0.length;
 loc_dec=p0.indexOf(".");
 if (loc_dec == -1)
     display_value=p0+".00";
 else
      {
       p1=p0.substr(0,loc_dec)
       p2=p0.substr( (loc_dec+1), ndigits_right);
       display_value=p1+"."+p2;
      }

 txtmeasure=g2.measureText(display_value);
 g2.fillStyle="black";
 g2.fillRect((xc-txtmeasure.width/2.0-5),(1.37*yc),txtmeasure.width+15,fs32+8);
 g2.fillStyle="green";
 g2.fillText( display_value.toString(), (xc-txtmeasure.width/2.0) , (1.55*yc) );
 bw=30;
 bw2=bw/2.0;
 blen=40;
 flen=180;
 degp=-90.0+curd;

 px1=-blen;
 py1=-bw2;
 px2=flen;
 py2=-1;
 px3=flen;
 py3=1;
 px4=-blen;
 py4=bw2;

 g2.fillStyle="white";
 g2.shadowColor = "black";
 g2.shadowOffsetX = 3;
 g2.shadowOffsetY = 3;
 g2.shadowBlur = 3;
  g2.save();
 g2.translate(xc,yc);
 g2.rotate(degp*Math.PI/180.0);
 g2.beginPath();
 g2.moveTo(px1,py1);
 g2.lineTo(px2,py2);
 g2.lineTo(px3,py3);
 g2.lineTo(px4,py4);
 g2.fill();
 g2.translate(-xc,-yc);
 g2.restore();

 g2.beginPath();
 g2.arc(xc,yc,30,0.0,2.0*Math.PI,false);
 g2.fill();
 g2.closePath();

 g2.shadowColor = "bgcolor";
 g2.shadowOffsetX = 0;
 g2.shadowOffsetY = 0;
 g2.shadowBlur = 0;

 //g2.restore();
 //alert ("end display");


}

function randomdemo2()
{
 demotimer2 = setInterval ( "showone2()", 2000 )
 // alert ("created interval");
}
function showone2()
{
  tval=360.0*Math.random();
  document.dform2.spd2.value=tval;
  init2();
}
function stopdemo2()
{
 clearInterval ( demotimer2 ) ;
 // alert ("clearInterval");
}