HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION

FACULTY FOR HIGH QUALITY TRAINING

INFORMATION TECHNOLOGY
_______________

THE FIRST PROJECT REPORT

REMOTE DRAW

LECTURER NAME : Dr. Nguyen Dang Quang

STUDENT NAME : Le Duc Thinh
STUDENT ID : 17110076
STUDENT NAME : Nguyen Hoang Danh
STUDENT ID : 17110009
CLASS : 17110CLA

Ho Chi Minh City, December 2019

2
Acknowledgment
We express our sincere thanks to Mr. Nguyen Dang Quang, our project in charge,
who guided us through the project. He gave valuable suggestions and guidance for
completing the project, helped us to understand the intricate issues involved in
project-making besides effectively presenting it. These intricacies would have been
lost otherwise. Our project has been a success only because of his guidance.

Projects are made within ten weeks, just enough to complete it. However, due to much
new knowledge as well as the time we do through each week is not optimal, the
project will have many errors, which is inevitable. We are looking forward to
receiving all the comments of our teachers to help our limited knowledge better.

Sincerely thanks.

3
Preface
The purpose and objective of this training and mainly the content is time-being, and
with this training, we have gained some confidence regarding introducing the
application. We also believe that way we gained some sorts of IT knowledge, and if
we practice much and having some expertise in the field, then we will be able to
survive smartly in today’s competitive environment.

The effort to write the report is a partial fulfilment to complete the course. In the
report, I try my best to represent all the content that we learned in a great deal in the
program in a systematic and presentable order. I divided each of the topics as an
individual chapter to reflect the entire topic more prominently and clearly. In
reference, I have used the citation method in the entire report. Finally, I am very
hopeful that the structure and topic of the report will be a useful material for all the
reader, especially to the user.

4
CONTENT

Acknowledgment ........................................................................................................ 3

Preface ........................................................................................................................ 4

List of images ............................................................................................................. 7

List of tables ............................................................................................................... 7

I. Project description .............................................................................................. 8

1. Objectives...................................................................................................... 8

2. User benefits ................................................................................................. 8

3. Use case diagram .......................................................................................... 9

4. Use case description tables ......................................................................... 11

II. Task Assignment .............................................................................................. 13

III. Design ............................................................................................................. 14

1. Process description ...................................................................................... 14

1.1. Rendering ............................................................................................. 15

1.2. Remote drawing ................................................................................... 20

2. Class Design ................................................................................................ 21

2.1. Client .................................................................................................... 22

2.2. Server ................................................................................................... 31

3. Graphic User Interface ................................................................................ 35

IV. Test cases ........................................................................................................ 36

V. Conclusion ........................................................................................................ 36

1. Student evaluation ....................................................................................... 36

2. Difficulties .................................................................................................. 37

3. Advantages .................................................................................................. 37

4. Disadvantages ............................................................................................. 37
5
 5. Development ideas ...................................................................................... 37

References ................................................................................................................ 38

6
List of images
Image 1 – Use Case Diagram ................................................................................... 10

Image 2 – Draw unfill and fill rectangle .................................................................. 17

Image 3 – Draw a list of graphics objects ................................................................ 20

Image 4 – Application network architecture ............................................................ 21

List of tables
Table 1 – Use case Draw Shape description ............................................................ 11

Table 2 – Use case Pen description .......................................................................... 11

Table 3 – Use case Invite description ....................................................................... 11

Table 4 – Use case Join description ......................................................................... 11

Table 5 – Use case Leave description ...................................................................... 12

Table 6 – Use case Export description ..................................................................... 12

Table 7 – Use case Chat description......................................................................... 12

Table 8 – Work Plan ................................................................................................. 13

Table 9 – Work Assignment ..................................................................................... 14

Table 10 – List of classes are used in the client application .................................... 22

Table 11 – List of methods in DrawingObject class ................................................ 23

Table 12 – List of methods on Shape class .............................................................. 23

Table 13 – List of methods of Rectangle class ......................................................... 24

Table 14 – List of methods of Ellipse class .............................................................. 25

Table 15 – List of methods of Eraser class............................................................... 25

Table 16 – List of methods of Stroke class .............................................................. 26

Table 17 – List of methods of Infrastructure class ................................................... 26

Table 18 – List of methods of Drawing class ........................................................... 29

7
Table 19 – List of methods of ReadThread class ..................................................... 31

Table 20 – List of methods of WriteThread class .................................................... 31

Table 21 – List of classes are used in the server application ................................... 31

Table 22 – List of methods of Artboard class .......................................................... 32

Table 23 – List of methods of Client class ............................................................... 32

Table 24 – List of methods of Datasource class ....................................................... 33

Table 25 – List of methods of UserThread class ...................................................... 33

Table 26 – GUI explanation ..................................................................................... 35

Table 27 – Test cases ................................................................................................ 36

I. Project description
1. Objectives
The drawing board provides users abilities to customise their drawings; we could find
some applications such as Windows Paint, Artweaver, GIMP, etc. However, these
programs only available for one user at a time. Remote Draw can allow multiple
users to draw on board simultaneously through the network, which helps users spread
their idea to other people more comfortable.

2. User benefits
Similarly to other drawing application programs, the Remote Draw provides users
with the abilities to draw, move, and modify graphics objects. Essential drawing
functions are:

• Select: Select any shape and stroke on the artboard and move them to another
position.
• Undo: Return to the previous action.
• Change colour: User can change colour with HSB, RGB and Web format.
• Change the thickness of a stroke or border width of a shape.

8
 • Erase: Clear everything when an eraser goes through, and the user can change
the size of an eraser.
• Pen: Draw strokes to canvas.
• Shape: Draw rectangle and ellipse.
• Export: Export the artboard into the PNG format.

With the ability to connect to the Internet, Remote Draw application also allows users
to invite one or more friends to draw together. Furthermore, after connecting, users
and their friends can chat with each other to spread their ideas before drawing
something.

3. Use case diagram

9
Image 1 – Use Case Diagram

10
4. Use case description tables
Table 1 – Use case Draw Shape description
Use case name Draw Shape
Description Allows user to draw a rectangle or an ellipse on the board
Actor User
Preconditions Click the Shape button and choose a specific shape
Conditions affecting
termination outcome
Table 2 – Use case Pen description
Use case name Pen
Description Allows user to draw any stroke on the board
Actor User
Preconditions Click Pen button
Conditions affecting
termination outcome
Table 3 – Use case Invite description
Use case name Invite
Description Allows user to invite other people to draw together
Actor User
Business event No. Agent System
1 Click Invite button
2 A connection is established
between user and server
3 The server sends a code to the
user
4 The system displays the code
to the chatbox
Preconditions Server is running
Conditions affecting The server is running, the connection is established successfully
termination outcome The server is terminated, connection failed
Table 4 – Use case Join description
Use case name Join
Description Allows user to join to a remote board
Actor User
Business event No. Agent System
1 Click Join button
2 A connection is established
between user and server
3 The server sends all information of
the remote board to the user

11
 4 Render the drawing information to
the board
Preconditions Server is running
Conditions affecting The server is running, the connection is established successfully
termination outcome The server is terminated, connection failed
Table 5 – Use case Leave description
Use case name Leave
Description Disconnect to server
Actor User
Business event No. Agent System
1 Click Leave button
2 Disconnect to the server
Preconditions User is connected to the server
Conditions affecting
termination outcome
Table 6 – Use case Export description
Use case name Export
Description Exports the current state of the board to a png file
Actor User
Business event No. Agent System
1 Click the export
button
2 Show a dialogue for the user to
choose the directory to store the
image
3 Choose a specific
folder
4 Export the image
Preconditions
Conditions affecting
termination outcome
Table 7 – Use case Chat description
Use case name Chat
Description Allow users to communicate with each other
Actor User
Business event No. Agent System
1 Enter the message
to a text box
2 Click Send button
3 Send the message to the server to
broadcast to other people that are
connected to the same artboard
4 Display the message to the chatbox
12
Preconditions User is connected to the server
Conditions affecting
termination outcome

II. Task Assignment

Table 8 – Work Plan
Student’s name Evaluate contribution Taskwork
Nguyen Hoang Danh 100% Select mode
Undo mode
Change colour mode
Pencil mode
Eraser mode
Shape mode
Export mode
Nguyen Hoang Danh 100% Create a connection to server

Le Duc Thinh 100% Create a server to store every

graphic element that is drawn by
a specified client
Le Duc Thinh 100% Broadcast every update from a
client to others
Le Duc Thinh 100% Chat function

13
 Table 9 – Work Assignment

Building an Remote Draw software using Java

No. Goal Schedule Danh Thinh
1 Understand o o  
Requirement.
2 Describe the o o  
requirements of
the project.
3 Learn Java o o o  
language.
4 Learn network o o o 
programming.
5 Building o o o  
software
architecture.
6 User interface o o 
design.
7 Design classes. o o o  
8 Build methods. o o  
9 Program o o o o o  
Implementation.
10 Optimize Code. o o o  
11 Testing. o o o o  
12 Write report. o o o o  
07/10/2019

14/10/2019

21/10/2019

28/10/2019

04/11/2019

11/11/2019

18/11/2019

25/11/2019

02/12/2019

09/12/2019

Day

Week 1 2 3 4 5 6 7 8 9 10
o – Begin
Note o – Complete 50%
o – Complete 100%

III. Design
1. Process description
Everything drawn on the application is objects; these objects have attributes that
define them, such as position, colour, etc. The role of application is rendering all those

14
objects to a canvas. In java programming language, it provides us with a library called
GraphicsContext. This library takes inputs which are the information of an object and
draw it to a canvas. Canvas is also a library, its role is a UI element, and it works with
GraphicsContext to display graphic elements.

1.1. Rendering

GraphicsContext and Canvas libraries help the application to draw every object to
canvas, such as a line, a rectangle, an ellipse, a triangle, a circle, a polygon, etc.
Remote Draw application focuses on three objects only that is a line, a rectangle, and
an ellipse.

To perform all drawing actions easier, we created a class called Drawing. Then we
need to import the necessary libraries to that class. This class receive information
about canvas from User Interface.

import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
Create a new GraphicsContext instance.

public Drawing(Canvas canvas) {

this.canvas = canvas;
this.graphicsContext = this.canvas.getGraphicsContext2D();
this.graphicElements = new ArrayList<>();
this.selectionGraphicElements = new ArrayList<>();
}
Each object is stored in an list. This list has two purpose, the first one is providing
essential information to Drawing class and Drawing class can draw objects to canvas,
the second one is to send this list over the Internet, other Remote Draw application
will receive it and render all graphics elements.

After having the tool is GraphicsContext and Canvas library, we need objects. For
example, we have a Rectangle class which is inherited from Shape abstract class.
This class defines all the information of a rectangle.

public class Shape extends DrawingObject {

15
 //region Private Attributes
private double x1;
private double y1;
private double x2;
private double y2;
boolean fill;
private String color;
private int thickness;
//endregion

//region Constructor
public Shape(double x1, double y1, double x2, double y2, boolean fill, String
color, int thickness) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.fill = fill;
this.color = color;
this.thickness = thickness;
}
}
public class Rectangle extends Shape {

//region Private Attributes

private String type;
private double width;
private double height;
//endregion

//region Constructor
public Rectangle(double x1, double y1, double x2, double y2, boolean fill, String
color, int thickness, String type) {
super(x1, y1, x2, y2, fill, color, thickness);
16
 this.type = type;
}
}
Now we can draw rectangles to a canvas using below command

graphicsContext.fillRect(rectangle.getX1(), rectangle.getY1(), rectangle.getWidth(),

rectangle.getHeight());
graphicsContext.strokeRect(rectangle.getX1(), rectangle.getY1(),
rectangle.getWidth(), rectangle.getHeight());
And we have the result.

Image 2 – Draw unfill and fill rectangle

Similarly we can draw a list of graphics elements such as a ellipse and a stroke, note
that a stroke is a set of lines. Everytime we draw an new object to the canvas, we add
it to the list called graphicsElements, so that the Drawing class just need to render
that list.

public void Render() {

graphicsContext.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());

for(Object object: graphicElements) {

if(object instanceof Rectangle) {
Rectangle rectangle = ((Rectangle) object);
if(((Rectangle) object).isFill()) {
graphicsContext.setFill(Color.valueOf(rectangle.getColor()));
17
 graphicsContext.fillRect(rectangle.getX1(), rectangle.getY1(),
rectangle.getWidth(), rectangle.getHeight());
} else {
graphicsContext.setStroke(Color.valueOf(rectangle.getColor()));
graphicsContext.setLineWidth(rectangle.getThickness());
graphicsContext.strokeRect(rectangle.getX1(), rectangle.getY1(),
rectangle.getWidth(), rectangle.getHeight());
}
}

if(object instanceof Stroke) {

Stroke stroke = ((Stroke) object);
graphicsContext.setStroke(Color.valueOf(stroke.getColor()));
graphicsContext.setLineWidth(stroke.getPenSize());
for(int i=0; i<stroke.getPath().size()-3; i+=2) {
graphicsContext.strokeLine(stroke.getPath().get(i),
stroke.getPath().get(i+1), stroke.getPath().get(i+2), stroke.getPath().get(i+3));
}
}

if(object instanceof Ellipse) {

Ellipse ellipse = ((Ellipse) object);
if(ellipse.isFill()) {
graphicsContext.setFill(Color.valueOf(ellipse.getColor()));
graphicsContext.fillOval(ellipse.getX1(), ellipse.getY1(),
ellipse.getWidth(), ellipse.getHeight());
} else {
graphicsContext.setStroke(Color.valueOf(ellipse.getColor()));
graphicsContext.setLineWidth(ellipse.getThickness());
graphicsContext.strokeOval(ellipse.getX1(), ellipse.getY1(),
ellipse.getWidth(), ellipse.getHeight());
}
}

if(object instanceof Eraser) {

18
 Eraser eraser = ((Eraser) object);
for(int i=0; i<eraser.getPath().size()-2; i+=2) {
graphicsContext.clearRect(eraser.getPath().get(i),
eraser.getPath().get(i+1), eraser.getEraserSize(), eraser.getEraserSize());
}
if(!isFinishedErasing) {
if(graphicElements.get(graphicElements.size() - 1) instanceof Eraser) {
Eraser latestEraser = ((Eraser)
graphicElements.get(graphicElements.size() - 1));
int size = latestEraser.getPath().size();
graphicsContext.setLineWidth(3);
graphicsContext.setStroke(Color.RED);
graphicsContext.strokeRect(latestEraser.getPath().get(size-2),
latestEraser.getPath().get(size-1), latestEraser.getEraserSize(),
latestEraser.getEraserSize());
}
}
}
}
}
And below is the result.

19
 Image 3 – Draw a list of graphics objects

1.2. Remote drawing

To allow users to draw together, we need a server to be a middle man between users.
Server receives graphics elements from a user and broadcast it to other users who are
connecting to the same artboard.

Java.net package allows us to open a connection between a client to a server. The

package contains two sets of APIs: the low-level API, and the high-level API. Low-
level API deals with port, IP address while high-level deals with HTTP/HTTPS.

In this project, we use the low-level API to establish a connection between client and
server. Java.net.socket library helps us to communicate with a server by an IP address
and a port.

Socket socket = new Socket("127.0.0.1", 5000);

The above command is used to connect to a computer with the IP address is
“127.0.0.1” which is the local computer, and the port is 5000. IP address specifies
which computer on the Internet it should connect to and port clarifies which
application in that computer it should connect to.

20
In the client-side, which is the Remote Draw application, we create two thread for
reading data from the server and sending data to the server called ReadThread and
WriteThread.

In the server-side, which is a console application, we create a thread called

UserThread to handle request from a specific client.

Image 4 – Application network architecture

So users want to draw with their friends, what information do they need to send to
the server? Every time a user (host) wants to invite someone (guest) to draw with
him, he needs to send all his current graphics elements to the server. The server stores
that information plus a code, this code is unique for each host. The server will send
this code back to the host and tell him that you need to share this code to your friends
to start drawing together. Guest will send this code to the server and receive all
drawing information of the host from the server. From now on, every modification of
any graphics elements server will know and broadcast that changes to other users.

After successfully allowing users to draw remotely, we also allow users to send
messages like a chat application to make their work more comfortable.

2. Class Design
In other to handling all features from drawing and communication, object-oriented
programming is the best technique helping us to implement those features. Below is
the detail of all classes that are defined by us in this project, including the methods
and the purpose of them.

21
We divided all classes in this application into two groups. The first group contains all
classes of the client (Remote Draw), and the second one consists of all classes of the
server.

2.1. Client

List of classes are used in the client application

Table 10 – List of classes are used in the client application

No. Class Name Responsible Purpose
1 DrawingObject Le Duc We can make every child of
Implement: Serializable Thinh this class such as shape and
stroke be serialisable (convert
to byte stream)
2 Shape Nguyen An abstract class that defines
Extend: DrawingObject Hoang every shape on the canvas
Danh such as rectangle and ellipse
3 Rectangle Nguyen Define any rectangle that is
Extend: Shape Hoang drawn on the canvas
Danh
4 Ellipse Nguyen Define any ellipse that is
Extend: Shape Hoang drawn on the canvas
Danh
5 Eraser Nguyen Define any erasing path on
Extend: Shape Hoang the canvas
Danh
6 Stroke Nguyen Define any path of a pen that
Extend: DrawingObject Hoang is drawn on the canvas
Danh
7 Infrastructure Le Duc Define essential information
Thinh about drawing and connection
of the application
8 Drawing Nguyen Store and draw graphic
Hoang elements like shape and
Danh stroke to the canvas
9 ReadThread Le Duc Read every information
Thinh coming from the server then
transfer and store information
to Infrastructure class
10 WriteThread Le Duc Send requests from the client
Thinh to server
11 DrawingObjectsToStringConverter Reference Convert drawing objects to a
byte stream
List of methods in DrawingObject class

22
 Table 11 – List of methods in DrawingObject class
No. Method Purpose File name, Responsible
Line
1 equals(Object obj) Compare DrawingObjects DrawingO Le Duc
Input: obj. bject.java Thinh
Output: boolean. (8)
Pseudocode: none.
2 toString() Print out the default DrawingO Le Duc
Input: none information of an instance bject.java Thinh
Output: String of DrawingObject to the (13)
PseudoCode: none console
List of methods in Shape class

Table 12 – List of methods on Shape class

No. Method Purpose File name, Responsible
Line
1 setX1(double x1) Assign the X position of Shape.java Nguyen
Input: x1. the upper left corner of a (36) Hoang
Output: none. shape Danh
Pseudocode: none.
2 getX1() Get the X position of the Shape.java Nguyen
Input: none. upper left corner of a (32) Hoang
Output: double. shape Danh
Pseudocode: none.
3 setY1(double y1) Assign the Y position of Shape.java Nguyen
Input: y1. the upper left corner of a (44) Hoang
Output: none. shape Danh
Pseudocode: none.
4 getY1() Get the Y position of the Shape.java Nguyen
Input: none. upper left corner of a (40) Hoang
Output: double. shape Danh
Pseudocode: none.
5 setX2(double x2) Assign the X position of Shape.java Nguyen
Input: x2. the lower right corner of a (52) Hoang
Output: none. shape Danh
Pseudocode: none.
6 getX2() Get the X position of the Shape.java Nguyen
Input: none. lower right corner of a (48) Hoang
Output: double. shape Danh
Pseudocode: none.
7 setY2(double y2) Assign the Y position of Shape.java Nguyen
Input: y2. the lower right corner of a (60) Hoang
Output: none. shape Danh
Pseudocode: none.

23
 8 getY2() Get the Y position of the Shape.java Nguyen
Input: none. lower right corner of a (56) Hoang
Output: double. shape Danh
Pseudocode: none.
9 isFill() Check whether the state Shape.java Nguyen
Input: none. of a shape is filled or (64) Hoang
Output: boolean. unfilled Danh
Pseudocode: none.
10 setFill(boolean fill) Set the fill value Shape.java Nguyen
Input: fill. (68) Hoang
Output: none. Danh
Pseudocode: none.
11 getColor() Get the color of border Shape.java Nguyen
Input: none. and fill color of a shape (72) Hoang
Output: String. Danh
Pseudocode: none.
12 setColor(String color) Set the color of border Shape.java Nguyen
Input: color. and fill color of a shape (76) Hoang
Output: String. Danh
Pseudocode: none.
13 getThickness() Get the border width of a Shape.java Nguyen
Input: none. shape (80) Hoang
Output: int. Danh
Pseudocode: none
14 setThickness(int Set the border width of a Shape.java Nguyen
thickness) shape (84) Hoang
Input: thickness Danh
Output: none.
Pseudocode: none.
List of methods of Rectangle class

Table 13 – List of methods of Rectangle class

No. Method Purpose File name, Responsible
Line
1 getWidth() Get the width of a Rectangle.j Nguyen
Input: none. rectangle ava Hoang
Output: double. (33) Danh
Pseudocode: none.
2 getHeight() Get the height of a Rectangle.j Nguyen
Input: none. rectangle ava Hoang
Output: double. (38) Danh
Pseudocode: none.
3 isInsideRectangle(doubl Check whether a specific Rectangle.j Nguyen
e x, double y) position on the canvas is ava Hoang
Input: x, y. inside a rectangle (43) Danh

24
 Output: boolean
Pseudocode: none
4 isOnRectangle(double Check whether a specific Rectangle.j Nguyen
x, double y) position on the canvas is ava Hoang
Input: x, y. on a rectangle (50) Danh
Output: boolean
Pseudocode: none
List of methods of Ellipse class

Table 14 – List of methods of Ellipse class

No. Method Purpose File name, Responsible
Line
1 getWidth() Get the width of an Ellipse.java Nguyen
Input: none. ellipse (24) Hoang
Output: double. Danh
Pseudocode: none.
2 getHeight() Get the height of an Ellipse.java Nguyen
Input: none. ellipse (29) Hoang
Output: double. Danh
Pseudocode: none.
3 isInsideEllipse(double Check whether a specific Ellipse.java Nguyen
x, double y) position on the canvas is (45) Hoang
Input: x, y. inside an ellipse Danh
Output: boolean
Pseudocode: none
4 isOnEllipse(double x, Check whether a specific Ellipse.java Nguyen
double y) position on the canvas is (34) Hoang
Input: x, y. on an ellipse Danh
Output: boolean
Pseudocode: none
List of methods of Eraser class

Table 15 – List of methods of Eraser class

No. Method Purpose File name, Responsible
Line
1 getPath() Get the erasing path of an Eraser.java Nguyen
Input: none. eraser (25) Hoang
Output: List<Double>. Danh
Pseudocode: none.
2 getEraserSize() Get eraser size Eraser.java Nguyen
Input: none. (33) Hoang
Output: double Danh
Pseudocode: none
List of methods of Stroke class
25
 Table 16 – List of methods of Stroke class
No. Method Purpose File name, Responsible
Line
1 getPath() Get the stroke path Stroke.java Nguyen
Input: none. (31) Hoang
Output: List<Double>. Danh
Pseudocode: none.
2 getColor() Get color of a stroke Stroke.java Nguyen
Input: none. (39) Hoang
Output: String. Danh
Pseudocode: none
3 getPenSize() Get the thickness of a Stroke.java Nguyen
Input: none. stroke (47) Hoang
Output: int. Danh
Pseudocode: none
4 isOnStroke(double x, Check whether a specific Stroke.java Nguyen
double y) position on the canvas is (71) Hoang
Input: x, y. on a stroke Danh
Output: boolean.
Pseudocode: none
List of methods of Infrastructure class

Table 17 – List of methods of Infrastructure class

No. Method Purpose File name, Responsible
Line
1 getColor() Get selected color in color Infrastructu Le Duc
Input: none. menu re.java Thinh
Output: String. (35)
Pseudocode: none.
2 getThickness() Get thickness value Infrastructu Le Duc
Input: none. selected from Draw re.java Thinh
Output: int. Shape menu (39)
Pseudocode: none.
3 getMode() Get the selected function Infrastructu Le Duc
Input: none. of the application re.java Thinh
Output: DrawingMode. (43)
Pseudocode: none.
4 getPenSize() Get pen size value Infrastructu Le Duc
Input: none. selected from Pen menu re.java Thinh
Output: int. (47)
Pseudocode: none.
5 getEraserSize() Get easer size value Infrastructu Le Duc
Input: none. selected from Eraser re.java Thinh
Output: int. menu (51)
Pseudocode: none.
26
6 setColor(String color) Set color used by the Infrastructu Le Duc
Input: color. application re.java Thinh
Output: none. (55)
Pseudocode: none.
7 setThickness(int Set thickness value used Infrastructu Le Duc
thickness) by the application re.java Thinh
Input: thickness. (59)
Output: none.
Pseudocode: none.
8 setMode(DrawingMode Set the current function of Infrastructu Le Duc
mode) the application re.java Thinh
Input: mode. (63)
Output: none.
Pseudocode: none.
9 setPenSize(int penSize) Set the pen size value Infrastructu Le Duc
Input: penSize. used by the application re.java Thinh
Output: none. (67)
Pseudocode: none.
10 setEraserSize(int Set the pen size value Infrastructu Le Duc
eraserSize) used by the application re.java Thinh
Input: eraserSize. (71)
Output: none.
Pseudocode: none.
11 getCode() Get the code of the Infrastructu Le Duc
Input: none. artboard according to the re.java Thinh
Output: String. server (75)
Pseudocode: none.
12 setCode(String code) Set the code to send to the Infrastructu Le Duc
Input: code. server re.java Thinh
Output: none. (79)
Pseudocode: none.
13 getProtocol() Get the current protocol Infrastructu Le Duc
Input: none. of the communication re.java Thinh
Output: String. (83)
Pseudocode: none
14 setProtocol(String Set the current protocol of Infrastructu Le Duc
protocol) the communication re.java Thinh
Input: protocol. (87)
Output: none.
Pseudocode: none.
15 getData() Get the byte stream of the Infrastructu Le Duc
Input: none. graphics elements re.java Thinh
Output: String (91)
Pseudocode: none
16 setData(String data) Set the byte stream of the Infrastructu Le Duc
Input: data. graphics elements re.java Thinh

27
 Output: none. (95)
Pseudocode: none
17 getName() Get the name of the user Infrastructu Le Duc
Input: none. re.java Thinh
Output: String (99)
Pseudocode: none
18 setName(String name) Set the name of the user Infrastructu Le Duc
Input: name. re.java Thinh
Output: none. (103)
Pseudocode: none
19 getResult() Get the result from the Infrastructu Le Duc
Input: none. server re.java Thinh
Output: String (107)
Pseudocode: none
20 setResult(String result) Set the result value Infrastructu Le Duc
Input: result. re.java Thinh
Output: none. (111)
Pseudocode: none
21 setNotification(String Set notification for the Infrastructu Le Duc
notification) application re.java Thinh
Input: notification. (119)
Output: none.
Pseudocode: none
22 getNotification() Get notification from the Infrastructu Le Duc
Input: none. server re.java Thinh
Output: String. (115)
Pseudocode: none
23 setIncomingMessage(St Set incoming message for Infrastructu Le Duc
ring incomingMessage) the application re.java Thinh
Input: incomingMessage. (127)
Output: none.
Pseudocode: none
24 getIncomingMessage() Get the incoming Infrastructu Le Duc
Input: none. message from the server re.java Thinh
Output: String. (123)
Pseudocode: none
25 setOutgoingMessage(St Set outgoing message for Infrastructu Le Duc
ring outgoingMessage) the application re.java Thinh
Input: outgoingMessage. (135)
Output: none.
Pseudocode: none
26 getOutgoingMessage() Get the outgoing message Infrastructu Le Duc
Input: none. from the server re.java Thinh
Output: String. (131)
Pseudocode: none
List of methods of Drawing class
28
 Table 18 – List of methods of Drawing class
No. Method Purpose File name, Responsible
Line
1 Render() Draw all Drawing.ja Nguyen
Input: none. graphic va Hoang
Output: none. elements (41) Danh
Pseudo ode: which are in
for(object in graphicsElements) the graphics
elements lít
draw the object to the canvas
2 Undo() Remove the Drawing.ja Nguyen
Input: none last element in va Hoang
Output: String graphicElemen (97) Danh
Pseudocode: ts list
if the graphics elements list is not
empty
remove the last element
3 Clear() Clear canvas Drawing.ja Nguyen
Input: none. va Hoang
Output: none. (107) Danh
Pseudocode:
Clear graphicsElements list
Render()
4 getSelectionGraphicElements() Get all Drawing.ja Nguyen
Input: none. graphics va Hoang
Output: List<DrawingObject> elements that (115) Danh
Pseudocode: none. are selected
5 getGraphicElements() Get all Drawing.ja Nguyen
Input: none. graphics va Hoang
Output: List<DrawingObject> elements (123) Danh
Pseudocode: none.
6 setGraphicElements() Set graphics Drawing.ja Nguyen
Input: List<DrawingObject>. elements va Hoang
Output: none. (127) Danh
Pseudocode: none.
7 initDrawRect(double x, double y, Add a new Drawing.ja Nguyen
boolean fill, String color, int rectangle to va Hoang
thickness) object list (172) Danh
Input: x, y, fill, color, thickness when the
Output: none. mouse is
Pseudocode: none. pressed
8 onDrawRect(double x, double y) Draw the latest Drawing.ja Nguyen
Input: x,y. rectangle in va Hoang
Output: none the object list (182) Danh

29
 Pseudocode: none corresponding
to the position
of the mouse
when it is
being dragged
9 initDrawEllipse(double x, double Add a new Drawing.ja Nguyen
y, boolean fill, String color, int ellipse to va Hoang
thickness) object list (222) Danh
Input: x, y, fill, color, thickness when the
Output: none. mouse is
Pseudocode: none. pressed
10 onDrawEllipse(double x, double y) Draw the latest Drawing.ja Nguyen
Input: x,y. ellipse in the va Hoang
Output: none object list (232) Danh
Pseudocode: none corresponding
to the position
of mouse
when it is
being dragged
11 initDrawStroke(double x, double Add a new Drawing.ja Nguyen
y, String color, int penSize) stroke to va Hoang
Input: x, y, fill, color, penSize object list (272) Danh
Output: none. when the
Pseudocode: none. mouse is
pressed
12 onDrawStroke(double x, double y) Draw the latest Drawing.ja Nguyen
Input: x,y. stroke in the va Hoang
Output: none object list (285) Danh
Pseudocode: none corresponding
to the position
of mouse
when it is
being dragged
13 initDrawEraser(double x, double Add a new Drawing.ja Nguyen
y, double eraserSize) eraser to va Hoang
Input: x, y, eraserSize object list (296) Danh
Output: none.
Pseudocode: none.
14 onDrawEraser(double x, double y) Clear every Drawing.ja Nguyen
Input: x,y. stroke va Hoang
Output: none corresponding (309) Danh
Pseudocode: none to the position
of mouse
when it is
being dragged
List of methods of ReadThread class
30
 Table 19 – List of methods of ReadThread class
No. Method Purpose File name, Responsible
Line
1 run() Listen to data sent from ReadThrea Le Duc
Input: none. the server d.java Thinh
Output: none. (26)
Pseudocode: none.
2 getSocket() Get current socket ReadThrea Le Duc
Input: none. d.java Thinh
Output: Socket. (82)
Pseudocode: none
3 setSocket() Update socket ReadThrea Le Duc
Input: none. d.java Thinh
Output: Socket. (86)
Pseudo code: none
List of methods of WriteThread class

Table 20 – List of methods of WriteThread class

No. Method Purpose File name, Responsible
Line
1 run() Listen to data sent from WriteThrea Le Duc
Input: none. the client d.java Thinh
Output: none. (26)
Pseudocode: none.
2 getSocket() Get current socket WriteThrea Le Duc
Input: none. d.java Thinh
Output: Socket. (82)
Pseudocode: none
3 setSocket() Update socket WriteThrea Le Duc
Input: none. d.java Thinh
Output: Socket. (86)
Pseudocode: none
2.2. Server

List of classes are used in the server application

Table 21 – List of classes are used in the server application

No. Class Name Responsible Purpose
1 Artboard Le Duc Store information of an
Thinh artboard such as code,
drawingObjects and clients
who are connecting to that
artboard

31
 2 Client Le Duc Store information of a client
Thinh who is connecting to the
server
3 Datasource Le Duc An instance provides the
Thinh server with the ability to share
resources between threads
4 UserThread Le Duc Handle every request come
Thinh from clients
List of methods of Artboard class

Table 22 – List of methods of Artboard class

No. Method Purpose File name, Responsible
Line
1 getCode() Get the code of an Artboard.ja Le Duc
Input: none. artboard va Thinh
Output: String. (16)
Pseudocode: none.
2 setCode() Set the code of an Artboard.ja Le Duc
Input: String. artboard va Thinh
Output: none. (20)
Pseudocode: none.
3 getDrawingObjects() Get graphics elements of Artboard.ja Le Duc
Input: none. an artboard va Thinh
Output: String. (24)
Pseudocode: none
4 setDrawingObjects() Set graphics elements of Artboard.ja Le Duc
Input: none. an artboard va Thinh
Output: String. (28)
Pseudocode: none
5 getClients () Get all clients connected Artboard.ja Le Duc
Input: none. to the artboard va Thinh
Output: List<Client>. (32)
Pseudocode: none
List of methods of Client class

Table 23 – List of methods of Client class

No. Method Purpose File name, Responsible
Line
1 getClientName() Get the name of a client Client.java Le Duc
Input: none. (7) Thinh
Output: String.
Pseudocode: none.
2 setClientName() Set the name of a client Client.java Le Duc
Input: String. (11) Thinh

32
 Output: none.
Pseudocode: none.
3 getClientThread() Get the UserThread of a Client.java Le Duc
Input: none. client (15) Thinh
Output: UserThread.
Pseudocode: none
4 setClientThread() Get the UserThread of a Client.java Le Duc
Input: UserThread. client (19) Thinh
Output: none.
Pseudocode: none
List of methods of Datasource class

Table 24 – List of methods of Datasource class

No. Method Purpose File name, Responsible
Line
1 getArtboards() Get a list of artboards that Datasource Le Duc
Input: none. are stored in the server .java Thinh
Output: List<Artboard>. (23)
Pseudocode: none.
2 getConnectedClients() Get a list of clients that Datasource Le Duc
Input: none. are stored in the server .java Thinh
Output: List<Client>. (31)
Pseudocode: none.
List of methods of UserThread class

Table 25 – List of methods of UserThread class

No. Method Purpose File name, Responsible
Line
1 run() Listen to any request from UserThrea Le Duc
Input: none. clients d.java Thinh
Output: none (20)
Pseudocode: none.
2 inviteAction(String[] Create an artboard with a UserThrea Le Duc
message) unique code d.java Thinh
Input: message. Add graphics elements to (111)
Output: none. that artboard
Pseudocode: none. Send the code to the
client
3 joinAction(String[] Find the artboard with the UserThrea Le Duc
message) code that equals to the d.java Thinh
Input: message. code from the client (139)
Output: none. Send all graphics
Pseudocode: none. elements to the client

33
4 leaveAction(Artboard Close the connection UserThrea Le Duc
artboard, Client client) between client and server d.java Thinh
Input: artboard, client. (184)
Output: none.
Pseudocode: none.
5 updateAction(Artboard Tell the client that it UserThrea Le Duc
artboard, Client client) needs to update graphics d.java Thinh
Input: artboard, client. elements. (204)
Output: none.
Pseudocode: none.
6 broadcastMessage(Artb Broadcast message to UserThrea Le Duc
oard artboard, Client other clients d.java Thinh
client, String data) (211)
Input: artboard, client,
data.
Output: none.
Pseudocode: none.

34
3. Graphic User Interface
Table 26 – GUI explanation
No. GUI Purpose Brief Explanation
1 Main window The main Le Duc Thinh
window of On the left side is
the the menu for
application drawing functions
such as Select,
Undo, etc.
On the top is the
menu for export
the artboard to png
file, three buttons
which help connect
to other users.
After choosing one
of the drawing
function like Pen,
the user can click
and hold on the
blue grid to start
drawing.
2 Chat box Allows user Le Duc Thinh
to User can type
communicat anything to the text
e with field and then click
others send button. A
message will be
displayed in the
text area above the
text field and send
button

3 Join form Allows user Le Duc Thinh

to send the After filling all
code to the field user can click
server to submit button. The
join with application will
other people send the code to
the server and tell
35
 the server to send
information of
graphics elements
of an artboard
containing that
code back to the
application

IV. Test cases

Table 27 – Test cases
No. Test cases Purpose Brief Explanation
1 Test case 1: Test the Open two application in
Input: communication the same computer and
Set the IP address for the between client and start drawing.
socket is “127.0.0.1” and the server
port is the port of the server.
Result:
Two apps connect
successfully.
Every graphics element is
updated successfully
2 Test case 2: Test the Place the server on
Input: communication another computer.
Set the IP address for the between client and Open two application in
socket is IP address of another server in different a different machine and
computer and the port is the computer start drawing.
port of the server.
Result:
Two apps connect
successfully.
Every graphics element is
updated successfully

V.Conclusion
1. Student evaluation
• Almost requirements are met.
• Design the application with Object-Oriented programming paradigm.

36
 • Simple design GUI for easy using.
• The code is quite clean and reusable
• Our application allows many people to draw together.
• Our application cannot allow the user to type in the canvas and import an
image to the canvas.

2. Difficulties
• Learning new technology is a problem for us because it slows down the
project progress
• Multi-threading programming is also a problem because we do not have
enough knowledge and practice.

3. Advantages

• Quite clean code

• Meets the requirements of the project
• Simple GUI, users easy to use this application to draw and invite other
people to join with them.
• Reuse, recycling, and maintainability

4. Disadvantages

• Multiple threads in this application are working but not in the perfect way.
Therefore, user experience (UX) may be a problem.
• The application cannot allow users to type text on the canvas.
• The application cannot import images to canvas.

5. Development ideas
• Instead of allowing a user with the basic drawing functions, we can upgrade
the drawing functions to become more technical and professional like
Photoshop or Corel Draw.

37
References
Examples about chat application using java socket:

https://cs.lmu.edu/~ray/notes/javanetexamples/

https://www.geeksforgeeks.org/multi-threaded-chat-application-set-1/

How to install JavaFX 13 in Intellij IDEA:

https://openjfx.io/openjfx-docs/#install-javafx

How to use canvas in javaFX:

https://examples.javacodegeeks.com/desktop-java/javafx/javafx-canvas-example/

Multi-threading programming:

https://dzone.com/articles/java-thread-tutorial-creating-threads-and-multithr

Socket in java:

https://www.geeksforgeeks.org/socket-programming-in-java/

38