feat: Web Client разработка — план и документация

Исправления: - fix: баг volume/level — поддерживаются оба названия параметра - docs: добавлен раздел Web Client в websocket-server-plan.md - docs: создан web-client/README.md с полной документацией Функции Web клиента: - ✅ set_volume (громкость) — работает - ✅ mute/unmute — работает - ⏳ audio-level RMS — требует тестирования - ⏳ LED управление — требует тестирования - ⏳ Transcript — требует тестирования Этапы разработки: - WC-1: Базовая интеграция ✅ - WC-2: Визуализация (в процессе) - WC-3: Дополнительные функции - WC-4: UI/UX
2026-05-21 13:02:35 +03:00
parent 4e5b961f7b
commit c7bf061611
4 changed files with 924 additions and 1 deletions
@@ -964,6 +964,135 @@ sudo systemctl restart wyoming-satelite-vosk.service

 ---

+## Web Client Разработка
+
+### Архитектура Web клиента
+
+```
+┌─────────────────┐         ┌──────────────────────────┐
+│   Web Browser   │◄───────►│   Wyoming Satellite      │
+│   (client.html) │  WS :8675│   (WebSocket Server)    │
+│                 │         │                          │
+│  - UI команды   │         │  - handle_websocket_cmd  │
+│  - RMS визуал.  │         │  - audio-level события   │
+│  - Лог событий  │         │  - forward_event         │
+└─────────────────┘         └──────────────────────────┘
+```
+
+### Функции Web клиента
+
+| Функция | Команда | Статус | Примечание |
+|---------|---------|--------|------------|
+| 🔊 Громкость | `set_volume` | ✅ Работает | Исправлен баг volume/level |
+| 🔇 Mute | `mute` | ✅ Работает | |
+| 🔊 Unmute | `unmute` | ✅ Работает | |
+| 💡 LED яркость | `set_led_brightness` | ⏳ Не тест. | |
+| 🎨 LED цвет | `set_led_color` | ⏳ Не тест. | |
+| 🔔 Play Sound | `play_sound` | ⏳ Не тест. | |
+| 📊 Audio Level | `audio-level` event | ⏳ Не тест. | RMS визуализация |
+| 🎤 Start Listen | `start_listening` | ⏳ Не тест. | |
+| ⏹️ Stop Pipeline | `stop_pipeline` | ⏳ Не тест. | |
+| ⏲️ Stop Timer | `stop_timer` | ⏳ Не тест. | |
+
+### Этапы разработки Web клиента
+
+#### WC-1: Базовая интеграция ✅
+
+- [x] Создан `web-client/client.html`
+- [x] WebSocket подключение
+- [x] Отправка команд (volume, mute, unmute)
+- [x] Приём событий от satellite
+- [x] Исправлен баг volume/level
+
+#### WC-2: Визуализация (в процессе)
+
+- [ ] audio-level RMS визуализация (canvas)
+- [ ] Индикация состояния (listening, speaking, idle)
+- [ ] Анимации для состояний
+- [ ] Orb визуализация
+
+#### WC-3: Дополнительные функции
+
+- [ ] LED управление (цвет, яркость, эффекты)
+- [ ] Громкость с отображением в %
+- [ ] Mute индикация
+- [ ] Transcript отображение
+
+#### WC-4: UI/UX
+
+- [ ] Адаптивный дизайн
+- [ ] Сохранение настроек (localStorage)
+- [ ] История событий с фильтрами
+- [ ] Настройки подключения
+
+### Запуск Web клиента
+
+```bash
+# 1. Запустить satellite с WebSocket
+python3 -m wyoming_satellite \
+  --uri tcp://0.0.0.0:10700 \
+  --websocket-enabled \
+  --websocket-port 8675 \
+  --audio-level-enabled
+
+# 2. Запустить HTTP сервер для клиента
+cd web-client
+python3 -m http.server 8080
+
+# 3. Открыть в браузере
+# http://localhost:8080/client.html
+# или
+# http://192.168.200.111:8080/client.html
+```
+
+### Примеры команд
+
+**Установка громкости:**
+```javascript
+ws.send(JSON.stringify({
+  command: "set_volume",
+  data: { level: 0.75 }  // или volume: 0.75
+}));
+```
+
+**Mute/Unmute:**
+```javascript
+ws.send(JSON.stringify({
+  command: "mute",
+  data: {}
+}));
+
+ws.send(JSON.stringify({
+  command: "unmute",
+  data: {}
+}));
+```
+
+**LED управление:**
+```javascript
+// Яркость
+ws.send(JSON.stringify({
+  command: "set_led_brightness",
+  data: { brightness: 200 }
+}));
+
+// Цвет
+ws.send(JSON.stringify({
+  command: "set_led_color",
+  data: { r: 255, g: 0, b: 0 }
+}));
+```
+
+**Воспроизведение звука:**
+```javascript
+ws.send(JSON.stringify({
+  command: "play_sound",
+  data: { path: "/path/to/sound.wav" }
+}));
+```
+
+---
+
 ## Приложения

 ### A. Пример события в WebSocket клиенте