UI: OCR Result Screen
Relevant source files
The following files were used as context for generating this wiki page:- app/src/main/java/com/musagenius/ocrapp/presentation/ui/ocr/OCRResultScreen.kt
- app/src/main/java/com/musagenius/ocrapp/presentation/viewmodel/OCRViewModel.kt
- app/src/main/java/com/musagenius/ocrapp/MainActivity.kt
- app/src/main/java/com/musagenius/ocrapp/domain/model/OCRResult.kt
- app/src/main/java/com/musagenius/ocrapp/domain/model/ScanResult.kt
- app/src/main/res/values/strings.xml
- TODO.md
The OCR Result Screen is a crucial component in the application's user flow, serving as the destination after an image is captured or selected for text extraction. Built with Jetpack Compose, this screen is responsible for displaying the results of the Optical Character Recognition (OCR) process. It receives an image URI, orchestrates the OCR processing via the OCRViewModel, and presents the extracted text to the user.
The screen is designed to handle various states of the OCR process, including loading, success, and error. It provides users with essential actions such as copying the text, sharing it, and saving the result to the local history database. The UI is structured to provide a clear overview, showing the source image, key processing statistics, and the final text output.
Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/ocr/OCRResultScreen.kt:33-40, app/src/main/java/com/musagenius/ocrapp/MainActivity.kt:61-64, TODO.md:103-116
Architecture and Data Flow
The OCR Result Screen follows the MVVM (Model-View-ViewModel) architecture. The OCRResultScreen composable acts as the View, observing a StateFlow of OCRUiState exposed by the OCRViewModel. User interactions are translated into OCREvents, which are sent to the ViewModel for processing.
The OCRViewModel contains the business logic. Upon receiving an OCREvent.ProcessImage, it invokes the ProcessImageUseCase, which in turn coordinates with the OCRService to perform the text extraction. The result is then used to update the OCRUiState, causing the UI to recompose and reflect the new state.
Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/ocr/OCRResultScreen.kt:36, app/src/main/java/com/musagenius/ocrapp/presentation/viewmodel/OCRViewModel.kt:29-32, 51-56
The diagram below illustrates the data flow when the screen is loaded.
UI States
The OCRResultScreen manages its UI based on the OCRUiState from the OCRViewModel. A when block determines which composable to render based on the current state.
Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/ocr/OCRResultScreen.kt:55-80
The following state diagram shows the possible transitions.
State Composables
| Composable | State | Description |
|---|---|---|
OCRProcessingView | uiState.isProcessing | Displays a CircularProgressIndicator and descriptive text while OCR is in progress. |
OCRErrorView | uiState.error != null | Shows an error icon, a message detailing the failure, and a "Retry" button. |
OCRResultContent | uiState.extractedText.isNotEmpty() | The success view, displaying the image, stats, action buttons, and the extracted text. |
Core Components
The UI is composed of several key composables defined in OCRResultScreen.kt.
OCRResultTopBar
The top app bar provides navigation and primary actions.
- Navigation: An
IconButtonwith a back arrow to navigate to the previous screen. - Save Action: An
IconButtonto save the scan result to history. Its appearance and enabled state are controlled byuiState.isSaved.- When not saved, it shows a
Saveicon. - When saved, it shows a
Checkicon, is disabled, and is tinted with the primary color.
- When not saved, it shows a
Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/ocr/OCRResultScreen.kt:83-125
OCRResultContent
This is the main content area for a successful OCR operation. It contains:
- Image Preview: An
AsyncImageinside aCardto show the original scanned image. - Stats Card: A
Carddisplaying key metrics:- Confidence: The OCR engine's confidence score, formatted as a percentage.
- Time: The total processing time in milliseconds.
- Words: The total word count of the extracted text.
- Action Buttons: A
RowofOutlinedButtons for "Copy" and "Share" actions. - Extracted Text: The recognized text is displayed within a
SelectionContainerto allow users to easily select and copy parts of the text.
Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/ocr/OCRResultScreen.kt:238-349, app/src/main/java/com/musagenius/ocrapp/domain/model/OCRResult.kt:9, 29
User Actions and Events
User actions on the screen are handled either directly in the composable or by dispatching an OCREvent to the OCRViewModel.
The relationship between the View, ViewModel, State, and Events is shown below.
Event Handling
| Event | Trigger | Handler | Description |
|---|---|---|---|
OCREvent.ProcessImage | LaunchedEffect on screen entry | OCRViewModel | Initiates the OCR process for the given imageUri. |
OCREvent.SaveToHistory | "Save" button in OCRResultTopBar | OCRViewModel | Creates a ScanResult object and saves it to the ScanRepository. |
OCREvent.RetryProcessing | "Retry" button in OCRErrorView | OCRViewModel | Re-attempts the OCR process with the same image and language. |
OCREvent.CopyText | "Copy" button in OCRResultContent | OCRResultScreen.kt | Uses a private helper copyToClipboard to copy the full text to the system clipboard. |
OCREvent.ShareText | "Share" button in OCRResultContent | OCRResultScreen.kt | Uses a private helper shareText to open the Android share sheet with the extracted text. |
Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/ocr/OCRResultScreen.kt:38-40, 95, 212, 290, 308, app/src/main/java/com/musagenius/ocrapp/presentation/viewmodel/OCRViewModel.kt:51-66
Save to History Flow
When the user taps the "Save" button, the OCREvent.SaveToHistory event is triggered. The OCRViewModel then constructs a ScanResult object and passes it to the repository for insertion into the database.
This sequence diagram illustrates the "Save to History" process.
Data Models
OCRUiState
This data class, defined in OCRViewModel.kt, represents the complete state of the OCR Result Screen.
| Property | Type | Description |
|---|---|---|
imageUri | Uri? | The URI of the image being processed. |
isProcessing | Boolean | true if the OCR process is active. |
extractedText | String | The resulting text from a successful OCR operation. |
confidenceScore | Float | The confidence level of the OCR result (0.0 to 1.0). |
processingTimeMs | Long | The duration of the OCR process in milliseconds. |
language | String | The language used for OCR. |
error | String? | An error message if the process fails. |
isSaved | Boolean | true if the result has been saved to history. |
ScanResult
When saving to history, the OCRViewModel creates a ScanResult object.
| Property | Type | Description |
|---|---|---|
id | Long | Auto-generated by the database. |
timestamp | Date | The time of the scan. |
imageUri | Uri | The URI of the scanned image. |
extractedText | String | The recognized text. |
language | String | The language used for recognition. |
confidenceScore | Float | The confidence score of the recognition. |
title | String | An auto-generated title from the first line of text. |
Sources: app/src/main/java/com/musagenius/ocrapp/domain/model/ScanResult.kt:9-21, app/src/main/java/com/musagenius/ocrapp/presentation/viewmodel/OCRViewModel.kt:206-219
Conclusion
The OCRResultScreen is a well-structured, state-driven UI component that provides a comprehensive and user-friendly interface for interacting with OCR results. It effectively decouples UI from business logic through the use of OCRViewModel and a clear event/state system. By handling processing, success, and error states gracefully, and by offering essential actions like copy, share, and save, it serves as a robust and complete final step in the app's core OCR workflow.
Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/ocr/OCRResultScreen.kt, app/src/main/java/com/musagenius/ocrapp/presentation/viewmodel/OCRViewModel.kt