ECE 750 T11 Component Based Software Systems Project Presentation II Nilam Kaushik (Group 7) University of Waterloo Faculty of Engineering

Transcription

1 ECE 750 T11 Component Based Software Systems Project Presentation II Nilam Kaushik (Group 7) University of Waterloo Faculty of Engineering

2 Outline Recap of Presentation I Vector vs raster graphics Problem Approach Evaluation Results/Further enhancements Goals/Expectations References/Questions 2

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] 3

4 Advantages of SVG open standard zoom without loss of quality scalable, smaller and more compressible than jpg, gif create dynamic content animations database integration support for multiple programming/scripting languages Javascript, Java etc 4

5 Proposed project Motivation day to day problem at work The problem exploring 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) 5

6 3 tier application 6

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, annotations Database tier server from which user can download the application 7

8 Event handling in SVG Event: a message about a user or system input that notifies state changes or user input within an application[5] UI Events Focusin Focusout Activate Mouse Events mouseover click SVGEvents SVGLoad SVGZoom 8

9 Event handling mechanism Application implements org.w3c.dom.events.eventlistener interface Publish 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#"); 9

10 Design 10

11 Outline Recap of Presentation I Vector vs raster graphics Problem Approach Evaluation Results/Further enhancements Goals/Expectations References/Questions 11

12 Evaluation compare with raster based maps use case diagram extensibility/re usability porting to a J2ME device as MIDlet complexity in terms of size of the end deliverable(cod/jad file) user experience 12

13 Use Case Diagram Zoom Image Rotate Image Pan Image Search User Play media Navigate to another map 13

14 Extensibility Platform dependency Convert BlackBerry app to a MIDlet possible loss of functionality Custom event handling Re use the SVG document simply change screen dimensions 14

15 MIDlet application that uses Mobile Information Device Profile (MIDP) or Connected Limited Device Configuration (CLDC) APIs runs on devices supporting Java ME used widely for gaming 15

16 BlackBerry Application MIDlet import net.rim.device.api.ui custom application extends UiApplication use native keyboard/touch events Platform dependent More sophisticated layout and interaction import javax.microedition.lcdui custom MIDlet extends MIDlet Only one default CommandListener, need to create listeners for specific events Write once, run everywhere Use Form components to aggregated items 16

17 Outline Recap of Presentation I Vector vs raster graphics Problem Approach Evaluation Results/Further enhancements Goals/Expectations References/Questions 17

18 Results (from Presentation I) Chose the development platform touch device (pointer events) Chose between ECMAscript and Java Evaluated toolkits Batik, Plazmic, Inkscape Assessed supported attributes/limitations 18

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

20 Workflow Design Implementation Testing/Debugging Deployment 20

21 Outline Recap of Presentation I Vector vs raster graphics Problem Approach Evaluation Results/Further enhancements Goals/Expectations References/Questions 21

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 22

23 References [1] Doughty Mike, Two Kinds of Computer graphics, [Online]. Available: [July 11] [2] Toronto Zoo, TorontoZoo_Map2008, [Online]. Available: [3] World Wide Web Consortium, Mobile SVG Profiles: SVG Tiny and SVG Basic, W3C Recommendation, Available: [4] Plazmic Inc., SVG for BlackBerry SmartPhones, October, Available: [5] Carto:net, Event Handling in SVG Applications, Available: [6] E.Gamma, R. Helm, R. Johnson, and J. Vlissides, Design Patterns: Elements of Reusable Object-Oriented Software. Boston, MA: Addison-Wesley, [7] Olsen Dan, Developing User Interfaces. San Fransisco, CA: Morgan Kauffman, 1998 [8] Research In Motion Ltd, BlackBerry MIDlet Developer Guide, February, Available: 23

24 24