Horizontal Percentage gauge Demo

This demonstration illustrates a working horizontal percentage gauge class for VBScript. Enter a value (between 0 and 100) and notice the nice horizontal percentage gauge! Neat, eh?


Enter a Value Between 0 and 100:


Source Code:
<%
' Handy class for displaying a horizontal percentage gauge.
%>
<%
class Slgauge
  ' Colors.
  public BgColor
  public FgColor

  ' Dimensions.
  public Width
  public Height

  ' Values.
  public MinVal
  public MaxVal
  public CurVal

  ' Render this into HTML as a table.
  function RenderHtml
      ' Normalize the properties.
      if MinVal > MaxVal then
          Dim temp_val
          temp_val = MinVal
          MinVal = MaxVal
          MaxVal = temp_val
      end if

      if CurVal < MinVal then
          CurVal = MinVal
      elseif CurVal > MaxVal then
          CurVal = MaxVal
      end if

      ' Figure out the percentage that the CurVal is within MinVal and MaxVal.
      Dim percentage_val
      percentage_val = (CurVal - MinVal) / (MaxVal - MinVal)

      ' Compute the first and second widths.
      Dim fg_width
      fg_width = Round(Width * percentage_val)
      Dim bg_width
      bg_width = Width - fg_width

      RenderHtml = "<table cellspacing=0 cellpadding=0 width=" & Width & _
                   " height=" & Height & ">" _
                   & "<tr>"
      if fg_width > 0 then
          RenderHtml = RenderHtml _
                      & "<td width=" & fg_width & " height=" & Height _
                      & " bgcolor=" & FgColor & _
                      "><img src=/demos/Images/1_pix_trans.gif></td>"
      end if
      if bg_width > 0 then
          RenderHtml = RenderHtml _
                          & "<td width=" & bg_width & " height=" & Height _
                          & " bgcolor=" & BgColor & _
                          "><img src=/demos/Images/1_pix_trans.gif></td>"
      end if
      RenderHtml = RenderHtml _
                      & "</tr>" _
                      & "</table>"
  end function
end class
%>

<form method="get" action="gaugeDemo.asp" id=form1 name=form1>
<b>Enter a Value Between 0 and 100:</b><br>
<input type="text" name="percentage" 
          value="<%=Request("percentage")%>" size="4">
<p>
<input type="submit" value="Create Horizontal Percentage gauge">
</form>
<p><hr><p>
<%
if len(request("percentage")) > 0 then
  if not isnumeric(request("percentage")) or _
     request("percentage") > 100 or _
     request("percentage") < 0 then
          Response.Write "<font color=red><i>" & _
                  "Please enter a numeric value between 0 and " & _
                  "100.</i></font>"
  else

    Dim sl_gauge
    Set sl_gauge = new Slgauge
    sl_gauge.BgColor = "#FFFFFF"
    sl_gauge.FgColor = "#990000"
    sl_gauge.Width = 78
    sl_gauge.Height = 5
    sl_gauge.MinVal = 0
    sl_gauge.MaxVal = 100
    sl_gauge.CurVal = CInt(request("percentage"))
  %>
    <table cellpadding=0 cellspacing=2>
      <tr>
         <td>0</td>
         <td><% = sl_gauge.RenderHtml %></td>
         <td>100%</td>
      </tr>
    </table>
    <p><hr><p>
  <%
    Set sl_gauge = nothing
  end if
end if
%>


[Return to the User Tip!] | [Download the needed image: 1_pix_trans.gif] | [Download the Slgauge source code in text format]