Revert "varaverk: stretch CPU and GPU graphs to card bottom; add GPU history chart"

This reverts commit 660c4762f2.
This commit is contained in:
Gmer4Lfe
2026-05-24 11:12:55 -04:00
parent 660c4762f2
commit 496d70c137
@@ -9,9 +9,9 @@
<div id="vv-fallback-desc"></div> <div id="vv-fallback-desc"></div>
</div> </div>
<div class="vv-card" id="vv-cpu" style="flex:2;min-width:240px;display:flex;flex-direction:column;"> <div class="vv-card" id="vv-cpu" style="flex:2;min-width:240px;">
<h3>CPU</h3> <h3>CPU</h3>
<div id="vv-cpu-body" style="flex:1;display:flex;flex-direction:column;">Loading...</div> <div id="vv-cpu-body">Loading...</div>
</div> </div>
<div class="vv-card" id="vv-memory" style="flex:2;min-width:240px;"> <div class="vv-card" id="vv-memory" style="flex:2;min-width:240px;">
@@ -26,9 +26,9 @@
</div> </div>
<div class="vv-row"> <div class="vv-row">
<div class="vv-card" id="vv-gpu-card" style="flex:2;min-width:240px;display:flex;flex-direction:column;"> <div class="vv-card" id="vv-gpu-card" style="flex:2;min-width:240px;">
<h3>GPU</h3> <h3>GPU</h3>
<div id="vv-gpu-body" style="flex:1;display:flex;flex-direction:column;">Loading...</div> <div id="vv-gpu-body">Loading...</div>
</div> </div>
<div class="vv-card" id="vv-transcode"> <div class="vv-card" id="vv-transcode">
@@ -71,7 +71,6 @@ function vvMeter(label, pct, text) {
const VV_HIST_MAX = 24; // 24 × 5 s = 120 s const VV_HIST_MAX = 24; // 24 × 5 s = 120 s
let vvCpuHistory = []; let vvCpuHistory = [];
let vvGpuHistory = [];
let vvNetRxHistory = []; let vvNetRxHistory = [];
let vvNetTxHistory = []; let vvNetTxHistory = [];
@@ -222,8 +221,8 @@ function vvRenderCpu(cpu) {
</div>`; </div>`;
} }
// Canvas chart — flex:1 stretches to fill remaining card height // Canvas chart
html += `<canvas id="vv-cpu-canvas" style="width:100%;flex:1;min-height:36px;display:block;"></canvas>`; html += `<canvas id="vv-cpu-canvas" style="width:100%;height:36px;display:block;"></canvas>`;
return html; return html;
} }
@@ -389,17 +388,12 @@ function vvPollMonitor() {
vvMeter('GPU', utilPct, `${utilPct}%`) + vvMeter('GPU', utilPct, `${utilPct}%`) +
vvMeter('Encode', gpu.enc_pct ?? 0, `${gpu.enc_pct ?? 0}%`) + vvMeter('Encode', gpu.enc_pct ?? 0, `${gpu.enc_pct ?? 0}%`) +
vvMeter('Decode', gpu.dec_pct ?? 0, `${gpu.dec_pct ?? 0}%`) + vvMeter('Decode', gpu.dec_pct ?? 0, `${gpu.dec_pct ?? 0}%`) +
`<div style="display:flex;justify-content:space-between;font-size:11px;margin-top:6px;margin-bottom:8px;"> `<div style="display:flex;justify-content:space-between;font-size:11px;margin-top:6px;">
<span style="color:#666;">Temp</span> <span style="color:#666;">Temp</span>
<span style="color:${tempColor};font-weight:bold;">${temp}°C</span> <span style="color:${tempColor};font-weight:bold;">${temp}°C</span>
<span style="color:#666;margin-left:12px;">Power</span> <span style="color:#666;margin-left:12px;">Power</span>
<span style="color:#aaa;font-weight:bold;">${powerStr}</span> <span style="color:#aaa;font-weight:bold;">${powerStr}</span>
</div>` + </div>`;
`<canvas id="vv-gpu-canvas" style="width:100%;flex:1;min-height:36px;display:block;"></canvas>`;
vvGpuHistory.push(utilPct);
if (vvGpuHistory.length > VV_HIST_MAX) vvGpuHistory.shift();
vvDrawChart(document.getElementById('vv-gpu-canvas'), vvGpuHistory, '#7e57c2', 'rgba(126,87,194,0.18)', true);
} else { } else {
document.getElementById('vv-gpu-body').innerHTML = '<p style="color:#555;font-style:italic">No GPU detected</p>'; document.getElementById('vv-gpu-body').innerHTML = '<p style="color:#555;font-style:italic">No GPU detected</p>';
} }