Graphics for WAP--tutorial.jcwcn.com

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" >
WAP server 
</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" >

<%
'no-cache
Randomize
r=Round(RND*99999)
%>
<a href="wap.asp?r=<% =r%>">
<img src="image.asp?r=<% =r%>" alt="ActiveImage"/></a>
</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" >

<%
r = Request.QueryString("r")
if r ="" then r = "dog.png"
%>

<img src="convert.asp?r=<% =r %>" alt=""/> 
<a href="dog.asp?r=dog.png">dog</a> 
<a href="dog.asp?r=dog3.png">big dog</a> 
<a href="dog.asp?r=cat.png">cat</a>

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

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Graphics for WAP

Graphics for WAP

Configuring Server.

Creating graphics dynamically with ActiveImage v 4.2 component

Converting images to WBMP from PNG and Jpeg.

relation tutorial

Category

New

Hot