diff --git a/web-client/client.html b/web-client/client.html index ea9728f..a8d94fb 100644 --- a/web-client/client.html +++ b/web-client/client.html @@ -583,8 +583,9 @@ } } - // Визуализация на canvas — рисуем RMS от satellite - let satelliteRmsHistory = new Array(64).fill(0); // История RMS значений + // Визуализация на canvas — рисуем RMS от satellite с красивой анимацией + let satelliteRmsHistory = new Array(42).fill(0); // История RMS значений + let rmsSmoothed = 0; // Сглаженное значение function drawSatelliteVisualization() { if(!ctx) return; @@ -600,26 +601,35 @@ return; } - // Добавляем текущее RMS в историю + // Добавляем текущее RMS в историю (сглаживание) + rmsSmoothed = rmsSmoothed * 0.7 + currentRms * 0.3; satelliteRmsHistory.shift(); - satelliteRmsHistory.push(currentRms); + satelliteRmsHistory.push(rmsSmoothed); // Рисуем ctx.clearRect(0,0,canvas.width, canvas.height); ctx.fillStyle = '#03151f'; ctx.fillRect(0,0,canvas.width, canvas.height); - const barWidth = (canvas.width / satelliteRmsHistory.length); + const barWidth = (canvas.width / 42); - for(let i=0; i 0.3) barHeight = rms * canvas.height * 1.8 * (Math.sin(i*0.3)+1.2); + + barHeight = Math.min(barHeight, canvas.height-10); + const x = i * (barWidth+2); + + // Градиент как в оригинале + const grad = ctx.createLinearGradient(x, canvas.height-barHeight, x, canvas.height); + grad.addColorStop(0, '#0ff'); + grad.addColorStop(1, '#3f87ff'); + ctx.fillStyle = grad; + ctx.fillRect(x, canvas.height-barHeight, barWidth, barHeight); } }