mirror of
https://github.com/jhbruhn/respira.git
synced 2026-01-27 10:23:41 +00:00
Jan-Henrik Bruhn
d0a8273fee
Major fixes: - Fix PEN data encoding to properly mark color changes and end markers - COLOR_END (0x03) for intermediate color blocks - DATA_END (0x05) for the final stitch only - Machine now correctly reads total stitch count across all color blocks - Reset uploadProgress when pattern is deleted to re-enable upload button - Allow pattern deletion during WAITING states - Allow pattern upload in COMPLETE states - Fix pattern state tracking to reset when patternInfo is null UI improvements: - Integrate workflow stepper into compact header - Change app title to "SKiTCH Controller" - Reduce header size from ~200px to ~70px - Make Sewing Progress section more compact with two-column layout - Replace emojis with Heroicons throughout - Reorganize action buttons with better visual hierarchy - Add cursor-pointer to all buttons for better UX - Fix cached pattern not showing info in Pattern File box - Remove duplicate status messages (keep only state visual indicator) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
173 lines
5.6 KiB
Markdown
173 lines
5.6 KiB
Markdown
# UI/UX Improvements for Brother Embroidery Machine Controller
|
|
|
|
## Overview
|
|
This document outlines the UI/UX improvements made to enhance usability for non-technical users.
|
|
|
|
## Key Improvements
|
|
|
|
### 1. Workflow Stepper Component
|
|
**File:** `src/components/WorkflowStepper.tsx`
|
|
|
|
A visual progress indicator showing all 7 steps of the embroidery workflow:
|
|
1. Connect to Machine
|
|
2. Load Pattern
|
|
3. Upload Pattern
|
|
4. Mask Trace
|
|
5. Start Sewing
|
|
6. Monitor Progress
|
|
7. Complete
|
|
|
|
**Features:**
|
|
- Clear visual indication of current step (highlighted in blue with ring)
|
|
- Completed steps marked with green checkmarks
|
|
- Future steps shown in gray
|
|
- Progress bar connecting all steps
|
|
- Step descriptions for context
|
|
|
|
### 2. Next Step Guide Component
|
|
**File:** `src/components/NextStepGuide.tsx`
|
|
|
|
Context-sensitive guidance that shows users exactly what to do next:
|
|
|
|
**Features:**
|
|
- Clear instruction cards with icons
|
|
- Step-by-step bullet points
|
|
- Color-coded by urgency:
|
|
- Blue: Informational/next action
|
|
- Yellow: Waiting for user/machine action
|
|
- Green: Success/ready states
|
|
- Red: Errors
|
|
- Tailored messages for each machine state
|
|
- Non-technical language
|
|
|
|
### 3. Pattern Upload Lock
|
|
**Modified:** `src/components/FileUpload.tsx`
|
|
|
|
Prevents users from accidentally changing the pattern after upload:
|
|
|
|
**Features:**
|
|
- Pattern file selection disabled after successful upload
|
|
- Clear notification explaining pattern is locked
|
|
- Users must complete or delete current pattern before uploading new one
|
|
- Prevents confusion and potential errors
|
|
|
|
### 4. Simplified Information Display
|
|
|
|
**Modified Components:**
|
|
- `MachineConnection.tsx`: Reduced from 5 details to 2 essential ones
|
|
- `FileUpload.tsx`: Added filename, reformatted with better visual hierarchy
|
|
- `ProgressMonitor.tsx`: Simplified time display, removed technical coordinates
|
|
- All components use consistent card-style layouts with gray backgrounds
|
|
|
|
**Changes:**
|
|
- Removed technical details (MAC address, serial number, raw coordinates)
|
|
- Added thousand separators for numbers (e.g., "12,345 stitches")
|
|
- Changed time format from "5:30" to "5 min 30 sec" for clarity
|
|
- Larger progress percentage display (2xl font)
|
|
- Better visual grouping of related information
|
|
|
|
### 5. Contextual UI Visibility
|
|
|
|
**Modified:** `src/App.tsx`
|
|
|
|
Sections now show/hide based on workflow state:
|
|
|
|
**Visibility Rules:**
|
|
- **Workflow Stepper**: Only visible when connected
|
|
- **Next Step Guide**: Always visible, content changes based on state
|
|
- **Machine Connection**: Always visible
|
|
- **Pattern File**: Only visible when connected
|
|
- **Sewing Progress**: Only visible when pattern is uploaded
|
|
- **Pattern Preview**: Shows placeholder when no pattern loaded
|
|
|
|
### 6. Enhanced Visual Design
|
|
|
|
**Changes:**
|
|
- New gradient blue header with tagline
|
|
- Gray background for better card contrast
|
|
- Consistent rounded corners and shadows
|
|
- Better spacing and padding
|
|
- Color-coded status indicators throughout
|
|
- Improved typography hierarchy
|
|
|
|
### 7. Better Error Handling
|
|
|
|
**Features:**
|
|
- Errors displayed prominently at top of page
|
|
- Clear error messages with left border highlighting
|
|
- Error guidance in Next Step Guide
|
|
- Distinct error states in workflow
|
|
|
|
## User Experience Flow
|
|
|
|
### Before Improvements:
|
|
1. All panels visible at once
|
|
2. No clear indication of what to do next
|
|
3. Technical information overwhelming
|
|
4. Could change pattern after upload
|
|
5. No visual workflow guidance
|
|
|
|
### After Improvements:
|
|
1. Clear step-by-step progression shown at top
|
|
2. Next Step Guide tells users exactly what to do
|
|
3. Only relevant sections visible for current step
|
|
4. Pattern locked after upload (prevents mistakes)
|
|
5. Simple, non-technical language throughout
|
|
6. Visual feedback at every step
|
|
|
|
## Technical Implementation
|
|
|
|
### New Files Created:
|
|
- `src/components/WorkflowStepper.tsx`
|
|
- `src/components/NextStepGuide.tsx`
|
|
|
|
### Modified Files:
|
|
- `src/App.tsx` - Main layout and state management
|
|
- `src/components/FileUpload.tsx` - Added pattern lock
|
|
- `src/components/MachineConnection.tsx` - Simplified display
|
|
- `src/components/ProgressMonitor.tsx` - Improved readability
|
|
- `src/utils/errorCodeHelpers.ts` - Fixed TypeScript compatibility
|
|
|
|
### State Management:
|
|
- Added `patternUploaded` state to track upload status
|
|
- Pattern lock prevents re-upload without delete
|
|
- Automatic state detection from machine status
|
|
- Proper cleanup on disconnect/delete
|
|
|
|
## Design Principles Applied
|
|
|
|
1. **Progressive Disclosure**: Show only what's needed for current step
|
|
2. **Clarity Over Completeness**: Hide technical details, show user-friendly info
|
|
3. **Visual Hierarchy**: Use size, color, and spacing to guide attention
|
|
4. **Feedback**: Always show current state and next action
|
|
5. **Error Prevention**: Lock pattern after upload, confirm destructive actions
|
|
6. **Consistency**: Unified visual language across all components
|
|
|
|
## Accessibility Considerations
|
|
|
|
- Clear visual indicators with icons
|
|
- Color not the only differentiator (icons + text)
|
|
- Large touch targets for buttons
|
|
- Readable font sizes
|
|
- Semantic HTML structure
|
|
- Clear labels and descriptions
|
|
|
|
## Testing Recommendations
|
|
|
|
1. Test complete workflow from connect to complete
|
|
2. Verify pattern cannot be changed after upload
|
|
3. Check all machine states show correct guidance
|
|
4. Test error scenarios display properly
|
|
5. Verify responsiveness on different screen sizes
|
|
6. Test with actual embroidery machine if possible
|
|
|
|
## Future Enhancement Opportunities
|
|
|
|
1. Add estimated time remaining during sewing
|
|
2. Add pattern preview thumbnails in stepper
|
|
3. Add sound notifications for state changes
|
|
4. Add pattern history/favorites
|
|
5. Add tutorial mode for first-time users
|
|
6. Add keyboard shortcuts for power users
|
|
7. Add offline mode indicators
|
|
8. Add pattern size validation warnings
|