Skip to content

Simple Paint Application Developed using angular framework and spring-boot.

Notifications You must be signed in to change notification settings

mohamedhassan279/Paint

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Paint

Simple Paint Application Developed using angular framework and springboot.

Contents:


Contributers:


image image image

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:

image


Snapshots of our UI and a user guide:

image image

Leads to:

image

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. image

For Example:

image image

  1. 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: image
    • 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: image image
    • Open icon for opening loaded file in the saved folders:

This is the saved file:

image image

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

image

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

image image image

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

image image

Clicking undo

image

Clicking redo

image

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

image image

o To delete all the painting:

image image

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

image image

o multiple selection:

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

image image

  1. 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. image

Demo Video for using the app:

paint.mp4