Optimize KC processing and add reactive HAOS state updates

- Optimize KC frame processing: downsample to 160x90 with cv2.resize
  before rectangle extraction, pre-compute pixel coords, vectorize
  smoothing with numpy arrays
- Add WebSocket event stream for server state changes: processor manager
  fires events on start/stop, new /api/v1/events/ws endpoint streams
  them to connected clients
- Add HAOS EventStreamListener that triggers coordinator refresh on
  state changes for near-instant switch updates
- Reduce HAOS polling interval from 10s to 3s for fresher FPS metrics
- Fix overlay button tooltips: flatten nested JSON keys in locale files
  to match flat dot-notation lookup used by t() function

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/api/routes/picture_targets.py

@@ -791,6 +791,44 @@ async def target_colors_ws(
         manager.remove_kc_ws_client(target_id, websocket)
 
 
+# ===== STATE CHANGE EVENT STREAM =====
+
+
+@router.websocket("/api/v1/events/ws")
+async def events_ws(
+    websocket: WebSocket,
+    token: str = Query(""),
+):
+    """WebSocket for real-time state change events. Auth via ?token=<api_key>."""
+    authenticated = False
+    cfg = get_config()
+    if token and cfg.auth.api_keys:
+        for _label, api_key in cfg.auth.api_keys.items():
+            if secrets.compare_digest(token, api_key):
+                authenticated = True
+                break
+
+    if not authenticated:
+        await websocket.close(code=4001, reason="Unauthorized")
+        return
+
+    await websocket.accept()
+
+    manager = get_processor_manager()
+    queue = manager.subscribe_events()
+
+    try:
+        while True:
+            event = await queue.get()
+            await websocket.send_json(event)
+    except WebSocketDisconnect:
+        pass
+    except Exception:
+        pass
+    finally:
+        manager.unsubscribe_events(queue)
+
+
 # ===== OVERLAY VISUALIZATION =====
 
 @router.post("/api/v1/picture-targets/{target_id}/overlay/start", tags=["Visualization"])

server/src/wled_controller/core/processor_manager.py

@@ -8,6 +8,7 @@ from dataclasses import dataclass, field
 from datetime import datetime
 from typing import Dict, List, Optional, Tuple
 
+import cv2
 import httpx
 import numpy as np
 
@@ -71,45 +72,46 @@ def _process_frame(capture, border_width, pixel_mapper, previous_colors, smoothi
     return led_colors, timing_ms
 
 
-def _process_kc_frame(capture, rectangles, calc_fn, previous_colors, smoothing):
+KC_WORK_SIZE = (160, 90)  # (width, height) — small enough for fast color calc
+
+
+def _process_kc_frame(capture, rect_names, rect_bounds, calc_fn, prev_colors_arr, smoothing):
     """All CPU-bound work for one KC frame (runs in thread pool).
 
-    Returns (colors, timing_ms) where colors is a dict {name: (r, g, b)}
-    and timing_ms is a dict with per-stage timing in milliseconds.
+    Returns (colors, colors_arr, timing_ms) where:
+    - colors is a dict {name: (r, g, b)}
+    - colors_arr is a (N, 3) float64 array for smoothing continuity
+    - timing_ms is a dict with per-stage timing in milliseconds.
     """
     t0 = time.perf_counter()
-    img = capture.image
-    h, w = img.shape[:2]
-    colors = {}
-    for rect in rectangles:
-        px_x = max(0, int(rect.x * w))
-        px_y = max(0, int(rect.y * h))
-        px_w = max(1, int(rect.width * w))
-        px_h = max(1, int(rect.height * h))
-        px_x = min(px_x, w - 1)
-        px_y = min(px_y, h - 1)
-        px_w = min(px_w, w - px_x)
-        px_h = min(px_h, h - px_y)
-        sub_img = img[px_y:px_y + px_h, px_x:px_x + px_w]
-        colors[rect.name] = calc_fn(sub_img)
+
+    # Downsample to working resolution — 144x fewer pixels at 1080p
+    small = cv2.resize(capture.image, KC_WORK_SIZE, interpolation=cv2.INTER_AREA)
+
+    # Extract colors for each rectangle from the small image
+    n = len(rect_names)
+    colors_arr = np.empty((n, 3), dtype=np.float64)
+    for i, (y1, y2, x1, x2) in enumerate(rect_bounds):
+        colors_arr[i] = calc_fn(small[y1:y2, x1:x2])
+
     t1 = time.perf_counter()
-    if previous_colors and smoothing > 0:
-        for name, color in colors.items():
-            if name in previous_colors:
-                prev = previous_colors[name]
-                alpha = smoothing
-                colors[name] = (
-                    int(color[0] * (1 - alpha) + prev[0] * alpha),
-                    int(color[1] * (1 - alpha) + prev[1] * alpha),
-                    int(color[2] * (1 - alpha) + prev[2] * alpha),
-                )
+
+    # Vectorized smoothing on (N, 3) array
+    if prev_colors_arr is not None and smoothing > 0:
+        colors_arr = colors_arr * (1 - smoothing) + prev_colors_arr * smoothing
+
+    colors_u8 = np.clip(colors_arr, 0, 255).astype(np.uint8)
     t2 = time.perf_counter()
+
+    # Build output dict
+    colors = {rect_names[i]: tuple(int(c) for c in colors_u8[i]) for i in range(n)}
+
     timing_ms = {
         "calc_colors": (t1 - t0) * 1000,
         "smooth": (t2 - t1) * 1000,
         "total": (t2 - t0) * 1000,
     }
-    return colors, timing_ms
+    return colors, colors_arr, timing_ms
 
 @dataclass
 class ProcessingSettings:
@@ -239,8 +241,30 @@ class ProcessorManager:
             picture_source_store, capture_template_store, pp_template_store
         )
         self._overlay_manager = OverlayManager()
+        self._event_queues: List[asyncio.Queue] = []
         logger.info("Processor manager initialized")
 
+    # ===== EVENT SYSTEM (state change notifications) =====
+
+    def subscribe_events(self) -> asyncio.Queue:
+        """Subscribe to state change events. Returns queue to read from."""
+        queue: asyncio.Queue = asyncio.Queue(maxsize=64)
+        self._event_queues.append(queue)
+        return queue
+
+    def unsubscribe_events(self, queue: asyncio.Queue) -> None:
+        """Unsubscribe from events."""
+        if queue in self._event_queues:
+            self._event_queues.remove(queue)
+
+    def _fire_event(self, event: dict) -> None:
+        """Push event to all subscribers (non-blocking)."""
+        for q in self._event_queues:
+            try:
+                q.put_nowait(event)
+            except asyncio.QueueFull:
+                pass
+
     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:
@@ -622,6 +646,7 @@ class ProcessorManager:
         state.is_running = True
 
         logger.info(f"Started processing for target {target_id}")
+        self._fire_event({"type": "state_change", "target_id": target_id, "processing": True})
 
     async def stop_processing(self, target_id: str):
         """Stop screen processing for a target."""
@@ -665,6 +690,7 @@ class ProcessorManager:
             state.live_stream = None
 
         logger.info(f"Stopped processing for target {target_id}")
+        self._fire_event({"type": "state_change", "target_id": target_id, "processing": False})
 
     async def _processing_loop(self, target_id: str):
         """Main processing loop for a target."""
@@ -1284,6 +1310,7 @@ class ProcessorManager:
         state.is_running = True
 
         logger.info(f"Started KC processing for target {target_id}")
+        self._fire_event({"type": "state_change", "target_id": target_id, "processing": True})
 
     async def stop_kc_processing(self, target_id: str) -> None:
         """Stop key-colors extraction for a target."""
@@ -1315,6 +1342,7 @@ class ProcessorManager:
             state.live_stream = None
 
         logger.info(f"Stopped KC processing for target {target_id}")
+        self._fire_event({"type": "state_change", "target_id": target_id, "processing": False})
 
     async def _kc_processing_loop(self, target_id: str) -> None:
         """Main processing loop for a key-colors target."""
@@ -1342,6 +1370,22 @@ class ProcessorManager:
 
         rectangles = state._resolved_rectangles
 
+        # Pre-compute pixel bounds at working resolution (160x90)
+        kc_w, kc_h = KC_WORK_SIZE
+        rect_names = [r.name for r in rectangles]
+        rect_bounds = []
+        for rect in rectangles:
+            px_x = max(0, int(rect.x * kc_w))
+            px_y = max(0, int(rect.y * kc_h))
+            px_w = max(1, int(rect.width * kc_w))
+            px_h = max(1, int(rect.height * kc_h))
+            px_x = min(px_x, kc_w - 1)
+            px_y = min(px_y, kc_h - 1)
+            px_w = min(px_w, kc_w - px_x)
+            px_h = min(px_h, kc_h - px_y)
+            rect_bounds.append((px_y, px_y + px_h, px_x, px_x + px_w))
+        prev_colors_arr = None  # (N, 3) float64 for vectorized smoothing
+
         logger.info(
             f"KC processing loop started for target {target_id} "
             f"(fps={target_fps}, rects={len(rectangles)})"
@@ -1378,13 +1422,13 @@ class ProcessorManager:
                     prev_capture = capture
 
                     # CPU-bound work in thread pool
-                    colors, frame_timing = await asyncio.to_thread(
+                    colors, colors_arr, frame_timing = await asyncio.to_thread(
                         _process_kc_frame,
-                        capture, rectangles, calc_fn,
-                        state.previous_colors, smoothing,
+                        capture, rect_names, rect_bounds, calc_fn,
+                        prev_colors_arr, smoothing,
                     )
 
-                    state.previous_colors = dict(colors)
+                    prev_colors_arr = colors_arr
                     state.latest_colors = dict(colors)
 
                     # Broadcast to WebSocket clients

server/src/wled_controller/static/locales/en.json

@@ -440,16 +440,10 @@
   "pattern.description.hint": "Optional notes about where or how this pattern is used",
   "pattern.visual_editor.hint": "Click + buttons to add rectangles. Drag edges to resize, drag inside to move.",
   "pattern.rectangles.hint": "Fine-tune rectangle positions and sizes with exact coordinates (0.0 to 1.0)",
-  "overlay": {
-    "button": {
-      "show": "Show overlay visualization",
-      "hide": "Hide overlay visualization"
-    },
-    "started": "Overlay visualization started",
-    "stopped": "Overlay visualization stopped",
-    "error": {
-      "start": "Failed to start overlay",
-      "stop": "Failed to stop overlay"
-    }
-  }
+  "overlay.button.show": "Show overlay visualization",
+  "overlay.button.hide": "Hide overlay visualization",
+  "overlay.started": "Overlay visualization started",
+  "overlay.stopped": "Overlay visualization stopped",
+  "overlay.error.start": "Failed to start overlay",
+  "overlay.error.stop": "Failed to stop overlay"
 }

server/src/wled_controller/static/locales/ru.json

@@ -440,16 +440,10 @@
   "pattern.description.hint": "Необязательные заметки о назначении этого паттерна",
   "pattern.visual_editor.hint": "Нажмите кнопки + чтобы добавить прямоугольники. Тяните края для изменения размера, тяните внутри для перемещения.",
   "pattern.rectangles.hint": "Точная настройка позиций и размеров прямоугольников в координатах (0.0 до 1.0)",
-  "overlay": {
-    "button": {
-      "show": "Показать визуализацию наложения",
-      "hide": "Скрыть визуализацию наложения"
-    },
-    "started": "Визуализация наложения запущена",
-    "stopped": "Визуализация наложения остановлена",
-    "error": {
-      "start": "Не удалось запустить наложение",
-      "stop": "Не удалось остановить наложение"
-    }
-  }
+  "overlay.button.show": "Показать визуализацию наложения",
+  "overlay.button.hide": "Скрыть визуализацию наложения",
+  "overlay.started": "Визуализация наложения запущена",
+  "overlay.stopped": "Визуализация наложения остановлена",
+  "overlay.error.start": "Не удалось запустить наложение",
+  "overlay.error.stop": "Не удалось остановить наложение"
 }