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