디자인 다크 모드 수정
This commit is contained in:
768
graph_viewer.h
768
graph_viewer.h
@@ -9,219 +9,241 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CAN Signal Graph Viewer</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--bg: #0e1117;
|
||||
--panel: #161b24;
|
||||
--card: #1c2230;
|
||||
--border: #2d3748;
|
||||
--accent: #43cea2;
|
||||
--accent2: #38ef7d;
|
||||
--blue: #58a6ff;
|
||||
--red: #f85149;
|
||||
--yellow: #e3b341;
|
||||
--text: #e6edf3;
|
||||
--muted: #8b949e;
|
||||
--radius: 10px;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
html, body { height:100%; }
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 10px;
|
||||
color: white;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
overflow-x: hidden;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
.header h1 { font-size: 1.5em; }
|
||||
.header p { font-size: 0.9em; opacity: 0.9; margin-top: 5px; }
|
||||
|
||||
/* ========== 통일된 네비게이션 ========== */
|
||||
.nav {
|
||||
background: #f8f9fa;
|
||||
padding: 0;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
background: linear-gradient(135deg, #1a2744 0%, #1e1a3a 100%);
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.05em;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.header p {
|
||||
font-size: 0.8em;
|
||||
color: var(--muted);
|
||||
margin: 0;
|
||||
}
|
||||
.header-spacer { flex: 1; }
|
||||
|
||||
/* ── Nav ── */
|
||||
.nav {
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.nav::-webkit-scrollbar { display: none; }
|
||||
.nav a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px 20px;
|
||||
padding: 10px 14px;
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
color: var(--muted);
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
font-size: 0.95em;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all 0.3s;
|
||||
border-bottom: 2px solid transparent;
|
||||
white-space: nowrap;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
background: #e9ecef;
|
||||
color: #667eea;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.nav a.active {
|
||||
color: #764ba2;
|
||||
border-bottom-color: #764ba2;
|
||||
background: white;
|
||||
font-weight: 600;
|
||||
transition: color 0.2s, border-color 0.2s;
|
||||
min-width: unset;
|
||||
}
|
||||
.nav a:hover { color: var(--text); }
|
||||
.nav a.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||
|
||||
/* ── Controls ── */
|
||||
.controls {
|
||||
background: #2a2a2a;
|
||||
padding: 10px 15px;
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.control-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.control-label {
|
||||
font-size: 0.85em;
|
||||
color: #aaa;
|
||||
font-size: 0.72em;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
padding-right: 2px;
|
||||
}
|
||||
.ctrl-sep {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: var(--border);
|
||||
margin: 0 4px;
|
||||
}
|
||||
.btn {
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 0.9em;
|
||||
padding: 5px 11px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg);
|
||||
color: var(--muted);
|
||||
font-size: 0.78em;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
font-family: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||
.btn:active { transform: scale(0.96); }
|
||||
.btn.active {
|
||||
background: rgba(67,206,162,0.15);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
.btn-success { border-color: #3fb950; color: #3fb950; }
|
||||
.btn-success.active, .btn-success:hover { background: rgba(63,185,80,0.15); }
|
||||
.btn-danger { border-color: var(--red); color: var(--red); }
|
||||
.btn-danger:hover { background: rgba(248,81,73,0.12); }
|
||||
.btn-info { border-color: var(--blue); color: var(--blue); }
|
||||
.btn-info.active, .btn-info:hover { background: rgba(88,166,255,0.15); }
|
||||
.btn-warning { border-color: var(--yellow); color: var(--yellow); }
|
||||
.btn-warning.active, .btn-warning:hover { background: rgba(227,179,65,0.15); }
|
||||
|
||||
/* ── Stats bar ── */
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
padding: 5px 14px;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 0.75em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.stats-bar strong { color: var(--accent); margin-left: 3px; }
|
||||
|
||||
/* ── Status pill ── */
|
||||
.status {
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.72em;
|
||||
font-weight: 600;
|
||||
background: rgba(67,206,162,0.12);
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(67,206,162,0.3);
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-success { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white; }
|
||||
.btn-danger { background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%); color: white; }
|
||||
.btn-info { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
|
||||
.btn-warning { background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%); color: white; }
|
||||
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
|
||||
.btn.active {
|
||||
box-shadow: inset 0 3px 5px rgba(0,0,0,0.3);
|
||||
transform: translateY(0);
|
||||
.status.disconnected {
|
||||
background: rgba(248,81,73,0.12);
|
||||
color: var(--red);
|
||||
border-color: rgba(248,81,73,0.3);
|
||||
}
|
||||
|
||||
|
||||
/* ── Graph grid ── */
|
||||
.graphs {
|
||||
padding: 15px;
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
|
||||
gap: 15px;
|
||||
/* ★ 모바일 핵심: min(100%, 440px) 로 가로 스크롤 방지 */
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.graph-container {
|
||||
background: #2a2a2a;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #3a3a3a;
|
||||
background: var(--card);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
}
|
||||
.graph-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid #43cea2;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: rgba(67,206,162,0.05);
|
||||
gap: 8px;
|
||||
}
|
||||
.graph-title {
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
color: #43cea2;
|
||||
font-size: 0.82em;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.graph-value {
|
||||
font-size: 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
color: #38ef7d;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: var(--accent2);
|
||||
font-family: 'Courier New', 'SF Mono', monospace;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* ★ canvas: CSS padding/background 제거, height만 설정 */
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 10px;
|
||||
height: 200px;
|
||||
border: none;
|
||||
}
|
||||
.status {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
background: #2a2a2a;
|
||||
border: 2px solid #43cea2;
|
||||
font-size: 0.9em;
|
||||
z-index: 1000;
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 480px) {
|
||||
.controls { padding: 6px 8px; gap: 5px; }
|
||||
.ctrl-sep { display: none; }
|
||||
.btn { padding: 6px 9px; font-size: 0.8em; }
|
||||
.header h1 { font-size: 0.95em; }
|
||||
canvas { height: 175px; }
|
||||
.stats-bar { gap: 8px; font-size: 0.7em; }
|
||||
}
|
||||
.status.disconnected {
|
||||
border-color: #eb3349;
|
||||
background: #3a2a2a;
|
||||
@media (min-width: 768px) {
|
||||
canvas { height: 230px; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ========== 반응형 디자인 ========== */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.container {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 15px;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.nav {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
padding: 12px 15px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.header h1 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
padding: 13px 18px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.content {
|
||||
padding: 30px;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
canvas { height: 260px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>Real-time CAN Signal Graphs (Scatter Mode)</h1>
|
||||
<p>Viewing <span id="graph-count">0</span> signals</p>
|
||||
<div>
|
||||
<h1>📈 CAN Signal Graph</h1>
|
||||
<p>Viewing <span id="graph-count">0</span> signals</p>
|
||||
</div>
|
||||
<div class="header-spacer"></div>
|
||||
<div class="status" id="status-pill">Connecting...</div>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
@@ -236,42 +258,46 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
|
||||
|
||||
<div class="controls">
|
||||
<div class="control-group">
|
||||
<button class="btn btn-success" onclick="startGraphing()">Start</button>
|
||||
<button class="btn btn-danger" onclick="stopGraphing()">Stop</button>
|
||||
<button class="btn btn-danger" onclick="window.close()">Close</button>
|
||||
<button class="btn btn-success active" id="btn-start" onclick="startGraphing()">▶ Start</button>
|
||||
<button class="btn btn-danger" id="btn-stop" onclick="stopGraphing()">■ Stop</button>
|
||||
</div>
|
||||
<div class="ctrl-sep"></div>
|
||||
<div class="control-group">
|
||||
<span class="control-label">X-Axis Scale:</span>
|
||||
<span class="control-label">Scale:</span>
|
||||
<button class="btn btn-info active" id="btn-index-mode" onclick="setScaleMode('index')">Index</button>
|
||||
<button class="btn btn-info" id="btn-time-mode" onclick="setScaleMode('time')">Time-Based</button>
|
||||
<button class="btn btn-info" id="btn-time-mode" onclick="setScaleMode('time')">Time</button>
|
||||
</div>
|
||||
<div class="ctrl-sep"></div>
|
||||
<div class="control-group">
|
||||
<span class="control-label">X-Axis Range:</span>
|
||||
<button class="btn btn-warning active" id="btn-range-10s" onclick="setRangeMode('10s')">10s Window</button>
|
||||
<button class="btn btn-warning" id="btn-range-all" onclick="setRangeMode('all')">All Time</button>
|
||||
<span class="control-label">Range:</span>
|
||||
<button class="btn btn-warning active" id="btn-range-10s" onclick="setRangeMode('10s')">10s</button>
|
||||
<button class="btn btn-warning" id="btn-range-30s" onclick="setRangeMode('30s')">30s</button>
|
||||
<button class="btn btn-warning" id="btn-range-all" onclick="setRangeMode('all')">All</button>
|
||||
</div>
|
||||
<div class="ctrl-sep"></div>
|
||||
<div class="control-group">
|
||||
<span class="control-label">Sort by:</span>
|
||||
<button class="btn btn-info active" id="btn-sort-selection" onclick="setSortMode('selection')">Selection Order</button>
|
||||
<button class="btn btn-info" id="btn-sort-name-asc" onclick="setSortMode('name-asc')">Name (A→Z)</button>
|
||||
<button class="btn btn-info" id="btn-sort-name-desc" onclick="setSortMode('name-desc')">Name (Z→A)</button>
|
||||
<span class="control-label">Plot:</span>
|
||||
<button class="btn btn-info active" id="btn-plot-line" onclick="setPlotMode('line')">Line</button>
|
||||
<button class="btn btn-info" id="btn-plot-scatter" onclick="setPlotMode('scatter')">Dot</button>
|
||||
</div>
|
||||
<div class="ctrl-sep"></div>
|
||||
<div class="control-group">
|
||||
<button class="btn btn-success" onclick="downloadCSV()" style="background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);">
|
||||
📥 Download CSV
|
||||
</button>
|
||||
<button class="btn btn-danger" onclick="clearData()" style="background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);">
|
||||
🗑️ Clear Data
|
||||
</button>
|
||||
<span class="control-label">Sort:</span>
|
||||
<button class="btn btn-info active" id="btn-sort-selection" onclick="setSortMode('selection')">Order</button>
|
||||
<button class="btn btn-info" id="btn-sort-name-asc" onclick="setSortMode('name-asc')">A→Z</button>
|
||||
<button class="btn btn-info" id="btn-sort-name-desc" onclick="setSortMode('name-desc')">Z→A</button>
|
||||
</div>
|
||||
<div class="ctrl-sep"></div>
|
||||
<div class="control-group">
|
||||
<button class="btn btn-success" onclick="downloadCSV()">⬇ CSV</button>
|
||||
<button class="btn btn-danger" onclick="clearData()">🗑 Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status" id="status">Connecting...</div>
|
||||
|
||||
<div style="padding: 10px 15px; background: #2a2a2a; color: #aaa; font-size: 0.85em; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span>Data Points: <strong id="data-point-count" style="color: #43cea2;">0</strong></span>
|
||||
<span>Recording Time: <strong id="recording-time" style="color: #43cea2;">0s</strong></span>
|
||||
<span>Messages Received: <strong id="msg-received" style="color: #43cea2;">0</strong></span>
|
||||
<div class="stats-bar">
|
||||
<span>Points:<strong id="data-point-count">0</strong></span>
|
||||
<span>Time:<strong id="recording-time">0s</strong></span>
|
||||
<span>Msgs:<strong id="msg-received">0</strong></span>
|
||||
</div>
|
||||
|
||||
<div class="graphs" id="graphs"></div>
|
||||
@@ -285,12 +311,13 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
|
||||
let dbcData = {};
|
||||
let lastTimestamps = {};
|
||||
let sortMode = 'selection';
|
||||
const MAX_DATA_POINTS = 60;
|
||||
const MAX_DATA_POINTS = 300;
|
||||
let scaleMode = 'index';
|
||||
let rangeMode = '10s';
|
||||
let totalMsgReceived = 0;
|
||||
let lastCanCounts = {}; // ★ 각 CAN ID별 마지막 count 저장
|
||||
let lastSignalTimes = {}; // ⭐ 각 신호별 마지막 시간 저장 (time-base 모드용)
|
||||
let lastCanCounts = {};
|
||||
let lastSignalTimes = {};
|
||||
let plotMode = 'line'; // ★ 'line' | 'scatter'
|
||||
|
||||
const COLORS = [
|
||||
{line: '#FF6384', fill: 'rgba(255, 99, 132, 0.2)'},
|
||||
@@ -334,10 +361,13 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
|
||||
|
||||
resizeCanvas() {
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
this.canvas.width = rect.width * window.devicePixelRatio;
|
||||
this.canvas.height = rect.height * window.devicePixelRatio;
|
||||
this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||
this.width = rect.width;
|
||||
if (rect.width === 0) return;
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
this.canvas.width = rect.width * dpr;
|
||||
this.canvas.height = rect.height * dpr;
|
||||
// ★ 버그수정: scale() 누적 → setTransform() 으로 항상 초기화
|
||||
this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
this.width = rect.width;
|
||||
this.height = rect.height;
|
||||
this.draw();
|
||||
}
|
||||
@@ -380,127 +410,170 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
|
||||
}
|
||||
|
||||
draw() {
|
||||
if (this.data.length === 0) return;
|
||||
|
||||
const ctx = this.ctx;
|
||||
const padding = 40;
|
||||
const graphWidth = this.width - padding * 2;
|
||||
const graphHeight = this.height - padding * 2;
|
||||
|
||||
ctx.fillStyle = '#1a1a1a';
|
||||
ctx.fillRect(0, 0, this.width, this.height);
|
||||
|
||||
let displayData = [];
|
||||
let displayTimes = [];
|
||||
let displayLabels = [];
|
||||
|
||||
if (rangeMode === '10s') {
|
||||
const currentTime = parseFloat(this.times[this.times.length - 1]);
|
||||
const W = this.width, H = this.height;
|
||||
if (!W || !H) return;
|
||||
|
||||
const PAD_L = 52, PAD_R = 8, PAD_T = 12, PAD_B = 28;
|
||||
const gW = W - PAD_L - PAD_R;
|
||||
const gH = H - PAD_T - PAD_B;
|
||||
|
||||
// 배경
|
||||
ctx.fillStyle = '#111827';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
// ★ 빈 데이터 상태 표시
|
||||
if (this.data.length === 0) {
|
||||
ctx.fillStyle = '#374151';
|
||||
ctx.font = '12px monospace';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText('Waiting for data...', W / 2, H / 2);
|
||||
return;
|
||||
}
|
||||
|
||||
// ── 표시할 데이터 슬라이스 계산 ──
|
||||
let displayData = [], displayTimes = [], displayLabels = [];
|
||||
const windowSec = rangeMode === '30s' ? 30 : 10;
|
||||
|
||||
if (rangeMode === 'all') {
|
||||
displayData = [...this.data];
|
||||
displayTimes = [...this.times];
|
||||
displayLabels = [...this.labels];
|
||||
} else if (scaleMode === 'time') {
|
||||
// time 모드: 시간 기준으로 window 필터
|
||||
const latest = this.times[this.times.length - 1];
|
||||
const cutoff = latest - windowSec;
|
||||
for (let i = 0; i < this.times.length; i++) {
|
||||
if (currentTime - parseFloat(this.times[i]) <= 10) {
|
||||
if (this.times[i] >= cutoff) {
|
||||
displayData.push(this.data[i]);
|
||||
displayTimes.push(this.times[i]);
|
||||
displayLabels.push(this.labels[i]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
displayData = [...this.data];
|
||||
displayTimes = [...this.times];
|
||||
displayLabels = [...this.labels];
|
||||
// ★ index 모드: 최근 N개만 표시
|
||||
const N = rangeMode === '30s' ? 150 : 60;
|
||||
const start = Math.max(0, this.data.length - N);
|
||||
displayData = this.data.slice(start);
|
||||
displayTimes = this.times.slice(start);
|
||||
displayLabels = this.labels.slice(start);
|
||||
}
|
||||
|
||||
|
||||
if (displayData.length === 0) return;
|
||||
|
||||
|
||||
const minValue = Math.min(...displayData);
|
||||
const maxValue = Math.max(...displayData);
|
||||
const range = maxValue - minValue || 1;
|
||||
|
||||
let minTime, maxTime, timeRange;
|
||||
if (scaleMode === 'time') {
|
||||
minTime = parseFloat(displayTimes[0]);
|
||||
maxTime = parseFloat(displayTimes[displayTimes.length - 1]);
|
||||
timeRange = maxTime - minTime || 1;
|
||||
}
|
||||
|
||||
ctx.strokeStyle = '#888';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, this.height - padding);
|
||||
ctx.lineTo(this.width - padding, this.height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.fillStyle = '#ccc';
|
||||
ctx.font = '11px Arial';
|
||||
ctx.textAlign = 'right';
|
||||
|
||||
if (this.signal.valueTable) {
|
||||
const uniqueValues = [...new Set(displayData)].sort((a, b) => a - b);
|
||||
if (uniqueValues.length <= 5) {
|
||||
uniqueValues.forEach((val, idx) => {
|
||||
const y = this.height - padding - ((val - minValue) / range) * graphHeight;
|
||||
const text = this.getValueText(val);
|
||||
ctx.fillText(text, padding - 5, y + 5);
|
||||
});
|
||||
const range = maxValue - minValue || 1;
|
||||
|
||||
// ── Y 그리드 ──
|
||||
const GRID_Y = 4;
|
||||
ctx.lineWidth = 0.5;
|
||||
for (let i = 0; i <= GRID_Y; i++) {
|
||||
const y = PAD_T + (gH / GRID_Y) * i;
|
||||
ctx.strokeStyle = (i === GRID_Y) ? '#2d3748' : '#1a2035';
|
||||
ctx.beginPath(); ctx.moveTo(PAD_L, y); ctx.lineTo(PAD_L + gW, y); ctx.stroke();
|
||||
|
||||
// Y 라벨
|
||||
const v = maxValue - (range / GRID_Y) * i;
|
||||
let label = '';
|
||||
if (this.signal.valueTable) {
|
||||
const rv = Math.round(v);
|
||||
label = (this.signal.valueTable[rv] !== undefined)
|
||||
? String(this.signal.valueTable[rv]).substring(0, 7)
|
||||
: v.toFixed(1);
|
||||
} else {
|
||||
ctx.fillText(this.getValueText(maxValue), padding - 5, padding + 5);
|
||||
ctx.fillText(this.getValueText(minValue), padding - 5, this.height - padding);
|
||||
label = Math.abs(v) < 100 ? v.toFixed(2) : v.toFixed(0);
|
||||
}
|
||||
} else {
|
||||
ctx.fillText(maxValue.toFixed(2), padding - 5, padding + 5);
|
||||
ctx.fillText(minValue.toFixed(2), padding - 5, this.height - padding);
|
||||
ctx.fillStyle = '#6b7280';
|
||||
ctx.font = '9px monospace';
|
||||
ctx.textAlign = 'right';
|
||||
ctx.fillText(label, PAD_L - 3, y + 3);
|
||||
}
|
||||
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillStyle = '#ccc';
|
||||
ctx.font = '10px Arial';
|
||||
if (displayLabels.length > 0) {
|
||||
ctx.fillText(displayLabels[0] + 's', padding, this.height - padding + 15);
|
||||
if (displayLabels.length > 1) {
|
||||
const lastIdx = displayLabels.length - 1;
|
||||
let xPos;
|
||||
if (scaleMode === 'time') {
|
||||
xPos = this.width - padding;
|
||||
} else {
|
||||
xPos = padding + (graphWidth / (MAX_DATA_POINTS - 1)) * Math.min(lastIdx, MAX_DATA_POINTS - 1);
|
||||
}
|
||||
ctx.fillText(displayLabels[lastIdx] + 's', xPos, this.height - padding + 15);
|
||||
}
|
||||
|
||||
// ── X 그리드 ──
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
const x = PAD_L + (gW / 4) * i;
|
||||
ctx.strokeStyle = '#1a2035';
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.beginPath(); ctx.moveTo(x, PAD_T); ctx.lineTo(x, PAD_T + gH); ctx.stroke();
|
||||
}
|
||||
ctx.fillText('Time (sec)', this.width / 2, this.height - 5);
|
||||
|
||||
ctx.strokeStyle = '#444';
|
||||
|
||||
// ── 축선 ──
|
||||
ctx.strokeStyle = '#2d3748';
|
||||
ctx.lineWidth = 1;
|
||||
for (let i = 1; i < 5; i++) {
|
||||
const y = padding + (graphHeight / 5) * i;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(PAD_L, PAD_T);
|
||||
ctx.lineTo(PAD_L, PAD_T + gH);
|
||||
ctx.lineTo(PAD_L + gW, PAD_T + gH);
|
||||
ctx.stroke();
|
||||
|
||||
// ── 좌표 변환 함수 ──
|
||||
let minTime, timeRange;
|
||||
if (scaleMode === 'time' && displayTimes.length > 1) {
|
||||
minTime = displayTimes[0];
|
||||
timeRange = displayTimes[displayTimes.length - 1] - minTime || 1;
|
||||
}
|
||||
const xOf = (i) => {
|
||||
if (scaleMode === 'time' && displayTimes.length > 1) {
|
||||
return PAD_L + ((displayTimes[i] - minTime) / timeRange) * gW;
|
||||
}
|
||||
// ★ 버그수정: MAX_DATA_POINTS 고정값 대신 실제 표시 데이터 개수 사용
|
||||
return PAD_L + (displayData.length > 1 ? (i / (displayData.length - 1)) * gW : 0);
|
||||
};
|
||||
const yOf = (v) => PAD_T + gH - ((v - minValue) / range) * gH;
|
||||
|
||||
const lineColor = this.colors.line;
|
||||
|
||||
// ── Fill 영역 ──
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xOf(0), PAD_T + gH);
|
||||
for (let i = 0; i < displayData.length; i++) ctx.lineTo(xOf(i), yOf(displayData[i]));
|
||||
ctx.lineTo(xOf(displayData.length - 1), PAD_T + gH);
|
||||
ctx.closePath();
|
||||
// fill 색상: line 색에 알파 추가
|
||||
ctx.fillStyle = this.colors.fill;
|
||||
ctx.fill();
|
||||
|
||||
// ── Line 또는 Scatter ──
|
||||
if (plotMode === 'line' && displayData.length > 1) {
|
||||
// ★ 라인 그리기
|
||||
ctx.strokeStyle = lineColor;
|
||||
ctx.lineWidth = 1.8;
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, y);
|
||||
ctx.lineTo(this.width - padding, y);
|
||||
ctx.moveTo(xOf(0), yOf(displayData[0]));
|
||||
for (let i = 1; i < displayData.length; i++) {
|
||||
ctx.lineTo(xOf(i), yOf(displayData[i]));
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
if (displayData.length < 1) return;
|
||||
|
||||
ctx.fillStyle = this.colors.line;
|
||||
|
||||
// 점 그리기
|
||||
for (let i = 0; i < displayData.length; i++) {
|
||||
let x;
|
||||
|
||||
if (scaleMode === 'time') {
|
||||
const timePos = (parseFloat(displayTimes[i]) - minTime) / timeRange;
|
||||
x = padding + graphWidth * timePos;
|
||||
} else {
|
||||
x = padding + (graphWidth / (MAX_DATA_POINTS - 1)) * i;
|
||||
const isLast = (i === displayData.length - 1);
|
||||
if (plotMode === 'scatter' || isLast) {
|
||||
const r = isLast ? 4.5 : 2.5;
|
||||
ctx.fillStyle = isLast ? '#ffffff' : lineColor;
|
||||
ctx.strokeStyle = lineColor;
|
||||
ctx.lineWidth = isLast ? 1.5 : 0;
|
||||
ctx.beginPath();
|
||||
ctx.arc(xOf(i), yOf(displayData[i]), r, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
if (isLast) ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
// ── X 라벨 ──
|
||||
ctx.fillStyle = '#6b7280';
|
||||
ctx.font = '9px monospace';
|
||||
ctx.textAlign = 'center';
|
||||
if (displayLabels.length > 0) {
|
||||
ctx.fillText(displayLabels[0] + 's', PAD_L, PAD_T + gH + 16);
|
||||
ctx.fillText(displayLabels[displayLabels.length-1] + 's', PAD_L + gW, PAD_T + gH + 16);
|
||||
if (displayLabels.length > 4) {
|
||||
const mid = Math.floor(displayLabels.length / 2);
|
||||
ctx.fillText(displayLabels[mid] + 's', PAD_L + gW * 0.5, PAD_T + gH + 16);
|
||||
}
|
||||
|
||||
const y = this.height - padding - ((displayData[i] - minValue) / range) * graphHeight;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
ctx.strokeStyle = '#fff';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -542,9 +615,10 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
|
||||
}
|
||||
|
||||
function updateStatus(text, isError) {
|
||||
const status = document.getElementById('status');
|
||||
status.textContent = text;
|
||||
status.className = 'status' + (isError ? ' disconnected' : '');
|
||||
const el = document.getElementById('status-pill');
|
||||
if (!el) return;
|
||||
el.textContent = text;
|
||||
el.className = 'status' + (isError ? ' disconnected' : '');
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
@@ -605,13 +679,61 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
|
||||
|
||||
function setSortMode(mode) {
|
||||
sortMode = mode;
|
||||
|
||||
document.querySelectorAll('[id^="btn-sort-"]').forEach(btn => btn.classList.remove('active'));
|
||||
document.getElementById('btn-sort-' + mode).classList.add('active');
|
||||
|
||||
createGraphs();
|
||||
|
||||
console.log('Sort mode changed to:', mode);
|
||||
|
||||
// ★ 버그수정: createGraphs() 호출 시 데이터 초기화 문제
|
||||
// → 기존 차트 데이터를 보존한 채로 DOM 순서만 재배열
|
||||
const graphsDiv = document.getElementById('graphs');
|
||||
const oldCharts = Object.assign({}, charts);
|
||||
const origSignals = [...selectedSignals];
|
||||
const sorted = sortSignalsForDisplay();
|
||||
|
||||
graphsDiv.innerHTML = '';
|
||||
charts = {};
|
||||
|
||||
sorted.forEach((signal, newIdx) => {
|
||||
const origIdx = origSignals.findIndex(s =>
|
||||
s.name === signal.name && s.messageId === signal.messageId);
|
||||
const container = document.createElement('div');
|
||||
container.className = 'graph-container';
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.id = 'chart-' + newIdx;
|
||||
container.innerHTML =
|
||||
'<div class="graph-header">' +
|
||||
'<div class="graph-title">' + signal.name +
|
||||
' <span style="color:#6b7280;font-size:0.85em;">(0x' + signal.messageId.toString(16).toUpperCase() + ')</span>' +
|
||||
(signal.unit ? ' <span style="color:#6b7280;font-size:0.85em;">[' + signal.unit + ']</span>' : '') + '</div>' +
|
||||
'<div class="graph-value" id="value-' + newIdx + '">-</div>' +
|
||||
'</div>';
|
||||
container.appendChild(canvas);
|
||||
graphsDiv.appendChild(container);
|
||||
|
||||
const chart = new SimpleChart(canvas, signal, newIdx);
|
||||
// 기존 데이터 복사
|
||||
if (origIdx !== -1 && oldCharts[origIdx]) {
|
||||
chart.data = [...oldCharts[origIdx].data];
|
||||
chart.times = [...oldCharts[origIdx].times];
|
||||
chart.labels = [...oldCharts[origIdx].labels];
|
||||
chart.rawValues = [...(oldCharts[origIdx].rawValues || [])];
|
||||
chart.currentValue = oldCharts[origIdx].currentValue;
|
||||
chart.currentText = oldCharts[origIdx].currentText;
|
||||
}
|
||||
charts[newIdx] = chart;
|
||||
chart.draw();
|
||||
|
||||
// 현재 값 표시 복원
|
||||
const vEl = document.getElementById('value-' + newIdx);
|
||||
if (vEl && chart.currentValue !== undefined && chart.currentValue !== null) {
|
||||
if (chart.currentText) {
|
||||
vEl.textContent = chart.currentText;
|
||||
} else {
|
||||
vEl.textContent = chart.currentValue.toFixed(2) + (signal.unit ? ' ' + signal.unit : '');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Sort mode changed to:', mode, '(data preserved)');
|
||||
}
|
||||
|
||||
function createGraphs() {
|
||||
@@ -628,10 +750,11 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.id = 'chart-' + index;
|
||||
|
||||
container.innerHTML =
|
||||
container.innerHTML =
|
||||
'<div class="graph-header">' +
|
||||
'<div class="graph-title">' + signal.name + ' (0x' + signal.messageId.toString(16).toUpperCase() + ')' +
|
||||
(signal.unit ? ' [' + signal.unit + ']' : '') + '</div>' +
|
||||
'<div class="graph-title">' + signal.name +
|
||||
' <span style="color:#6b7280;font-size:0.85em;">(0x' + signal.messageId.toString(16).toUpperCase() + ')</span>' +
|
||||
(signal.unit ? ' <span style="color:#6b7280;font-size:0.85em;">[' + signal.unit + ']</span>' : '') + '</div>' +
|
||||
'<div class="graph-value" id="value-' + index + '">-</div>' +
|
||||
'</div>';
|
||||
|
||||
@@ -646,40 +769,44 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
|
||||
|
||||
function startGraphing() {
|
||||
if (!graphing) {
|
||||
graphing = true;
|
||||
startTime = Date.now();
|
||||
graphing = true;
|
||||
startTime = Date.now();
|
||||
lastTimestamps = {};
|
||||
updateStatus('Graphing...', false);
|
||||
console.log('Started graphing at', new Date().toISOString());
|
||||
document.getElementById('btn-start').classList.add('active');
|
||||
document.getElementById('btn-stop').classList.remove('active');
|
||||
updateStatus('Recording', false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function stopGraphing() {
|
||||
graphing = false;
|
||||
updateStatus('Stopped', false);
|
||||
console.log('Stopped graphing');
|
||||
document.getElementById('btn-start').classList.remove('active');
|
||||
document.getElementById('btn-stop').classList.add('active');
|
||||
updateStatus('Paused', false);
|
||||
}
|
||||
|
||||
function setScaleMode(mode) {
|
||||
scaleMode = mode;
|
||||
|
||||
document.getElementById('btn-index-mode').classList.toggle('active', mode === 'index');
|
||||
document.getElementById('btn-time-mode').classList.toggle('active', mode === 'time');
|
||||
|
||||
document.getElementById('btn-time-mode').classList.toggle('active', mode === 'time');
|
||||
Object.values(charts).forEach(chart => chart.draw());
|
||||
|
||||
console.log('Scale mode changed to:', mode);
|
||||
}
|
||||
|
||||
function setRangeMode(mode) {
|
||||
rangeMode = mode;
|
||||
|
||||
document.getElementById('btn-range-10s').classList.toggle('active', mode === '10s');
|
||||
document.getElementById('btn-range-all').classList.toggle('active', mode === 'all');
|
||||
|
||||
['10s','30s','all'].forEach(m => {
|
||||
const el = document.getElementById('btn-range-' + m);
|
||||
if (el) el.classList.toggle('active', m === mode);
|
||||
});
|
||||
Object.values(charts).forEach(chart => chart.draw());
|
||||
}
|
||||
|
||||
// ★ 신규: Plot 모드 전환 (line / scatter)
|
||||
function setPlotMode(mode) {
|
||||
plotMode = mode;
|
||||
document.getElementById('btn-plot-line').classList.toggle('active', mode === 'line');
|
||||
document.getElementById('btn-plot-scatter').classList.toggle('active', mode === 'scatter');
|
||||
Object.values(charts).forEach(chart => chart.draw());
|
||||
|
||||
console.log('Range mode changed to:', mode);
|
||||
}
|
||||
|
||||
// ★★★ 새로운 함수: update 타입 메시지 처리
|
||||
@@ -1010,9 +1137,10 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
|
||||
chart.draw();
|
||||
});
|
||||
|
||||
lastTimestamps = {};
|
||||
lastCanCounts = {}; // ★ count 기록도 초기화
|
||||
startTime = Date.now();
|
||||
lastTimestamps = {};
|
||||
lastCanCounts = {};
|
||||
lastSignalTimes = {}; // ★ 버그수정: 시간 계산 리셋
|
||||
startTime = Date.now();
|
||||
totalMsgReceived = 0;
|
||||
|
||||
updateStatistics();
|
||||
|
||||
Reference in New Issue
Block a user