Add source

web/task_webui.md

@@ -0,0 +1,165 @@
+1.1 Цель
+
+Разработать web-интерфейс реального времени для отображения CAN-данных, собираемых edge-устройством и сохраняемых в InfluxDB.
+
+Система должна:
+
+отображать данные в реальном времени,
+
+работать на одном хосте с InfluxDB,
+
+использовать Python / Flask,
+
+использовать WebSocket для push-обновлений,
+
+быть расширяемой под future-аналитику.
+
+1.2 Общая архитектура
+Edge (Raspberry Pi)
+   → InfluxDB (write)
+      → Flask Backend (read + stream)
+         → Web UI (WebSocket)
+
+
+InfluxDB — единый источник истины для UI
+(не читаем данные напрямую с Edge).
+
+1.3 Компоненты системы
+1.3.1 Backend (Flask)
+
+Назначение
+
+HTTP API
+
+WebSocket сервер
+
+агрегация данных из InfluxDB
+
+доставка данных в UI
+
+Технологии
+
+Python 3.11+
+
+Flask
+
+Flask-SocketIO (или websockets + ASGI)
+
+InfluxDB Python Client
+
+1.3.2 InfluxDB
+
+Роль
+
+time-series storage
+
+буфер между Edge и UI
+
+исторические запросы
+
+Типы данных
+
+CAN frames (raw)
+
+декодированные сигналы (future)
+
+1.3.3 Frontend (Web UI)
+
+Назначение
+
+визуализация CAN-данных
+
+real-time обновление
+
+базовая аналитика
+
+Минимальный стек
+
+HTML + JS
+
+WebSocket клиент
+
+Chart.js / ECharts (на ваш выбор)
+
+1.4 Функциональные требования (MVP)
+1.4.1 Real-time отображение
+
+Обновление ≤ 500 мс
+
+Push-модель (WebSocket)
+
+Без polling
+
+Отображать:
+
+timestamp
+
+CAN interface (can0 / can1)
+
+CAN ID
+
+DLC
+
+DATA (hex)
+
+frequency (msg/sec)
+
+1.4.2 Исторический просмотр
+
+выбор временного окна:
+
+last 1 min / 5 min / 1 h
+
+график:
+
+частота сообщений
+
+значение байтов (raw)
+
+1.4.3 Фильтрация (UI)
+
+по CAN ID
+
+по интерфейсу
+
+включение / выключение ID
+
+Фильтрация не влияет на ingestion, только на отображение.
+
+1.5 Нефункциональные требования
+Производительность
+
+≥ 5–10k msg/sec без деградации UI
+
+batch-чтение из InfluxDB
+
+Надёжность
+
+UI не зависит от Edge availability
+
+UI не ломается при временном отсутствии новых данных
+
+Безопасность (минимум)
+
+UI доступен только из доверенной сети
+
+без write-доступа к InfluxDB
+
+1.6 Поток данных (важно)
+Write path
+Edge → InfluxDB
+
+Read / Stream path
+InfluxDB → Flask → WebSocket → Browser
+
+
+❗ Flask не принимает CAN напрямую
+❗ WebSocket не ходит в InfluxDB
+
+1.7 Ограничения (осознанные)
+
+Flask — single logical service
+
+Без auth (на MVP)
+
+Без декодирования DBC (пока raw)