byun/250928_esp32_spi_sdcard_ads8688_mcp.03.wifi_can.ESP32_CAN_Logger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

그래프 수 20개 늘림, 그래프 나열순서 조정

Browse Source
This commit is contained in:
byun
2025-10-13 21:07:23 +00:00
parent bc0a2a448f
commit 268ae6645f
3 changed files with 204 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

453
graph.h
View File

@@ -74,6 +74,36 @@ const char graph_html[] PROGMEM = R"rawliteral(
border-radius: 10px;
margin-bottom: 15px;
}
.sort-controls {
display: flex;
gap: 10px;
margin-bottom: 15px;
align-items: center;
flex-wrap: wrap;
}
.sort-label {
font-weight: 600;
color: #333;
font-size: 0.9em;
}
.sort-btn {
padding: 8px 15px;
border: 2px solid #43cea2;
background: white;
border-radius: 5px;
font-size: 0.85em;
cursor: pointer;
transition: all 0.3s;
font-weight: 600;
}
.sort-btn:hover {
background: #f0f9ff;
transform: translateY(-2px);
}
.sort-btn.active {
background: #43cea2;
color: white;
}
.signal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -93,40 +123,6 @@ const char graph_html[] PROGMEM = R"rawliteral(
.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;
border: 2px solid #e0e0e0;
}
.graph-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 2px solid #43cea2;
}
.graph-title {
font-size: 1em;
font-weight: 600;
color: #333;
}
.graph-value {
font-size: 1.2em;
font-weight: 700;
color: #185a9d;
font-family: 'Courier New', monospace;
}
canvas {
width: 100%;
height: 250px;
border: 1px solid #ddd;
border-radius: 5px;
background: #fafafa;
}
.controls {
display: flex;
gap: 8px;
@@ -159,12 +155,24 @@ const char graph_html[] PROGMEM = R"rawliteral(
.status.success { background: #d4edda; color: #155724; }
.status.error { background: #f8d7da; color: #721c24; }
.selection-info {
background: #e3f2fd;
padding: 12px 15px;
border-radius: 8px;
margin-bottom: 15px;
border-left: 4px solid #185a9d;
font-size: 0.9em;
color: #333;
}
.selection-info strong {
color: #185a9d;
}
@media (max-width: 768px) {
body { padding: 5px; }
.header h1 { font-size: 1.5em; }
.content { padding: 10px; }
.signal-grid { grid-template-columns: 1fr; gap: 8px; }
canvas { height: 200px; }
h2 { font-size: 1.1em; }
}
</style>
@@ -195,7 +203,12 @@ const char graph_html[] PROGMEM = R"rawliteral(
</div>
<div id="signal-section" style="display:none;">
<h2>Select Signals (Max 6)</h2>
<h2>Select Signals (Max 20)</h2>
<div class="selection-info">
<strong>Selected: <span id="selected-count">0</span> / 20</strong>
</div>
<div class="controls">
<button class="btn btn-success" onclick="startGraphing()">Start</button>
<button class="btn btn-danger" onclick="stopGraphing()">Stop</button>
@@ -203,6 +216,12 @@ const char graph_html[] PROGMEM = R"rawliteral(
</div>
<div class="signal-selector">
<div class="sort-controls">
<span class="sort-label">Sort by:</span>
<button class="sort-btn active" id="sort-selection" onclick="setSortMode('selection')">Selection Order</button>
<button class="sort-btn" id="sort-name-asc" onclick="setSortMode('name-asc')">Name (A→Z)</button>
<button class="sort-btn" id="sort-name-desc" onclick="setSortMode('name-desc')">Name (Z→A)</button>
</div>
<div id="signal-list" class="signal-grid"></div>
</div>
@@ -220,171 +239,9 @@ const char graph_html[] PROGMEM = R"rawliteral(
let ws;
let dbcData = {};
let selectedSignals = [];
let charts = {};
let graphing = false;
let startTime = 0;
const MAX_SIGNALS = 6;
const MAX_DATA_POINTS = 60;
const COLORS = [
{line: '#FF6384', fill: 'rgba(255, 99, 132, 0.1)'},
{line: '#36A2EB', fill: 'rgba(54, 162, 235, 0.1)'},
{line: '#FFCE56', fill: 'rgba(255, 206, 86, 0.1)'},
{line: '#4BC0C0', fill: 'rgba(75, 192, 192, 0.1)'},
{line: '#9966FF', fill: 'rgba(153, 102, 255, 0.1)'},
{line: '#FF9F40', fill: 'rgba(255, 159, 64, 0.1)'}
];
// 커스텀 차트 클래스
class SimpleChart {
constructor(canvas, signal, colorIndex) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.signal = signal;
this.data = [];
this.labels = [];
this.colors = COLORS[colorIndex % COLORS.length];
this.currentValue = 0;
// Canvas 크기 설정
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, label) {
this.data.push(value);
this.labels.push(label);
this.currentValue = value;
if (this.data.length > MAX_DATA_POINTS) {
this.data.shift();
this.labels.shift();
}
this.draw();
}
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);
// 데이터 범위 계산
const minValue = Math.min(...this.data);
const maxValue = Math.max(...this.data);
const range = maxValue - minValue || 1;
// 축 그리기
ctx.strokeStyle = '#ddd';
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();
// Y축 라벨
ctx.fillStyle = '#666';
ctx.font = '11px Arial';
ctx.textAlign = 'right';
ctx.fillText(maxValue.toFixed(2), padding - 5, padding + 5);
ctx.fillText(minValue.toFixed(2), padding - 5, this.height - padding);
// X축 라벨 (시간 - 초 단위)
ctx.textAlign = 'center';
ctx.fillStyle = '#666';
ctx.font = '10px Arial';
if (this.labels.length > 0) {
// 첫 번째와 마지막 시간 표시
ctx.fillText(this.labels[0] + 's', padding, this.height - padding + 15);
if (this.labels.length > 1) {
const lastIdx = this.labels.length - 1;
ctx.fillText(this.labels[lastIdx] + 's',
padding + (graphWidth / (MAX_DATA_POINTS - 1)) * lastIdx,
this.height - padding + 15);
}
}
// X축 타이틀
ctx.fillText('Time (sec)', this.width / 2, this.height - 5);
// 그리드 라인
ctx.strokeStyle = '#f0f0f0';
ctx.lineWidth = 1;
for (let i = 1; i < 5; i++) {
const y = padding + (graphHeight / 5) * i;
ctx.beginPath();
ctx.moveTo(padding, y);
ctx.lineTo(this.width - padding, y);
ctx.stroke();
}
if (this.data.length < 2) return;
// 영역 채우기
ctx.fillStyle = this.colors.fill;
ctx.beginPath();
ctx.moveTo(padding, this.height - padding);
for (let i = 0; i < this.data.length; i++) {
const x = padding + (graphWidth / (MAX_DATA_POINTS - 1)) * i;
const y = this.height - padding - ((this.data[i] - minValue) / range) * graphHeight;
if (i === 0) {
ctx.lineTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.lineTo(padding + (graphWidth / (MAX_DATA_POINTS - 1)) * (this.data.length - 1), this.height - padding);
ctx.closePath();
ctx.fill();
// 선 그리기
ctx.strokeStyle = this.colors.line;
ctx.lineWidth = 2;
ctx.beginPath();
for (let i = 0; i < this.data.length; i++) {
const x = padding + (graphWidth / (MAX_DATA_POINTS - 1)) * i;
const y = this.height - padding - ((this.data[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 < this.data.length; i++) {
const x = padding + (graphWidth / (MAX_DATA_POINTS - 1)) * i;
const y = this.height - padding - ((this.data[i] - minValue) / range) * graphHeight;
ctx.beginPath();
ctx.arc(x, y, 2, 0, Math.PI * 2);
ctx.fill();
}
}
}
let allSignals = [];
let sortMode = 'selection';
const MAX_SIGNALS = 20;
function initWebSocket() {
ws = new WebSocket('ws://' + window.location.hostname + ':81');
@@ -403,10 +260,6 @@ const char graph_html[] PROGMEM = R"rawliteral(
ws.onmessage = function(event) {
try {
const data = JSON.parse(event.data);
if (data.type === 'canBatch' && graphing) {
processCANData(data.messages);
}
} catch(e) {
console.error('Error parsing WebSocket data:', e);
}
@@ -423,13 +276,11 @@ const char graph_html[] PROGMEM = R"rawliteral(
parseDBCContent(content);
document.getElementById('dbc-status').textContent = file.name;
// DBC 파일 저장
saveDBCToLocalStorage(content, file.name);
};
reader.readAsText(file);
}
// DBC 파일을 localStorage에 저장
function saveDBCToLocalStorage(content, filename) {
try {
localStorage.setItem('dbc_content', content);
@@ -440,7 +291,6 @@ const char graph_html[] PROGMEM = R"rawliteral(
}
}
// localStorage에서 DBC 파일 복원
function loadDBCFromLocalStorage() {
try {
const content = localStorage.getItem('dbc_content');
@@ -461,6 +311,7 @@ const char graph_html[] PROGMEM = R"rawliteral(
function parseDBCContent(content) {
dbcData = {messages: {}};
allSignals = [];
const lines = content.split('\n');
let currentMessage = null;
@@ -492,6 +343,7 @@ const char graph_html[] PROGMEM = R"rawliteral(
messageName: currentMessage.name
};
currentMessage.signals.push(signal);
allSignals.push(signal);
}
}
}
@@ -500,31 +352,66 @@ const char graph_html[] PROGMEM = R"rawliteral(
showStatus('DBC loaded: ' + Object.keys(dbcData.messages).length + ' messages', 'success');
}
function setSortMode(mode) {
sortMode = mode;
document.querySelectorAll('.sort-btn').forEach(btn => btn.classList.remove('active'));
document.getElementById('sort-' + mode).classList.add('active');
displaySignals();
console.log('Sort mode changed to:', mode);
}
function sortSignals(signals) {
if (sortMode === 'name-asc') {
return signals.sort((a, b) => a.name.localeCompare(b.name));
} else if (sortMode === 'name-desc') {
return signals.sort((a, b) => b.name.localeCompare(a.name));
} else {
const selected = signals.filter(s => isSignalSelected(s));
const notSelected = signals.filter(s => !isSignalSelected(s));
return [...selected, ...notSelected];
}
}
function isSignalSelected(signal) {
return selectedSignals.some(s =>
s.messageId === signal.messageId && s.name === signal.name);
}
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);
});
}
const sortedSignals = sortSignals([...allSignals]);
sortedSignals.forEach(signal => {
const item = document.createElement('div');
item.className = 'signal-item';
if (isSignalSelected(signal)) {
item.classList.add('selected');
}
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';
// 저장된 선택 복원
setTimeout(() => loadSelectedSignals(), 100);
updateSelectionCount();
}
function updateSelectionCount() {
document.getElementById('selected-count').textContent = selectedSignals.length;
}
function toggleSignal(signal, element) {
@@ -543,8 +430,12 @@ const char graph_html[] PROGMEM = R"rawliteral(
element.classList.add('selected');
}
// 선택한 신호 저장
updateSelectionCount();
saveSelectedSignals();
if (sortMode === 'selection') {
displaySignals();
}
}
function clearSelection() {
@@ -553,30 +444,39 @@ const char graph_html[] PROGMEM = R"rawliteral(
item.classList.remove('selected');
});
// 저장된 선택 삭제
updateSelectionCount();
saveSelectedSignals();
if (sortMode === 'selection') {
displaySignals();
}
}
// 선택한 신호를 localStorage에 저장
function saveSelectedSignals() {
try {
localStorage.setItem('selected_signals', JSON.stringify(selectedSignals));
console.log('Saved', selectedSignals.length, 'signals');
localStorage.setItem('sort_mode', sortMode);
console.log('Saved', selectedSignals.length, 'signals with sort mode:', sortMode);
} catch(e) {
console.error('Failed to save selected signals:', e);
}
}
// localStorage에서 선택한 신호 복원
function loadSelectedSignals() {
try {
const saved = localStorage.getItem('selected_signals');
const savedSortMode = localStorage.getItem('sort_mode');
if (savedSortMode) {
sortMode = savedSortMode;
document.querySelectorAll('.sort-btn').forEach(btn => btn.classList.remove('active'));
document.getElementById('sort-' + sortMode).classList.add('active');
}
if (saved) {
const signals = JSON.parse(saved);
// 신호 목록이 표시된 후에 선택 상태 복원
signals.forEach(savedSignal => {
// DBC에 해당 신호가 있는지 확인
let found = false;
for (let msgId in dbcData.messages) {
const msg = dbcData.messages[msgId];
@@ -591,22 +491,7 @@ const char graph_html[] PROGMEM = R"rawliteral(
}
});
// UI 업데이트
document.querySelectorAll('.signal-item').forEach(item => {
const signalName = item.querySelector('.signal-name').textContent;
const signalInfo = item.querySelector('.signal-info').textContent;
const idMatch = signalInfo.match(/ID: 0x([0-9A-F]+)/);
if (idMatch) {
const msgId = parseInt(idMatch[1], 16);
const isSelected = selectedSignals.some(s =>
s.messageId === msgId && s.name === signalName);
if (isSelected) {
item.classList.add('selected');
}
}
});
displaySignals();
if (selectedSignals.length > 0) {
showStatus('Restored ' + selectedSignals.length + ' selected signals', 'success');
@@ -623,12 +508,10 @@ const char graph_html[] PROGMEM = R"rawliteral(
return;
}
// 선택한 신호 저장 (새 창에서 사용)
saveSelectedSignals();
// 새 창 열기
const width = 1200;
const height = 800;
const width = 1400;
const height = 900;
const left = (screen.width - width) / 2;
const top = (screen.height - height) / 2;
@@ -645,64 +528,6 @@ const char graph_html[] PROGMEM = R"rawliteral(
showStatus('Use the stop button in the graph viewer window', 'error');
}
function createGraphs() {
// 이 함수는 새 창에서 사용됨
}
function processCANData(messages) {
// 이 함수는 새 창에서 사용됨
}
function decodeSignal(signal, hexData) {
const bytes = [];
if (typeof hexData === 'string') {
const cleanHex = hexData.replace(/\s/g, '').toUpperCase();
for (let i = 0; i < cleanHex.length && i < 16; i += 2) {
bytes.push(parseInt(cleanHex.substring(i, i + 2), 16));
}
}
while (bytes.length < 8) {
bytes.push(0);
}
let rawValue = 0;
if (signal.byteOrder === '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 {
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));
}
}
}
if (signal.signed && (rawValue & (1 << (signal.bitLength - 1)))) {
rawValue -= (1 << signal.bitLength);
}
const physicalValue = rawValue * signal.factor + signal.offset;
return physicalValue;
}
function showStatus(message, type) {
const status = document.getElementById('status');
status.textContent = message;
@@ -741,16 +566,16 @@ const char graph_html[] PROGMEM = R"rawliteral(
parseDBCContent(ev.target.result);
document.getElementById('dbc-status').textContent = file.name;
// DBC 파일 저장
saveDBCToLocalStorage(ev.target.result, file.name);
};
reader.readAsText(file);
}
});
// 페이지 로드 시 localStorage에서 DBC 복원
window.addEventListener('load', function() {
loadDBCFromLocalStorage();
if (loadDBCFromLocalStorage()) {
setTimeout(() => loadSelectedSignals(), 100);
}
});
initWebSocket();