Sketchpad SDDx

colonteeΛογισμικό & κατασκευή λογ/κού

4 Νοε 2013 (πριν από 3 χρόνια και 9 μήνες)

101 εμφανίσεις







Sketchpad SDD

Noah Manneschmidt


10/26/2009


Table of Contents

1. Introduction

................................
................................
................................
................................
..............

3

1.1 Purpose

................................
................................
................................
................................
...............

3

1.2 Scope

................................
................................
................................
................................
...................

3

1.3 Definitions, Acronyms, Abbreviations
................................
................................
................................
.

3

1.4 References

................................
................................
................................
................................
..........

3

2. Decomposition Description
................................
................................
................................
.......................

4

2.1 Sketchpad.xml

................................
................................
................................
................................
.....

4

2.2 Sketchpad.html

................................
................................
................................
................................
...

4

2.3 Sketchpad.css

................................
................................
................................
................................
......

4

2.4 Sketchpad.js

................................
................................
................................
................................
........

4

2.5 drawing.js

................................
................................
................................
................................
............

4

2.6 Decomposition Diagram

................................
................................
................................
.....................

5

3. Dependency Description

................................
................................
................................
...........................

6

3.1 Sketchpad.xml

................................
................................
................................
................................
.....

6

3.2 Sketchpad.html

................................
................................
................................
................................
...

6

3.3 Sketchpad.css

................................
................................
................................
................................
......

6

3.4 Sketchpad.js

................................
................................
................................
................................
........

6

3.5
drawing.js

................................
................................
................................
................................
............

6

4. Interface Description

................................
................................
................................
................................

7

4.1 Sketchpad.xml

................................
................................
................................
................................
.....

7

4.2 Sketchpad.html

................................
................................
................................
................................
...

7

4.3 Sketchpad.css

................................
................................
................................
................................
......

7

4.4 Sketchpad.js

................................
................................
................................
................................
........

7

4.5 drawing.js

................................
................................
................................
................................
............

7

5. Detail Description

................................
................................
................................
................................
......

8

5.1 Sketchpad.xml

................................
................................
................................
................................
.....

8

5.2 Sketchpad.html

................................
................................
................................
................................
...

8

5.3 Sketchpad.css

................................
................................
................................
................................
......

8

5.4 Sketchpad.js

................................
................................
................................
................................
........

8

5.5 drawing.
js

................................
................................
................................
................................
............

8



1. Introduction

1.1 Purpose

This document will provide an overview of the design of Sketchpad from several perspectives.

1.2 Scope

This document will be used by developers to guide their implementation as well as any extensions to the
project. It will also
explain the internal workings to anyone interested in modifying or replicating the
product.

1.3 Definitions, Acronyms, Abbreviatio
ns



HTML (Hypertext Markup Language)


This language is used
to define the structure of a web
document



CSS (Cascading Style Sheet)


Used with HTML to describe
the visual look and layout of a web
document



JS (
JavaScript
)



This scripting language is executed by a web browser allowing a developer to
dynamically manipulate a web document



XML (Extensible Markup Language)


Similar to HTML in appearance, XML is designed to be
suitable for describing the structure of any data



Google Wave


This communication tool from Google was recently opened to a small group of
the public to test and experiment with.
It combines features of email, instant messaging, and
wiki documents in an attempt to revolutionize the way the internet is us
ed to communicate.

1.4 References



Wave.js


http://wave
-
api.appspot.com/public/wave.js



Hellowave.xml


http://wave
-
api.appspo
t.com/public/gagets/hellowave.xml



Base64.js


http://
www.webtoolkit.info/javascript
-
base64.html



2.
Decomposition Description

2.1 Sketchpad.xml



Type: Module



Purpose:
Container for entire pr
oduct



Function: T
ies together the components of Sketchpad

by containing them or linking to them



Subordinates: Sketchpad.html

2.2 Sketchpad.html



Type: Module



Purpose: Defines the structure for the user interface



Function: Uses standard HTML for the user int
erface and includes the CSS and JavaScript pieces



Subordinates: Sketchpad.css, Sketchpad.js

2.3 Sketchpad.cs
s



Type: Module



Purpose: Contains rules for the appearance of the user interface



Function: The stylesheet

describes the appearance of the user interface elements described in
Sketchpad.html



Subordinates: none

2.4 Sketchpad.js



Type: Module



Purpose: Contains all of the logic and processing for Sketchpad



Function: Sets callbacks on all UI elements and includes a
ll other JavaScript components



Subordinates: drawing.js

2.5 drawing.js



Type: Module



Purpose: Provides logic for all drawing features



Function: All callback functions registered by Sketchpad.js are defined here.



Subordinates: none

2.6 Decomposition Diagram




Sketchpad.xml

Sketchpad.html

Sketchpad.css

Sketchpad.js

drawing.js

Wave.js

Base64.js

External Resources

3. Dependency Description

3.1 Sketchpad.xml



Type: Module



Purpose: Container for entire product



Dependencies:
none



Resources: Google Wave

3.2 Sketchpad.html



Type: Module



Purpose: Defines the structure for the user interface



Dependencies: none



Resources: User’s Browser (must have support for CANVAS element)

3.3 Sketchpad.css



Type: Module



Purpose: Contains rules for the appearance of the user interface



Dependencies: Sketchpad.html



Resources: none

3.4 Sketchpad.js



Type: Module



P
urpose: Contains all of the logic and processing for Sketchpad



Dependencies: Sketchpad.html



Resources: none

3.5 drawing.js



Type: Module



Purpose: Provides logic for all drawing features



Dependencies: Sketchpad.html, Sketchpad.js



Resources: Wave.js, Base64.j
s



4. Interface Description

4.1 Sketchpad.xml



Type: Module



Function: Ties together the components of Sketchpad by containing them or linking to them



Interfaces: Parsed by Google before being returned as an HTML document to the user’s
browser. Must adhere
to the format demonstrated in ‘Hellowave.xml’.

4.2 Sketchpad.html



Type: Module



Function: Uses standard HTML for the user interface and includes the CSS and JavaScript pieces



Interfaces: Toolbar will be an unordered list of items with icons to represent the
m, the rest of
the interface will be a large CANVAS tag

4.3 Sketchpad.css



Type: Module



Function: The stylesheet describes the appearance of the user interface elements described in
Sketchpad.html



Interfaces:
Styles HTML elements through tag names, ID attri
butes, and CLASS attributes

4.4 Sketchpad.js



Type: Module



Function: Sets callbacks on all UI elements and includes all other JavaScript components



Interfaces:
Manipulates the UI through the standard JavaScript API, sets callbacks to the events
of user inte
rface elements

4.5 drawing.js



Type: Module



Function: All callback functions registered by Sketchpad.js are defined here.



Interfaces:
The user interface delivers cursor coordinates in (x, y) pairs as part of the callback.
The canvas will be manipulated thro
ugh the HTML 5 Canvas API. Records state with Google
Wave through a
remote procedure call facilitated by Wave.js



5. Detail Description

5.1 Sketchpad.xml



Processing: This XML file declares which Google Wave features Sketchpad requires and contains
Sketchpad.html for the content.



Data: All XML and HTML

5.2 Sketchpad.html



Processing: The HTML is designed from the assumption that it is already part of an HTML BODY
element and does not contain any tags that belong in the HEAD. Scripts are imported by UR
I and
CSS is declared inline. The structure of the interface is made up of UL, LI, DIV, CANVAS and other
elements as needed



Data: All standard HTML

5.3 Sketchpad.css



Processing: No processing done here, as the entire file is a static declaration. An illusi
on of
processing can be provided by setting styles for the same element and letting JavaScript apply
them at will by changing the CLASS attribute on the element or its parent element.



Data: Standard CSS with six character hexadecimal color codes. Images ar
e referenced by URI.

5.4 Sketchpad.js



Processing:
Waits for the user interface to be ready for events and registers the functions from
drawing.js as callbacks for the desired events. Finishes by including drawing.js



Data: none

5.5 drawing.js



Processing:
Re
cords current options (stroke width, color, selected tool) as they change. Draws
on a temporary transparent upper layer while the user is still in the process of taking an action
(still dragging to size a box, line, etc, or still dragging a pen). When the
user completes the action
it adds the temporary object to the canvas and registers the new state with Google Wave.



Data:
The current state will be submitted to and retrieved from Google as a Base64 encoded
PNG image.