@jjlmoya/utils-hardware 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-hardware",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/tool/mousePollingTest/component.astro

@@ -232,6 +232,6 @@ const t = (ui ?? {}) as TestRatonUI;
       placeholder: document.getElementById('tr-placeholder'),
       canvas: document.getElementById('tr-canvas') as HTMLCanvasElement | null,
       area: document.getElementById('tr-area')
-    }, new URL('./worker/mouseWorker.ts', import.meta.url));
+    });
   </script>
 </div>

package/src/tool/mousePollingTest/logic/RatonManager.ts

@@ -1,3 +1,6 @@
+import { MovingAverage } from './MovingAverage';
+import { StatisticalFilter } from './StatisticalFilter';
+
 export interface UIToolElements {
   avg: HTMLElement | null;
   max: HTMLElement | null;
@@ -10,88 +13,124 @@ export interface UIToolElements {
 export class RatonManager {
   private el: UIToolElements;
   private ctx: CanvasRenderingContext2D | null;
-  private worker: Worker;
   private history: number[] = [];
-  private readonly MAX_HISTORY = 100;
+  private readonly MAX_HISTORY: number = 100;
   private idleTimer: ReturnType<typeof setTimeout> | null = null;
   private lastMouseEvent: MouseEvent | null = null;
+  private lastTime: number = 0;
+  private maxHz: number = 0;
+  private totalHistory: number[] = [];
+  private filter: StatisticalFilter = new StatisticalFilter();
+  private smoother: MovingAverage = new MovingAverage(20);
 
-  constructor(el: UIToolElements, workerUrl: URL) {
+  constructor(el: UIToolElements) {
     this.el = el;
     this.ctx = el.canvas?.getContext('2d') ?? null;
-    this.worker = new Worker(workerUrl, { type: 'module' });
     this.init();
   }
 
   private init(): void {
     window.addEventListener('resize', () => this.resize());
     this.resize();
-
-    this.worker.onmessage = (event) => this.handleWorkerMessage(event.data);
-
-    this.el.area?.addEventListener('mousemove', (e) => this.processMove(e));
+    this.el.area?.addEventListener('mousemove', (e: MouseEvent) => this.processMove(e));
     this.el.area?.addEventListener('mouseleave', () => this.handleMouseLeave());
   }
 
   private resize(): void {
-    if (!this.el.area || !this.el.canvas) return;
-    const rect = this.el.area.getBoundingClientRect();
-    this.el.canvas.width = rect.width;
-    this.el.canvas.height = rect.height;
+    const { area, canvas } = this.el;
+    if (!area || !canvas) return;
+    const rect = area.getBoundingClientRect();
+    canvas.width = rect.width;
+    canvas.height = rect.height;
   }
 
-  private handleWorkerMessage(data: { hz: number; smoothedHz: number; avgHz: number; maxHz: number }): void {
-    const { hz, smoothedHz, avgHz, maxHz } = data;
-    
-    this.history.push(smoothedHz);
+  private processMove(e: MouseEvent): void {
+    this.lastMouseEvent = e;
+    const now: number = performance.now();
+    this.calculateHz(now);
+    this.lastTime = now;
+    this.refreshIdleTimer();
+  }
+
+  private calculateHz(now: number): void {
+    if (this.lastTime <= 0) return;
+    const delta: number = now - this.lastTime;
+    if (delta <= 0.5 || delta >= 200) return;
+
+    const hz: number = 1000 / delta;
+    if (this.filter.isOutlier(hz)) return;
+
+    this.processValidMove(hz);
+  }
+
+  private processValidMove(hz: number): void {
+    const smoothed: number = this.smoother.next(hz);
+    this.history.push(smoothed);
     if (this.history.length > this.MAX_HISTORY) this.history.shift();
     
-    if (this.el.max) this.el.max.textContent = Math.round(maxHz).toString();
-    if (this.el.avg) this.el.avg.textContent = Math.round(avgHz).toString();
+    this.totalHistory.push(hz);
+    if (this.totalHistory.length > 200) this.totalHistory.shift();
+    
+    if (hz > this.maxHz) this.maxHz = hz;
+    const avg: number = this.totalHistory.reduce((acc: number, val: number) => acc + val, 0) / this.totalHistory.length;
     
+    this.updateUI(hz, avg);
+  }
+
+  private refreshIdleTimer(): void {
+    if (this.idleTimer) clearTimeout(this.idleTimer);
+    this.idleTimer = setTimeout(() => this.reset(), 100);
+  }
+
+  private updateUI(hz: number, avg: number): void {
+    const { max, avg: avgEl, placeholder } = this.el;
+    if (max) max.textContent = Math.round(this.maxHz).toString();
+    if (avgEl) avgEl.textContent = Math.round(avg).toString();
+    if (placeholder) placeholder.style.opacity = '0';
+    this.updateFollower(hz);
     this.updateGraph();
+  }
 
-    if (this.el.follower && this.lastMouseEvent) {
-      this.el.follower.textContent = `${Math.round(hz)} Hz`;
-      const rect = this.el.area!.getBoundingClientRect();
-      this.el.follower.style.transform = `translate(${this.lastMouseEvent.clientX - rect.left + 15}px, ${this.lastMouseEvent.clientY - rect.top + 15}px)`;
-      this.el.follower.style.opacity = '1';
-    }
-    
-    if (this.el.placeholder) this.el.placeholder.style.opacity = '0';
+  private updateFollower(hz: number): void {
+    const { follower, area } = this.el;
+    if (!follower || !this.lastMouseEvent || !area) return;
+    follower.textContent = `${Math.round(hz)} Hz`;
+    const rect = area.getBoundingClientRect();
+    const x: number = this.lastMouseEvent.clientX - rect.left + 15;
+    const y: number = this.lastMouseEvent.clientY - rect.top + 15;
+    follower.style.transform = `translate(${x}px, ${y}px)`;
+    follower.style.opacity = '1';
   }
 
   private updateGraph(): void {
-    if (!this.ctx || !this.el.canvas) return;
-    const { width: w, height: h } = this.el.canvas;
-    this.ctx.clearRect(0, 0, w, h);
-    this.ctx.beginPath();
-    this.ctx.strokeStyle = '#10b981';
-    this.ctx.lineWidth = 2;
-    const currentMax = Math.max(1000, ...this.history);
-    const stepX = w / this.MAX_HISTORY;
-    this.history.forEach((hz, i) => {
-      const x = i * stepX;
-      const y = h - (hz / currentMax) * (h * 0.8);
-      if (i === 0) this.ctx!.moveTo(x, y);
-      else this.ctx!.lineTo(x, y);
+    const ctx = this.ctx;
+    const canvas = this.el.canvas;
+    if (!ctx || !canvas) return;
+    const { width: w, height: h } = canvas;
+    ctx.clearRect(0, 0, w, h);
+    ctx.beginPath();
+    ctx.strokeStyle = '#10b981';
+    ctx.lineWidth = 2;
+    const currentMax: number = Math.max(1000, ...this.history);
+    const stepX: number = w / this.MAX_HISTORY;
+    this.history.forEach((hz: number, i: number) => {
+      const x: number = i * stepX;
+      const y: number = h - (hz / currentMax) * (h * 0.8);
+      if (i === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
     });
-    this.ctx.stroke();
+    ctx.stroke();
   }
 
-  private processMove(e: MouseEvent): void {
-    this.lastMouseEvent = e;
-    this.worker.postMessage({ time: performance.now() });
-    
-    if (this.idleTimer) clearTimeout(this.idleTimer);
-    this.idleTimer = setTimeout(() => {
-      if (this.el.follower) this.el.follower.style.opacity = '0';
-      this.worker.postMessage('reset');
-    }, 100);
+  private reset(): void {
+    this.lastTime = 0;
+    this.filter.reset();
+    this.smoother.reset();
+    this.totalHistory = [];
+    if (this.el.follower) this.el.follower.style.opacity = '0';
   }
 
   private handleMouseLeave(): void {
-    if (this.el.follower) this.el.follower.style.opacity = '0';
-    this.worker.postMessage('reset');
+    this.reset();
   }
 }

package/src/tool/mousePollingTest/logic/StatisticalFilter.ts

@@ -1,38 +1,30 @@
-export interface FilterConfig {
-  maxThreshold?: number;
-  stdDevMultiplier?: number;
-  minSamples?: number;
-}
-
 export class StatisticalFilter {
   private samples: number[] = [];
-  private readonly config: FilterConfig;
-
-  constructor(config: FilterConfig = {}) {
-    this.config = {
-      maxThreshold: 1100,
-      stdDevMultiplier: 2,
-      minSamples: 20,
-      ...config,
-    };
-  }
+  private readonly MAX_THRESHOLD: number = 10000;
+  private readonly STD_DEV_MULTIPLIER: number = 4;
+  private readonly MIN_SAMPLES: number = 20;
 
   public isOutlier(value: number): boolean {
-    if (this.config.maxThreshold && value > this.config.maxThreshold) {
-      return true;
-    }
+    if (value > this.MAX_THRESHOLD) return true;
 
-    if (this.samples.length < (this.config.minSamples || 20)) {
+    if (this.samples.length < this.MIN_SAMPLES) {
       this.samples.push(value);
       return false;
     }
 
-    const avg = this.samples.reduce((a, b) => a + b, 0) / this.samples.length;
-    const stdDev = Math.sqrt(
-      this.samples.reduce((a, b) => a + Math.pow(b - avg, 2), 0) / this.samples.length
-    );
+    const total: number = this.samples.reduce((acc: number, val: number) => acc + val, 0);
+    const avg: number = total / this.samples.length;
+    
+    const squareDiffs: number = this.samples.reduce((acc: number, val: number) => {
+      const diff: number = val - avg;
+      return acc + (diff * diff);
+    }, 0);
+    
+    const stdDev: number = Math.sqrt(squareDiffs / this.samples.length);
+
+    if (stdDev === 0) return false;
 
-    const isFiltered = Math.abs(value - avg) > stdDev * (this.config.stdDevMultiplier || 2.5);
+    const isFiltered: boolean = Math.abs(value - avg) > stdDev * this.STD_DEV_MULTIPLIER;
 
     if (!isFiltered) {
       this.samples.push(value);

package/src/tool/mousePollingTest/worker/mouseWorker.ts

@@ -1,50 +0,0 @@
-import { StatisticalFilter } from '../logic/StatisticalFilter';
-import { MovingAverage } from '../logic/MovingAverage';
-
-const statisticalFilter = new StatisticalFilter();
-const smoothingFilter = new MovingAverage(20);
-
-let lastTime = 0;
-let maxHz = 0;
-const history: number[] = [];
-
-self.onmessage = (event: MessageEvent<{ time: number } | 'reset'>) => {
-  if (event.data === 'reset') {
-    lastTime = 0;
-    return;
-  }
-
-  const { time } = event.data;
-  
-  if (lastTime === 0) {
-    lastTime = time;
-    return;
-  }
-
-  const delta = time - lastTime;
-  lastTime = time;
-
-  if (delta <= 0 || delta > 100) return;
-
-  const hz = 1000 / delta;
-
-  if (statisticalFilter.isOutlier(hz)) {
-    return;
-  }
-
-  const smoothedHz = smoothingFilter.next(hz);
-  
-  history.push(hz);
-  if (history.length > 200) history.shift();
-  
-  if (hz > maxHz) maxHz = hz;
-
-  const avgHz = history.reduce((a, b) => a + b, 0) / history.length;
-
-  self.postMessage({
-    hz,
-    smoothedHz,
-    avgHz,
-    maxHz
-  });
-};