157 lines
7.7 KiB
Markdown
157 lines
7.7 KiB
Markdown
# 🎨 Interface Overview
|
|
|
|
## Web Interface Layout
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ [📊 Split View] [🗺️ Map Only] [🎮 Control Only] [🟢 Connected]│
|
|
├──────────────────┬──────────────────────────────────────────────────┤
|
|
│ │ │
|
|
│ 🐢 Turtle List │ 3D Map View │
|
|
│ ───────────── │ │
|
|
│ │ ┌─────┐ │
|
|
│ ┌────────────┐ │ │ T-1 │ ← Selected Turtle │
|
|
│ │ Turtle 1 │◄─┼─────────└─────┘ │
|
|
│ │ [mining] │ │ │
|
|
│ │ 100,64,200 │ │ │
|
|
│ │ F:5000 I:8 │ │ 🏠 HOME │
|
|
│ └────────────┘ │ │
|
|
│ │ │
|
|
│ ┌────────────┐ │ Path Trail ---- │
|
|
│ │ Turtle 2 │ │ \ │
|
|
│ │ [idle] │ │ ┌─────┐ │
|
|
│ │ 105,65,195 │ │ │ T-2 │ │
|
|
│ │ F:3200 I:3 │ │ └─────┘ │
|
|
│ └────────────┘ │ │
|
|
│ │ │
|
|
│ No turtles... │ Grid Floor (5x5 blocks) │
|
|
│ │ │
|
|
├──────────────────┴──────────────────────────────────────────────────┤
|
|
│ Turtle 1 Control │
|
|
│ ─────────────── │
|
|
│ Status: │
|
|
│ Mode: mining Fuel: 5000 │
|
|
│ Position: X: 100, Y: 64, Z: 200 │
|
|
│ Home: X: 95, Y: 64, Z: 195 │
|
|
│ │
|
|
│ Commands: │
|
|
│ [🔍 Explore] [⛏️ Mine] [🏠 Return Home] [⏹️ Stop] │
|
|
│ │
|
|
│ Manual Control: │
|
|
│ [↑] │
|
|
│ [←] [→] │
|
|
│ [↓] │
|
|
│ [⬆ Up] [⬇ Down] │
|
|
│ │
|
|
│ Inventory: │
|
|
│ coal_ore x32 iron_ore x16 diamond_ore x3 │
|
|
│ cobblestone x64 dirt x12 │
|
|
└──────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
## Color Scheme
|
|
|
|
### Turtle Status Colors
|
|
- 🟢 **Green (#4ade80)**: Mining/Active
|
|
- 🔵 **Blue (#60a5fa)**: Exploring
|
|
- 🟠 **Orange (#f59e0b)**: Returning Home
|
|
- ⚪ **Gray (#9ca3af)**: Idle
|
|
- 🟣 **Purple (#a78bfa)**: Manual Control
|
|
|
|
### UI Colors
|
|
- **Background**: Dark blue (#0a0e1a, #0f172a)
|
|
- **Panels**: Slate (#1e293b)
|
|
- **Borders**: Gray-blue (#334155)
|
|
- **Text**: Light gray (#e2e8f0)
|
|
- **Accents**: Cyan (#60a5fa)
|
|
|
|
## Features Visualization
|
|
|
|
### 3D Map Features
|
|
```
|
|
┌─────────────────────────────┐
|
|
│ Orbital Camera Control │
|
|
│ - Rotate: Left Click+Drag │
|
|
│ - Zoom: Scroll Wheel │
|
|
│ - Pan: Right Click+Drag │
|
|
│ │
|
|
│ Turtle Markers: │
|
|
│ ┌─┐ │
|
|
│ │░│ ← 3D Box │
|
|
│ └─┘ │
|
|
│ ▲ ← Selection Arrow │
|
|
│ ⭕ ← Selection Ring │
|
|
│ T-1 ← ID Label │
|
|
│ │
|
|
│ Path Trails: │
|
|
│ ---- Dashed line to home │
|
|
│ │
|
|
│ Grid: │
|
|
│ □ □ □ 1-block grid │
|
|
│ ▪ ▪ ▪ 5-block sections │
|
|
└─────────────────────────────┘
|
|
```
|
|
|
|
### Control Panel Features
|
|
```
|
|
┌──────────────────────────────┐
|
|
│ Turtle Card (Clickable) │
|
|
├──────────────────────────────┤
|
|
│ Turtle 1 [mining] ● │
|
|
│ 100, 64, 200 │
|
|
│ F: 5000 I: 8 items │
|
|
│ Home: 15 blocks │
|
|
└──────────────────────────────┘
|
|
↓ Click to select
|
|
┌──────────────────────────────┐
|
|
│ Detail View │
|
|
├──────────────────────────────┤
|
|
│ All stats + commands │
|
|
│ Manual control arrows │
|
|
│ Inventory grid │
|
|
└──────────────────────────────┘
|
|
```
|
|
|
|
## Responsive Behavior
|
|
|
|
### View Modes
|
|
|
|
**Split View** (Default)
|
|
- Best for desktop monitors
|
|
- Side-by-side layout
|
|
- Full visibility of both map and controls
|
|
|
|
**Map Only**
|
|
- Fullscreen 3D visualization
|
|
- Great for presentations
|
|
- Multi-turtle overview
|
|
|
|
**Control Only**
|
|
- Detailed turtle management
|
|
- Better for laptops/smaller screens
|
|
- Focus on commands and data
|
|
|
|
## Real-time Updates
|
|
|
|
```
|
|
Turtle moves → Status broadcast → Web Bridge → Server → WebSocket → React
|
|
↓
|
|
Update 3D Map
|
|
Update Stats
|
|
Animate Marker
|
|
```
|
|
|
|
Update frequency: Every 5 seconds or on command execution
|
|
|
|
## Interactive Elements
|
|
|
|
- **Clickable**: Turtle cards, 3D markers, command buttons
|
|
- **Hoverable**: Buttons show hover effects
|
|
- **Animated**: Selected turtle rotates, status dot pulses
|
|
- **Live**: Real-time position tracking on map
|
|
- **Responsive**: View mode switches, panel scrolling
|
|
|
|
---
|
|
|
|
Launch the interface to see it in action! 🚀
|