Real-time Bitmap with Ratings Display

Category:

ASP, HTML and XML

Type:

Applications

Difficulty:

Advanced

Author: Anonymous

Version Compatibility: Visual Basic.NET

More information:

This project is an example of how to create a bitmap-based rating display on the fly. The size of the bitmap and the rating displayed is based on the parameters passed in the querystring. A sample URL for this project would be http://localhost:2397/WebSite1/Default.aspx?Width=300&Height=200&Rating=90&FontSize=60 .

Instructions: Copy the declarations and code below and paste directly into your VB project.

Declarations:
N/A

Code:

<%@ Page Language="VB" Debug="True" ContentType="image/gif" %>
<%@ import Namespace="System.Drawing" %>
<%@ import Namespace="System.Drawing.Imaging" %>
<%@ import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">

' Insert page code here
    '
    ' Usage for this page is quite simple
    ' Rating must be a number from 1 to 10
    ' RatingBar.aspx?Width=300&Height=50&Rating=10&FontSize=16
    ' Made changes to fix the centering of the text in the box
    ' I also added changes to parameter the fontsize and the font
    ' rectangle will always be big enough to show the unclipped
    ' or unwrapped text
    Sub Page_Load()
        dim objBitmap as Bitmap
        dim objGraphics as Graphics
        dim objRect as Rectangle
        dim objBrush as LinearGradientBrush
        dim objPath as GraphicsPath
        dim objColorBlend as ColorBlend
        ' This sets up useful defaults if the user
        ' does not pass them into the page
        dim intHeight as Integer = 50
        dim intWidth as Integer = 300
        dim intRating as Integer = 10
        dim intFontSize as Integer = 16
        ' Override the defaults.
        if Request.QueryString("Width") <> "" then
            intWidth = Request.QueryString("Width")
        end if
        If Request.QueryString("Height") <> "" then
            intHeight = Request.QueryString("Height")
        end if
        If Request.QueryString("Rating") <> "" then
            intRating = Request.QueryString("Rating")
        End if
        If Request.QueryString("FontSize") <> "" then
            intFontSize = Request.QueryString("FontSize")
        end if
        ' Create ColorBlend
        objColorBlend = CreateColorBlend(intRating)
    
        ' These are some defaults, you can play with them and change them if you want
        if intWidth < 100 then intWidth = 100
        if intHeight < 25 then intHeight = 25
        ' Create Bitmap
        objBitMap = New BitMap(intWidth,intHeight)
        ' Create the Graphics Object
        objGraphics = Graphics.FromImage(objBitmap)
        ' Create the Rectangle that we will draw on the bitmap
        objRect = New Rectangle(0,0,intWidth,intHeight)
        ' Create the Graphics Path
        objPath = New GraphicsPath()
        ' Add the Rectangle to the GraphicsPath
        objPath.AddRectangle(objRect)
        ' Create a Retangle for the String to be Drawn on the bitmap
        ' I subtracted the width of the font. After some experimentation I found
        ' that subtracting the intFontSize / 1.5 works best to center the font. You can play
        ' with this rectangle to move the number around.
        ' I also have parameterized the Fontsize, and the FontBox. That gives the user more
        ' flexibility. The centering of the height works better
        ' After some research I found the MeasureString function, duh! This centers the font
        ' for width much better.
        dim stringSize as New SizeF()
        dim stringFont as New Font("Arial", intFontSize, FontStyle.Bold)
        dim stringtoMeasure as String = CStr(intRating)
        stringSize = objGraphics.MeasureString(stringtoMeasure, stringFont)
        ' Also I now user the stringSize so that the rectangle will always be large enough to display
        ' the string without clipping or wrapping.
        dim objTextRect as Rectangle = New Rectangle(intWidth / 2 - stringSize.Width / 2, intHeight / 2 - intFontSize / 2,stringSize.Width,stringSize.Height)
        ' I dont need the font that I created just to get the font width from MeasureString
        stringFont.Dispose()
        ' The addString method is overloaded and I just wanted to use some generic defaults so for FontFamily I used
        ' the GenericSansSerif fontfamily, just because I prefer SansSerif fonts most of the time. I wanted
        ' the Font to be bold. You have to pass the Integer which is why the Cint of the style, intFontSize is the font size
        ' This also should be a variable, not hardcoded. Finally I chose to use Arial since the Arial font is a sans.serif font that I
        ' especially like.
        objPath.AddString(CStr(intRating), New FontFamily("Arial"),Cint(FontStyle.Bold), intFontSize, objTextRect, StringFormat.GenericDefault)
        ' This creates the brush, we are using the rectangle created above
        ' And using Colors that we never expect to see since we are going to cover it
        ' with the ColorBlend that we created above. I am using the LinearGradientMode Horizontal
        ' because the idea is that the color moves from right to left from red to green
        objBrush = New LinearGradientBrush(objRect, Color.White, Color.Black, LinearGradientMode.Horizontal)
        ' Now we pass in the ColorBlend that we created in CreateColorBlend
        objBrush.InterpolationColors = objColorBlend
        ' Now to Fill the GraphicPath
        objGraphics.FillPath(objBrush, objPath)
        ' Send the bitmap to the outputstream as a gif. You can easily change the Imageformat
        ' You can also save them to a file by changing Response.OutputStream to a filename.
        objBitmap.Save(Response.OutputStream, ImageFormat.Gif)
    End Sub
    
    Function CreateColorBlend(numPct as Integer) as ColorBlend
        ' This is where the Colorblend is created. The idea for this
        ' is that I wanted to represent colors porportional to a
        ' Rating from 1 to 10, 1 being poor and 10 being good.
        ' so my thoughts were that 1 should be Red and 10 should be green
        ' so I tried to create an array of colors below that progress from
        ' Red to Yellow to Green. \
        ' Need to create two arrays one of colors and one of singles for position
        dim arrColor(10) as Color
        dim arrPositions(10) as Single
        ' just a counter
        dim i as Integer
        ' And since we are returning a ColorBlend we need a ColorBlend to fill before
        ' we Return it.
        dim myColorBlend as ColorBlend
        ' numPct must be an integer between 1 and 10
        If numPct > 10 then
            numPct = 10
        end if
        If numPct < 1 then
            numPct = 1
        end if
    
        ' These are my choices of colors. You can change these depending on what you
        ' are trying to accomplish.
        arrColor(0) = Color.Red
        arrColor(1) = Color.OrangeRed
        arrColor(2) = Color.Orange
        arrColor(3) = Color.Gold
        arrColor(4) = Color.Yellow
        arrColor(5) = Color.YellowGreen
        arrColor(6) = Color.GreenYellow
        arrColor(7) = Color.Chartreuse
        arrColor(8) = Color.LawnGreen
        arrColor(9) = Color.Lime
        arrColor(10) = Color.LimeGreen
    
        ' This is my array of Positions the idea is that each color takes up
        ' 10 percent of the colorblend by default. But since I am creating a variable
        ' colorblend you will see that I have to do some things differently below
        arrPositions(0) = 0.0
        arrPositions(1) = 0.1
        arrPositions(2) = 0.2
        arrPositions(3) = 0.3
        arrPositions(4) = 0.4
        arrPositions(5) = 0.5
        arrPositions(6) = 0.6
        arrPositions(7) = 0.7
        arrPositions(8) = 0.8
        arrPositions(9) = 0.9
        arrPositions(10) = 1.0
    
        ' Need a temporary array to fill with colors and singles
        dim arrPctColors() as Color
        dim arrPctPositions() as Single
        ' if the rating is 2 or less we have to create a special instance with
        ' 2 member in the array. This is because the Positions array must start
        ' with 0.0 and end with 1.0 otherwise it throws an exception.
        ' In VB6 days you could initialize an array then use redim to make it
        ' bigger. Now you have ArrayLists that you can just use the .Add method
        ' If you are using Arrays you can use the CreateInstance Method to create
        ' an array of anytype once you know how big it needs to be. So that is what
        ' I am doing here.
        if numPct <= 2 then
            arrPctColors = Array.CreateInstance(GetType(Color),2)
            arrPctPositions = Array.CreateInstance(GetType(Single),2)
        else
            ' Otherwise create an array of colors the size that is passed in
            arrPctColors = Array.CreateInstance(GetType(Color),numPct)
            arrPctPositions = Array.CreateInstance(GetType(Single),numPct)
        end if
    
        ' Now to fill the array using the arrays above. If the rating is less
        ' than or equal to 2 then you have to have 2 members in the array. That is the
        ' first part of the if statement.
        if numPct <= 2 then
            for i = 0 to 1
                arrPctColors(i) = arrColor(i)
            next i
            arrPctPositions(0) = 0.0
            arrPctPositions(1) = 1.0
        else
            ' You have to assure the ColorBlend that the Positions array starts
            ' with 0.0 and ends with 1.0 So I do that below.
            for i = arrPctColors.GetLowerBound(0) to arrPctColors.GetUpperBound(0)
                arrPctColors(i) = arrColor(i)
                'arrPctColors.SetValue(arrColor(i),i)
                if i = arrPctColors.GetLowerBound(0) then
                    arrPctPositions(i) = 0.0
                elseif i = arrPctColors.GetUpperBound(0) then
                    arrPctPositions(i) = 1.0
                else
                    ' This create values that will evenly distribute the colors
                    ' across the ratingbar. At least I hope they do. If you have
                    ' better math than this, or a better way to select colors let me know.
                    arrPctPositions(i) = i / arrPctColors.GetUpperBound(0)
                end if
            Next i
        end if
        ' Create a colorblend to return
        myColorBlend = New ColorBlend()
        ' set the colors array to arrPctColors
        myColorBlend.Colors = arrPctColors
        ' Set the positions array to arrPctPositions
        myColorBlend.Positions = arrPctPositions
        ' Return the colorblend
        return myColorBlend
    End Function

</script>
<html>
<head>