41 KiB
41 KiB
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.