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. 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 List of images. 7 List of tables. Use case diagram. Use case description tables.
Graphic User Interface. 38 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 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.
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. 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.
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. Use case diagram Image 1 – Use Case Diagram 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 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 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. o o o o � � 18/11/2019 25/11/2019 07/10/2019 14/10/2019 21/10/2019 28/10/2019 02/12/2019 09/12/2019 11/11/2019 04/11/2019 Day Week 1 2 3 4 5 6 7 8 9 10 o – Begin Note o – Complete 50% o – Complete 100% III.
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 Output: none. (95) Pseudocode: none 17 getName() Get the name of the user Infrastructu Le Duc Input: none.java Thinh Output: String (99) Pseudocode: none 18 setName(String name) Set the name of the user Infrastructu Le Duc Input: name.java Thinh Output: none. (103) Pseudocode: none 19 getResult() Get the result from the Infrastructu Le Duc Input: none.java Thinh Output: String (107) Pseudocode: none 20 setResult(String result) Set the result value Infrastructu Le Duc Input: result.java Thinh Output: none.java Thinh Input: notification.
Pseudocode: none 22 getNotification() Get notification from the Infrastructu Le Duc Input: none.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. 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. 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 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. Output: ellipse in the va Hoang none Pseudocode: object list (232) Danh 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) Input: stroke to va Hoang x, y, fill, color, penSize Output: object list (272) Danh none. when the Pseudocode: none.
mouse is pressed 12 onDrawStroke(double x, double y) Draw the latest Drawing.ja Nguyen Input: x,y. Output: stroke in the va Hoang none Pseudocode: object list (285) Danh 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 Output: object list (296) Danh none. 14 onDrawEraser(double x, double y) Clear every Drawing.ja Nguyen Input: x,y. Output: stroke va Hoang none Pseudocode: corresponding (309) Danh none to the position of mouse when it is being dragged List of methods of ReadThread class 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.java Thinh Output: none. 2 getSocket() Get current socket ReadThrea Le Duc Input: none.java Thinh Output: Socket. (82) Pseudocode: none 3 setSocket() Update socket ReadThrea Le Duc Input: none.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.java Thinh Output: none. 2 getSocket() Get current socket WriteThrea Le Duc Input: none.java Thinh Output: Socket. (82) Pseudocode: none 3 setSocket() Update socket WriteThrea Le Duc Input: none.java Thinh Output: Socket. Server List of classes are used in the server application Table 21 – List of classes are used in the server application No.