CANVAS NOT SUPPORTED
Capt. Webb

Capt. Webb Gauge Maker
Using HTML 5 and Canvas

Version 2.1 parks@uh.edu
Current Gauge View
Your can perform fine adjustments of the location of:
   • the primary text ();
   • the secondary text ( );
   • the display value ( ).
by dragging and dropping them anywhere:
   • inside the circular gauge
    OR
   • inside the rectangular gauge field

When you click the "MAKE" button, the HTML and javascript for the gauge will appear in the textarea below.

Test The Display Value:
   
 Gauge Name: (for the javascript function)
 Gauge Face Radius:  Scale and Tick Radius
 Start Value:      End Value:    
   (use decimal points and zeroes to specify scale precision)
 Start Location   End Location
   (use a time HH:MM to locate as if it were a clock face)
 Move from Start Value to End Value in a:
   Clockwise OR Counter-Clockwise direction
Gauge Face Background Color #1
 Red  
 
 Green  
 Blue  
Gauge Face Background Color #2
Radial Gradient -- #1 → #2
 Red  
 
 Green  
 Blue  
 Gauge Numeric Scale Text:
  Font:  FontSize:    Bold
Gauge Numeric Scale Text Color
 Red  
 
 Green  
 Blue  
 Gauge Field (the rectangle): Width: Height:
 Border style:  Border Width:
 Gauge and Gauge Field Horizontal Center: px
 Gauge and Gauge Field Vertical Center: px
Gauge Field Color OR Transparent
 Red  
 
 Green  
 Blue  
Gauge Field Border Color
 Red  
 
 Green  
 Blue  
  Primary Title Text: 
  Font:   FontSize:  
  Bold   Italic   Underline
 Drag & Drop to adjust location (top: left: )
Primary Title Color
 Red  
 
 Green  
 Blue  
 Secondary Title Text: 
 Font:   FontSize:  
  Bold   Italic   Underline
 Drag & Drop to adjust location (top: left: )
Secondary Title Color ( same as above)
 Red  
 
 Green  
 Blue  
 Gauge Value Display:

 Font:   Font Size (px):  
  Bold   Italic   Underline
 Border-Type:  none   inset   outset   solid
 Border-Width:   
 Digits to the right of the decimal:
 Drag & Drop to adjust location (top: left: )

Gauge Value Display Color
 Red  
 
 Green  
 Blue  
Gauge Value Display Background Color
 Red  
 
 Green  
 Blue  
Gauge Value Border Color
 Red  
 
 Green  
 Blue  
 Gauge Needle and Cap:
 Pointed Length
 Blunt Length
 Blunt Width
 Cap Radius ( no cap)
 ShadowColor (% black)
 ShadowOffsetX;
 ShadowOffsetY;
 ShadowBlur;
Gauge Needle Color
 Red  
 
 Green  
 Blue  
Gauge Cap Color
 Red  
 
 Green  
 Blue  
 Bezel: No Bezel
 Bezel Width
 ShadowOffsetX;
 ShadowOffsetY;
 ShadowBlur;
To get a simple solid color border:
(a) uncheck "No Bezel"
(b) set all three shadow attribute values to 0;
(c) set the two colors to the same color values; and
(d) set "Bezel Width" to the desired border width
Bezel Light Color (NorthWest)
 Red  
 
 Green  
 Blue  
Bezel Dark Color (SouthEast)
 Red  
 
 Green  
 Blue  
 Scales and Tick Marks
 Scale Arc Width    (0 to 15 pixels)
 Major Ticks   
  
 Minor Ticks   
  
 Tick Color   Black   White   Use Arc Color(s) below
1 Arc Color Black White Use Scale Arc Color 1
2 Arc Colors
 ← Scale Color 1 →  ← Scale Color 2→
3 Arc Colors
 ← Scale Color 1 →  ← Scale Color 2→
 ← Scale Color 2 →  ← Scale Color 3→
 
Scale Arc Color 1
 Red  
 
 Green  
 Blue  
Scale Arc Color 2
 Red  
 
 Green  
 Blue  
Scale Arc Color 3
 Red  
 
 Green  
 Blue  
q_out