From e9b6d7bb06ef240f203c21fe1bd9f794c78c3306 Mon Sep 17 00:00:00 2001
From: sirmrak <sirmrak@gmail.com>
Date: Thu, 21 May 2026 19:31:07 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20Web=20Client=20=E2=80=94=20=D0=B2=D0=B5?=
 =?UTF-8?q?=D1=80=D0=BD=D1=83=D0=BB=20=D0=BE=D1=80=D0=B8=D0=B3=D0=B8=D0=BD?=
 =?UTF-8?q?=D0=B0=D0=BB=D1=8C=D0=BD=D1=83=D1=8E=20=D0=BA=D1=80=D0=B0=D1=81?=
 =?UTF-8?q?=D0=B8=D0=B2=D1=83=D1=8E=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D1=8E=20canvas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Изменения:
- 42 столбика как в оригинале
- Синусоидальная анимация
- Градиент cyan → blue
- Сглаживание RMS (0.7 old + 0.3 new)
- Случайные колебания для живости

Теперь красиво как было, но с данными satellite RMS!
---
 web-client/client.html | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

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<satelliteRmsHistory.length; i++) {
+    for(let i=0; i<42; i++) {
       const rms = satelliteRmsHistory[i];
-      const barHeight = Math.min(rms * canvas.height * 1.5, canvas.height - 5);
-      const x = i * barWidth;
+      // Красивая анимация с синусом как в оригинале
+      let barHeight = (rms * canvas.height * 1.5 * (Math.sin(i * 0.5) + 1)/2 + 5) * (0.5 + (Math.random()*0.3));
       
-      // Градиент от зелёного к красному
-      const hue = 120 - (rms * 120);  // 120 = зелёный, 0 = красный
-      ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
-      ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
+      // Увеличиваем высоту если громко
+      if(rms > 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);
     }
   }