alexei.dolgolyov 70c95d1c09 feat(ui): item-card restyle, perf hover tooltips, FPS ceiling
Item cards (Automations, Channels, Inputs, Integrations):
- `.card-title` — bumped to weight 700, -0.01em tracking, solid --lux-ink
  for better presence against the flat card bg.
- `.card-subtitle` / `.card-meta` — mono font, 0.04em tracking, tighter
  gap so rule chips pack in a readable row.
- `.stream-card-prop` rule chips — rectangular 2px radius + hairline
  border + flat dark bg (was rounded 10px grey pill). Channel-signal
  icon tint; hover fades in a channel-green wash with matching border.
- `.badge` generic — rectangular 2px radius, mono 0.62rem, 0.12em
  tracking, hairline border slot for variants.
  - `.badge-automation-active` — channel-signal tinted bg + border +
    soft outer glow so the "ACTIVE" state reads at a glance.
  - `.badge-automation-inactive` / `-disabled` — transparent with a
    hairline outline so they sit quietly alongside the active variant.
- `.device-url-badge` — switched from rounded pill to rectangular
  hairline mono chip; hover shifts to filled bg + bolder border +
  brighter ink.
- `.card-actions` — 1px hairline top divider, 6px gap.
- `.btn-icon` — 7/10px padding, 1rem icon, hairline border, channel-
  signal glow on hover (replaces the old scale(1.1) jiggle).
  - `.btn-icon.btn-warning` — amber ink + hairline + amber hover glow
    (drives the "disable" action in the automation card).
  - `.btn-icon.btn-success` — signal-green ink + hairline + green hover
    glow ("enable" action).

Cross-link navigation highlight:
- `cardHighlight` keyframes were using an undefined `--primary-rgb` var,
  so the outer glow fell back to 59/130/246 (the Tailwind blue default).
  Rewritten with `var(--ch-signal)` + color-mix so the highlight tracks
  the accent picker and reads as signal-green. Added double-layer
  box-shadow (ring + 32px/10px bloom) so the highlight is obvious on
  the flat dark/light card surfaces. Added .dashboard-target to the
  selector + `isolation: isolate` so the glow isn't clipped inside
  overflow: hidden containers (perf strip cells, tree-nav panels).

Perf strip (follow-up polish):
- Total FPS cell shows `/<N>` ceiling suffix next to the live value —
  sum of fps_target across running targets, styled like the Patches
  "/12". A dashed horizontal reference line at that ceiling is rendered
  on the sparkline so the live value reads as "percentage of max
  achievable throughput." Y-axis ceiling grows to targetSum * 1.1 so
  the dashed line never clips.
- Removed the empty `.perf-chart-app` pill in the FPS cell (no app
  variant). Added `:empty { display: none }` as a safety so any other
  unpopulated cell doesn't render a ghost pill.
- Hover tooltips on all sparks — single floating `.perf-chart-tooltip`
  in <body> with fixed positioning; event-delegated from the perf
  grid so re-renders don't need rebinding. Shows metric label + sys
  value + app value (in both-mode) + "−Ns ago" age line derived from
  the poll interval. Vertical marker line follows the cursor over the
  spark; `cursor: crosshair` on the spark container signals interact-
  ability. `pointer-events: none` shifted from the spark container
  down to the inner SVG so hover events land on the container.

Grid:
- Perf strip capped at 4 cols even on widescreen; wraps to 2 rows ×
  4 when the full 7 cells are present. Responsive breakpoints at
  1100 / 760 / 480 px.
- Big value font uses `clamp(1.8rem, 2.8vw, 2.8rem)` so readouts
  like "18.9/31.8 GB" fit a 1fr cell at desktop while still scaling
  down on narrow viewports. `white-space: nowrap; flex-wrap: nowrap;
  overflow: hidden; text-overflow: clip` prevents mid-text wrapping.
- `.perf-chart-spark` uses `margin-top: auto` so sparkline baselines
  align across cells regardless of whether a subtitle is present
  (CPU/GPU model name, FPS min/max).

Dashboard target meta:
- Integrations card stripe reverted to the default signal color so it
  matches the overall accent picker; the health-dot inside the card
  carries the connection state. Removed the per-integration channel
  override in both cards.css and dashboard.css.

Section headers:
- `.dashboard-section-header` / `.subtab-section-header` underline
  switched from dashed to solid; channel-green 40px accent rule on
  the left remains.
- Section count badge (`.dashboard-section-count`) restyled to match
  the rest of the badge family (mono tabular-nums, 2px radius, hairline
  border, --lux-bg-3 fill).

Build: tsc --noEmit clean; CSS bundle stable at ~216 KB.
2026-04-24 21:59:30 +03:00
2026-04-22 19:48:37 +03:00

LED Grab

Ambient lighting system that captures screen content and drives LED strips in real time. Supports WLED, Adalight, AmbileD, and DDP devices with audio-reactive effects, pattern generation, and automated profile switching.

What It Does

The server captures pixels from a screen (or Android device via ADB), extracts border colors, applies post-processing filters, and streams the result to LED strips at up to 60 fps. A built-in web dashboard provides device management, calibration, live LED preview, and real-time metrics — no external UI required.

A Home Assistant integration exposes devices as entities for smart home automation.

Features

Screen Capture

  • Multi-monitor support with per-target display selection
  • 6 capture engine backends — MSS (cross-platform), DXCam, BetterCam, Windows Graphics Capture (Windows), Scrcpy (Android via ADB), Camera/Webcam (OpenCV)
  • Configurable capture regions, FPS, and border width
  • Capture templates for reusable configurations

LED Device Support

  • WLED (HTTP/UDP) with mDNS auto-discovery
  • Adalight (serial) — Arduino-compatible LED controllers
  • AmbileD (serial)
  • DDP (Distributed Display Protocol, UDP)
  • OpenRGB — PC peripherals (keyboard, mouse, RAM, fans, LED strips)
  • Serial port auto-detection and baud rate configuration

Color Processing

  • Post-processing filter pipeline: brightness, gamma, saturation, color correction, auto-crop, frame interpolation, pixelation, flip
  • Reusable post-processing templates
  • Color strip sources: audio-reactive, pattern generator, composite layering, audio-to-color mapping
  • Pattern templates with customizable effects

Audio Integration

  • Multichannel audio capture from any system device (input or loopback)
  • WASAPI engine on Windows, Sounddevice (PortAudio) engine on Linux/macOS
  • Per-channel mono extraction
  • Audio-reactive color strip sources driven by frequency analysis

Automation

  • Profile engine with condition-based switching (time of day, active window, etc.)
  • Dynamic brightness value sources (schedule-based, scene-aware)
  • Key Colors (KC) targets with live WebSocket color streaming

Dashboard

  • Web UI at http://localhost:8080 — no installation needed on the client side
  • Progressive Web App (PWA) — installable on phones and tablets with offline caching
  • Responsive mobile layout with bottom tab navigation
  • Device management with auto-discovery wizard
  • Visual calibration editor with overlay preview
  • Live LED strip preview via WebSocket
  • Real-time FPS, latency, and uptime charts
  • Localized in English, Russian, and Chinese

Home Assistant Integration

  • HACS-compatible custom component
  • Light, switch, sensor, and number entities per device
  • Real-time metrics via data coordinator
  • WebSocket-based live LED preview in HA

Requirements

  • Python 3.11+ (or Docker)
  • A supported LED device on the local network or connected via USB
  • Windows, Linux, or macOS — all core features work cross-platform

Platform Notes

Feature Windows Linux / macOS
Screen capture DXCam, BetterCam, WGC, MSS MSS
Webcam capture OpenCV (DirectShow) OpenCV (V4L2)
Audio capture WASAPI, Sounddevice Sounddevice (PulseAudio/PipeWire)
GPU monitoring NVIDIA (pynvml) NVIDIA (pynvml)
Android capture Scrcpy (ADB) Scrcpy (ADB)
Monitor names Friendly names (WMI) Generic ("Display 0")
Profile conditions Process/window detection Not yet implemented

Quick Start

git clone https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab.git
cd ledgrab/server
docker compose up -d

Manual

Requires Python 3.11+ and Node.js 18+.

git clone https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab.git
cd ledgrab/server

# Build the frontend bundle
npm ci && npm run build

# Create a virtual environment and install
python -m venv venv
source venv/bin/activate        # Linux/Mac
# venv\Scripts\activate         # Windows
pip install .

# Start the server
export PYTHONPATH=$(pwd)/src    # Linux/Mac
# set PYTHONPATH=%CD%\src       # Windows
uvicorn ledgrab.main:app --host 0.0.0.0 --port 8080

Open http://localhost:8080 to access the dashboard.

Important: The default API key is development-key-change-in-production. Change it before exposing the server outside localhost. See INSTALLATION.md for details.

See INSTALLATION.md for the full installation guide, including configuration, Docker manual builds, and Home Assistant setup.

Demo Mode

Demo mode runs the server with virtual devices, sample data, and isolated storage — useful for exploring the UI without real hardware.

Set the LEDGRAB_DEMO environment variable to true, 1, or yes:

# Docker
docker compose run -e LEDGRAB_DEMO=true server

# Python
LEDGRAB_DEMO=true uvicorn ledgrab.main:app --host 0.0.0.0 --port 8081

# Windows (installed app)
set LEDGRAB_DEMO=true
LedGrab.bat

Demo mode uses port 8081, config file config/demo_config.yaml, and stores data in data/demo/ (separate from production data). It can run alongside the main server.

Architecture

ledgrab/
├── server/                          # Python FastAPI backend
│   ├── src/ledgrab/
│   │   ├── main.py                  # Application entry point
│   │   ├── config.py                # YAML + env var configuration
│   │   ├── api/
│   │   │   ├── routes/              # REST + WebSocket endpoints
│   │   │   └── schemas/             # Pydantic request/response models
│   │   ├── core/
│   │   │   ├── capture/             # Screen capture, calibration, pixel processing
│   │   │   ├── capture_engines/     # MSS, DXCam, BetterCam, WGC, Scrcpy, Camera backends
│   │   │   ├── devices/             # WLED, Adalight, AmbileD, DDP, OpenRGB clients
│   │   │   ├── audio/               # Audio capture engines
│   │   │   ├── filters/             # Post-processing filter pipeline
│   │   │   ├── processing/          # Stream orchestration and target processors
│   │   │   └── profiles/            # Condition-based profile automation
│   │   ├── storage/                 # JSON-based persistence layer
│   │   ├── static/                  # Web dashboard (vanilla JS, CSS, HTML)
│   │   │   ├── js/core/             # API client, state, i18n, modals, events
│   │   │   ├── js/features/         # Feature modules (devices, streams, targets, etc.)
│   │   │   ├── css/                 # Stylesheets
│   │   │   └── locales/             # en.json, ru.json, zh.json
│   │   └── utils/                   # Logging, monitor detection
│   ├── config/                      # default_config.yaml
│   ├── tests/                       # pytest suite
│   ├── Dockerfile
│   └── docker-compose.yml
├── docs/
│   ├── API.md                       # REST API reference
│   └── CALIBRATION.md               # LED calibration guide
├── INSTALLATION.md
└── LICENSE                          # MIT

Configuration

Edit server/config/default_config.yaml or use environment variables with the LEDGRAB_ prefix:

server:
  host: "0.0.0.0"
  port: 8080
  log_level: "INFO"

auth:
  api_keys:
    dev: "development-key-change-in-production"

storage:
  devices_file: "data/devices.json"
  templates_file: "data/capture_templates.json"

logging:
  format: "json"
  file: "logs/ledgrab.log"
  max_size_mb: 100

Environment variable override example: LEDGRAB_SERVER__PORT=9090.

API

The server exposes a REST API (with Swagger docs at /docs) covering:

  • Devices — CRUD, discovery, validation, state, metrics
  • Capture Templates — Screen capture configurations
  • Picture Sources — Screen capture stream definitions
  • Picture Targets — LED target management, start/stop processing
  • Post-Processing Templates — Filter pipeline configurations
  • Color Strip Sources — Audio, pattern, composite, mapped sources
  • Audio Sources — Multichannel and mono audio device configuration
  • Pattern Templates — Effect pattern definitions
  • Value Sources — Dynamic brightness/value providers
  • Key Colors Targets — KC targets with WebSocket live color stream
  • Profiles — Condition-based automation profiles

All endpoints require API key authentication via X-API-Key header or ?token= query parameter.

See docs/API.md for the full reference.

Calibration

The calibration system maps screen border pixels to physical LED positions. Configure layout direction, start position, and per-edge segments through the web dashboard or API.

See docs/CALIBRATION.md for a step-by-step guide.

Home Assistant

For Home Assistant integration, see the separate ledgrab-haos-integration repository.

Development

cd server

# Install with dev dependencies
pip install -e ".[dev]"

# Run tests
pytest

# Format and lint
black src/ tests/
ruff check src/ tests/

Optional extras:

pip install -e ".[perf]"     # High-performance capture engines (Windows)
pip install -e ".[camera]"   # Webcam capture via OpenCV

License

MIT — see LICENSE.

Acknowledgments

  • WLED — LED control firmware
  • FastAPI — Python web framework
  • MSS — Cross-platform screen capture
S
Description
Ambient lighting system that captures screen content and drives LED strips in real time. Supports WLED, Adalight, AmbileD, DDP, and OpenRGB devices with audio-reactive effects, pattern generation, CSS-driven color strips, and automated profile switching. Built-in web dashboard included.
Readme MIT 52 MiB
2026-06-23 14:48:51 +03:00
Languages
Python 52.7%
TypeScript 30.2%
HTML 7.1%
CSS 6.9%
Kotlin 2%
Other 1%