Skip to content

Alpine.js + Pico CSS web UI rewrite - #9

Open
tomerlichtash wants to merge 6 commits into
mainfrom
feature/alpine-pico-ui
Open

tomerlichtash wants to merge 6 commits into
mainfrom
feature/alpine-pico-ui

Conversation

@tomerlichtash

Copy link
Copy Markdown
Owner

Summary

  • Web UI rewrite: Replaced inline HTML/JS with Alpine.js + Pico CSS dark theme
  • SQLite event log: Persistent unified event log with 24h rolling window, incremental polling, and pagination
  • Remove ffmpeg pipeline: Switch from ffmpeg+input_file to direct mjpg_streamer input_uvc — eliminates glitches, drops CPU from ~300% to ~25%, enables smooth 1080p@30fps
  • DEFCON API command: defcon [2|4|5] for testing state transitions without triggering tweets/posts
  • UI features: Collapsible panels, service transition indicators (starting/stopping), camera toggle with hover states and loading spinner, CPU/Temp sparkline charts, DEFCON state labels in header, persistent localStorage state

Changes

  • bin/mjpg-ctl — Replaced ffmpeg+input_file with input_uvc, removed OSD drawtext filters and eq filter
  • bin/mjpg-web — Added SQLite event log, DEFCON API, server-side change detection, background pruning
  • lib/event_log.py — New SQLite-backed unified event log module
  • lib/alert_log.py — Dual-write to unified event log
  • lib/sysinfo.py — Added DB status/size, removed ffmpeg service check
  • static/app.js — Full Alpine.js rewrite with reactive state, sparklines, localStorage persistence
  • static/style.css — Pico CSS overrides, responsive layout, sparklines, service indicators
  • templates/index.html — Alpine.js template with collapsible panels, event log with filters
  • AGENTS.md / README.md — Updated architecture docs

Test plan

  • Verify camera stream at 1080p@30fps without glitches
  • Test DEFCON state transitions via API
  • Verify event log persistence across page refreshes
  • Test camera toggle button states (on/off/loading)
  • Verify publish to Telegram/Twitter targets
  • Check sparkline charts populate over time

🤖 Generated with Claude Code

tomerlichtash and others added 6 commits March 11, 2026 10:47
- Replace vanilla JS UI with Alpine.js + Pico CSS dark theme
- Add unified SQLite event log (24h rolling window, incremental polling, pagination)
- Add defcon API command for testing (sets state, OSD, starts/stops camera)
- Dual-write alerts/scans to unified event log from alert_log.py
- Server-side detection of service state changes, DEFCON transitions, temp warnings
- Add DB status with size to system panel, service start/restart buttons
- Friendly OSD labels (CLEAR SKIES, INCOMING ALERT, INCOMING MISSILES)
- Update README and AGENTS.md with event log and defcon API docs

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

- Add collapse/uncollapse toggle to event log panel with chevron
- Move status bar inline next to header DEFCON label
- Full-width layout with 1600px max-width for ultra-wide screens
- Service transition indicators: yellow dot with (starting)/(stopping) labels
- Delay sysinfo poll after service actions to show transition state
- Rename Publish panel to General, Targets to Publish Targets
- Empty state: "Sky is clear!" / "Take a look" instead of Camera Off / Turn On
- Add sticky footer: "Coded under fire by Tomer Lichtash"
- Remove top header spacing, event log title border

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace ffmpeg+input_file pipeline with mjpg_streamer input_uvc (direct camera access)
- Remove ffmpeg from services list and sysinfo monitoring
- Remove OSD drawtext filters, eq filter, and custom font from ffmpeg
- Add DEFCON state labels in header (CLEAR SKIES / INCOMING ALERT / INCOMING MISSILES)
- Add camera toggle button with hover states, loading spinner, and localStorage persistence
- Add PUBLISH and FOCUS buttons in nav bar
- Add CPU/Temp sparkline charts with smooth curves and gradient fill
- Add Channels panel with toggle checkboxes for Telegram/Twitter (persisted)
- Persist publish channel preferences in localStorage
- Rename sidebar panels: Camera, System, Channels

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Fix _classify_alert to handle History API returning data as string
instead of list (was iterating characters, never matching cities).
Add grayscale and invert toggle buttons in Camera panel using CSS
filters on the stream image.

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

- Disable auto Twitter/Telegram posting on DEFCON 2 (keys preserved)
- Replace systemctl/uptime subprocess calls with direct /proc and
  /sys/fs/cgroup reads to reduce CPU and dbus overhead
- Add stream watchdog that auto-reconnects on stall
- Move CSS filter state out of Alpine active object to prevent
  reactivity interference with stream

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant