5.5 KiB

Raw Blame History

UI Modernization Tasks - Capture Mode

Overview

This document outlines the planned modernization of the capture mode UI, transforming it from a basic floating button system to a modern, feature-rich interface.

Current State

Basic floating "orb" (actually just a styled Button)
Simple expandable menu with 5 options
Basic visual state feedback
MVC architecture with proper event handling

Phase 1: Core Modernization ⚡

1.1 Material 3 Floating Action Button

Priority: HIGH
Status: PENDING

Convert the current basic floating orb to a proper Material 3 FAB:

Use Material 3 FAB component with proper elevation and shadows
Smooth expand/collapse animations using AnimatedVisibility
Material 3 color theming and dynamic colors
Proper ripple effects and touch feedback
Size variants (mini FAB for menu items)

Technical Details:

Replace Button with FloatingActionButton in Jetpack Compose
Implement AnimatedVisibility for menu expansion
Use Material3 theme colors and elevation tokens
Add haptic feedback for interactions

1.2 Visual Design Modernization

Priority: MEDIUM
Status: PENDING

Glass-morphism Effects: Semi-transparent backgrounds with blur
Smooth Animations: Choreographed transitions between states
Modern Icons: Vector icons with proper scaling
Color Schemes: Material You dynamic theming
Typography: Material 3 typography scale

Technical Details:

Implement blur effects using Modifier.blur()
Custom animation specs for fluid motion
Vector Drawable icons with animated state changes
Dynamic color extraction from wallpaper (Android 12+)

Phase 2: Enhanced Functionality 📊

2.1 Detection Results Overlay

Priority: MEDIUM
Status: PENDING

Real-time overlay showing detection results:

Bounding boxes with confidence scores
Class labels with color coding
Performance metrics (FPS, inference time)
Detection count by category

Technical Details:

Custom Canvas drawing for overlays
WindowManager overlay with proper Z-ordering
Real-time data binding from detection controller
Optimized rendering to avoid performance impact

2.2 Live Preview & Status

Priority: MEDIUM
Status: PENDING

Mini preview window showing current screen region
Real-time detection status indicators
Processing queue visualization
Error state handling with retry options

2.3 Settings Panel Integration

Priority: MEDIUM
Status: PENDING

Built-in settings accessible from floating UI:

Detection sensitivity sliders
Class filter toggles with visual preview
Coordinate transformation mode selection
Debug options panel

Phase 3: Advanced UX Patterns 🎯

3.1 Gesture-Based Interactions

Priority: MEDIUM
Status: PENDING

Long Press: Context menu with advanced options
Swipe Gestures: Quick filter switching
Drag: Repositioning FAB location
Double Tap: Quick detection trigger

Technical Details:

Custom gesture detection using Modifier.pointerInput()
Haptic feedback patterns for different gestures
Visual feedback during gesture recognition
Gesture customization settings

3.2 Contextual Intelligence

Priority: MEDIUM
Status: PENDING

Smart behavior based on current context:

Auto-hide during active detection
Context-aware menu options
Smart positioning to avoid UI occlusion
Adaptive timeout based on usage patterns

3.3 Accessibility Enhancements

Priority: HIGH
Status: PENDING

Screen reader compatibility
Voice commands integration
High contrast mode support
Large text scaling support
Keyboard navigation

Phase 4: Advanced Features 🚀

4.1 Detection Analytics Dashboard

Priority: LOW
Status: PENDING

Mini-map showing detection regions
Historical detection data
Performance trend graphs
Export detection logs

4.2 Smart Automation

Priority: LOW
Status: PENDING

Auto-detection based on screen content changes
Smart filtering based on user behavior
Predictive UI adaptation
Background processing optimization

4.3 Integration Features

Priority: LOW
Status: PENDING

Screenshot annotation and sharing
Detection result export (JSON, CSV)
Cloud sync for settings
Integration with external Pokemon databases

Technical Architecture

Component Structure

FloatingActionButtonUI (Compose)
├── FABCore (Material 3 FAB)
├── ExpandableMenu (AnimatedVisibility)
├── DetectionOverlay (Canvas)
├── SettingsPanel (BottomSheet/Drawer)
└── StatusIndicators (Badges/Chips)

Performance Considerations

Lazy composition for menu items
Efficient recomposition boundaries
Background thread processing
Memory management for overlays
Battery optimization strategies

Implementation Timeline

Sprint 1 (Week 1-2): Material 3 FAB conversion Sprint 2 (Week 3-4): Visual design modernization
Sprint 3 (Week 5-6): Detection results overlay Sprint 4 (Week 7-8): Enhanced UX patterns Sprint 5+ (Future): Advanced features as needed

Success Metrics

User Experience: Smooth 60fps animations, <100ms interaction response
Functionality: All current features preserved + new capabilities
Performance: No degradation in detection accuracy or speed
Accessibility: WCAG 2.1 AA compliance
Code Quality: Maintainable Compose architecture

Note: This is a living document that will be updated as features are implemented and new requirements emerge.