Commit Graph

242 Commits

Author SHA1 Message Date
9b5686ac0a Reduce noise glow intensity on light theme
Lower light-theme boost from 2.2x to 1.5x for subtler background shapes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 21:43:46 +03:00
812d15419c Improve background effects for light theme and fix mobile color picker
- WebGL shader: theme-aware blending (tint toward accent on light, additive
  glow on dark) with u_light uniform for proper light-theme visibility
- Cards: translucent backgrounds only on entity cards when bg-anim is active,
  keeping modals/pickers/tab bars/header fully opaque
- Running card border and tab indicator: boosted contrast for light theme
- Header: backdrop-filter via pseudo-element to avoid breaking fixed tab-bar
- Color picker: move popover to document.body on mobile as centered bottom-sheet
- Add card: use --card-bg background and bolder + icon for visibility

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 21:42:22 +03:00
97db63824e Add composite layer preview, configurable LED count, and notification fire button to CSS test modal
- Composite sources show per-layer strip canvases with composite result on top
- Server sends composite wire format with per-layer RGB data
- LED count is configurable via input field, persisted in localStorage
- Notification sources show a bell fire button on the strip preview
- Composite with notification layers shows per-layer fire buttons
- Fixed stale WS frame bug with generation counter and unique consumer IDs
- Modal width is now fixed at 700px to prevent layout jumps
- Target card composite layers now use same-height canvases

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 20:17:54 +03:00
bebdfcf319 Add test preview for color strip sources with LED strip and rectangle views
New WebSocket endpoint streams real-time RGB frames from any CSS source.
Generic sources show a horizontal LED strip canvas. Picture sources show
a rectangle with per-edge canvases matching the calibration layout.

Server computes exact output indices per edge (offset + reverse + CW/CCW)
so the frontend renders edges in correct visual orientation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 19:18:36 +03:00
c431cb67b6 Add IconSelect grids for animation type and protocol selectors
Replace plain dropdowns with visual icon grids:
- Animation type (static/gradient CSS sources): icons for each effect
- WLED target protocol: DDP vs HTTP with descriptions
Add i18n keys for protocol options in all 3 locales.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 15:18:29 +03:00
e97ef3afa6 Add semi-transparent blurred tab icon as background watermark
Large SVG icon on the right side of the viewport reflects the active tab,
crossfades on tab switch. Also removes overflow:hidden from cards to fix
color picker clipping.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 11:43:59 +03:00
4245e81a35 Merge floating particles into WebGL shader and fix color picker clipping
Remove overflow:hidden from .card and .template-card that was clipping
the color picker popover. Combine noise field + particle glow into a
single GPU shader pass (40 drifting particles as uniforms).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 11:35:49 +03:00
b4ab5ffe3c Replace particle background with WebGL simplex noise shader
GPU-accelerated flowing noise field with accent-colored highlights.
Three layered noise octaves at different scales produce organic motion.
Renders at half resolution for minimal GPU load, zero color banding.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 11:29:27 +03:00
4db7cd2d27 Replace blob background with floating particle field
Canvas-based particle system with 60 glowing dots drifting upward,
tinted with the accent color. Eliminates the gradient banding issue
from the previous CSS blur approach. Renders at native resolution
with radial gradients for perfectly smooth glow.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 11:27:49 +03:00
012e9f5ddb Add rotating gradient border on running LED target cards
Animated conic gradient spins around the card edge using CSS Houdini
@property for smooth angle interpolation. Skips the left edge when
a custom card color stripe is assigned (data-has-color attribute).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 11:18:19 +03:00
ff7b595032 Add cursor-tracking card glare and accent-linked background blobs
- Subtle radial glare follows cursor over card/template-card elements
  using a single document-level mousemove listener (event delegation)
- Ambient background blob colors now derive from the selected accent
  color with hue-shifted variants
- Glare intensity kept very subtle (3.5% dark / 12% light theme)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 11:13:55 +03:00
2a73b92d4a Add per-layer LED preview for composite color strip sources
When a target uses a composite CSS source, the LED preview now shows
individual layer strips below the blended composite result. Backend
stores per-layer color snapshots and sends an extended binary wire
format; frontend renders separate canvases with hover labels.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-11 17:51:35 +03:00
bf910204a9 Fix UI review issues: accessibility, i18n, duplicate IDs, URL overflow
- Rename duplicate id="settings-error" to "device-settings-error"
- Add missing i18n key value_source.scene_sensitivity.hint (en/ru/zh)
- Add accessible label to password-toggle and Stop All buttons
- Add aria-hidden toggle on connection overlay
- Fix static image URL overflow with ellipsis truncation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-11 14:37:56 +03:00
6a22757755 Add manual ping/health check button to device cards
Adds a refresh icon button on each device card that triggers an immediate
health check via POST /devices/{id}/ping, showing online status with
latency or offline result as a toast notification.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-11 12:51:40 +03:00
99d8c4b8fb Add connection overlay and Gitea CI/CD workflow
Show full-screen overlay with spinner when server is unreachable,
with periodic health checks that auto-hide on reconnect.
Add Gitea Actions workflow for auto-deploy on release tags.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-11 11:07:13 +03:00
d498bb72a9 Add per-layer brightness source to composite CSS and enhance selectors
- Add optional brightness_source_id per composite layer using ValueStreamManager
- Use EntitySelect for composite layer source and brightness dropdowns
- Use IconSelect for composite blend mode and notification filter mode
- Add i18n keys for blend mode and filter mode descriptions (en/ru/zh)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 21:03:58 +03:00
c78797ba09 Add test button to notification CSS cards and fix header stability
- Bell icon button on notification source cards triggers POST /notify
- Shows success/warning/error toast based on response
- Fix header shifting when sticky by moving it outside .container
- i18n keys added for en, ru, zh

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 20:36:27 +03:00
6349e91e0f Sticky header with centered tabs, scroll-spy, and full-width layout
- Move tab bar into header (centered between title and toolbar)
- Make entire header sticky with border-bottom separator
- Remove container max-width for full-width layout
- Add scroll-spy: tree sidebar tracks visible section on scroll
- Remember scroll position per tab when switching
- Remove sticky section headers, use scroll-margin-top instead
- Update sticky offsets to use --sticky-top CSS variable

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 15:29:37 +03:00
09b4a1b182 Fix tutorial tooltip flash at 0,0 and slow step transitions
- Hide tooltip/ring with visibility:hidden until first step is positioned
- Hide tooltip between steps when scrolling to prevent stale position flash
- Replace scrollend event (poor browser support, 500ms fallback) with
  requestAnimationFrame polling that resolves in ~50ms when scroll settles

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 12:48:13 +03:00
1559440a21 Add scroll-to-top button
Fixed button in bottom-right corner appears after scrolling 300px,
fades in with slide-up animation, smooth-scrolls to page top on click.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 12:06:08 +03:00
3915573514 Replace flat sub-tab bars with tree sidebar navigation
Add TreeNav component that groups related entity types into a
collapsible hierarchy for Targets and Sources tabs. Targets tree
shows section-level leaves (Devices, Color Strips, LED Targets,
KC Targets, Pattern Templates) with scroll-to-section on click.
Sources tree groups into Picture, Audio, and Utility categories.

Also fixes missing csAudioTemplates in stream section expand/collapse.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 12:03:31 +03:00
ee40d99067 Add Daylight Cycle value source type
New value source that outputs brightness (0-1) based on the daylight
color LUT, computing BT.601 luminance from the simulated sky color.
Supports real-time wall-clock mode or configurable simulation speed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 11:27:36 +03:00
73562cd525 Add entity CRUD events over WebSocket with auto-refresh
Broadcast entity_changed and device_health_changed events via the event
bus so the frontend can auto-refresh cards without polling. Adds
exponential backoff on WS reconnect.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 11:09:09 +03:00
7b4b455c7d Fix IconSelect grid overflow and scroll jump
- Set maxHeight dynamically based on available viewport space
- Clamp popup horizontally to stay within viewport
- Remove max-height CSS transition that caused scroll jumps
- Auto-close popup on ancestor scroll to prevent stale positioning

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 11:07:38 +03:00
37c80f01af Add Daylight Cycle and Candlelight CSS source types
Full-stack implementation of two new color strip source types:
- Daylight: simulates day/night color cycle with real-time or speed-based mode, latitude support
- Candlelight: multi-candle fire simulation with Gaussian falloff, layered-sine flicker, warm color shift

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 11:07:30 +03:00
954e37c2ca Add auto-restart for crashed processing loops, remove sync clock badge
- Auto-restart: ProcessorManager detects fatal task crashes via done
  callback and restarts with exponential backoff (2s-30s, max 5 attempts
  in 5 min window). Manual stop disables auto-restart. Restart state
  exposed in target state API and via WebSocket events.
- Remove "Running"/"Paused" badge label from sync clock dashboard cards
  (pause/play button already conveys state).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 01:53:04 +03:00
30fa107ef7 Add tags to all entity types with chip-based input and autocomplete
- Add `tags: List[str]` field to all 13 entity types (devices, output targets,
  CSS sources, picture sources, audio sources, value sources, sync clocks,
  automations, scene presets, capture/audio/PP/pattern templates)
- Update all stores, schemas, and route handlers for tag CRUD
- Add GET /api/v1/tags endpoint aggregating unique tags across all stores
- Create TagInput component with chip display, autocomplete dropdown,
  keyboard navigation, and API-backed suggestions
- Display tag chips on all entity cards (searchable via existing text filter)
- Add tag input to all 14 editor modals with dirty check support
- Add CSS styles and i18n keys (en/ru/zh) for tag UI
- Also includes code review fixes: thread safety, perf, store dedup

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 22:20:19 +03:00
2712c6682e Add EntitySelect/IconSelect UI improvements across modals
- Portal IconSelect popups to document.body with position:fixed to prevent
  clipping by modal overflow-y:auto
- Replace custom scene selectors in automation editor with EntitySelect
  command-palette pickers (main scene + fallback scene)
- Add IconSelect grid for automation deactivation mode (none/revert/fallback)
- Add IconSelect grid for automation condition type and match type
- Replace mapped zone source dropdowns with EntitySelect pickers
- Replace scene target selector with EntityPalette.pick() pattern
- Remove effect palette preview bar from CSS editor
- Remove sensitivity badge from audio color strip source cards
- Clean up unused scene-selector CSS and scene-target-add-row CSS
- Add locale keys for all new UI elements across en/ru/zh

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 16:00:30 +03:00
32e0f0eb5c Improve calibration UI: animated config sections, always-visible tick labels, zoom-independent fonts, smooth line selection
- Replace <details> with grid-template-rows animated expand for template config sections
- Always show edge boundary tick labels in both simple and advanced calibration
- Make tick labels, monitor names, and tick marks zoom-independent in advanced calibration
- Place new monitors next to existing ones and fit view on add
- Fix layout jump on line selection: toggle class in-place instead of DOM rebuild
- Use transparent border-left on all line items to prevent content shift

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 15:10:29 +03:00
353a1c2d85 Rename picture-targets to output-targets across entire codebase
Rename all Python modules, classes, API endpoints, config keys, frontend
fetch URLs, and Home Assistant integration URLs from picture-targets to
output-targets. Store loads both new and legacy JSON keys for backward
compatibility with existing data files.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 10:55:36 +03:00
5b4813368b Add visual selectors to automation and KC target editors
Automation editor:
- IconSelect grid for condition logic (OR/AND) with descriptions

KC target editor:
- IconSelect for color mode (average/median/dominant) with SVG previews
- EntitySelect palette for picture source, pattern template, brightness source

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 10:12:57 +03:00
8061c26bef Fix autorestore logic and protocol badge per device type
Autorestore fixes:
- Snapshot WLED state before connect() mutates it (lor, AudioReactive)
- Gate restore on auto_shutdown setting (was unconditional)
- Remove misleading auto_restore capability from serial provider
- Default auto_shutdown to false for all new devices

Protocol badge fixes:
- Show correct protocol per device type (OpenRGB SDK, MQTT, WebSocket)
- Was showing "Serial" for all non-WLED devices

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 10:04:40 +03:00
96bd3bd0f0 Add name auto-generation for value source modal
Auto-generates name from type + key config (waveform, audio mode, picture source)
for new value sources. Skips when editing or after manual name input.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 09:43:24 +03:00
0984a3b639 Add IconSelect for filter types, audio modes, engine descriptions; fix scroll flash
- Filter type picker: IconSelect with 3-column grid, auto-add on select, removed redundant + button
- Audio mode picker: IconSelect with SVG visualizations for RMS/Peak/Beat
- Capture engine grid: added per-engine icons and localized descriptions
- Fixed scroll flash during icon grid open animation (settled class after transitionend)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 01:01:49 +03:00
be91e74c6e Add visual IconSelect grid for filter type picker in PP template editor
Replace plain filter type dropdown with icon grid showing each filter
with its icon and description. Selecting a filter immediately adds it
to the template (no separate "+" click needed).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 00:45:43 +03:00
a728c75113 Add visual IconSelect selectors for effect, palette, gradient, waveform dropdowns
Replace plain <select> dropdowns with rich visual selectors:
- Effect type: icon grid with descriptions
- Effect/audio palette: gradient strip previews from color data
- Gradient preset: gradient strip previews (13 presets)
- Audio visualization: icon grid with descriptions
- Notification effect: icon grid with descriptions
- Waveform (value source): inline SVG shape previews

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 00:41:05 +03:00
dc4495a117 Add collapsible pipeline metrics and error indicator to target cards
FPS chart stays always visible; timing, frames, keepalive, errors, and
uptime are collapsed behind an animated toggle. Error warning icon
appears next to target name when errors_count > 0. Uses CSS grid
0fr→1fr transition for smooth expand/collapse animation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 00:27:08 +03:00
6fc0e20e1d Add command palette entity selector for all editor dropdowns
Replace plain <select> dropdowns with a searchable command palette modal
for 16 entity selectors across 6 editors (targets, streams, CSS sources,
value sources, audio sources, pattern templates). Unified EntityPalette
singleton + EntitySelect wrapper in core/entity-palette.js.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 00:17:44 +03:00
b4d89e271d Apply IconSelect to all type selectors across the app
- Value source type (5 types, static icons)
- Device type (7 types, new wifi/usb icon paths + device icon map)
- Capture engine (dynamic from API, uses getEngineIcon)
- Audio engine (dynamic from API, new getAudioEngineIcon)
- Add i18n description keys for value source and device types
- Fix trigger button styling to match native input height

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-08 23:57:37 +03:00
d95eb683e1 Add reusable icon-grid type selector for CSS source editor
Replaces the plain <select> dropdown with a visual grid popup showing
icon, label, and description for each source type. The IconSelect
component is generic and reusable for other type selectors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-08 23:15:39 +03:00
d6bda9afed Unify process picker, improve notification CSS editor, remove notification led_count
- Extract shared process picker module (core/process-picker.js) used by
  both automation conditions and notification CSS app filter
- Remove led_count property from notification CSS source (backend + frontend)
- Replace comma-separated app filter with newline-separated textarea + browse
- Inline color cycle add button (+) into the color row
- Fix notification app color layout to horizontal rows

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-08 22:58:36 +03:00
a330a8c0f0 Add clone support for scene and automation cards, update sync clock descriptions
- Scene clone: opens capture modal with prefilled name/description/targets
  instead of server-side duplication; removed backend clone endpoint
- Automation clone: opens editor with prefilled conditions, scene, logic,
  deactivation mode (webhook tokens stripped for uniqueness)
- Updated sync clock i18n descriptions to reflect speed-only-on-clock model
- Added entity card clone pattern documentation to server/CLAUDE.md

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-08 22:47:11 +03:00
bc5d8fdc9b Remove led_count from static, gradient, color_cycle, and effect CSS sources
These types always auto-size from the connected device — the explicit
led_count override was unused clutter. Streams now use getattr fallback.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-08 21:21:00 +03:00
de04872fdc Add notification reactive color strip source with webhook trigger
New source_type "notification" fires one-shot visual effects (flash, pulse, sweep)
triggered via POST webhook. Designed as a composite layer for overlay on persistent
sources. Includes app color mapping, whitelist/blacklist filtering, and auto-sizing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-08 21:10:32 +03:00
80b48e3618 Add clone support for scene presets and update TODO
- Add clone_preset() to ScenePresetStore with deep copy of target snapshots
- Add POST /scene-presets/{id}/clone API endpoint
- Add clone button to scene preset cards in Automations tab
- Add i18n keys for clone feedback in all 3 locales
- Add TODO items for dashboard stats collapse and protocol badge review

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-08 20:17:09 +03:00
fddbd771f2 Replace auto-start with startup automation, add card colors to dashboard
- Add `startup` automation condition type that activates on server boot,
  replacing the per-target `auto_start` flag
- Remove `auto_start` field from targets, scene snapshots, and all API layers
- Remove auto-start UI section and star buttons from dashboard and target cards
- Remove `color` field from scene presets (backend, API, modal, frontend)
- Add card color support to scene preset cards (color picker + border style)
- Show localStorage-backed card colors on all dashboard cards (targets,
  automations, sync clocks, scene presets)
- Fix card color picker updating wrong card when duplicate data attributes
  exist by using closest() from picker wrapper instead of global querySelector
- Add sync clocks step to Sources tab tutorial
- Bump SW cache v9 → v10

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-02 01:09:27 +03:00
f08117eb7b Add sync clock cards to dashboard and match FPS chart colors
Sync clocks now appear as compact cards on the dashboard with
pause/resume/reset controls and click-to-navigate. Dashboard FPS
sparkline charts use the same blue/green colors as target card charts.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 22:26:29 +03:00
39e41dfce7 Remove per-source speed, fix device dirty check, and add frontend caching
Speed is now exclusively controlled via sync clocks — CSS sources no longer
carry their own speed/cycle_speed fields. Streams default to 1.0× when no
clock is assigned. Also fixes false-positive dirty check on the device
settings modal (array reference comparison) and converts several frontend
modules to use DataCache for consistent API response caching.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 22:07:54 +03:00
aa1e4a6afc Add sync clock entity for synchronized animation timing
Introduces Synchronization Clocks — shared, controllable time bases
that CSS sources can optionally reference for synchronized animation.

Backend:
- New SyncClock dataclass, JSON store, Pydantic schemas, REST API
- Runtime clock with thread-safe pause/resume/reset and speed control
- Ref-counted runtime pool with eager creation for API control
- clock_id field on all ColorStripSource types
- Stream integration: clock time/speed replaces source-local values
- Paused clock skips rendering (saves CPU + stops frame pushes)
- Included in backup/restore via STORE_MAP

Frontend:
- Sync Clocks tab in Streams section with cards and controls
- Clock dropdown in CSS editor (hidden speed slider when clock set)
- Clock crosslink badge on CSS source cards (replaces speed badge)
- Targets tab uses DataCache for picture/audio sources and sync clocks

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 21:46:55 +03:00
52ee4bdeb6 Add OpenRGB per-zone LED control with separate/combined modes and zone preview
- Zone picker UI in device add/settings modals with per-zone checkbox selection
- Combined mode: pixels distributed sequentially across zones
- Separate mode: full effect resampled independently to each zone via linear interpolation
- Per-zone LED preview in target cards: one canvas strip per zone with hover overlay labels
- Zone badges on device cards enriched with actual LED counts from OpenRGB API
- Fix stale led_count by using device_led_count discovered at connect time

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 20:35:51 +03:00