Files
ledgrab/server
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

LedGrab - Server

High-performance FastAPI server that captures screen content and controls WLED devices for ambient lighting.

Overview

The server component provides:

  • 🎯 Real-time Screen Capture - Multi-monitor support with configurable FPS
  • 🎨 Advanced Processing - Border pixel extraction with color correction
  • 🔧 Flexible Calibration - Map screen edges to any LED layout
  • 🌐 REST API - Complete control via 25+ REST endpoints
  • 💾 Persistent Storage - JSON-based device and configuration management
  • 📊 Metrics & Monitoring - Real-time FPS, status, and performance data

Quick Start

# Start server
docker-compose up -d

# View logs
docker-compose logs -f

# Stop server
docker-compose down

Server runs on: http://localhost:8080

Option 2: Python

# Create virtual environment
python -m venv venv

# Activate
source venv/bin/activate  # Linux/Mac
venv\Scripts\activate      # Windows

# Install dependencies
pip install .

# Set PYTHONPATH
export PYTHONPATH=$(pwd)/src  # Linux/Mac
set PYTHONPATH=%CD%\src       # Windows

# Run server
uvicorn ledgrab.main:app --host 0.0.0.0 --port 8080

Installation

Requirements

  • Python 3.11+ (for Python installation)
  • Docker & Docker Compose (for Docker installation)
  • WLED device on your network

See ../INSTALLATION.md for comprehensive installation guide.

Configuration

Configuration File

Edit config/default_config.yaml:

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

processing:
  default_fps: 30        # Target frames per second
  max_fps: 60           # Maximum allowed FPS
  border_width: 10      # Pixels to sample from edge

wled:
  timeout: 5            # Connection timeout (seconds)
  retry_attempts: 3     # Number of retries

storage:
  devices_file: "data/devices.json"

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

Environment Variables

# Server configuration
export LEDGRAB_SERVER__HOST="0.0.0.0"
export LEDGRAB_SERVER__PORT=8080
export LEDGRAB_SERVER__LOG_LEVEL="INFO"

# Processing configuration
export LEDGRAB_PROCESSING__DEFAULT_FPS=30
export LEDGRAB_PROCESSING__BORDER_WIDTH=10

# WLED configuration
export WLED_WLED__TIMEOUT=5

Usage

WLED Device Setup

Important: Configure your WLED device using the official WLED web interface before connecting it to this controller:

  1. Access WLED Interface: Open http://[wled-ip] in your browser
  2. Configure Device Settings:
    • Set LED count and type
    • Configure brightness, color order, and power limits
    • Set up segments if needed
    • Configure effects and presets

This controller only sends pixel color data - it does not manage WLED settings like brightness, effects, or segments. All WLED device configuration should be done through the official WLED interface.

API Documentation

Quick Example

# 1. Add device
curl -X POST http://localhost:8080/api/v1/devices \
  -H "Content-Type: application/json" \
  -d '{"name":"Living Room","url":"http://192.168.1.100","led_count":150}'

# 2. Start processing
curl -X POST http://localhost:8080/api/v1/devices/{device_id}/start

# 3. Check status
curl http://localhost:8080/api/v1/devices/{device_id}/state

Testing

# Run all tests
pytest

# Run with coverage
pytest --cov=ledgrab --cov-report=html

# Run specific test
pytest tests/test_screen_capture.py -v

Development

Project Structure

src/ledgrab/
├── main.py              # FastAPI application
├── config.py            # Configuration
├── api/                 # API routes
├── core/                # Core functionality
│   ├── screen_capture.py
│   ├── wled_client.py
│   ├── calibration.py
│   └── processor_manager.py
├── storage/             # Data persistence
└── utils/               # Utilities

Code Quality

# Format code
black src/ tests/

# Lint code
ruff check src/ tests/

License

MIT - see ../LICENSE

Support