Figure 5.1: All the colors you get: black, white, gray, and dark gray.
Remember the online days in the mid 80s to the early 90s? Bulletin Board Systems and UNIX prompts were all the rage, and the primary form of communication was the written word (how 'bout that ASCII art?). The dawn of the World Wide Web has brought a firestorm of color and image—at times, it seems like text and content have taken a back seat to fancy graphics, banner ads, and background images. With the appearance of portable communication devices such as Internet-enabled cellphones and handheld computers such as the Palm VII organizer, however, we are coming full-circle.
Graphics are excellent at highlighting and enhancing your web clipping applications, but you should not let them get in the way of your main goal—that of delighting the customer by giving her what she times, timely and useful information while on-the-go. The rules are different here; this isn't web browsing, so you will have to change your mental model regarding graphics in your web clipping applications.
This chapter will present the proper approach to designing and using graphics in your web clipping applications. We will highlight the importance of using local graphics and teach you how to optimize your images for display on Palm organizers. The techniques that you will learn here will also help you when designing for future mobile Internet devices.
The examples used in this chapter will be created with Adobe Photoshop, the excellent photo-editing software that many web developers and graphic designers swear by. For this book, we are providing instructions and screen shots from the Mac OS version of Photoshop, although the Windows version is functionally equivalent.
Web clipping applications support the following graphic file formats:
In addition to GIF and JPEG files, the Query Application Builder supports the following graphic file format for your web clipping application icons:
| Note: | Web clipping does not support displaying .BMP files. Only .GIF and .JPG graphics are supported within web clipping pages. You may only use .BMP files for your web clipping application's small and large icons. |
Unlike on the Web, it does not really matter which format you choose to save your files in your web clipping application. JPEG and GIF images will be automatically translated from their native format into the standard Palm bitmap format by the Query Application Builder. Similarly, the Palm.Net server will perform the same conversion for images downloaded to your organizer from the Web.
Because graphics are converted to the Palm bitmap format, certain special effects of GIF images (more precisely, of GIF89a formatted images), including animation, interlacing, and transparency, are not supported on the Palm VII.
|
Figure 5.1: All the colors you get: black, white, gray, and dark gray. |
The Motorola DragonBall 68328 processor supports up to four levels of gray on the 160x160 display on the Palm VII. Although four levels of gray does not seem like much, they provide adequate depth for displaying photo images on the Palm VII. When you specify an image to be included in your web clipping application or on a web clipping page, the Query Application Builder and the Palm.Net server automatically will downshift the image to 2-bits.
The width of the content window in Clipper is 153 pixels. Because of this, the maximum width of any graphic cannot exceed 153 pixels. If you try to display a graphic that is wider than this in your web clipping applications, the Query Application Builder will raise the following error dialog box:
Figure 5.2: Images cannot be wider than 153 pixels. |
Likewise, the Palm.Net proxy server will not send down images wider than 153 pixels to your
organizer, even if you have specified the PalmComputingPlatform META tag.
The limitations for images in web clipping application is as follows:
Ideally, images should also be smaller than the height of the visible area, or 144 pixels. While you can create a taller image, keep in mind that the user will have to scroll, something that really isn't necessary or desired.
To display images on your web clipping pages, be them local or remote, you must include the following META
tag to every page which has an image, PalmComputingPlatform. Astute readers will instantly
recognize that this is the same META tag that identifies a page as being Palm-Friendly.
<html> <head> <title>Graphics</title> <meta name="PalmComputingPlatform" content="true"> </head> <body> ... </body> </html>
 Figure 5.3: With the META tag. |
 Figure 5.4: Without the META tag. |
As shown in the figures above, if you add the META tag to your pages, images appear properly. If you do not add
the PalmComputingPlatform META tag, images appear as "[image]" or as the value of the ALT attribute. We
suggest not including the ALT attribute in any page that is Palm-Friendly as that would increase the number of bytes
sent down to the device in any transaction. On non Palm-Friendly pages that a user might (for whatever reason) visit
using web clipping, you should keep the contents of the ALT attribute as small as possible.
You insert an image in your web clipping pages using the <IMG> tag. The following set of lists shows the set of supported and unsupported attributes for this tag.
Required Attributes
Miscellaneous Attributes
left, right, top, middle, or bottom.
Unsupported Attributes
The ALIGN attribute is used to align images relative to text on the screen. The value for this
attribute can be right, left, top, bottom, or middle. The default value for this attribute is
bottom. Figure 5.5 illustrates how the various values for this attribute are rendered by Clipper.
Figure 5.5: Aligning images. |
Right
Aligning an image to the right positions it to the right of the ensuing text paragraph.
<img src="image.gif" align=right>
Left
Aligning an image to the left positions it to the left of the ensuing text paragraph.
<img src="image.gif" align=left>
Top
Top aligning an image places the text to the right of the top edge of the image.
<img src="image.gif" align=top>
Bottom
Bottom aligning an image places the text to the right of the bottom edge of the image.
This is the default value for the IMG tag so you do not need to include
the ALIGN attribute.
<img src="image.gif">
Middle
Middle aligning an image places the text to the right of the middle of the image.
<img src="image.gif" align=middle>
Figure 5.6: Applying a border to an image. |
The BORDER attribute specifies a black border around the specified image. Unlike most
web browsers such as Netscape or Internet Explorer, the default value for this attribute is not 1 but 0.
However, Clipper currently does not support border widths greater than 1 pixel and you must specify an even
number for the value of the BORDER attribute.
<img src="image.gif" border=2>
By making the default value 0, you save yourself time and bytes by not having to specify
BORDER=0 throughout all of your web clipping pages.
Figure 5.7: Applying vertical and horizontal spacing to an image. |
You can add extra space between text and an image by using the HSPACE and VSPACE
attributes of the IMG tag. Adjusting the vertical spacing of an image is an alternate place to
exactly position elements on your page without resorting to placing linebreaks and non-breaking spaces
all over your web clipping pages.
<img src="image.gif hspace=20">
Note the horizontal space preceeding the text in the VSPACE example in Figure 5.7. The width of this
space is exactly the width of the image. If you want your text to appear flush to the left, add
<BR CLEAR="ALL"> in your code between the line for the image and text.
<img src="image.gif vspace=10"> <br clear="all">
In general, there is no reason to add these attributes to your images. If you have a graphic that you display in multiple widths and heights, you must generate separate files for each stretched image. The Query Application Builder will error if you try to specify the same image but with a different width or height.
|
Correct <img src="bullet.gif"><br> <img src="bullet.gif"><br> <img src="bullet.gif"><br> |
Incorrect <img src="bullet.gif" width="20"><br> <img src="bullet.gif" width="25"><br> <img src="bullet.gif" height="25"><br> |
When you build a web clipping application with the QAB, each filename, be it an HTML file or an image file, must have a unique filename. When you specify a separate width or height to an image, the QAB creates unique files for each image. But, because they have the same name, an error occurs and your web clipping application will not be built.
If you are displaying an image from the Web and are specifying a different width and height, the file will be converted by the Palm.Net proxy server and sent down to your device.
There are two ways to reference an image within your local and remote web clipping pages.
In relative referencing, you simply specify the filename of the graphic that you want to display. You use relative referencing when displaying images from local pages of your web clipping application. Use of relative referencing from remote pages will cause graphics to be downloaded from the Web to your organizer, something is generally not a good idea.
The format for a relative reference is listed below:
<img src="myimage.gif"> myimage.gif = The filename of the image you wish to display.
The filename for the image is case-sensitive.
If you refer to an image in a local page, that image will be stored within the PQA, where it can be referred to from other web clippling applications or from remote pages via an absolute reference.
Any graphic that you send from the server will be sent as many times as there are references to it in your HTML document. Thus, if you refer to a server-side graphic three times, that same graphic will be converted and sent to the Palm organizer three times, greatly increasing the amount of data being sent over-the-air.
In absolute referencing, you specify the exact path to an image in a web clipping application. While you can use this method to specify images from local pages of a web clipping application, you generally use absolute referencing from remote pages.
The format for an absolute reference is listed below:
<img src="file:MyApp.pqa/myimage.gif"> MyApp.pqa = The filename of the web clipping application containing the image. myimage.gif = The filename of the image you wish to display.
As with the filename for the image, the filename of your web clipping application is case-sensitive.
As we noted in the previous chapter, the Query Application Builder flattens the directory structure of a web clipping application. This means you have to alter the syntax you use in an absolute reference to an image (or an HTML file). For instance, suppose you had an image that you placed in a folder called graphics. On a local page of the web clipping application, you refer to the graphics folder when using a relative reference to the image.
<img src="graphics/myimage.gif">
When you build your PQA with the QAB, however, the image is taken from the graphics folder and stored in the top level of your web clipping application. So, if you refer to the myimage.gif from a remote page, you must not refer to the graphics folder. That folder does not exist in the web clipping application.
|
Absolute Referencing On Remote Pages |
|
|
Correct <img src="file:MyApp.pqa/myimage.gif"> |
Incorrect <img src="file:MyApp.pqa/graphics/myimage.gif"> |
Unlike web browsers such as Netscape and Internet Explorer, a border is not placed around
images that are part of an anchor tag. To explicitly have a border around your
images in anchor tags, use the BORDER attribute, as shown in the
code snipper below:
<a href="http://www.yourserver.com"><img src="image.gif" border=2"></a>
Figure 5.8: The over-the-air (OTA) icon embedded in the graphic. |
Images that are part of a link pose another interesting problem that you have to resolve in your web clipping applications. On the Palm VII, every link has the over-the-air icon to the right of the underlined text. With images, however, the over-the-air icon is not displayed when the image is part of a hyperlink.
It is recommended that you give some indication that tapping on an image which is part of a link will conduct a wireless transmission. We suggest that you incorporate the over-the-air icon in the graphic itself, as shown on the right in Figure 5.8.
Some web sites use images instead of text as their form submit buttons. Unfortunately, this is not supported in web clipping so the following will not work:
Unsupported: <INPUT TYPE="SUBMIT" IMG="image.gif">
A frequent question in web clipping design is if there is any way to store an image in a web clipping application that is used only on remote pages. That is, can an image be store in a PQA without referring to it on any local page?
The answer is a resounding, "Yes!" Palm Computing has expressly created a special META tag,
LocalIcon, which allows web clipping application developers to store images within their PQA
without having to first reference them from a local page.
The benefits of this to have local graphics are obvious as the user would only have to download
the reference to the image, as opposed to the entire image itself, everytime an image is
displayed on a remote page. This serves to keep the page size at a minimum.
The LocalIcon META tag is what you use to store graphics locally within your PQA.
The sample code below gives an example on how to use the LocalIcon META tag:
<html> <head> <title>LocalIcon</title> <meta name="LocalIcon" content="baby.gif"> <meta name="PalmComputingPlatform" content="true"> </head> <body> ... </body> </html>
The META tag is placed within the HEAD tag of your web clipping pages. The
CONTENT field of the tag should be the filename of the graphic you wish to store within your
web clipping application. The name of the META tag, LocalIcon need not be case-sensitive,
but the filename is case-sensitive. If you do not enter the correct filename for the graphic, an
error will appear when you try to build the PQA with the Query Application Builder.
| Note: |
All of your META tags must be placed within the
HEAD tag in your HTML pages. It is also a good idea to put your LocalIcon META
tags in your main index page, although this is not a requirement.
|
When you add your index page to the Query Application Builder window, the graphic will automatically be added to the list of files in your PQA:
Figure 5.9: Query Application Builder (Mac OS) |
To refer to local graphic, use absolute referencing:
<img src="file:MyApp.pqa/baby.gif"> MyApp.pqa = The filename of your web clipping application. baby.gif = The filename of the local graphic.
Why would you want to store your graphics locally on your PQA instead of sending them over the wireless connection? Size and speed. You'll save significant bytes and time because you are only sending the reference to the image, rather than the entire image. Remember, one of the primary goals of effective web clipping design is to send as little data over-the-air as possible. The only time you will want to send graphics over-the-air is when you are sending a dynamically generated image, such as a chart or a map.
| The mantra for graphics should be Local Graphics, Local Graphics, Local Graphics. |
If you still are not convinced of the benefits of using local graphics, let's take a look at a detailed example. The images below show the size in bytes of two web clipping pages which display the exact same image. The one on the left references a local image while the example on the right references a remote graphic on the Web.
Figure 5.10: Where's the beef? Displaying local graphics uses only 36 bytes. |
Figure 5.11: Extra fatty. Sending the image results in a clipping that's over 4000 bytes! |
36 versus 4320 bytes. 0.07% versus 8.44% of a user's monthly quota (using the basic 50 KB/month plan as a base). In the immortal words of Herbert Enderton, Professor of Math at UCLA, the answer to the question of whether to use or not use local graphics is left as an exercise for the reader.
Techniques for optimizing photos and text graphics are similar but worthy of separate sections.
The Query Application Builder tends to wash out or add extraneous pixels to graphics when downshifting your them to 2-bits. As a result, to get great looking graphics in your web clipping applications, you will need to optimize the images for display on the Palm VII. Consider the following example:
Figure 5.12: Original graphic |
Figure 5.13: Graphic as converted by QAB |
This photogenic baby has definitely seen betters days in front of the camera when converted to 2-bits by the Query Application Builder. As you can see, the picture is washed out with the baby's face just sticking out in the image like a sore thumb. Clearly, there is some work need to make the image look more visually appealing on the Palm VII display.
There is a three step procedure for creating optimized graphics for your Palm VII query applications.
The first step in optimizing the graphic is to convert the image to grayscale. Since the Palm VII screen cannot display colors, it makes better sense to work in grayscale mode as that will more correctly simulate how the picture is going to look on-screen. In Photoshop, use the following steps to convert the image to grayscale:
|
Figure 5.14: Original graphic. |
Figure 5.15: Graphic converted to grayscale. |
If we just took the original the baby graphic and posterized it, our result would be the the baby graphic in Figure 5.13. Clearly, the baby can look better than this so we are going to use just a smidgen of Photoshop's features to enhance the image for display on the Palm VII's screen. Our main goal is to increase the level of detail in the image. We will do this by first sharpening the image. Then, we will adjust the brightness and contrast of selected areas in the image until the posterized result suits our liking.
The original the baby graphic looks a little blurry, so we'll have Photoshop sharpen it just a tad.
|
Figure 5.16: Grayscale baby. |
Figure 5.17: Sharpened baby. |
As you can see, there is additional definition across the entire image after using the Sharpen filter.
Next, we are going to adjust the brightness and contrast to the baby to give the baby image more detail. We do this by emphasizing the dark colors and highlighting the light colors. It is important to avoid the middle grays that dominate the original baby graphic as this makes the image washed out when converted to 2-bits.
You will want to experiment with different values for brightness and contrast and use different filters to get the desired results. Luckily, since there are only four levels of gray on the Palm VII display to consider, you don't have to work too hard.
First, let's try adjusting the brightness and contrast for the entire image.
Figure 5.18: Brightness/Contrast dialog box |
Entering these values will have the following result on our the baby graphic when built with the Query Application Builder.
Figure 5.19: It's a ghost! |
Well, the baby's face is looking better, but the rest of the picture has practically disappeared, making the baby's face seem like it's floating in a sea of white pixels. To solve this problem, we need separate the baby's face from the rest of the image when adjusting the brightness and contrast.
Let's first try adjusting the brightness and contrast for the entire image.
The results are the operations above are shown in the following figures below.
|
Figure 5.20: The image after applying the Sharpen filter. |
Figure 5.21: Select the baby's face with the lasso tool. |
Figure 5.22: Invert the selection so that everything but the baby's face is selected. |
Figure 5.23: Adjust the brightness to -8 and the contrast to 45. |
Figure 5.24: Invert the selection and adjust the brightness to 31 and the contrast to 70 on the baby's face. |
Figure 5.25: The final image before posterizing. |
The Palm VII display is 2-bit, meaning it can display four levels of gray: black, dark gray, light gray, and white. The final step in our image conversion is to reduce the number of grays in our images to four. Posterize is a special effect that decreases the number of colors or grays in an image. Use the following steps in Photoshop to perform this procedure:
Figure 5.26: The Posterize dialog box |
What the Posterize command is doing—and what the Query Application Builder and Palm.Net proxy server do to images with a bit-depth larger than 2-bits—is take the black value of each pixel and assigning it the value of black, dark gray, light gray, or white according to the following table:
Figure 5.27: Each pixel is converted to one of four color values based on its black value. |
So, pixels that have from 76-100% black will be converted to black pixels. Pixels that are 51-75% black will become dark gray, or 67% black, followed by light gray at 25-50% black, or 33% black, and concluding with white at 0-24% black, or 0% black.
As you might guess, the last step in optimizing this baby photograph is to posterize the image. Compare the original baby image on the left as automatically generated by the Query Application Builder and the one on the right that we have enhanced in Photoshop.
|
Figure 5.28: Original Image |
Figure 5.29: Final Image |
Clearly, we can see much more detail in the revised the baby graphic from the original.
Photoshop has a powerful feature called Actions, which lets you save sequences of operations into a single action. Create a new action to consolidate all of the filters and adjustments you make to an image when converting it into a Palm VII-optimized graphic.
Using Actions can save you a lot of time when optimizing large numbers of graphics for your web clipping applications.
Our next example will show you how to optimize text graphics. Unlike photos, optimizing text graphics is much easier and more mechanical in nature. Consider the following text graphic.
Figure 5.30: Original Image. |
Figure 5.31: Image as built by the Query Application Builder. |
The image on the left is the original text graphic (Gill Sans Bold, 24 point) we created in Adobe Photoshop. The image on the right is what the Query Application Builder generates. At first glance, there doesn't seem to be much of a difference, but if you look carefully, you'll notice in Figure 5.31 that there are a number of stray gray and black pixels along the edges of each letter. If you view this image on your organizer and increase the contrast of the display, these stray pixels make the text graphic look like a porcupine and visually unappealing.
Figure 5.32: Porcupine text graphic |
The solution to the porcupine problem is to go through the text graphic and remove the extraneous gray pixels along the edges of your images.
When you reduce the number of grays to four using the Posterize command, the following image appears, enlarged at three times its normal size:
Figure 5.33: Note the stray pixels all along the edges of each character. |
Note the gray pixels along the tops and sides of each character. Remove these pixels with the pencil tool set to paint with white. The pixels that we will remove are shown in red in the figure below.
Figure 5.34: Pixels that we'll remove are in red. |
When we save the graphic and compare it with the original, we remark that the changes are subtle but significant.
|
Figure 5.35: Image as built by the Query Application Builder. |
Figure 5.36: Porcupine text graphic |
Figure 5.37: Optimized image. |
Figure 5.38: Optimized image at high contrast. |
The text graphic when viewed a normal contrast setting looks very similar to the original image. At high contrast settings, however, the enhanced image displays none of the porcupine qualities that plagued the original image. You can use this technique to optimize all the text graphics that you use in your web clipping applications.
To avoid the porcupine problem altogether, you can turn off text anti-aliasing in your graphics program. Your images will naturally have more jaggies but you will not run into the porcupine problem with your text graphics. Both options make visually appealing text graphics, so ultimately, it's your decision come game time.
This section covers a number of topics related to graphics and web clipping applications.
Figure 5.39: The Palm.Net PQA's simulated background image. |
The Palm VII Web Clipping application does not support background images. Any pages which have the IMG attribute in the BODY tag will be ignored. You can, however, simulate a background by making effective use of white space in your web clipping application pages.
Encase the page in a table and have a column span the entire right hand side. An excellent example of this is the Palm.Net query application. Let's take a look at what they did:
It appears that they did the following with their code:
<HTML> <HEAD> <META NAME="PalmComputingPlatform" CONTENT="TRUE"> <TITLE>Palm.Net</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD> <IMG SRC="header.gif"> Access your usage... </TD> <TD ALIGN=RIGHT> <IMG SRC="sidebar.gif" ALIGN=RIGHT> </TD> </TR> </TABLE> </BODY> </HTML>
The sidebar.gif file spans the entire right-hand side of the screen, giving the impression that the screen has a background image. The contents of the page, including the Palm.Net text graphic, occupy the left-hand side of the screen.
It has become commonplace for web sites to have banner ads within their web site to derive revenue. Many sites actually have advertising revenue as their sole source of income. These banners ads are typically saved in some database and sent down to the user's web browser whenever a page is accessed. Clearly, our web clipping design goals does not look kindly to sending graphics down over-the-air so we have to come up with a fresh, novel approach to incorporating advertising in web clipping applications.
What you can do is store the graphics for your advertisers locally within your web clipping applications. Then, you can refer to them from your remote pages for just a few bytes. The problem with this approach is what happens when you remove or add new advertisers to your product or service. If you refer to an image that isn't in the PQA, the user will see "[image]" on her screen. The solution to this is to release a new version of your web clipping application with the updated ad graphics.
 Figure 5.40: Advertising using text |
To avoid this problem altogether, you can stick with using text-based advertisements. This will obviously add some bytes to your remote pages, but your product requires banner ads to be displayed, this approach is best compromise. You should also encourage your advertisers to create a Palm-Friendly web page to which you can link. This will allow the user to get additional information about your advertisers' products and services. For an example of a text-based advertisement, look at the remote pages of the MapQuest or The Weather Channel web clipping applications. A screenshot from the MapQuest web clipping application is displayed to the right in Figure 5.40.
On a working screen size of 153x144 pixels, there's not much room to arrange your graphics. But knowing what works and what doesn't can go a long way in determining whether or not your query application looks great or looks terrible.
 Figure 5.41: Correct header graphic placement. |
Header graphics should span the width of the Palm's display, 153 pixels. We suggest creating the image width the width of 153 pixels and positioning the image in your graphics software instead of using the alignment tags in your web clipping pages. If you display the header graphic on remote pages, you will save a few bytes by doing this. An example is shown to the right in Figure 5.41.
 Figure 5.42: Correct footer graphic placement. |
Footer graphics naturally appear at the bottom the Palm display. If the contents of your web clipping page fit on one screen, use linebreaks with non-breaking spaces to accurately place your footer graphic as close as possible to the bottom of the screen without causing the scrollbar to appear. There's nothing more visually appealing than having the scrollbar appear on a page whose total height is only a few pixels taller than the content window height of 144 pixels. An example is shown to the right in Figure 5.42.
Banner ads should ideally be placed at the top of your web clipping pages. If you decide to
add them in the middle or bottom of your pages, separate the ad from the content with
the horizontal rule <HR> tag. An example of correct banner ad
placement is shown in Figure 5.40.
On many web sites, you will see the use of graphics in place of the standard defined list bullets. Many sites do this to add visual appeal to their sites, and you may have considered it for your web clipping applications. Graphic bullets may make your app look better, but they will also add unfortunate pounds to your web clipping pages. You may store the graphic locally within your PQA but the link referencing the image will have to be downloaded every time to the device. The following two examples illustrates the size difference between using standard list bullets versus custom graphic bullets.
<HTML> <HEAD> <TITLE>Bullet 1</TITLE> <META NAME="PalmComputingPlatform" CONTENT="TRUE"> </HEAD> <BODY> <UL> <LI>Book #1 <LI>Book #2 <LI>Book #3 <LI>Book #4 <LI>Book #5 <LI>Book #6 <LI>Book #7 </UL> <BODY> </HTML> |
 Figure 5.43: The size of this page is 75 bytes. |
This above page is 75 bytes when downloaded to the Palm organizer. The next example shows the exact same page, except the unordered list is replaced by graphic bullets and linebreak tags.
<HTML> <HEAD> <TITLE>Bullet 2</TITLE> <META NAME="PalmComputingPlatform" CONTENT="TRUE"> </HEAD> <BODY> <IMG SRC="file:Bullet.pqa/bullet.gif">Book #1<BR> <IMG SRC="file:Bullet.pqa/bullet.gif">Book #2<BR> <IMG SRC="file:Bullet.pqa/bullet.gif">Book #3<BR> <IMG SRC="file:Bullet.pqa/bullet.gif">Book #4<BR> <IMG SRC="file:Bullet.pqa/bullet.gif">Book #5<BR> <IMG SRC="file:Bullet.pqa/bullet.gif">Book #6<BR> <IMG SRC="file:Bullet.pqa/bullet.gif">Book #7<BR> </BODY> </HTML> |
 Figure 5.44: This size of this page is 237 bytes. |
At first glance, this web clipping page looks very similar to the first. However, tapping the header bar reveals the porky nature of this page, 237 bytes, a whopping 162 byte increase over the first page, with each bulleted item roughly costing 23 bytes.
With a small number of items, the additional bytes might be deemed insignificant but if you have a large number of graphic bullets, the weight difference becomes hefty. Thus, in our opinion, there really is not a compelling reason to use graphic bullets in your web clipping applications.
We can understate the importance of having a visually appealing icon for your web clipping application. This is the first thing a user will see with your application and you want to make a favorable first impression. It's unfortunate that many web clipping developers create great apps only to mar them with terrible icons.
You can specify the icon for your PQA in the Build PQA dialog box of the Query Application Builder. There are two icons that are associated with each PQA:
To toggle between Icon and List View in the Applications launcher, follow these steps:
Here are two screenshots showing both the list and icon view of the Applications launcher on a Palm VII organizer:
 Figure 5.45: Launcher in Icon View |
 Figure 5.46: Launcher in List View |
As you can see, while every query application has a unique icon, they all share one common feature in Icon View: the diamond over-the-air icon.
Consistency: The Circle & Palm Applications |
| All of the built-in applications on the Palm, from the original Pilot to the Palm VII, share a common iconic trait, the circle. Although it may have been the hope of Palm Computing, third-party developers did not follow suit when designing their application icons. However, we have been given a second chance with query applications and the diamond over-the-air icon. |
The diamond over-the-air icon should be incorporated in all of your projects for the sake of consistency. Users will then be able to tell that your application is intended for use on a Palm VII handheld.
The diamond over-the-air icon starts with the diamond, which you should think of as a 10 pixel square that has been rotated 45 degrees. The over-the-air icon is hard to describe in words, so here is a picture of the complete diamond over-the-air icon, enlarged 300%:
 Figure 5.47: The diamond over-the-air icon, magnified. |
This is the same over-the-air icon which will be added to normal and secure hyperlinks in your query applications.
You should attempt to display as much of the diamond over-the-air icon as possible, again to notify the user that this is a query application, but other than that, you have a carte blanche to do whatever you want.
As noted earlier, the Query Application Builder supports GIF, JPEG, and BMP files to be used for your PQA's two icons. Grayscale is not supported in your query application's icons, so be sure that you icons are in black and white, or they will look strange when viewed in the Applications launcher.
This icon should incorporate the diamond over-the-air icon and is created on a canvas of 32x22 pixels.
This icon is drawn on a canvas of 15x9 and often includes a smaller version of the diamond over-the-air icon.