Fingerprint View

FingerprintView is a DOM-based component that renders live fingerprint preview frames and the final result image from the scanner.

Overview

The component listens to DriverSocket events and displays BMP images as they arrive from the fingerprint scanner. It manages the capture lifecycle automatically — starting capture on mount and stopping on unmount.

Options

interface FingerprintViewOptions {
  container: HTMLElement;     // DOM element to render into
  driver?: DriverSocket;      // Optional — uses shared singleton if omitted
  themeClassPrefix?: string;  // CSS class prefix (replaces default "hh-")
}

Option	Type	Default	Description
container	HTMLElement	—	Target DOM element (required)
driver	DriverSocket	Shared singleton	WebSocket driver instance
themeClassPrefix	string	"hh-"	Prefix for all CSS classes generated by the component

When themeClassPrefix is set, the component replaces the default hh- prefix in all generated CSS class names. This lets you namespace the component styles to avoid collisions or apply a custom theme:

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

This produces classes my-app-fingerprint-view, my-app-fingerprint-view__timeline, and my-app-fingerprint-pview__preview instead of the defaults.

Usage

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

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

// Start listening and capturing
view.mount();

// Reset previews and restart capture
view.reset();

// Stop and clean up
view.unmount();

Component lifecycle

Create the component with new FingerprintView(opts), then call mount() to start listening. Preview frames arrive automatically, followed by a final result. After the final result arrives, the component stops listening for new events and halts capture automatically. Use reset() to clear previews and restart capture for a new scan, and unmount() to clean up.

API

mount()

Attaches socket listeners and starts fingerprint capture. Does nothing if already mounted.

unmount()

Detaches listeners, stops capture, and clears preview images from the DOM. Does nothing if not mounted.

reset()

Stops capture, clears all preview images, and restarts capture for a new scan.

CSS classes

The component creates the following DOM structure with CSS classes you can style:

Class	Element	Description
hh-fingerprint-view	Container	Added to the root container element
hh-fingerprint-view__timeline	Inner div	Wraps preview/result images
hh-fingerprint-pview__preview	img	Individual preview or result image

Styling example

.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;
}

Image format

All images from the scanner are BMP format encoded as base64. The component renders them using data:image/bmp;base64,<data> as the <img> source.