DASHBOARD - Pixel Display

https://bksp.github.io/dashboard/

English Documentation below

Un sistema de visualización de píxeles interactivo y optimizado, diseñado para ser ultra ligero y estéticamente agradable. Incluye varios efectos visuales, reloj retro y minijuegos totalmente funcionales.

Cómo Usar

Abre el archivo index.html en tu navegador web favorito o accede directamente a la URL https://bksp.github.io/dashboard/. No requiere instalación ni servidor backend.

Catálogo de Aplicaciones

Habilitadas (Activas en rotación)

Estas aplicaciones están activas por defecto en js/main.js:

1. Digital Clock (digital_clock.js)

   • Qué hace: Muestra la hora (HH:MM), día de la semana y fecha.
   • Funcionamiento: Se adapta a la orientación de la pantalla (Vertical/Horizontal). Incluye parpadeo de dos puntos.

2. Expanding Circle (expanding_circle.js)

   • Qué hace: Genera ondas circulares hipnóticas que nacen en puntos aleatorios y se expanden hasta cubrir la pantalla.
   • Funcionamiento: Calcula la distancia matemática desde el centro de la onda.

3. Key Tester (key_tester.js)

   • Qué hace: Herramienta de diagnóstico para teclado.
   • Funcionamiento: Muestra "KEYS" cuando está inactivo. Al pulsar teclas, estas aparecen en pantalla y se desvanecen suavemente con el tiempo.

4. LED Tracker (led_tracker.js)

   • Qué hace: Sistema de partículas interactivo y salvapantallas.
   • Funcionamiento:
     • Interactivo: El cursor o dedo deja una estela de luz brillante que se disipa. Clic derecho crea explosiones.
     • Salvapantallas: Tras inactividad, una bola de luz rebota por la pantalla generando estelas y explosiones al chocar.

5. Clock Fireworks (clock_fireworks.js)

   • Qué hace: Combina la utilidad del reloj con la estética de los fuegos artificiales.
   • Funcionamiento: Muestra la hora en primer plano mientras se generan explosiones de colores en el fondo.

6. Tetris Clock (tetris_clock.js)

   • Qué hace: Un reloj superpuesto a una partida de Tetris automática.
   • Funcionamiento: Una IA juega Tetris infinitamente en el fondo. Si presionas las flechas (Izquierda/Derecha/Arriba-Rotar/Abajo-Caer), tomas el control. El control vuelve a la IA tras 2 segundos de inactividad.

7. Color Plasma (color_plasma.js)

   • Qué hace: Genera un patrón de ondas de colores suaves y psicodélicos.
   • Funcionamiento: Utiliza una tabla de senos precalculada (LUT) para máximo rendimiento y bajo consumo de CPU.

8. Buy Font (buyFont.js)

   • Qué hace: Muestra tipografías animadas y personalizadas en pantalla píxel.

Deshabilitadas (Disponibles en código)

Estas aplicaciones están presentes en la carpeta js/effects/ pero comentadas en js/main.js. Pueden activarse descomentando su importación.

1. Pong (pong.js): Clásico juego de tenis de mesa (modo CPU o 2 Jugadores).
2. Arkanoid (arkanoid.js): Juego de romper ladrillos con físicas de rebote, sistema de vidas, puntuación y power-ups.
3. Matrix Rain (matrix_rain.js): Simulación de la lluvia de código digital de Matrix.
4. Space Invaders (space_invaders.js): Juego de disparos arcade con nave controlable y hordas de alienígenas.
5. Fireworks (fireworks.js): Efecto puro de fuegos artificiales sin reloj.
6. Scrolling Marquee (scrolling_marquee.js): Muestra un texto desplazándose horizontalmente en bucle.
7. Spectrum Analyzer (spectrum_analyzer.js): Simulación visual de un ecualizador de música.
8. Donation QR (donation_qr.js): Muestra un código QR escaneable generado en tiempo real.

Controles Generales

• Cambiar Efecto: Haz clic en cualquier lugar (o toca la pantalla) para rotar al siguiente efecto habilitado.
• Modo Inactivo: Tras 5 segundos sin actividad, el sistema reduce los FPS a 1 para ahorrar energía y recursos de hardware.

Optimizaciones Técnicas y Arquitectura

• Cero Frameworks Innecesarios: Desarrollado en JavaScript ES Modules nativo y HTML5 sin frameworks pesados, garantizando un consumo mínimo de memoria RAM y CPU.
• PWA con Auto-Actualización: Service Worker configurado con skipWaiting(), clients.claim() y detección de cambios de controlador para actualizar la aplicación automáticamente ante un nuevo despliegue.
• Escalado Adaptativo: Cálculo dinámico del tamaño de matriz de píxeles según la resolución del dispositivo.
• Gestión de Recursos Compartidos: Motor gráfico centralizado (js/core.js) con buffers reutilizables para evitar recolección de basura (GC) frecuente.
• Dynamic FPS: Reducción automática de la tasa de refresco durante la inactividad para ahorrar batería en dispositivos móviles.

Roadmap

• Minijuegos: Mejorar físicas y niveles de Arkanoid, Pong y Space Invaders.
• Funcionalidades: Sintetizador de sonido web, visor de métricas de PC, visor/editor de imágenes retro, integración de API externa.

---

DASHBOARD - Pixel Display (English)

An interactive and optimized pixel display system, designed to be lightweight and visually engaging. Includes various visual effects, retro clock, and functional minigames.

How to Use

Simply open index.html in your web browser or navigate directly to https://bksp.github.io/dashboard/. No installation or backend server required.

App Catalog

Enabled (Active in rotation)

These applications are active by default in js/main.js:

1. Digital Clock (digital_clock.js): Displays time (HH:MM), day of the week, and date with layout auto-adaptation.
2. Expanding Circle (expanding_circle.js): Generates circular waves expanding across the screen.
3. Key Tester (key_tester.js): Diagnostic tool for keyboard input visualization.
4. LED Tracker (led_tracker.js): Interactive particle trail system and screensaver.
5. Clock Fireworks (clock_fireworks.js): Clock display over background firework explosions.
6. Tetris Clock (tetris_clock.js): Clock overlaid on an AI Tetris game with interactive player override.
7. Color Plasma (color_plasma.js): Smooth psychedelic color wave generator using precomputed sine tables.
8. Buy Font (buyFont.js): Custom animated pixel typography display.

Disabled (Available in code)

Located in js/effects/ and can be enabled by uncommenting lines in js/main.js:

• Pong (pong.js)
• Arkanoid (arkanoid.js)
• Matrix Rain (matrix_rain.js)
• Space Invaders (space_invaders.js)
• Fireworks (fireworks.js)
• Scrolling Marquee (scrolling_marquee.js)
• Spectrum Analyzer (spectrum_analyzer.js)
• Donation QR (donation_qr.js)

Technical Optimizations & Architecture

• Zero Heavy Frameworks: Native ES Modules and HTML5 rendering ensuring minimal RAM and CPU utilization.
• Auto-Updating PWA: Service Worker with immediate takeover (skipWaiting, clients.claim) and client auto-reload.
• Adaptive Matrix Scaling: Dynamic column/row resolution based on screen aspect ratio.
• Dynamic FPS Throttling: Auto FPS reduction on idle state to save battery and system resources.

---

Design by Bksp