Paint

Simple Paint Application Developed using angular framework and springboot.

Contents:

• Contributers
• Frameworks and technology used
• How to run
• Used design patterns
• UML class diagram
• Snapshots of our UI and a user guide
• Demo Video for using the app

---

Contributers:

• Adel Mahmoud
• Mohamed Hassan
• Mahmoud Attia
• Mahmoud Ghlab

---

Frameworks and technology used:

• For the frontend part (view part), we used HTML, CSS, and typescript through angular framework.
• For the backend (model and controller), we used Java language through spring framework.

---

How to run:

• Note: Make sure you have downloaded NodeJs and Angular-CLI.
• extract the compressed project folder.

Back-end part:

• Open the paintBackend folder using IntelliJ IDE or any other IDE, run the PaintBackendApplication.java class on port 9090.
• you can change the port from the project resources → application.properties if the 9090 port was already used in your device but in this case, you will need to change it in all http requests in the app.components.ts file on the front-end folder.

Front-end part:

• Open the paint-frontend folder using visual studio IDE, then open the terminal of the IDE, and write npm install in the terminal.
• Then write “ng serve --open” in the terminal to open the project, on port “http://localhost:4200/”-. Note: if you needed to change port 4200 as it was already in use then you will need to change it in the paintBackend folder in the controller class.
• Then you can use the paint application and draw whatever you want.

---

Used design patterns:

1- Factory design pattern:

• We have an interface called ‘IShape’ that’s implemented by the superclass ‘Shape’ which is inherited to all other shapes classes this interface is cloneable for the prototype DP.
• Then we have a super Class called ’Shape’ that have the common methods and attributes for the shapes with a purpose of inheritance and code reusability.
• Shapes classes (circle, triangle,.) extends the Shape class.
• The factory creates an instance of any shape by using a key string which is the name of the desired shape to be formed then the factory returns an object with the type of Shape.

2- Prototype design pattern:

• In order to Copy shapes in the app, we create the copy method by prototype design pattern.
• First, we create an instance of Shape class (which implements the interface IShape which extends Cloneable interface) to call the function “makeCopy(desired shape attributes copied)” with all attributes of the desired shape to be copied as arguments.
• Then creates an instance of ‘SendCopied’ class to call ‘ConvertJson(shape)’ method that takes the shape as an argument to return a copy of the shape attributes as string then the frontend will draw the shape with these attributes.

---

UML class diagram:

• link to the uml class diagram

---

Snapshots of our UI and a user guide:

Leads to:

How to use the Application:

1. The left red rectangle specifies the shapes, which the app supports.Click on the shape then click on the drawing field to draw the shape.

For Example:

2. The above red rectangle states all operations can be done through your session in the application in addition to saving your drawing and opening previously saved one:
   • Save icon to save your painting, click on it then it will show you the different forms saving and you can choose any one of them and a pop up menu will appear to you to set the file name and path you want to save in:
   • Open icon for opening loaded file in the saved folders:

This is the saved file:

Loaded file you saved using the same path you used to save:

o Click Undo (Undo: ctrl + z) to back to the previous step/s if you want that:

o Clicking Redo (Redo: ctrl + y) bring you the last change if you clicked undo before:

Clicking undo

Clicking redo

o Clicking on delete element will delete the selected shape/s:

o To delete all the painting:

o Click on Copy will Copy the shape (Copy: ctrl + c) :

o multiple selection:

the user can select more than one shape using the selection rectangle:

3. Then this last rectangle to color any selected shape. Color icon to specify the color that you want, fill to color inside the shape by this color after selecting the shape. And border icon to color the shape border after selecting the shape.

---

Demo Video for using the app:

paint.mp4