Jose/esp32i2s
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat ✨: Improved visualization by adding logarithmic scaling to the x-axis labels and updating the y-axis scale based on the maximum value of the frequency spectrum.

Browse Source 
- Updated the `y-axis scale` based on the maximum value of the frequency spectrum, added logarithmic scaling to the x-axis labels, and improved interpolation logic for better display.
This commit is contained in:
Jose
2025-04-25 21:29:16 +02:00
parent f500937067
commit 4992b75d57
1 changed files with 72 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
data/index.html
View File

@@ -61,18 +61,36 @@
label: note label: note
})); }));
// Keep track of recent maximum values
const maxValueHistory = [];
const MAX_HISTORY_LENGTH = 5;
function updateYAxisScale(newValue) {
maxValueHistory.push(newValue);
if (maxValueHistory.length > MAX_HISTORY_LENGTH) {
maxValueHistory.shift();
}
return Math.max(...maxValueHistory) * 1.1; // Add 10% margin
}
const ctx = document.getElementById('spectrumChart').getContext('2d'); const ctx = document.getElementById('spectrumChart').getContext('2d');
const chart = new Chart(ctx, { const chart = new Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
labels: Array.from({length: 134}, (_, i) => (i + 8) * (8000 / 1024)), // Generate logarithmically spaced frequencies for labels
labels: Array.from({length: 134}, (_, i) => {
const minFreq = 60;
const maxFreq = 1100;
return Math.pow(10, Math.log10(minFreq) + (Math.log10(maxFreq) - Math.log10(minFreq)) * i / 133);
}),
datasets: [{ datasets: [{
label: 'Frequency Spectrum', label: 'Frequency Spectrum',
data: Array(134).fill(0), data: Array(134).fill(0),
borderColor: 'rgb(75, 192, 192)', borderColor: 'rgb(75, 192, 192)',
tension: 0.1, tension: 0.1,
fill: true, fill: true,
backgroundColor: 'rgba(75, 192, 192, 0.2)' backgroundColor: 'rgba(75, 192, 192, 0.2)',
pointRadius: 0 // Hide points for better performance
}] }]
}, },
options: { options: {
@@ -81,10 +99,19 @@
animation: { animation: {
duration: 0 duration: 0
}, },
parsing: {
xAxisKey: 'x',
yAxisKey: 'y'
},
scales: { scales: {
y: { y: {
beginAtZero: true, beginAtZero: true,
max: 5000, max: 5000,
adapters: {
update: function(maxValue) {
return updateYAxisScale(maxValue);
}
},
title: { title: {
display: true, display: true,
text: 'Magnitude' text: 'Magnitude'
@@ -92,6 +119,7 @@
}, },
x: { x: {
type: 'logarithmic', type: 'logarithmic',
position: 'bottom',
min: 60, min: 60,
max: 1100, max: 1100,
title: { title: {
@@ -99,20 +127,21 @@
text: 'Frequency (Hz)' text: 'Frequency (Hz)'
}, },
ticks: { ticks: {
callback: function(value, index, values) { callback: function(value) {
// Find the closest note // Show C notes and F# notes
const closestNote = Object.entries(noteFrequencies) const entries = Object.entries(noteFrequencies);
.reduce((closest, [note, freq]) => { const closest = entries.reduce((prev, curr) => {
return Math.abs(freq - value) < Math.abs(freq - closest.freq) return Math.abs(curr[1] - value) < Math.abs(prev[1] - value) ? curr : prev;
? { note, freq } });
: closest;
}, { note: '', freq: Infinity });
if (Math.abs(value - closestNote.freq) < 1) { if ((closest[0].includes('C') || closest[0].includes('F#')) &&
return closestNote.note; Math.abs(closest[1] - value) < 1) {
return closest[0];
} }
return ''; return '';
} },
sampleSize: 20,
autoSkip: false
}, },
grid: { grid: {
color: (ctx) => { color: (ctx) => {
@@ -175,21 +204,32 @@
const ws = new WebSocket(wsUrl); const ws = new WebSocket(wsUrl);
function interpolateSpectrum(spectrum) { function interpolateSpectrum(spectrum) {
// Convert the linear frequency bins to logarithmic scale const result = [];
const result = new Array(spectrum.length).fill(0); const minFreq = 60;
const maxFreq = 1100;
const binWidth = 8000 / 1024; // Hz per bin const binWidth = 8000 / 1024; // Hz per bin
for (let i = 0; i < spectrum.length; i++) { // Generate logarithmically spaced frequencies
const freq = (i + 8) * binWidth; for (let i = 0; i < 134; i++) {
const logFreq = Math.log10(freq); const targetFreq = Math.pow(10, Math.log10(minFreq) + (Math.log10(maxFreq) - Math.log10(minFreq)) * i / 133);
// Find the two closest bins and interpolate // Find the corresponding linear bin
const bin1 = Math.floor((logFreq - Math.log10(60)) / (Math.log10(1100) - Math.log10(60)) * spectrum.length); const bin = Math.floor(targetFreq / binWidth);
const bin2 = bin1 + 1;
if (bin1 >= 0 && bin2 < spectrum.length) { if (bin >= 8 && bin < 141) {
const t = (logFreq - Math.log10(60)) / (Math.log10(1100) - Math.log10(60)) * spectrum.length - bin1; // Linear interpolation between bins
result[i] = spectrum[bin1] * (1 - t) + spectrum[bin2] * t; const binFraction = (targetFreq / binWidth) - bin;
const value = spectrum[bin - 8] * (1 - binFraction) +
(bin - 7 < spectrum.length ? spectrum[bin - 7] : 0) * binFraction;
result.push({
x: targetFreq,
y: value
});
} else {
result.push({
x: targetFreq,
y: 0
});
} }
} }
@@ -198,8 +238,14 @@
ws.onmessage = function(event) { ws.onmessage = function(event) {
const spectrum = JSON.parse(event.data); const spectrum = JSON.parse(event.data);
// Interpolate the spectrum data for logarithmic display const interpolatedData = interpolateSpectrum(spectrum);
chart.data.datasets[0].data = interpolateSpectrum(spectrum);
// Update y-axis scale based on new maximum value
const maxValue = Math.max(...interpolatedData.map(d => d.y));
chart.options.scales.y.max = updateYAxisScale(maxValue);
// Update chart data
chart.data.datasets[0].data = interpolatedData;
chart.update('none'); // Use 'none' mode for maximum performance chart.update('none'); // Use 'none' mode for maximum performance
}; };