From 66f42ff951d6c1a969718adaa5d2eae55302da0b Mon Sep 17 00:00:00 2001
From: byun <nulav@naver.com>
Date: Wed, 3 Dec 2025 08:39:33 +0000
Subject: [PATCH] Add aa-graph_viewer.h

---
 aa-graph_viewer.h | 919 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 919 insertions(+)
 create mode 100644 aa-graph_viewer.h
diff --git a/aa-graph_viewer.h b/aa-graph_viewer.h
new file mode 100644
index 0000000..804236c
--- /dev/null
+++ b/aa-graph_viewer.h
@@ -0,0 +1,919 @@
+#ifndef GRAPH_VIEWER_H
+#define GRAPH_VIEWER_H
+
+const char 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 Signal Graph Viewer - Real-time</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #1a1a1a;
+            color: white;
+            overflow-x: hidden;
+        }
+        .header {
+            background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
+            padding: 15px 20px;
+            text-align: center;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+        }
+        .header h1 { 
+            font-size: 1.5em; 
+            margin-bottom: 5px;
+        }
+        .header p { 
+            font-size: 0.9em; 
+            opacity: 0.9; 
+        }
+        .header-stats {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-top: 10px;
+            font-size: 0.85em;
+        }
+        .header-stat {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .header-stat-label {
+            opacity: 0.8;
+            font-size: 0.9em;
+        }
+        .header-stat-value {
+            font-size: 1.2em;
+            font-weight: 700;
+            font-family: 'Courier New', monospace;
+        }
+        
+        .controls {
+            background: #2a2a2a;
+            padding: 12px 15px;
+            display: flex;
+            gap: 12px;
+            justify-content: center;
+            flex-wrap: wrap;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            border-bottom: 2px solid #3a3a3a;
+        }
+        .control-group {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            background: #333;
+            padding: 5px 10px;
+            border-radius: 5px;
+        }
+        .control-label {
+            font-size: 0.85em;
+            color: #aaa;
+            white-space: nowrap;
+        }
+        .btn {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 5px;
+            font-size: 0.85em;
+            font-weight: 600;
+            cursor: pointer;
+            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-secondary { background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 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);
+        }
+        
+        .stats-bar {
+            padding: 12px 15px;
+            background: #2a2a2a;
+            color: #aaa;
+            font-size: 0.85em;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 15px;
+            border-bottom: 1px solid #3a3a3a;
+        }
+        .stat-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .stat-label {
+            opacity: 0.7;
+        }
+        .stat-value {
+            color: #43cea2;
+            font-weight: 700;
+            font-family: 'Courier New', monospace;
+        }
+        
+        .graphs {
+            padding: 15px;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+            gap: 15px;
+            max-height: calc(100vh - 280px);
+            overflow-y: auto;
+        }
+        .graph-container {
+            background: #2a2a2a;
+            padding: 15px;
+            border-radius: 10px;
+            border: 2px solid #3a3a3a;
+            transition: all 0.3s;
+        }
+        .graph-container:hover {
+            border-color: #43cea2;
+            box-shadow: 0 4px 12px rgba(67, 206, 162, 0.2);
+        }
+        .graph-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 10px;
+            padding-bottom: 8px;
+            border-bottom: 2px solid #43cea2;
+            gap: 10px;
+        }
+        .graph-title-container {
+            flex: 1;
+            min-width: 0;
+        }
+        .graph-title {
+            font-size: 1em;
+            font-weight: 600;
+            color: #43cea2;
+            margin-bottom: 3px;
+            word-wrap: break-word;
+        }
+        .graph-subtitle {
+            font-size: 0.75em;
+            color: #777;
+            font-family: 'Courier New', monospace;
+        }
+        .graph-value-container {
+            text-align: right;
+            min-width: 100px;
+        }
+        .graph-value {
+            font-size: 1.3em;
+            font-weight: 700;
+            color: #38ef7d;
+            font-family: 'Courier New', monospace;
+            white-space: nowrap;
+        }
+        .graph-value-text {
+            font-size: 0.8em;
+            color: #aaa;
+            margin-top: 2px;
+        }
+        canvas {
+            width: 100%;
+            height: 250px;
+            border: 1px solid #3a3a3a;
+            border-radius: 5px;
+            background: #1a1a1a;
+        }
+        .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;
+            font-weight: 600;
+        }
+        .status.disconnected {
+            border-color: #eb3349;
+            background: #3a2a2a;
+            animation: pulse 2s ease-in-out infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+        
+        .no-signals {
+            text-align: center;
+            padding: 60px 20px;
+            color: #666;
+        }
+        .no-signals-icon {
+            font-size: 4em;
+            margin-bottom: 20px;
+            opacity: 0.5;
+        }
+        
+        @media (max-width: 768px) {
+            .graphs { 
+                grid-template-columns: 1fr; 
+                max-height: none;
+            }
+            canvas { height: 200px; }
+            .controls {
+                gap: 8px;
+            }
+            .control-group {
+                width: 100%;
+                justify-content: center;
+            }
+            .stats-bar {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>📊 Real-time CAN Signal Graphs</h1>
+        <p>Scatter Plot Mode - Viewing <strong id="graph-count">0</strong> signals</p>
+        <div class="header-stats">
+            <div class="header-stat">
+                <div class="header-stat-label">Recording Time</div>
+                <div class="header-stat-value" id="recording-time">0s</div>
+            </div>
+            <div class="header-stat">
+                <div class="header-stat-label">Messages Received</div>
+                <div class="header-stat-value" id="msg-received">0</div>
+            </div>
+            <div class="header-stat">
+                <div class="header-stat-label">Data Points</div>
+                <div class="header-stat-value" id="data-point-count">0</div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="controls">
+        <div class="control-group">
+            <button class="btn btn-success" onclick="startGraphing()">▶️ Start</button>
+            <button class="btn btn-danger" onclick="stopGraphing()">⏸️ Pause</button>
+        </div>
+        <div class="control-group">
+            <span class="control-label">X-Axis:</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</button>
+        </div>
+        <div class="control-group">
+            <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-all" onclick="setRangeMode('all')">All</button>
+        </div>
+        <div class="control-group">
+            <span class="control-label">Sort:</span>
+            <button class="btn btn-info active" id="btn-sort-selection" onclick="setSortMode('selection')">Selection</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="control-group">
+            <button class="btn btn-success" onclick="downloadCSV()">📥 CSV</button>
+            <button class="btn btn-danger" onclick="clearData()">🗑️ Clear</button>
+            <button class="btn btn-secondary" onclick="window.close()">✖️ Close</button>
+        </div>
+    </div>
+    
+    <div class="status" id="status">Connecting...</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 = {};
+        let updateInterval = null;
+        
+        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: '#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)'},
+            {line: '#34495E', fill: 'rgba(52, 73, 94, 0.2)'},
+            {line: '#16A085', fill: 'rgba(22, 160, 133, 0.2)'},
+            {line: '#27AE60', fill: 'rgba(39, 174, 96, 0.2)'},
+            {line: '#2980B9', fill: 'rgba(41, 128, 185, 0.2)'},
+            {line: '#8E44AD', fill: 'rgba(142, 68, 173, 0.2)'},
+            {line: '#C0392B', fill: 'rgba(192, 57, 43, 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 = 50;
+                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();
+                
+                // Y축 레이블
+                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 <= 6) {
+                        uniqueValues.forEach((val) => {
+                            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);
+                }
+                
+                // X축 레이블
+                ctx.textAlign = 'center';
+                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 = scaleMode === 'time' ? this.width - padding : 
+                                   padding + (graphWidth / (MAX_DATA_POINTS - 1)) * Math.min(lastIdx, MAX_DATA_POINTS - 1);
+                        ctx.fillText(displayLabels[lastIdx] + 's', xPos, this.height - padding + 15);
+                    }
+                }
+                ctx.fillText('Time (sec)', this.width / 2, this.height - 5);
+                
+                // 그리드
+                ctx.strokeStyle = '#333';
+                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();
+                }
+                
+                // 데이터 포인트 (Scatter)
+                ctx.fillStyle = this.colors.line;
+                for (let i = 0; i < displayData.length; i++) {
+                    let x = scaleMode === 'time' ? 
+                        padding + graphWidth * ((displayTimes[i] - minTime) / timeRange) :
+                        padding + (graphWidth / (MAX_DATA_POINTS - 1)) * i;
+                    
+                    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();
+                }
+            }
+        }
+        
+        function initWebSocket() {
+            ws = new WebSocket('ws://' + window.location.hostname + ':81');
+            
+            ws.onopen = function() {
+                console.log('✓ WebSocket connected');
+                updateStatus('Connected', false);
+            };
+            
+            ws.onclose = function() {
+                console.log('✗ WebSocket disconnected');
+                updateStatus('Disconnected - Reconnecting...', true);
+                setTimeout(initWebSocket, 3000);
+            };
+            
+            ws.onmessage = function(event) {
+                try {
+                    const data = JSON.parse(event.data);
+                    
+                    if (graphing && data.type === 'update') {
+                        if (data.messages && data.messages.length > 0) {
+                            processCANMessages(data.messages);
+                        }
+                    }
+                } catch(e) {
+                    console.error('Parse error:', e);
+                }
+            };
+        }
+        
+        function updateStatus(text, isError) {
+            const status = document.getElementById('status');
+            status.textContent = text;
+            status.className = 'status' + (isError ? ' disconnected' : '');
+        }
+        
+        function loadData() {
+            try {
+                const signals = localStorage.getItem('selected_signals');
+                const dbc = localStorage.getItem('dbc_content');
+                const savedSortMode = localStorage.getItem('sort_mode');
+                
+                if (!signals || !dbc) {
+                    alert('⚠️ No signals selected. Please select signals in Graph Setup page first.');
+                    window.close();
+                    return false;
+                }
+                
+                if (savedSortMode) sortMode = savedSortMode;
+                
+                selectedSignals = JSON.parse(signals);
+                
+                dbcData = { messages: {} };
+                selectedSignals.forEach(sig => {
+                    if (!dbcData.messages[sig.messageId]) {
+                        dbcData.messages[sig.messageId] = {
+                            id: sig.messageId,
+                            signals: []
+                        };
+                    }
+                    dbcData.messages[sig.messageId].signals.push(sig);
+                });
+                
+                console.log('✓ Loaded ' + selectedSignals.length + ' signals');
+                return true;
+            } catch(e) {
+                console.error('✗ Failed to load data:', e);
+                alert('Failed to load signal data');
+                window.close();
+                return false;
+            }
+        }
+        
+        function sortSignalsForDisplay() {
+            if (sortMode === 'name-asc') {
+                return [...selectedSignals].sort((a, b) => a.name.localeCompare(b.name));
+            } else if (sortMode === 'name-desc') {
+                return [...selectedSignals].sort((a, b) => b.name.localeCompare(a.name));
+            }
+            return selectedSignals;
+        }
+        
+        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: ' + mode);
+        }
+        
+        function createGraphs() {
+            const graphsDiv = document.getElementById('graphs');
+            graphsDiv.innerHTML = '';
+            charts = {};
+            
+            const sortedSignals = sortSignalsForDisplay();
+            
+            if (sortedSignals.length === 0) {
+                graphsDiv.innerHTML = 
+                    '<div class="no-signals">' +
+                    '<div class="no-signals-icon">📊</div>' +
+                    '<div style="font-size: 1.2em; margin-bottom: 10px;"><strong>No Signals Selected</strong></div>' +
+                    '<div style="color: #777;">Please select signals in the Graph Setup page</div>' +
+                    '</div>';
+                return;
+            }
+            
+            sortedSignals.forEach((signal, index) => {
+                const container = document.createElement('div');
+                container.className = 'graph-container';
+                
+                const canvas = document.createElement('canvas');
+                canvas.id = 'chart-' + index;
+                
+                const canIdHex = '0x' + signal.messageId.toString(16).toUpperCase().padStart(3, '0');
+                const subtitle = canIdHex + ' | ' + signal.messageName + ' | Bit: ' + signal.startBit + '|' + signal.bitLength;
+                
+                container.innerHTML = 
+                    '<div class="graph-header">' +
+                        '<div class="graph-title-container">' +
+                            '<div class="graph-title">' + signal.name + 
+                            (signal.unit ? ' [' + signal.unit + ']' : '') + '</div>' +
+                            '<div class="graph-subtitle">' + subtitle + '</div>' +
+                        '</div>' +
+                        '<div class="graph-value-container">' +
+                            '<div class="graph-value" id="value-' + index + '">-</div>' +
+                            '<div class="graph-value-text" id="text-' + index + '"></div>' +
+                        '</div>' +
+                    '</div>';
+                
+                container.appendChild(canvas);
+                graphsDiv.appendChild(container);
+                
+                charts[index] = new SimpleChart(canvas, signal, index);
+            });
+            
+            document.getElementById('graph-count').textContent = sortedSignals.length;
+        }
+        
+        function startGraphing() {
+            if (!graphing) {
+                graphing = true;
+                startTime = Date.now();
+                lastTimestamps = {};
+                lastCanCounts = {};
+                updateStatus('Recording...', false);
+                console.log('✓ Started graphing');
+                
+                // 통계 업데이트 시작 (1초마다)
+                if (updateInterval) clearInterval(updateInterval);
+                updateInterval = setInterval(updateStatistics, 1000);
+            }
+        }
+        
+        function stopGraphing() {
+            graphing = false;
+            if (updateInterval) {
+                clearInterval(updateInterval);
+                updateInterval = null;
+            }
+            updateStatus('Paused', false);
+            console.log('⏸️ Paused graphing');
+        }
+        
+        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');
+            
+            Object.values(charts).forEach(chart => chart.draw());
+            console.log('Scale mode: ' + 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');
+            
+            Object.values(charts).forEach(chart => chart.draw());
+            console.log('Range mode: ' + mode);
+        }
+        
+        function processCANMessages(messages) {
+            const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(1);
+            const sortedSignals = sortSignalsForDisplay();
+            let processedCount = 0;
+            
+            messages.forEach(canMsg => {
+                let msgId = canMsg.id;
+                if (typeof msgId === 'string') {
+                    msgId = parseInt(msgId.replace('0x', ''), 16);
+                }
+                
+                if (msgId & 0x80000000) {
+                    msgId = msgId & 0x1FFFFFFF;
+                }
+                
+                const prevCount = lastCanCounts[msgId] || 0;
+                const currentCount = canMsg.count || 0;
+                
+                if (currentCount <= prevCount) return;
+                
+                lastCanCounts[msgId] = currentCount;
+                totalMsgReceived++;
+                
+                let hexData = '';
+                if (Array.isArray(canMsg.data)) {
+                    hexData = canMsg.data.map(b => b.toString(16).padStart(2, '0')).join('');
+                } else if (typeof canMsg.data === 'string') {
+                    hexData = canMsg.data.replace(/\s/g, '');
+                }
+                
+                sortedSignals.forEach((signal, index) => {
+                    if (signal.messageId === msgId && charts[index]) {
+                        try {
+                            const value = decodeSignalFromHex(signal, hexData);
+                            charts[index].addData(value, elapsedTime);
+                            
+                            const valueDiv = document.getElementById('value-' + index);
+                            const textDiv = document.getElementById('text-' + index);
+                            
+                            if (valueDiv) {
+                                if (signal.valueTable && signal.valueTable[value] !== undefined) {
+                                    valueDiv.textContent = value.toFixed(0);
+                                    if (textDiv) {
+                                        textDiv.textContent = signal.valueTable[value];
+                                    }
+                                } else {
+                                    valueDiv.textContent = value.toFixed(2) + (signal.unit ? ' ' + signal.unit : '');
+                                    if (textDiv) {
+                                        textDiv.textContent = '';
+                                    }
+                                }
+                            }
+                            
+                            processedCount++;
+                        } catch(e) {
+                            console.error('Decode error (' + signal.name + '):', e);
+                        }
+                    }
+                });
+            });
+        }
+        
+        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';
+        }
+        
+        function decodeSignalFromHex(signal, hexData) {
+            const bytes = [];
+            const cleanHex = hexData.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);
+            
+            return decodeSignalFromBytes(signal, bytes);
+        }
+        
+        function decodeSignalFromBytes(signal, bytes) {
+            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);
+            }
+            
+            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', 'can_signals_' + timestamp + '.csv');
+            link.style.visibility = 'hidden';
+            
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            
+            console.log('✓ CSV downloaded: ' + maxLength + ' 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 = {};
+            startTime = Date.now();
+            totalMsgReceived = 0;
+            
+            updateStatistics();
+            console.log('✓ Data cleared');
+        }
+        
+        if (loadData()) {
+            createGraphs();
+            initWebSocket();
+            startGraphing();
+        }
+    </script>
+</body>
+</html>
+)rawliteral";
+
+#endif
