Interactive SVG mapping application on BlackBerry

Table of Contents

Functional Requirements
Design choices
Graphics Design
Interactive mobile SVG applications in the future

Along with the expansion of the mobile phone user base, user expectations and usage patterns have significantly changed in the recent past. The introduction of mobile app store, endorsed by major smart phone manufacturers, has set a new trend and opened new opportunities for mobile application developers. Market research analysts predict that mobile application store users will quadruple in the next five years, with more and more users downloading applications. [1]

With the functionality offered by the uDOM in SVG 1.2, it is possible to create content rich interactive application for mobile phones. This paper presents an overview of the development tools, the design and challenges in developing an interactive SVG based mapping application on the BlackBerry Storm. Such a map can be useful in buildings, museums etc. where a GPS cannot be used. Another possible use of such an application can be in providing a virtual tour of a city to a user, offering information such as main areas of attraction, shopping venues, restaurants etc.

We base our design by keeping the set of existing functionality offered by raster maps intact and adding more functionality to form a super set of requirements for the interactive map. Since we are designing a UI application, each requirement can essentially be treated like a use case. The following diagram illustrates the use cases for an ideal mapping application.

The extra functionality proposed for the interactive map is in bold, and consists of panning the image, searching for content, playing media such as audio or video, and navigating to another map.

On desktop computers, pointer events are generated by the mouse. When the user navigates from one visual element to another, an event is generated. This model does not map just as well on smart phones as there is no “native” concept of a pointer device. The one way to get around this on track ball based devices is to design a custom cursor that can be moved around the SVG image using the keys available on the device. We experimented with this approach using trackball based BlackBerry devices and found that using a custom cursor was rather tedious and did not provide a good user experience. The other way to work around this issue would be to create focus orders in the SVG image such that the user would be able to focus on certain elements( pre-determined by the developer) in a focus order. This approach is actually used in mobile browsers in which the focus moves from one image to another as the user navigates the browser page via a trackball. However, for a mapping application it makes more sense to give the user a more flexibility. Keeping these aspects in mind, we chose the BlackBerry Storm smartphone as our device for development. The BlackBerry Storm device is a touch-based device. Since the user is free to touch anywhere on the image, the user is no longer subject to the problems described above.

The second design decision involved choosing a programming language for development. On mobile devices, SVG applications are commonly developed using Java or ECMAScript. Development with ECMAScript on mobile devices follows along the lines of regular web applications while creating a stand-alone UiApplication on BlackBerry involves development in Java, similar to developing a J2ME midlet. In order to create a stand-alone Java application that would run on BlackBerry Storm and to take advantage of the rich UI functionality and native touch events, we create a BlackBerry UiApplication. [2]

The graphics design involved creating the icons, background, images etc to represent the main attributes of the map. The graphics can essentially be created in any tool that can output SVG. However, to ensure that we use the subset of SVG 1.2 attributes supported on BlackBerry, we used the Plazmic Composer from the Plazmic Content Developer Kit (CDK) to create the graphics. Plazmic Content Developer Kit (CDK) is a suite of graphics design tools to create themes, graphics, animations etc. for BlackBerry devices. The CDK can be integrated with the BlackBerry device simulator, which can render the content as it will look on a real display. Figure 1 shows the Plazmic Composer with some content.

The SVG Transconding utility supports a subset of SVG Tiny 1.2 and converts SVG content to .pme, a proprietary format supported by BlackBerry devices. The pme content can also be viewed in the BlackBerry Media Manager. [3]

Events are the essential building blocks of an interactive SVG application. Handling user events is done through scripting or programming. The interaction between the program and the SVG content happens through a Mirco Document Object Model (uDOM)[4] Interfaces to the uDOM exist for both scripting and programming languages. For mobile devices, the common interfaces used are for ECMAScript and Java. JSR 226 defines a subset of the Micro Document Object Model (uDOM) API to allow user interaction and dynamic manipulation of SVG content on J2ME devices.

To create a stand-alone BlackBerry application that would render the SVG content and handle user events, we created a BlackBerry application using the BlackBerry Java Development Environment (JDE) 4.7, shown in Figure 3.

1) Lack of support for the tooltip property in the BlackBerry SVG specification: The SVG specification for Blackberry does not support the “tooltip” property. As a result, the tooltip was implemented as a temporary SVGRect element superimposed on the display, the coordinates of which were calculated based on the coordinates of the touch event. If there is a map that doesn’t involve zooming/panning, it also possible to do the same by creating SVGElements in the SVG document and simply hiding them through the display="none” property, toggling this attribute when needed.

2) Linking from the current SVG document to another SVG document: Due to the nature of the application developed, one of the desirable features is to navigate from one map to another map. Currently there is no support for such functionality in the SVG 1.2 specification. While it is possible to link out of the content through the ‘a’ element to hyperlinks or web links, there is no support for linking out of the current SVG document to another SVG document. The way we worked around this was by programmatically rendering another SVG map on the display.

With the advances in mobile web browsers, efficient transcoding of SVG content from the web on mobile browsers will be possible in the future. A shift from plug-in type support to native integration of SVG in the mobile browsers is inevitable. An ideal user experience would free the user from downloading stand-alone applications and instead offer the user the ability to interact with the SVG content directly in the mobile web browser.