Architecture by stariya

VIEWS: 6 PAGES: 12

									                                                                                                   Page 1 of 12


To:         Rob Johnson, Programming Technical Communication
From:       Brenden Blanco, Simon Breslav, Megha Jain
Date:       November 6, 2005
CC:         Elliot Soloway
Subject:    Architeture document for Mango Sketch
 Version History: 1.0 Initial Draft October 30, 2005
                  2.0 Final Draft November 6, 2005


1. Abstract
   This architecture specification describes a simple and lightweight animation program called Mango
   Sketch, which will be written for mobile devices. The document first outlines the functional and non-
   functional tools that will be used in the application, protocols used by these tools, and the strategy for
   using the tools and protocols. Next, the document details each tool and its uses, and how those tools
   fit into the application architecture, and data structures that the tools utilize; this is described and also
   shown graphically. Finally, the document describes the approach that the developing team will take
   to fulfill the requirements.

2. Introduction
   1. Project definition and motivation
       Many animation software applications exist today that are powerful but complex. For
       knowledgeable, trained power users, complex programs can be used to create intricate
       animations. To use such programs, there is often a steep learning curve and substantial training
       cost involved. Examples of these programs include Macromedia Flash and Adobe Illustrator;
       both of these programs have many interface tools and features that are difficult to learn. We feel
       that there is a need for a way to animate simply and quickly, using easy to learn tools. Such tools
       will have a simple and intuitive interface, with the goal that there will be little or no learning
       curve. This program is not meant to replace the power programs, but to fill a different need.

        There is also a lack of applications that are available for multiple platforms and portable devices.
        All of the commercial animation packages are only available for desktop and laptop PCs;
        however, one of the fastest growing markets today is portable and handheld devices, such as
        tablet PCs, PDAs and cell-phones. The complex animation programs have interface tools that
        prohibit these programs from being used on small form devices, which often have limited input
        methods. Since Mango Sketch is intended as a light-weight program, we will be able to develop
        for portable devices.

        Our application, Mango Sketch, will be a simple to use animation program with sound recoding
        capabilities that can be used to produce complete and presentable animation. Our primary focus
        is to try to make a fun and easy tool that anyone can use.

    2. Requirements and technical constraints
       1. Required Tools:
          a) Pen
             The user will be able to draw strokes on the canvas using the mouse or stylus by selecting
             the pen menu item. A user presses down on the screen to begin a stroke, and drags the
             stylus around the canvas to outline the stroke. The stroke is completed when the stylus is
             lifted. The stroke is the freeform curve that fallows the path the mouse or stylus took.

            b) Select
                                                                                    Page 2 of 12


   The user will be able to select one or more strokes by choosing the selection menu item.
   This is done by tapping on or near the stroke on the canvas using the stylus. If the same
   stroke is tapped twice, then it is deselected. To add strokes to the selection pool, the user
   taps the strokes that he/she wants selected.

c) Change Color
   The user will be able to modify the current color of the selected stroke or the next drawn
   stroke. A user selects a menu item to edit color, and this shows a new window. The
   window shows a palette of available colors, which the user taps with the stylus to select.
   If any strokes are selected then the color of those strokes will be changed and if no stroke
   is selected then the chosen color will be used to draw any future strokes.

d) Move Strokes
   The user will be able to move the selected strokes around the canvas. The user selects
   strokes using the selection tool and then chooses the move option from a menu. Dragging
   the stylus around the canvas has the effect of moving the stroke as a whole around the
   canvas, following the stylus.

e) Rotate Strokes
   The user will be able to rotate the selected strokes. The user selects strokes using the
   selection tool and then chooses the rotate option from a menu. Dragging the stylus in a
   circle around the object has the effect of rotating the stroke around its midpoint.

f) Delete Strokes
   The user will be able to delete the selected strokes. The user selects strokes using the
   selection tool and then chooses the delete option from a menu. This will delete the strokes
   that were selected.

g) Key Framing
   The user will be able to make the current canvas into a key-frame for later use for
   animation. The user selects the key-frame option from a menu. These key-frames will be
   thumbnail sized representation of the canvas. Multiple key-frames will be allowed.

h) Time Slider
   The time slider will be a tool for the user to visualize and move arbitrarily between
   different points in time. A user moves the stylus along the time slider, which is a bar
   above or below the canvas area. The position of the stylus relative to the endpoints of the
   slider denote the current time.

i) Set Animation Time
   The user will be able to set the total animation time by selecting the Set Animation Time
   tool from the menu. The default time will be 60 seconds.

j) Recording Animation
   The user will be able to record real time interactions with the canvas using the stylus. A
   user selects the record option from a menu. Then moves the stylus between the key-
   frames to animate the objects and interpolate them from one key-frame to the next.

k) Recording Sound
                                                                                      Page 3 of 12


       The user will be able to record sound using a sound input device such as a microphone.
       The user selects the sound option from a menu. Then the next time the user selects the
       record tool, animation and sound are both recorded together.

   l) Playing Animation and Sound
      The user will be able to play the currently recorded animation and sound. The user selects
      the play option from a menu. If no animation or sound is recorded, then no animation or
      sound will be shown.

2. Optional Tools
   a) Over-sketching
      The user will be able to over-sketch or redraw the selected strokes. The user selects
      strokes using the selection tool and then chooses the over-sketch option from a menu.
      Dragging the stylus along the stroke modifies the stroke to follow the movement of the
      stylus.

   b) Undo
      The user will be able to undo the latest stroke or change made to the state of the canvas.
      The user selects the undo option from a menu and the undo is done.

   c) Save
      The user will be able to save their project into a file. The user selects a save option from
      the menu. This causes the save window to be displayed, which allows the user to input a
      title for the animation and determine where to save the corresponding file.

   d) Load
      The user will be able to load their project from a previously saved file. The user selects a
      load option from the menu. This causes the load window to be displayed, which allows
      the user to search for the file where a previous animation was displayed, and then to load
      the animation contained in that file.

   e) Export to SVG
      The user will be able to load their project from a previously saved file. The user selects a
      load option from the menu. This causes the load window to be displayed, which allows
      the user to search for the file where a previous animation was displayed, and then to load
      the animation contained in that file.

3. Technology Specifications
   a) Platform
      Mango Sketch will be written on the .NET platform. This will support Pocket PCs and
      Tablet PCs, and laptop computers.

   b) Language
      Mango Sketch will be written in the C# programming language for better portability. It
      will also allow us to use the capabilities offered by C# libraries.

   c) File Formats
      Mango Sketch will initially only support a binary file saving ability. This will be an easy
      to implement format. We plan to allow exportation to SVG file format which will enable
      intercommunication with other vector based graphic programs.
                                                                                             Page 4 of 12


    3. Progress so far
       We have developed an application with a prototype menu driven user interface for selecting
       buttons. The user can choose the pen button from the menu to do free hand drawing on the
       canvas. Our application also allows the user to change colors of the strokes using the color button
       on the menu. In the animation mode, the user can record and play sounds.
       We have also developed an event-driven engine that takes input from the user interface and
       makes changes to the canvas data structure to reflect the user input. Depending on the tool the
       user selects the corresponding state is activated. We have also developed the interpolation
       module that interpolates between different strokes.
       We have yet to create a mechanism to move between different key-frames. Also, some of the
       draw tools such as select, rotate, and delete, are yet to be implemented in our application. We are
       currently working on an algorithm for curve simplification.

3. System Architecture
   1. Overview
       Mango Sketch is composed of multiple classes that are separated by different functionalities as
       shown in Diagram 1. The central point of the application is the mediator class, which centralizes
       the communication and data flow between other classes. The user input is passed to the mediator
       from the forms and then to the state manager that sends the event to the appropriate state. The
       state class then asks the mediator to perform the necessary performs the necessary operation on
       the data. The graph manager class provides data to the mediator and also contains the data
       manipulation tools.

    2. Class Components
       1) Mediator
          a) Function
              The Mediator is the central point of communication in the whole program. It creates a
              principal interface for accessing information.

            b) Inputs and Outputs
               Mediator(Form1 form) – constructor for the Mediator, input is a reference to the Form1.
               get_graphics() : Graphics – returns an image buffer where all the drawing takes place.
               get_canvas() : Form1 – returns the current canvas.
               get_graph() : GraphManager – gives access to the stroke data structures.
               set_color(Color c) : void – sets the current color to the color passed in.
               get_color() : Color – returns the current color.
               mouseDown(int x, int y ) : void – this function is called when the mouse button is pressed
               and it passes the event down to the state manager.
               mouseMove(int x, int y) : void – this function is called when the mouse is moved and it
               passes the event down to the state manager.
               mouseUp(int x, int y) : void – this function is called when the mouse button is released
               and it passes the event down to the StateManager.
               repaint() : void – asks the graph manager to repaint the canvas.
               startPencil(object sender, System.EventArgs e) : void – tells the StateManager to start the
               pencil tool.
               startMove(object sender, System.EventArgs e) : void – tells the StateManager to start the
               move tool.
               startRotate(object sender, System.EventArgs e) : void – tells the StateManager to start the
               rotate tool.
               startStop(object sender, System.EventArgs e) : void – tells the StateManager to start the
               stop tool for animation and sound if the sound is enabled.
                                                                                        Page 5 of 12


       startPlay(object sender, System.EventArgs e) : void – tells the StateManager to start the
       play tool for animation and sound if the sound is enabled. If it is already playing, it starts
       the stop tool.
       startRecord(object sender, System.EventArgs e) : void – tells the StateManager to start
       the stop tool for animation and sound if the sound is enabled. If it is already recording, it
       starts the stop tool.
       startSound(object sender, System.EventArgs e) : void – enables sound recording and
       playing.
       setAnimationSec(short in_sec) : void – sets the number of seconds for animation to the
       seconds passed in.
       getAnimationSec() : short – returns the animation time in seconds.

   c) Data Structures/Objects
      private _state_manager : StateManager – private reference to the StateManager instance.
      private _graph_manager : GraphManager – private reference to the GraphManager
      instance.
      private _current_color : Color – private reference to the current color.
      private _canvas : Form1 – private reference to the Form1instance.
      private _sound : Sound – private reference to the Sound instance.
      private const _sound_file : string = the name of the sound wave file.
      private _num_animation_sec : short – the number of seconds in animation.
      private _graphics : Graphics - private reference to the Graphics instance.

2) GraphManager
   a) Function
      This class controls the overall organization of all the data structures which compose the
      “scene graph.” The scene graph is the collection of stroke curves, stroke colors, and key
      frames of animated strokes, which comprise the objects that can possibly be drawn on the
      canvas. The GraphManager handles events from the user interface handler class
      Mediator, and either modifies the scene graph or passes the event to the scene graph
      through a private variable.

   b) Inputs and Outputs
      public GraphManager(med : Mediator) : void – constructor for GraphManager, input is a
         reference to an instance of Mediator
      public addStroke(s : Stroke) : void – public function to add a new Stroke s to the graph
      public redraw() : void – public function to redraw the canvas
      public delete_stroke(n : Node) : void – remove a stroke n from the canvas
      public get_canvas() : Form1 – public accessor, returns a reference to the drawable canvas
         object
      public get_mediator() : Mediator – public accessor, returns a reference to the Mediator
         object

   c) Data Structures and Objects
      private _root : Node – private reference to the root node of the scene graph
      private _med : Mediator – private reference to the Mediator instance
      private _current_frame : int – private storage of the current frame number
      private _bmp_back : Bitmap – private storage of the back buffer
      private _buffer_bitmap : Bitmap – private storage of the front buffer

   d) Special Techniques
                                                                                      Page 6 of 12


       The GraphManager uses a tree structure to store the objects that are to be drawn and
       animated on the canvas. To do this, the GraphManager will only have to pass events that
       it receives from the Mediator to the root node of the tree. Also, to speed up rendering of
       the canvas, the GraphManager uses a double buffered bitmap.

3) Node
   a) Function
      The Node class is an abstract base class for the various types of data types in the scene
      graph used by the GraphManager. This class supports functions to add and remove nodes
      from the tree, and to recursively pass events to all nodes in the tree.

   b) Inputs and Outputs
      public Node() : void – default constructor for the Node class
      public attach(child : Node) : void – attach a child to this node
      public detach(child : Node) : void – detach a child from this node
      public detachSelf() : void – detach this node from its parent
      public attachSelf(parent : Node) : void – attach this node to parent
      public handleEvent(e : object) : void – handle an event e and pass it to all children
      public render(g : Graphics) : void – if the node represents a drawable object, paint it on
         the Graphics object, and call the render on the children nodes
      public update(frame : int) : void – update the attributes of the node based on the frame
         number, and call update on the children nodes

   c) Data Structures and Objects
      protected _parent : Node – protected reference to the parent node
      protected _children : ArrayList – protected reference to a list of children nodes

   d) Special Techniques
      All of the management of the tree structure is done within the structure itself. All events
      are handled recursively so that the GraphManager is not required to store the strokes or
      animation key frames.

4) AnimationNode
   a) Function
      The AnimationNode class is derived from the abstract Node class, and inherits the tree
      management and recursive functions from Node. This class has a list of all stroke key
      frames, and updates the tree based on which frame and interpolated stroke should be
      rendered to the canvas.

   b) Inputs and Outputs
      public AnimationNode(gm : GraphManager) : void – default constructor
      public handleEvent(e : Object) : void – handles a program event

   c) Data Structures and Objects
      private _curr_stroke : Node – the current stroke to be rendered
      private _stroke_list : ArrayList – a list of keyed strokes
      private _gm : GraphManager – reference to the GraphManager
      private _selected : bool – boolean value is true if the stroke is selected

5) StrokeNode
   a) Function
                                                                                       Page 7 of 12


        The StrokeNode class is derived from the abstract Node class, and inherits all of the
        functions of Node. StrokeNode is a container for an individual curve that a user has
        drawn, or an interpolated stroke in between key frames.

    b) Inputs and Outputs
       public StrokeNode(gm : GraphManager, stroke : Stroke) : void – default constructor
       public handleEvent(e : Object) : void – handles a program event

    c) Data Structures and Objects
       private _stroke : Stroke – the underlying curve data

6) Stroke
   a) Function
       The Stroke class is a container for a curve that the user has drawn. A stroke is a
       collection of points, and several functions to manipulate those points

    b) Inputs and Outputs
       public Stroke(points : ArrayList, c : Color) void – constructor for a stroke initialized with
          a list of points and initial color
       public render(gr : Graphics) : void – render the stroke on the Graphics object gr
       public move(dx : int, dy : int) : void – translate the stroke dx pixels horizontally and dy
          pixels vertically
       public rotate(angle : float, origin : Point) : void – rotate the stroke angle degrees around
           the origin
        public scale(dx : float, dy : float) : void – scale the stroke by a factor dx
           horizontally, and dy vertically

    c) Data Structures and Objects
       private _verts : ArrayList – a vector of vertices that comprise the stroke
       private _color : Color – the RGB color of the stroke

7) State Manager
   a) Function
       This class keeps track of current state of the program and passes mouse events down it.

    b) Inputs and Outputs
       MouseDown(int: x, int: y) : void - Receives mouse down event from the Mediator and
           passes it down to current state
       MouseMove(int: x, int: y) : void - Receives mouse move event from the Mediator and
           passes it down to current state
       MouseUp(int: x, int: y): void - Receives mouse up event from the Mediator and passes it
           down to current state
       setPencil(): void – sets current state to Pencil State
       setSelect(): void - sets current state to Select State
       setMove(): void - sets current state to Move State
       setRotate(): void - sets current state to Rotate State
       setPlay(): void - sets current state to Play State
       setRecord(): void - sets current state to Record State
    c) Data Structures and Objects
       private _current_state : State – state that receives current events
                                                                                     Page 8 of 12


       events
       private _pencil_state : PencilState – instance of Pencil State
       private _select_state : SelectState – instance of Select State
       private _move_state : MoveState – instance of Move State
       private _rot_state : RotateState – instance of Rotate State
       private _play_state : PlayState – instance of Play State
       private _record_state : RecordState – instance of Record State
8) State
   a) Function
       A state is an event (mouse events in our case) driven object that knows how to perform a
       certain task (e.g. Draw a Stroke,) State Class is a base class for such objects.

    b) Inputs and Outputs
       MouseDown(int: x, int: y) : void
       MouseMove(int: x, int: y): void
       MouseUp(int: x, int: y): void
       Receives mouse down, move, and up events from the StateManager and performs some
          tasks (base class does not implement any functionality just define the interface)

    c) Data Structures and Objects
       Private _med : Mediator – lets States access the Mediator to manipulate data (e.g. move
       strokes thought GraphManager)

9) Pencil State
   a) Function
      Pencil state takes care of translating mouse move event into collection of vertices that
      make up a stroke.

    b) Inputs and Outputs
       MouseDown(int: x, int: y) : void – register start of the new stroke
       MouseMove(int: x, int: y): void – create vertices of the stroke based on mouse location
       MouseUp(int: x, int: y): void – finish currently drawn stroke and pass it to the
          GraphManager

    c) Data Structures and Objects
       private points : Array – currently drawn stroke
10) Move State
    a) Function
       Move state takes care of translating mouse move event into translation of the currently
       selected stroke(s)
    b) Inputs and Outputs
       MouseDown(int: x, int: y) : void – register start position
       MouseMove(int: x, int: y): void – pass the offset from the start position to the current
           location, and pass the offset to the selected stroke (Mediator/GraphManager know
           what that is)

11) Select State
    a) Function
        Select state takes care of translating mouse event into selecting strokes

    b) Inputs and Outputs
                                                                                         Page 9 of 12


        MouseDown(int: x, int: y) : void – try to select a stroke and add it to the selection list

12) Rotate State
    a) Function
       Rotate state takes care of translating mouse event into rotation of selected strokes

    b) Inputs and Outputs
       MouseDown(int: x, int: y) : void – register start position
       MouseMove(int: x, int: y): void – translate the translation into an angle of rotation and
           applie it to the storke
13) Play State
    a) Function
       Play state does not translate mouse events into any task

14) Record State
    a) Function
       Record state does not translate mouse events into any task

15) Sound
    a) Function
       Mango Sketch is an animation program with the capability of recording and playing
       sound. The sound class is the class called when the user has enabled sound and wants to
       record or play a sound.

    b) Inputs and Outputs
       Sound(string in_filename) – constructor for the sound class, input is the name of the
       wave file that is recorded or played.
       record(short record_time) : void – public function that starts the recording to the wave
       file of the sound class, input is the number of seconds that the recorder will record for.
       play() : void – public function that plays the wave file.
       stop() : void – public function that stops recording or playing.

    c) Data Structures/Objects
       private _player : OpenNETCF.multimedia.audio.player – private reference to the player
       in the OpenNETCF library.
       private _recorder : OpenNETCF.multimedia.audio.recorder – private reference to the
       recorder in the OpenNETCF library.
       private _filename : string – private reference to the name of the wave file.
       private _play_stream : FileStream – private reference to the file stream used by the
       player.
       private _record_stream : FileStream – private reference to the file stream used by the
       recorder.

16) Form1
    a) Function
       This is the main form which allows the user to interact with the tools and canvas.

    b) Inputs and Outputs
       Form1() – constructor for Form1.
       _colors_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e) :
                                                                                     Page 10 of 12


        void – shows the color chard and allows the sets the current color to the color selected by
        the user.
        _menuItem_pen_Click(object sender, System.EventArgs e) : void – shows the pen menu
        and starts the pencil tool.
        _but_color_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e) :
        void – shows the color chart if it is not already there and hides it if it is visible.
        _menuItem_animation_Click(object sender, System.EventArgs e) : void – shows the
        animation menu and starts the stop recording or playing tool.
        _canvas_Damaged(object sender, EventArgs e) : void – if the canvas is damaged, it
        repaints it.
        _menuItem_set_time_Click(object sender, System.EventArgs e) : void – allows the user
        to set the animation time through Form_set_time.
        _start_timer() : void – starts the timer.
        _stop_timer() : void – stops the timer.

    c) Data Structures/Objects
       private _med : Mediator – private reference to the Mediator instance.
       private _time : Timer – private reference to a timer.
       private _menuItem_pen : System.Windows.Forms.MenuItem – a tool that allows the user
       to draw on the canvas.
       private _menuItem_animation : System.Windows.Forms.MenuItem – allows the user to
       choose the animation menu.
       private _menuItem_set_time : System.Windows.Forms.MenuItem – allows the user to set
       the animation time.

17) Form_set_time
    a) Function
       The purpose of Form_set_time is to provide the user an interface where they can enter the
       animation time.
    b) Inputs and Outputs
       Form_set_time(short in_sec) – constructor for Form_set_time, input is the current
       number of animation seconds.
       get_animation_time() : short – public function that returns the number of seconds the user
       has selected.
    c) Data Structures/Objects
       private _sec : short – number of seconds the user has selected as the animation time.
       private _numericUpDown_time : System.Windows.Forms.NumericUpDown – allows the
       user to increase or decrease the animation time.
                                     Page 11 of 12




Diagram 1: Cass dependency diagram
                                                                                          Page 12 of 12


4. Project Management
   Table 1 shows the breakdown of tasks between the developers, Brenden, Simon, and Megha. During
   the first part of development, we will divide up the initial and separable components of Mango
   Sketch. Once these are done and integrated, we will work on the basic drawing tools together. Once
   the drawing tools are implemented, we will work on the basic animation tools. With this done, we
   will have a primitive demo of Mango Sketch. After the demo is ready, we will be free to expand on
   the draw and animation features. To produce a working program we will work together to test and
   debug each core component and the system. We will also intermittently work together to write the
   necessary parts of the documentation.

   Week            Dates               Brenden               Simon            Megha
  Week 1      Sep 11 - Sep 17                          Group Formation

  Week 2      Sep 18 - Sep 24                          Project Outline

  Week 3       Sep 25 - Oct 1        Project Proposal Presentationand scope document
                                        Software Requirements Specification Draft
  Week 4        Oct 2 - Oct 8
                                  Data Structure for      UI and State        Sound
  Week 5        Oct 9 - Oct 15         storage            management      Implementation
                                      Revised Software Requirements Sepecification
  Week 6       Oct 16 - Oct 22
                                          Implementation of the basic draw tools
  Week 7       Oct 23 - Oct 29

  Week 8       Oct 30 - Nov 5                 System Architecure Document
                                        Implemenation of the basic animation tools.
  Week 9       Nov 6 - Nov 12
                                             A basic demo should be ready.
  Week 10     Nov 13 - Nov 19             Expand on the draw and animation tools
                                                        Test Plan
  Week 11     Nov 20 - Nov 26
                                          Expand on the draw and animation tools
  Week 12      Nov 27 - Dec 3                     Testing and Debugging
                                                 Final Project Presentation
  Week 13      Dec 4 - Dec 10
                                   User Manual, Final Project Report and Video Tutorial
  Week 14     Dec 11 - Dec 17
                            Table 1. Mango Sketch Development Schedule

								
To top