Using Location-Enabled MIDlets for Mobile Navigation, Page 3

Implementing the SVG API

SVG is an XML grammar for rich, dynamic 2D graphics. It boasts the following attributes:

• Lightweight: SVG graphics are typically more compact than their raster equivalents.
• Zoomable: SVG content can be viewed at different resolutions (e.g., enlarged or shrunk) without losing quality. This is the reason for including "Scalable" in the name Scalable Vector Graphics.
• Searchable: Because SVG content is XML, the content of an SVG image is searchable for text elements, comments, or any meta-data.
• Structured: SVG's structure makes it suitable to the requirements of user accessibility.

Table 2 provides the various classes and interfaces available in JSR 226: Scalable 2D Vector Graphics API for J2ME, which are used to implement SVG functionality.

Class or Interface	Description
javax.microedition.m2g
Scalable Graphics	Fundamental class for 2D rendering
SVGAnimator	Class handles automatic rendering of updates and animations in an SVGImage to a target user interface component
SVGEventListener	Interface used to forward platform-specific events to an application
SVGImage	Class represents an image conforming to W3C SVG Tiny 1.1 (1.2) Profile
External Resource Handler	Interface is used to load synchronously any external resources needed for loading SVG content
org.w3c.dom.svg
SVGAnimationElement	Interface represents an animation element and includes methods to control timing of animations
SVGElement	Interface represents an SVG element in the document tree
SVGLocatableElement	Interface represents a drawable SVG element (typically a shape, image, or text)
SVGMAtrix	Interface represents an SVG matrix data type identified by an affine transformation equivalent to a linear transformation followed by a translation
SVGPath	Interface represents a SVG path data type used to define path geometry
SVGPoint	Interface represents a SVG point data type identified by its X and Y components
SVGRect	Interface represents a SVG rectangle data type consisting of mimimum X, minimum Y, width and height values
SVGRGBColor	Interface represents a SVG RGB color data type composed of red, green, and blue componets
SVGSVGElement	Interface represents an element in SVG document tree (Whereas SVGElement represents a SVG element in the document tree.)

Table 2. Classes and Interfaces in JSR 226

In the sample NetBeans project for this article, the Canvas used for displaying the SVGImage of the campus layout is a class derived from Canvas called GameCanvas. This is used because the Game Keys can be utilized for positioning the image. The zoom in and zoom out functions in the image displayed in the GameCanvas are achieved with the JSR 226 SVG classes shown in Table 2.

The following gets the root SVG element in the SVG document tree into myEl. From the getBBox() function (BBox stands for bounding Box), you can get the height and width of the SVG root object.

SVGSVGElement myEl = (SVGSVGElement)(
svgImage.getDocument().getDocumentElement());SVGRect  myRect = myEl.getBBox();

You can get the current scaling factor by using the getCurrentScale() method of the root SVGElement. Similarly, you can get the current translate position using the getCurrentTranslate() method.

float fa =  myEl.getCurrentScale();SVGPoint   p1= myEl.getCurrentTranslate();

To zoom in, you can multiply the current scale by a factor. This example uses 1.2. The setCurrentScale() method is used for setting the scale. For zoom out, you multiply current scale by a factor of 1/1.2.

This scaling is carried out with respect to the top-left corner, whose coordinates are (0,0). In order to zoom in and out with respect to the center of the display, a translation has to be applied after scaling (as the code will show shortly). To achieve this translation, the SVGPoint p1 obtained from the getCurrentTranslate() method shown above is used to get the X and Y coordinates of the current translated position, as shown below.

float xf = p1.getX();float yf  = p1.getY();

Then the setX() and setY() methods are used to change the translation coordinates, where delta_x and delta_y are the X and Y coordinates by which the current position must be translated.

p1.setX(xf + delta_x);p1.setY(yf + deltay);

Listing 2 shows the code for the complete functionality in SVGStaticCanvas.java. The code is for the Canvas UI, the display of the campus map on the screen, and the zoom in, zoom out, and translation functions.