# User Interface and Screen Management Specification ## Overview The user interface is built with Avalonia UI and provides a touch-based operator interface for controlling the chocolate tempering machine. This document details the UI architecture, screen navigation, and user interaction patterns. ## UI Architecture ### Screen Hierarchy ``` Application Structure: ┌─────────────────────────────────────────────────────────────┐ │ MainWindow │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Navigation Bar │ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │ │ │Home │ │Recipe│ │Settings│ │Manual│ │Diag │ │Admin│ │Help │ │ │ │ │ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Content Area │ │ │ │ │ │ │ │ [Dynamic Content Views] │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Footer Bar │ │ │ │ ┌─────────┐ ┌─────────────┐ ┌─────────┐ ┌─────────────┐ │ │ │ │ │ Status │ │ Temperature │ │ Errors │ │ Date/Time │ │ │ │ │ │Message │ │ Display │ │ Icons │ │ Display │ │ │ │ │ └─────────┘ └─────────────┘ └─────────┘ └─────────────┘ │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` ### Screen Navigation Flow ``` Navigation State Machine: ┌─────────────┐ │ Home │ │ Screen │ └─────────────┘ │ ┌──────────────────┼──────────────────┐ │ │ │ ▼ ▼ ▼ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Recipe │ │ Settings │ │ Manual │ │ Selection │ │ Screen │ │ Control │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ ▼ │ │ ┌─────────────┐ │ │ │ Recipe │ │ │ │ Editor │ │ │ └─────────────┘ │ │ │ │ ┌──────────────────┼──────────────────┘ │ │ ▼ ▼ ┌─────────────┐ ┌─────────────┐ │ Diagnostics │ │ Admin │ │ Screen │ │ Screen │ └─────────────┘ └─────────────┘ │ │ ▼ ▼ ┌─────────────┐ ┌─────────────┐ │ Advanced │ │ Software │ │ Settings │ │ Config │ └─────────────┘ └─────────────┘ ``` ## Screen Specifications ### 1. Home Screen ``` Home Screen Layout: ┌─────────────────────────────────────────────────────────────┐ │ HOME SCREEN │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ USER SELECTION │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ │ │ OPERATOR │ │ TECHNICIAN│ │ ADMIN │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ [User Icon] │ │ [User Icon] │ │ [User Icon] │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ SYSTEM STATUS │ │ │ │ │ │ │ │ • Machine Status: Ready/Running/Error │ │ │ │ • Last Recipe: [Recipe Name] │ │ │ │ • System Temperature: [Temp]°C │ │ │ │ • Communication: Connected/Disconnected │ │ │ └─────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ Purpose: User authentication and system overview Access: Public (no authentication required) Navigation: Entry point to all other screens ``` ### 2. Settings Screen (Recipe Execution) ``` Settings Screen Layout: ┌─────────────────────────────────────────────────────────────┐ │ SETTINGS SCREEN │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ RECIPE INFORMATION │ │ │ │ Recipe: [Current Recipe Name] │ │ │ │ Heating Goal: XX°C Cooling Goal: XX°C │ │ │ │ Pouring Goal: XX°C │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ TEMPERATURE DISPLAY │ │ │ │ ┌─────────────┐ ┌─────────────┐ │ │ │ │ │ Tank │ │ Fountain │ │ │ │ │ │ XX.X°C │ │ XX.X°C │ │ │ │ │ └─────────────┘ └─────────────┘ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ MOTOR CONTROLS │ │ │ │ ┌─────────────┐ ┌─────────────┐ │ │ │ │ │ Mixer │ │ Fountain │ │ │ │ │ │ [ON /OFF] │ │ [ON /OFF] │ │ │ │ │ └─────────────┘ └─────────────┘ │ │ │ │ │ │ │ │ ┌─────────────┐ ┌─────────────┐ │ │ │ │ │ Vibrator │ │ Pre-Heating │ │ │ │ │ │ [ON /OFF] │ │ [ON /OFF] │ │ │ │ │ └─────────────┘ └─────────────┘ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ RECIPE CONTROL │ │ │ │ ┌─────────────────────────────────────────────────┐ │ │ │ │ │ [START RECIPE] │ │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ Purpose: Recipe execution and real-time control Access: Operator level and above Key Features: - Real-time temperature monitoring - Motor control buttons - Recipe start/stop control - Visual status indicators ``` ### 3. Recipe Selection Screen ``` Recipe Selection Layout: ┌─────────────────────────────────────────────────────────────┐ │ RECIPE SELECTION │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ RECIPE LIST │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────┐ │ │ │ │ │ Recipe Name: MILK CHOCOLATE │ │ │ │ │ │ Heating: 46°C Cooling: 27°C Pouring: 30°C │ │ │ │ │ │ Status: Available [SELECT] [EDIT] │ │ │ │ │ └───────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────┐ │ │ │ │ │ Recipe Name: DARK CHOCOLATE │ │ │ │ │ │ Heating: 50°C Cooling: 29°C Pouring: 32°C │ │ │ │ │ │ Status: Available [SELECT] [EDIT] │ │ │ │ │ └───────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────┐ │ │ │ │ │ Recipe Name: WHITE CHOCOLATE │ │ │ │ │ │ Heating: 45°C Cooling: 26°C Pouring: 29°C │ │ │ │ │ │ Status: Available [SELECT] [EDIT] │ │ │ │ │ └───────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ RECIPE ACTIONS │ │ │ │ ┌─────────────┐ ┌─────────────┐ │ │ │ │ │ CREATE │ │ DELETE │ │ │ │ │ │ NEW RECIPE │ │ RECIPE │ │ │ │ │ └─────────────┘ └─────────────┘ │ │ │ └─────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ Purpose: Recipe management and selection Access: Operator level and above Features: - Recipe list with parameters - Create/Edit/Delete operations - Recipe validation ``` ### 4. Manual Control Screen ``` Manual Control Layout: ┌─────────────────────────────────────────────────────────────┐ │ MANUAL CONTROL │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ MOTOR CONTROLS │ │ │ │ │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ │ │ MIXER │ │ FOUNTAIN │ │ VIBRATOR │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌─────────┐ │ │ ┌─────────┐ │ │ ┌─────────┐ │ │ │ │ │ │ │ ON │ │ │ │ ON │ │ │ │ ON │ │ │ │ │ │ │ └─────────┘ │ │ └─────────┘ │ │ └─────────┘ │ │ │ │ │ │ ┌─────────┐ │ │ ┌─────────┐ │ │ ┌─────────┐ │ │ │ │ │ │ │ OFF │ │ │ │ OFF │ │ │ │ OFF │ │ │ │ │ │ │ └─────────┘ │ │ └─────────┘ │ │ └─────────┘ │ │ │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ HEATER CONTROLS │ │ │ │ │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ │ │MOLD HEATER │ │VIB HEATER │ │ALARM │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌─────────┐ │ │ ┌─────────┐ │ │ ┌─────────┐ │ │ │ │ │ │ │ ON │ │ │ │ ON │ │ │ │ ON │ │ │ │ │ │ │ └─────────┘ │ │ └─────────┘ │ │ └─────────┘ │ │ │ │ │ │ ┌─────────┐ │ │ ┌─────────┐ │ │ ┌─────────┐ │ │ │ │ │ │ │ OFF │ │ │ │ OFF │ │ │ │ OFF │ │ │ │ │ │ │ └─────────┘ │ │ └─────────┘ │ │ └─────────┘ │ │ │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ TEMPERATURE READINGS │ │ │ │ │ │ │ │ Tank: XX.X°C Pump: XX.X°C │ │ │ │ Fountain: XX.X°C Wall: XX.X°C │ │ │ └─────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ Purpose: Direct hardware control without recipes Access: Technician level and above Features: - Individual motor control - Heater control - Real-time temperature display - Safety interlocks ``` ### 5. Diagnostics Screen ``` Diagnostics Layout: ┌─────────────────────────────────────────────────────────────┐ │ DIAGNOSTICS │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ SYSTEM STATUS │ │ │ │ │ │ │ │ Grid Status: [●] Normal [○] Error │ │ │ │ Communication: [●] Connected [○] Timeout │ │ │ │ Motors: [●] Normal [○] Overload │ │ │ │ Temperature: [●] Normal [○] Out of Range │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ POWER MONITORING │ │ │ │ │ │ │ │ L1 Voltage: XXX V L2 Voltage: XXX V │ │ │ │ L3 Voltage: XXX V Frequency: XX.X Hz │ │ │ │ Neutral Current: XX.X A │ │ │ │ Motor 1 Current: XX.X A │ │ │ │ Motor 2 Current: XX.X A │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ I/O STATUS │ │ │ │ │ │ │ │ Digital Inputs: [●][○][●][○][●][○][●][○] │ │ │ │ Motor Outputs: [●][○][●][○][●][○][●][○] │ │ │ │ HV Outputs: [●][○][●][○][●][○][●][○] │ │ │ │ LV Outputs: [●][○][●][○][●][○][●][○] │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ TEMPERATURE SENSORS │ │ │ │ │ │ │ │ T1 (Tank Bottom): XX.X°C Status: [NORMAL] │ │ │ │ T2 (Tank Wall): XX.X°C Status: [NORMAL] │ │ │ │ T3 (Pump): XX.X°C Status: [NORMAL] │ │ │ │ T4 (Fountain): XX.X°C Status: [NORMAL] │ │ │ │ Internal Temp: XX.X°C Heat Sink: XX.X°C │ │ │ └─────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ Purpose: System diagnostics and troubleshooting Access: Technician level and above Features: - Real-time system monitoring - Power quality analysis - I/O status display - Temperature sensor validation ``` ## Visual Feedback System ### Status Indicators ``` Visual Status System: ┌─────────────────────────────────────────────────────────────┐ │ STATUS INDICATORS │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │ │ │ COLORS │ │ ANIMATION │ │ MEANING │ │ │ │ │ │ │ │ │ │ │ │ Green │ │ Solid │ │ Normal/OK │ │ │ │ Red │ │ Solid │ │ Error/Alarm │ │ │ │ Yellow │ │ Solid │ │ Warning │ │ │ │ Blue │ │ Solid │ │ Info/Status │ │ │ │ Gray │ │ Solid │ │ Disabled/Off │ │ │ │ │ │ │ │ │ │ │ │ Any Color │ │ Flashing │ │ Transitioning │ │ │ │ Any Color │ │ Pulsing │ │ User Attention │ │ │ └─────────────┘ └─────────────┘ └─────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` ### Button States ``` Button State Matrix: ┌─────────────────────────────────────────────────────────────┐ │ State │ Background │ Text Color │ Border │ Action │ ├─────────────┼────────────┼────────────┼──────────┼──────────┤ │ Normal │ Gray │ Black │ Gray │ Enabled │ │ Active │ Pink │ White │ Pink │ Enabled │ │ Disabled │ Light Gray │ Dark Gray │ Gray │ Disabled │ │ Error │ Red │ White │ Red │ Disabled │ │ Warning │ Yellow │ Black │ Yellow │ Enabled │ │ Flashing │ Alternating│ Contrasting│ Match BG │ Attention│ └─────────────────────────────────────────────────────────────┘ ``` ## Error Display System ### Error Popup Structure ``` Error Popup Layout: ┌─────────────────────────────────────────────────────────────┐ │ ERROR POPUP │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ ┌─────┐ ┌─────┐ │ │ │ │ │Error│ ERROR NUMBER: 3 │ X │ │ │ │ │ │Icon │ │Close│ │ │ │ │ └─────┘ └─────┘ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ ERROR DETAILS │ │ │ │ │ │ │ │ - Grid VAC High │ │ │ │ - Communication Timeout │ │ │ │ - Motor Overload (Motor 1) │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ ACTIONS │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ │ │ RESET │ │ RETRY │ │ IGNORE │ │ │ │ │ │ ERRORS │ │ CONNECTION │ │ (Warning) │ │ │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` ### Error Classification Display | Error Level | Icon | Color | Sound | Auto-Clear | |-------------|------|-------|-------|------------| | Info | ℹ️ | Blue | None | Yes | | Warning | ⚠️ | Yellow | Beep | Yes | | Error | ❌ | Red | Alarm | No | | Critical | 🚨 | Flashing Red | Continuous | No | ## Touch Interface Specifications ### Touch Gestures ``` Supported Touch Gestures: ┌─────────────────────────────────────────────────────────────┐ │ Gesture │ Action │ Application │ ├─────────────┼─────────────────────┼───────────────────────┤ │ Tap │ Button activation │ All buttons/controls │ │ Long Press │ Context menu │ Configuration items │ │ Swipe Left │ Previous screen │ Screen navigation │ │ Swipe Right │ Next screen │ Screen navigation │ │ Swipe Up │ Scroll up │ Lists and tables │ │ Swipe Down │ Scroll down │ Lists and tables │ │ Pinch │ Reserved │ Future enhancement │ └─────────────────────────────────────────────────────────────┘ ``` ### Touch Response ``` Touch Feedback System: ┌─────────────────────────────────────────────────────────────┐ │ Event │ Visual Feedback │ Timing │ ├───────────────┼─────────────────────┼─────────────────────┤ │ Touch Down │ Button press effect │ Immediate │ │ Touch Hold │ Highlight │ 100ms │ │ Touch Release │ Action execution │ < 50ms │ │ Invalid Touch │ Red flash │ 200ms │ │ Disabled Item │ No response │ N/A │ └─────────────────────────────────────────────────────────────┘ ``` ## Screen Management ### Auto-Dimming System ``` Screen Power Management: ┌─────────────────────────────────────────────────────────────┐ │ ACTIVITY TIMELINE │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │ │ │ Normal │───▶│ Dimmed │───▶│ Off │ │ │ │ Brightness │ │ Brightness │ │ (Standby) │ │ │ │ (100%) │ │ (20%) │ │ (0%) │ │ │ └─────────────┘ └─────────────┘ └─────────────────┘ │ │ │ │ │ │ │ Activity No Activity No Activity │ │ for DimSec for OffSec │ │ (default: 30s) (default: 60s) │ │ │ │ ◄─────────────── Touch Activity Resets ──────────────────▶ │ └─────────────────────────────────────────────────────────────┘ ``` ### Screen Configuration | Parameter | Default | Range | Description | |-----------|---------|-------|-------------| | Brightness | 100% | 10-100% | Normal operating brightness | | Dim Brightness | 20% | 5-50% | Dimmed state brightness | | Dim Timeout | 30s | 10-300s | Time to dim after inactivity | | Off Timeout | 60s | 30-600s | Time to turn off after inactivity | | Touch Sensitivity | High | Low/Med/High | Touch detection threshold | ## Accessibility Features ### Visual Accessibility ``` Accessibility Support: ┌─────────────────────────────────────────────────────────────┐ │ Feature │ Implementation │ ├──────────────────┼─────────────────────────────────────────┤ │ High Contrast │ Alternative color schemes │ │ Large Text │ Scalable font sizes │ │ Color Blind │ Pattern/shape indicators │ │ Low Vision │ High contrast borders │ │ Icon Labels │ Text descriptions for all icons │ │ Status Audio │ Audio feedback for critical events │ └─────────────────────────────────────────────────────────────┘ ``` ### Operational Accessibility ``` Operational Support: ┌─────────────────────────────────────────────────────────────┐ │ Feature │ Description │ ├──────────────────┼─────────────────────────────────────────┤ │ Touch Targets │ Minimum 44px touch targets │ │ Spacing │ Adequate spacing between controls │ │ Feedback │ Clear visual/audio confirmation │ │ Error Messages │ Plain language descriptions │ │ Help System │ Context-sensitive help │ │ Undo/Redo │ Reversible actions where applicable │ └─────────────────────────────────────────────────────────────┘ ``` ## Internationalization Support ### Language Framework ``` Localization Structure: ┌─────────────────────────────────────────────────────────────┐ │ LANGUAGE RESOURCES │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │ │ │ English │ │ Spanish │ │ German │ │ │ │ (Default) │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ • UI Labels │ │ • UI Labels │ │ • UI Labels │ │ │ │ • Messages │ │ • Messages │ │ • Messages │ │ │ │ • Errors │ │ • Errors │ │ • Errors │ │ │ │ • Help Text │ │ • Help Text │ │ • Help Text │ │ │ └─────────────┘ └─────────────┘ └─────────────────────┘ │ │ │ │ │ │ │ └────────────────┼────────────────────┘ │ │ ▼ │ │ ┌─────────────────┐ │ │ │ Language Engine │ │ │ │ (Runtime) │ │ │ └─────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` ### Localization Elements | Element Type | Examples | Localization Method | |-------------|----------|-------------------| | Button Labels | "Start Recipe", "Stop", "Settings" | Resource files | | Error Messages | "Communication timeout", "Temperature high" | Resource files | | Units | "°C", "°F", "seconds", "minutes" | Configuration | | Date/Time Format | "DD/MM/YYYY", "MM/DD/YYYY" | Regional settings | | Number Format | "1,234.56", "1.234,56" | Regional settings | | Currency | "$", "€", "£" | Not applicable | This UI specification provides comprehensive details for implementing a robust, accessible, and user-friendly touch interface for the chocolate tempering machine control system.