00005 graph 창 핸드폰 감응형 변경 db ID 읽기 수정
can graph창도 핸드폰 감응형으로 바꾸어 주고 db파일 등록 후 다른 창 접속 한다음 graph 창 복귀시 db파일이 사라져 다시 등록하지 않게 (등록한 dbc파일 지속) 그리고 dbc파일의 id 값을 잘못 읽어 오는 것 같은게 예를들어 0x90060002로 읽혀지는 ID 를 dbc파일로 읽어보니 0x10060002였어
This commit is contained in:
197
graph.h
197
graph.h
@@ -6,7 +6,7 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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>
|
||||
@@ -15,7 +15,7 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
.container {
|
||||
max-width: 1600px;
|
||||
@@ -28,37 +28,40 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
.header {
|
||||
background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.header h1 { font-size: 2.5em; margin-bottom: 10px; }
|
||||
.header h1 { font-size: 1.8em; margin-bottom: 5px; }
|
||||
.nav {
|
||||
background: #2c3e50;
|
||||
padding: 15px 30px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
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: 30px; }
|
||||
.content { padding: 15px; }
|
||||
|
||||
.dbc-upload {
|
||||
background: #f8f9fa;
|
||||
padding: 25px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.upload-area {
|
||||
border: 3px dashed #43cea2;
|
||||
border-radius: 10px;
|
||||
padding: 40px;
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
@@ -68,19 +71,19 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
|
||||
.signal-selector {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.signal-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.signal-item {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #ddd;
|
||||
cursor: pointer;
|
||||
@@ -88,31 +91,31 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
}
|
||||
.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; }
|
||||
.signal-info { font-size: 0.85em; color: #666; }
|
||||
.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: 20px;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.graph-canvas {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
gap: 8px;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn {
|
||||
padding: 12px 25px;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 1em;
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
@@ -124,54 +127,69 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
|
||||
h2 {
|
||||
color: #333;
|
||||
margin: 30px 0 20px 0;
|
||||
padding-bottom: 10px;
|
||||
margin: 20px 0 15px 0;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 3px solid #43cea2;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.status { padding: 15px; background: #fff3cd; border-radius: 5px; margin-bottom: 20px; }
|
||||
.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>
|
||||
<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>
|
||||
<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>
|
||||
<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.2em; margin-bottom: 10px;">🗂️ Click to upload DBC file</p>
|
||||
<p style="color: #666;">or drag and drop here</p>
|
||||
<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>
|
||||
<h2>Select Signals (Max 6)</h2>
|
||||
<div class="controls">
|
||||
<button class="btn btn-success" onclick="startGraphing()">▶️ Start Graphing</button>
|
||||
<button class="btn btn-danger" onclick="stopGraphing()">⏹️ Stop</button>
|
||||
<button class="btn btn-primary" onclick="clearSelection()">🗑️ Clear Selection</button>
|
||||
<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>
|
||||
<h2>Real-time Graphs</h2>
|
||||
<div id="graphs"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -187,6 +205,32 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
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');
|
||||
|
||||
@@ -216,6 +260,8 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
reader.onload = function(e) {
|
||||
const content = e.target.result;
|
||||
parseDBCContent(content);
|
||||
document.getElementById('dbc-status').textContent = file.name;
|
||||
saveDBCToStorage();
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
@@ -228,8 +274,9 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
for (let line of lines) {
|
||||
line = line.trim();
|
||||
|
||||
// BO_ 123 MessageName: 8 Vector__XXX 형식
|
||||
if (line.startsWith('BO_ ')) {
|
||||
const match = line.match(/BO_ (\d+) (\w+):/);
|
||||
const match = line.match(/BO_\s+(\d+)\s+(\w+)\s*:/);
|
||||
if (match) {
|
||||
const id = parseInt(match[1]);
|
||||
const name = match[2];
|
||||
@@ -237,8 +284,9 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
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_ (\w+) : (\d+)\|(\d+)@([01])([+-]) \(([^,]+),([^)]+)\) \[([^\]]+)\] "([^"]*)"/);
|
||||
const match = line.match(/SG_\s+(\w+)\s*:\s*(\d+)\|(\d+)@([01])([+-])\s*\(([^,]+),([^)]+)\)\s*\[([^\]]+)\]\s*"([^"]*)"/);
|
||||
if (match) {
|
||||
const signal = {
|
||||
name: match[1],
|
||||
@@ -258,8 +306,7 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
}
|
||||
|
||||
displaySignals();
|
||||
showStatus('DBC file loaded successfully! Found ' +
|
||||
Object.keys(dbcData.messages).length + ' messages.', 'success');
|
||||
showStatus('DBC loaded: ' + Object.keys(dbcData.messages).length + ' messages', 'success');
|
||||
}
|
||||
|
||||
function displaySignals() {
|
||||
@@ -276,8 +323,8 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
'<div class="signal-name">' + signal.name + '</div>' +
|
||||
'<div class="signal-info">' +
|
||||
'ID: 0x' + signal.messageId.toString(16).toUpperCase() + ' | ' +
|
||||
signal.bitLength + ' bits | ' +
|
||||
(signal.unit || 'no unit') +
|
||||
signal.bitLength + 'bit' +
|
||||
(signal.unit ? ' | ' + signal.unit : '') +
|
||||
'</div>';
|
||||
signalList.appendChild(item);
|
||||
});
|
||||
@@ -295,7 +342,7 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
element.classList.remove('selected');
|
||||
} else {
|
||||
if (selectedSignals.length >= MAX_SIGNALS) {
|
||||
showStatus('Maximum ' + MAX_SIGNALS + ' signals allowed!', 'error');
|
||||
showStatus('Max ' + MAX_SIGNALS + ' signals!', 'error');
|
||||
return;
|
||||
}
|
||||
selectedSignals.push(signal);
|
||||
@@ -312,18 +359,18 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
|
||||
function startGraphing() {
|
||||
if (selectedSignals.length === 0) {
|
||||
showStatus('Please select at least one signal!', 'error');
|
||||
showStatus('Select at least one signal!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
graphing = true;
|
||||
createGraphs();
|
||||
showStatus('Graphing started for ' + selectedSignals.length + ' signals', 'success');
|
||||
showStatus('Graphing ' + selectedSignals.length + ' signals', 'success');
|
||||
}
|
||||
|
||||
function stopGraphing() {
|
||||
graphing = false;
|
||||
showStatus('Graphing stopped', 'success');
|
||||
showStatus('Stopped', 'success');
|
||||
}
|
||||
|
||||
function createGraphs() {
|
||||
@@ -338,10 +385,11 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.id = 'chart-' + index;
|
||||
|
||||
container.innerHTML = '<h3>' + signal.name +
|
||||
container.innerHTML = '<h3 style="font-size:1em;margin-bottom:10px;">' + signal.name +
|
||||
' (0x' + signal.messageId.toString(16).toUpperCase() + ')' +
|
||||
(signal.unit ? ' [' + signal.unit + ']' : '') + '</h3>';
|
||||
container.appendChild(canvas);
|
||||
(signal.unit ? ' [' + signal.unit + ']' : '') + '</h3>' +
|
||||
'<div class="graph-canvas"></div>';
|
||||
container.querySelector('.graph-canvas').appendChild(canvas);
|
||||
graphsDiv.appendChild(container);
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
@@ -362,14 +410,8 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
title: { display: true, text: 'Time' }
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
title: { display: true, text: signal.unit || 'Value' }
|
||||
}
|
||||
x: { display: true, title: { display: true, text: 'Time' }},
|
||||
y: { display: true, title: { display: true, text: signal.unit || 'Value' }}
|
||||
},
|
||||
animation: false
|
||||
}
|
||||
@@ -404,15 +446,17 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
|
||||
function decodeSignal(signal, hexData) {
|
||||
const bytes = [];
|
||||
for (let i = 0; i < hexData.length; i += 3) {
|
||||
bytes.push(parseInt(hexData.substr(i, 2), 16));
|
||||
const parts = hexData.split(' ');
|
||||
for (let part of parts) {
|
||||
if (part.length === 2) {
|
||||
bytes.push(parseInt(part, 16));
|
||||
}
|
||||
}
|
||||
|
||||
let rawValue = 0;
|
||||
const startByte = Math.floor(signal.startBit / 8);
|
||||
const startBitInByte = signal.startBit % 8;
|
||||
|
||||
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);
|
||||
@@ -424,18 +468,20 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
}
|
||||
}
|
||||
} 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 = bitPos % 8;
|
||||
const bitIdx = 7 - (bitPos % 8);
|
||||
|
||||
if (byteIdx < bytes.length) {
|
||||
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);
|
||||
}
|
||||
@@ -453,14 +499,12 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
|
||||
const uploadArea = document.querySelector('.upload-area');
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
uploadArea.addEventListener(eventName, preventDefaults, false);
|
||||
uploadArea.addEventListener(eventName, e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
uploadArea.addEventListener(eventName, () => {
|
||||
uploadArea.style.borderColor = '#185a9d';
|
||||
@@ -481,11 +525,18 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user