Initial release
This commit is contained in:
Martino Ferrari
@@ -0,0 +1,12 @@
|
||||
module udpstreamer-webui
|
||||
|
||||
go 1.21
|
||||
|
||||
require marte2/common v0.0.0
|
||||
|
||||
require (
|
||||
github.com/gorilla/websocket v1.5.1 // indirect
|
||||
golang.org/x/net v0.17.0 // indirect
|
||||
)
|
||||
|
||||
replace marte2/common => ../../Common/Client/go
|
||||
@@ -0,0 +1,4 @@
|
||||
github.com/gorilla/websocket v1.5.1 h1:gmztn0JnHVt9JZquRuzLw3g4wouNVzKL15iLr/zn/QY=
|
||||
github.com/gorilla/websocket v1.5.1/go.mod h1:x3kM2JMyaluk02fnUJpQuwD2dCS5NDG2ZHL0uE0tcaY=
|
||||
golang.org/x/net v0.17.0 h1:pVaXccu2ozPjCXewfr1S7xza/zcXTity9cCdXQYSjIM=
|
||||
golang.org/x/net v0.17.0/go.mod h1:NxSsAGuq816PNPmqtQdLE42eU2Fs7NoRIZrHJAlaCOE=
|
||||
@@ -0,0 +1,66 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"errors"
|
||||
"flag"
|
||||
"fmt"
|
||||
"io/fs"
|
||||
"log"
|
||||
"net/http"
|
||||
"os"
|
||||
|
||||
"marte2/common/wshub"
|
||||
)
|
||||
|
||||
var buildVersion = "dev"
|
||||
|
||||
//go:embed static
|
||||
var staticFiles embed.FS
|
||||
|
||||
// multiFlag allows a flag to be repeated: --source a --source b
|
||||
type multiFlag []string
|
||||
|
||||
func (f *multiFlag) String() string { return fmt.Sprintf("%v", []string(*f)) }
|
||||
func (f *multiFlag) Set(v string) error { *f = append(*f, v); return nil }
|
||||
|
||||
func main() {
|
||||
var sourceArgs multiFlag
|
||||
flag.Var(&sourceArgs, "source", `Data source in the form [label@]host:port[/multicastGroup:dataPort] (repeatable)`)
|
||||
sourcesFile := flag.String("sources-file", "", "JSON file for persistent source list (load on start, save target)")
|
||||
listenAddr := flag.String("addr", ":8080", "HTTP listen address")
|
||||
flag.Parse()
|
||||
|
||||
hub := wshub.NewHub()
|
||||
sm := wshub.NewSourceManager(hub, *sourcesFile)
|
||||
hub.SetSourceManager(sm)
|
||||
|
||||
go hub.Run()
|
||||
|
||||
// Load sources from file first (if specified), then add any CLI --source flags.
|
||||
if *sourcesFile != "" {
|
||||
if err := sm.Load(*sourcesFile); err != nil && !errors.Is(err, os.ErrNotExist) {
|
||||
log.Printf("sources-file load: %v", err)
|
||||
}
|
||||
}
|
||||
for _, arg := range sourceArgs {
|
||||
label, addr, mcastGroup, dataPort := wshub.ParseSourceArgFull(arg)
|
||||
sm.Add(label, addr, mcastGroup, dataPort)
|
||||
}
|
||||
|
||||
sub, err := fs.Sub(staticFiles, "static")
|
||||
if err != nil {
|
||||
log.Fatalf("static sub-fs: %v", err)
|
||||
}
|
||||
http.Handle("/", http.FileServer(http.FS(sub)))
|
||||
http.HandleFunc("/ws", hub.HandleWebSocket)
|
||||
http.HandleFunc("/api/zoom", hub.HandleZoom)
|
||||
http.HandleFunc("/version", func(w http.ResponseWriter, r *http.Request) {
|
||||
fmt.Fprint(w, buildVersion)
|
||||
})
|
||||
|
||||
log.Printf("UDPStreamer WebUI listening on %s (build=%s)", *listenAddr, buildVersion)
|
||||
if err := http.ListenAndServe(*listenAddr, nil); err != nil {
|
||||
log.Fatalf("http: %v", err)
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
|
||||
<rect width="32" height="32" rx="6" fill="#1e1e2e"/>
|
||||
<polyline points="2,16 7,16 9,8 11,24 14,6 17,26 20,12 23,20 25,16 30,16"
|
||||
fill="none" stroke="#89b4fa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 329 B |
@@ -0,0 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UDP Scope</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="stylesheet" href="/uPlot.min.css">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<script src="/uPlot.iife.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ── Top bar ───────────────────────────────────────────────── -->
|
||||
<div id="topbar">
|
||||
<button id="btn-sidebar" class="ctrl-btn active" title="Toggle sidebar">☰</button>
|
||||
<span id="app-title">UDP Scope</span>
|
||||
<div class="topbar-vsep"></div>
|
||||
<button id="btn-layout" class="ctrl-btn layout-toggle" title="Select layout">⊞ 1×1 ▾</button>
|
||||
<div class="topbar-sep"></div>
|
||||
<div id="cursor-readout">
|
||||
<span id="cur-ta">A: —</span><span class="cur-sep">│</span>
|
||||
<span id="cur-tb">B: —</span><span class="cur-sep">│</span>
|
||||
<span id="cur-dt">ΔT: —</span>
|
||||
</div>
|
||||
<span class="ctrl-label" id="lbl-window">Window:</span>
|
||||
<select id="window-select" class="ctrl-select">
|
||||
<option value="1">1 s</option><option value="5" selected>5 s</option>
|
||||
<option value="10">10 s</option><option value="30">30 s</option>
|
||||
<option value="60">60 s</option>
|
||||
</select>
|
||||
<button id="btn-cursor" class="ctrl-btn" style="display:none">Cursor</button>
|
||||
<button id="btn-zoom-back" class="ctrl-btn" style="display:none">← Back</button>
|
||||
<button id="btn-zoom-fit" class="ctrl-btn">Fit</button>
|
||||
<button id="btn-csv-all" class="ctrl-btn" title="Export all signals to CSV">⬇ CSV</button>
|
||||
<button id="btn-sync-resume" class="ctrl-btn resume-btn" style="display:none">↺ Auto</button>
|
||||
<button id="btn-trigger" class="ctrl-btn">⚡ Trigger</button>
|
||||
<button id="btn-pause-global" class="ctrl-btn">⏸ Pause</button>
|
||||
</div>
|
||||
<!-- ── Trigger bar ───────────────────────────────────────────── -->
|
||||
<div id="trigbar">
|
||||
<div class="trig-group">
|
||||
<span class="trig-label">Signal</span>
|
||||
<select id="trig-signal" class="trig-select"><option value="">— none —</option></select>
|
||||
</div>
|
||||
<div class="trig-sep"></div>
|
||||
<div class="trig-group">
|
||||
<span class="trig-label">Edge</span>
|
||||
<select id="trig-edge" class="trig-select">
|
||||
<option value="rising">Rising ↑</option>
|
||||
<option value="falling">Falling ↓</option>
|
||||
<option value="both">Both ↕</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="trig-sep"></div>
|
||||
<div class="trig-group">
|
||||
<span class="trig-label">Threshold</span>
|
||||
<input id="trig-threshold" class="trig-input" type="number" value="0" step="any">
|
||||
</div>
|
||||
<div class="trig-sep"></div>
|
||||
<div class="trig-group">
|
||||
<span class="trig-label">Window</span>
|
||||
<select id="trig-window" class="trig-select">
|
||||
<option value="0.0001">100 μs</option><option value="0.001">1 ms</option>
|
||||
<option value="0.01">10 ms</option><option value="0.1">100 ms</option>
|
||||
<option value="0.5">500 ms</option><option value="1" selected>1 s</option>
|
||||
<option value="5">5 s</option><option value="10">10 s</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="trig-sep"></div>
|
||||
<div class="trig-group">
|
||||
<span class="trig-label">Pre</span>
|
||||
<input id="trig-pre" class="trig-range" type="range" min="0" max="100" value="20">
|
||||
<span class="trig-range-val" id="trig-pre-val">20%</span>
|
||||
</div>
|
||||
<div class="trig-sep"></div>
|
||||
<div class="trig-group">
|
||||
<span class="trig-label">Mode</span>
|
||||
<select id="trig-mode" class="trig-select">
|
||||
<option value="normal">Normal</option>
|
||||
<option value="single">Single</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="trig-sep"></div>
|
||||
<div class="trig-group" style="gap:8px">
|
||||
<span id="trig-status-badge">IDLE</span>
|
||||
<button id="btn-trig-stop" style="display:none">Stop</button>
|
||||
<button id="btn-trig-rearm">Rearm</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ── Body ─────────────────────────────────────────────────── -->
|
||||
<div id="body">
|
||||
<div id="sidebar">
|
||||
<div id="sidebar-header">Signals</div>
|
||||
<div id="signal-list"></div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div id="plot-grid" class="l1x1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ── Stats panel ─────────────────────────────────────────────── -->
|
||||
<div id="stats-panel">
|
||||
<div id="stats-panel-hdr">
|
||||
<span class="stats-hdr-label">Source Statistics</span>
|
||||
<select id="stats-source-sel" class="stats-source-sel"></select>
|
||||
<button id="btn-stats-close">✕</button>
|
||||
</div>
|
||||
<div id="stats-body"></div>
|
||||
</div>
|
||||
<!-- ── Status bar ─────────────────────────────────────────────── -->
|
||||
<div id="statusbar">
|
||||
<div id="sb-left">
|
||||
<div id="status-led"></div>
|
||||
<span id="status-text">Disconnected</span>
|
||||
<span id="sb-tsage"></span>
|
||||
<button id="btn-stats" class="ctrl-btn" style="height:16px;padding:0 7px;font-size:10px;line-height:1">📊 Stats</button>
|
||||
</div>
|
||||
<span id="build-version"></span>
|
||||
</div>
|
||||
<div id="layout-menu"></div>
|
||||
<!-- ── Signal style context menu ─────────────────────────────── -->
|
||||
<div id="sig-ctx-menu" style="display:none">
|
||||
<div class="ctx-menu-header">Style:
|
||||
<span id="ctx-menu-key" class="ctx-menu-key"></span></div>
|
||||
<div class="ctx-row">
|
||||
<label>Color</label>
|
||||
<input type="color" id="ctx-color">
|
||||
</div>
|
||||
<div class="ctx-row">
|
||||
<label>Width</label>
|
||||
<div class="ctx-btns" id="ctx-width-btns">
|
||||
<button class="ctx-btn" data-w="1">1px</button>
|
||||
<button class="ctx-btn active" data-w="1.5">1.5</button>
|
||||
<button class="ctx-btn" data-w="2">2px</button>
|
||||
<button class="ctx-btn" data-w="3">3px</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ctx-row">
|
||||
<label>Line</label>
|
||||
<div class="ctx-btns" id="ctx-dash-btns">
|
||||
<button class="ctx-btn active" data-dash="solid">——</button>
|
||||
<button class="ctx-btn" data-dash="dashed">╌╌</button>
|
||||
<button class="ctx-btn" data-dash="dotted">·····</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ctx-row">
|
||||
<label>Marker</label>
|
||||
<div class="ctx-btns" id="ctx-marker-btns">
|
||||
<button class="ctx-btn active" data-marker="none">none</button>
|
||||
<button class="ctx-btn" data-marker="circle">●</button>
|
||||
<button class="ctx-btn" data-marker="square">■</button>
|
||||
<button class="ctx-btn" data-marker="cross">✕</button>
|
||||
<button class="ctx-btn" data-marker="diamond">◆</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ctx-row">
|
||||
<label>Size</label>
|
||||
<input type="range" class="ctx-range" id="ctx-marker-size" min="2" max="10" value="4">
|
||||
<span class="ctx-range-val" id="ctx-marker-size-val">4px</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ── Array index picker (trigger signal) ──────────────────────── -->
|
||||
<div id="array-idx-picker" style="display:none">
|
||||
<div class="ctx-menu-header">Element index: <span id="aip-sig" class="ctx-menu-key"></span></div>
|
||||
<div class="ctx-row">
|
||||
<label>Index</label>
|
||||
<input type="number" id="aip-idx" class="ctx-num" min="0" step="1" value="0">
|
||||
<span id="aip-range" style="font-size:10px;color:var(--overlay0)"></span>
|
||||
</div>
|
||||
<div class="ctx-row" style="justify-content:flex-end;gap:6px">
|
||||
<button class="ctx-btn" id="aip-cancel">Cancel</button>
|
||||
<button class="ctx-btn active" id="aip-ok">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ── VScale toolbar (moved into plot card when active) ─────────── -->
|
||||
<div id="vscale-menu" style="display:none">
|
||||
<div class="vstb-header">
|
||||
<span class="vstb-label">V-Scale: <span id="vscale-menu-key" class="ctx-menu-key"></span></span>
|
||||
<div class="ctx-btns" id="vscale-mode-btns">
|
||||
<button class="ctx-btn active" data-mode="auto">Auto</button>
|
||||
<button class="ctx-btn" data-mode="range">Range</button>
|
||||
<button class="ctx-btn" data-mode="manual">Manual</button>
|
||||
</div>
|
||||
<div id="vscale-manual-row" style="display:none;align-items:center;gap:4px">
|
||||
<label class="vstb-lbl">V/div</label>
|
||||
<input type="number" id="vscale-vdiv" class="ctx-num" min="1e-30" step="any" value="1">
|
||||
</div>
|
||||
<div id="vscale-pos-row" style="display:none;align-items:center;gap:4px">
|
||||
<label class="vstb-lbl">Pos</label>
|
||||
<input type="number" id="vscale-pos" class="ctx-num" step="0.1" value="0">
|
||||
</div>
|
||||
<div id="vscale-type-row" style="display:none;align-items:center;gap:4px">
|
||||
<label class="vstb-lbl">Type</label>
|
||||
<div class="ctx-btns" id="vscale-type-btns">
|
||||
<button class="ctx-btn active" data-type="analog">Analog</button>
|
||||
<button class="ctx-btn" data-type="digital">Digital</button>
|
||||
</div>
|
||||
</div>
|
||||
<button id="btn-vscale-close" class="vstb-close" title="Close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
'use strict';
|
||||
// LTTB (Largest Triangle Three Buckets) decimation — O(n).
|
||||
// Runs off-main-thread to avoid blocking the render loop.
|
||||
function lttb(t, v, threshold) {
|
||||
const len = t.length;
|
||||
if (len <= threshold) {
|
||||
// Copy to new arrays so we can transfer them back without detaching the input.
|
||||
return { t: new Float64Array(t), v: new Float64Array(v) };
|
||||
}
|
||||
const outT = new Float64Array(threshold);
|
||||
const outV = new Float64Array(threshold);
|
||||
outT[0] = t[0]; outV[0] = v[0];
|
||||
outT[threshold - 1] = t[len - 1]; outV[threshold - 1] = v[len - 1];
|
||||
const every = (len - 2) / (threshold - 2);
|
||||
let a = 0;
|
||||
for (let i = 0; i < threshold - 2; i++) {
|
||||
const avgS = Math.floor((i + 1) * every) + 1;
|
||||
const avgE = Math.min(Math.floor((i + 2) * every) + 1, len);
|
||||
let avgT = 0, avgV = 0, n = 0;
|
||||
for (let j = avgS; j < avgE; j++) { avgT += t[j]; avgV += v[j]; n++; }
|
||||
if (n) { avgT /= n; avgV /= n; }
|
||||
const rS = Math.floor(i * every) + 1;
|
||||
const rE = Math.min(Math.floor((i + 1) * every) + 1, len);
|
||||
let maxA = -1, next = rS;
|
||||
const aT = t[a], aV = v[a];
|
||||
for (let j = rS; j < rE; j++) {
|
||||
const area = Math.abs((aT - avgT) * (v[j] - aV) - (aT - t[j]) * (avgV - aV));
|
||||
if (area > maxA) { maxA = area; next = j; }
|
||||
}
|
||||
outT[i + 1] = t[next]; outV[i + 1] = v[next]; a = next;
|
||||
}
|
||||
return { t: outT, v: outV };
|
||||
}
|
||||
|
||||
self.onmessage = function({ data: { id, t, v, threshold } }) {
|
||||
const result = lttb(t, v, threshold);
|
||||
// Transfer the output buffers back to the main thread zero-copy.
|
||||
self.postMessage({ id, t: result.t, v: result.v }, [result.t.buffer, result.v.buffer]);
|
||||
};
|
||||
@@ -0,0 +1,527 @@
|
||||
/* ── Catppuccin Mocha palette ──────────────────────────────── */
|
||||
:root {
|
||||
--bg: #1e1e2e; --mantle: #181825; --crust: #11111b;
|
||||
--surface0: #313244; --surface1: #45475a; --surface2: #585b70;
|
||||
--overlay0: #6c7086; --overlay1: #7f849c; --text: #cdd6f4;
|
||||
--subtext0: #a6adc8; --subtext1: #bac2de;
|
||||
--accent: #89b4fa; --green: #a6e3a1; --red: #f38ba8;
|
||||
--yellow: #f9e2af; --peach: #fab387; --mauve: #cba6f7;
|
||||
--teal: #94e2d5; --sky: #89dceb; --lavender: #b4befe;
|
||||
--pink: #f5c2e7;
|
||||
--radius: 8px; --sidebar-w: 280px; --topbar-h: 52px;
|
||||
--trigbar-h: 0px; --statusbar-h: 20px; --transition: 0.18s ease;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body { height:100%; background:var(--bg); color:var(--text);
|
||||
font-family:'Segoe UI',system-ui,sans-serif; font-size:14px; overflow:hidden; }
|
||||
::-webkit-scrollbar { width:6px; }
|
||||
::-webkit-scrollbar-track { background:var(--mantle); }
|
||||
::-webkit-scrollbar-thumb { background:var(--surface1); border-radius:3px; }
|
||||
|
||||
/* ── uPlot overrides ─────────────────────────────────────────── */
|
||||
.uplot { background:transparent !important; }
|
||||
.uplot .u-over { cursor: crosshair; }
|
||||
.uplot .u-cursor-x, .uplot .u-cursor-y { border-color: #585b70 !important; }
|
||||
.uplot .u-select { background: rgba(137,180,250,0.1) !important; border: 1px solid rgba(137,180,250,0.4) !important; }
|
||||
|
||||
/* ── Top bar ─────────────────────────────────────────────────── */
|
||||
#topbar {
|
||||
position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
|
||||
background:var(--mantle); border-bottom:1px solid var(--surface0);
|
||||
display:flex; align-items:center; gap:10px; padding:0 14px;
|
||||
z-index:100; box-shadow:0 2px 8px rgba(0,0,0,0.4); overflow:hidden;
|
||||
}
|
||||
#app-title { font-weight:700; font-size:15px; color:var(--accent);
|
||||
white-space:nowrap; letter-spacing:0.3px; flex-shrink:0; }
|
||||
.topbar-sep { flex:1; min-width:4px; }
|
||||
#status-led { width:8px; height:8px; border-radius:50%;
|
||||
background:var(--red); flex-shrink:0; transition:background var(--transition); }
|
||||
#status-led.green { background:var(--green); animation:pulse-green 2s infinite; }
|
||||
#status-led.orange { background:var(--yellow); animation:pulse-orange 1.5s infinite; }
|
||||
@keyframes pulse-green { 0%,100%{box-shadow:0 0 0 0 rgba(166,227,161,0.4)} 50%{box-shadow:0 0 0 4px rgba(166,227,161,0)} }
|
||||
@keyframes pulse-orange { 0%,100%{box-shadow:0 0 0 0 rgba(249,226,175,0.4)} 50%{box-shadow:0 0 0 4px rgba(249,226,175,0)} }
|
||||
#status-text { font-size:11px; color:var(--subtext0); white-space:nowrap; }
|
||||
#sb-tsage { font-size:11px; color:var(--overlay0); white-space:nowrap; font-family:monospace; }
|
||||
|
||||
#cursor-readout {
|
||||
display:none; align-items:center; gap:8px;
|
||||
font-size:11px; font-family:monospace;
|
||||
background:var(--surface0); border:1px solid var(--surface1);
|
||||
border-radius:5px; padding:3px 8px; white-space:nowrap; flex-shrink:0;
|
||||
}
|
||||
#cursor-readout.visible { display:flex; }
|
||||
#cur-ta { color:var(--sky); } #cur-tb { color:var(--yellow); }
|
||||
#cur-dt { color:var(--subtext1); } .cur-sep { color:var(--surface2); }
|
||||
|
||||
.topbar-vsep { width:1px; height:22px; background:var(--surface0); flex-shrink:0; margin:0 2px; }
|
||||
#layout-btns { display:flex; gap:2px; align-items:center; flex-shrink:0; }
|
||||
.ctrl-label { font-size:12px; color:var(--subtext0); white-space:nowrap; flex-shrink:0; }
|
||||
select.ctrl-select {
|
||||
background:var(--surface0); color:var(--text);
|
||||
border:1px solid var(--surface1); border-radius:var(--radius);
|
||||
padding:4px 6px; font-size:12px; cursor:pointer; outline:none; flex-shrink:0;
|
||||
}
|
||||
select.ctrl-select:hover { border-color:var(--accent); }
|
||||
button.ctrl-btn {
|
||||
background:var(--surface0); color:var(--text);
|
||||
border:1px solid var(--surface1); border-radius:var(--radius);
|
||||
padding:4px 12px; font-size:12px; cursor:pointer; white-space:nowrap; flex-shrink:0;
|
||||
transition:background var(--transition),border-color var(--transition);
|
||||
}
|
||||
button.ctrl-btn:hover { background:var(--surface1); border-color:var(--accent); }
|
||||
button.ctrl-btn.active { background:var(--surface1); border-color:var(--accent); color:var(--accent); }
|
||||
button.ctrl-btn.trig-active { background:rgba(203,166,247,0.15); border-color:var(--mauve); color:var(--mauve); }
|
||||
button.ctrl-btn.cursor-a { border-color:var(--sky); color:var(--sky); }
|
||||
button.ctrl-btn.cursor-b { border-color:var(--yellow); color:var(--yellow); }
|
||||
button.ctrl-btn.resume-btn { border-color:var(--teal); color:var(--teal); }
|
||||
|
||||
/* ── Trigger bar ──────────────────────────────────────────────── */
|
||||
#trigbar {
|
||||
position:fixed; top:var(--topbar-h); left:0; right:0;
|
||||
background:var(--crust); border-bottom:1px solid var(--surface0);
|
||||
display:flex; align-items:center; flex-wrap:wrap; gap:10px;
|
||||
padding:0 16px; z-index:99;
|
||||
height:0; overflow:hidden;
|
||||
transition:height var(--transition),padding var(--transition);
|
||||
}
|
||||
#trigbar.open { height:48px; padding:0 16px; }
|
||||
.trig-group { display:flex; align-items:center; gap:6px; }
|
||||
.trig-sep { width:1px; height:24px; background:var(--surface0); flex-shrink:0; }
|
||||
.trig-label { font-size:11px; color:var(--subtext0); white-space:nowrap; }
|
||||
select.trig-select {
|
||||
background:var(--surface0); color:var(--text);
|
||||
border:1px solid var(--surface1); border-radius:5px;
|
||||
padding:3px 6px; font-size:12px; cursor:pointer; outline:none;
|
||||
}
|
||||
select.trig-select:hover { border-color:var(--mauve); }
|
||||
input.trig-input {
|
||||
background:var(--surface0); color:var(--text);
|
||||
border:1px solid var(--surface1); border-radius:5px;
|
||||
padding:3px 6px; font-size:12px; outline:none; width:80px;
|
||||
}
|
||||
input.trig-input:focus { border-color:var(--mauve); }
|
||||
input[type=range].trig-range {
|
||||
-webkit-appearance:none; width:90px; height:4px;
|
||||
background:var(--surface1); border-radius:2px; outline:none; cursor:pointer;
|
||||
}
|
||||
input[type=range].trig-range::-webkit-slider-thumb {
|
||||
-webkit-appearance:none; width:12px; height:12px;
|
||||
border-radius:50%; background:var(--mauve); cursor:pointer;
|
||||
}
|
||||
.trig-range-val { font-size:11px; color:var(--mauve); min-width:28px; }
|
||||
#trig-status-badge {
|
||||
font-size:11px; font-weight:700; letter-spacing:0.8px;
|
||||
padding:3px 10px; border-radius:12px;
|
||||
border:1px solid var(--surface1); background:var(--surface0); color:var(--subtext0);
|
||||
min-width:80px; text-align:center; white-space:nowrap;
|
||||
}
|
||||
#trig-status-badge.armed { background:rgba(166,227,161,0.12); border-color:var(--green); color:var(--green); }
|
||||
#trig-status-badge.waiting { background:rgba(249,226,175,0.12); border-color:var(--yellow); color:var(--yellow); }
|
||||
#trig-status-badge.triggered { background:rgba(203,166,247,0.15); border-color:var(--mauve); color:var(--mauve); }
|
||||
#btn-trig-rearm, #btn-trig-stop {
|
||||
border:none; border-radius:5px;
|
||||
padding:4px 12px; font-size:12px; font-weight:600; cursor:pointer; display:none;
|
||||
}
|
||||
#btn-trig-rearm { background:var(--mauve); color:var(--crust); }
|
||||
#btn-trig-stop { background:var(--surface1); color:var(--yellow); border:1px solid var(--yellow); }
|
||||
#btn-trig-rearm:hover, #btn-trig-stop:hover { opacity:0.85; }
|
||||
|
||||
/* ── Status bar ───────────────────────────────────────────────── */
|
||||
#statusbar {
|
||||
position:fixed; bottom:0; left:0; right:0; height:var(--statusbar-h);
|
||||
background:var(--crust); border-top:1px solid var(--surface0);
|
||||
display:flex; align-items:center; justify-content:space-between;
|
||||
padding:0 10px; z-index:100;
|
||||
}
|
||||
#sb-left { display:flex; align-items:center; gap:6px; }
|
||||
#build-version { font-size:10px; color:var(--overlay0); font-family:monospace; white-space:nowrap; }
|
||||
|
||||
/* ── Body ─────────────────────────────────────────────────────── */
|
||||
#body {
|
||||
position:fixed; top:calc(var(--topbar-h) + var(--trigbar-h));
|
||||
left:0; right:0; bottom:var(--statusbar-h); display:flex; overflow:hidden;
|
||||
transition:top var(--transition);
|
||||
}
|
||||
|
||||
/* ── Sidebar ──────────────────────────────────────────────────── */
|
||||
#sidebar {
|
||||
width:var(--sidebar-w); min-width:var(--sidebar-w);
|
||||
background:var(--mantle); border-right:1px solid var(--surface0);
|
||||
display:flex; flex-direction:column;
|
||||
transition:width var(--transition),min-width var(--transition); overflow:hidden;
|
||||
}
|
||||
#sidebar.collapsed { width:0; min-width:0; }
|
||||
#sidebar-header {
|
||||
display:flex; align-items:center; justify-content:space-between;
|
||||
padding:10px 14px; border-bottom:1px solid var(--surface0);
|
||||
font-weight:600; color:var(--subtext1); font-size:12px;
|
||||
text-transform:uppercase; letter-spacing:0.8px; flex-shrink:0;
|
||||
}
|
||||
#signal-list { flex:1; overflow-y:auto; padding:8px 0; }
|
||||
.sig-item {
|
||||
padding:6px 14px; cursor:grab; border-radius:6px; margin:1px 6px;
|
||||
transition:background var(--transition); display:flex; align-items:center; gap:8px;
|
||||
user-select:none;
|
||||
}
|
||||
.sig-item:hover { background:var(--surface0); }
|
||||
.sig-item:active { cursor:grabbing; }
|
||||
.sig-item.dragging { opacity:0.4; }
|
||||
.sig-name { flex:1; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.sig-unit { font-size:11px; color:var(--subtext0); font-style:italic; }
|
||||
.type-badge { font-size:10px; background:var(--surface1); color:var(--subtext1); padding:1px 5px; border-radius:3px; white-space:nowrap; }
|
||||
.array-group {}
|
||||
.array-header {
|
||||
padding:6px 14px 6px 10px; cursor:pointer; border-radius:6px; margin:1px 6px;
|
||||
transition:background var(--transition); display:flex; align-items:center; gap:6px; user-select:none;
|
||||
}
|
||||
.array-header:hover { background:var(--surface0); }
|
||||
.array-arrow { font-size:10px; color:var(--subtext0); transition:transform var(--transition); display:inline-block; }
|
||||
.array-header.open .array-arrow { transform:rotate(90deg); }
|
||||
.array-children { display:none; padding-left:16px; }
|
||||
.array-header.open + .array-children { display:block; }
|
||||
.array-child {
|
||||
padding:4px 14px 4px 8px; cursor:grab; border-radius:6px; margin:1px 6px;
|
||||
transition:background var(--transition); display:flex; align-items:center; gap:8px;
|
||||
user-select:none; color:var(--subtext1); font-size:12px;
|
||||
}
|
||||
.array-child:hover { background:var(--surface0); }
|
||||
.array-child:active { cursor:grabbing; }
|
||||
|
||||
/* ── Main area ────────────────────────────────────────────────── */
|
||||
#main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
|
||||
/* Layout toggle button in topbar */
|
||||
#btn-layout {
|
||||
display:flex; align-items:center; gap:4px;
|
||||
font-size:11px; padding:3px 8px;
|
||||
}
|
||||
#btn-layout svg { flex-shrink:0; }
|
||||
#btn-layout span { flex-shrink:0; }
|
||||
|
||||
/* Layout dropdown menu */
|
||||
#layout-menu {
|
||||
position:fixed; z-index:200;
|
||||
background:var(--mantle); border:1px solid var(--surface1); border-radius:var(--radius);
|
||||
box-shadow:0 6px 20px rgba(0,0,0,0.5);
|
||||
display:none; grid-template-columns:1fr 1fr; gap:4px; padding:6px;
|
||||
}
|
||||
#layout-menu.open { display:grid; }
|
||||
.layout-menu-item {
|
||||
display:flex; flex-direction:column; align-items:center; gap:3px;
|
||||
padding:5px 10px; cursor:pointer;
|
||||
background:var(--surface0); border:1px solid var(--surface1); border-radius:6px;
|
||||
color:var(--subtext1); font-size:10px; font-family:monospace;
|
||||
transition:background var(--transition),border-color var(--transition),color var(--transition);
|
||||
}
|
||||
.layout-menu-item:hover { background:var(--surface1); border-color:var(--accent); color:var(--accent); }
|
||||
.layout-menu-item.active { background:var(--surface1); border-color:var(--accent); color:var(--accent); }
|
||||
|
||||
/* ── Plot grid ────────────────────────────────────────────────── */
|
||||
#plot-grid {
|
||||
flex:1; min-height:0; display:grid; gap:0; padding:0; overflow:hidden;
|
||||
border-top:1px solid var(--surface0); border-left:1px solid var(--surface0);
|
||||
position:relative;
|
||||
}
|
||||
.resize-handle-v {
|
||||
position:absolute; top:0; bottom:0; width:6px; cursor:col-resize; z-index:20;
|
||||
transform:translateX(-50%); background:transparent; transition:background 0.15s;
|
||||
}
|
||||
.resize-handle-h {
|
||||
position:absolute; left:0; right:0; height:6px; cursor:row-resize; z-index:20;
|
||||
transform:translateY(-50%); background:transparent; transition:background 0.15s;
|
||||
}
|
||||
.resize-handle-v:hover,.resize-handle-v.dragging,
|
||||
.resize-handle-h:hover,.resize-handle-h.dragging {
|
||||
background:rgba(137,180,250,0.35);
|
||||
}
|
||||
#plot-grid.l1x1 { grid-template-columns:1fr; grid-template-rows:1fr; }
|
||||
#plot-grid.l2x1 { grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
|
||||
#plot-grid.l1x2 { grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
|
||||
#plot-grid.l2x2 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
|
||||
#plot-grid.l3x1 { grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr; }
|
||||
#plot-grid.l1x3 { grid-template-columns:1fr; grid-template-rows:1fr 1fr 1fr; }
|
||||
#plot-grid.l3x2 { grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr; }
|
||||
#plot-grid.l2x3 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr 1fr; }
|
||||
#plot-grid.l1x4 { grid-template-columns:1fr; grid-template-rows:1fr 1fr 1fr 1fr; }
|
||||
#plot-grid.l4x1 { grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr; }
|
||||
|
||||
/* ── Plot card ────────────────────────────────────────────────── */
|
||||
.plot-card {
|
||||
background:var(--bg);
|
||||
border-right:1px solid var(--surface0); border-bottom:1px solid var(--surface0);
|
||||
border-radius:0; display:flex; flex-direction:column;
|
||||
min-height:0; position:relative; overflow:hidden;
|
||||
}
|
||||
.plot-card.drag-over { background:rgba(137,180,250,0.04); box-shadow:inset 0 0 0 2px var(--accent); }
|
||||
/* Header: always visible, part of normal card flex flow */
|
||||
.plot-card-header {
|
||||
z-index:5; flex-shrink:0;
|
||||
background:rgba(17,17,27,0.88); backdrop-filter:blur(6px);
|
||||
border-bottom:1px solid var(--surface1);
|
||||
display:flex; align-items:center; gap:5px;
|
||||
padding:3px 8px; min-height:26px; overflow:hidden;
|
||||
}
|
||||
.plot-title {
|
||||
font-size:11px; color:var(--subtext1); font-weight:600;
|
||||
cursor:pointer; border:1px solid transparent; border-radius:3px;
|
||||
padding:1px 4px; background:transparent; white-space:nowrap; user-select:none;
|
||||
flex-shrink:0; max-width:100px; overflow:hidden; text-overflow:ellipsis;
|
||||
transition:border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.plot-title:hover { border-color:var(--surface1); background:rgba(88,91,112,0.4); }
|
||||
.plot-cfg-bar {
|
||||
flex-shrink:0; background:rgba(17,17,27,0.92); border-top:1px solid var(--surface1);
|
||||
padding:3px 8px;
|
||||
}
|
||||
.sig-badges { display:flex; flex-wrap:nowrap; gap:3px; flex:1; overflow:hidden; min-width:0; }
|
||||
.sig-badge {
|
||||
display:inline-flex; align-items:center; gap:3px;
|
||||
background:rgba(69,71,90,0.6); color:var(--subtext1);
|
||||
border-radius:10px; padding:1px 6px 1px 4px;
|
||||
font-size:10px; white-space:nowrap; flex-shrink:0;
|
||||
}
|
||||
.trace-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; display:inline-block; }
|
||||
.sig-badge-x {
|
||||
cursor:pointer; color:var(--overlay0); font-size:11px; line-height:1; margin-left:1px;
|
||||
transition:color var(--transition);
|
||||
}
|
||||
.sig-badge-x:hover { color:var(--red); }
|
||||
.plot-body { flex:1; position:relative; min-height:0; overflow:hidden; }
|
||||
.drop-hint {
|
||||
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
|
||||
color:var(--overlay0); font-size:13px; pointer-events:none;
|
||||
}
|
||||
.trig-collect-overlay {
|
||||
position:absolute; inset:0; display:none;
|
||||
align-items:center; justify-content:center; pointer-events:none; z-index:10;
|
||||
}
|
||||
.plot-card.trig-collecting .trig-collect-overlay { display:flex; }
|
||||
.trig-collect-text {
|
||||
background:rgba(49,50,68,0.82); color:var(--mauve);
|
||||
font-size:11px; font-weight:600; padding:4px 12px; border-radius:20px;
|
||||
border:1px solid var(--mauve);
|
||||
}
|
||||
|
||||
/* ── Signal style context menu ────────────────────────────────── */
|
||||
#sig-ctx-menu {
|
||||
position:fixed; z-index:300;
|
||||
background:var(--mantle); border:1px solid var(--surface1); border-radius:var(--radius);
|
||||
box-shadow:0 8px 24px rgba(0,0,0,0.6); padding:10px; min-width:210px;
|
||||
}
|
||||
.ctx-menu-header {
|
||||
font-size:11px; color:var(--subtext0); margin-bottom:8px;
|
||||
padding-bottom:6px; border-bottom:1px solid var(--surface0);
|
||||
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
|
||||
}
|
||||
.ctx-menu-key { color:var(--accent); font-weight:600; }
|
||||
.ctx-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
|
||||
.ctx-row label { font-size:11px; color:var(--subtext0); width:42px; flex-shrink:0; }
|
||||
.ctx-btns { display:flex; gap:3px; flex-wrap:wrap; }
|
||||
.ctx-btn {
|
||||
background:var(--surface0); border:1px solid var(--surface1); border-radius:4px;
|
||||
color:var(--subtext1); font-size:11px; padding:2px 7px; cursor:pointer;
|
||||
transition:background var(--transition),border-color var(--transition),color var(--transition);
|
||||
}
|
||||
.ctx-btn:hover { background:var(--surface1); border-color:var(--accent); }
|
||||
.ctx-btn.active { background:var(--surface1); border-color:var(--accent); color:var(--accent); }
|
||||
#ctx-color {
|
||||
width:28px; height:22px; border:1px solid var(--surface1); border-radius:4px;
|
||||
background:transparent; cursor:pointer; padding:1px;
|
||||
}
|
||||
.ctx-range { width:80px; }
|
||||
.ctx-range-val { font-size:11px; color:var(--mauve); min-width:26px; }
|
||||
.ctx-num {
|
||||
width:90px; background:var(--surface0); border:1px solid var(--surface1); border-radius:4px;
|
||||
color:var(--text); font-size:11px; padding:2px 6px;
|
||||
}
|
||||
.ctx-num:focus { outline:none; border-color:var(--accent); }
|
||||
.ctx-btn:disabled { opacity:0.35; cursor:not-allowed; border-color:var(--surface1); }
|
||||
|
||||
/* ── Array index picker ─────────────────────────────────────────── */
|
||||
#array-idx-picker {
|
||||
position:fixed; z-index:300;
|
||||
background:var(--mantle); border:1px solid var(--surface1); border-radius:var(--radius);
|
||||
box-shadow:0 8px 24px rgba(0,0,0,0.6); padding:10px; min-width:200px;
|
||||
}
|
||||
|
||||
/* ── VScale toolbar (embedded in plot card) ──────────────────────── */
|
||||
#vscale-menu {
|
||||
flex-shrink:0; background:rgba(17,17,27,0.92); border-top:1px solid var(--surface1);
|
||||
padding:3px 8px;
|
||||
}
|
||||
.vstb-header {
|
||||
display:flex; align-items:center; gap:8px; flex-wrap:nowrap; overflow-x:auto;
|
||||
scrollbar-width:none;
|
||||
}
|
||||
.vstb-header::-webkit-scrollbar { display:none; }
|
||||
.vstb-label { font-size:11px; color:var(--subtext0); white-space:nowrap; flex-shrink:0; }
|
||||
.vstb-lbl { font-size:10px; color:var(--overlay0); white-space:nowrap; }
|
||||
.vstb-close {
|
||||
margin-left:auto; flex-shrink:0;
|
||||
background:transparent; border:none; color:var(--overlay0);
|
||||
cursor:pointer; font-size:11px; padding:0 3px; line-height:1;
|
||||
transition:color var(--transition);
|
||||
}
|
||||
.vstb-close:hover { color:var(--red); }
|
||||
.plot-vscale-bar { display:none; }
|
||||
|
||||
/* ── Per-plot cursor value readout (in plot card header) ────────── */
|
||||
.plot-cursor-ro {
|
||||
margin-left:auto; flex-shrink:0;
|
||||
align-items:center; gap:5px;
|
||||
font-size:10px; font-family:monospace;
|
||||
background:var(--surface0); border:1px solid var(--surface1);
|
||||
border-radius:4px; padding:1px 7px; white-space:nowrap;
|
||||
overflow:hidden;
|
||||
}
|
||||
.pcur-a { color:var(--sky); }
|
||||
.pcur-b { color:var(--yellow); }
|
||||
.pcur-dv { color:var(--subtext1); }
|
||||
.pcur-sep { color:var(--surface2); }
|
||||
|
||||
/* ── Badge vscale info & active state ───────────────────────────── */
|
||||
.vscale-info {
|
||||
font-size:9px; color:var(--overlay0); font-family:monospace; margin-left:2px; white-space:nowrap;
|
||||
}
|
||||
.sig-badge { cursor:pointer; }
|
||||
.sig-badge-active { outline:1px solid rgba(255,255,255,0.35); background:rgba(88,91,112,0.9); }
|
||||
.sig-badge-active .vscale-info { color:var(--subtext0); }
|
||||
|
||||
/* ── Source groups ────────────────────────────────────────────── */
|
||||
.source-group { margin-bottom:2px; }
|
||||
.source-group-header {
|
||||
display:flex; align-items:center; gap:5px;
|
||||
padding:5px 8px 5px 10px; margin:4px 6px 2px;
|
||||
background:var(--surface0); border-radius:6px;
|
||||
}
|
||||
.source-state-dot {
|
||||
width:7px; height:7px; border-radius:50%; flex-shrink:0;
|
||||
background:var(--overlay0); transition:background var(--transition);
|
||||
}
|
||||
.source-state-dot.connected { background:var(--green); }
|
||||
.source-state-dot.connecting { background:var(--yellow); animation:pulse-orange 1.5s infinite; }
|
||||
.source-state-dot.disconnected { background:var(--red); }
|
||||
.source-name {
|
||||
font-size:11px; font-weight:600; color:var(--subtext1); flex:1;
|
||||
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
|
||||
}
|
||||
.source-addr {
|
||||
font-size:10px; color:var(--overlay0); font-family:monospace;
|
||||
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:90px;
|
||||
}
|
||||
.source-remove-btn {
|
||||
background:none; border:none; color:var(--overlay0);
|
||||
cursor:pointer; font-size:15px; line-height:1; padding:0 2px; flex-shrink:0;
|
||||
transition:color var(--transition);
|
||||
}
|
||||
.source-remove-btn:hover { color:var(--red); }
|
||||
|
||||
/* ── Add source section ───────────────────────────────────────── */
|
||||
.add-source-section {
|
||||
border-top:1px solid var(--surface0); margin-top:4px;
|
||||
}
|
||||
.add-source-title {
|
||||
display:flex; align-items:center; gap:5px;
|
||||
padding:6px 10px; cursor:pointer; user-select:none;
|
||||
font-size:11px; color:var(--overlay0);
|
||||
transition:color var(--transition);
|
||||
}
|
||||
.add-source-title:hover { color:var(--subtext1); }
|
||||
.add-src-arrow {
|
||||
font-size:9px; display:inline-block;
|
||||
transition:transform var(--transition);
|
||||
}
|
||||
.add-source-body {
|
||||
display:none; flex-direction:column; gap:5px;
|
||||
padding:0 10px 10px;
|
||||
}
|
||||
.add-source-section.open .add-source-body { display:flex; }
|
||||
.add-src-input {
|
||||
background:var(--surface0); color:var(--text);
|
||||
border:1px solid var(--surface1); border-radius:5px;
|
||||
padding:4px 8px; font-size:12px; outline:none; width:100%;
|
||||
}
|
||||
.add-src-input:focus { border-color:var(--accent); }
|
||||
.add-src-btn {
|
||||
background:var(--surface0); color:var(--accent);
|
||||
border:1px solid var(--surface1); border-radius:5px;
|
||||
padding:4px 10px; font-size:12px; cursor:pointer; width:100%;
|
||||
transition:background var(--transition),border-color var(--transition);
|
||||
}
|
||||
.add-src-btn:hover { background:rgba(137,180,250,0.15); border-color:var(--accent); }
|
||||
.save-src-btn { color:var(--green); }
|
||||
.save-src-btn:hover { background:rgba(166,227,161,0.1); border-color:var(--green); }
|
||||
|
||||
/* ── Stats panel ─────────────────────────────────────────────── */
|
||||
#stats-panel {
|
||||
position:fixed; bottom:var(--statusbar-h); left:0; right:0;
|
||||
height:0; overflow:hidden;
|
||||
background:var(--mantle); border-top:2px solid var(--surface0);
|
||||
z-index:89; /* below topbar / sidebar */
|
||||
transition:height var(--transition);
|
||||
}
|
||||
#stats-panel.open { height:290px; }
|
||||
#stats-panel-hdr {
|
||||
display:flex; align-items:center; gap:8px;
|
||||
padding:4px 10px; border-bottom:1px solid var(--surface0); flex-shrink:0;
|
||||
font-size:11px; font-weight:700; color:var(--subtext1); letter-spacing:0.5px; text-transform:uppercase;
|
||||
}
|
||||
.stats-hdr-label { flex-shrink:0; }
|
||||
.stats-source-sel {
|
||||
flex:1; min-width:0;
|
||||
background:var(--surface0); border:1px solid var(--surface1); border-radius:var(--radius);
|
||||
color:var(--text); font-size:11px; padding:1px 5px; cursor:pointer;
|
||||
}
|
||||
.stats-source-sel:focus { outline:none; border-color:var(--accent); }
|
||||
#btn-stats-close {
|
||||
background:none; border:none; color:var(--overlay0); flex-shrink:0;
|
||||
cursor:pointer; font-size:14px; line-height:1; padding:2px;
|
||||
transition:color var(--transition);
|
||||
}
|
||||
#btn-stats-close:hover { color:var(--red); }
|
||||
#stats-body {
|
||||
overflow-x:hidden; overflow-y:auto;
|
||||
display:flex; flex-direction:column; gap:0;
|
||||
padding:8px 18px;
|
||||
height:calc(290px - 30px); box-sizing:border-box;
|
||||
}
|
||||
.stats-section {
|
||||
display:flex; flex-direction:column; gap:5px; padding:4px 0;
|
||||
}
|
||||
.stats-section-grow { flex:1; }
|
||||
.stats-empty { font-size:11px; color:var(--overlay0); }
|
||||
.stats-section-label {
|
||||
font-size:9px; color:var(--overlay0); text-transform:uppercase; letter-spacing:0.6px;
|
||||
}
|
||||
.stats-row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
|
||||
.stats-kv { display:flex; flex-direction:column; gap:1px; min-width:70px; }
|
||||
.stats-k { font-size:9px; color:var(--overlay0); text-transform:uppercase; letter-spacing:0.5px; }
|
||||
.stats-v { font-size:12px; color:var(--text); font-family:monospace; font-weight:600; }
|
||||
.stats-v.warn { color:var(--yellow); }
|
||||
.stats-v.ok { color:var(--green); }
|
||||
.stats-sep { border:none; border-top:1px solid var(--surface0); margin:2px 0; }
|
||||
/* Histogram */
|
||||
.stats-hist { width:100%; }
|
||||
.hist-bars {
|
||||
display:flex; align-items:flex-end; gap:1px; height:72px;
|
||||
background:var(--crust); border-radius:3px; padding:2px 3px;
|
||||
}
|
||||
.hist-bar {
|
||||
flex:1; background:var(--accent); border-radius:1px 1px 0 0; min-height:1px;
|
||||
opacity:0.65; transition:opacity 0.1s;
|
||||
}
|
||||
.hist-bar:hover { opacity:1; }
|
||||
.hist-labels {
|
||||
display:flex; justify-content:space-between;
|
||||
font-size:9px; color:var(--overlay0); font-family:monospace; margin-top:2px;
|
||||
}
|
||||
|
||||
/* ── Empty state ──────────────────────────────────────────────── */
|
||||
#empty-state {
|
||||
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
|
||||
text-align:center; color:var(--subtext0); pointer-events:none; display:none;
|
||||
}
|
||||
#empty-state.visible { display:block; }
|
||||
#empty-state h2 { font-size:20px; margin-bottom:8px; color:var(--surface2); }
|
||||
#empty-state p { font-size:13px; }
|
||||
|
||||
@media (max-width:700px) { #sidebar { width:0; min-width:0; } :root { --sidebar-w:240px; } }
|
||||
+2
File diff suppressed because one or more lines are too long
+1
@@ -0,0 +1 @@
|
||||
.uplot, .uplot *, .uplot *::before, .uplot *::after {box-sizing: border-box;}.uplot {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.5;width: min-content;}.u-title {text-align: center;font-size: 18px;font-weight: bold;}.u-wrap {position: relative;user-select: none;}.u-over, .u-under {position: absolute;}.u-under {overflow: hidden;}.uplot canvas {display: block;position: relative;width: 100%;height: 100%;}.u-axis {position: absolute;}.u-legend {font-size: 14px;margin: auto;text-align: center;}.u-inline {display: block;}.u-inline * {display: inline-block;}.u-inline tr {margin-right: 16px;}.u-legend th {font-weight: 600;}.u-legend th > * {vertical-align: middle;display: inline-block;}.u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}.u-inline.u-live th::after {content: ":";vertical-align: middle;}.u-inline:not(.u-live) .u-value {display: none;}.u-series > * {padding: 4px;}.u-series th {cursor: pointer;}.u-legend .u-off > * {opacity: 0.3;}.u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}.u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;}.u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}.u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}.u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;/*this has to be !important since we set inline "background" shorthand */background-clip: padding-box !important;}.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;}
|
||||
@@ -0,0 +1,283 @@
|
||||
'use strict';
|
||||
/* ════════════════════════════════════════════════════════════════
|
||||
Web Worker – buffer management, binary parsing, LTTB
|
||||
════════════════════════════════════════════════════════════════ */
|
||||
|
||||
const TEMPORAL_CAP = 600_000;
|
||||
const DEFAULT_CAP = 10_000;
|
||||
|
||||
// Circular buffers: key → {t:Float64Array, v:Float64Array, head, size, cap}
|
||||
const buffers = {};
|
||||
|
||||
function makeBuffer(cap) {
|
||||
return { t: new Float64Array(cap), v: new Float64Array(cap), head: 0, size: 0, cap };
|
||||
}
|
||||
function pushBuffer(buf, t, v) {
|
||||
buf.t[buf.head] = t; buf.v[buf.head] = v;
|
||||
buf.head = (buf.head + 1) % buf.cap;
|
||||
if (buf.size < buf.cap) buf.size++;
|
||||
}
|
||||
|
||||
// ─── Binary frame parser ─────────────────────────────────────────────
|
||||
// Format (little-endian):
|
||||
// uint8 version (1)
|
||||
// uint8 sourceIdLen
|
||||
// UTF-8 sourceId
|
||||
// uint32 numSignals
|
||||
// for each signal:
|
||||
// uint16 keyLen
|
||||
// UTF-8 key (relative to source)
|
||||
// uint32 pairCount N
|
||||
// float64[N] t values
|
||||
// float64[N] v values
|
||||
function parseBinaryFrame(buf) {
|
||||
const dv = new DataView(buf);
|
||||
let off = 0;
|
||||
|
||||
if (dv.getUint8(off) !== 1) { console.warn('[worker] bad binary version'); return; }
|
||||
off += 1;
|
||||
|
||||
const srcIdLen = dv.getUint8(off); off += 1;
|
||||
const srcId = new TextDecoder().decode(new Uint8Array(buf, off, srcIdLen));
|
||||
off += srcIdLen;
|
||||
|
||||
const prefix = srcId + ':';
|
||||
const numSigs = dv.getUint32(off, true); off += 4;
|
||||
|
||||
for (let s = 0; s < numSigs; s++) {
|
||||
const keyLen = dv.getUint16(off, true); off += 2;
|
||||
const key = new TextDecoder().decode(new Uint8Array(buf, off, keyLen));
|
||||
off += keyLen;
|
||||
|
||||
const fullKey = prefix + key;
|
||||
const n = dv.getUint32(off, true); off += 4;
|
||||
|
||||
let bufObj = buffers[fullKey];
|
||||
if (!bufObj) {
|
||||
// Auto-create buffer with reasonable capacity
|
||||
const cap = n > 100 ? TEMPORAL_CAP : DEFAULT_CAP;
|
||||
bufObj = makeBuffer(cap);
|
||||
buffers[fullKey] = bufObj;
|
||||
}
|
||||
|
||||
// Read t values
|
||||
for (let i = 0; i < n; i++) {
|
||||
const t = dv.getFloat64(off, true); off += 8;
|
||||
const v = dv.getFloat64(off + n * 8, true); // v array starts after t array
|
||||
pushBuffer(bufObj, t, v);
|
||||
}
|
||||
off += n * 8; // skip v array (already read inline above)
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Range slice from circular buffer ────────────────────────────────
|
||||
function getBufferSliceRange(bufObj, t0, t1) {
|
||||
const { cap, size, head } = bufObj;
|
||||
if (size === 0) return { t: new Float64Array(0), v: new Float64Array(0) };
|
||||
const start = (size === cap) ? head : 0;
|
||||
const physAt = k => (start + k) % cap;
|
||||
|
||||
let lo = 0, hi = size;
|
||||
while (lo < hi) { const m = (lo + hi) >>> 1; if (bufObj.t[physAt(m)] < t0) lo = m + 1; else hi = m; }
|
||||
const kStart = lo;
|
||||
lo = kStart; hi = size;
|
||||
while (lo < hi) { const m = (lo + hi) >>> 1; if (bufObj.t[physAt(m)] <= t1) lo = m + 1; else hi = m; }
|
||||
const kEnd = lo, len = kEnd - kStart;
|
||||
if (len <= 0) return { t: new Float64Array(0), v: new Float64Array(0) };
|
||||
|
||||
const outT = new Float64Array(len), outV = new Float64Array(len);
|
||||
const physStart = physAt(kStart), tail = cap - physStart;
|
||||
if (tail >= len) {
|
||||
outT.set(bufObj.t.subarray(physStart, physStart + len));
|
||||
outV.set(bufObj.v.subarray(physStart, physStart + len));
|
||||
} else {
|
||||
outT.set(bufObj.t.subarray(physStart, physStart + tail));
|
||||
outT.set(bufObj.t.subarray(0, len - tail), tail);
|
||||
outV.set(bufObj.v.subarray(physStart, physStart + tail));
|
||||
outV.set(bufObj.v.subarray(0, len - tail), tail);
|
||||
}
|
||||
return { t: outT, v: outV };
|
||||
}
|
||||
|
||||
// ─── LTTB decimation ─────────────────────────────────────────────────
|
||||
function lttb(t, v, threshold) {
|
||||
const len = t.length;
|
||||
if (len <= threshold || threshold < 3) return { t, v };
|
||||
const outT = new Float64Array(threshold), outV = new Float64Array(threshold);
|
||||
outT[0] = t[0]; outV[0] = v[0];
|
||||
outT[threshold - 1] = t[len - 1]; outV[threshold - 1] = v[len - 1];
|
||||
const every = (len - 2) / (threshold - 2);
|
||||
let a = 0;
|
||||
for (let i = 0; i < threshold - 2; i++) {
|
||||
const avgS = Math.floor((i + 1) * every) + 1, avgE = Math.min(Math.floor((i + 2) * every) + 1, len);
|
||||
let avgT = 0, avgV = 0, n = 0;
|
||||
for (let j = avgS; j < avgE; j++) { avgT += t[j]; avgV += v[j]; n++; }
|
||||
if (n) { avgT /= n; avgV /= n; }
|
||||
const rS = Math.floor(i * every) + 1, rE = Math.min(Math.floor((i + 1) * every) + 1, len);
|
||||
let maxA = -1, next = rS;
|
||||
const aT = t[a], aV = v[a];
|
||||
for (let j = rS; j < rE; j++) {
|
||||
const area = Math.abs((aT - avgT) * (v[j] - aV) - (aT - t[j]) * (avgV - aV));
|
||||
if (area > maxA) { maxA = area; next = j; }
|
||||
}
|
||||
outT[i + 1] = t[next]; outV[i + 1] = v[next]; a = next;
|
||||
}
|
||||
return { t: outT, v: outV };
|
||||
}
|
||||
|
||||
// ─── Linear resampling ───────────────────────────────────────────────
|
||||
function resampleLinear(tSrc, vSrc, tDst) {
|
||||
const n = tDst.length;
|
||||
const out = new Float64Array(n);
|
||||
if (tSrc.length === 0) return out;
|
||||
if (tSrc.length === 1) { out.fill(vSrc[0]); return out; }
|
||||
let j = 0;
|
||||
for (let i = 0; i < n; i++) {
|
||||
const td = tDst[i];
|
||||
while (j < tSrc.length - 2 && tSrc[j + 1] < td) j++;
|
||||
if (td <= tSrc[0]) { out[i] = vSrc[0]; }
|
||||
else if (td >= tSrc[tSrc.length - 1]) { out[i] = vSrc[vSrc.length - 1]; }
|
||||
else {
|
||||
const t0 = tSrc[j], t1 = tSrc[j + 1];
|
||||
const frac = (td - t0) / (t1 - t0);
|
||||
out[i] = vSrc[j] + frac * (vSrc[j + 1] - vSrc[j]);
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
// ─── Master time grid selection ──────────────────────────────────────
|
||||
// samplingRates: key → rate (Hz), provided by main thread on init
|
||||
const samplingRates = {};
|
||||
|
||||
function pickMasterKey(keys) {
|
||||
let bestKey = keys[0], bestRate = -1;
|
||||
for (const k of keys) {
|
||||
const rate = samplingRates[k] || 0;
|
||||
if (rate > bestRate) { bestRate = rate; bestKey = k; }
|
||||
}
|
||||
return bestKey;
|
||||
}
|
||||
|
||||
// ─── Build uPlot-compatible data arrays ──────────────────────────────
|
||||
function buildRenderData(keys, t0, t1, targetPts) {
|
||||
if (!keys || keys.length === 0) return [new Float64Array(0)];
|
||||
|
||||
const slices = {};
|
||||
let masterKey = pickMasterKey(keys), masterCount = -1;
|
||||
|
||||
for (const key of keys) {
|
||||
const bufObj = buffers[key];
|
||||
if (!bufObj || bufObj.size === 0) continue;
|
||||
const sl = getBufferSliceRange(bufObj, t0, t1);
|
||||
slices[key] = sl;
|
||||
if (sl.t.length > masterCount) { masterCount = sl.t.length; masterKey = key; }
|
||||
}
|
||||
|
||||
const masterRaw = slices[masterKey];
|
||||
if (!masterRaw || masterRaw.t.length === 0)
|
||||
return [new Float64Array(0), ...keys.map(() => new Float64Array(0))];
|
||||
|
||||
const dec = lttb(masterRaw.t, masterRaw.v, targetPts);
|
||||
const sharedT = dec.t;
|
||||
const yArrays = [];
|
||||
|
||||
for (const key of keys) {
|
||||
if (key === masterKey) { yArrays.push(dec.v); continue; }
|
||||
const sl = slices[key];
|
||||
if (!sl || sl.t.length === 0) { yArrays.push(new Float64Array(sharedT.length)); continue; }
|
||||
yArrays.push(resampleLinear(sl.t, sl.v, sharedT));
|
||||
}
|
||||
|
||||
const result = [sharedT, ...yArrays];
|
||||
// Transfer ownership of the Float64Arrays to main thread
|
||||
const transferList = result.map(a => a.buffer);
|
||||
return { data: result, transfer: transferList };
|
||||
}
|
||||
|
||||
// ─── Message handler ─────────────────────────────────────────────────
|
||||
self.onmessage = function(e) {
|
||||
const msg = e.data;
|
||||
|
||||
switch (msg.type) {
|
||||
case 'initSignals': {
|
||||
// {signals: [{key, cap}]}
|
||||
const sigs = msg.signals || [];
|
||||
sigs.forEach(s => {
|
||||
if (!buffers[s.key]) {
|
||||
buffers[s.key] = makeBuffer(s.cap || DEFAULT_CAP);
|
||||
}
|
||||
if (s.samplingRate !== undefined) {
|
||||
samplingRates[s.key] = s.samplingRate;
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
case 'binaryData': {
|
||||
// {buffer: ArrayBuffer} — transferred from main thread
|
||||
parseBinaryFrame(msg.buffer);
|
||||
self.postMessage({ type: 'dataReady' });
|
||||
break;
|
||||
}
|
||||
|
||||
case 'requestData': {
|
||||
// {id, t0, t1, targetPts, keys}
|
||||
const { id, t0, t1, targetPts, keys } = msg;
|
||||
const { data, transfer } = buildRenderData(keys, t0, t1, targetPts);
|
||||
self.postMessage({ type: 'renderData', id, data }, transfer);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'clearSource': {
|
||||
const prefix = msg.prefix;
|
||||
Object.keys(buffers).forEach(k => {
|
||||
if (k.startsWith(prefix)) delete buffers[k];
|
||||
});
|
||||
Object.keys(samplingRates).forEach(k => {
|
||||
if (k.startsWith(prefix)) delete samplingRates[k];
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
case 'getBufferNow': {
|
||||
// Returns newest timestamp across given keys
|
||||
const keys = msg.keys || [];
|
||||
let latest = -Infinity;
|
||||
keys.forEach(key => {
|
||||
const bufObj = buffers[key];
|
||||
if (bufObj && bufObj.size > 0) {
|
||||
const t = bufObj.t[(bufObj.head - 1 + bufObj.cap) % bufObj.cap];
|
||||
if (t > latest) latest = t;
|
||||
}
|
||||
});
|
||||
self.postMessage({ type: 'bufferNow', id: msg.id, now: isFinite(latest) ? latest : null });
|
||||
break;
|
||||
}
|
||||
|
||||
case 'getBufferForTrig': {
|
||||
// Returns full buffer contents for a single key (used for trigger check)
|
||||
const key = msg.key;
|
||||
const bufObj = buffers[key];
|
||||
if (!bufObj || bufObj.size === 0) {
|
||||
self.postMessage({ type: 'trigBuf', id: msg.id, key, size: 0 });
|
||||
break;
|
||||
}
|
||||
// Copy out all data
|
||||
const { cap, size, head } = bufObj;
|
||||
const start = (size === cap) ? head : 0;
|
||||
const t = new Float64Array(size), v = new Float64Array(size);
|
||||
const physAt = k => (start + k) % cap;
|
||||
for (let i = 0; i < size; i++) {
|
||||
const p = physAt(i);
|
||||
t[i] = bufObj.t[p];
|
||||
v[i] = bufObj.v[p];
|
||||
}
|
||||
self.postMessage({
|
||||
type: 'trigBuf', id: msg.id, key, size,
|
||||
t, v
|
||||
}, [t.buffer, v.buffer]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user