Skip to content

Commit

Permalink
Merge pull request #186 from Capstone-Projects-2024-Spring/update-col…
Browse files Browse the repository at this point in the history 
…oring-documentation
  • Loading branch information
@elijahbigham
elijahbigham authored May 11, 2024
2 parents 22c5b28 + 1d1206a commit b643999
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 302 deletions.
229 changes: 57 additions & 172 deletions documentation/docs/requirements/use-case-descriptions.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,40 @@ sequenceDiagram
deactivate React UI
```

## Use Case 2: User calibrates color profile

## Use Case 2: User uploads a document
As a new user, I want to personalize my reading experience by setting my preferred color calibration for letters and numbers.
1. User is directed to create their color profile
2. User selects letter-color associations using a color picker
3. User selects number-color associations using a color picker
4. Sends grapheme-color associations to backend
5. Directs user to the home page.

```mermaid
sequenceDiagram
participant User
participant ReactUI
participant Laravel Backend
activate ReactUI
loop for each letter and numeral
User->>ReactUI: pick color with color picker
ReactUI-->>User: shows color picker for next grapheme
end
ReactUI->>Laravel Backend: POST request with grapheme-color associations
activate Laravel Backend
Laravel Backend->>Laravel Backend: create new Color Profile
Laravel Backend-->>ReactUI: 'created' response
deactivate Laravel Backend
ReactUI-->>User: returns user to document library
deactivate ReactUI
```


## Use Case 3: User uploads a document

As a user, I want to upload a PDF so that I can be able to access it within the app.
1. From the document library page, clicks the '+' button
Expand Down Expand Up @@ -93,189 +125,42 @@ sequenceDiagram
end
```

## Use Case 3: User reads offline
## Use Case 4: Reader Opens a Document
As a user, I want to read an uploaded document
1. From the document library page, I click a document icon
2. UI displays the document in my colors

1. On the device they want to use offline, the user selects the 'Download' option for a document while still online.
2. Later, the user opens the app offline and opens the downloaded document
3. The user clicks on the navigation icon and selects the latest bookmark, taking them to the correct page.
4. The user reads and creates a note.
5. The user corrects a word color.
6. Eventually, the user finishes for now, bookmarks their page, and closes the application.
7. When the device is connected to internet, the bookmark, color alteration, and note are synced in the background.

```mermaid
sequenceDiagram
participant User
participant React UI
participant Database
participant User
participant ReactUI
participant Laravel Backend
activate React UI
Note over User: User wants to download a PDF
participant Coloring Flask
User->>React UI: clicks the download button
React UI->>Database: gets the file location from the database
React UI-->>User: displays option on where to download document
User->>React UI: clicks a button to navigate to their bookmark
React UI->>Database: gets the page number that was bookmarked
React UI-->>User: opens the document page that was bookmarked
User->>React UI: clicks on the add note button
React UI-->>Laravel Backend: Laravel gets ready to scan user input
Laravel Backend-->>User: User enters the note
User->>React UI: clicks button to bookmark their page
React UI->>Database: adds the page to the database
activate ReactUI
deactivate React UI
```



## User Case 4: User alters a word color
1. While reading, the user comes across a word color they wish to change.
2. User clicks on the word.
3. Options to 'save' or 'change' come up.
4. User clicks 'change'.
5. The selected word is shown large on the screen.
6. The user clicks on a letter, and then uses a slider to adjust the selected letter's weight.
7. The user confirms the color change.
8. The word color is saved to the user's color profile.
9. The colors of the currently-loaded text are re-calculated and re-rendered as described on the algorithms page.

```mermaid
sequenceDiagram
participant User
participant React UI
participant Text Handler
participant Color Profile Handler
participant Color Profile
activate React UI
Note over User: User wants to change a word color
User->>ReactUI: click document icon
ReactUI->>Laravel Backend: request with document id
activate Laravel Backend
Laravel Backend->>Laravel Backend: get color profile
Laravel Backend->>Laravel Backend: get document text
User->>React UI: clicks word on screen
React UI->>React UI: alerts word option menu handler
React UI-->>User: displays option to save or change color
User->>React UI: clicks 'change'
React UI->>React UI: invokes color-changing screen
React UI-->>User: shows selected word
User->>React UI: toggles letter weight with slider
React UI-->>User: displays word in changed color
User->>React UI: confirms color choice
React UI->>Color Profile Handler: word & color value
activate Color Profile Handler
Color Profile Handler->>Color Profile: create new word-color pair
activate Color Profile
Color Profile-->>Color Profile Handler: Created
deactivate Color Profile
Color Profile Handler-->>React UI: Success
deactivate Color Profile Handler
React UI->>Text Handler: reload text
activate Text Handler
Note over Text Handler: color process sequence diagram in Algorithms page
Text Handler-->>React UI: return formatted text
deactivate Text Handler
React UI->>User: renders colored text
Laravel Backend->>Coloring Flask: request with text and color profile
activate Coloring Flask
note right of Coloring Flask: see Coloring Component page
Coloring Flask-->>Laravel Backend: 'OK" response with Colored Document JSON
deactivate Coloring Flask
deactivate React UI
```


Laravel Backend-->>ReactUI: 'OK' response with Colored Document JSON
deactivate Laravel Backend
ReactUI->>ReactUI: loads page with colored text
deactivate ReactUI
## User Case 5: User deletes document from device while offline
1. document library page, selects a document and clicks the option to delete from device
2. A pop-up message warns the user that if the document is deleted while disconnected from the internet, any annotations created since the last sync will be lost and gives the user the option to cancel.
3. The user confirms that they want to delete.
4. The document and associated annotations are deleted from the device.
```mermaid
sequenceDiagram
participant User
participant ReactUI
participant Laravel Backend
participant Database
activate ReactUI
Note over User: User is running app without internet connection
loop Deleting Documents
User->>ReactUI: selects delete option on document
ReactUI-->>User: Warning about risk of deleting while offline, request confirmation
User->>ReactUI: User confirms they want to delete
ReactUI->>ReactUI: Deletes document from internal storage
ReactUI-->>User: Render screen
end
Note over ReactUI: Internet connection reestablished
ReactUI->>Laravel Backend: Notify backend of changes
activate Laravel Backend
Laravel Backend->>Database: Notify database of changes
activate Database
Database-->>Laravel Backend: acknowlege changes
deactivate Database
Laravel Backend-->> ReactUI: 200 OK
deactivate Laravel Backend
ReactUI-->>User: Render screen
deactivate ReactUI
```

## Use Case 6: User provides feedback to the developers
1. User clicks on the 'give feedback' link in the app main menu.
2. A text box is provided.
3. The user types the feedback and hits 'submit'.
4. The user is sent back to the app home page.

```mermaid
sequenceDiagram
participant User
participant React UI
participant Laravel Backend
participant Web Server

activate React UI
User->>React UI: clicks 'give feedback'
React UI-->>User: displays feedback text box
User->>React UI: types message & presses send
React UI->>Laravel Backend: send given text as feedback
activate Laravel Backend
Laravel Backend->>Web Server: POST text to feedback
activate Web Server
Web Server->>Web Server: creates a feedback entry
Web Server-->>Laravel Backend: 201 Created
deactivate Web Server
Laravel Backend-->>React UI: successful
deactivate Laravel Backend
React UI-->>User: feedback sent!
deactivate React UI
```
## Use Case 7: User calibrates color profile

As a new user, I want to personalize my reading experience by setting my preferred color calibration for letters and numbers.
1. User is directed to create their color profile
2. User selects letter-color associations using a color picker
3. User selects number-color associations using a color picker
4. User selects punctuation-color associations using a color picker
5. Requests that the user confirms their associations
6. User picks between a series of binary options to determine letter weight for the color algorithm.
7. Sample passage is provided for user to adjust calibration settings
8. Request user to confirm their calibration and hit "Done"
9. Directs user to the home page.
130 changes: 0 additions & 130 deletions documentation/docs/system-architecture/algorithms.md
View file

This file was deleted.

Loading

0 comments on commit b643999

Please sign in to comment.