978 lines
38 KiB
C++
978 lines
38 KiB
C++
#ifndef CANFD_GRAPH_VIEWER_H
|
||
#define CANFD_GRAPH_VIEWER_H
|
||
|
||
const char canfd_graph_viewer_html[] PROGMEM = R"rawliteral(
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>CAN FD Signal Graph Viewer</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: linear-gradient(135deg, #f7931e 0%, #e85d04 100%); padding: 10px;
|
||
color: white;
|
||
overflow-x: hidden;
|
||
}
|
||
.header {
|
||
background: linear-gradient(135deg, #f7931e, #e85d04);
|
||
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;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px 20px;
|
||
text-decoration: none;
|
||
color: #666;
|
||
font-weight: 500;
|
||
font-size: 0.95em;
|
||
border-bottom: 3px solid transparent;
|
||
transition: all 0.3s;
|
||
white-space: nowrap;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.nav a:hover {
|
||
background: #e9ecef;
|
||
color: #f7931e;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.nav a.active {
|
||
color: #e85d04;
|
||
border-bottom-color: #e85d04;
|
||
background: white;
|
||
font-weight: 600;
|
||
}
|
||
.controls {
|
||
background: #2a2a2a;
|
||
padding: 10px 15px;
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||
}
|
||
.control-group {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
.control-label {
|
||
font-size: 0.85em;
|
||
color: #aaa;
|
||
}
|
||
.btn {
|
||
padding: 8px 20px;
|
||
border: none;
|
||
border-radius: 5px;
|
||
font-size: 0.9em;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
.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, #f7931e 0%, #e85d04 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);
|
||
}
|
||
|
||
.graphs {
|
||
padding: 15px;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
|
||
gap: 15px;
|
||
}
|
||
.graph-container {
|
||
background: #2a2a2a;
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
border: 2px solid #3a3a3a;
|
||
}
|
||
.graph-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #f7931e;
|
||
}
|
||
.graph-title {
|
||
font-size: 1em;
|
||
font-weight: 600;
|
||
color: #f7931e;
|
||
}
|
||
.graph-value {
|
||
font-size: 1.2em;
|
||
font-weight: 700;
|
||
color: #38ef7d;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
canvas {
|
||
width: 100%;
|
||
height: 250px;
|
||
border: 1px solid #3a3a3a;
|
||
border-radius: 5px;
|
||
background: linear-gradient(135deg, #f7931e 0%, #e85d04 100%); padding: 10px;
|
||
}
|
||
.status {
|
||
position: fixed;
|
||
top: 10px;
|
||
right: 10px;
|
||
padding: 10px 15px;
|
||
border-radius: 5px;
|
||
background: #2a2a2a;
|
||
border: 2px solid #f7931e;
|
||
font-size: 0.9em;
|
||
z-index: 1000;
|
||
}
|
||
.status.disconnected {
|
||
border-color: #eb3349;
|
||
background: #3a2a2a;
|
||
}
|
||
|
||
|
||
|
||
/* ========== 반응형 디자인 ========== */
|
||
@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;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<h1>🚀 CAN FD Real-time Signal Graphs</h1>
|
||
<p>Viewing <span id="graph-count">0</span> signals (64-byte support)</p>
|
||
</div>
|
||
|
||
<div class="nav">
|
||
<a href="/">📊 Dashboard</a>
|
||
<a href="/settings">⚙️ Settings</a>
|
||
<a href="/graph">📈 Graph</a>
|
||
<a href="/graph-view" class="active">📊 Graph View</a>
|
||
</div>
|
||
|
||
<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>
|
||
</div>
|
||
<div class="control-group">
|
||
<span class="control-label">X-Axis 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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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: #f7931e;">0</strong></span>
|
||
<span>Recording Time: <strong id="recording-time" style="color: #f7931e;">0s</strong></span>
|
||
<span>Messages Received: <strong id="msg-received" style="color: #f7931e;">0</strong></span>
|
||
</div>
|
||
|
||
<div class="graphs" id="graphs"></div>
|
||
|
||
<script>
|
||
let ws;
|
||
let charts = {};
|
||
let graphing = false;
|
||
let startTime = 0;
|
||
let selectedSignals = [];
|
||
let dbcData = {};
|
||
let lastTimestamps = {};
|
||
let sortMode = 'selection';
|
||
const MAX_DATA_POINTS = 60;
|
||
let scaleMode = 'index';
|
||
let rangeMode = '10s';
|
||
let totalMsgReceived = 0;
|
||
let lastCanCounts = {}; // ★ 각 CAN ID별 마지막 count 저장
|
||
|
||
const COLORS = [
|
||
{line: '#FF6384', fill: 'rgba(255, 99, 132, 0.2)'},
|
||
{line: '#36A2EB', fill: 'rgba(54, 162, 235, 0.2)'},
|
||
{line: '#FFCE56', fill: 'rgba(255, 206, 86, 0.2)'},
|
||
{line: '#4BC0C0', fill: 'rgba(75, 192, 192, 0.2)'},
|
||
{line: '#9966FF', fill: 'rgba(153, 102, 255, 0.2)'},
|
||
{line: '#FF9F40', fill: 'rgba(255, 159, 64, 0.2)'},
|
||
{line: '#FF6384', fill: 'rgba(255, 99, 132, 0.2)'},
|
||
{line: '#4BC0C0', fill: 'rgba(75, 192, 192, 0.2)'},
|
||
{line: '#FFCE56', fill: 'rgba(255, 206, 86, 0.2)'},
|
||
{line: '#9966FF', fill: 'rgba(153, 102, 255, 0.2)'},
|
||
{line: '#36A2EB', fill: 'rgba(54, 162, 235, 0.2)'},
|
||
{line: '#FF9F40', fill: 'rgba(255, 159, 64, 0.2)'},
|
||
{line: '#E74C3C', fill: 'rgba(231, 76, 60, 0.2)'},
|
||
{line: '#3498DB', fill: 'rgba(52, 152, 219, 0.2)'},
|
||
{line: '#2ECC71', fill: 'rgba(46, 204, 113, 0.2)'},
|
||
{line: '#F39C12', fill: 'rgba(243, 156, 18, 0.2)'},
|
||
{line: '#9B59B6', fill: 'rgba(155, 89, 182, 0.2)'},
|
||
{line: '#1ABC9C', fill: 'rgba(26, 188, 156, 0.2)'},
|
||
{line: '#E67E22', fill: 'rgba(230, 126, 34, 0.2)'},
|
||
{line: '#95A5A6', fill: 'rgba(149, 165, 166, 0.2)'}
|
||
];
|
||
|
||
class SimpleChart {
|
||
constructor(canvas, signal, colorIndex) {
|
||
this.canvas = canvas;
|
||
this.ctx = canvas.getContext('2d');
|
||
this.signal = signal;
|
||
this.data = [];
|
||
this.times = [];
|
||
this.labels = [];
|
||
this.rawValues = [];
|
||
this.colors = COLORS[colorIndex % COLORS.length];
|
||
this.currentValue = 0;
|
||
this.currentText = '';
|
||
|
||
this.resizeCanvas();
|
||
window.addEventListener('resize', () => this.resizeCanvas());
|
||
}
|
||
|
||
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;
|
||
this.height = rect.height;
|
||
this.draw();
|
||
}
|
||
|
||
addData(value, time) {
|
||
this.data.push(value);
|
||
this.times.push(parseFloat(time));
|
||
this.labels.push(time);
|
||
this.rawValues.push(value);
|
||
this.currentValue = value;
|
||
|
||
if (this.signal.valueTable && this.signal.valueTable[value] !== undefined) {
|
||
this.currentText = this.signal.valueTable[value];
|
||
} else {
|
||
this.currentText = '';
|
||
}
|
||
|
||
if (scaleMode === 'index' && this.data.length > MAX_DATA_POINTS) {
|
||
this.data.shift();
|
||
this.times.shift();
|
||
this.labels.shift();
|
||
this.rawValues.shift();
|
||
}
|
||
|
||
this.draw();
|
||
}
|
||
|
||
getValueText(value) {
|
||
if (this.signal.valueTable && this.signal.valueTable[value] !== undefined) {
|
||
return this.signal.valueTable[value];
|
||
}
|
||
return value.toFixed(2);
|
||
}
|
||
|
||
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.clearRect(0, 0, this.width, this.height);
|
||
|
||
let displayData = [];
|
||
let displayTimes = [];
|
||
let displayLabels = [];
|
||
|
||
if (rangeMode === '10s') {
|
||
const currentTime = this.times[this.times.length - 1];
|
||
for (let i = 0; i < this.times.length; i++) {
|
||
if (currentTime - this.times[i] <= 10) {
|
||
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];
|
||
}
|
||
|
||
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 = displayTimes[0];
|
||
maxTime = displayTimes[displayTimes.length - 1];
|
||
timeRange = maxTime - minTime || 1;
|
||
}
|
||
|
||
ctx.strokeStyle = '#444';
|
||
ctx.lineWidth = 1;
|
||
ctx.beginPath();
|
||
ctx.moveTo(padding, padding);
|
||
ctx.lineTo(padding, this.height - padding);
|
||
ctx.lineTo(this.width - padding, this.height - padding);
|
||
ctx.stroke();
|
||
|
||
ctx.fillStyle = '#aaa';
|
||
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);
|
||
});
|
||
} else {
|
||
ctx.fillText(this.getValueText(maxValue), padding - 5, padding + 5);
|
||
ctx.fillText(this.getValueText(minValue), padding - 5, this.height - padding);
|
||
}
|
||
} else {
|
||
ctx.fillText(maxValue.toFixed(2), padding - 5, padding + 5);
|
||
ctx.fillText(minValue.toFixed(2), padding - 5, this.height - padding);
|
||
}
|
||
|
||
ctx.textAlign = 'center';
|
||
ctx.fillStyle = '#aaa';
|
||
ctx.font = '10px Arial';
|
||
if (displayLabels.length > 0) {
|
||
ctx.fillText(displayLabels[0] + 's', padding, this.height - padding + 15);
|
||
if (displayLabels.length > 1) {
|
||
ctx.fillText(displayLabels[displayLabels.length - 1] + 's', this.width - padding, this.height - padding + 15);
|
||
}
|
||
}
|
||
|
||
ctx.beginPath();
|
||
ctx.strokeStyle = this.colors.line;
|
||
ctx.lineWidth = 2;
|
||
|
||
for (let i = 0; i < displayData.length; i++) {
|
||
let x;
|
||
if (scaleMode === 'time') {
|
||
x = padding + ((displayTimes[i] - minTime) / timeRange) * graphWidth;
|
||
} else {
|
||
x = padding + (i / (displayData.length - 1 || 1)) * graphWidth;
|
||
}
|
||
const y = this.height - padding - ((displayData[i] - minValue) / range) * graphHeight;
|
||
|
||
if (i === 0) ctx.moveTo(x, y);
|
||
else ctx.lineTo(x, y);
|
||
}
|
||
ctx.stroke();
|
||
|
||
ctx.fillStyle = this.colors.line;
|
||
for (let i = 0; i < displayData.length; i++) {
|
||
let x;
|
||
if (scaleMode === 'time') {
|
||
x = padding + ((displayTimes[i] - minTime) / timeRange) * graphWidth;
|
||
} else {
|
||
x = padding + (i / (displayData.length - 1 || 1)) * graphWidth;
|
||
}
|
||
const y = this.height - padding - ((displayData[i] - minValue) / range) * graphHeight;
|
||
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, 4, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
}
|
||
}
|
||
|
||
function loadData() {
|
||
try {
|
||
const signalsJson = localStorage.getItem('selected_signals');
|
||
const dbcContent = localStorage.getItem('dbc_content');
|
||
const savedSortMode = localStorage.getItem('sort_mode');
|
||
|
||
if (!signalsJson || !dbcContent) {
|
||
console.error('No saved signals or DBC found in localStorage');
|
||
document.getElementById('status').textContent = 'No signals selected. Go to Graph page first.';
|
||
document.getElementById('status').classList.add('disconnected');
|
||
return false;
|
||
}
|
||
|
||
if (savedSortMode) {
|
||
sortMode = savedSortMode;
|
||
document.querySelectorAll('.control-group .btn-info').forEach(btn => btn.classList.remove('active'));
|
||
document.getElementById('btn-sort-' + sortMode).classList.add('active');
|
||
}
|
||
|
||
parseDBCContent(dbcContent);
|
||
|
||
const savedSignals = JSON.parse(signalsJson);
|
||
selectedSignals = [];
|
||
|
||
savedSignals.forEach(savedSignal => {
|
||
for (let msgId in dbcData.messages) {
|
||
const msg = dbcData.messages[msgId];
|
||
const signal = msg.signals.find(s =>
|
||
s.messageId === savedSignal.messageId && s.name === savedSignal.name);
|
||
|
||
if (signal) {
|
||
selectedSignals.push(signal);
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
|
||
console.log('Loaded', selectedSignals.length, 'signals from localStorage');
|
||
return selectedSignals.length > 0;
|
||
|
||
} catch(e) {
|
||
console.error('Error loading data:', e);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
function parseDBCContent(content) {
|
||
dbcData = {messages: {}, valueTables: {}};
|
||
const lines = content.split('\n');
|
||
let currentMessage = null;
|
||
|
||
for (let line of lines) {
|
||
line = line.trim();
|
||
|
||
if (line.startsWith('VAL_ ')) {
|
||
const match = line.match(/VAL_\s+(\d+)\s+(\w+)\s+(.+);/);
|
||
if (match) {
|
||
const msgId = parseInt(match[1]);
|
||
const sigName = match[2];
|
||
const valuesStr = match[3];
|
||
|
||
const normalizedMsgId = (msgId & 0x80000000) ? (msgId & 0x1FFFFFFF) : msgId;
|
||
|
||
const key = normalizedMsgId + '_' + sigName;
|
||
dbcData.valueTables[key] = {};
|
||
|
||
const valueMatches = valuesStr.matchAll(/(\d+)\s+"([^"]+)"/g);
|
||
for (let vm of valueMatches) {
|
||
dbcData.valueTables[key][parseInt(vm[1])] = vm[2];
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
for (let line of lines) {
|
||
line = line.trim();
|
||
|
||
if (line.startsWith('BO_ ')) {
|
||
const match = line.match(/BO_\s+(\d+)\s+(\w+)\s*:\s*(\d+)/);
|
||
if (match) {
|
||
let id = parseInt(match[1]);
|
||
const name = match[2];
|
||
const dlc = parseInt(match[3]); // CAN FD: DLC can be up to 64
|
||
|
||
if (id & 0x80000000) {
|
||
id = id & 0x1FFFFFFF;
|
||
}
|
||
|
||
currentMessage = {
|
||
id: id,
|
||
name: name,
|
||
dlc: dlc,
|
||
signals: []
|
||
};
|
||
dbcData.messages[id] = currentMessage;
|
||
}
|
||
}
|
||
else if (line.startsWith('SG_ ') && currentMessage) {
|
||
const match = line.match(/SG_\s+(\w+)\s*:\s*(\d+)\|(\d+)@([01])([+-])\s*\(([^,]+),([^)]+)\)\s*\[([^\]]+)\]\s*"([^"]*)"/);
|
||
if (match) {
|
||
const signalName = match[1];
|
||
const signal = {
|
||
name: signalName,
|
||
startBit: parseInt(match[2]), // CAN FD: can be 0-511
|
||
bitLength: parseInt(match[3]),
|
||
byteOrder: match[4] === '0' ? 'motorola' : 'intel',
|
||
signed: match[5] === '-',
|
||
factor: parseFloat(match[6]),
|
||
offset: parseFloat(match[7]),
|
||
minMax: match[8],
|
||
unit: match[9],
|
||
messageId: currentMessage.id,
|
||
messageName: currentMessage.name,
|
||
messageDlc: currentMessage.dlc
|
||
};
|
||
|
||
const vtKey = currentMessage.id + '_' + signalName;
|
||
if (dbcData.valueTables[vtKey]) {
|
||
signal.valueTable = dbcData.valueTables[vtKey];
|
||
}
|
||
|
||
currentMessage.signals.push(signal);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function sortSignalsForDisplay() {
|
||
let sorted = [...selectedSignals];
|
||
|
||
if (sortMode === 'name-asc') {
|
||
sorted.sort((a, b) => a.name.localeCompare(b.name));
|
||
} else if (sortMode === 'name-desc') {
|
||
sorted.sort((a, b) => b.name.localeCompare(a.name));
|
||
}
|
||
|
||
return sorted;
|
||
}
|
||
|
||
function createGraphs() {
|
||
const container = document.getElementById('graphs');
|
||
container.innerHTML = '';
|
||
charts = {};
|
||
|
||
const sortedSignals = sortSignalsForDisplay();
|
||
|
||
sortedSignals.forEach((signal, index) => {
|
||
const div = document.createElement('div');
|
||
div.className = 'graph-container';
|
||
|
||
const canIdHex = '0x' + signal.messageId.toString(16).toUpperCase().padStart(3, '0');
|
||
const fdBadge = signal.messageDlc > 8 ? ' <span style="background:#f7931e;color:white;padding:1px 4px;border-radius:3px;font-size:0.7em;">FD</span>' : '';
|
||
|
||
div.innerHTML = `
|
||
<div class="graph-header">
|
||
<span class="graph-title">${signal.name}${fdBadge} (${canIdHex})</span>
|
||
<span class="graph-value" id="value-${index}">--</span>
|
||
</div>
|
||
<canvas id="chart-${index}"></canvas>
|
||
`;
|
||
|
||
container.appendChild(div);
|
||
|
||
const canvas = document.getElementById('chart-' + index);
|
||
charts[index] = new SimpleChart(canvas, signal, index);
|
||
});
|
||
|
||
document.getElementById('graph-count').textContent = selectedSignals.length;
|
||
}
|
||
|
||
function initWebSocket() {
|
||
ws = new WebSocket('ws://' + window.location.hostname + ':81');
|
||
|
||
ws.onopen = function() {
|
||
console.log('WebSocket connected');
|
||
document.getElementById('status').textContent = 'Connected';
|
||
document.getElementById('status').classList.remove('disconnected');
|
||
};
|
||
|
||
ws.onclose = function() {
|
||
console.log('WebSocket disconnected');
|
||
document.getElementById('status').textContent = 'Disconnected';
|
||
document.getElementById('status').classList.add('disconnected');
|
||
setTimeout(initWebSocket, 3000);
|
||
};
|
||
|
||
ws.onmessage = function(event) {
|
||
if (!graphing) return;
|
||
|
||
try {
|
||
const data = JSON.parse(event.data);
|
||
|
||
if (data.messages && Array.isArray(data.messages)) {
|
||
processMessages(data.messages);
|
||
}
|
||
} catch(e) {
|
||
console.error('Error parsing WebSocket message:', e);
|
||
}
|
||
};
|
||
}
|
||
|
||
function startGraphing() {
|
||
graphing = true;
|
||
startTime = Date.now();
|
||
console.log('Started graphing at', new Date(startTime).toISOString());
|
||
}
|
||
|
||
function stopGraphing() {
|
||
graphing = false;
|
||
console.log('Stopped graphing');
|
||
}
|
||
|
||
function setScaleMode(mode) {
|
||
scaleMode = mode;
|
||
|
||
document.getElementById('btn-index-mode').classList.remove('active');
|
||
document.getElementById('btn-time-mode').classList.remove('active');
|
||
document.getElementById('btn-' + mode + '-mode').classList.add('active');
|
||
|
||
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.remove('active');
|
||
document.getElementById('btn-range-all').classList.remove('active');
|
||
document.getElementById('btn-range-' + mode).classList.add('active');
|
||
|
||
Object.values(charts).forEach(chart => chart.draw());
|
||
console.log('Range mode changed to:', mode);
|
||
}
|
||
|
||
function setSortMode(mode) {
|
||
sortMode = mode;
|
||
|
||
document.getElementById('btn-sort-selection').classList.remove('active');
|
||
document.getElementById('btn-sort-name-asc').classList.remove('active');
|
||
document.getElementById('btn-sort-name-desc').classList.remove('active');
|
||
document.getElementById('btn-sort-' + mode).classList.add('active');
|
||
|
||
const oldCharts = { ...charts };
|
||
createGraphs();
|
||
|
||
console.log('Sort mode changed to:', mode);
|
||
}
|
||
|
||
function processMessages(messages) {
|
||
const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(2);
|
||
|
||
const sortedSignals = sortSignalsForDisplay();
|
||
|
||
console.log('Processing', messages.length, 'messages at time', elapsedTime + 's');
|
||
|
||
let processedCount = 0;
|
||
totalMsgReceived += messages.length;
|
||
|
||
messages.forEach(canMsg => {
|
||
const idStr = (canMsg.id || '').toString().replace(/\s/g, '').toUpperCase();
|
||
let msgId = parseInt(idStr.replace('0X', ''), 16);
|
||
|
||
if (msgId & 0x80000000) {
|
||
msgId = msgId & 0x1FFFFFFF;
|
||
}
|
||
|
||
const timestamp = canMsg.timestamp;
|
||
|
||
sortedSignals.forEach((signal, index) => {
|
||
if (signal.messageId === msgId && charts[index]) {
|
||
try {
|
||
const value = decodeSignal(signal, canMsg.data);
|
||
|
||
charts[index].addData(value, elapsedTime);
|
||
|
||
const valueDiv = document.getElementById('value-' + index);
|
||
if (valueDiv) {
|
||
if (signal.valueTable && signal.valueTable[value] !== undefined) {
|
||
valueDiv.textContent = signal.valueTable[value];
|
||
} else {
|
||
valueDiv.textContent = value.toFixed(2) + (signal.unit ? ' ' + signal.unit : '');
|
||
}
|
||
}
|
||
|
||
processedCount++;
|
||
} catch(e) {
|
||
console.error('Error decoding signal ' + signal.name + ':', e);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
if (processedCount > 0) {
|
||
console.log('Added', processedCount, 'new data points');
|
||
}
|
||
|
||
updateStatistics();
|
||
}
|
||
|
||
function updateStatistics() {
|
||
let totalDataPoints = 0;
|
||
Object.values(charts).forEach(chart => {
|
||
totalDataPoints += chart.data.length;
|
||
});
|
||
|
||
document.getElementById('data-point-count').textContent = totalDataPoints;
|
||
document.getElementById('msg-received').textContent = totalMsgReceived;
|
||
|
||
const recordingTime = ((Date.now() - startTime) / 1000).toFixed(1);
|
||
document.getElementById('recording-time').textContent = recordingTime + 's';
|
||
}
|
||
|
||
// ★ HEX 문자열에서 바이트 배열로 변환 후 디코딩 (CAN FD 64바이트 지원)
|
||
function decodeSignalFromHex(signal, hexData) {
|
||
const bytes = [];
|
||
const cleanHex = hexData.toUpperCase();
|
||
// CAN FD: 64 bytes = 128 hex characters
|
||
for (let i = 0; i < cleanHex.length && i < 128; i += 2) {
|
||
bytes.push(parseInt(cleanHex.substring(i, i + 2), 16));
|
||
}
|
||
// CAN FD: pad to 64 bytes
|
||
while (bytes.length < 64) bytes.push(0);
|
||
|
||
return decodeSignalFromBytes(signal, bytes);
|
||
}
|
||
|
||
// ★ CAN FD 64바이트 지원 디코딩 함수
|
||
function decodeSignal(signal, hexData) {
|
||
const bytes = [];
|
||
|
||
if (typeof hexData === 'string') {
|
||
const cleanHex = hexData.replace(/\s/g, '').toUpperCase();
|
||
// CAN FD: 64 bytes = 128 hex characters
|
||
for (let i = 0; i < cleanHex.length && i < 128; i += 2) {
|
||
bytes.push(parseInt(cleanHex.substring(i, i + 2), 16));
|
||
}
|
||
} else if (Array.isArray(hexData)) {
|
||
bytes.push(...hexData);
|
||
}
|
||
|
||
// CAN FD: pad to 64 bytes
|
||
while (bytes.length < 64) bytes.push(0);
|
||
|
||
return decodeSignalFromBytes(signal, bytes);
|
||
}
|
||
|
||
function decodeSignalFromBytes(signal, bytes) {
|
||
let rawValue = 0;
|
||
|
||
if (signal.byteOrder === 'intel') {
|
||
// Intel (Little Endian) byte order
|
||
for (let i = 0; i < signal.bitLength; i++) {
|
||
const bitPos = signal.startBit + i;
|
||
const byteIdx = Math.floor(bitPos / 8);
|
||
const bitIdx = bitPos % 8;
|
||
|
||
if (byteIdx < bytes.length) {
|
||
const bit = (bytes[byteIdx] >> bitIdx) & 1;
|
||
rawValue |= (bit << i);
|
||
}
|
||
}
|
||
} else {
|
||
// Motorola (Big Endian) byte order
|
||
for (let i = 0; i < signal.bitLength; i++) {
|
||
const bitPos = signal.startBit - i;
|
||
const byteIdx = Math.floor(bitPos / 8);
|
||
const bitIdx = 7 - (bitPos % 8);
|
||
|
||
if (byteIdx < bytes.length && byteIdx >= 0) {
|
||
const bit = (bytes[byteIdx] >> bitIdx) & 1;
|
||
rawValue |= (bit << (signal.bitLength - 1 - i));
|
||
}
|
||
}
|
||
}
|
||
|
||
// Handle signed values
|
||
if (signal.signed && (rawValue & (1 << (signal.bitLength - 1)))) {
|
||
rawValue -= (1 << signal.bitLength);
|
||
}
|
||
|
||
return rawValue * signal.factor + signal.offset;
|
||
}
|
||
|
||
function downloadCSV() {
|
||
if (Object.keys(charts).length === 0) {
|
||
alert('No data to download!');
|
||
return;
|
||
}
|
||
|
||
let csvContent = 'Time(s)';
|
||
const sortedSignals = sortSignalsForDisplay();
|
||
|
||
sortedSignals.forEach(signal => {
|
||
const unit = signal.unit ? ' [' + signal.unit + ']' : '';
|
||
csvContent += ',' + signal.name + unit;
|
||
|
||
if (signal.valueTable) {
|
||
csvContent += ',' + signal.name + '_Text';
|
||
}
|
||
});
|
||
csvContent += '\n';
|
||
|
||
let maxLength = 0;
|
||
Object.values(charts).forEach(chart => {
|
||
if (chart.labels.length > maxLength) {
|
||
maxLength = chart.labels.length;
|
||
}
|
||
});
|
||
|
||
for (let i = 0; i < maxLength; i++) {
|
||
let row = '';
|
||
let timeValue = '';
|
||
|
||
sortedSignals.forEach((signal, index) => {
|
||
const chart = charts[index];
|
||
if (chart && chart.labels[i] !== undefined) {
|
||
if (timeValue === '') {
|
||
timeValue = chart.labels[i];
|
||
}
|
||
const value = chart.data[i];
|
||
row += ',' + value.toFixed(6);
|
||
|
||
if (signal.valueTable) {
|
||
const text = signal.valueTable[value] !== undefined ?
|
||
signal.valueTable[value] : '';
|
||
row += ',"' + text + '"';
|
||
}
|
||
} else {
|
||
row += ',';
|
||
if (signal.valueTable) {
|
||
row += ',';
|
||
}
|
||
}
|
||
});
|
||
|
||
if (timeValue !== '') {
|
||
csvContent += timeValue + row + '\n';
|
||
}
|
||
}
|
||
|
||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||
const link = document.createElement('a');
|
||
const url = URL.createObjectURL(blob);
|
||
|
||
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
|
||
link.setAttribute('href', url);
|
||
link.setAttribute('download', 'canfd_signals_' + timestamp + '.csv');
|
||
link.style.visibility = 'hidden';
|
||
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
|
||
console.log('CSV downloaded with ' + maxLength + ' data points');
|
||
}
|
||
|
||
function clearData() {
|
||
if (!confirm('Clear all recorded data? This cannot be undone.')) {
|
||
return;
|
||
}
|
||
|
||
Object.values(charts).forEach(chart => {
|
||
chart.data = [];
|
||
chart.times = [];
|
||
chart.labels = [];
|
||
chart.rawValues = [];
|
||
chart.currentValue = 0;
|
||
chart.currentText = '';
|
||
chart.draw();
|
||
});
|
||
|
||
lastTimestamps = {};
|
||
lastCanCounts = {}; // ★ count 기록도 초기화
|
||
startTime = Date.now();
|
||
totalMsgReceived = 0;
|
||
|
||
updateStatistics();
|
||
|
||
console.log('All data cleared');
|
||
}
|
||
|
||
if (loadData()) {
|
||
createGraphs();
|
||
initWebSocket();
|
||
startGraphing();
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
)rawliteral";
|
||
|
||
#endif |