martino/MARTe_IO_Components
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WebUI: resizable plots, digital/mixed modes, buffer fix, zoom brackets, updated docs

Browse Source 
- Resizable plot grid: drag handles between plots adjust column/row fr sizes
- Plot configuration toolbar (click title): edit title, select Normal/Mixed/Digital mode
- Digital mode: logic-analyzer banded layout, signals quantized to hi/lo per band
- Mixed mode: banded layout where each signal is independently analog or digital
- Per-signal vscale toolbar embedded inline below plot header (badge click to open)
- Active signal highlighted in foreground with increased line width
- Signal offset markers draggable on Y axis; per-plot vscale state isolation
- Buffer sizing based on signal sampling rate (up to 60s @ configured rate)
- growBuffer: live buffer expansion without data loss on window/rate change
- Zoom bracket lines: nearest out-of-range points included for continuity
- Updated Docs/WebUI.md to reflect current uPlot-based implementation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Martino Ferrari
2026-05-27 16:29:09 +02:00
parent cf174edde8
commit 915c6fc126
4 changed files with 604 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Client/WebUI/static/style.css
+22 -4
View File
@@ -219,6 +219,19 @@ input[type=range].trig-range::-webkit-slider-thumb {
#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; }
@@ -249,11 +262,16 @@ input[type=range].trig-range::-webkit-slider-thumb {
}
.plot-title {
font-size:11px; color:var(--subtext1); font-weight:600;
cursor:text; outline:none; border:1px solid transparent; border-radius:3px;
padding:1px 3px; background:transparent; white-space:nowrap;
flex-shrink:0; max-width:80px; overflow:hidden; text-overflow:ellipsis;
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;
}
.plot-title:focus { border-color:var(--accent); background:var(--surface1); color:var(--text); }
.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;