Files
ledgrab/server
alexei.dolgolyov e5a2af9821 feat(ui): dashboard polish, richer perf strip, transport-bar controls
Dashboard perf strip:
- Unified rack-module shell with hairline-divided cells (mockup parity)
  replacing 3 separate perf cards. Cells auto-wrap to 2 rows of 4 on
  widescreen; responsive breakpoints at 1100 / 760 / 480 px.
- Active Patches cell (first) shows running/total channel count plus up
  to 4 live FPS readouts with channel-colored stripes; bottom-right
  radial glow anchors the "live channel bank" corner.
- Total FPS cell — aggregate throughput across running targets, mono
  "fps" unit suffix, session-peak-scaled sparkline with a 60 FPS floor.
- Devices cell — online/total count + per-device dot strip (green when
  online with signal-glow, coral when offline, tooltip with name +
  latency), fed from /devices/batch/states (added to the dashboard
  batch poll).
- Value font uses clamp(1.8rem, 2.8vw, 2.8rem) + white-space: nowrap so
  long readouts (RAM "18.9/31.8 GB", GPU "50% · 37°C") scale down
  instead of wrapping.
- Sparklines anchor to the cell bottom via margin-top: auto so baselines
  align across cells regardless of subtitle presence.
- App-load tag ("APP 3.1%") moved to a pinned top-right position per
  card, accent-colored pill; replaces the subdued inline badge.
- Perf mode toggle (System / App / Both) triggers an immediate poll so
  positioning updates without waiting for the next tick.
- Chart.js removed from perf-charts — inline SVG sparklines with
  drop-shadow filter for the "lit instrument" feel. Chart.js still used
  for per-target FPS charts via chart-utils (now owns the registration).
- Fixed history seed bug: app_ram is MB in the server history payload,
  not percent — convert to percent using sample's ram_total before
  pushing into _appHistory.ram. Skip seeding app_gpu_mem since the
  history schema has no gpu_memory_total.
- Temperature card reveals with an explanatory hint when the backend
  reports cpu_temp_hint_key (e.g. Windows without LibreHardwareMonitor)
  instead of silently hiding; .perf-chart-card-hint neutralizes the big
  display font so the message reads as plain body copy.

Transport bar:
- LED brand mark — 28 px, double-layer signal glow (0 22px + 0 8px),
  brandPulse animation. Brand-stack wraps the title + version so
  "LED GRAB" sits above "V0.3.0" on a single line each.
- Transport status chip — bigger (9/18 padding), mono uppercase,
  inner+outer signal glow when .is-armed.
- Transport meta cells — Uptime (JS-local session ticker), CPU (app
  CPU share), Mem (app RAM, G/M format) as stacked KEY/VALUE mono
  readouts with hairline separators.
- New interactive Poll cell cycles through 1/2/5/10s presets on click;
  replaces the range slider that used to live in the Dashboard toolbar
  (it controlled the whole app, not just the Dashboard).
- Header icon buttons — hairline-bordered 30 px squares with channel-
  glow on hover, replacing the pill container.
- Perf poll moved to global bootstrap so transport CPU / Mem stay live
  across all tabs (was paused when leaving the Dashboard).
- Connection pip (#server-status) hidden; the brand mark itself turns
  coral when offline via :has() selector on .header-title.

Dashboard cards:
- renderDashboardTarget now emits full rack-module markup with CH badge,
  name, meta, LED cluster, 3-cell metric grid (FPS / Uptime / Errors),
  and patch-label + stop button. Running cards get the signal-flow
  strip at the bottom. data-fps-text / data-uptime-text / data-errors-
  text hooks preserved so _updateRunningMetrics updates in place.
- LED count surfaced in the target card meta line (e.g. "LED · WLED ·
  144 LED · GRADIENT") when the linked device reports led_count > 0.
- Integrations (HA + MQTT) picked up .mod-head markup — compact module
  layout with online/offline patch indicator. Integration card stripe
  uses the default signal color (not cyan or amber).
- Scene presets, sync clocks, automations gain the same compact module
  treatment. Automations/scenes dropped into a dashboard-autostart-grid
  so they share the visual language.
- Perf mode toggle, stream sub-tabs, cs-count / tree-count /
  tab-badge / dashboard-section-count badges all use the mono
  rectangular style with tabular-nums.

Command palette:
- Flat background (no gradient), channel-accent rule across the top,
  mono placeholder / group headers / footer, active result gets a
  channel-green left stripe.

Modals:
- Popover + backdrop get a stronger radial dim + 6 px blur.
- Per-modal-ID channel lanes (target→green, source→cyan, audio→magenta,
  automation/scene→violet, settings→amber, confirm→coral) via --modal-ch
  override.
- Modal header picks up a vertical channel stripe + hairline divider;
  footer gets hairline top + subtle wash.

Components:
- Inputs use hairline borders + tabular-nums mono for number fields;
  focus state has channel-green ring + soft glow.
- Buttons switch to mono-uppercase with signal-glow on primary,
  coral-glow on danger, hairline border on secondary.
- Card background flattened — removed gradient wash in favor of solid
  --lux-bg-1 for both dark (#0e1014) and light (#f6f8fb).
- Page background: pure black for dark, pure white for light.

Color-picker:
- Always detaches to <body> with fixed positioning when its swatch sits
  inside an overflow: hidden / auto / clip ancestor (perf strip, modal
  bodies, tree-dd panels). Prevents the popover getting clipped.

Settings modal:
- Remembers the last-opened tab via localStorage key
  settings_active_tab; falls back to 'general' if the tab id no longer
  exists. Explicit overrides (donation → about, update badge →
  updates) still work because callers invoke switchSettingsTab after
  openSettingsModal.

Microcopy:
- Sidebar / transport localization for en/ru/zh:
  sidebar.workspaces · transport.meta.{uptime,cpu,mem,poll,poll_hint}
  · transport.status.{ready,armed} · dashboard.perf.{active_patches,
  total_fps,devices}

Backend (coordinated with frontend):
- /system/performance now returns cpu_temp_hint_key when no live CPU
  temperature is available, so the Temperature card can render an
  actionable explainer instead of being hidden. Frontend respects the
  key via t() lookup.

Section headers:
- Underline switched from dashed to solid; channel-green accent rule
  (40 px) on the left remains.

Build / tests:
- ruff clean on touched Python files.
- tsc --noEmit clean.
- Python metrics-provider tests: 18 passed.
- CSS bundle ~214 KB.
2026-04-24 20:28:44 +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