byun
7c413d12ed
can graph창도 핸드폰 감응형으로 바꾸어 주고 db파일 등록 후 다른 창 접속 한다음 graph 창 복귀시 db파일이 사라져 다시 등록하지 않게 (등록한 dbc파일 지속) 그리고 dbc파일의 id 값을 잘못 읽어 오는 것 같은게 예를들어 0x90060002로 읽혀지는 ID 를 dbc파일로 읽어보니 0x10060002였어
546 lines
21 KiB
C++
546 lines
21 KiB
C++
#ifndef GRAPH_H
|
|
#define GRAPH_H
|
|
|
|
const char graph_html[] PROGMEM = R"rawliteral(
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>CAN Signal Graph</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
|
|
min-height: 100vh;
|
|
padding: 10px;
|
|
}
|
|
.container {
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
overflow: hidden;
|
|
}
|
|
.header {
|
|
background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
|
|
color: white;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
.header h1 { font-size: 1.8em; margin-bottom: 5px; }
|
|
.nav {
|
|
background: #2c3e50;
|
|
padding: 10px;
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.nav a {
|
|
color: white;
|
|
text-decoration: none;
|
|
padding: 10px 15px;
|
|
border-radius: 5px;
|
|
transition: all 0.3s;
|
|
font-size: 0.9em;
|
|
}
|
|
.nav a:hover { background: #34495e; }
|
|
.nav a.active { background: #3498db; }
|
|
.content { padding: 15px; }
|
|
|
|
.dbc-upload {
|
|
background: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.upload-area {
|
|
border: 3px dashed #43cea2;
|
|
border-radius: 10px;
|
|
padding: 30px 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
.upload-area:hover { background: #f0f9ff; border-color: #185a9d; }
|
|
.upload-area input { display: none; }
|
|
|
|
.signal-selector {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.signal-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
}
|
|
.signal-item {
|
|
background: white;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
border: 2px solid #ddd;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
.signal-item:hover { border-color: #43cea2; transform: translateY(-2px); }
|
|
.signal-item.selected { border-color: #185a9d; background: #e3f2fd; }
|
|
.signal-name { font-weight: 600; color: #333; margin-bottom: 5px; font-size: 0.9em; }
|
|
.signal-info { font-size: 0.8em; color: #666; }
|
|
|
|
.graph-container {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.graph-canvas {
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 15px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.btn {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
font-size: 0.9em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
.btn-primary { background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%); color: white; }
|
|
.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:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
|
|
|
|
h2 {
|
|
color: #333;
|
|
margin: 20px 0 15px 0;
|
|
padding-bottom: 8px;
|
|
border-bottom: 3px solid #43cea2;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.status { padding: 12px; background: #fff3cd; border-radius: 5px; margin-bottom: 15px; font-size: 0.9em; }
|
|
.status.success { background: #d4edda; color: #155724; }
|
|
.status.error { background: #f8d7da; color: #721c24; }
|
|
|
|
@media (max-width: 768px) {
|
|
body { padding: 5px; }
|
|
.header h1 { font-size: 1.5em; }
|
|
.content { padding: 10px; }
|
|
.signal-grid { grid-template-columns: 1fr; gap: 8px; }
|
|
.signal-item { padding: 10px; }
|
|
.graph-canvas { height: 250px; }
|
|
h2 { font-size: 1.1em; }
|
|
.controls { gap: 5px; }
|
|
.btn { padding: 8px 15px; font-size: 0.85em; }
|
|
.nav a { padding: 8px 10px; font-size: 0.85em; }
|
|
.upload-area { padding: 20px 15px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>CAN Signal Graph</h1>
|
|
<p>Real-time Signal Visualization</p>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<a href="/">Monitor</a>
|
|
<a href="/transmit">Transmit</a>
|
|
<a href="/graph" class="active">Graph</a>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div id="status" class="status" style="display:none;"></div>
|
|
|
|
<h2>Upload DBC File</h2>
|
|
<div class="dbc-upload">
|
|
<div class="upload-area" onclick="document.getElementById('dbc-file').click()">
|
|
<input type="file" id="dbc-file" accept=".dbc" onchange="loadDBCFile(event)">
|
|
<p style="font-size: 1.1em; margin-bottom: 8px;">Click to upload DBC</p>
|
|
<p style="color: #666; font-size: 0.85em;" id="dbc-status">No file loaded</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="signal-section" style="display:none;">
|
|
<h2>Select Signals (Max 6)</h2>
|
|
<div class="controls">
|
|
<button class="btn btn-success" onclick="startGraphing()">Start</button>
|
|
<button class="btn btn-danger" onclick="stopGraphing()">Stop</button>
|
|
<button class="btn btn-primary" onclick="clearSelection()">Clear</button>
|
|
</div>
|
|
|
|
<div class="signal-selector">
|
|
<div id="signal-list" class="signal-grid"></div>
|
|
</div>
|
|
|
|
<h2>Real-time Graphs</h2>
|
|
<div id="graphs"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let ws;
|
|
let dbcData = {};
|
|
let selectedSignals = [];
|
|
let charts = {};
|
|
let graphing = false;
|
|
const MAX_SIGNALS = 6;
|
|
const MAX_DATA_POINTS = 60;
|
|
const COLORS = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'];
|
|
|
|
// DBC 데이터를 localStorage에 저장
|
|
function saveDBCToStorage() {
|
|
try {
|
|
localStorage.setItem('dbcData', JSON.stringify(dbcData));
|
|
localStorage.setItem('dbcFileName', document.getElementById('dbc-status').textContent);
|
|
} catch(e) {
|
|
console.log('Storage not available');
|
|
}
|
|
}
|
|
|
|
// 저장된 DBC 데이터 불러오기
|
|
function loadDBCFromStorage() {
|
|
try {
|
|
const savedDBC = localStorage.getItem('dbcData');
|
|
const savedFileName = localStorage.getItem('dbcFileName');
|
|
if (savedDBC && savedFileName && savedFileName !== 'No file loaded') {
|
|
dbcData = JSON.parse(savedDBC);
|
|
document.getElementById('dbc-status').textContent = savedFileName;
|
|
displaySignals();
|
|
showStatus('DBC file restored: ' + savedFileName, 'success');
|
|
}
|
|
} catch(e) {
|
|
console.log('Could not restore DBC');
|
|
}
|
|
}
|
|
|
|
function initWebSocket() {
|
|
ws = new WebSocket('ws://' + window.location.hostname + ':81');
|
|
|
|
ws.onopen = function() {
|
|
console.log('WebSocket connected');
|
|
};
|
|
|
|
ws.onclose = function() {
|
|
console.log('WebSocket disconnected');
|
|
setTimeout(initWebSocket, 3000);
|
|
};
|
|
|
|
ws.onmessage = function(event) {
|
|
const data = JSON.parse(event.data);
|
|
|
|
if (data.type === 'canBatch' && graphing) {
|
|
processCANData(data.messages);
|
|
}
|
|
};
|
|
}
|
|
|
|
function loadDBCFile(event) {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const content = e.target.result;
|
|
parseDBCContent(content);
|
|
document.getElementById('dbc-status').textContent = file.name;
|
|
saveDBCToStorage();
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
function parseDBCContent(content) {
|
|
dbcData = {messages: {}};
|
|
const lines = content.split('\n');
|
|
let currentMessage = null;
|
|
|
|
for (let line of lines) {
|
|
line = line.trim();
|
|
|
|
// BO_ 123 MessageName: 8 Vector__XXX 형식
|
|
if (line.startsWith('BO_ ')) {
|
|
const match = line.match(/BO_\s+(\d+)\s+(\w+)\s*:/);
|
|
if (match) {
|
|
const id = parseInt(match[1]);
|
|
const name = match[2];
|
|
currentMessage = {id: id, name: name, signals: []};
|
|
dbcData.messages[id] = currentMessage;
|
|
}
|
|
}
|
|
// SG_ SignalName : 0|16@1+ (1,0) [0|100] "unit" 형식
|
|
else if (line.startsWith('SG_ ') && currentMessage) {
|
|
const match = line.match(/SG_\s+(\w+)\s*:\s*(\d+)\|(\d+)@([01])([+-])\s*\(([^,]+),([^)]+)\)\s*\[([^\]]+)\]\s*"([^"]*)"/);
|
|
if (match) {
|
|
const signal = {
|
|
name: match[1],
|
|
startBit: parseInt(match[2]),
|
|
bitLength: parseInt(match[3]),
|
|
byteOrder: match[4] === '0' ? 'motorola' : 'intel',
|
|
signed: match[5] === '-',
|
|
factor: parseFloat(match[6]),
|
|
offset: parseFloat(match[7]),
|
|
unit: match[9],
|
|
messageId: currentMessage.id,
|
|
messageName: currentMessage.name
|
|
};
|
|
currentMessage.signals.push(signal);
|
|
}
|
|
}
|
|
}
|
|
|
|
displaySignals();
|
|
showStatus('DBC loaded: ' + Object.keys(dbcData.messages).length + ' messages', 'success');
|
|
}
|
|
|
|
function displaySignals() {
|
|
const signalList = document.getElementById('signal-list');
|
|
signalList.innerHTML = '';
|
|
|
|
for (let msgId in dbcData.messages) {
|
|
const msg = dbcData.messages[msgId];
|
|
msg.signals.forEach(signal => {
|
|
const item = document.createElement('div');
|
|
item.className = 'signal-item';
|
|
item.onclick = () => toggleSignal(signal, item);
|
|
item.innerHTML =
|
|
'<div class="signal-name">' + signal.name + '</div>' +
|
|
'<div class="signal-info">' +
|
|
'ID: 0x' + signal.messageId.toString(16).toUpperCase() + ' | ' +
|
|
signal.bitLength + 'bit' +
|
|
(signal.unit ? ' | ' + signal.unit : '') +
|
|
'</div>';
|
|
signalList.appendChild(item);
|
|
});
|
|
}
|
|
|
|
document.getElementById('signal-section').style.display = 'block';
|
|
}
|
|
|
|
function toggleSignal(signal, element) {
|
|
const index = selectedSignals.findIndex(s =>
|
|
s.messageId === signal.messageId && s.name === signal.name);
|
|
|
|
if (index >= 0) {
|
|
selectedSignals.splice(index, 1);
|
|
element.classList.remove('selected');
|
|
} else {
|
|
if (selectedSignals.length >= MAX_SIGNALS) {
|
|
showStatus('Max ' + MAX_SIGNALS + ' signals!', 'error');
|
|
return;
|
|
}
|
|
selectedSignals.push(signal);
|
|
element.classList.add('selected');
|
|
}
|
|
}
|
|
|
|
function clearSelection() {
|
|
selectedSignals = [];
|
|
document.querySelectorAll('.signal-item').forEach(item => {
|
|
item.classList.remove('selected');
|
|
});
|
|
}
|
|
|
|
function startGraphing() {
|
|
if (selectedSignals.length === 0) {
|
|
showStatus('Select at least one signal!', 'error');
|
|
return;
|
|
}
|
|
|
|
graphing = true;
|
|
createGraphs();
|
|
showStatus('Graphing ' + selectedSignals.length + ' signals', 'success');
|
|
}
|
|
|
|
function stopGraphing() {
|
|
graphing = false;
|
|
showStatus('Stopped', 'success');
|
|
}
|
|
|
|
function createGraphs() {
|
|
const graphsDiv = document.getElementById('graphs');
|
|
graphsDiv.innerHTML = '';
|
|
charts = {};
|
|
|
|
selectedSignals.forEach((signal, index) => {
|
|
const container = document.createElement('div');
|
|
container.className = 'graph-container';
|
|
|
|
const canvas = document.createElement('canvas');
|
|
canvas.id = 'chart-' + index;
|
|
|
|
container.innerHTML = '<h3 style="font-size:1em;margin-bottom:10px;">' + signal.name +
|
|
' (0x' + signal.messageId.toString(16).toUpperCase() + ')' +
|
|
(signal.unit ? ' [' + signal.unit + ']' : '') + '</h3>' +
|
|
'<div class="graph-canvas"></div>';
|
|
container.querySelector('.graph-canvas').appendChild(canvas);
|
|
graphsDiv.appendChild(container);
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
charts[index] = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [],
|
|
datasets: [{
|
|
label: signal.name,
|
|
data: [],
|
|
borderColor: COLORS[index % COLORS.length],
|
|
backgroundColor: COLORS[index % COLORS.length] + '33',
|
|
tension: 0.4,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: { display: true, title: { display: true, text: 'Time' }},
|
|
y: { display: true, title: { display: true, text: signal.unit || 'Value' }}
|
|
},
|
|
animation: false
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function processCANData(messages) {
|
|
const now = new Date().toLocaleTimeString();
|
|
|
|
messages.forEach(canMsg => {
|
|
const msgId = parseInt(canMsg.id, 16);
|
|
|
|
selectedSignals.forEach((signal, index) => {
|
|
if (signal.messageId === msgId && charts[index]) {
|
|
const value = decodeSignal(signal, canMsg.data);
|
|
|
|
const chart = charts[index];
|
|
chart.data.labels.push(now);
|
|
chart.data.datasets[0].data.push(value);
|
|
|
|
if (chart.data.labels.length > MAX_DATA_POINTS) {
|
|
chart.data.labels.shift();
|
|
chart.data.datasets[0].data.shift();
|
|
}
|
|
|
|
chart.update('none');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function decodeSignal(signal, hexData) {
|
|
const bytes = [];
|
|
const parts = hexData.split(' ');
|
|
for (let part of parts) {
|
|
if (part.length === 2) {
|
|
bytes.push(parseInt(part, 16));
|
|
}
|
|
}
|
|
|
|
let rawValue = 0;
|
|
|
|
if (signal.byteOrder === 'intel') {
|
|
// Little Endian (Intel)
|
|
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 {
|
|
// Big Endian (Motorola)
|
|
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));
|
|
}
|
|
}
|
|
}
|
|
|
|
// Signed 처리
|
|
if (signal.signed && (rawValue & (1 << (signal.bitLength - 1)))) {
|
|
rawValue -= (1 << signal.bitLength);
|
|
}
|
|
|
|
return rawValue * signal.factor + signal.offset;
|
|
}
|
|
|
|
function showStatus(message, type) {
|
|
const status = document.getElementById('status');
|
|
status.textContent = message;
|
|
status.className = 'status ' + type;
|
|
status.style.display = 'block';
|
|
setTimeout(() => { status.style.display = 'none'; }, 5000);
|
|
}
|
|
|
|
const uploadArea = document.querySelector('.upload-area');
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
|
uploadArea.addEventListener(eventName, e => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
});
|
|
});
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => {
|
|
uploadArea.addEventListener(eventName, () => {
|
|
uploadArea.style.borderColor = '#185a9d';
|
|
uploadArea.style.background = '#f0f9ff';
|
|
});
|
|
});
|
|
|
|
['dragleave', 'drop'].forEach(eventName => {
|
|
uploadArea.addEventListener(eventName, () => {
|
|
uploadArea.style.borderColor = '#43cea2';
|
|
uploadArea.style.background = '';
|
|
});
|
|
});
|
|
|
|
uploadArea.addEventListener('drop', function(e) {
|
|
const file = e.dataTransfer.files[0];
|
|
if (file && file.name.endsWith('.dbc')) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(ev) {
|
|
parseDBCContent(ev.target.result);
|
|
document.getElementById('dbc-status').textContent = file.name;
|
|
saveDBCToStorage();
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
});
|
|
|
|
// 페이지 로드 시 저장된 DBC 복원
|
|
window.addEventListener('load', function() {
|
|
loadDBCFromStorage();
|
|
});
|
|
|
|
initWebSocket();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
)rawliteral";
|
|
|
|
#endif |