feat(data) undefined: Added new HTML file for piano spectrum analyzer. fix(Config.h): Updated WiFi settings and web configuration portal details. refactor(Arduino sketch): Added WiFi and WebSocket support, enabling real-time spectrum data transmission over the

- New HTML file added to the `data` directory for a piano spectrum analyzer. - Updated `Config.h` with WiFi settings and web configuration portal details. - Update the Arduino sketch with WiFi and WebSocket support, enabling real-time spectrum data transmission over the web.
2025-04-25 19:00:28 +02:00
parent c83d04eb23
commit 91b24e0da0
3 changed files with 185 additions and 3 deletions
--- a/data/index.html
+++ b/data/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>ESP32 Piano Spectrum Analyzer</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            background: #f0f0f0;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+        }
+        #spectrum-container {
+            position: relative;
+            height: 400px;
+            margin: 20px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Piano Spectrum Analyzer</h1>
+        <div id="spectrum-container">
+            <canvas id="spectrumChart"></canvas>
+        </div>
+    </div>
+
+    <script>
+        const ctx = document.getElementById('spectrumChart').getContext('2d');
+        const chart = new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: Array.from({length: 512}, (_, i) => i * (8000 / 1024)),
+                datasets: [{
+                    label: 'Frequency Spectrum',
+                    data: Array(512).fill(0),
+                    borderColor: 'rgb(75, 192, 192)',
+                    tension: 0.1,
+                    fill: false
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                animation: {
+                    duration: 0
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        max: 5000
+                    },
+                    x: {
+                        title: {
+                            display: true,
+                            text: 'Frequency (Hz)'
+                        }
+                    }
+                }
+            }
+        });
+
+        const wsUrl = `ws://${window.location.hostname}/ws`;
+        const ws = new WebSocket(wsUrl);
+
+        ws.onmessage = function(event) {
+            const spectrum = JSON.parse(event.data);
+            chart.data.datasets[0].data = spectrum;
+            chart.update();
+        };
+
+        ws.onclose = function() {
+            console.log('WebSocket connection closed');
+            setTimeout(() => {
+                window.location.reload();
+            }, 1000);
+        };
+    </script>
+</body>
+</html>