COMP30022-Team-029

Project Description

• A program that simplifies the mapping experience of a Text Constructor for C-LARA image books by providing tools inspired by photo editing software, such as: Lasso Tool, Draw, Erase, Undo, Save.

Team Members

Product Owner:

Fernando Teodoro ([email protected])

Scrum Master:

Nicole Penrose ([email protected])

Development Team:

• Fernando Teodoro ([email protected])
• Jahnavi Datla ([email protected])
• Mahamithra Sivagnanam ([email protected])
• Nicole Penrose ([email protected])
• Ranumi Gihansa Wijeyesinghe ([email protected])

Features

• Draw Tool: Allows the user to draw on the image.
  • Pen tool: Allows user to draw continuous strokes on the canvas.
  • Eraser tool: Allows user to erase entire strokes.
  • Undo button: Removes previous action from canvas.
  • Redo button: Restores previously removed action to canvas.
  • Clear all: Clears all annotations from canvas.
• Lasso Tool: Allows the user to select a region of the image by drawing a closed loop around the region.
  • Selection
    • Click on the Image to start the Lasso Selection process
    • Click around the Area you want to Surround, until you reach the starting point
  • Edit
    • Hold the Point (Box) you want to move
    • Drag to desired location
  • Restart
    • Click on the Image outside of the Selected Area to restart the Process

Demo

demo.mp4

Dependencies

Frontend:

• React 18.2
• Axios
• React-lasso-select 1.2.2

Backend:

• Python 3.10
• Django 4.2.4
• Pillow 10.0.0 (pip install Pillow)
• Django Rest Framework 3.14.0 (pip install djangorestframework)
• Django CORS Headers 4.2.0 (pip install django-cors-headers)

Installations

Backend:

1. cd backend
2. python manage.py makemigrations
3. python manage.py migrate

Frontend:

1. cd frontend
2. npm install
3. npm install axios
4. npm install react-lasso-select

Running the Program

First, run the backend in Terminal. Then, run the frontend in a separate Terminal.

Backend:

1. cd backend
2. python manage.py runserver

Frontend:

1. cd frontend
2. npm start

Documentation

Relevant documentation is available in PDF format in /docs.

Artefacts

• Handover Report: Details about integration into C-LARA and potential extensions. Includes details of the current workflow of our tool and relevant features.
• Product Requirements: User stories and requirements
• Architectural Design: Diagrams and design models

Changelog

Sprint 1

• Created Upload webpage with "Upload Image" and "Add Word" functionality [main]
• Created ImageDetail webpage with "Select Image" and "Edit word" functionality [main]
• Created local server for backend [backend-dev]

Sprint 2

• Created basic Mapping Tool webpage interface [frontend-dev]
• Created Database with Post and Word classes [backend-dev]
• Created functions for linking backend and frontend [frontend-backend-tools]

Sprint 3

• Implemented functionality for Pen tool and Erase tool [frontend-dev]
• Implemented functionality for Undo and Redo buttons [frontend-dev]
• Modified Database to be more Modular [backend-dev]
• Fixed CSS issues [frontend-dev]
• Pen tool and Erase tool bugfixes [frontend-dev]
• Undo and Redo button bugfixes [frontend-dev]
• Created Testing functionality for backend, and frontend-backend communication [backend-testing]
• Fixed functions for linking backend and frontend [frontend-backend-tools]
• Linked frontend and backend [frontend-backend-merge]
• Implemented Lasso tool functionality [frontend-backend-merge]
• All changes merged to release branch [sprint-3-release]

Final Release

• Integrated functionality for pen tool and lasso tool [sprint-3-release-pen-and-lasso]
• Fixed bugs relating to eraser and pen stroke rendering [sprint-3-release-pen-and-lasso]
• Updated eraser tool to erase entire strokes instead of points [sprint-3-release-pen-and-lasso]
• Cleaned up code and repository, added comments [sprint-3-release-pen-and-lasso]
• Merged final release and changes onto main branch [main]

Testing

Backend testing was conducted in [database-testing]

• Test Cases in backend/MapTool/tests directory:
  • testModels.py
  • testViews.py

Frontend unit testing was conducted in the Frontend directory with a placeholder Backend Environment:

• Test Cases in frontend/src directory:
  • Upload page unit tests
    • Upload.test.js
    • Proceed.test.js
  • ImageDetailPage unit tests
    • Words.test.js

Testing is still in progress, but is being updated continually in the following Confluence documents:

• Traceability Matrices
• Front-End Testing Strategy
• Back-End Testing Process
• Bugs
• Performance and Stability Test

Acknowledgements

• Language and Reading Assistant (LARA)
• React Lasso Select
• Segment Anything
• ChatGPT-4

License Considerations

• React Lasso Select - (ISC License)
  • Commercial Use
  • Distribution
  • Modification
  • Private Use
  • Liability
  • Warranty