Sample 11 - Graphics for WAP This article describes how to turn your IIS Web Server to a WAP server that creates WBMP images on the fly. The article consists of 3 parts. First part describes how to configure IIS. Second part tells you about how to create WBMP images on the fly. Third part shows how you can convert existing images to WBMP that can be displayed by a WAP enabled phone.
> Configuring Server. First of all you should configure IIS properly. Following these steps will allow your Web server to serve up the appropriate content when requested. In order for a web server to know what to do with various file types (.html for example), MIME types are set to tell it how to handle them. For WAP access you'll need to add the WAP MIME types to your web server. WAP MIME types are:
> wbmp | image/vnd.wap.wbmp
> wml | text/vnd.wap.wml
> wmlc | application/vnd.wap.wmlc
> wmls | text/vnd.wap.wmlscript
> wmlsc | application/vnd.wap.wmlscriptc
> wmlscript | text/vnd.wap.wmlscript
> ws | text/vnd.wap.wmlscript
> wsc | application/vnd.wap.wmlscriptc
Check the accessibility of your WAP server. Place the following page and test its accessibility with WAP enabled phone or using Emulator. For example, Deckit Emulator.
> wapserver.wml
> <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <head> <meta name="Author" content="Tonec Inc"/> <meta name="Description" content="Active Image WBMP format demonstration"/> <meta name="Keywords" content="wbmp,wap,wireless,activeimage"/> <meta name="Robots" content="All"/> <meta name="Copyright" content="Copyright 2002 - Tonec Inc"/> </head> <card id="bit" title="Active Image 4.25" > <p align="center">WAP server<br/> </p></card></wml>
> Picture 1.
Creating graphics dynamically with ActiveImage v 4.2 component The following code sample shows how to create WML page with WBMP image. Since our sample has asp extension, we need to specify MIME type of the document explicitly. Then we also add headers to prevent the document from being cached. The image itself is created in image.asp script with "r" value generated randomly in order to prevent caching of the image.
> wap.asp
> <% Response.ContentType = "text/vnd.wap.wml" Response.Expires = 0 Response.AddHeader "Pragma", "no-cache" Response.AddHeader "Cache-Control", "no-cache,must-revalidate" %> <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <head> <meta name="Author" content="Tonec Inc"/> <meta name="Description" content="Active Image WBMP format demonstration"/> <meta name="Keywords" content="wbmp,wap,wireless,activeimage"/> <meta name="Robots" content="All"/> <meta name="Copyright" content="Copyright 2002 - Tonec Inc"/> <meta http-equiv="Cache-Control" content="max-age=0" /> </head> <card id="bit" title="Active Image 4.25" > <p align="center"> <% 'no-cache Randomize r=Round(RND*99999) %> <a href="wap.asp?r=<% =r%>"> <img src="image.asp?r=<% =r%>" alt="ActiveImage"/></a> </p></card></wml>
Image.asp script generates images in WBMP format by default. You can also generate images in other formats using type parameter. For example if you want to see the image in Internet Explorer, you can specify http://localhost/image.asp?type=0 for PNG format.
> image.asp
> <% LANGUAGE="VBSCRIPT" %> <% 'Set image format Dim ImageType 'ImageType = 0 ' PNG 'ImageType = 1 ' Jpeg 'By default set WBMP format ImageType = 2' WBMP 'Request from querystring variable ' this parameter specifies the format of generated images rqs = Request.QueryString("type") if rqs <> "" then if isNumeric(rqs) then if ((rqs >=0) and (rqs<3)) then ImageType = rqs end if end if ' Clear out the existing HTTP header information Response.Expires = 0 Response.Buffer = TRUE Response.Clear ' Change the HTTP header to reflect that an image is being passed. Select case ImageType case 0 Response.ContentType = "image/png" case 1 Response.ContentType = "image/jpeg" case 2 Response.ContentType = "image/vnd.wap.wbmp" case else Response.ContentType = "image/png" End Select ' Declare object variable Dim im Dim a ' Create ActiveImage object Set im = CreateObject("ActiveImage.Images.1") ' Create image with 100x100 dimensions im.CreateImage 100,100 ' Set image type im.SetImageType ImageType ' Set white color to fill the image im.SetColor 255, 255,255 im.Fill 0,0 ' Draw black rectangle and draw text im.SetColor 0, 0, 0 im.DrawRectangle 1,1,99,15 im.DrawText 2,1, "ActiveImage WBMP" ' Draw chart dynamically Dim d(5) Randomize d(1) = CInt(RND*50) d(2) = CInt(RND*50) d(3) = CInt(RND*50) d(4) = CInt(RND*50) d(5) = CInt(RND*50) h = 8 y = 10 im.SetFont 3 For i = 1 to 5 y = y + h im.DrawFilledRectangle 1,y+1,d(i),y+h-1 im.DrawText d(i)+4,y+1, d(i) next ' If image is OK, set quality Jpeg ' to 100 percents im.SetJpegQuality 100 ' Save the image to the variable a = im.WriteToVariable ' Send the image to the output stream response.BinaryWrite a ' Free memory retval = im.DestroyImage Set im = Nothing Response.End %>
> Picture 2.
Converting images to WBMP from PNG and Jpeg. The following sample converts images from one format to another. Dog.asp has r parameter that specifies what file it should display on the page. The script also has a set of predefined links with filenames. You can click on a link to see the image.
> Picture 3.
> dog.asp
> <% Response.ContentType = "text/vnd.wap.wml" Response.Expires = 0 Response.AddHeader "Pragma", "no-cache" Response.AddHeader "Cache-Control", "no-cache,must-revalidate" %> <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <head> <meta name="Author" content="Tonec Inc"/> <meta name="Description" content="Active Image WBMP format demonstration"/> <meta name="Keywords" content="wbmp,wap,wireless,activeimage"/> <meta name="Robots" content="All"/> <meta name="Copyright" content="Copyright 2002 - Tonec Inc"/> <meta http-equiv="Cache-Control" content="max-age=0" forua="true" /> </head> <card id="bit" title="Active Image 4.25" > <p align="center"> <% r = Request.QueryString("r") if r ="" then r = "dog.png" %> <img src="convert.asp?r=<% =r %>" alt=""/><br/> <a href="dog.asp?r=dog.png">dog</a><br/> <a href="dog.asp?r=dog3.png">big dog</a><br/> <a href="dog.asp?r=cat.png">cat</a> </p></card></wml>
> Picture 4.
Convert.asp script converts images from PNG or JPEG format to WBMP. You need to specify file name. For example, the following call will convert PNG image (dog.png) to WBMP image: http://localhost/convert.asp?r=dog.png. For testing purposes you can also specify the format of output image. For example, http://localhost/convert.asp?type=1&r=catwbmp.wbmp will convert WBMP image to Jpeg format. Since the screen resolution of WAP enabled phones is limited to 90x60, the image will be scaled to fit the screen.
> convert.asp
> <% LANGUAGE="VBSCRIPT" %> <% 'Set the format of generated image Dim ImageType 'ImageType = 0 ' PNG 'ImageType = 1 ' Jpeg 'WBMP format by default ImageType = 2' WBMP 'Request from querystring variable 'Type paramater sets the format of output image rqs = Request.QueryString("type") if rqs <> "" then if isNumeric(rqs) then if ((rqs >=0) and (rqs<3)) then ImageType = rqs end if end if ' Clear out the existing HTTP header information Response.Expires = 0 Response.Buffer = TRUE Response.Clear 'Query the name of the source image filename = Request.QueryString("r") if filename ="" then filename = "dogpile.png" ' Change the HTTP header to reflect that an image is being passed. Select case ImageType case 0 Response.ContentType = "image/png" case 1 Response.ContentType = "image/jpeg" case 2 Response.ContentType = "image/vnd.wap.wbmp" case else Response.ContentType = "image/png" End Select ' Declare object variable Dim im ' Create ActiveImage object Set im = CreateObject("ActiveImage.Images.1") ' Detect source image type by extension position = inStr(1,filename,".") ext = MID(filename,position+1,Len(filename)-position) Select case ext case "png" imagetypesource = 0 case "jpg" imagetypesource = 1 case "jpeg" imagetypesource = 1 case "wbmp" imagetypesource = 2 case else imagetypesource = 0 End Select ' Set source image format im.SetImageType imagetypesource path = Server.MapPath(filename) ' Load image from file im.ReadFromFile path ' Determine image dimensions w = im.GetWidth h = im.GetHeight r = 1 wmax = 90 hmax = 60 ' Change image dimensions for WAP enabled phones ' Create a smaller image and copy/resize original one ' Convert image to black and white ' if (w <> 0) and (h <> 0) then if (w > wmax) or (h > hmax) then r1 = wmax/w r2 = hmax/h if r1<r2 then r = r1 else r = r2 end if end if w1 = Round(r*w) h1 = Round(r*h) im.SetImage 1 im.CreateImage w1,h1 ' Copy image 0 to 1 (0,1 - indices of images) ' Copy the image to (0,0) point ' Copy the image from (0,0) point ' Destination area is smaller (we force resize) im.CopyImageResize 1,0,0,0,0,0,w1,h1,w,h ' Convert image to black and white im.ConvertToMonochromeAuto end if ' Set the format of output image im.SetImageType ImageType ' Set Jpeg quality for Jpeg images im.SetJpegQuality 100 ' Save image to variable a = im.WriteToVariable ' Send image to output stream response.BinaryWrite a 'Free memory im.DestroyImage im.SetImage 0 im.DestroyImage Set im = Nothing Response.End %>
> Picture 5. Image on WAP enabled phone | Picture 6. Original Jpeg image. Dimensions 91x187 | Picture 7. Conversion result Jpeg->Jpeg. Dimension 32x60
Documentation, active-x component and additional examples can be obtained from here: ActiveImage 4.25
Source code
If you have any questions or bug reports, write to active.image@tonec.com for technical support.