#LyX 1.6.5 created this file. For more info see http://www.lyx.org/

\lyxformat 345

\begin_document

\begin_header

\textclass article

\use_default_options true

\language english

\inputencoding auto

\font_roman default

\font_sans default

\font_typewriter default

\font_default_family default

\font_sc false

\font_osf false

\font_sf_scale 100

\font_tt_scale 100

\graphics default

\paperfontsize 12

\spacing single

\use_hyperref true

\pdf_title "Brainstorm"

\pdf_author "Nikhil Marathe"

\pdf_bookmarks true

\pdf_bookmarksnumbered false

\pdf_bookmarksopen false

\pdf_bookmarksopenlevel 2

\pdf_breaklinks false

\pdf_pdfborder true

\pdf_colorlinks true

\pdf_backref false

\pdf_pdfusetitle true

\papersize default

\use_geometry true

\use_amsmath 1

\use_esint 1

\cite_engine basic

\use_bibtopic false

\paperorientation portrait

\secnumdepth 3

\tocdepth 3

\paragraph_separation indent

\defskip medskip

\quotes_language english

\papercolumns 1

\papersides 1

\paperpagestyle default

\tracking_changes false

\output_changes false

\author "" 

\end_header

\begin_body

\begin_layout Title

Brainstorm

\end_layout

\begin_layout Author

\begin_inset CommandInset href

LatexCommand href

name "Nikhil Marathe"

target "nsm.nikhil@gmail.com"

type "mailto:"

\end_inset

, 200801011

\begin_inset Newline newline

\end_inset

DA-IICT

\end_layout

\begin_layout Part

Brainstorm Architecture

\end_layout

\begin_layout Section

Introduction

\end_layout

\begin_layout Standard

Brainstorm is a collaborative drawing application.

 It uses a client-server model, and a custom protocol.

 All communication is over TCP port 

\emph on

6491

\emph default

.

\end_layout

\begin_layout Section

Protocol

\end_layout

\begin_layout Standard

The Brainstorm protocol is a custom protocol over the Bencode

\begin_inset Foot

status open

\begin_layout Plain Layout

\begin_inset CommandInset href

LatexCommand href

target "http://wiki.theory.org/BitTorrentSpecification#bencoding"

\end_inset

\end_layout

\end_inset

 wire protocol used by Bittorrent.

 It is human readable yet terse, leading to compact messages.

 At the same time it remains extensible.

\end_layout

\begin_layout Standard

All messages are sent as 

\emph on

length prefixed

\emph default

 bencode 

\emph on

dictionaries 

\emph default

parsed by the 

\emph on

brainstorm.MessageEmitter

\emph default

 class.

\end_layout

\begin_layout LyX-Code

Message format = <message len>:d<pairs>e

\end_layout

\begin_layout Standard

Encoding and decoding is done by the classes in 

\emph on

package bencode 

\emph default

and is not covered here.

 All

\emph on

\emph default

messages contain the following:

\end_layout

\begin_layout LyX-Code

type : CHAT | SHAPE | PROTOCOL (integers)

\end_layout

\begin_layout LyX-Code

nick : nickname of sender

\end_layout

\begin_layout LyX-Code

origin : IP address of sender

\end_layout

\begin_layout LyX-Code

originport : ephemeral TCP port used by sending Client

\end_layout

\begin_layout Standard

In addition server out bound messages have an integer 

\emph on

servertime

\emph default

.

 servertime is set to 0 when the server first starts and is incremented

 periodically and broadcast with every out going message.

 Right now it is not used, but it can be used to implement a timeline feature

 and undo, by Clients queuing all messages from the beginning of the session.

\end_layout

\begin_layout Subsection

Chat messages

\end_layout

\begin_layout Standard

Messages of type 

\emph on

chat 

\emph default

contain

\end_layout

\begin_layout LyX-Code

message : string containing actual message

\end_layout

\begin_layout Subsection

Protocol

\end_layout

\begin_layout Standard

Protocol messages are used to handle network related actions like clients

 joining and leaving.

 Protocol messages contain

\end_layout

\begin_layout LyX-Code

message :  HELLO - sent by a new client to server

\end_layout

\begin_layout LyX-Code

         | JOINED - sent by server to clients to notify new arrival

\end_layout

\begin_layout LyX-Code

         | LEFT - sent by server to clients to notify leave

\end_layout

\begin_layout LyX-Code

         | BYE - sent by a client when it leaves nicely

\end_layout

\begin_layout LyX-Code

         | HELLO_ACK - sent to HELLO client by server

\end_layout

\begin_layout LyX-Code

         | SERVER_BYE - server shutdown

\end_layout

\begin_layout Standard

These constants are specified in 

\emph on

brainstorm.Message

\emph default

.

 Below are enumerated the types which have further data.

\end_layout

\begin_layout Subsubsection

JOINED and LEFT

\end_layout

\begin_layout LyX-Code

nick : nickname of client which joined, forwarded by server

\end_layout

\begin_layout Subsubsection

HELLO_ACK

\end_layout

\begin_layout LyX-Code

width : image width in pixels, integer

\end_layout

\begin_layout LyX-Code

height : image height in pixels, height

\end_layout

\begin_layout Subsection

Shape

\end_layout

\begin_layout Standard

Shapes are the primary objective of Brainstorm and have a type class of

 their own.

 All shapes have

\end_layout

\begin_layout LyX-Code

shape : a string specifying the shape with values:

\end_layout

\begin_layout LyX-Code

\begin_inset Quotes eld

\end_inset

line

\begin_inset Quotes erd

\end_inset

\end_layout

\begin_layout LyX-Code

\begin_inset Quotes eld

\end_inset

rectangle

\begin_inset Quotes erd

\end_inset

\end_layout

\begin_layout LyX-Code

\begin_inset Quotes eld

\end_inset

polygon

\begin_inset Quotes erd

\end_inset

\end_layout

\begin_layout LyX-Code

\begin_inset Quotes eld

\end_inset

ellipse

\begin_inset Quotes erd

\end_inset

\end_layout

\begin_layout LyX-Code

\begin_inset Quotes eld

\end_inset

text

\begin_inset Quotes erd

\end_inset

\end_layout

\begin_layout LyX-Code

color : dictionary specifying RGB colour of Shape

\end_layout

\begin_layout LyX-Code

        r : integer 0-255

\end_layout

\begin_layout LyX-Code

        g : integer 0-255

\end_layout

\begin_layout LyX-Code

        b : integer 0-255

\end_layout

\begin_layout Standard

A colour has to be broadcast with each Message since different clients can

 have have different active colours in their session.

\end_layout

\begin_layout Subsubsection

line

\end_layout

\begin_layout LyX-Code

Coordinates of line

\end_layout

\begin_layout LyX-Code

x1 : integer

\end_layout

\begin_layout LyX-Code

y1 : integer

\end_layout

\begin_layout LyX-Code

x2 : integer

\end_layout

\begin_layout LyX-Code

y2 : integer

\end_layout

\begin_layout Subsubsection

rectangle and ellipse

\end_layout

\begin_layout LyX-Code

Top left corner

\end_layout

\begin_layout LyX-Code

x : integer

\end_layout

\begin_layout LyX-Code

y : integer

\end_layout

\begin_layout LyX-Code

width : integer

\end_layout

\begin_layout LyX-Code

height : integer

\end_layout

\begin_layout Subsubsection

polygon

\end_layout

\begin_layout LyX-Code

points : list [ x1, y1, x2, y2, ..., xn, yn ]

\end_layout

\begin_layout LyX-Code

closed : [optional integer] if present, polygon is closed

\end_layout

\begin_layout Subsubsection

text

\end_layout

\begin_layout LyX-Code

Top left corner

\end_layout

\begin_layout LyX-Code

x : integer

\end_layout

\begin_layout LyX-Code

y : integer

\end_layout

\begin_layout LyX-Code

text : string containing text

\end_layout

\begin_layout Standard

At this point font information is not encoded in text and not presented

 to the user, this can be extended.

\end_layout

\begin_layout Section

Class Structure

\end_layout

\begin_layout Standard

This details the most important classes.

 Minor classes are skipped.

\end_layout

\begin_layout Subsection

Network handling

\end_layout

\begin_layout Standard

The 

\emph on

Server

\emph default

 and 

\emph on

Client

\emph default

 classes manage core networking dealing with Sockets.

 The Server class uses Java's NIO package which allows using a platforms

 event based functions like select().

 So it uses a single thread to manage all clients.

 Clients are maintained in a list, use to broadcast messages.

\end_layout

\begin_layout Standard

The Client class maintains a single Socket and so does not need NIO.

 It also starts another Thread to run the inner class MessageWriter, which

 continuously writes any queued messages to the Server.

 In addition all incoming messages are clued by the Client, so that pausing

 can be implemented.

\end_layout

\begin_layout Subsection

Message interpretation

\end_layout

\begin_layout Standard

Message interpretation is performed by the MessageEmitter class.

 It takes an InputStream.

 It is the job of Client/Server to 

\emph on

feed

\emph default

 its MessageEmitter when it receives new information.

 A MessageEmitter is 

\emph on

not meant 

\emph default

to be used with multiple streams.

 So the Server maintains different MessageEmitters for each Client.

\end_layout

\begin_layout Standard

A class interested in receiving Message notifications should register with

 the MessageEmitter using 

\emph on

connect()

\emph default

.

 Two interfaces, 

\emph on

MessageReceiver

\emph default

 and 

\emph on

SelectiveMessageReceiver

\emph default

 implements a Observer pattern.

\emph on

notifyMessage( Message m )

\emph default

 is invoked on the observers by the MessageEmitter.

 Selective receivers implement 

\emph on

interestOps()

\emph default

 to signify what kind of message ( chat, shape, protocol ) they are interested

 in.

 This is why the three have values in powers of two.

 They can be bitwise ORed and ANDed.

\end_layout

\begin_layout Subsection

Chat

\end_layout

\begin_layout Standard

Chat is handled by the 

\emph on

ChatWidget 

\emph default

class.

\end_layout

\begin_layout Subsection

Canvas

\end_layout

\begin_layout Standard

The 

\emph on

Canvas

\emph default

 class implements a canvas by inheriting from JPanel.

 It is interested in Shape events.

 Canvas double buffers the graphics as an offscreen Image.

 Tools

\begin_inset CommandInset ref

LatexCommand eqref

reference "sub:Tools-and-Tool"

\end_inset

 use canvas.graphics() to get the relevant 

\emph on

Graphics2D

\emph default

 context.

 In addition Canvas maintains a queue for temporary graphics.

 Due to Swing's painting mechanism, a temporary graphics object is only

 available in the 

\emph on

paintComponent()

\emph default

 method, so a queue is maintained using 

\emph on

canvas.tempDraw(Shape)

\emph default

 which is periodically emptied on 

\emph on

repaint()

\emph default

 calls.

\end_layout

\begin_layout Standard

In addition Canvas maintains the current color and tool after receiving

 notifications from the main class.

\end_layout

\begin_layout Subsection

\begin_inset CommandInset label

LatexCommand label

name "sub:Tools-and-Tool"

\end_inset

Tools and Tool Management

\end_layout

\begin_layout Standard

\emph on

ToolManager

\emph default

 maintains a dictionary of tools and allows the Brainstorm interface to

 be automatically generated.

\end_layout

\begin_layout Standard

The 

\emph on

Tool

\emph default

 class implements common methods.

\emph on

activated() 

\emph default

and 

\emph on

deactivated() 

\emph default

are called when the tool is selected and another tool is selected.

 All Tools implement the KeyListener and Mouse(Motion)Listener so that they

 can respond to events.

 All Tools have a reference to the Canvas.

 The 

\emph on

render() 

\emph default

function also takes a Message received and renders it on the Canvas.

 This way all processing -- input and output -- of a Shape is encapsulated

 in a single class.

\end_layout

\begin_layout Subsection

Brainstorm

\end_layout

\begin_layout Standard

The main class.

 This handles the interface.

 Three inner classes handle pausing the interaction, saving the canvas to

 a image file and choosing the colour.

 Other toolbar actions are dynamically generated using the ToolManager.

\end_layout

\begin_layout LyX-Code

\end_layout

\end_body

\end_document