Tonec.com Bringing Internet Technology Innovations to Market since 1991
  News Products Outsourcing About Us Contact Us
what's new?what's new? featuresfeatures samplessamples manualmanual downloaddownload buybuy
  Tonec Homepage
ProductsActive Imagesamples

Please view complete list of samples

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
wmlp 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 5.0

Source code

Next sample >> 

If you have any questions or bug reports, write to support@tonec.com for technical support.

  TonecPrivacy Policy
  1999-2005. Tonec, Inc. All rights reserved.