Gauge maker|canvas|HTML 5

<!DOCTYPE html>
<html>
<head>
<!--
Usage:

When the "make" button on the make_gauge.htm page is clicked, the code creates:

1. A textarea (at the bottom of the page) with both the javascript code for
   the function you named: **4** AND html necessary for the gauge

2. Opens a new tab with the HTML/javascript code for the gauge you have designed.
   It includes a test slider to demonstrate and check the gauge's functions.

The javascript uses: NO global variables and requires NO css in the HEAD.
To use the gauge there are TWO PARTS:

1. PART 1 -- javascript

Place the single javascript function you created in the gauge maker inside the
   your HTML pages's HEAD tags.

The function you created begins like this:

function **4**(**4**_gauge_field_left, **4**_gauge_field_top, **4**_value)

When you use the **4** function you pass the arguments:

1. The page left position (in pixels) of the upper left-hand corner of the gauge field
      and canvas (called: **4**_gauge_field_left )
   2. The page top  position (in pixels) of the upper left-hand corner of the gauge field
      and canvas (called: **4**_gauge_field_top )
   3. The value to be displayed on the gauge (called: **4**_value)

Typical usage would be:

**4**(123,11,some_value);

Where:
      1. 123 is the left pixel position of the upper left-hand corner of the gauge's canvas and the gauge field
      2.  11 is the top  pixel position of the upper left-hand corner of the gauge's canvas and the gauge field
      3. the value of the variable some_value will be displayed on the gauge

2. PART 2 -- the HTML

There are 5 HTML elements required for the gauge:

1. a canvas for the gauge (id="**4**_canvas")
   2. a rectangular gauge field that contains the canvas (id="**4**_gover_div)

Both the canvas and gauge field are absolutely positioned according to the first two
   parameters passed to the function. The default values are left=40px, top=40px.

The gauge rectangle overlays the canvas and contains three DIV blocks:

3. a DIV block for the first text field (id="**4**_text1_div")
   4. a DIV block for the second text field (id="**4**_text1_div")
   5. a DIV block for the gauge display value (id="**4**_display_div")

All of the DIV block locations (top and left) may be adjusted by the user.

At the bottom of the HTML portion, The test_slider DIV and all its contents should be removed after testing.

-->
<script language="javascript">
<!--
function **4**(**4**_gauge_field_left,**4**_gauge_field_top,**4**_value)
{
  var colv = new Array(3);
  var cab = new Array(4);
  var swangle = new Array(4);
  try {
       **200** = document.getElementById("**202**"); // *** create context and canvas
       **201** = **200**.getContext("2d");
      }
  catch (e)
     {
      alert ("HTML 5 Canvas is NOT supported by this browser");
      return;
     }
 //
 // *** get canvas size
 //
 fname="**4**";
 rad=parseInt(**5**);   // *** user defined gauge overall radius
 rad2=parseInt(**6**);  // *** user defined gauge scale radius
 w=parseInt(**26**);    // *** user defined gauge field width
 h=parseInt(**27**);    // *** user defined gauge field height
 xc=w/2;
 yc=h/2;
//
// *** place canvas, overlay, test slider (from paramters passing intoi this function)
//
document.getElementById("**202**").style.left=parseInt(**4**_gauge_field_left).toString()+"px";
document.getElementById("**203**").style.left=parseInt(**4**_gauge_field_left).toString()+"px";
document.getElementById("**202**").style.top=parseInt(**4**_gauge_field_top).toString()+"px";
document.getElementById("**203**").style.top=parseInt(**4**_gauge_field_top).toString()+"px";
document.getElementById("**204**").style.top=parseInt(**4**_gauge_field_top+h+20).toString()+"px";
document.getElementById("**204**").style.left=parseInt(**4**_gauge_field_left).toString()+"px";
document.getElementById("**204**").style.width=parseInt(w).toString()+"px";
 //
 // *** set canvas and gauge field size
 //
 **200**.width=w;
 **200**.height=h;
 document.getElementById("**203**").style.width=w.toString()+"px";
 document.getElementById("**203**").style.height=h.toString()+"px";
 //
 // circular gauge face background colors -- rgb (% red, %green, % blue)
 //
 backgr1=**13**;
 backgg1=**14**;
 backgb1=**15**;
//
// circular gauge face background2 -- used if radial gradient chosen
//
 backgr2=**17**;  // ** 17 gbcr2
 backgg2=**18**;
 backgb2=**19**;
//
// *** numeric scale text colors -- rgb (% red, %green, % blue)
//
 rgs=**23**;
 ggs=**24**;
 bgs=**25**;
//
// *** fill gauge field rectangle with transparent
//     fill gauge circle with background color
//
// **30** is transparency outcome
// **31** is gauge field r background color if gfchk is NOT checked
// **32** is gauge field g background color if gfchk is NOT checked
// **33** is gauge field b background color if gfchk is NOT checked
r1=**31**;
g1=**32**;
b1=**33**;
gfsw=**30**; // switch for transparency (rgba)
if (gfsw==0)
   {
     **201**.fillStyle="rgba(0,0,0,0.0)";
     **201**.fillRect(0,0,w,h);
   }
else
   {
    **201**.fillStyle="rgb("+r1+"%,"+g1+"%,"+b1+"%)";
    **201**.fillRect(0,0,w,h);
   }
//
// *** fill gauge with solid or radial gradient color
//
bgradsw=**16**;
 if (bgradsw==0) // 16 bgradsw SWITCH (checked means radial (1), 0 = solid)
    {
     **201**.fillStyle="rgba("+backgr1+"%,"+backgg1+"%,"+backgb1+"%,1.0)";
     **201**.arc(xc,yc,rad,0.0,2.0*Math.PI,false);
     **201**.fill();
     }
else
    {
     var grbg = **201**.createRadialGradient(xc,yc,0.0,xc,yc,rad);
     grbg.addColorStop(0.0,"rgb("+backgr1+"%,"+backgg1+"%,"+backgb1+"%)");
     grbg.addColorStop(1.0,"rgb("+backgr2+"%,"+backgg2+"%,"+backgb2+"%)");
     **201**.fillStyle = grbg;
     **201**.arc(xc,yc,rad,0.0,2.0*Math.PI,false);
     **201**.fill();
     }
     **201**.beginPath();
//
// *** set borders for gauge field  -- rgb (% red, %green, % blue)
//
gfbcr=**634**;
gfbcg=**635**;
gfbcb=**636**;
tempfix="**29**"; // *** fix IE bug that provides an extra space in the option text string
document.getElementById("**203**").style.border="**28**"+" "+tempfix.toString()+"px rgb("+gfbcr.toString()+"%,"+gfbcg.toString()+"%,"+gfbcb.toString()+"%)";
//
// *** display tit1e1 and title2 value
//
 document.getElementById("**205**").innerHTML="<nobr>**34**</nobr>";
 document.getElementById("**206**").innerHTML="<nobr>**43**</nobr>";
//
// *** set font family  and size for text and gauge value display
//
 document.getElementById("**205**").style.fontFamily="**35**";
 document.getElementById("**206**").style.fontFamily="**44**";
 document.getElementById("**207**").style.fontFamily="**53**";
 document.getElementById("**205**").style.lineHeight="**36**"+"px";
 document.getElementById("**206**").style.lineHeight="**45**"+"px";
 document.getElementById("**207**").style.lineHeight="**169**"+"px";
 document.getElementById("**207**").style.Height="**170**"+"px";
 
//
// *** set bold italic underline attributes for text1, text2 and display value
//
cbbpsw=**37**; // *** these are bold, italic and underline options for first text
cbipsw=**38**;
cbupsw=**39**;

cbbssw=**46**; // *** these are bold, italic and underline options for second text
cbissw=**47**;
cbussw=**48**;

cbbdsw=**55**; // *** these are bold, italic and underline options for gauge value text
cbidsw=**56**;
cbudsw=**57**;

if (cbbpsw==0)
    document.getElementById("**205**").style.fontWeight="bold";
else
    document.getElementById("**205**").style.fontWeight="normal";
if (cbipsw==0)
   document.getElementById("**205**").style.fontStyle="italic";
else
   document.getElementById("**205**").style.fontStyle="normal";
if (cbupsw==0)
   document.getElementById("**205**").style.textDecoration="underline";
else
   document.getElementById("**205**").style.textDecoration="none";

if (cbbssw==0)
    document.getElementById("**206**").style.fontWeight="bold";
else
    document.getElementById("**206**").style.fontWeight="normal";
if (cbissw==0)
   document.getElementById("**206**").style.fontStyle="italic";
else
   document.getElementById("**206**").style.fontStyle="normal";
if (cbussw==0)
   document.getElementById("**206**").style.textDecoration="underline";
else
   document.getElementById("**206**").style.textDecoration="none";

if (cbbdsw==0)
    document.getElementById("**207**").style.fontWeight="bold";
else
    document.getElementById("**207**").style.fontWeight="normal";
if (cbidsw==0)
   document.getElementById("**207**").style.fontStyle="italic";
else
   document.getElementById("**207**").style.fontStyle="normal";
if (cbudsw==0)
   document.getElementById("**207**").style.textDecoration="underline";
else
   document.getElementById("**207**").style.textDecoration="none";
//
// *** font size for text and gauge value
//
 document.getElementById("**205**").style.fontSize="**36**"+"px";
 document.getElementById("**206**").style.fontSize="**45**"+"px";
 document.getElementById("**207**").style.fontSize="**54**"+"px";

//
// *** determine text widths
//
 **201**.font=document.getElementById("**205**").style.font;
 tw1=**201**.measureText("**34**").width;
 **201**.font=document.getElementById("**206**").style.font;
 tw2=**201**.measureText("**43**").width;
//
// *** get start and stop values for the gauge
//
 disp1=**7**; // *** user defined start
 disp2=**8**; // *** user defined stop
//
//***set min max values of the test slider if it exists
//
 if (typeof document.getElementById("**4**_range") != "undefined")
   {
    document.getElementById("**4**_range").max=parseInt(**8**);
    document.getElementById("**4**_range").min=parseInt(**7**);
    document.getElementById("**4**_min_show").innerHTML=parseInt(**7**).toString();
    document.getElementById("**4**_max_show").innerHTML=parseInt(**8**).toString();
   }

//
// *** locate text1, text2 and display value
//
document.getElementById("**205**").style.top="**301**";
document.getElementById("**206**").style.top="**302**";
document.getElementById("**207**").style.top="**303**";
document.getElementById("**205**").style.left="**304**";
document.getElementById("**206**").style.left="**305**";
document.getElementById("**207**").style.left="**306**";
//
// *** get and show gauge display value
//
disp_val=parseFloat(**4**_value);
disp_val=disp_val.toFixed(**65**);
disp_val=disp_val.toString();
 document.getElementById("**207**").style.width=parseInt(**167**).toString()+"px";
 document.getElementById("**207**").style.paddingRight=parseInt(**168**).toString()+"px";
 document.getElementById("**207**").innerHTML=disp_val;
//
// *** set colors for the two text values a -- rgb (% red, %green, % blue)
//
 r1=**40**;
 g1=**41**;
 b1=**42**;
 document.getElementById("**205**").style.color= "rgb("+r1+"%,"+g1+"%,"+b1+"%)";
 r2=**50**;
 g2=**51**;
 b2=**52**;
 document.getElementById("**206**").style.color= "rgb("+r2+"%,"+g2+"%,"+b2+"%)";
//
// *** set colors and attributes for the display value -- rgb (% red, %green, % blue)
//
 r1=**66**;
 g1=**67**;
 b1=**68**;
 document.getElementById("**207**").style.color="rgb("+r1+"%,"+g1+"%,"+b1+"%)";
 r2=**69**;
 g2=**70**;
 b2=**71**;
 document.getElementById("**207**").style.backgroundColor= "rgb("+r2+"%,"+g2+"%,"+b2+"%)";
 r3=**72**;
 g3=**73**;
 b3=**74**;
 document.getElementById("**207**").style.textAlign= "right";
 document.getElementById("**207**").style.borderStyle="**59**";
 document.getElementById("**207**").style.borderWidth="**63**"+"px";
 document.getElementById("**207**").style.borderColor= "rgb("+r3+"%,"+g3+"%,"+b3+"%)";
//
// *** start the gauge face display
//
ca=-90.0;
begclock="**9**";
var temp=begclock.split(":");
deg1    = parseFloat(temp[0])*30.0+parseFloat(temp[1])/2.0+ca;
begangle=deg1*Math.PI/180.0;
endclock="**10**";
var temp=endclock.split(":");
deg2    = parseFloat(temp[0])*30.0+parseFloat(temp[1])/2.0+ca;
endangle= deg2*Math.PI/180.0;
tickstartval=parseFloat(**7**);
tickstopval=parseFloat(**8**);
//
// **** get and set the possible three scale colors -- rgb (% red, %green, % blue)
//
sc1r=**158**;
sc1g=**159**;
sc1b=**160**;

sc2r=**161**;
sc2g=**162**;
sc2b=**163**;

sc3r=**164**;
sc3g=**165**;
sc3b=**166**;
scradw=**126**;
if (deg1 <= deg2)
   dsw=1;
else
   dsw=0;
//
// *** tick marks
//
tm1=**129**;
if (tm1.length>0)
    {
     tm1=parseInt(tm1);
     }
tm2=**135**;
if (tm2.length  > 0)
    {
     tm2=parseInt(tm2);
     }
tm1len=**132**;
if (tm1len.length>0)
    {
     tm1len=parseInt(tm1len);
     }
tm2len=**138**;
if (tm2len.length  > 0)
    {
     tm2len=parseInt(tm2len);
    }
//
// ***collect arc and tick color options
//
scnum1sw =**143**;
scnum11sw=**144**;
scnum12sw=**145**;
scnum13sw=**146**;
if (scnum1sw==1)
   {
    colorc=1;
    if(scnum11sw==1) colv[0]="rgb(0%,0%,0%)";
    if(scnum12sw==1) colv[0]="rgb(100%,100%,100%)";
    if(scnum13sw==1) colv[0]="rgb("+sc1r.toString()+"%,"+sc1g.toString()+"%,"+sc1b.toString()+"%)";
    cab[0]=0.0;
    cab[1]=1.0;
 }
scnum2sw=**147**;
if (scnum2sw==1)
   {
    colorc=2;
    colv[0]="rgb("+sc1r.toString()+"%,"+sc1g.toString()+"%,"+sc1b.toString()+"%)";
    colv[1]="rgb("+sc2r.toString()+"%,"+sc2g.toString()+"%,"+sc2b.toString()+"%)";
    cab[0]=0.0;
    cab[1]=(parseInt(**149**)-parseInt(disp1))/(parseInt(disp2)-parseInt(disp1));
    cab[2]=1.0
 }
scnum3sw=**151**;
if (scnum3sw==1)
   {
    colorc=3;
    colv[0]="rgb("+sc1r.toString()+"%,"+sc1g.toString()+"%,"+sc1b.toString()+"%)";
    colv[1]="rgb("+sc2r.toString()+"%,"+sc2g.toString()+"%,"+sc2b.toString()+"%)";
    colv[2]="rgb("+sc3r.toString()+"%,"+sc3g.toString()+"%,"+sc3b.toString()+"%)";
    cab[0]=0.0;
    cab[1]=(parseInt(**153**)-parseInt(disp1))/(parseInt(disp2)-parseInt(disp1));
    cab[2]=(parseInt(**156**)-parseInt(disp1))/(parseInt(disp2)-parseInt(disp1));
    cab[3]=1.0
 }
if (begclock==endclock)
   {
    sweep=360;
    tpick.innerHTML="Sweep="+sweep+" degrees deg1="+deg1+" deg2="+deg2;
   }
else
   {
    cwsw=**11**;
    ccwsw=**12**;
    if (cwsw==1) // *** clockwise needle rotation
       {
        if (dsw==1)
           sweep=deg2-deg1;
        else
           sweep=360-deg1+deg2;
        ctickdiff=(tickstopval-tickstartval)/tm1;
        ctickdiff2=ctickdiff/tm2;
        ctick=parseFloat(tickstartval);
        tickdif=(sweep)/tm1;
        tickdif2=tickdif/tm2;
        asweep=sweep/colorc;
        if (scradw>0)
           {
            **201**.lineWidth=scradw;
            swangle[0]=begangle;
            swangle[1]=swangle[0]+sweep*Math.PI/180.0*cab[1];
            swangle[2]=swangle[1]+sweep*Math.PI/180.0*(cab[2]-cab[1]);
            swangle[3]=endangle;
            for (k=0;k<colorc;k++)
                 {
                  **201**.strokeStyle=colv[k];
                  **201**.beginPath();
                  **201**.arc(xc,yc,rad2,swangle[k],swangle[k+1],false);
                  **201**.stroke();
                 }
            }
            degtemp=deg1+90.0;
       }
    else // *** counterclockwise needle rotation
       {
        if (dsw==0)
           sweep=deg1-deg2;
        else
           sweep=360-(deg2-deg1);
        ctickdiff=-(tickstopval-tickstartval)/tm1;
        ctickdiff2=ctickdiff/tm2;
        ctick=parseFloat(tickstopval);
        tickdif=(sweep)/tm1;
        tickdif2=tickdif/tm2;
        if (scradw>0)
           {
            **201**.lineWidth=scradw;
            swangle[0]=begangle;
            swangle[1]=swangle[0]-sweep*Math.PI/180.0*cab[1];
            swangle[2]=swangle[1]-sweep*Math.PI/180.0*(cab[2]-cab[1]);
            swangle[3]=endangle
            for (k=0;k < colorc;k++)
                {
                 if (colorc==1) **201**.strokeStyle=colv[k];
                 if (colorc==2) **201**.strokeStyle=colv[k];
                 if (colorc==3) **201**.strokeStyle=colv[k];
                 **201**.beginPath();
                 **201**.arc(xc,yc,rad2,swangle[k],swangle[k+1],true);
                 **201**.stroke();
                 }
            }
        degtemp=deg2+90.0;
       }
   }
//
// *** scale text color -- rgb (% red, %green, % blue)
//
rgs=**23**;
ggs=**24**;
bgs=**25**;
**201**.fillStyle ="rgb("+rgs+"%,"+ggs+"%,"+bgs+"%)";
scaletextfillcolor="rgb("+rgs+"%,"+ggs+"%,"+bgs+"%)";
**201**.strokeStyle="rgb("+rgs+"%,"+ggs+"%,"+bgs+"%)";
gsbsw=**22**;
if (gsbsw==1)
    fw="bold";
else
    fw="normal";
gsfontsize=**21**;
gtemp2=fw+" "+"**21**"+"px"+" "+"**20**";
**201**.font=gtemp2;
//
// *** draw tick marks and place scale value
//
tickoffset=parseFloat(scradw)/2.0;
if (tm1 >0)
  {
   for (i=0;i<(tm1+1);i++)
    {
     **201**.lineWidth=1;
     tc1sw=**140**;
     tc2sw=**141**;
     tc3sw=**142**;
     if (tc1sw==1) **201**.strokeStyle="rgb(0%,0%,0%)";
     if (tc2sw==1) **201**.strokeStyle="rgb(100%,100%,100%)";
     if (tc3sw==1)
        {
        scnum1sw=**143**;
        if (scnum1sw)
         {
          scnum11sw=**144**;
          scnum12sw=**145**;
          scnum13sw=**146**;
          if (scnum11sw==1) **201**.strokeStyle="rgb(0%,0%,0%)";
          if (scnum12sw==1) **201**.strokeStyle="rgb(100%,100%,100%)";
          if (scnum13sw==1) **201**.strokeStyle="rgb("+sc1r+"%,"+sc1g+"%,"+sc1b+"%)";
         }
     scnum2sw=**147**;
     if (scnum2sw==1)
        {
         if (ctick < parseFloat(**149**) )
             **201**.strokeStyle="rgb("+sc1r+"%,"+sc1g+"%,"+sc1b+"%)";
         else
             **201**.strokeStyle="rgb("+sc2r+"%,"+sc2g+"%,"+sc2b+"%)";
         }
     scnum3sw=**151**;
     if (scnum3sw==1)
        {
         if (ctick < parseFloat(**153**) )
            **201**.strokeStyle="rgb("+sc1r+"%,"+sc1g+"%,"+sc1b+"%)";
         else
            if (ctick > parseFloat(**156**) )
                **201**.strokeStyle="rgb("+sc3r+"%,"+sc3g+"%,"+sc3b+"%)";
            else
                **201**.strokeStyle="rgb("+sc2r+"%,"+sc2g+"%,"+sc2b+"%)";
        }
     }
     x1=xc+Math.sin((degtemp)*Math.PI/180.0)*(rad2-tickoffset);
     y1=yc+Math.cos((degtemp)*Math.PI/180.0)*(rad2-tickoffset)*(-1.0);
     x2=xc+Math.sin((degtemp)*Math.PI/180.0)*(rad2-tm1len-tickoffset);
     y2=yc+Math.cos((degtemp)*Math.PI/180.0)*(rad2-tm1len-tickoffset)*(-1.0);
     **201**.beginPath();
     **201**.moveTo(x1,y1);
     **201**.lineTo(x2,y2);
     **201**.stroke();
     tvalue=ctick; //  ****.toFixed(rtofdec).toString();
     txtmeasure=**201**.measureText(tvalue).width;
     x3=xc+Math.sin((degtemp)*Math.PI/180.0)*(rad2-25);
     y3=yc+Math.cos((degtemp)*Math.PI/180.0)*(rad2-25)*(-1.0);
     **201**.fillStyle=scaletextfillcolor;
     **201**.fillText(tvalue,x3-txtmeasure/2,y3+gsfontsize/2.0);
     if (tm2 > 0 && i != tm1)
       {
        deg2=degtemp;
        ctick2=ctick;
        for (k=0;k<tm2;k++)
            {
             **201**.lineWidth=1;
             tc1sw=**140**;
             tc2sw=**141**;
             tc3sw=**142**;
             if (tc1sw==1) **201**.strokeStyle="rgb(0%,0%,0%)";
             if (tc2sw==1) **201**.strokeStyle="rgb(100%,100%,100%)";
             if (tc3sw==1)
                {
                 scnum1sw=**143**;
                 if (scnum1sw)
                    {
                     scnum11sw=**144**;
                     scnum12sw=**145**;
                     scnum13sw=**146**;
                     if (scnum11sw==1) **201**.strokeStyle="rgb(0%,0%,0%)";
                     if (scnum12sw==1) **201**.strokeStyle="rgb(100%,100%,100%)";
                     if (scnum13sw==1) **201**.strokeStyle="rgb("+sc1r+"%,"+sc1g+"%,"+sc1b+"%)";
                     }
             scnum2sw=**147**;
             if (scnum2sw==1)
                {
                 if (ctick < parseFloat(**149**) )
                     **201**.strokeStyle="rgb("+sc1r+"%,"+sc1g+"%,"+sc1b+"%)";
                 else
                     **201**.strokeStyle="rgb("+sc2r+"%,"+sc2g+"%,"+sc2b+"%)";
                }
             scnum3sw=**151**;
             if (scnum3sw==1)
                {
                 if (ctick < parseFloat(**153**) )
                     **201**.strokeStyle="rgb("+sc1r+"%,"+sc1g+"%,"+sc1b+"%)";
                 else
                    if (ctick > parseFloat(**156**) )
                        **201**.strokeStyle="rgb("+sc3r+"%,"+sc3g+"%,"+sc3b+"%)";
                    else
                        **201**.strokeStyle="rgb("+sc2r+"%,"+sc2g+"%,"+sc2b+"%)";

}
               }
               x1=xc+Math.sin((deg2)*Math.PI/180.0)*(rad2-tickoffset);
               y1=yc+Math.cos((deg2)*Math.PI/180.0)*(rad2-tickoffset)*(-1.0);
               x2=xc+Math.sin((deg2)*Math.PI/180.0)*(rad2-tm2len-tickoffset);
               y2=yc+Math.cos((deg2)*Math.PI/180.0)*(rad2-tm2len-tickoffset)*(-1.0);
               **201**.beginPath();
               **201**.moveTo(x1,y1);
               **201**.lineTo(x2,y2);
               **201**.stroke();
               deg2=deg2+tickdif2;
               ctick2=ctick2+ctickdiff2;
             }
     }
     ctick=ctick+ctickdiff;
     degtemp=degtemp+tickdif;
    }
  }
  //
  // *** needle definition
  //
 bw=parseInt(**82**);
 bw2=bw/2.0;
 blen=parseInt(**79**);
 flen=parseInt(**76**);
 degp=150.0;
 px1=-blen;
 py1=-bw2;
 px2=flen;
 py2=-1;
 px3=flen;
 py3=1;
 px4=-blen;
 py4=bw2;
 //
 // *** needle definitions
 //
 r1=**100**;
 g1=**101**;
 b1=**102**;
 r2=**103**;
 g2=**104**;
 b2=**105**;
 **201**.fillStyle="rgb("+r1+"%,"+g1+"%,"+b1+"%)";
 **201**.shadowColor = "black";
 **201**.shadowOffsetX = parseInt(**92**);
 **201**.shadowOffsetY = parseInt(**95**);
 **201**.shadowBlur = parseInt(**98**);
 **201**.save();
 **201**.translate(xc,yc);
 pca=(parseFloat(disp_val)-parseFloat(disp1))/(parseFloat(disp2)-parseFloat(disp1))
 if (dsw==0 && cwsw ==1) rangle=(sweep)*pca+deg1;
 if (dsw==0 && ccwsw==1) rangle=(-sweep)*pca+deg1;
 if (dsw==1 && cwsw ==1) rangle=(sweep)*pca+deg1;
 if (dsw==1 && ccwsw==1) rangle=(-sweep)*pca+deg1;
 **201**.rotate(rangle*Math.PI/180.0);
 **201**.beginPath();
 **201**.moveTo(px1,py1);
 **201**.lineTo(px2,py2);
 **201**.lineTo(px3,py3);
 **201**.lineTo(px4,py4);
 **201**.lineTo(px1,py1);
 **201**.closePath();
 **201**.fill();
 **201**.translate(-xc,-yc);
 **201**.restore();
//
// *** needle cap (gncp checkbox)
//
gncpsw=**84**;
if (gncpsw!=1)
   {
    caprad=parseInt(**86**);
    **201**.shadowOffsetX = parseInt(**92**);
    **201**.shadowOffsetY = parseInt(**95**);
    **201**.shadowBlur    = parseInt(**98**);
    **201**.fillStyle="rgb("+r2+"%,"+g2+"%,"+b2+"%)";
    **201**.beginPath();
    **201**.arc(xc,yc,caprad,2.0*Math.PI,false);
    **201**.fill();
    **201**.closePath();
   }
//
// *** bezel northwest and southeast colors -- rgb (% red, %green, % blue)
//
r1=**119**;
g1=**120**;
b1=**121**;
r2=**122**;
g2=**123**;
b2=**124**;
nobzsw=**106**;
if (nobzsw!=1)
   {
    **201**.beginPath();
    var rwg=**201**.createLinearGradient(xc-rad/2-10,yc-rad/2-10,xc+rad/2,yc+rad/2);
    bzc1="rgb("+r1+"%,"+g1+"%,"+b1+"%)"
    bzc2="rgb("+r2+"%,"+g2+"%,"+b2+"%)"
    rwg.addColorStop(0.0,bzc1);
    rwg.addColorStop(1.0,bzc2);
    **201**.strokeStyle = rwg;
    **201**.shadowColor = "black";
    **201**.shadowOffsetX = parseInt(**111**);
    **201**.shadowOffsetY =  parseInt(**114**);
    **201**.shadowBlur =  parseInt(**117**);
    **201**.lineWidth=parseInt(**108**);
    **201**.arc(xc,yc,(rad),0.0,2.0*Math.PI,false);
    **201**.closePath();
    **201**.stroke();
    }

if (tempfix > 0) // *** adjust location of the gauge field to account for non-zero border
                 //    (tempfix is gauge field border width from above)
   {
    temptop=document.getElementById("**203**").style.top;
    templeft=document.getElementById("**203**").style.left;
    temptop=temptop.replace("px","");
    temptop=parseInt(temptop);
    document.getElementById("**203**").style.top=parseInt(temptop-tempfix).toString()+"px";
    templeft=templeft.replace("px","");
    templeft=parseInt(templeft);
    document.getElementById("**203**").style.left=parseInt(templeft-tempfix).toString()+"px";
   }
}        // *** end of the **4** function

//
// *** Below the test_slider code for plus and minus buttons -- REMOVE THIS FUNCTION FOR PRODUCTION CODE
//
function **4**_inc(ud) //*** plus & minus buttons that increments/decrements the slider value
{
 if (ud==1)
    {
     if (parseInt(document.getElementById("**4**_range").value) < parseInt(document.getElementById("**4**_range").max))
        {
         document.getElementById("**4**_range").value=parseInt(document.getElementById("**4**_range").value)+1;
         **4**(40,40,document.getElementById("**4**_range").value);
        }
     }
 else
    {
     if (parseInt(document.getElementById("**4**_range").value) > parseInt(document.getElementById("**4**_range").min))
        {
         document.getElementById("**4**_range").value=parseInt(document.getElementById("**4**_range").value)-1;
   **4**(40,40,document.getElementById("**4**_range").value);
        }
     }
}
// -->
</script>
</head>
<body onload="**4**(40,40,**400**)"> 
<canvas id="**202**" style="z-index:10;position:absolute;">CANVAS NOT SUPPORTED</canvas>
<div id="**203**" style="z-index:20;position:absolute;padding:0px;">
<div id="**205**" style="z-index:20;position:absolute;"></div>
<div id="**206**" style="z-index:20;position:absolute;"></div>
<div id="**207**" style="z-index:20;position:absolute;"></div>
</div>

<div id="**204**" style="text-align:center;position:absolute;border:solid black 1px;">
<b>Test The Display Value:</b><br>
<span id="**4**_min_show">**7**</span>
<input type="button" value="-" onclick="**4**_inc(0)">
<input id="**4**_range" name="**4**_range" style="width:100px;" type="range" min="**7**" max="**8**" step="1" value="**400**" onchange="**4**(40,40,this.value)">
<input type="button" value="+" onclick="**4**_inc(1)">
<span id="**4**_max_show">**8**</span>
</div>

</body>
</HTML>

q_out