Home
This is more of a reference document than anything else, I suggest just skimming through this briefly to get a rough idea of what it is, then delving into a couple of examples. In particular, there is an example supplied in the ASPCanvas archive which covers some of the basics as well as a couple of enhanced features. Above all, if you get stuck send me a mail using the above address, I'll always be happy to help.
ASPCanvas is a means of generating GIF images on an IIS/ASP based server without installing server-side COM objects or fiddling around with client-side Java. It is a purely VBScript class which generates GIF images of any size on the server and passes them onto the web browser client.
Things that have been improved:
-
Rendering speed - The GIF bitmap renderer has been sped up roughly 15x, go ahead and render that 1024x768 image, it'll do it!
-
Bitmap loading speed - The BMP loading and saving engine has been increased 25x
-
Pixel drawing speed - Each pixel is now written 6x faster On top of this, a few things have been added to the pot:
-
Barcode support - Currently with Code39, Code39 extended and Code 128
-
Charting and graphing
-
FontMaker utility for creating custom fonts easily
ASPCanvas works by generating a virtual canvas in memory, drawing to it using its own functions and then generating a binary GIF file which is sent to the web browser. The class manages the pixels and also the colour palette. The generated file is sent in an "uncompressed" mode.
Normally, GIF files employ the LZW compression algorithm to compress the file size. This is a lossless algorithm which works well with binary data. Unfortunately, it can be quite time consuming to compress data in languages such as VBScript because of the lack of binary manipulation functions.
Instead, ASPCanvas tricks the LZW decompression software into thinking that the GIF file is compressed by strategically manipulating the internal compression tables. Essentially what is saved is 7-bit uncompressed data from the image. This results in larger file sizes (most of the time the file size is larger than the bitmap), but at the end of the day you get a W3C compliant image from an ASP script!
The requirements have changed very slightly from version 1.0.x to this version of the script, so pay very careful attention before overwriting your previous version!
- IIS 5.0 or higher
- VBScript 5.6 or higher
- MDAC 2.6 or higher
These are all important as the internals of ASPCanvas have changed to utilise ADO Streams
Also note that this class will still NOT work under ChiliSoft's ASP package.
Copy canvas.asp and font.asp to your web server. If you require the barcode support, copy the required barcode format along with it. There is a collection of extra fonts that accompany this script and can be used to replace the default font. The folder to which the scripts are copied to must have the correct permissions for running ASP scripts.
I feel at this point that it is important to explain what this class should do, the thing you have to understand is this: You cannot mix image and HTML within a single file, this is not how gateway scripts work. If you want to show an image on an HTML page, you make 2 files, one with the HTML containing a tag, and the other file with the canvas code. The canvas code should not send HTML or any text for that matter to the browser.
OK, with that explanation out of the way, lets see a quick example of creating an image and sending it to the browser:
<!--#include file="canvas.asp"-->
<!--#include file="font.asp"-->
<%
Dim objCanvas
Set objCanvas = New Canvas
objCanvas.GlobalColourTable(0) = RGB(255,255,255)
objCanvas.GlobalColourTable(1) = RGB(0,0,0)
objCanvas.BackgroundColourIndex = 0
objCanvas.ForegroundColourIndex = 1
objCanvas.Resize 320,240,False
objCanvas.Circle 160,120,110
objCanvas.Write
%>
Lets explain what this code is doing in more detail. The first line is what is called a Server-Side-Include, or SSI for short. As an ASP developer you should have seen one of these before, so that's pretty straight forward. One thing to note is that if you want to use the text functions in ASPCanvas, you'll need to include the font.asp pack as well. The same applies to the barcode packs.
The next few lines declare objCanvas and create a new instance of the Canvas class. ASPCanvas is written as a VBScript class, that means that you can create as many canvases as you like (within the limits of VBScripts memory space).
Below this are two lines which assign values to objCanvas.GlobalColourTable, this is an array of colour values (there are 256 spots, but only the first 128 are actually used by ASPCanvas). Each colour is given and indexed value within this array when drawing. GIF files only support 256 colours, unlike other image formats like JPG or PNG which can support millions of colours within the same image.
To use colours within your image you need to build a palette of Red Green Blue (RGB) values in this way so that they can be referenced by ASPCanvas
The next two lines set the BackgroundColourIndex and ForegroundColourIndex properties. These numbers correspond to the indexes of colours in the GlobalColourTable
The following line sets the width and height of the image. The third parameter is used to preserve any existing image information on the canvas. In this case we don't care for existing information, so we send False. This makes the resizing a little quicker because it doesn't have to copy the old information
OK, down to business! Draw a circle at position 160,120 with a radius of 110 pixels! This is drawn using the colour speficied in the ForegroundColourIndex property
Last, but not least, we send the image to the browser using objCanvas.Write
Now, if you've saved this example to an ASP file somewhere on your server, with all the SSI's in the right location, you will be able to call the page using your browser. If you're successfull, you'll see a circle, if not, well, try again.
That's it in a nutshell. Once you understand how the canvas works in this way, then it becomes very easy to draw things like graphs, charts, barcodes, labels, rounded corners, security codes and other snazzy graphics.
Returns a string containing the current version of ASPCanvas
Replaces one colour index in the image with another index. NOTE: Slow to process!
Copies a rectangle of the screen defined by X1,Y1-X2,Y2 to position X3,Y3
Floodfills the image starting at X,Y with the current ForegroundColourIndex colour. NOTE: Slow to process!
Same as Flood but does not contain any boundary checks for the bitmap, which makes it faster. USE WITH CAUTION! Make sure that the object you are flooding does not contain any cracks in the shape to fill, otherwise runtime errors will occur!
Draws a multi-sided polygon from an array of X and Y points in aX and aY. The Join parameter will tell Polygon to join the last point in the array with the first, completing the shape.
Draws a regular polygon centered on lX,lY using lRadius with lSides, tilting the polygon at lAngle
Draws a regular star (every second point is skipped) centered on lX,lY using lRadius with lSides, tilting the star at lAngle
Draws a "slice" of pie on the canvas, the center of the pie is at X,Y. The StartAngle and ArcAngle define the sweep of the slice, and the Filled parameter will make the pie slice solid with the current ForgroundColourIndex. The last parameter uses the FloodFill method, so it can be slow!
Draw a Bezier curve between points X1,Y1 and X2,Y2 using the Bezier modification points CX1,CY1 and CX2,CY2. Point count specifies the "granularity" of the line, the more points, the higher definition of the line.
Draw an arc centered around X,Y with two elliptical radii sweeping from StartAngle through to ArcAngle
Draws a line using pseudo-polar coordinates, starting at X,Y and travelling at Angle through Radius
Draws a straight line from X1,Y1 to X2,Y2
Similar to the Line method, with the addition that this can draw a line following a supplied pattern. sPattern is a string containing an order of colour indexes with which to draw a line. For example "01" will draw a line alternating between colour index 0 and 1 for the lines entire length, and "01234" will draw a line using colour indexes from 0 to 4, repeating
Draws a rectangle from X1,Y1 to X2,Y2
Same as Rectangle, with the exception that this is filled with the current ForegroundColourIndex. This does not use the FloodFill algorithm and is very fast
Draw a circle centered around X,Y
Draw an ellipse centered around X,Y with two radii
Draw text from left to right starting at X,Y. The Size parameter defines the width and height of the text. To make the text twice the normal size, specify 2, three times specify 3 etc.
As with DrawVectorTextWE, this draws text from the top to the bottom
Draw bitmapped (fixed size) text at X,Y from left to right
Draw bitmapped (fixed size) text at X,Y from top to bottom
Return the pixel width of the text running WE with the current font
Return the pixel height of the text running WE with the current font
Return the pixel width of the text running NS with the current font
Return the pixel height of the text running NS with the current font
Clear the canvas using the current BackgroundColourIndex
Resize the image. The preserve parameter indicates that any image currently on the canvas will be preserved
Write the image and appropriate information to the browser
Write the image as a Windows bitmap file
Provides the raw data of the image prior to sending to the browser. Useful for storing in a database
Loads a Windows Bitmap file into the current canvas. The existing image is overwritten and the colour palette is replaces with the bitmaps. Bitmap files MUST by uncompressed with 256 colours only. Images must only use the first 128 colours to work correctly
Saves a Windows Bitmap to a file. You must have appropriate permissions on the folder to perform this action
Parses a BMP file from a text ADO stream (the type must be text, the charset must be x-ansi)
Saves a GIF to file using sFilename
Produce text to create a custom font pack (see the section on creating your own fonts)
Force the palette to a 128 colour palette, remaps colours in the image to match
Loads the standard web-safe palette into ASPCanvas's palette. This will destroy the current palette.
##Properties
Sets or retrieves the current pixel colour index value at X,Y
Sets or retrieves the current pixel colour index value at X,Y, this is faster because it does not perform and boundary checking. Use with caution!
Retrieves the image width
Retrieves the image height
Array of red/green/blue values for the images colour palette
Index value for the current background colour
Index value for the current pen colour
Index value for the transparent colour. Used in conjunction with UseTransparency when saving GIF's
Saves the image with a transparent colour index. This means that the browser will make the selected index colour transparent on the web page
You can add a comment into your GIF file of up to 255 characters in length
True/False. Write any errors to the Response object
True/False. Write any errors to IIS's log
Halt the script on any error
Send errors to a new image instead of the response object, enables you to view errors in images from the actual page with the img link
Included with version 2.0.0 of ASPCanvas is a suite of barcoding classes. Currently, there are four major types of barcodes supported, Code 3 of 9, Code 3 of 9 extended, Code 128 and non-interleaved 2 of 5.
These are included as seperate class files for inclusion into your application. This gives you the best flexibility
Please be aware that I will not supply any technical support with these barcoding classes.
PLEASE TEST THE CODES WITH YOUR OWN EQUIPMENT BEFORE COMMITTING YOUR APPLICATION TO THE PRODUCTION OF BARCODES!
The following is an example of how to include barcodes into your ASPCanvas project:
<!--#include file="canvas.asp"-->
<!--#include file="barcodes/barcode3of9.asp"-->
<%
Dim objCanvas, objBarcode
Set objCanvas = New Canvas ' New canvas object
Set objBarcode = New Barcode3of9 ' New barcode object
Set objBarcode.ActiveCanvas = objCanvas ' Set the barcode canvas
objCanvas.GlobalColourTable(0) = RGB(255,255,255) ' Setup palette
objCanvas.GlobalColourTable(1) = RGB(0,0,0)
objCanvas.BackgroundColourIndex = 0 ' Setup pens
objCanvas.ForegroundColourIndex = 1
objCanvas.Resize 320,240,False ' Resize the image
objBarcode.Height = 30 ' Set the barcode information
objBarcode.Top = 0
objBarcode.Left = 0
objBarcode.Text = "ABC123"
objBarcode.Render ' Render the barcode to the canvas
objCanvas.Write ' Write the GIF to the browser
%>
Each barcode class supports a handful of different properties and methods:
ActiveCanvas - Canvas object which the barcode will write to Top, Left, Height - Dimensions of the barcode QuietZone - This is the space in pixels before and after the code GetWidth() - This will return the actual width of the barcode in pixels Render() - Render the barcode onto the canvas Text - The actual text to render in the barcode NarrowWidth - Smallest element size in pixels
WideRatio - Ratio of wide to small MOD43 - True/False, include the MOD43 checksum digit
WideRatio - Ratio of wide to small
No extra properties
WideRatio - Ratio of wide to small MOD10 - True/False, include the MOD10 checksum digit
As of version 2.0.2 of ASPCanvas, some new classes were added to enhance the existing functionality. These are classes designed to simplify the graphing and reporting aspect, which is currently the most common usage for this script.
When you unpack the initial ASPCanvas package, you will see a charts folder containing several ASP files. These contain classes which can be added to your ASPCanvas project to provide flexible and instant graphs and charts.
ASPCanvas comes with the following classes:
- ChartGraph (chart_graph.asp)
- ChartBar (chart_bar.asp)
The following information will show how to create graphs and charts using these classes, including examples
This is a generic charting class which can produce scatter or line charts with 2 axis. The class contains methods and properties to control the axis formatting, dataset formatting and legend positioning and formatting. All elements on the graph can be hidden or shown.
ActiveCanvas - (object) Canvas object to draw the graph onto Top, Left - (Integer) Top position within the canvas object to draw the graph Height, Width - (Integer) Dimensions of the chart within the canvas object AxisColourIndex - (Integer) Palette colour of the X and Y axis XAxisOffset - (Integer) Offset from the left of the chart area YAxisOffset - (Integer) Offset from the top of the chart area XAxisText - (String) Main X axis text YAxisText - (String) Main Y axis text XAxisTextOffset - (Integer) Offset of the text from the left side of the graph YAxisTextOffset - (Integer) Offset of the text from the bottom side of the graph XAxisValueTextNS - (Boolean) Draw the X axis text running vertically YAxisValueTextNS - (Boolean) Draw the Y axis text running vertically DrawXAxis - (Boolean) Draw the X axis and text DrawYAxis - (Boolean) Draw the Y axis and text DrawXAxisMinMaxValues - (Boolean) Draw the values at each end of the X axis DrawYAxisMinMaxValues - (Boolean) Draw the values at each end of the Y axis DrawXAxisMajorValues - (Boolean) Draw the major values along the X axis DrawYAxisMajorValues - (Boolean) Draw the major values along the Y axis DrawXAxisName - (Boolean) Draw the X axis name DrawYAxisName - (Boolean) Draw the Y axis name DrawLegend - (Boolean) Draw the legend LegendX - (Integer) Left position of the legend LegendY - (Integer) Top position of the legend LegendMargin - (Integer) Margin on the inside of the legend ClearLegendBackground - (Boolean) True clears the inside of the legend box LegendBackgroundColourIndex - (Integer) Palette index of the legend background MaxX - (Integer) Maximum value of X axis MaxY - (Integer) Maximum value of Y axis MinX - (Integer) Minimum value of X axis MinY - (Integer) Minimum value of Y axis XMinor, YMinor - (Integer) Spacing of minor value pips XMajor, YMajor - (Integer) Spacing of major value pips MajorPipSize - (Integer) Size of major pips MinorPipSize - (Integer) Size of minor pips DataSets - (Collection) Collection of datasets
AddSet() - Create a new dataset for the chart Render() - Render the chart onto the ActiveCanvas
Along with this main class there are two smaller classes which store information about the datasets. These are the ValueSet and Point class. The following is available for the Point class:
DrawDots - (Boolean) Show each value with a cross DrawLines - (Boolean) Draw lines between points DotCrossSize - (Integer) Size of each value cross DotColourIndex - (Integer) Colour of each cross LinePattern - (String) Line pattern for the dataset Name - (String) Name of the dataset DrawName - (Boolean) Show the datasets name on the graph DrawValues - (Boolean) Show the values of each point DrawRoot - (Boolean) Join the values to the root of the graph Points - (Collection) Collection of points for the data set
AddPoint(lX,lY) - Add a point to the collection AddPoints(aPoints) - Add an array of points to the collection
And for the points class there are only two properties
X - X position of the point Y - Y position of the point
An example of how to use this class:
<!--#include file="canvas.asp"-->
<!--#include file="charts/chart_graph.asp"-->
<!--#include file="extra_fonts/lucida_8_point.asp"-->
<%
Dim objCanvas, objChart
Set objCanvas = New Canvas
Set objChart = New ChartGraph
objCanvas.GlobalColourTable(0) = RGB(255,255,255)
objCanvas.GlobalColourTable(1) = RGB(0,0,0)
objCanvas.GlobalColourTable(2) = RGB(255,0,0)
objCanvas.GlobalColourTable(3) = RGB(0,255,0)
objCanvas.GlobalColourTable(4) = RGB(0,0,255)
objCanvas.Resize 800,600,False
objCanvas.ForegroundColourIndex = 1
Set objChart.ActiveCanvas = objCanvas
objChart.Left = 50
objChart.Top = 50
objChart.Width = 630
objChart.Height = 480
objChart.MaxY = 500
objChart.MaxX = 500
objChart.MinX = 0
objChart.MinY = 0
Dim objSet
Set objSet = objChart.AddSet()
objSet.Name = "First set"
objSet.DotColourIndex = 3
objSet.AddPoints Array(10,10,20,20,30,30,40,60,80,90,45,87,45,76,44,35,68,44,77,17,74,36)
objSet.LinePattern = "3"
objSet.DrawRoot = False
objSet.DrawValues = False
objSet.DrawName = False
objSet.DrawLines = True
objSet.DotCrossSize = 1
Set objSet = objChart.AddSet()
objSet.Name = "Second set"
objSet.DotColourIndex = 4
objSet.AddPoints Array(103,164,124,56,54,67,3,5,35,56,256,345)
objSet.LinePattern = "4"
objSet.DrawRoot = False
objSet.DrawValues = False
objSet.DrawName = False
objSet.DotCrossSize = 1
objSet.DrawLines = True
Set objSet = objChart.AddSet()
objSet.Name = "Third set"
objSet.DotColourIndex = 2
objSet.AddPoints Array(20,30,50,60,40,70,80,100)
objSet.LinePattern = "2"
objSet.DrawRoot = False
objSet.DrawValues = False
objSet.DrawName = False
objSet.DotCrossSize = 1
objSet.DrawLines = True
Set objSet = objChart.AddSet()
objSet.Name = "Fourth set with a long, long name"
objSet.DotColourIndex = 1
objSet.AddPoints Array(10,20,30,40,50,60,70,80)
objSet.LinePattern = "1"
objSet.DrawRoot = False
objSet.DrawValues = False
objSet.DrawName = False
objSet.DotCrossSize = 1
objSet.DrawLines = True
objChart.DrawXAxisMajorValues = True
objChart.DrawYAxisMajorValues = True
objChart.DrawXAxisMinMaxValues = True
objChart.YAxisValueTextNS = False
objChart.XAxisTextOffset = 50
objChart.YAxisTextOffset = 50
objChart.XMajor = 100
objChart.YMajor = 100
'objChart.LegendY = -3
objChart.Render
objCanvas.Write
%>
This is a generic bar charting class which can produce bar charts with 2 axis. The class contains methods and properties to control the axis formatting, dataset formatting and legend positioning and formatting. All elements on the chart can be hidden or shown.
ActiveCanvas - (object) Canvas object to draw the chart onto Top, Left - (Integer) Top position within the canvas object to draw the chart Height, Width - (Integer) Dimensions of the chart within the canvas object AxisColourIndex - (Integer) Palette colour of the X and Y axis XAxisOffset - (Integer) Offset from the left of the chart area YAxisOffset - (Integer) Offset from the top of the chart area XAxisText - (String) Main X axis text YAxisText - (String) Main Y axis text XAxisTextOffset - (Integer) Offset of the text from the left side of the chart YAxisTextOffset - (Integer) Offset of the text from the bottom side of the chart DrawXAxis - (Boolean) Draw the X axis and text DrawYAxis - (Boolean) Draw the Y axis and text DrawAxisMinMaxValues - (Boolean) Draw the values at each end of the X axis DrawAxisMajorValues - (Boolean) Draw the major values along the X axis DrawLegend - (Boolean) Draw the legend LegendX - (Integer) Left position of the legend LegendY - (Integer) Top position of the legend LegendMargin - (Integer) Margin on the inside of the legend ClearLegendBackground - (Boolean) True clears the inside of the legend box LegendBackgroundColourIndex - (Integer) Palette index of the legend background MaxX - (Integer) Maximum value of X axis MaxY - (Integer) Maximum value of Y axis MinX - (Integer) Minimum value of X axis MinY - (Integer) Minimum value of Y axis XMinor, YMinor - (Integer) Spacing of minor value pips XMajor, YMajor - (Integer) Spacing of major value pips MajorPipSize - (Integer) Size of major pips MinorPipSize - (Integer) Size of minor pips Vertical - (Boolean) Set the orientation of the chart DataSets - (Collection) Collection of datasets
AddSet() - Create a new dataset for the chart Render() - Render the chart onto the ActiveCanvas
Along with this main class there are two smaller classes which store information about the datasets. These are the ValueSet and Point class. The following is available for the Point class:
DrawFill - (Boolean) Fill the bars with the FillIndex DrawLines - (Boolean) Draw lines around each bar FillIndex - (Integer) Palette index of the bars fill colour BorderIndex - (Integer) Palette index of the bars border colour Name - (String) Name of the dataset DrawName - (Boolean) Show the datasets name on the chart
AddPoint(lX,lY) - Add a point to the collection AddPoints(aPoints) - Add an array of points to the collection
And for the points class there are only two properties
Category - Category for the point Value - Value for the point
An example of how to use this class:
<!--#include file="canvas.asp"-->
<!--#include file="charts/chart_bar.asp"-->
<!--#include file="extra_fonts/lucida_8_point.asp"-->
<%
Dim objCanvas, objChart
Set objCanvas = New Canvas
Set objChart = New ChartBar
objCanvas.GlobalColourTable(0) = RGB(255,255,255)
objCanvas.GlobalColourTable(1) = RGB(0,0,0)
objCanvas.GlobalColourTable(2) = RGB(255,0,0)
objCanvas.GlobalColourTable(3) = RGB(0,255,0)
objCanvas.GlobalColourTable(4) = RGB(0,0,255)
objCanvas.GlobalColourTable(5) = RGB(128,128,128)
objCanvas.Resize 800,600,False
objCanvas.ForegroundColourIndex = 1
objCanvas.Rectangle 0,0,798,598
Set objChart.ActiveCanvas = objCanvas
objChart.Left = 50
objChart.Top = 50
objChart.Width = 640
objChart.Height = 480
objChart.Max = 150
objChart.Min = 0
objChart.Vertical = True
Dim objSet
Set objSet = objChart.AddSet()
objSet.Name = "First set"
objSet.AddPoints Array("Category A",10,"Category B",20,"Category C",30)
objSet.FillIndex = 2
Set objSet = objChart.AddSet()
objSet.Name = "Second set"
objSet.AddPoints Array("Category A",10,"Category B",20,"Category C",30)
objSet.FillIndex = 3
Set objSet = objChart.AddSet()
objSet.Name = "Third set"
objSet.AddPoints Array("Category A",10,"Category B",20,"Category C",30)
objSet.FillIndex = 4
Set objSet = objChart.AddSet()
objSet.Name = "Fourth set"
objSet.AddPoints Array("Category A",15,"Category B",25,"Category C",35,"Category A",10,"Category B",5,"Category C",80)
objSet.FillIndex = 5
objChart.Render
objCanvas.Write
%>
As with version 1.0.x of ASPCanvas, the GIF's are still uncompressed. The palette is still fixed to the first 128 colours of the GIF as well. These aren't going to change. Sorry. ChiliSoft's ASP package still doesn't support VBScript classes, so this wont work with that MDAC 2.6 is required so that ADO Streams are present and correct There is not, and never will be any image re-scaling in ASPCanvas FloodFill is slow. I know. Write me a better one. UNISYS are a pain in the ass. They received an extension on the LZW patent. But that's ok, I don't use the LZW algorithm anyway. :)
- Images are "uncompressed" GIF's. That is, the encoding is 7-bit data with the last bit used to stop the decoder from ratcheting up the LZW tables.
- GIF's are written as 89a's
- The maximum canvas size is 65535x65535
- Line drawing method: Bresenham point to point, with no mid-point problems
- Elliptical drawing method: Bresenham (symmetrical, no mid point problems)
- Flood fill method: 4 point NSEW fill, non-recursive
- Text type: Bitmap and vector fonts
- Boundaries: The upper left of the image is (0,0)
- File I/O: Uses ADO's Stream object to load and save bitmaps.
- Rendering: Uses ADO's Stream object to render GIF data in memory.
The font.asp file contains the information needed to render bitmap and vector fonts to the canvas. The standard font pack which accompanies this release contains definitions for all characters in the standard ASCII character set from numbers 32 to 126 inclusive. The standard bitmap font size in this pack is defined on a 5x5 grid, but can be expanded by adjusting the font information if need be.
ASPCanvas needs a dictionary object called "Font" to be declared, this contains keys to each letter in the ASCII set, which in turn contains an array of strings with the font information. The declaration of the standard font pack shows the following code:
Dim Font, Letter(5)
Set Font = Server.CreateObject("Scripting.Dictionary")
Letter(0) = "01100"
Letter(1) = "10010"
Letter(2) = "10010"
Letter(3) = "11110"
Letter(4) = "10010"
Font.Add "A",Letter
To increase the height of the font pack, change the initial dimensions of the Letter array and add the extra lines to the letter definition. To increase the width, simply add the extra 0's to the arrays strings. Both upper and lower case letters can be added in this way, as the dictionary object is case sensitive with its keys.
Also note that the fonts can support up to 9 colours, the standard font pack will utilise colour index 1. By inserting numbers from 1-9, the rendering engine will use the corresponding index from the GlobalColourTable array.
Vector fonts are supported in version 1.0.3 of ASPCanvas, and can be changed from the same font.asp file. It is similar in many respects to the bitmap fonts from above, but instead of defining a flat bitmap for each character, it uses points to draw lines on the canvas to form a character. To define a vector font set of your own is relatively simple as with the bitmap fonts, you need a dictionary of vector characters containing an array of values. Vector fonts can be of any size and width, the width of each character is worked out by the code when a character is drawn onto the screen. The font pack which comes with this version is designed around the existing 5x5 bitmap font. The declaration of the vector fonts are as follows:
Dim VFont, VLetter()
Set VFont = Server.CreateObject("Scripting.Dictionary")
ReDim VLetter(8,3)
VLetter(0,0) = 1 : VLetter(0,1) = 5 : VLetter(0,2) = 1
VLetter(1,0) = 1 : VLetter(1,1) = 2 : VLetter(1,2) = 1
VLetter(2,0) = 2 : VLetter(2,1) = 1 : VLetter(2,2) = 1
VLetter(3,0) = 3 : VLetter(3,1) = 1 : VLetter(3,2) = 1
VLetter(4,0) = 4 : VLetter(4,1) = 2 : VLetter(4,2) = 1
VLetter(5,0) = 4 : VLetter(5,1) = 5 : VLetter(5,2) = 1
VLetter(6,0) = 1 : VLetter(6,1) = 4 : VLetter(6,2) = 0
VLetter(7,0) = 4 : VLetter(7,1) = 4 : VLetter(7,2) = 1
VFont.Add "A",VLetter
This example is taken from the font pack and defines the letter "A" (ASCII 65). VFont is a dictionary object which holds definitions for each character, VLetter is used to build an array of values for each point. VLetter is re-dimensioned for each character in accordance to the number of lines necessary to build a character, some characters require more, some less.
The first dimension in the array is the line number and defines the order in which the lines are drawn, the second dimension in the array contains the X, Y and "Pen down" value for the point. In the first line, the X position is 0, the Y position is 5 and the Pen is down from the last point to this current point (as this is the first point, nothing is actually drawn).
You will notice that the 7th line (the line starting with (6,0)) that the pen value is 0, which means that the pen is up and the line from the last point is not drawn. This is useful if you have characters such as "!" where the current position needs to "jump" from one position to the next without drawing anything.
FontMaker is a small utility which can be used to create bitmap fonts from any of the standard Windows fonts
The utility is located in the fontmaker folder within the ASPCanvas archive. To use this, install the aspcanvas archive folder onto your web server. Ensure that the fontmaker folder contains at least the following two files:
- class_request.asp
- fontmaker.asp Also make sure that canvas.asp is located in the folder above (either that or edit fontmaker.asp so that the SSI points to the right location on the server
In your web browser, run the fontmaker.asp file from the web server. The page will give you an ASCII character set with which you can copy the needed text, it will also prompt you for the file of an uncompressed, 128 colour windows bitmap file for it to load which contains a correctly formatted text image. There is an example in the supplied fontmaker folder.
The bitmap file must have the following attributes:
- Uncompressed (ie RGB only)
- Reduced to 256 colours (with only the first 128 colours being used)
- The first colour index is the background colour
- The second colour index is the font foreground
- The third colour index contains the colour to mark each font letter
- The height of the bitmap defines the height of the actual font It doesn't matter how far apart each letter is in the bitmap, as long as the gaps are filled correctly as per the example.
Select the file to upload using the Browse... button, give a width for the space character in pixels, specify a pixel border (if any) to give to each character. Then press "Create Font Pack".
If everything is set correctly, a second text area will appear with the source code for the font pack. You now need to copy this text into an ASP file and it can now be included at the top of you ASPCanvas drawing page instead of the normal font pack.
Including multiple images within your HTML page
Currently, there is an issue with caching image data from MS IIS servers and MS IE browsers. This consists of the browser assuming that the same filename will contains exactly the same image data if the file is re-used multiple times on a single page. To stop IE from displaying the same image over and over again on the same page, simply add a bogus parameter to the end of the ASP page location. As in the following example:
<imgsrc="test.asp?bogus=1">
<imgsrc="test.asp?bogus=2">
<imgsrc="test.asp?bogus=3">
This will ensure that the image data is always recalculated.
If you have this option turned on in IIS for the web site which ASPCanvas is running on, the integration between IE and IIS will cause IE to see the ASP page as simply text, and will only render the image as text. Ensure that client-side debugging is disabled in the IIS MMC before testing ASPCanvas. You can find this option in Default Web Site->Properties->Home-> directory->Configuration->App debugging->Enable ASP client-side script debugging.
Due to the different ways in which browsers interpret the MIME types and file extensions from a web server, some non-IE browsers will not render the GIF files directly from an ASP file. It is advised that all images produced by ASPCanvas be rendered through a tag within an HTML page. Care has been taken to ensure the correct content disposition of the file is sent to the browser.
There is a likely chance that you maybe mixing the ASPCanvas with HTML code. This is quite a common mistake to make and usually appears with code like this:
<!--#include file="canvas.asp"-->
<HTML>
<HEAD>
<TITLE>Test ASPCanvas page that won't work</TITLE>
</HEAD>
<BODY>
<%
Dim objCanvas
Set objCanvas = New Canvas
... ASPCanvas code
objCanvas.Write ' The HTML headers have already been sent, so this will send garbage to the browser
%>
</BODY>
</HTML>
This simply will not work because GIF code cannot be mixed with HTML. Create two pages, one with the HTML, the other with the ASPCanvas code and then include the ASPCanvas page into your HTML page with the tag.
Due to the way in which ASPCanvas 2.0 internally renders its bitmap, it has become necessary to make sure that certain conditions are met if you are developing for a different Locale ID other than English. It is advised that the LCID of the Session object be set to the value 1033 (US English) for just the image generation page. This ensures that ADO will interpret the x-ansi stream correctly without any character conversions.
If you are attempting to use the LoadBMP method within ASPCanvas and get nothing but garbled image information, there is a likely chance that the image uses colour indexes greater than 127. ASPCanvas will only render the first 128 colours in the BMP palette due to the way in which it creates the GIF file. To fix your image so that it loads correctly, load it into a paint package such as Paint Shop Pro or Photoshop and reduce the number of colours to 128. This will re-index the colours so that it uses only the first 128 colours in the palette. Then expand the colours back to 256 and re-save. Another way of fixing this problem temporarily is to use the TruncatePalette method which will 'fix' the palette so the image does display. However, this method will not provide corrected colours for indexes greater than 128.
Please note that the ChiliSoft ASP package does not support VBScript classes, and will not run this script correctly
With thanks to Tony Stefano, ASPCanvas now contains extra font packs. These are located in the "extra_fonts" folder. Tony has been kind enough to allow me to include these with the current script pack. These are bitmap fonts, with fixed point sizes:
- Arial, 10 point - "arial_10_point.asp"
- Courier, 10 point - "courier_10_point.asp"
- Courier New, 8 point - "courier_new_8_point.asp"
- Courier New, 10 point - "courier_new_10_point.asp"
- Lucida, 8 point - "lucida_8_point.asp"
- Lucida, 10 point - "lucida_10_point.asp" To use a font from the list, copy the file from the "extra_fonts" folder into the same folder as canvas.asp and adjust the first code line in canvas.asp, replacing "font.asp" to the name of the font file you wish to use
Please be aware that these are bitmap fonts. Replacing the standard font pack will mean that the vector fonts will be unavailable
Chris Read can be contacted using the following e-mail address:
The primary location of this source and documentation is at the following address:
https://github.com/Centurix/ASPCanvas2
- More barcode formats
- OCR-A/OCR-B/MICR band fonts
- More charting/graphing classes
Pretty much all of this is written by Chris Read, but portions of the code have been kindly donated by the following people:
- Richard Deeming (http://www.trinet.co.uk) - Improved Arc functions
- Daniel Hasan - Fixing the Bezier algorithm and also improving Netscape support
- Tony Stefano - Extra font packs
I feel that I should insert a 'thank you' to the literally thousands of people who have sent me mail about ASPCanvas. I had no idea that this component could be so useful to so many people out there. I respond to every mail I receive and I'm always happy to see the end result of utilising ASPCanvas in a larger project. Your support is always welcome!
Quite a number of people have written to me asking how they can get information on the various image formats such as GIF, JPEG, PNG and so forth. Most of the information about image formats was gained from several years working with a lot of different formats, but more of the technical information was gathered from the following sites:
The University of Edinburgh 2D image format page
This contains a great deal of information on each image format, including the CompuServe GIF documentation.
The Indiana University Knowledge Base
Good portal for image resources.
Contains a wealth of information about some of the basic barcode formats
POS World DEFUNCT
Generates example barcodes on the fly. Great for comparing results. They also do 2D barcodes.
These are great places to start looking at graphic image formats.