@jjlmoya/utils-hardware 1.15.0 → 1.17.0

package/src/tool/colorAccuracyTest/logic.ts

@@ -0,0 +1,226 @@
+export interface ColorTest {
+  name: string;
+  description: string;
+  instruction: string;
+  colors: string[];
+}
+
+export const SRGB_TESTS: ColorTest[] = [
+  {
+    name: 'Spectral Purity',
+    description: 'Primary & secondary colors',
+    instruction: 'Watch for consistent, pure colors. Any color shift or banding indicates display inaccuracy.',
+    colors: ['#000', '#fff', '#f00', '#0f0', '#00f', '#ff0', '#0ff', '#f0f'],
+  },
+  {
+    name: 'Gradient Dynamics',
+    description: 'Smooth color transitions',
+    instruction: 'Look for banding (visible steps) instead of smooth gradients. Banding = poor color depth or calibration.',
+    colors: [],
+  },
+  {
+    name: 'Black Crush Detection',
+    description: 'Shadow detail test',
+    instruction: 'Can you see all 6 shades? If blacks blur together, your display is crushing shadow details.',
+    colors: ['#000', '#111', '#222', '#333', '#444', '#555'],
+  },
+  {
+    name: 'White Point Calibration',
+    description: 'Brightness & temperature',
+    instruction: 'Check for color tint in whites. A neutral white has no warm (yellow) or cool (blue) cast.',
+    colors: ['#fff', '#f5f5f5', '#e8e8e8', '#d0d0d0', '#b0b0b0'],
+  },
+];
+
+export const DCIP3_TESTS: ColorTest[] = [
+  {
+    name: 'Spectral Purity (DCI-P3)',
+    description: 'Cinema gamut colors',
+    instruction: 'DCI-P3 covers more colors than sRGB. Watch for vibrant, saturated colors without clipping.',
+    colors: ['#000', '#fff', '#ff0000', '#00ff00', '#0000ff'],
+  },
+  {
+    name: 'Gradient Dynamics',
+    description: 'Smooth color transitions',
+    instruction: 'Cinema displays should show silky-smooth gradients. Any stepping = insufficient bit depth.',
+    colors: [],
+  },
+  {
+    name: 'Black Crush Detection',
+    description: 'Shadow detail test',
+    instruction: 'Can you see all 6 shades? If blacks blur together, your display is crushing shadow details.',
+    colors: ['#000', '#111', '#222', '#333', '#444', '#555'],
+  },
+  {
+    name: 'White Point Calibration',
+    description: 'Brightness & temperature',
+    instruction: 'Check for color tint in whites. A neutral white has no warm (yellow) or cool (blue) cast.',
+    colors: ['#fff', '#f5f5f5', '#e8e8e8', '#d0d0d0', '#b0b0b0'],
+  },
+];
+
+export class SpectrumCanvasTest {
+  private currentTestIndex = 0;
+  private currentColorIndex = 0;
+  private gamut: 'srgb' | 'dcip3' = 'srgb';
+  private tests: ColorTest[] = SRGB_TESTS;
+  private testBg: HTMLElement | null = null;
+  private testName: HTMLElement | null = null;
+  private testDescription: HTMLElement | null = null;
+  private progressBar: HTMLElement | null = null;
+  private testOverlay: HTMLElement | null = null;
+  private dashboard: HTMLElement | null = null;
+
+  constructor() {
+    this.testBg = document.getElementById('test-bg');
+    this.testName = document.getElementById('test-name');
+    this.testDescription = document.getElementById('test-description');
+    this.progressBar = document.querySelector('.sc-progress-bar');
+    this.testOverlay = document.getElementById('test-overlay');
+    this.dashboard = document.getElementById('dashboard');
+  }
+
+  start(gamut: 'srgb' | 'dcip3' = 'srgb') {
+    this.gamut = gamut;
+    this.tests = gamut === 'dcip3' ? DCIP3_TESTS : SRGB_TESTS;
+    this.currentTestIndex = 0;
+    this.currentColorIndex = 0;
+    this.showCurrentTest();
+    this.attachKeyboardListeners();
+  }
+
+  private showCurrentTest() {
+    const test = this.tests[this.currentTestIndex];
+    if (!test) return;
+
+    if (this.testName) {
+      this.testName.textContent = test.name;
+    }
+
+    if (this.testDescription) {
+      this.testDescription.textContent = test.instruction;
+    }
+
+    this.updateProgress();
+    this.displayColor();
+
+    const win = window as Record<string, unknown>;
+    if (win.updateTestUI) {
+      (win.updateTestUI as () => void)();
+    }
+  }
+
+  private displayColor() {
+    const test = this.tests[this.currentTestIndex];
+    if (!test || !this.testBg) return;
+
+    if (test.colors.length === 0) {
+      this.testBg.style.backgroundColor = '';
+      this.testBg.style.background =
+        'linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)';
+    } else {
+      this.testBg.style.background = '';
+      const color = test.colors[this.currentColorIndex % test.colors.length];
+      this.testBg.style.backgroundColor = color;
+    }
+  }
+
+  private updateProgress() {
+    const totalTests = this.tests.length;
+    const progress = ((this.currentTestIndex + 1) / totalTests) * 100;
+    if (this.progressBar) {
+      this.progressBar.style.width = `${progress}%`;
+    }
+  }
+
+  nextColor() {
+    const test = this.tests[this.currentTestIndex];
+
+    if (!test || test.colors.length === 0) {
+      this.nextTest();
+      return;
+    }
+
+    this.currentColorIndex++;
+
+    if (this.currentColorIndex >= test.colors.length) {
+      this.nextTest();
+    } else {
+      this.displayColor();
+    }
+  }
+
+  prevColor() {
+    const test = this.tests[this.currentTestIndex];
+
+    if (!test || test.colors.length === 0) {
+      if (this.currentTestIndex === 0) return;
+      this.currentTestIndex--;
+      this.currentColorIndex = 0;
+      this.showCurrentTest();
+      return;
+    }
+
+    this.currentColorIndex--;
+
+    if (this.currentColorIndex < 0) {
+      if (this.currentTestIndex === 0) {
+        this.currentColorIndex = 0;
+        return;
+      }
+      this.currentTestIndex--;
+      const prevTest = this.tests[this.currentTestIndex];
+      this.currentColorIndex = prevTest.colors.length - 1;
+      this.showCurrentTest();
+    } else {
+      this.displayColor();
+    }
+  }
+
+  nextTest() {
+    this.currentTestIndex++;
+    this.currentColorIndex = 0;
+
+    if (this.currentTestIndex >= this.tests.length) {
+      setTimeout(() => this.finish(), 300);
+    } else {
+      this.showCurrentTest();
+    }
+  }
+
+  reset() {
+    this.currentTestIndex = 0;
+    this.currentColorIndex = 0;
+    this.showCurrentTest();
+  }
+
+  finish() {
+    if (this.testOverlay) {
+      this.testOverlay.style.display = 'none';
+    }
+    if (this.testBg) {
+      this.testBg.style.backgroundColor = '';
+      this.testBg.style.background = '';
+    }
+    this.currentTestIndex = 0;
+    this.currentColorIndex = 0;
+  }
+
+  private attachKeyboardListeners() {
+    const handleKeydown = (e: KeyboardEvent) => {
+      if (e.code === 'Space') {
+        e.preventDefault();
+        this.nextColor();
+      } else if (e.key === 'r' || e.key === 'R') {
+        e.preventDefault();
+        this.reset();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        this.finish();
+        document.removeEventListener('keydown', handleKeydown);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeydown);
+  }
+}

package/src/tool/colorAccuracyTest/seo.astro

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

package/src/tool/colorAccuracyTest/ui.ts

@@ -0,0 +1,27 @@
+export interface SpectrumCanvasUI extends Record<string, string> {
+  badge: string;
+  title: string;
+  description: string;
+  btnStartCalibration: string;
+  btnFullscreen: string;
+  kbdFullscreen: string;
+  kbdFullscreenLabel: string;
+  kbdReset: string;
+  kbdResetLabel: string;
+  kbdEsc: string;
+  kbdEscLabel: string;
+  gamutSRGB: string;
+  gamutDCIP3: string;
+  gamutToggle: string;
+  hardwareName: string;
+  hardwareNamePlaceholder: string;
+  purityTest: string;
+  gradientTest: string;
+  blackHoleTest: string;
+  whitePointTest: string;
+  colorCheckpoint: string;
+  generateReport: string;
+  viewResults: string;
+  btnExit: string;
+  compareSideBySide: string;
+}

package/src/tool/deadPixelTest/bibliography.ts

@@ -0,0 +1,13 @@
+import type { BibliographyEntry } from '../../../types';
+
+export const bibliography: BibliographyEntry[] = [
+
+    {
+      name: 'ISO/IEC 9241-307: Display ergonomics and related equipment',
+      url: 'https://www.iso.org/standard/72025.html',
+    },
+    {
+      name: 'Dead Pixel Policy - Common Standards (VESA)',
+      url: 'https://www.vesa.org/',
+    },
+];

package/src/tool/deadPixelTest/i18n/de.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PixelesPantallaUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'tote-pixel-test-monitor-reparatur';
 const title = 'Test auf tote Pixel und Bildschirm Reparatur Tool';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Häufig gestellte Fragen',
   faq: faqData,
-  bibliographyTitle: 'Referenzen und Standards',
-  bibliography: [
-    {
-      name: 'ISO/IEC 9241-307: Ergonomie der Mensch-System-Interaktion',
-      url: 'https://www.iso.org/standard/72025.html',
-    },
-    {
-      name: 'Dead Pixel Policy - Gängige Standards (VESA)',
-      url: 'https://www.vesa.org/',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     {
       type: 'title',

package/src/tool/deadPixelTest/i18n/en.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PixelesPantallaUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'dead-pixel-tester';
 const title = 'Dead Pixel Test and Screen Repair Tool';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Frequently Asked Questions',
   faq: faqData,
-  bibliographyTitle: 'References and Standards',
-  bibliography: [
-    {
-      name: 'ISO/IEC 9241-307: Display ergonomics and related equipment',
-      url: 'https://www.iso.org/standard/72025.html',
-    },
-    {
-      name: 'Dead Pixel Policy - Common Standards (VESA)',
-      url: 'https://www.vesa.org/',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     {
       type: 'title',

package/src/tool/deadPixelTest/i18n/es.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PixelesPantallaUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'pixeles-pantalla';
 const title = 'Test de Píxeles Muertos y Reparador de Pantalla';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Preguntas Frecuentes',
   faq: faqData,
-  bibliographyTitle: 'Referencias y Normas',
-  bibliography: [
-    {
-      name: 'ISO/IEC 9241-307: Display ergonomics and related equipment',
-      url: 'https://www.iso.org/standard/72025.html',
-    },
-    {
-      name: 'Dead Pixel Policy - Common Standards (VESA)',
-      url: 'https://www.vesa.org/',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     {
       type: 'title',

package/src/tool/deadPixelTest/i18n/fr.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PixelesPantallaUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'testeur-pixels-morts';
 const title = 'Test de Pixels Morts et Outil de Réparation d\'Écran';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Questions Fréquemment Posées',
   faq: faqData,
-  bibliographyTitle: 'Références et Normes',
-  bibliography: [
-    {
-      name: 'ISO/IEC 9241-307: Ergonomie des écrans et équipements associés',
-      url: 'https://www.iso.org/standard/72025.html',
-    },
-    {
-      name: 'Politique de Pixels Morts - Normes Communes (VESA)',
-      url: 'https://www.vesa.org/',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     {
       type: 'title',

package/src/tool/deadPixelTest/i18n/id.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PixelesPantallaUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'tes-pixel-mati-perbaikan-layar';
 const title = 'Tes Pixel Mati dan Alat Perbaikan Layar';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Pertanyaan yang Sering Diajukan',
   faq: faqData,
-  bibliographyTitle: 'Referensi dan Standar',
-  bibliography: [
-    {
-      name: 'ISO/IEC 9241-307: Ergonomi tampilan dan peralatan terkait',
-      url: 'https://www.iso.org/standard/72025.html',
-    },
-    {
-      name: 'Kebijakan Pixel Mati - Standar Umum (VESA)',
-      url: 'https://www.vesa.org/',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     {
       type: 'title',

package/src/tool/deadPixelTest/i18n/it.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PixelesPantallaUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'test-pixel-morti-riparazione-schermo';
 const title = 'Test Pixel Morti e Strumento Riparazione Schermo';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Domande Frequenti',
   faq: faqData,
-  bibliographyTitle: 'Riferimenti e Standard',
-  bibliography: [
-    {
-      name: 'ISO/IEC 9241-307: Ergonomia del display e apparecchiature correlate',
-      url: 'https://www.iso.org/standard/72025.html',
-    },
-    {
-      name: 'Dead Pixel Policy - Standard comuni (VESA)',
-      url: 'https://www.vesa.org/',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     {
       type: 'title',

package/src/tool/deadPixelTest/i18n/ja.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PixelesPantallaUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'dead-pixel-tester';
 const title = 'ドット抜けテスト・液晶修復ツール';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
   slug,
   title,
   description,
-  faqTitle: 'よくある質問',
   faq: faqData,
-  bibliographyTitle: '参考文献と規格',
-  bibliography: [
-    {
-      name: 'ISO/IEC 9241-307：ディスプレイの人間工学および関連機器',
-      url: 'https://www.iso.org/standard/72025.html',
-    },
-    {
-      name: 'ドット抜けに関するポリシー - 一般的な規格 (VESA)',
-      url: 'https://www.vesa.org/',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     {
       type: 'title',

package/src/tool/deadPixelTest/i18n/ko.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PixelesPantallaUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'dead-pixel-tester';
 const title = '불량 화소 테스트 및 화면 복구 도구';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
   slug,
   title,
   description,
-  faqTitle: '자주 묻는 질문',
   faq: faqData,
-  bibliographyTitle: '참고 문헌 및 표준',
-  bibliography: [
-    {
-      name: 'ISO/IEC 9241-307: 디스플레이 인체공학 및 관련 장비',
-      url: 'https://www.iso.org/standard/72025.html',
-    },
-    {
-      name: '불량 화소 정책 - 일반 표준 (VESA)',
-      url: 'https://www.vesa.org/',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     {
       type: 'title',

package/src/tool/deadPixelTest/i18n/nl.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PixelesPantallaUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'dode-pixel-test-schermreparatie';
 const title = 'Dode Pixel Test en Schermreparatie Tool';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Veelgestelde Vragen',
   faq: faqData,
-  bibliographyTitle: 'Referenties en Normen',
-  bibliography: [
-    {
-      name: 'ISO/IEC 9241-307: Ergonomie van beeldschermen en aanverwante apparatuur',
-      url: 'https://www.iso.org/standard/72025.html',
-    },
-    {
-      name: 'Dead Pixel Policy - Gangbare Normen (VESA)',
-      url: 'https://www.vesa.org/',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     {
       type: 'title',

package/src/tool/deadPixelTest/i18n/pl.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PixelesPantallaUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'test-martwych-pikseli-naprawa-monitora';
 const title = 'Test Martwych Pikseli i Narzędzie do Naprawy Ekranu';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Często zadawane pytania',
   faq: faqData,
-  bibliographyTitle: 'Referencje i normy',
-  bibliography: [
-    {
-      name: 'ISO/IEC 9241-307: Ergonomia wyświetlaczy i powiązanego sprzętu',
-      url: 'https://www.iso.org/standard/72025.html',
-    },
-    {
-      name: 'Polityka martwych pikseli - powszechne standardy (VESA)',
-      url: 'https://www.vesa.org/',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     {
       type: 'title',

package/src/tool/deadPixelTest/i18n/pt.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PixelesPantallaUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'teste-pixel-morto-reparacao-ecra';
 const title = 'Teste de Pixel Morto e Ferramenta de Reparação de Ecrã';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Perguntas Frequentes',
   faq: faqData,
-  bibliographyTitle: 'Referências e Normas',
-  bibliography: [
-    {
-      name: 'ISO/IEC 9241-307: Ergonomia do ecrã e equipamento relacionado',
-      url: 'https://www.iso.org/standard/72025.html',
-    },
-    {
-      name: 'Dead Pixel Policy - Normas Comuns (VESA)',
-      url: 'https://www.vesa.org/',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     {
       type: 'title',

package/src/tool/deadPixelTest/i18n/ru.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { PixelesPantallaUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'test-bityh-pikselej-remont-ekrana';
 const title = 'Тест на битые пиксели и инструмент для ремонта экрана';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Часто задаваемые вопросы',
   faq: faqData,
-  bibliographyTitle: 'Ссылки и стандарты',
-  bibliography: [
-    {
-      name: 'ISO/IEC 9241-307: Эргономика дисплеев и сопутствующего оборудования',
-      url: 'https://www.iso.org/standard/72025.html',
-    },
-    {
-      name: 'Политика битых пикселей — общие стандарты (VESA)',
-      url: 'https://www.vesa.org/',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     {
       type: 'title',