@jjlmoya/utils-hardware 1.1.0

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

@@ -0,0 +1,20 @@
+export class MovingAverage {
+  private window: number[] = [];
+  private readonly size: number;
+
+  constructor(size: number = 20) {
+    this.size = size;
+  }
+
+  public next(value: number): number {
+    this.window.push(value);
+    if (this.window.length > this.size) {
+      this.window.shift();
+    }
+    return this.window.reduce((acc, val) => acc + val, 0) / this.window.length;
+  }
+
+  public reset(): void {
+    this.window = [];
+  }
+}

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

@@ -0,0 +1,97 @@
+export interface UIToolElements {
+  avg: HTMLElement | null;
+  max: HTMLElement | null;
+  follower: HTMLElement | null;
+  placeholder: HTMLElement | null;
+  canvas: HTMLCanvasElement | null;
+  area: HTMLElement | null;
+}
+
+export class RatonManager {
+  private el: UIToolElements;
+  private ctx: CanvasRenderingContext2D | null;
+  private worker: Worker;
+  private history: number[] = [];
+  private readonly MAX_HISTORY = 100;
+  private idleTimer: ReturnType<typeof setTimeout> | null = null;
+  private lastMouseEvent: MouseEvent | null = null;
+
+  constructor(el: UIToolElements, workerUrl: URL) {
+    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('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;
+  }
+
+  private handleWorkerMessage(data: { hz: number; smoothedHz: number; avgHz: number; maxHz: number }): void {
+    const { hz, smoothedHz, avgHz, maxHz } = data;
+    
+    this.history.push(smoothedHz);
+    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.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 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);
+    });
+    this.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 handleMouseLeave(): void {
+    if (this.el.follower) this.el.follower.style.opacity = '0';
+    this.worker.postMessage('reset');
+  }
+}

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

@@ -0,0 +1,48 @@
+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,
+    };
+  }
+
+  public isOutlier(value: number): boolean {
+    if (this.config.maxThreshold && value > this.config.maxThreshold) {
+      return true;
+    }
+
+    if (this.samples.length < (this.config.minSamples || 20)) {
+      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 isFiltered = Math.abs(value - avg) > stdDev * (this.config.stdDevMultiplier || 2.5);
+
+    if (!isFiltered) {
+      this.samples.push(value);
+      if (this.samples.length > 100) this.samples.shift();
+    }
+
+    return isFiltered;
+  }
+
+  public reset(): void {
+    this.samples = [];
+  }
+}

package/src/tool/mousePollingTest/seo.astro

@@ -0,0 +1,14 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import type { KnownLocale } from '../../types';
+import { testRaton } from './index';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await testRaton.i18n[locale]?.();
+---
+
+{content && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/mousePollingTest/ui.ts

@@ -0,0 +1,8 @@
+export interface TestRatonUI extends Record<string, string> {
+  badge: string;
+  title: string;
+  description: string;
+  labelAvg: string;
+  labelPeak: string;
+  placeholder: string;
+}

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

@@ -0,0 +1,50 @@
+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
+  });
+};

package/src/tool/toneGenerator/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import type { KnownLocale } from '../../types';
+import { toneGenerator } from './index';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await toneGenerator.i18n[locale]?.();
+---
+
+{content && content.bibliography.length > 0 && <SharedBibliography links={content.bibliography} />}