.Net includes several libraries that let us create images on the fly. In this article Michael shows us how to create a dynamic image-based counter with JScript.Net.
Building a Counter Using JScript.Net - The JScript.Net Code (Page 3 of 4 )
First off, we need to create the functions which will read and save the counter (increase counter before if new visitor). Copy the following code into a new text file and save the file as counter.aspx:
var FilePath:String = Server.MapPath("\\") + "counter.txt";
function getCounter():String { var SR:StreamReader = File.OpenText(FilePath,FileMode.Open); var Counter:String = SR.ReadLine().ToString(); SR.Close();
var Cookie:HttpCookie; Cookie = Request.Cookies("OldVisitor");
if(Cookie==null) { var CounterInt:int = Convert.ToInt32(Counter); CounterInt++; Counter = Convert.ToString(CounterInt);
var FS:FileStream = new FileStream(FilePath, FileMode.Open, FileAccess.Write); var Text:StreamWriter = new StreamWriter(FS); Text.WriteLine(Counter); Text.Close(); FS.Close();
Cookie = new HttpCookie("OldVisitor","true"); Cookie.Expires = DateTime.Now.AddSeconds(120); Response.AppendCookie(Cookie); }
return Counter; }
Response.Write(getCounter()); %>
You should now place the counter.aspx in your root folder (i.e. c:\InetPub\wwwroot) on your Internet Information Server. Also, create a file called counter.txt and set the read/write security options to full access for the user your are running under IIS. Open the counter.txt file, write a number (i.e. 999) and save the file.
When you now open the URL http://localhost/counter.aspx in your browser, you will see a text counter. The counter has already add one count to the number you put in counter.txt.
Now we want to replace the text counter with an image that we will create on the fly. Add the following code to counter.aspx before the "Response.Write(getCounter());" line:
function drawCounter() { var height:int=20; var width:int=60;
var bmp:Bitmap = new Bitmap(width, height); var img:Graphics = Graphics.FromImage(bmp);
var white:SolidBrush = new SolidBrush(Color.White); var black:SolidBrush = new SolidBrush(Color.Black);
var CurrentCounter:String = getCounter();
var CounterFont:Font = new Font("Arial", 8, FontStyle.Bold); var Text:SizeF = img.MeasureString(CurrentCounter,CounterFont);
img.FillRectangle(black, 0, 0, width, height); img.DrawString(CurrentCounter, CounterFont, white ,(bmp.Width)-((Text.Width)+5),3);
Also, add the following namespaces to the namespace declarations at the beginning of the file:
<%@ Import namespace="System.Drawing" %> <%@ Import namespace="System.Drawing.Imaging" %> <%@ Import namespace="System.Drawing.Drawing2D" %> And finally, replace "Response.Write(getCounter());" with "drawCounter();". Go back to your browser and refresh the page. You will see a graphical counter that increments when any new visitor comes to the page.