Dashboard
The PiEEG Server dashboard is a browser-based real-time visualization tool served at http://<host>:1617.
Session Lobby
When you open the dashboard, you land on the Session Lobby:
- Server URL field is pre-filled with your server's WebSocket address (
ws://localhost:1616by default). - Click Connect (or press Enter) to start streaming.
- Click ▶ Use Demo Server to prefill the public mock endpoint — no hardware required.
- Join with session code lets you paste a code or URL shared by someone else.
- Once connected, the Disconnect button in the header status bar closes the WebSocket and returns you to the lobby.
The hosted demo at pieeg.vercel.app (opens in a new tab) pre-fills the demo server URL automatically.
Topographic Map
The topographic map projects live band power across the head. It offers two views, toggled with the 3D / 2D switch in the panel toolbar:
- 3D (default) — your EEG is painted onto a real 3D head model (the same realistic head used by the Face Trainer experience). Drag to rotate; it also auto-rotates on load. This is a true volumetric surface, so the sides and back of the head are represented without the distortion of a flattened disc.
- 2D — the classic flattened scalp disc, kept as a lightweight fallback.
Montages
Use the montage buttons (visible in 3D mode) to choose how channels map onto the head:
| Montage | Use case | Electrodes |
|---|---|---|
| Scalp | PiEEG-8 / PiEEG-16 / IronBCI-32 | International 10-20 / 10-10 positions |
| XR Face | PiEEG XR face interface | 6 or 8 forehead / temple / cheek / jaw sites |
By default, channels are assigned in a sensible anatomical order (channel 1 → first position, and so on).
Placement editor
Because everyone places and names their own electrodes, the default layout is only a starting point. Click the ⚙ gear button on the map to open the placement editor and, per channel:
- Rename the electrode label.
- Remap it to any position from the standard list.
Your layout is saved in the browser (per device profile and channel count) and restored automatically. Use Reset to return to the default montage.
Controls
| Button | Action |
|---|---|
| 3D / 2D | Switch between the 3D head and the flat disc |
| Scalp / XR Face | Choose the montage family (3D mode) |
| ⟳ | Toggle auto-rotate |
| Aa | Toggle electrode labels |
| ⚙ | Open the placement editor |
The 3D field is interpolated on the GPU using a Gaussian kernel over geodesic (great-circle) distance on the head surface, with a coverage fade that dims regions no electrode is near — so sparse montages (like the 8-channel XR face) never fake data where there is none.
Features
| Feature | Description |
|---|---|
| Real-time waveforms | Canvas 2D, adaptive quality; time window 2–16 s, Y-scale ±50–500 µV |
| Signal quality badges | Live per-channel RMS with color feedback (green / yellow / red / gray) |
| Channel detail panel | Click to expand: zoomed trace, FFT, band power bars, histogram, statistics |
| Spectral analysis | 256-point FFT in Web Worker; PSD (log dB / linear); band power bars δ θ α β γ |
| Spectrogram | Scrolling time-frequency heatmap (Turbo colormap, –60 → 0 dB) |
| Topographic map | Real-time 3D head topography (GPU-interpolated) with a 2D fallback view; Scalp (10-20) & PiEEG XR face montages; editable electrode placement; selectable band metric |
| Statistics panel | 10 metrics per channel; sortable columns; CSV export |
| Filter preview | Live Butterworth magnitude response with –3 dB reference |
| Session library | Browse, replay recordings; play/pause, seek, speed control (0.5×–2×); annotations |
| AI chat assistant | BYO provider (OpenAI, Anthropic, Ollama, Groq, LM Studio); SSE streaming |
| Webhook panel | Visual rule builder; POST/PUT/PATCH/GET; Authorization headers; IFTTT & Zapier |
| Webcam feed | Optional video overlay |
| Performance monitor | FPS, frame time, JS heap overlay |
| Update banner | Version upgrade notification |
| Responsive | Desktop: all 16 channels. Mobile: 4-channel subset |
Keyboard Shortcuts
| Key | Action | Key | Action |
|---|---|---|---|
Space | Toggle pause | V | Experiences gallery |
R | Toggle record | C | Toggle chat |
F | Toggle FFT | W | Toggle webhooks |
G | Toggle spectrogram | P | Toggle perf monitor |
S | Toggle stats | Esc | Close overlays |
? | Show shortcut help |
EEG Frequency Bands
The dashboard color-codes all spectral data using standard EEG bands:
| Band | Range | Color |
|---|---|---|
| Delta (δ) | 0.5–4 Hz | #8b5cf6 purple |
| Theta (θ) | 4–8 Hz | #06b6d4 cyan |
| Alpha (α) | 8–13 Hz | #22c55e green |
| Beta (β) | 13–30 Hz | #f59e0b amber |
| Gamma (γ) | 30–100 Hz | #ef4444 red |
Tech Stack
| Layer | Tech |
|---|---|
| Framework | React 19 |
| Bundler | Vite 6 |
| Rendering | Canvas 2D (waveforms, spectra), Three.js (3D topomap, WebXR) |
| FFT | Pure-JS Cooley-Tukey radix-2 (256-point, Hanning window) |
| State | React hooks + refs (no external state library) |
| Styling | Plain CSS |
The dashboard renders at 60 fps with zero React re-renders in the hot path — all waveform data flows through refs and Canvas directly.