Date: 2019 Nov.
Authors : ludovic Descateaux (@mad171) & brieuc loussouarn (@bloussou)
JustDrawIt-Paperboard is a project to pave the basis for a collaborative drawing application. It enable users to create a new Paperboard or join a new Paperboard and sketch it online with many other users.
-
Simply authenticate with your favorite pseudo
- 2 users can't have the same pseudo : Find yours !
- if you get disconnected the pseudo become free again
-
Create or join a board
- 2 boards can't have the same title
- When creating you can choose a background image or a background color for your board
-
Choose a drawing
- different drawings are available :
- Hand Writing
- Line
- Rectangle
- Circle
- Import icon
- different drawings are available :
-
Edit a shape
- Select a shape by clicking on it
- Use the edition options panel to choose your options
- Click on the drawing, different cursors help you to make actions
Default cursor
Cursor when you can select a drawing, click to select it
Cursor when you can move the selected drawing on the board
Cursor when you can resize the selected drawing
-
Chat and see drawers
-
Take a picture
- NOT DONE YET
-
Leave the board
- Click on leave board
-
Be the member of a new one
- Join a new Paperboard
Remote backend is hosted on heroku app at https://just-draw-it.herokuapp.com. WARNING : this is a free hosting of the app with really poor performances. It will crash a lot when drawing handwriting and also icon and image size is limited to 1.2kb.
- clone or pull the repo
- download the maven dependencies written in the pom.xml file (mvn install)
- start the server with run
- setup your jdk to 11.0.4
- Run the app in your IDE, should listen socket request on localhost:8025
WARNING :
- if your frontend is not listening on port between 3000 and 3010 you need to add the port to the CORS list
in
WebSocketServerConfigurator.java
. - start the server before the client
Use your IDE to run the different junit test and understand what they are doing.
- src : Folder containing the code
- main/java/com.paperboard/ : Package of the application Paperboard
- drawings/ : Package for Drawing Objects
- Drawing.java : Abstract class, all the drawings extend this class
- shapes/ : Package containing the shapes (object with line, you can set the color, change line style
and line width)
- Shape : Abstract class, all the shapes extends this class
- ...
- DrawingType : enum of the different possible shapes
- ModificationType : enum of the different editions you can do on Drawings
- ...
- server : Package containing server code
- error : Package containing customized Exception
- events : Package containing Event management
- EventType : enum of the different eventType
- ...
- socket : Package containing server code
- MessageType : Enum containing
- WebsocketServerEndPoint : Entry point for frontend Message
- ...
- Paperboard : PaperboardClass
- PaperboardApplication : main class
- User : User Class
- drawings/ : Package for Drawing Objects
- main/java/com.paperboard/ : Package of the application Paperboard
- test/java : contains the junit test
This app is a full websocket app with Tyrus. It has several patterns as Singleton and Observer. It is an object oriented program.
drawings package :
For this we have chose to have two heritage with two abstract class Shape and Drawing. Drawing describe all the elements of the paperboard with a unique id.
Shape Class define all paperboard objects containing lines we can edit.
You should have a look to the override methods editDrawing
and encodeToJsonObject
.
server package :
server package with socket and events package :
In this diagram you can see the observer with the Subscriber interface.
See ./pom.xml
- java 11
- io.projectreactor : have @Nullable
- junit : for the tests
- javax.websocket : websocket serverdepandencies
- org.glassfish.tyrus : websocket server
- javax.json : dependencies to deal with json
As you can see in the enum MessageType, we have design a set of message to be sure to always use the same string.
Event send from the frontend are handled in WebSocketServerEndPoint, see the onMessage method. In most of the case internal event are fired (see EventType enum) and handled in WebsocketServer because it's a singleton pattern to reduce the number of message sent.
Simplified sequence diagram, miss "get" messages.
- The red envelop symbolize webSocketServerEndPointClass.
- Blue squares are classes that register to event
- Outside arrows are socket messages
- inside arrows are events