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
@@ -0,0 +1,180 @@
+# 🛰️ LVA NEXUS — Web Client для Wyoming Satellite
+
+Современный веб-интерфейс для управления Wyoming Satellite через WebSocket.
+
+## 🚀 Быстрый старт
+
+### 1. Запустить satellite с WebSocket
+
+```bash
+cd ~/projects/satellite-dev
+source .venv/bin/activate
+
+python3 -m wyoming_satellite \
+  --uri tcp://0.0.0.0:10700 \
+  --websocket-enabled \
+  --websocket-port 8675 \
+  --audio-level-enabled \
+  --debug
+```
+
+### 2. Запустить HTTP сервер
+
+```bash
+cd ~/projects/satellite-dev/web-client
+python3 -m http.server 8080
+```
+
+### 3. Открыть в браузере
+
+```
+http://localhost:8080/client.html
+или
+http://192.168.200.111:8080/client.html
+```
+
+---
+
+## 📋 Функции
+
+| Функция | Статус | Описание |
+|---------|--------|----------|
+| 🔊 Громкость | ✅ | Установка громкости satellite (0-100%) |
+| 🔇 Mute / 🔊 Unmute | ✅ | Заглушить/включить микрофон |
+| 📊 RMS Audio Level | ✅ | Визуализация громкости в реальном времени |
+| 💡 LED управление | ⏳ | Цвет, яркость, эффекты |
+| 🎤 Start Listening | ⏳ | Запуск прослушивания |
+| ⏹️ Stop Pipeline | ⏳ | Остановка pipeline |
+| ⏲️ Stop Timer | ⏳ | Остановка таймера |
+| 🗣️ Transcript | ⏳ | Отображение распознанного текста |
+
+---
+
+## 🎮 Управление
+
+### Громкость
+
+- **Слайдер** — плавная регулировка 0-100%
+- **Кнопки VOL+ / VOL-** — пошаговое изменение
+- **Mute/Unmute** — быстрое отключение микрофона
+
+### LED управление
+
+```javascript
+// Яркость
+sendCommand('set_led_brightness', { brightness: 200 });
+
+// Цвет (RGB)
+sendCommand('set_led_color', { r: 255, g: 0, b: 0 });
+```
+
+### Аудио визуализация
+
+- **Canvas** — отрисовка аудио уровня в реальном времени
+- **RMS метр** — числовое значение громкости
+- **Орбита** — анимация состояния (idle, listening, speaking)
+
+---
+
+## 🔧 Настройки
+
+### Подключение
+
+При первом запуске введите WebSocket адрес:
+```
+ws://192.168.200.111:8675
+```
+
+### Авто-подключение
+
+- **Auto-reconnect** — автоматическое переподключение при разрыве
+- **Auto-scroll** — автоматическая прокрутка лога событий
+
+---
+
+## 📊 События
+
+Web клиент получает от satellite:
+
+| Событие | Описание |
+|---------|----------|
+| `voice-started` | Пользователь начал говорить |
+| `voice-stopped` | Пользователь перестал говорить |
+| `transcript` | Распознанный текст |
+| `synthesize` | Запрос на синтез речи |
+| `audio-level` | RMS громкость микрофона |
+| `timer-started` | Таймер запущен |
+| `timer-finished` | Таймер завершён |
+| `error` | Ошибка |
+
+---
+
+## 🐛 Известные проблемы
+
+| Проблема | Статус | Решение |
+|----------|--------|---------|
+| Громкость всегда 100% | ✅ Исправлено | Поддерживаются `level` и `volume` |
+| WebSocket отключается | ⏳ В работе | Проверить firewall |
+| RMS не обновляется | ⏳ В работе | Проверить audio-level-enabled |
+
+---
+
+## 🛠️ Разработка
+
+### Структура
+
+```
+web-client/
+├── client.html          # Основной UI
+├── README.md            # Документация
+└── start_server.py      # HTTP сервер (опционально)
+```
+
+### Добавление команд
+
+1. **В satellite.py** — обработчик команды:
+```python
+async def handle_websocket_command(self, command: str, data: dict):
+    if command == "my_command":
+        # обработка
+```
+
+2. **В client.html** — отправка команды:
+```javascript
+sendCommand('my_command', { param: value });
+```
+
+3. **В client.html** — обработка ответа:
+```javascript
+function handleIncomingMessage(ev) {
+    const json = JSON.parse(ev.data);
+    if(json.event === 'my_event') {
+        // обработка
+    }
+}
+```
+
+---
+
+## 📝 Changelog
+
+### 2026-05-21
+
+- ✅ Исправлен баг volume/level
+- ✅ Добавлена поддержка обоих названий параметра
+- ✅ Обновлён план разработки
+
+### 2026-05-20
+
+- ✅ Создан современный UI
+- ✅ WebSocket интеграция
+- ✅ RMS визуализация
+- ✅ Лог событий
+
+---
+
+## 🔗 Связанное
+
+- [WebSocket Server Plan](../docs/development/websocket-server-plan.md)
+- [Wyoming Satellite](../README.md)
+- [MQTT LED Integration](../docs/integration/mqtt-led.md)