Changes to be committed:

modified: data/www/index.html new file: data/www/spectrum.html new file: partitions.csv modified: platformio.ini deleted: src/NoteMappings copy.h modified: src/main.cpp modified: src/web_server.cpp modified: src/web_server.h
2025-04-16 18:16:20 +02:00
parent 3031f75836
commit 438fd59037
8 changed files with 137 additions and 52 deletions
--- a/data/www/spectrum.html
+++ b/data/www/spectrum.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Audio Spectrum</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background: #f8f9fa;
+            font-family: Arial, sans-serif;
+        }
+        canvas {
+            border: 1px solid #ccc;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="spectrumCanvas" width="800" height="400"></canvas>
+
+    <script>
+        const canvas = document.getElementById('spectrumCanvas');
+        const ctx = canvas.getContext('2d');
+
+        function drawSpectrum(data) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            // Draw axis labels
+            ctx.fillStyle = 'black';
+            ctx.font = '16px Arial';
+            ctx.fillText('Frequency/Note', canvas.width / 2 - 50, canvas.height - 10);
+            ctx.save();
+            ctx.translate(10, canvas.height / 2);
+            ctx.rotate(-Math.PI / 2);
+            ctx.fillText('Amplitude', -50, 0);
+            ctx.restore();
+
+            // Draw spectrum bars
+            const barWidth = canvas.width / data.length;
+            data.forEach((value, index) => {
+                const barHeight = value * canvas.height;
+                ctx.fillStyle = 'rgb(50, 150, 250)';
+                ctx.fillRect(index * barWidth, canvas.height - barHeight, barWidth, barHeight);
+            });
+
+            // Draw legend
+            ctx.fillStyle = 'black';
+            ctx.fillRect(10, 10, 20, 20);
+            ctx.fillStyle = 'rgb(50, 150, 250)';
+            ctx.fillRect(12, 12, 16, 16);
+            ctx.fillStyle = 'black';
+            ctx.font = '14px Arial';
+            ctx.fillText('Amplitude', 40, 25);
+        }
+
+        // Simulate spectrum data for testing
+        setInterval(() => {
+            const testData = Array.from({ length: 64 }, () => Math.random());
+            drawSpectrum(testData);
+        }, 100);
+    </script>
+</body>
+</html>