university of waterloo faculty of engineeringltahvild/courses/ece750...university of waterloo...

ECE 750‐T11 Component‐Based Software SystemsProject Presentation ‐IINilam Kaushik (Group 7)

University of Waterloo ‐ Faculty of Engineering

7/27/2009 2

OutlineRecap of PresentationRecap of Presentation‐‐II

Vector vs raster graphics ProblemApproach

Evaluation Results/Further enhancements Goals/Expectations References/Questions

27/27/2009 ECE 750-T11 Project Presentation-II

7/27/2009 3

Vector vs. raster graphics

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]


7/27/2009 4

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/27/2009 ECE 750-T11 Project Presentation-II 4

7/27/2009 5

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)


7/27/2009 6

3‐tier application


7/27/2009 7

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


7/27/2009 8

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

FocusinFocusoutActivate

Mouse Eventsmouseoverclick

SVGEventsSVGLoadSVGZoom


7/27/2009 9

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#");

}

7/27/2009 10

Design

ECE 750-T11 Project Presentation-II

7/27/2009 11

OutlineRecap of Presentation‐I


EvaluationEvaluationResults/Further enhancements Goals/Expectations References/Questions


7/27/2009 12

Evaluation

compare with raster based maps use case diagram

extensibility/re‐usabilityporting to a J2ME device as MIDlet

complexity in terms of size of the end deliverable(cod/jad file) user experience


7/27/2009 13

Zoom Image

Pan Image

Search

Rotate Image

Play media

Navigate toanother map

User

Use Case Diagram


7/27/2009 14

Extensibility

Platform dependency Convert BlackBerry app to a MIDlet

possible loss of functionalityCustom event handling

Re‐use the SVG documentsimply change screen dimensions


7/27/2009 15

MIDlet

application that uses Mobile Information Device Profile (MIDP) or Connected Limited Device Configuration (CLDC) APIsruns on devices supporting Java MEused widely for gaming


7/27/2009 16

Use “Form” components to aggregated items

More sophisticated layout and interaction

“Write once, run everywhere”Platform dependent

Only one default CommandListener, need to create listeners for specific events

use native keyboard/touch events

custom MIDlet extends MIDletcustom application extends UiApplication

import javax.microedition.lcduiimport net.rim.device.api.ui

MIDletBlackBerry Application


7/27/2009 17



EvaluationResults/Further enhancementsResults/Further enhancementsGoals/Expectations References/Questions


7/27/2009 18

Results (from Presentation‐I)

Chose the development platform touch device (pointer events)

Chose between ECMAscript and Java Evaluated toolkits

Batik, Plazmic, InkscapeAssessed supported attributes/limitations


7/27/2009 19

Further enhancements

custom tooltips and fields for media linking to another SVG document: possible recommendation?special zoom/pan buttons within image vs menususe of accelerometer


7/27/2009 20

Workflow

Design

Implementation

Deployment

Testing/Debugging


7/27/2009 21



Evaluation Results/Further enhancementsResults/Further enhancementsGoals/Expectations Goals/Expectations References/Questions


7/27/2009 22

Goals/Expectations

Goal: explore the level of interactivity that can be achieved with SVG attributes

Expectation from project: illustrate that interactive maps based on SVG can provide richer functionality to user than raster images


7/27/2009 23

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 [8] Research In Motion Ltd, “BlackBerry MIDlet Developer Guide,” February, 2006. Available:

http://na.blackberry.com/eng/deliverables/612/BlackBerry_MIDlet_Developer_Guide.pdf.


7/27/2009 247/27/2009 ECE 750-T11 Project Presentation-II 24

university of waterloo faculty of engineeringltahvild/courses/ece750...university of waterloo...

Documents