 |
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.
|
|