MayaTheShy/remoteturtle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add interface overview and layout documentation for Turtle Control Center

Browse Source
This commit is contained in:
MayaTheShy
2026-02-15 23:53:43 -05:00
parent ba91de54d8
commit e19abdb9fa
1 changed files with 156 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
INTERFACE.md Normal file
View File

@@ -0,0 +1,156 @@
# 🎨 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! 🚀