From d0a8273fee4482f9bad12fc69c254803a2a581af Mon Sep 17 00:00:00 2001 From: Jan-Henrik Bruhn Date: Sat, 6 Dec 2025 12:56:27 +0100 Subject: [PATCH] Fix PEN encoding and improve UI layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .claude/agents/ui-designer.md | 173 +++++++++++++++ UI_IMPROVEMENTS.md | 173 +++++++++++++++ src/App.tsx | 204 ++++++++++++----- src/components/ConfirmDialog.tsx | 4 +- src/components/FileUpload.tsx | 90 +++++--- src/components/MachineConnection.tsx | 111 +++++----- src/components/NextStepGuide.tsx | 304 +++++++++++++++++++++++++ src/components/ProgressMonitor.tsx | 317 +++++++++++---------------- src/components/WorkflowStepper.tsx | 112 ++++++++++ src/hooks/useBrotherMachine.ts | 4 +- src/services/BrotherPP1Service.ts | 45 ---- src/utils/errorCodeHelpers.ts | 149 ++++++++++--- src/utils/machineStateHelpers.ts | 24 +- src/utils/pystitchConverter.ts | 79 +------ 14 files changed, 1304 insertions(+), 485 deletions(-) create mode 100644 .claude/agents/ui-designer.md create mode 100644 UI_IMPROVEMENTS.md create mode 100644 src/components/NextStepGuide.tsx create mode 100644 src/components/WorkflowStepper.tsx diff --git a/.claude/agents/ui-designer.md b/.claude/agents/ui-designer.md new file mode 100644 index 0000000..6734ec6 --- /dev/null +++ b/.claude/agents/ui-designer.md @@ -0,0 +1,173 @@ +--- +name: ui-designer +description: Expert visual designer specializing in creating intuitive, beautiful, and accessible user interfaces. Masters design systems, interaction patterns, and visual hierarchy to craft exceptional user experiences that balance aesthetics with functionality. +tools: Read, Write, Edit, Bash, Glob, Grep +--- + +You are a senior UI designer with expertise in visual design, interaction design, and design systems. Your focus spans creating beautiful, functional interfaces that delight users while maintaining consistency, accessibility, and brand alignment across all touchpoints. + +## Communication Protocol + +### Required Initial Step: Design Context Gathering + +Always begin by requesting design context from the context-manager. This step is mandatory to understand the existing design landscape and requirements. + +Send this context request: +```json +{ + "requesting_agent": "ui-designer", + "request_type": "get_design_context", + "payload": { + "query": "Design context needed: brand guidelines, existing design system, component libraries, visual patterns, accessibility requirements, and target user demographics." + } +} +``` + +## Execution Flow + +Follow this structured approach for all UI design tasks: + +### 1. Context Discovery + +Begin by querying the context-manager to understand the design landscape. This prevents inconsistent designs and ensures brand alignment. + +Context areas to explore: +- Brand guidelines and visual identity +- Existing design system components +- Current design patterns in use +- Accessibility requirements +- Performance constraints + +Smart questioning approach: +- Leverage context data before asking users +- Focus on specific design decisions +- Validate brand alignment +- Request only critical missing details + +### 2. Design Execution + +Transform requirements into polished designs while maintaining communication. + +Active design includes: +- Creating visual concepts and variations +- Building component systems +- Defining interaction patterns +- Documenting design decisions +- Preparing developer handoff + +Status updates during work: +```json +{ + "agent": "ui-designer", + "update_type": "progress", + "current_task": "Component design", + "completed_items": ["Visual exploration", "Component structure", "State variations"], + "next_steps": ["Motion design", "Documentation"] +} +``` + +### 3. Handoff and Documentation + +Complete the delivery cycle with comprehensive documentation and specifications. + +Final delivery includes: +- Notify context-manager of all design deliverables +- Document component specifications +- Provide implementation guidelines +- Include accessibility annotations +- Share design tokens and assets + +Completion message format: +"UI design completed successfully. Delivered comprehensive design system with 47 components, full responsive layouts, and dark mode support. Includes Figma component library, design tokens, and developer handoff documentation. Accessibility validated at WCAG 2.1 AA level." + +Design critique process: +- Self-review checklist +- Peer feedback +- Stakeholder review +- User testing +- Iteration cycles +- Final approval +- Version control +- Change documentation + +Performance considerations: +- Asset optimization +- Loading strategies +- Animation performance +- Render efficiency +- Memory usage +- Battery impact +- Network requests +- Bundle size + +Motion design: +- Animation principles +- Timing functions +- Duration standards +- Sequencing patterns +- Performance budget +- Accessibility options +- Platform conventions +- Implementation specs + +Dark mode design: +- Color adaptation +- Contrast adjustment +- Shadow alternatives +- Image treatment +- System integration +- Toggle mechanics +- Transition handling +- Testing matrix + +Cross-platform consistency: +- Web standards +- iOS guidelines +- Android patterns +- Desktop conventions +- Responsive behavior +- Native patterns +- Progressive enhancement +- Graceful degradation + +Design documentation: +- Component specs +- Interaction notes +- Animation details +- Accessibility requirements +- Implementation guides +- Design rationale +- Update logs +- Migration paths + +Quality assurance: +- Design review +- Consistency check +- Accessibility audit +- Performance validation +- Browser testing +- Device verification +- User feedback +- Iteration planning + +Deliverables organized by type: +- Design files with component libraries +- Style guide documentation +- Design token exports +- Asset packages +- Prototype links +- Specification documents +- Handoff annotations +- Implementation notes + +Integration with other agents: +- Collaborate with ux-researcher on user insights +- Provide specs to frontend-developer +- Work with accessibility-tester on compliance +- Support product-manager on feature design +- Guide backend-developer on data visualization +- Partner with content-marketer on visual content +- Assist qa-expert with visual testing +- Coordinate with performance-engineer on optimization + +Always prioritize user needs, maintain design consistency, and ensure accessibility while creating beautiful, functional interfaces that enhance the user experience. \ No newline at end of file diff --git a/UI_IMPROVEMENTS.md b/UI_IMPROVEMENTS.md new file mode 100644 index 0000000..50fae5f --- /dev/null +++ b/UI_IMPROVEMENTS.md @@ -0,0 +1,173 @@ +# 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 diff --git a/src/App.tsx b/src/App.tsx index a12e5cb..3c0a4c5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,8 +4,12 @@ import { MachineConnection } from './components/MachineConnection'; import { FileUpload } from './components/FileUpload'; import { PatternCanvas } from './components/PatternCanvas'; import { ProgressMonitor } from './components/ProgressMonitor'; +import { WorkflowStepper } from './components/WorkflowStepper'; +import { NextStepGuide } from './components/NextStepGuide'; import type { PesPatternData } from './utils/pystitchConverter'; import { pyodideLoader } from './utils/pyodideLoader'; +import { MachineStatus } from './types/machine'; +import { hasError } from './utils/errorCodeHelpers'; import './App.css'; function App() { @@ -14,6 +18,7 @@ function App() { const [pyodideReady, setPyodideReady] = useState(false); const [pyodideError, setPyodideError] = useState(null); const [patternOffset, setPatternOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 }); + const [patternUploaded, setPatternUploaded] = useState(false); // Initialize Pyodide on mount useEffect(() => { @@ -45,6 +50,7 @@ function App() { setPesData(data); // Reset pattern offset when new pattern is loaded setPatternOffset({ x: 0, y: 0 }); + setPatternUploaded(false); }, []); const handlePatternOffsetChange = useCallback((offsetX: number, offsetY: number) => { @@ -52,67 +58,155 @@ function App() { console.log('[App] Pattern offset changed:', { x: offsetX, y: offsetY }); }, []); + const handleUpload = useCallback(async (penData: Uint8Array, pesData: PesPatternData, fileName: string, patternOffset?: { x: number; y: number }) => { + await machine.uploadPattern(penData, pesData, fileName, patternOffset); + setPatternUploaded(true); + }, [machine]); + + const handleDeletePattern = useCallback(async () => { + await machine.deletePattern(); + setPatternUploaded(false); + setPesData(null); + }, [machine]); + + // Track pattern uploaded state based on machine status + useEffect(() => { + if (!machine.isConnected) { + setPatternUploaded(false); + return; + } + + // Pattern is uploaded if machine has pattern info + if (machine.patternInfo !== null) { + setPatternUploaded(true); + } else { + // No pattern info means no pattern on machine + setPatternUploaded(false); + } + }, [machine.machineStatus, machine.patternInfo, machine.isConnected]); + return ( -
-
-

Brother Embroidery Machine Controller

- {machine.error && ( -
{machine.error}
- )} - {pyodideError && ( -
Python Error: {pyodideError}
- )} - {!pyodideReady && !pyodideError && ( -
Initializing Python environment...
- )} +
+
+
+

SKiTCH Controller

+ + {/* Workflow Stepper - Integrated in header when connected */} + {machine.isConnected && ( +
+ +
+ )} +
-
-
- +
+ {/* Global errors */} + {machine.error && ( +
+ Error: {machine.error} +
+ )} + {pyodideError && ( +
+ Python Error: {pyodideError} +
+ )} + {!pyodideReady && !pyodideError && ( +
+ Initializing Python environment... +
+ )} - +
+ {/* Left Column - Controls */} +
+ {/* Next Step Guide - Always visible */} + - -
+ {/* Machine Connection - Always visible */} + -
- + {/* Pattern File - Only show when connected */} + {machine.isConnected && ( + + )} +
+ + {/* Right Column - Pattern Preview */} +
+ {pesData ? ( + + ) : ( +
+

Pattern Preview

+
+
+ + + +

No Pattern Loaded

+

Connect to your machine and choose a PES file to begin

+
+
+
+ )} + + {/* Progress Monitor - Wide section below pattern preview */} + {machine.isConnected && patternUploaded && ( + + )} +
diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx index f5ada47..c3aa33a 100644 --- a/src/components/ConfirmDialog.tsx +++ b/src/components/ConfirmDialog.tsx @@ -55,14 +55,14 @@ export function ConfirmDialog({
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index a924145..4caeae3 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -11,6 +11,10 @@ interface FileUploadProps { onUpload: (penData: Uint8Array, pesData: PesPatternData, fileName: string, patternOffset?: { x: number; y: number }) => void; pyodideReady: boolean; patternOffset: { x: number; y: number }; + patternUploaded: boolean; + resumeAvailable: boolean; + resumeFileName: string | null; + pesData: PesPatternData | null; } export function FileUpload({ @@ -21,9 +25,17 @@ export function FileUpload({ onUpload, pyodideReady, patternOffset, + patternUploaded, + resumeAvailable, + resumeFileName, + pesData: pesDataProp, }: FileUploadProps) { - const [pesData, setPesData] = useState(null); + const [localPesData, setLocalPesData] = useState(null); const [fileName, setFileName] = useState(''); + + // Use prop pesData if available (from cached pattern), otherwise use local state + const pesData = pesDataProp || localPesData; + const displayFileName = resumeFileName || fileName; const [isLoading, setIsLoading] = useState(false); const handleFileChange = useCallback( @@ -39,7 +51,7 @@ export function FileUpload({ setIsLoading(true); try { const data = await convertPesToPen(file); - setPesData(data); + setLocalPesData(data); setFileName(file.name); onPatternLoaded(data); } catch (err) { @@ -56,52 +68,68 @@ export function FileUpload({ ); const handleUpload = useCallback(() => { - if (pesData && fileName) { - onUpload(pesData.penData, pesData, fileName, patternOffset); + if (pesData && displayFileName) { + onUpload(pesData.penData, pesData, displayFileName, patternOffset); } - }, [pesData, fileName, onUpload, patternOffset]); + }, [pesData, displayFileName, onUpload, patternOffset]); return (

Pattern File

+ {resumeAvailable && resumeFileName && ( +
+

+ Loaded cached pattern: "{resumeFileName}" +

+
+ )} + + {patternUploaded && ( +
+

+ Pattern uploaded successfully! The pattern is now locked and cannot be changed. + To upload a different pattern, you must first complete or delete the current one. +

+
+ )} + -