university of waterloo faculty of engineering - star - home · event handling mechanism...

ECE 750‐T11 Component‐Based Software SystemsProject Presentation ‐I

Nilam Kaushik (Group 7)University of Waterloo ‐ Faculty of Engineering

Outline

Introduction to SVGIntroduction to SVGProposed projectApproach Expected results and performance metrics References/Questions

27/13/2009 ECE 750-T11 Project Presentation-I

Introduction

Scalable Vector Graphics• based on paths • XML language describing two‐dimensional graphics• open standard developed by the W3C consortium

Raster graphics• based on pixels • bitmap graphics: jpg, gif, bmp• used for pictures [1]


Visual Difference?

4

Bitmap image Vector image


Advantages of SVG

open standard zoom without loss of quality scalable, smaller and more compressible than jpg, gifcreate dynamic content

animations database integration

support for multiple programming/scripting languages – Javascript, Java etc

7/13/2009 ECE 750-T11 Project Presentation-I 5

Outline

Introduction to SVG Proposed projectProposed projectApproach Expected results and performance metrics References/Questions


Proposed project

Motivationday to day problem at work

The problemexploring the challenges involved with creating a specific genre of interactive mapping applications with SVG for resource constrained devices in areas where a GPS cannot be used

Other possible areas of application maps of zoos, parks, museums (web and mobile based)


8

Map of the Toronto zoo[2]


SVG and JSR 287SVG is a recommendation of the W3CSVG 1.0 (mainly for the web) SVG 1.1 (also called SVG Basic)SVG 1.2 (also called SVG Tiny)

for devices with limited memory, small display size

JSR 287specification of a Java ME API for rendering 2D vector graphics and rich media content based on SVG Tiny 1.2[3]


SVG 1.2 uDOM

The Document Object Model(uDOM)Compatible with Javascript, Java and other languagesRelevant Packages

org.w3c.dom: a subset of DOM Level 3 Core APIs. DOM Level 3 Core is the normative specification for this package. The subset is designed to be appropriate for small footprint devices, yet retain compatibility to the full DOM Core implementations.org.w3c.dom.events: contains the necessary event handling interfaces that are a subset of DOM Level 3 Events APIs.org.w3c.dom.svg: contains a proper subset of W3C SVG Tiny 1.2 uDOM APIs necessary for interacting and manipulating SVG Tiny 1.2 content.


Outline

Introduction to SVG Proposed projectApproachApproachExpected results and performance metrics References/Questions


3‐tiered application


Tiers in detail

Presentation tier : the UI • component to access the application (as a downloadable jad file) on mobile device

• component to render the map on mobile device Business logic tier• component to handle the user events e.g touch events• zooming, panning, searching for text, annotationsDatabase tier • server from which user can download the application


Tools Used

Plazmic Content Developer Kittransconding capability compatible with SVG 1.2 [4]

BlackBerry Java Development Environment (4.7)BlackBerry Storm simulator

Images from OpenClipart



Plazmic Composer 4.7

Snippet from SVG document

<g id="Room208_grp" transform="translate(276 ‐21.5)">

<!‐‐ pz:tag type="group" ‐‐>

<rect id="Room208" style="opacity:0.6;fill:#cccccc; stroke:#000000; stroke‐width:1;"

x="‐31" y="‐109" width="92" height="78"

transform="translate(‐223.826 121.91) scale(0.521739 0.448718)"/>

<text id="Text_44" font‐size="16" style="font‐family:BBCasual;font‐weight:bold; fill:#071727; stroke:none; text‐rendering:geometricPrecision; "

transform="translate(‐63 89)" x="‐167" y="6">

<tspan id="Text_44_1_0" xml:space="preserve" font‐size="16" style="font‐family:BBCasual;font‐weight:bold; fill:#071727; stroke:none; text‐rendering:geometricPrecision; ">208</tspan>

<!‐‐ pz:tag anti‐aliasing="1" ‐‐>

</text>

</g>

<g id="staircase" transform="translate(141.647 193.951) scale(0.921569 0.756098)">

<!‐‐ pz:tag type="group" ‐‐>

<rect id=“rect" style="opacity:0.6;fill:#cccccc; stroke:#000000; stroke‐width:1;“

x="‐31" y="‐109" width="92" height="78“ transform="translate(‐216.815 81.5897) scale(0.554348 1.05128)"/><image id="stairs” x="‐40" y="‐82" width="80" height="164"

xlink:href="stairs.jpg" transform="translate(‐208.5 9) scale(0.5625 0.47561)"/></g>


Event handling in SVG apps Event: a message about a user or system input that notifies state changes or user input within an application[5]UI Events

Focusin Focus outActivate

Mouse Eventsmouse overclick

SVGEvents SVGLoadSVGZoom


Event handling mechanism

Application implements org.w3c.dom.events.EventListener interfacePublish‐subscribe communication


_myRect =(SVGElement)_document.getElementById("Room208”); _myRect.addEventListener("DOMActivate", this, false);_myRect.addEventListener("DOMFocusIn", this, false);_myRect.addEventListener("DOMFocusOut", this, false);

public void handleEvent(Event evt){ if(evt.getType().equals("DOMFocusIn")){

_currentFocusInElement = (SVGElement)evt.getCurrentTarget();if(_currentFocusInElement == _myRect){

_animator.invokeLater( new Runnable(){public void run(){

_currentFocusInElement.setFloatTrait("fill-opacity", 0.25f);_currentFocusInElement.setFloatTrait("stroke-opacity", 0.1f);

_display.setTrait("display", "inline"); _displayName.setTrait("#text", "Room#");

}

Outline

Introduction to SVG Proposed projectApproach Expected results and performance metrics Expected results and performance metrics References/Questions


Results so far

Chose the development platform touch device (pointer events)

Chose between ECMAscript and Java Evaluated toolkits

Batik, Plazmic, Inkscape Assessed supported attributes/limitations


Goals/Expectations

Short term: explore the level of interactivity that can be achieved with the attributes available Long term: establish a way to evaluate the usability of the application

Expectation from project: illustrate that interactive maps provide a better user experience than raster images


Performance metrics

size of the end deliverable(cod/jad file) generated with all the code, graphics, images and videosextent of platform dependency: how easily can this be ported to another J2ME device overall usability


Related work

SVG Open conferencehttp://www.svgopen.org/2009/

Other interesting areas Mobile Ajax and SVGSVG 2.0 specification


Outline

Introduction to SVG Proposed projectApproach Expected results and performance metrics References/QuestionsReferences/Questions


References

[1] Doughty Mike, “Two Kinds of Computer graphics”, 1998. [Online] . Available: http://www.sketchpad.net/basics1.htm [July 11]

[2] Toronto Zoo, “TorontoZoo_Map2008”, 2008. [Online]. Available: http://www.torontozoo.com/pdfs/TorontoZoo_Map2008.jpg

[3] World Wide Web Consortium, “Mobile SVG Profiles: SVG Tiny and SVG Basic”, W3C Recommendation, 2003. Available: http://www.w3.org/TR/SVGMobile12/

[4] Plazmic Inc., “ SVG for BlackBerry SmartPhones”, October , 2008. Available: http://www.plazmic.com/en/pdfs/SVG_for_BlackBerry_Smartphones.pdf.

[5] Carto:net, “Event Handling in SVG Applications”, 2007. Available: http://www.carto.net/papers/svg/eventhandling/index.shtml

[6] E.Gamma, R. Helm, R. Johnson, and J. Vlissides, Design Patterns: Elements of Reusable Object-Oriented Software. Boston, MA: Addison-Wesley, 1995.

[7] Olsen Dan, Developing User Interfaces. San Fransisco, CA: Morgan Kauffman, 1998


university of waterloo faculty of engineering - star - home · event handling mechanism...

Documents