From d4261d76d8437f98effba3e855ee91f0f62aca56 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Sat, 7 Feb 2026 23:44:29 +0300 Subject: [PATCH] Add WLED health monitoring, calibration test mode, and UI improvements - Add background health checks (GET /json/info) with configurable interval per device - Auto-detect LED count from WLED device on add (remove led_count from create API) - Add calibration test mode: toggle edges on/off with colored LEDs via PUT endpoint - Show WLED firmware version badge and LED count badge on device cards - Add modal dirty tracking with discard confirmation on close/backdrop click - Fix layout jump when modals open by compensating for scrollbar width - Add state_check_interval to settings API and UI Co-Authored-By: Claude Opus 4.6 --- server/src/wled_controller/api/routes.py | 135 +++--- server/src/wled_controller/api/schemas.py | 34 +- .../wled_controller/core/processor_manager.py | 234 ++++++++++- server/src/wled_controller/main.py | 3 + server/src/wled_controller/static/app.js | 397 ++++++++++++++---- server/src/wled_controller/static/index.html | 196 +++------ .../wled_controller/static/locales/en.json | 25 +- .../wled_controller/static/locales/ru.json | 25 +- server/src/wled_controller/static/style.css | 306 +++++++++++++- .../wled_controller/storage/device_store.py | 7 +- 10 files changed, 1047 insertions(+), 315 deletions(-) diff --git a/server/src/wled_controller/api/routes.py b/server/src/wled_controller/api/routes.py index c602183..d95e985 100644 --- a/server/src/wled_controller/api/routes.py +++ b/server/src/wled_controller/api/routes.py @@ -4,6 +4,7 @@ import sys from datetime import datetime from typing import List +import httpx from fastapi import APIRouter, HTTPException, Depends from wled_controller import __version__ @@ -19,6 +20,8 @@ from wled_controller.api.schemas import ( DeviceListResponse, ProcessingSettings as ProcessingSettingsSchema, Calibration as CalibrationSchema, + CalibrationTestModeRequest, + CalibrationTestModeResponse, ProcessingState, MetricsResponse, ) @@ -147,11 +150,44 @@ async def create_device( try: logger.info(f"Creating device: {device_data.name}") - # Create device in storage + # Validate WLED device is reachable before adding + device_url = device_data.url.rstrip("/") + try: + async with httpx.AsyncClient(timeout=5) as client: + response = await client.get(f"{device_url}/json/info") + response.raise_for_status() + wled_info = response.json() + wled_led_count = wled_info.get("leds", {}).get("count") + if not wled_led_count or wled_led_count < 1: + raise HTTPException( + status_code=422, + detail=f"WLED device at {device_url} reported invalid LED count: {wled_led_count}" + ) + logger.info( + f"WLED device reachable: {wled_info.get('name', 'Unknown')} " + f"v{wled_info.get('ver', '?')} ({wled_led_count} LEDs)" + ) + except httpx.ConnectError: + raise HTTPException( + status_code=422, + detail=f"Cannot reach WLED device at {device_url}. Check the URL and ensure the device is powered on." + ) + except httpx.TimeoutException: + raise HTTPException( + status_code=422, + detail=f"Connection to {device_url} timed out. Check network connectivity." + ) + except Exception as e: + raise HTTPException( + status_code=422, + detail=f"Failed to connect to WLED device at {device_url}: {e}" + ) + + # Create device in storage (LED count auto-detected from WLED) device = store.create_device( name=device_data.name, url=device_data.url, - led_count=device_data.led_count, + led_count=wled_led_count, ) # Add to processor manager @@ -175,6 +211,7 @@ async def create_device( fps=device.settings.fps, border_width=device.settings.border_width, brightness=device.settings.brightness, + state_check_interval=device.settings.state_check_interval, ), calibration=CalibrationSchema(**calibration_to_dict(device.calibration)), created_at=device.created_at, @@ -207,6 +244,8 @@ async def list_devices( display_index=device.settings.display_index, fps=device.settings.fps, border_width=device.settings.border_width, + brightness=device.settings.brightness, + state_check_interval=device.settings.state_check_interval, ), calibration=CalibrationSchema(**calibration_to_dict(device.calibration)), created_at=device.created_at, @@ -248,6 +287,8 @@ async def get_device( display_index=device.settings.display_index, fps=device.settings.fps, border_width=device.settings.border_width, + brightness=device.settings.brightness, + state_check_interval=device.settings.state_check_interval, ), calibration=CalibrationSchema(**calibration_to_dict(device.calibration)), created_at=device.created_at, @@ -284,6 +325,7 @@ async def update_device( fps=device.settings.fps, border_width=device.settings.border_width, brightness=device.settings.brightness, + state_check_interval=device.settings.state_check_interval, ), calibration=CalibrationSchema(**calibration_to_dict(device.calibration)), created_at=device.created_at, @@ -409,6 +451,7 @@ async def get_settings( fps=device.settings.fps, border_width=device.settings.border_width, brightness=device.settings.brightness, + state_check_interval=device.settings.state_check_interval, ) @@ -430,6 +473,7 @@ async def update_settings( brightness=settings.color_correction.brightness if settings.color_correction else 1.0, gamma=settings.color_correction.gamma if settings.color_correction else 2.2, saturation=settings.color_correction.saturation if settings.color_correction else 1.0, + state_check_interval=settings.state_check_interval, ) # Update in storage @@ -446,6 +490,8 @@ async def update_settings( display_index=device.settings.display_index, fps=device.settings.fps, border_width=device.settings.border_width, + brightness=device.settings.brightness, + state_check_interval=device.settings.state_check_interval, ) except ValueError as e: @@ -504,71 +550,62 @@ async def update_calibration( raise HTTPException(status_code=500, detail=str(e)) -@router.post("/api/v1/devices/{device_id}/calibration/test", tags=["Calibration"]) -async def test_calibration( +@router.put( + "/api/v1/devices/{device_id}/calibration/test", + response_model=CalibrationTestModeResponse, + tags=["Calibration"], +) +async def set_calibration_test_mode( device_id: str, + body: CalibrationTestModeRequest, _auth: AuthRequired, - edge: str = "top", - color: List[int] = [255, 0, 0], store: DeviceStore = Depends(get_device_store), + manager: ProcessorManager = Depends(get_processor_manager), ): - """Test calibration by lighting up specific edge. + """Toggle calibration test mode for specific edges. - Useful for verifying LED positions match screen edges. + Send edges with colors to light them up, or empty edges dict to exit test mode. + While test mode is active, screen capture processing is paused. """ try: - # Get device device = store.get_device(device_id) if not device: raise HTTPException(status_code=404, detail=f"Device {device_id} not found") - # Find the segment for this edge - segment = None - for seg in device.calibration.segments: - if seg.edge == edge: - segment = seg - break + # Validate edge names and colors + valid_edges = {"top", "right", "bottom", "left"} + for edge_name, color in body.edges.items(): + if edge_name not in valid_edges: + raise HTTPException( + status_code=400, + detail=f"Invalid edge '{edge_name}'. Must be one of: {', '.join(valid_edges)}" + ) + if len(color) != 3 or not all(0 <= c <= 255 for c in color): + raise HTTPException( + status_code=400, + detail=f"Invalid color for edge '{edge_name}'. Must be [R, G, B] with values 0-255." + ) - if not segment: - raise HTTPException(status_code=400, detail=f"No LEDs configured for {edge} edge") + await manager.set_test_mode(device_id, body.edges) - # Create pixel array - all black except for the test edge - pixels = [(0, 0, 0)] * device.led_count + active_edges = list(body.edges.keys()) + logger.info( + f"Test mode {'activated' if active_edges else 'deactivated'} " + f"for device {device_id}: {active_edges}" + ) - # Light up the test edge - r, g, b = color if len(color) == 3 else [255, 0, 0] - for i in range(segment.led_start, segment.led_start + segment.led_count): - if i < device.led_count: - pixels[i] = (r, g, b) - - # Send to WLED - from wled_controller.core.wled_client import WLEDClient - import asyncio - - async with WLEDClient(device.url) as wled: - # Light up the edge - await wled.send_pixels(pixels) - - # Wait 2 seconds - await asyncio.sleep(2) - - # Turn off - pixels_off = [(0, 0, 0)] * device.led_count - await wled.send_pixels(pixels_off) - - logger.info(f"Calibration test completed for edge '{edge}' on device {device_id}") - - return { - "status": "test_completed", - "device_id": device_id, - "edge": edge, - "led_count": segment.led_count, - } + return CalibrationTestModeResponse( + test_mode=len(active_edges) > 0, + active_edges=active_edges, + device_id=device_id, + ) except HTTPException: raise + except ValueError as e: + raise HTTPException(status_code=404, detail=str(e)) except Exception as e: - logger.error(f"Failed to test calibration: {e}") + logger.error(f"Failed to set test mode: {e}") raise HTTPException(status_code=500, detail=str(e)) diff --git a/server/src/wled_controller/api/schemas.py b/server/src/wled_controller/api/schemas.py index 7643d6f..f032f42 100644 --- a/server/src/wled_controller/api/schemas.py +++ b/server/src/wled_controller/api/schemas.py @@ -5,6 +5,8 @@ from typing import Dict, List, Literal, Optional from pydantic import BaseModel, Field, HttpUrl +from wled_controller.core.processor_manager import DEFAULT_STATE_CHECK_INTERVAL + # Health and Version Schemas @@ -53,7 +55,6 @@ class DeviceCreate(BaseModel): name: str = Field(description="Device name", min_length=1, max_length=100) url: str = Field(description="WLED device URL (e.g., http://192.168.1.100)") - led_count: int = Field(description="Total number of LEDs", gt=0, le=10000) class DeviceUpdate(BaseModel): @@ -61,7 +62,6 @@ class DeviceUpdate(BaseModel): name: Optional[str] = Field(None, description="Device name", min_length=1, max_length=100) url: Optional[str] = Field(None, description="WLED device URL") - led_count: Optional[int] = Field(None, description="Total number of LEDs", gt=0, le=10000) enabled: Optional[bool] = Field(None, description="Whether device is enabled") @@ -80,6 +80,10 @@ class ProcessingSettings(BaseModel): fps: int = Field(default=30, description="Target frames per second", ge=1, le=60) border_width: int = Field(default=10, description="Border width in pixels", ge=1, le=100) brightness: float = Field(default=1.0, description="Global brightness (0.0-1.0)", ge=0.0, le=1.0) + state_check_interval: int = Field( + default=DEFAULT_STATE_CHECK_INTERVAL, ge=5, le=600, + description="Seconds between WLED health checks" + ) color_correction: Optional[ColorCorrection] = Field( default_factory=ColorCorrection, description="Color correction settings" @@ -118,6 +122,25 @@ class Calibration(BaseModel): ) +class CalibrationTestModeRequest(BaseModel): + """Request to set calibration test mode with multiple edges.""" + + edges: Dict[str, List[int]] = Field( + default_factory=dict, + description="Map of active edge names to RGB colors. " + "E.g. {'top': [255, 0, 0], 'left': [255, 255, 0]}. " + "Empty dict = exit test mode." + ) + + +class CalibrationTestModeResponse(BaseModel): + """Response for calibration test mode.""" + + test_mode: bool = Field(description="Whether test mode is active") + active_edges: List[str] = Field(default_factory=list, description="Currently lit edges") + device_id: str = Field(description="Device ID") + + class DeviceResponse(BaseModel): """Device information response.""" @@ -154,6 +177,13 @@ class ProcessingState(BaseModel): display_index: int = Field(description="Current display index") last_update: Optional[datetime] = Field(None, description="Last successful update") errors: List[str] = Field(default_factory=list, description="Recent errors") + wled_online: bool = Field(default=False, description="Whether WLED device is reachable") + wled_latency_ms: Optional[float] = Field(None, description="WLED health check latency in ms") + wled_name: Optional[str] = Field(None, description="WLED device name") + wled_version: Optional[str] = Field(None, description="WLED firmware version") + wled_led_count: Optional[int] = Field(None, description="LED count reported by WLED device") + wled_last_checked: Optional[datetime] = Field(None, description="Last health check time") + wled_error: Optional[str] = Field(None, description="Last health check error") class MetricsResponse(BaseModel): diff --git a/server/src/wled_controller/core/processor_manager.py b/server/src/wled_controller/core/processor_manager.py index a979472..198b311 100644 --- a/server/src/wled_controller/core/processor_manager.py +++ b/server/src/wled_controller/core/processor_manager.py @@ -4,7 +4,9 @@ import asyncio import time from dataclasses import dataclass, field from datetime import datetime -from typing import Dict, Optional +from typing import Dict, List, Optional, Tuple + +import httpx from wled_controller.core.calibration import ( CalibrationConfig, @@ -18,6 +20,8 @@ from wled_controller.utils import get_logger logger = get_logger(__name__) +DEFAULT_STATE_CHECK_INTERVAL = 30 # seconds between health checks + @dataclass class ProcessingSettings: @@ -31,6 +35,20 @@ class ProcessingSettings: saturation: float = 1.0 smoothing: float = 0.3 interpolation_mode: str = "average" + state_check_interval: int = DEFAULT_STATE_CHECK_INTERVAL + + +@dataclass +class DeviceHealth: + """Health check result for a WLED device (GET /json/info).""" + + online: bool = False + latency_ms: Optional[float] = None + last_checked: Optional[datetime] = None + wled_name: Optional[str] = None + wled_version: Optional[str] = None + wled_led_count: Optional[int] = None + error: Optional[str] = None @dataclass @@ -60,6 +78,10 @@ class ProcessorState: task: Optional[asyncio.Task] = None metrics: ProcessingMetrics = field(default_factory=ProcessingMetrics) previous_colors: Optional[list] = None + health: DeviceHealth = field(default_factory=DeviceHealth) + test_mode_active: bool = False + test_mode_edges: Dict[str, Tuple[int, int, int]] = field(default_factory=dict) + health_task: Optional[asyncio.Task] = None class ProcessorManager: @@ -68,8 +90,16 @@ class ProcessorManager: def __init__(self): """Initialize processor manager.""" self._processors: Dict[str, ProcessorState] = {} + self._health_monitoring_active = False + self._http_client: Optional[httpx.AsyncClient] = None logger.info("Processor manager initialized") + async def _get_http_client(self) -> httpx.AsyncClient: + """Get or create a shared HTTP client for health checks.""" + if self._http_client is None or self._http_client.is_closed: + self._http_client = httpx.AsyncClient(timeout=5) + return self._http_client + def add_device( self, device_id: str, @@ -105,6 +135,11 @@ class ProcessorManager: ) self._processors[device_id] = state + + # Start health monitoring for this device + if self._health_monitoring_active: + self._start_device_health_check(device_id) + logger.info(f"Added device {device_id} with {led_count} LEDs") def remove_device(self, device_id: str): @@ -123,6 +158,9 @@ class ProcessorManager: if self._processors[device_id].is_running: raise RuntimeError(f"Cannot remove device {device_id} while processing") + # Stop health check task + self._stop_device_health_check(device_id) + del self._processors[device_id] logger.info(f"Removed device {device_id}") @@ -291,6 +329,11 @@ class ProcessorManager: while state.is_running: loop_start = time.time() + # Skip capture/send while in calibration test mode + if state.test_mode_active: + await asyncio.sleep(frame_time) + continue + try: # Run blocking operations in thread pool to avoid blocking event loop # Capture screen (blocking I/O) @@ -375,6 +418,7 @@ class ProcessorManager: state = self._processors[device_id] metrics = state.metrics + h = state.health return { "device_id": device_id, @@ -384,8 +428,77 @@ class ProcessorManager: "display_index": state.settings.display_index, "last_update": metrics.last_update, "errors": [metrics.last_error] if metrics.last_error else [], + "wled_online": h.online, + "wled_latency_ms": h.latency_ms, + "wled_name": h.wled_name, + "wled_version": h.wled_version, + "wled_led_count": h.wled_led_count, + "wled_last_checked": h.last_checked, + "wled_error": h.error, + "test_mode": state.test_mode_active, + "test_mode_edges": list(state.test_mode_edges.keys()), } + async def set_test_mode(self, device_id: str, edges: Dict[str, List[int]]) -> None: + """Set or clear calibration test mode for a device. + + When edges dict is non-empty, enters test mode and sends test pixel pattern. + When empty, exits test mode and clears LEDs. + """ + if device_id not in self._processors: + raise ValueError(f"Device {device_id} not found") + + state = self._processors[device_id] + + if edges: + state.test_mode_active = True + state.test_mode_edges = { + edge: tuple(color) for edge, color in edges.items() + } + await self._send_test_pixels(device_id) + else: + state.test_mode_active = False + state.test_mode_edges = {} + await self._send_clear_pixels(device_id) + + async def _send_test_pixels(self, device_id: str) -> None: + """Build and send test pixel array for active test edges.""" + state = self._processors[device_id] + pixels = [(0, 0, 0)] * state.led_count + + for edge_name, color in state.test_mode_edges.items(): + for seg in state.calibration.segments: + if seg.edge == edge_name: + for i in range(seg.led_start, seg.led_start + seg.led_count): + if i < state.led_count: + pixels[i] = color + break + + try: + if state.wled_client and state.is_running: + await state.wled_client.send_pixels(pixels) + else: + use_ddp = state.led_count > WLEDClient.HTTP_MAX_LEDS + async with WLEDClient(state.device_url, use_ddp=use_ddp) as wled: + await wled.send_pixels(pixels) + except Exception as e: + logger.error(f"Failed to send test pixels for {device_id}: {e}") + + async def _send_clear_pixels(self, device_id: str) -> None: + """Send all-black pixels to clear WLED output.""" + state = self._processors[device_id] + pixels = [(0, 0, 0)] * state.led_count + + try: + if state.wled_client and state.is_running: + await state.wled_client.send_pixels(pixels) + else: + use_ddp = state.led_count > WLEDClient.HTTP_MAX_LEDS + async with WLEDClient(state.device_url, use_ddp=use_ddp) as wled: + await wled.send_pixels(pixels) + except Exception as e: + logger.error(f"Failed to clear pixels for {device_id}: {e}") + def get_metrics(self, device_id: str) -> dict: """Get detailed metrics for a device. @@ -447,9 +560,12 @@ class ProcessorManager: return list(self._processors.keys()) async def stop_all(self): - """Stop processing for all devices.""" - device_ids = list(self._processors.keys()) + """Stop processing and health monitoring for all devices.""" + # Stop health monitoring + await self.stop_health_monitoring() + # Stop processing + device_ids = list(self._processors.keys()) for device_id in device_ids: if self._processors[device_id].is_running: try: @@ -457,4 +573,116 @@ class ProcessorManager: except Exception as e: logger.error(f"Error stopping device {device_id}: {e}") + # Close shared HTTP client + if self._http_client and not self._http_client.is_closed: + await self._http_client.aclose() + self._http_client = None + logger.info("Stopped all processors") + + # ===== HEALTH MONITORING ===== + + async def start_health_monitoring(self): + """Start background health checks for all registered devices.""" + self._health_monitoring_active = True + for device_id in self._processors: + self._start_device_health_check(device_id) + logger.info("Started health monitoring for all devices") + + async def stop_health_monitoring(self): + """Stop all background health checks.""" + self._health_monitoring_active = False + for device_id in list(self._processors.keys()): + self._stop_device_health_check(device_id) + logger.info("Stopped health monitoring for all devices") + + def _start_device_health_check(self, device_id: str): + """Start health check task for a single device.""" + state = self._processors.get(device_id) + if not state: + return + if state.health_task and not state.health_task.done(): + return + state.health_task = asyncio.create_task(self._health_check_loop(device_id)) + + def _stop_device_health_check(self, device_id: str): + """Stop health check task for a single device.""" + state = self._processors.get(device_id) + if not state or not state.health_task: + return + state.health_task.cancel() + state.health_task = None + + async def _health_check_loop(self, device_id: str): + """Background loop that periodically checks a WLED device via GET /json/info.""" + state = self._processors.get(device_id) + if not state: + return + try: + while self._health_monitoring_active: + await self._check_device_health(device_id) + await asyncio.sleep(state.settings.state_check_interval) + except asyncio.CancelledError: + pass + except Exception as e: + logger.error(f"Fatal error in health check loop for {device_id}: {e}") + + async def _check_device_health(self, device_id: str): + """Check device health via GET /json/info. + + Determines online status, latency, device name and firmware version. + """ + state = self._processors.get(device_id) + if not state: + return + url = state.device_url.rstrip("/") + start = time.time() + try: + client = await self._get_http_client() + response = await client.get(f"{url}/json/info") + response.raise_for_status() + data = response.json() + latency = (time.time() - start) * 1000 + wled_led_count = data.get("leds", {}).get("count") + state.health = DeviceHealth( + online=True, + latency_ms=round(latency, 1), + last_checked=datetime.utcnow(), + wled_name=data.get("name"), + wled_version=data.get("ver"), + wled_led_count=wled_led_count, + error=None, + ) + except Exception as e: + state.health = DeviceHealth( + online=False, + latency_ms=None, + last_checked=datetime.utcnow(), + wled_name=state.health.wled_name, + wled_version=state.health.wled_version, + wled_led_count=state.health.wled_led_count, + error=str(e), + ) + + def get_device_health(self, device_id: str) -> dict: + """Get health status for a device. + + Args: + device_id: Device identifier + + Returns: + Health status dictionary + """ + if device_id not in self._processors: + raise ValueError(f"Device {device_id} not found") + + h = self._processors[device_id].health + return { + "online": h.online, + "latency_ms": h.latency_ms, + "last_checked": h.last_checked, + "wled_name": h.wled_name, + "wled_version": h.wled_version, + "wled_led_count": h.wled_led_count, + "error": h.error, + } diff --git a/server/src/wled_controller/main.py b/server/src/wled_controller/main.py index 69b4d72..56ebb8b 100644 --- a/server/src/wled_controller/main.py +++ b/server/src/wled_controller/main.py @@ -78,6 +78,9 @@ async def lifespan(app: FastAPI): logger.info(f"Loaded {len(devices)} devices from storage") + # Start background health monitoring for all devices + await processor_manager.start_health_monitoring() + yield # Shutdown diff --git a/server/src/wled_controller/static/app.js b/server/src/wled_controller/static/app.js index 049a56b..bbd4ac2 100644 --- a/server/src/wled_controller/static/app.js +++ b/server/src/wled_controller/static/app.js @@ -5,6 +5,31 @@ let apiKey = null; // Track logged errors to avoid console spam const loggedErrors = new Map(); // deviceId -> { errorCount, lastError } +// Calibration test mode state +const calibrationTestState = {}; // deviceId -> Set of active edge names + +// Modal dirty tracking - stores initial values when modals open +let settingsInitialValues = {}; +let calibrationInitialValues = {}; +const EDGE_TEST_COLORS = { + top: [255, 0, 0], + right: [0, 255, 0], + bottom: [0, 100, 255], + left: [255, 255, 0] +}; + +// Modal body lock helpers - prevent layout jump when scrollbar disappears +function lockBody() { + const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; + document.body.style.paddingRight = scrollbarWidth + 'px'; + document.body.classList.add('modal-open'); +} + +function unlockBody() { + document.body.classList.remove('modal-open'); + document.body.style.paddingRight = ''; +} + // Locale management let currentLocale = 'en'; let translations = {}; @@ -238,7 +263,7 @@ async function loadServerInfo() { const response = await fetch('/health'); const data = await response.json(); - document.getElementById('version-number').textContent = data.version; + document.getElementById('version-number').textContent = `v${data.version}`; document.getElementById('server-status').textContent = '●'; document.getElementById('server-status').className = 'status-badge online'; } catch (error) { @@ -270,32 +295,6 @@ async function loadDisplays() { return; } - // Render display cards with enhanced information - container.innerHTML = data.displays.map(display => ` -
-
-
${display.name}
- ${display.is_primary ? `${t('displays.badge.primary')}` : `${t('displays.badge.secondary')}`} -
-
- ${t('displays.resolution')} - ${display.width} × ${display.height} -
-
- ${t('displays.refresh_rate')} - ${display.refresh_rate}Hz -
-
- ${t('displays.position')} - (${display.x}, ${display.y}) -
-
- ${t('displays.index')} - ${display.index} -
-
- `).join(''); - // Render visual layout renderDisplayLayout(data.displays); } catch (error) { @@ -349,9 +348,12 @@ function renderDisplayLayout(displays) {
+
(${display.x}, ${display.y})
+
#${display.index}
${display.name} ${display.width}×${display.height} + ${display.refresh_rate}Hz
${display.is_primary ? '
★
' : ''}
@@ -466,28 +468,56 @@ function createDeviceCard(device) { const settings = device.settings || {}; const isProcessing = state.processing || false; + const brightnessPercent = Math.round((settings.brightness !== undefined ? settings.brightness : 1.0) * 100); const statusKey = isProcessing ? 'device.status.processing' : 'device.status.idle'; const status = isProcessing ? 'processing' : 'idle'; + // WLED device health indicator + const wledOnline = state.wled_online || false; + const wledLatency = state.wled_latency_ms; + const wledName = state.wled_name; + const wledVersion = state.wled_version; + const wledLastChecked = state.wled_last_checked; + + let healthClass, healthTitle, healthLabel; + if (wledLastChecked === null || wledLastChecked === undefined) { + healthClass = 'health-unknown'; + healthTitle = t('device.health.checking'); + healthLabel = ''; + } else if (wledOnline) { + healthClass = 'health-online'; + healthTitle = `${t('device.health.online')}`; + if (wledName) healthTitle += ` - ${wledName}`; + if (wledVersion) healthTitle += ` v${wledVersion}`; + healthLabel = wledLatency !== null && wledLatency !== undefined + ? `${Math.round(wledLatency)}ms` : ''; + } else { + healthClass = 'health-offline'; + healthTitle = t('device.health.offline'); + if (state.wled_error) healthTitle += `: ${state.wled_error}`; + healthLabel = `${t('device.health.offline')}`; + } + return `
-
${device.name || device.id}
- ${t(statusKey)} +
+ + ${device.name || device.id} + ${wledVersion ? `v${wledVersion}` : ''} + ${healthLabel} +
+
+ 🖥️${settings.display_index !== undefined ? settings.display_index : 0} + ${state.wled_led_count ? `💡${state.wled_led_count}` : ''} + ${isProcessing ? `${t('device.status.processing')}` : ''} +
${t('device.url')} ${device.url || 'N/A'}
-
- ${t('device.led_count')} - ${device.led_count || 0} -
-
- ${t('device.display')} - ${settings.display_index !== undefined ? settings.display_index : 0} -
${isProcessing ? `
@@ -509,6 +539,13 @@ function createDeviceCard(device) {
` : ''}
+
+ +
${isProcessing ? ` @@ -21,9 +23,6 @@ - @@ -34,25 +33,15 @@
-

Available Displays

+

Display Layout

-
-

Display Layout

Loading layout...
-
- Primary Display - Secondary Display -
- -

Display Information

-
-
Loading displays...
-
+
@@ -78,11 +67,6 @@
-
- - - Number of LEDs configured in your WLED device -
@@ -108,115 +92,81 @@
-

- Configure how your LED strip is mapped to screen edges. Use test buttons to verify each edge lights up correctly. +

+ Configure how your LED strip is mapped to screen edges. Click an edge to toggle test mode.

- -
-
- -
- Screen + +
+
+ +
+ Screen +
- -
- Top: 0 LEDs + +
+ T +
-
- Right: 0 LEDs +
+ R +
-
- Bottom: 0 LEDs +
+ B +
-
- Left: 0 LEDs +
+ L +
- -
+ +
●
+
●
+
●
+
●
+

Click an edge to toggle test LEDs on/off

- -
-
- - -
- -
- - -
- -
- - - LEDs from LED 0 to start corner (along strip) -
+ +
+ +
- -
-
- - -
- -
- - -
- -
- - -
- -
- - -
+
+ + + LEDs from LED 0 to start corner (along strip)
-
+
Total LEDs: 0 / 0
- -
-

Test Edges (lights up each edge):

-
- - - - -
-
-
- +
@@ -242,18 +192,11 @@ IP address or hostname of your WLED device
-
- - - Number of LEDs configured in your WLED device -
- - - Global brightness for this WLED device (0-100%) + + + How often to check the WLED device status (5-600 seconds)
@@ -346,24 +289,13 @@ const apiKey = localStorage.getItem('wled_api_key'); const loginBtn = document.getElementById('login-btn'); const logoutBtn = document.getElementById('logout-btn'); - const authStatus = document.getElementById('auth-status'); - const loggedInUser = document.getElementById('logged-in-user'); if (apiKey) { - // Logged in loginBtn.style.display = 'none'; logoutBtn.style.display = 'inline-block'; - authStatus.style.display = 'inline'; - - // Show masked key - const masked = apiKey.substring(0, 8) + '...'; - loggedInUser.textContent = `● Authenticated`; - loggedInUser.title = `API Key: ${masked}`; } else { - // Logged out loginBtn.style.display = 'inline-block'; logoutBtn.style.display = 'none'; - authStatus.style.display = 'none'; } } @@ -419,7 +351,7 @@ input.placeholder = 'Enter your API key...'; error.style.display = 'none'; modal.style.display = 'flex'; - document.body.classList.add('modal-open'); + lockBody(); // Hide cancel button if this is required login (no existing session) cancelBtn.style.display = hideCancel ? 'none' : 'inline-block'; @@ -430,7 +362,7 @@ function closeApiKeyModal() { const modal = document.getElementById('api-key-modal'); modal.style.display = 'none'; - document.body.classList.remove('modal-open'); + unlockBody(); } function submitApiKey(event) { diff --git a/server/src/wled_controller/static/locales/en.json b/server/src/wled_controller/static/locales/en.json index 408ecd8..22c65ec 100644 --- a/server/src/wled_controller/static/locales/en.json +++ b/server/src/wled_controller/static/locales/en.json @@ -43,10 +43,11 @@ "devices.wled_note2": "This controller sends pixel color data and controls brightness per device.", "device.name": "Device Name:", "device.name.placeholder": "Living Room TV", - "device.url": "WLED URL:", + "device.url": "URL:", "device.url.placeholder": "http://192.168.1.100", "device.led_count": "LED Count:", "device.led_count.hint": "Number of LEDs configured in your WLED device", + "device.led_count.hint.auto": "Auto-detected from WLED device", "device.button.add": "Add Device", "device.button.start": "Start", "device.button.stop": "Stop", @@ -69,22 +70,23 @@ "device.metrics.target_fps": "Target FPS", "device.metrics.frames": "Frames", "device.metrics.errors": "Errors", + "device.health.online": "WLED Online", + "device.health.offline": "WLED Offline", + "device.health.checking": "Checking...", "settings.title": "Device Settings", "settings.brightness": "Brightness:", "settings.brightness.hint": "Global brightness for this WLED device (0-100%)", "settings.url.hint": "IP address or hostname of your WLED device", "settings.button.cancel": "Cancel", + "settings.health_interval": "Health Check Interval (s):", + "settings.health_interval.hint": "How often to check the WLED device status (5-600 seconds)", "settings.button.save": "Save Changes", "settings.saved": "Settings saved successfully", "settings.failed": "Failed to save settings", "calibration.title": "LED Calibration", - "calibration.description": "Configure how your LED strip is mapped to screen edges. Use test buttons to verify each edge lights up correctly.", + "calibration.description": "Configure how your LED strip is mapped to screen edges. Click an edge to toggle test mode.", "calibration.preview.screen": "Screen", - "calibration.preview.top": "Top:", - "calibration.preview.right": "Right:", - "calibration.preview.bottom": "Bottom:", - "calibration.preview.left": "Left:", - "calibration.preview.leds": "LEDs", + "calibration.preview.click_hint": "Click an edge to toggle test LEDs on/off", "calibration.start_position": "Starting Position:", "calibration.position.bottom_left": "Bottom Left", "calibration.position.bottom_right": "Bottom Right", @@ -100,21 +102,16 @@ "calibration.leds.bottom": "Bottom LEDs:", "calibration.leds.left": "Left LEDs:", "calibration.total": "Total LEDs:", - "calibration.test": "Test Edges (lights up each edge):", - "calibration.test.top": "Top", - "calibration.test.right": "Right", - "calibration.test.bottom": "Bottom", - "calibration.test.left": "Left", "calibration.button.cancel": "Cancel", - "calibration.button.save": "Save Calibration", + "calibration.button.save": "Save", "calibration.saved": "Calibration saved successfully", "calibration.failed": "Failed to save calibration", - "calibration.testing": "Testing {edge} edge...", "server.healthy": "Server online", "server.offline": "Server offline", "error.unauthorized": "Unauthorized - please login", "error.network": "Network error", "error.unknown": "An error occurred", + "modal.discard_changes": "You have unsaved changes. Discard them?", "confirm.title": "Confirm Action", "confirm.yes": "Yes", "confirm.no": "No" diff --git a/server/src/wled_controller/static/locales/ru.json b/server/src/wled_controller/static/locales/ru.json index dfe0b47..9a38ffa 100644 --- a/server/src/wled_controller/static/locales/ru.json +++ b/server/src/wled_controller/static/locales/ru.json @@ -43,10 +43,11 @@ "devices.wled_note2": "Этот контроллер отправляет данные о цвете пикселей и управляет яркостью для каждого устройства.", "device.name": "Имя Устройства:", "device.name.placeholder": "ТВ в Гостиной", - "device.url": "WLED URL:", + "device.url": "URL:", "device.url.placeholder": "http://192.168.1.100", "device.led_count": "Количество Светодиодов:", "device.led_count.hint": "Количество светодиодов, настроенных в вашем WLED устройстве", + "device.led_count.hint.auto": "Автоматически определяется из WLED устройства", "device.button.add": "Добавить Устройство", "device.button.start": "Запустить", "device.button.stop": "Остановить", @@ -69,22 +70,23 @@ "device.metrics.target_fps": "Целев. FPS", "device.metrics.frames": "Кадры", "device.metrics.errors": "Ошибки", + "device.health.online": "WLED Онлайн", + "device.health.offline": "WLED Недоступен", + "device.health.checking": "Проверка...", "settings.title": "Настройки Устройства", "settings.brightness": "Яркость:", "settings.brightness.hint": "Общая яркость для этого WLED устройства (0-100%)", "settings.url.hint": "IP адрес или имя хоста вашего WLED устройства", "settings.button.cancel": "Отмена", + "settings.health_interval": "Интервал Проверки (с):", + "settings.health_interval.hint": "Как часто проверять статус WLED устройства (5-600 секунд)", "settings.button.save": "Сохранить Изменения", "settings.saved": "Настройки успешно сохранены", "settings.failed": "Не удалось сохранить настройки", "calibration.title": "Калибровка Светодиодов", - "calibration.description": "Настройте как ваша светодиодная лента сопоставляется с краями экрана. Используйте кнопки тестирования чтобы проверить что каждый край светится правильно.", + "calibration.description": "Настройте как ваша светодиодная лента сопоставляется с краями экрана. Нажмите на край для теста.", "calibration.preview.screen": "Экран", - "calibration.preview.top": "Сверху:", - "calibration.preview.right": "Справа:", - "calibration.preview.bottom": "Снизу:", - "calibration.preview.left": "Слева:", - "calibration.preview.leds": "Светодиодов", + "calibration.preview.click_hint": "Нажмите на край чтобы включить/выключить тест светодиодов", "calibration.start_position": "Начальная Позиция:", "calibration.position.bottom_left": "Нижний Левый", "calibration.position.bottom_right": "Нижний Правый", @@ -100,21 +102,16 @@ "calibration.leds.bottom": "Светодиодов Снизу:", "calibration.leds.left": "Светодиодов Слева:", "calibration.total": "Всего Светодиодов:", - "calibration.test": "Тест Краев (подсвечивает каждый край):", - "calibration.test.top": "Сверху", - "calibration.test.right": "Справа", - "calibration.test.bottom": "Снизу", - "calibration.test.left": "Слева", "calibration.button.cancel": "Отмена", - "calibration.button.save": "Сохранить Калибровку", + "calibration.button.save": "Сохранить", "calibration.saved": "Калибровка успешно сохранена", "calibration.failed": "Не удалось сохранить калибровку", - "calibration.testing": "Тестирование {edge} края...", "server.healthy": "Сервер онлайн", "server.offline": "Сервер офлайн", "error.unauthorized": "Не авторизован - пожалуйста, войдите", "error.network": "Сетевая ошибка", "error.unknown": "Произошла ошибка", + "modal.discard_changes": "У вас есть несохранённые изменения. Отменить их?", "confirm.title": "Подтверждение Действия", "confirm.yes": "Да", "confirm.no": "Нет" diff --git a/server/src/wled_controller/static/style.css b/server/src/wled_controller/static/style.css index cd27dd5..d34ced4 100644 --- a/server/src/wled_controller/static/style.css +++ b/server/src/wled_controller/static/style.css @@ -63,6 +63,12 @@ header { margin-bottom: 30px; } +.header-title { + display: flex; + align-items: center; + gap: 10px; +} + h1 { font-size: 2rem; color: var(--primary-color); @@ -80,6 +86,16 @@ h2 { gap: 15px; } +#server-version { + font-size: 0.75rem; + font-weight: 400; + color: var(--text-secondary); + background: var(--border-color); + padding: 2px 8px; + border-radius: 10px; + letter-spacing: 0.03em; +} + .status-badge { font-size: 1.5rem; animation: pulse 2s infinite; @@ -98,6 +114,45 @@ h2 { 50% { opacity: 0.5; } } +/* WLED device health indicator */ +.health-dot { + display: inline-block; + width: 10px; + height: 10px; + border-radius: 50%; + margin-right: 8px; + vertical-align: middle; + flex-shrink: 0; +} + +.health-dot.health-online { + background-color: #4CAF50; + box-shadow: 0 0 6px rgba(76, 175, 80, 0.6); +} + +.health-dot.health-offline { + background-color: var(--danger-color); + box-shadow: 0 0 6px rgba(244, 67, 54, 0.6); +} + +.health-dot.health-unknown { + background-color: #9E9E9E; + animation: pulse 2s infinite; +} + +.health-latency { + font-size: 0.7rem; + font-weight: 400; + color: #4CAF50; + margin-left: auto; + padding-left: 8px; + opacity: 0.85; +} + +.health-latency.offline { + color: var(--danger-color); +} + section { margin-bottom: 40px; } @@ -118,7 +173,6 @@ section { } .card:hover { - transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } @@ -129,9 +183,35 @@ section { margin-bottom: 15px; } +.card-header-badges { + display: flex; + align-items: center; + gap: 8px; +} + +.display-badge, +.led-count-badge { + font-size: 0.8rem; + color: var(--info-color); + opacity: 0.8; +} + .card-title { font-size: 1.2rem; font-weight: 600; + display: flex; + align-items: center; + gap: 6px; +} + +.wled-version { + font-size: 0.65rem; + font-weight: 400; + color: var(--text-secondary); + background: var(--border-color); + padding: 1px 6px; + border-radius: 8px; + letter-spacing: 0.03em; } .badge { @@ -254,14 +334,9 @@ section { color: var(--info-color); } -.badge-primary { - background: var(--primary-color); - color: white; -} - -.badge-secondary { - background: var(--border-color); - color: var(--text-secondary); +.primary-star { + color: var(--primary-color); + font-size: 1.2rem; } /* Display Layout Visualization */ @@ -324,6 +399,22 @@ section { background: linear-gradient(135deg, rgba(128, 128, 128, 0.1), rgba(128, 128, 128, 0.05)); } +.layout-position-label { + position: absolute; + top: 4px; + left: 6px; + font-size: 0.7rem; + color: var(--text-secondary); +} + +.layout-index-label { + position: absolute; + bottom: 4px; + left: 6px; + font-size: 0.7rem; + color: var(--text-secondary); +} + .layout-display-label { text-align: center; padding: 5px; @@ -386,6 +477,16 @@ section { background: rgba(128, 128, 128, 0.2); } +/* Card brightness slider */ +.brightness-control { + padding: 0; + margin-bottom: 12px; +} + +.brightness-slider { + width: 100%; +} + .add-device-section { background: var(--card-bg); border: 1px solid var(--border-color); @@ -668,6 +769,193 @@ input:-webkit-autofill:focus { text-decoration: underline; } +/* Interactive Calibration Preview Edges */ +.calibration-preview { + position: relative; + width: 100%; + max-width: 500px; + aspect-ratio: 16 / 10; + margin: 0 auto; + background: var(--card-bg); + border: 2px solid var(--border-color); + border-radius: 8px; +} + +.preview-screen { + position: absolute; + top: 37px; + left: 57px; + right: 57px; + bottom: 37px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 4px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 6px; + color: white; + font-size: 14px; +} + +.preview-edge { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + font-size: 11px; + color: var(--text-secondary); + background: rgba(128, 128, 128, 0.15); + cursor: pointer; + transition: background 0.2s, box-shadow 0.2s; + z-index: 2; + user-select: none; +} + +.preview-edge:hover { + background: rgba(128, 128, 128, 0.3); +} + +.preview-edge.active { + color: white; + font-weight: 600; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); +} + +.edge-top { + top: 0; + left: 56px; + right: 56px; + height: 36px; + border-radius: 6px 6px 0 0; + flex-direction: row; + gap: 8px; +} + +.edge-bottom { + bottom: 0; + left: 56px; + right: 56px; + height: 36px; + border-radius: 0 0 6px 6px; + flex-direction: row; + gap: 8px; +} + +.edge-left { + left: 0; + top: 36px; + bottom: 36px; + width: 56px; + flex-direction: column; + border-radius: 6px 0 0 6px; + gap: 4px; +} + +.edge-right { + right: 0; + top: 36px; + bottom: 36px; + width: 56px; + flex-direction: column; + border-radius: 0 6px 6px 0; + gap: 4px; +} + +.edge-led-input { + width: 46px; + padding: 3px 2px; + font-size: 12px; + text-align: center; + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 3px; + color: inherit; +} + +.edge-led-input:focus { + border-color: var(--primary-color); + outline: none; +} + +.edge-top .edge-led-input, +.edge-bottom .edge-led-input { + width: 56px; +} + +/* Hide spinner arrows on edge inputs to save space */ +.edge-led-input::-webkit-outer-spin-button, +.edge-led-input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +.edge-led-input[type=number] { + -moz-appearance: textfield; +} + +/* Corner start-position buttons */ +.preview-corner { + position: absolute; + width: 56px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + color: rgba(128, 128, 128, 0.4); + cursor: pointer; + z-index: 5; + transition: color 0.2s, transform 0.2s, text-shadow 0.2s; + user-select: none; +} + +.preview-corner:hover { + color: rgba(76, 175, 80, 0.6); + transform: scale(1.2); +} + +.preview-corner.active { + color: #4CAF50; + text-shadow: 0 0 8px rgba(76, 175, 80, 0.6); + font-size: 22px; +} + +.corner-top-left { top: 0; left: 0; } +.corner-top-right { top: 0; right: 0; } +.corner-bottom-left { bottom: 0; left: 0; } +.corner-bottom-right { bottom: 0; right: 0; } + +/* Direction toggle inside screen */ +.direction-toggle { + display: flex; + align-items: center; + gap: 4px; + padding: 4px 10px; + background: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 12px; + color: white; + font-size: 12px; + cursor: pointer; + transition: background 0.2s; + user-select: none; +} + +.direction-toggle:hover { + background: rgba(255, 255, 255, 0.25); +} + +.direction-toggle #direction-icon { + font-size: 16px; +} + +.preview-hint { + text-align: center; + font-size: 0.8rem; + color: var(--text-secondary); + margin-top: 8px; +} + @media (max-width: 768px) { .displays-grid, .devices-grid { diff --git a/server/src/wled_controller/storage/device_store.py b/server/src/wled_controller/storage/device_store.py index 0b28356..dfdcaa0 100644 --- a/server/src/wled_controller/storage/device_store.py +++ b/server/src/wled_controller/storage/device_store.py @@ -12,7 +12,7 @@ from wled_controller.core.calibration import ( calibration_to_dict, create_default_calibration, ) -from wled_controller.core.processor_manager import ProcessingSettings +from wled_controller.core.processor_manager import DEFAULT_STATE_CHECK_INTERVAL, ProcessingSettings from wled_controller.utils import get_logger logger = get_logger(__name__) @@ -77,6 +77,7 @@ class Device: "saturation": self.settings.saturation, "smoothing": self.settings.smoothing, "interpolation_mode": self.settings.interpolation_mode, + "state_check_interval": self.settings.state_check_interval, }, "calibration": calibration_to_dict(self.calibration), "created_at": self.created_at.isoformat(), @@ -103,6 +104,10 @@ class Device: saturation=settings_data.get("saturation", 1.0), smoothing=settings_data.get("smoothing", 0.3), interpolation_mode=settings_data.get("interpolation_mode", "average"), + state_check_interval=settings_data.get( + "state_check_interval", + settings_data.get("health_check_interval", DEFAULT_STATE_CHECK_INTERVAL), + ), ) calibration_data = data.get("calibration")