Vista de huella dactilar

FingerprintView es un componente basado en DOM que renderiza frames de vista previa de huellas en tiempo real y la imagen del resultado final proveniente del escáner.

Vista general

El componente escucha los eventos de DriverSocket y muestra imágenes BMP a medida que llegan desde el escáner de huellas. Gestiona el ciclo de vida de la captura automáticamente: inicia la captura al montarse y la detiene al desmontarse.

Opciones

interface FingerprintViewOptions {
  container: HTMLElement;     // Elemento DOM donde renderizar
  driver?: DriverSocket;      // Opcional — usa el singleton compartido si se omite
  themeClassPrefix?: string;  // Prefijo de clases CSS (reemplaza el "hh-" por defecto)
}

Opción	Tipo	Por defecto	Descripción
container	HTMLElement	—	Elemento DOM destino (requerido)
driver	DriverSocket	Singleton compartido	Instancia del driver WebSocket
themeClassPrefix	string	"hh-"	Prefijo para todas las clases CSS generadas por el componente

Cuando se establece themeClassPrefix, el componente reemplaza el prefijo hh- por defecto en todas las clases CSS generadas. Esto permite aislar los estilos del componente para evitar colisiones o aplicar un tema personalizado:

const view = new FingerprintView({
  container: document.getElementById('preview')!,
  themeClassPrefix: 'my-app-',
});

Esto genera las clases my-app-fingerprint-view, my-app-fingerprint-view__timeline y my-app-fingerprint-pview__preview en lugar de las por defecto.

Uso

import { FingerprintView } from '@heuristik/hhjssdk';

const container = document.getElementById('fingerprint-preview')!;
const view = new FingerprintView({ container });

// Comenzar a escuchar y capturar
view.mount();

// Limpiar vistas previas y reiniciar la captura
view.reset();

// Detener y liberar recursos
view.unmount();

Ciclo de vida del componente

Crea el componente con new FingerprintView(opts) y luego llama a mount() para comenzar a escuchar. Los frames de vista previa llegan automáticamente, seguidos del resultado final. Después de que llega el resultado final, el componente deja de escuchar nuevos eventos y detiene la captura automáticamente. Usa reset() para limpiar las vistas previas y reiniciar la captura para un nuevo escaneo, y unmount() para liberar recursos.

API

mount()

Adjunta los listeners del socket e inicia la captura de huellas. No hace nada si ya está montado.

unmount()

Desconecta los listeners, detiene la captura y borra las imágenes de vista previa del DOM. No hace nada si no está montado.

reset()

Detiene la captura, borra todas las imágenes de vista previa y reinicia la captura para un nuevo escaneo.

Clases CSS

El componente crea la siguiente estructura DOM con clases CSS que puedes estilizar:

Clase	Elemento	Descripción
hh-fingerprint-view	Contenedor	Agregada al elemento raíz contenedor
hh-fingerprint-view__timeline	div interno	Envuelve las imágenes de vista previa y resultado
hh-fingerprint-pview__preview	img	Imagen individual de vista previa o resultado

Ejemplo de estilos

.hh-fingerprint-view {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 8px;
}

.hh-fingerprint-view__timeline {
  display: flex;
  gap: 0.5rem;
}

.hh-fingerprint-pview__preview {
  width: 200px;
  height: auto;
  border: 2px solid #ccc;
  border-radius: 4px;
}

Formato de imagen

Todas las imágenes del escáner están en formato BMP codificadas en base64. El componente las renderiza usando data:image/bmp;base64,<data> como fuente del elemento <img>.