7.7 KiB
7.7 KiB
🎨 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! 🚀