# Daystar Robot SDK Demo GUI

这是一个基于Web的机器人控制界面，可以通过浏览器实际调用Daystar机器人SDK接口。

## 功能特点

### 🤖 机器人控制功能
- **连接管理**: 连接/断开机器人GRPC和WebSocket服务
- **系统信息**: 获取MC版本、机器人名称等基础信息
- **电池监控**: 实时获取电池电量、电流、功率和充电状态
- **姿态控制**: 控制机器人站立/趴下
- **驱动控制**: 启用/禁用机器人驱动器
- **灯光控制**: 设置机器人灯光样式（关闭/常亮/呼吸灯/闪烁）

### 🧭 导航控制功能
- **位置管理**: 添加、删除、获取导航位置点
- **导航控制**: 导航到指定位置、取消导航、暂停/继续导航
- **状态监控**: 实时显示导航状态和位置信息
- **事件监听**: 实时显示导航事件日志，包含完整的JSON数据
- **快速操作**: 一键设置当前位置为目标、紧急停止等

### 📹 云台控制功能
- **方向控制**: 上下左右移动云台
- **精确控制**: 通过滑块精确控制Pan/Tilt/Zoom速度
- **预设位置**: 快速移动到预设位置（居中、左右巡视、上下监控）
- **停止控制**: 紧急停止所有云台运动

### 🎮 双模式设计
- **真实API模式**: 实际调用机器人SDK接口
- **模拟器模式**: 用于演示和测试，无需真实机器人

## 系统架构

```
┌─────────────────┐    HTTP API    ┌─────────────────┐    GRPC/WebSocket    ┌─────────────────┐
│   Web Browser   │ ──────────────► │  Python Flask   │ ──────────────────► │  Robot Hardware │
│   (demo_gui.    │                 │   API Server    │                     │                 │
│    html)        │ ◄────────────── │ (demo_api_      │ ◄────────────────── │  (IP:50051/     │
└─────────────────┘    JSON         │  server.py)     │    SDK Response     │   3232)         │
                                     └─────────────────┘                     └─────────────────┘
```

## 快速开始

### 1. 自动启动（推荐）

```bash
cd python/self_test
python run_demo_gui.py
```

这个脚本会：
- 自动安装必要的依赖
- 启动API服务器（端口5000）
- 在浏览器中打开Web界面
- 显示详细的使用说明

### 2. 手动启动

#### 安装依赖
```bash
pip install flask flask-cors
```

#### 启动API服务器
```bash
cd python/self_test
python demo_api_server.py
```

#### 打开Web界面
在浏览器中打开 `demo_gui.html` 文件

## 使用说明

### 连接机器人

1. **真实API模式**：
   - 取消勾选"模拟器模式"
   - 输入机器人IP地址（如：192.168.144.103）
   - 输入GRPC端口（默认：50051）
   - 点击"连接"按钮

2. **模拟器模式**：
   - 勾选"模拟器模式"
   - 直接点击"连接"按钮进行模拟连接

### 控制机器人

1. **基础控制**：
   - 系统信息：获取版本、名称等信息
   - 电池监控：查看电量和充电状态
   - 姿态控制：让机器人站立或趴下
   - 灯光控制：设置不同的灯光模式

2. **导航控制**：
   - 位置管理：添加当前位置、删除位置点
   - 导航执行：选择目标位置进行导航
   - 状态监控：查看实时导航状态和事件
   - 快速操作：一键设置目标、紧急停止等

3. **云台控制**：
   - 方向控制：使用方向按钮移动云台
   - 精确控制：通过滑块设置精确的移动速度
   - 预设位置：快速移动到预设位置
   - 停止控制：立即停止所有运动

### 查看日志和事件

界面提供多种信息显示：
- **操作日志**: 右侧日志区域显示API调用结果和状态信息
- **导航事件**: 专门的导航事件日志，显示完整的JSON数据
- **实时状态**: 导航状态、位置信息的实时更新
- **错误信息**: 详细的错误提示和异常信息

## API接口说明

### 连接管理
- `POST /api/connect` - 连接机器人
- `POST /api/disconnect` - 断开连接
- `GET /api/status` - 获取连接状态

### 机器人信息
- `GET /api/robot/version` - 获取MC版本
- `GET /api/robot/name` - 获取机器人名称
- `GET /api/robot/battery` - 获取电池信息

### 机器人控制
- `POST /api/robot/posture` - 控制站立/趴下
- `POST /api/robot/driver` - 启用/禁用驱动器
- `POST /api/robot/light` - 设置灯光样式

### 导航控制
- `GET /api/nav/locations` - 获取所有位置点
- `POST /api/nav/location/add` - 添加位置点
- `DELETE /api/nav/location/delete` - 删除位置点
- `POST /api/nav/goto` - 导航到指定位置
- `POST /api/nav/cancel` - 取消导航
- `POST /api/nav/pause` - 暂停导航
- `POST /api/nav/resume` - 继续导航
- `GET /api/nav/status` - 获取导航状态
- `GET /api/nav/events` - 获取导航事件
- `POST /api/nav/events/clear` - 清空导航事件

### 云台控制
- `POST /api/ptz/position` - 设置云台位置
- `POST /api/ptz/move` - 控制云台移动
- `POST /api/ptz/light` - 控制云台灯光

## 故障排除

### 常见问题

1. **无法连接机器人**
   - 检查机器人IP地址和端口是否正确
   - 确认机器人服务是否正常运行
   - 检查网络连接是否正常

2. **API服务器启动失败**
   - 检查是否安装了flask和flask-cors
   - 确认5000端口没有被其他程序占用
   - 查看终端错误信息

3. **导航功能无响应**
   - 确认WebSocket连接是否成功
   - 检查导航服务是否已启动
   - 尝试清空导航事件后重新操作

4. **云台控制无响应**
   - 确认WebSocket连接是否成功
   - 检查云台是否已正确初始化
   - 尝试停止所有运动后重新控制

5. **导航事件显示问题**
   - 检查浏览器是否支持WebSocket
   - 确认导航事件监听是否已启用
   - 尝试刷新页面重新连接

### 调试技巧

1. **查看浏览器控制台**：
   - 按F12打开开发者工具
   - 查看Console标签的错误信息
   - 查看Network标签的API请求状态

2. **查看API服务器日志**：
   - 终端中会显示所有API请求和响应
   - 查看具体的错误信息和堆栈跟踪

3. **使用模拟器模式**：
   - 先在模拟器模式下测试界面功能
   - 确认界面逻辑正常后再连接真实机器人

4. **导航事件调试**：
   - 查看导航事件日志的完整JSON数据
   - 使用导航监控功能实时查看状态
   - 检查WebSocket连接状态和消息

## 界面功能详解

### 🔄 导航事件监控
- **实时事件**: 自动刷新显示最新的导航事件
- **完整数据**: 显示格式化的JSON数据，包含所有字段
- **事件分类**: 区分导航结果、反馈和错误信息
- **状态监控**: 实时显示当前导航状态和位置

### 📊 数据显示优化
- **自动换行**: 长文本和JSON数据自动换行显示
- **格式化显示**: JSON数据使用等宽字体和缩进格式
- **颜色区分**: 不同类型的事件使用不同的颜色标识
- **滚动查看**: 日志区域支持滚动查看历史记录

## 扩展开发

### 添加新功能

1. **在API服务器中添加新接口**：
   ```python
   @app.route('/api/new/function', methods=['POST'])
   def new_function():
       # 实现新功能
       return jsonify({'success': True})
   ```

2. **在HTML中添加对应的UI**：
   ```html
   <button class="btn" onclick="callNewFunction()">新功能</button>
   ```

3. **在JavaScript中添加调用函数**：
   ```javascript
   async function callNewFunction() {
       const response = await fetch(`${API_BASE_URL}/new/function`, {
           method: 'POST',
           headers: {'Content-Type': 'application/json'},
           body: JSON.stringify({})
       });
       const result = await response.json();
       addLog(result.message);
   }
   ```

### 导航功能扩展

1. **添加新的导航命令**：
   ```python
   @app.route('/api/nav/custom', methods=['POST'])
   def custom_navigation():
       # 实现自定义导航逻辑
       return jsonify({'success': True, 'message': '自定义导航启动'})
   ```

2. **扩展WebSocket事件处理**：
   ```python
   def on_custom_navigation_event(data):
       """处理自定义导航事件"""
       navigation_events.append({
           'type': 'custom',
           'message': f"自定义导航: {data}",
           'timestamp': time.time(),
           'data': data
       })
   ```

### 自定义样式

修改HTML中的CSS样式来调整界面外观：
- 颜色方案
- 布局设计
- 按钮样式
- 字体大小

## 技术栈

- **前端**: HTML5 + CSS3 + JavaScript (原生)
- **后端**: Python Flask + Flask-CORS
- **通信**: HTTP REST API + WebSocket
- **机器人SDK**: daystar-robot-sdk-python

## 许可证

本项目遵循与Daystar Robot SDK相同的许可证。
