# Flutter COPILOT Keyboard UI Design

## Overview

This document defines the Flutter UI implementation based on the existing D6 application and the Klavesnice Business Analysis specification.

## Screen Structure

### 1. Main Screen (Basic View)

The main screen consists of three primary areas:

```
+--------------------------------------------------+
|  Connection Status Bar                           |
+--------------------------------------------------+
|                                                  |
|              Video Wall Grid                     |
|        (Physical Monitors with Viewers)          |
|                                                  |
+--------------------------------------------------+
|              Bottom Toolbar                      |
+--------------------------------------------------+
```

### 2. Video Wall Grid

Based on D6 screenshots, the wall is divided into **5 sections**:
- Vrchní část (Top section) - monitors 210-234
- Pravá část (Right section)
- Levá část (Left section)
- Dolní část (Bottom section)
- Střední část (Middle section)

Each section contains:
- Section header with name
- Grid of physical monitors
- Each physical monitor can contain 1-4 viewers (quad view)

#### Monitor Display States

| State | Visual |
|-------|--------|
| Normal | Dark background, white text |
| Selected (touched) | Cyan/blue border (thick) |
| Active Alarm | Red background |
| Alarm + Selected | Red background + cyan border |
| Locked by current user | Lock icon visible |
| Locked by other user | Lock icon + disabled |

#### Viewer Number Display

- Each viewer shows its viewer number (e.g., 210, 211, 212, 213)
- Quad view: 4 viewers in one physical monitor with visible border around physical monitor
- Single view: One viewer fills the physical monitor

### 3. Bottom Toolbar (Button Strip)

Dynamic button strip that changes based on context:

#### Default State (No Selection)
```
[Search] [500] [501] [502] [HOME] [F1] [F2] [F3] [F4] [F5] [F6] [F7]
```

#### Monitor Selected (Camera View)
```
[←] [PREPOS] [PvZ] [ALARM] [LOCK/UNLOCK] [SEARCH]
```

Where:
- **←** Back to default
- **PREPOS** Open preposition list (only for PTZ cameras when unlocked)
- **PvZ** Enter playback mode (only if keyboard has permission)
- **ALARM** Open alarm history list
- **LOCK/UNLOCK** Toggle PTZ lock
- **SEARCH** Open camera search dialog

### 4. Camera Prefix Selection

Three prefix buttons for camera number input:
- **500** - GeViScope cameras (500001-500999)
- **501** - G-CORE cameras (501001-501999)
- **502** - GeViServer cameras (502001-502999)

Selected prefix is highlighted. User then types 3-digit camera number.

### 5. Camera Number Input

```
+----------------------------------+
|  Input Field: [500] + [   ]      |
|  Current: 500201                 |
+----------------------------------+
|  [1] [2] [3]                     |
|  [4] [5] [6]                     |
|  [7] [8] [9]                     |
|  [C] [0] [OK]                    |
+----------------------------------+
```

- Number input via touchscreen or physical USB keyboard
- C = Clear, OK = Confirm CrossSwitch
- ESC/Back = Cancel

---

## Secondary Screens

### 6. Search Screen

Opened via Search button when monitor is selected:

```
+--------------------------------------------------+
|  Search Camera                           [X]     |
+--------------------------------------------------+
|  Camera Number: [________]                       |
|                                                  |
|  [Keyboard toggle]                               |
+--------------------------------------------------+
|  Search Results:                                 |
|  [500001 - Jindřišská, tramvaj]                 |
|  [500002 - Václavské náměstí]                   |
|  ...                                             |
+--------------------------------------------------+
|  [←] [OK]                                        |
+--------------------------------------------------+
```

### 7. Preposition List Screen

```
+--------------------------------------------------+
|  PREPOZICE - Kamera 500005               [X]     |
+--------------------------------------------------+
|  [2]  Jindřišská, tramvajový ostrůvek           |
|  [10] Jindřišská, křižovatka            [●]     |
|  [15] U Bulhara směr centrum                     |
|  ...                                             |
+--------------------------------------------------+
|  [←] [+] [🗑] [✓]                                |
+--------------------------------------------------+
```

- Blue highlight on selected preposition
- [+] Add new preposition (disabled if AppServer unavailable)
- [🗑] Delete preposition (disabled if editable=0 or positions 1-9)
- [✓] Confirm/go to selected preposition

### 8. Add Preposition Screen

```
+--------------------------------------------------+
|  Nová prepozice - Kamera 500005          [X]     |
+--------------------------------------------------+
|  Číslo prepozice: [__]  (10-99 only)            |
|                                                  |
|  Název prepozice: [________________]             |
|                                                  |
|  [Keyboard]                                      |
+--------------------------------------------------+
|  [←] [ULOŽIT]                                    |
+--------------------------------------------------+
```

Save button disabled until both fields filled.

### 9. Playback Mode (PvZ) Screen

Overlay controls on main view:

```
+--------------------------------------------------+
|  PvZ: Kamera 500005                              |
|  Čas: 2026-02-03 14:35:22                        |
+--------------------------------------------------+
|  [|◄] [◄◄] [◄] [⏸] [►] [►►] [►|]  [LIVE]       |
+--------------------------------------------------+
|  Speed: [-7 ... -1] [0] [+1 ... +7]             |
+--------------------------------------------------+
```

Jog-shuttle speed table:
- Position -7 to -1: Reverse (slow to fast)
- Position 0: Pause
- Position +1 to +7: Forward (slow to fast)

### 10. Alarm List Screen

```
+--------------------------------------------------+
|  Alarmy - Kamera 500005                  [X]     |
+--------------------------------------------------+
|  Od: [2026-02-01] [📅]  Do: [2026-02-03] [📅]   |
+--------------------------------------------------+
|  Začátek          | Konec                        |
|  02-03 14:30:15   | 02-03 14:32:45      [●]     |
|  02-03 12:15:30   | 02-03 12:18:22              |
|  02-02 23:45:00   | 02-02 23:47:15              |
+--------------------------------------------------+
|  [←] [LIVE] [⏩] [▶⏩] [◄◄] [⏸]                  |
+--------------------------------------------------+
```

- [⏩] Jump to timestamp (paused)
- [▶⏩] Jump to timestamp and play
- [◄◄] Reverse playback
- [⏸] Stop playback
- [LIVE] Return to live stream

### 11. Function Button Config (F1-F7, HOME)

Each function button triggers predefined wall configuration:
- Stored on Application Server
- Can set camera or sequence per monitor
- Before CrossSwitch, check if sequence is running and stop it

### 12. Service Menu

Activated by holding Backspace for 3 seconds:

```
+----------------------------------+
|     Servisní Menu           [X]  |
+----------------------------------+
|  (1) Restartovat aplikaci        |
|  (2) Restartovat klávesnici      |
|  (3) Vypnout klávesnici          |
+----------------------------------+
```

---

## Component Specifications

### Color Palette

| Element | Color | Hex |
|---------|-------|-----|
| Background | Dark blue-gray | #1a2332 |
| Monitor normal | Dark gray | #2d3748 |
| Monitor selected | Cyan border | #00d4ff |
| Monitor alarm | Red | #ff4444 |
| Button active | Blue | #3182ce |
| Button disabled | Gray | #4a5568 |
| Text primary | White | #ffffff |
| Text secondary | Gray | #a0aec0 |
| Preposition highlight | Blue | #2b6cb0 |

### Typography

- Monitor numbers: Monospace, bold, 16-20px
- Section headers: Sans-serif, semibold, 14px
- Button labels: Sans-serif, medium, 12-14px
- Input fields: Monospace, regular, 16px

### Touch Targets

- Minimum touch target: 44x44 pixels
- Monitor tiles: Variable (based on grid)
- Toolbar buttons: 48px height
- List items: 48px height minimum

---

## State Management (BLoC)

### Required BLoCs

1. **ConnectionBloc** - Server connection states
2. **WallBloc** - Video wall state, monitor selection
3. **AlarmBloc** - Active alarms, alarm history
4. **CameraBloc** - Camera input, CrossSwitch operations
5. **PTZBloc** - Lock state, telemetry controls
6. **PlaybackBloc** - PvZ mode, jog-shuttle
7. **PrepositionBloc** - Preposition list, add/delete
8. **FunctionButtonBloc** - Function button configurations
9. **SequenceBloc** - Sequence state per monitor

### Events & States Example (WallBloc)

```dart
// Events
abstract class WallEvent {}
class LoadWallConfig extends WallEvent {}
class SelectMonitor extends WallEvent { final int viewerId; }
class DeselectMonitor extends WallEvent {}
class CrossSwitchCamera extends WallEvent { final int cameraId; final int viewerId; }

// States
abstract class WallState {}
class WallLoading extends WallState {}
class WallLoaded extends WallState {
  final List<WallSection> sections;
  final int? selectedViewerId;
  final int? selectedPhysicalMonitorId;
}
```

---

## Implementation Priority

### Phase 1: Core UI (MVP)
1. Main screen layout with wall grid
2. Monitor selection (touch)
3. Camera number input (prefix + digits)
4. CrossSwitch command
5. Connection status bar

### Phase 2: Alarms & Status
1. Alarm state display (red monitors)
2. Alarm blocking (prevent CrossSwitch on active alarm)
3. Monitor lock indicators

### Phase 3: PTZ & Playback
1. PTZ lock/unlock
2. Telemetry controls (pan/tilt/zoom)
3. Playback mode (PvZ)
4. Jog-shuttle controls

### Phase 4: Advanced Features
1. Preposition management
2. Alarm history list
3. Function buttons (F1-F7, HOME)
4. Sequences
5. Search functionality

### Phase 5: Polish
1. Service menu
2. CAMEA integration
3. Autonomous mode fallbacks
4. Error handling dialogs

---

## Autonomous Mode Behavior

When Application Server is unavailable:

| Feature | Available | Notes |
|---------|-----------|-------|
| CrossSwitch | ✓ | Direct to bridge |
| PTZ Lock | ✓ | Local lock only |
| CAMEA Reserve | ✓ | Direct to CAMEA |
| Preposition List | ✓ | Cached config |
| Add Preposition | ✗ | Requires AppServer |
| Delete Preposition | ✗ | Requires AppServer |
| Sequences | ✗ | Run by AppServer |
| Function Buttons | ✓ | Cached config |
| Alarm Management | ✗ | Run by GeViSoft |

---

## File Structure

```
lib/
├── presentation/
│   ├── screens/
│   │   ├── main_screen.dart
│   │   ├── search_screen.dart
│   │   ├── preposition_screen.dart
│   │   ├── alarm_list_screen.dart
│   │   ├── playback_overlay.dart
│   │   └── service_menu_dialog.dart
│   ├── widgets/
│   │   ├── wall_grid/
│   │   │   ├── wall_grid.dart
│   │   │   ├── wall_section.dart
│   │   │   ├── physical_monitor.dart
│   │   │   └── viewer_tile.dart
│   │   ├── toolbar/
│   │   │   ├── bottom_toolbar.dart
│   │   │   ├── prefix_buttons.dart
│   │   │   ├── function_buttons.dart
│   │   │   └── action_buttons.dart
│   │   ├── input/
│   │   │   ├── camera_input.dart
│   │   │   ├── numeric_keypad.dart
│   │   │   └── datetime_picker.dart
│   │   └── common/
│   │       ├── connection_status_bar.dart
│   │       └── confirmation_dialog.dart
│   └── blocs/
│       ├── wall/
│       ├── alarm/
│       ├── camera/
│       ├── ptz/
│       ├── playback/
│       ├── preposition/
│       └── function_button/
```