Visualization Options

The Vitals™ SDK provides several visualization overlays that enhance the user experience during vital sign scanning. These options give real-time visual feedback about face detection, signal quality, and measurement progress.

Available Visualizations

Feature	Description	Documentation
Heatmap	PPG amplitude heatmap overlay on the face region, with 10 visual presets	Heatmap Guide
Signal Visualizer	Real-time scrolling PPG/respiratory waveform display	Signal Visualizer Guide
Bounding Box	Face detection boundary rectangle	Bounding Box Guide
Face Mesh	468-point facial landmark wireframe overlay with animation	Face Mesh Guide
Model Loading Progress	Progress overlay during AI model initialization	Model Loading Progress Guide

Configuration

Visualization options are configured through the visualizationOptions property when creating the camera instance:

JavaScript

import { createVitalSignCamera } from 'ts-vital-sign-camera';

const camera = createVitalSignCamera({
  // ... other config
  visualizationOptions: {
    heatmap: { enabled: true, mode: 'field' },
    boundingBox: { enabled: true, color: 'red' },
    faceMesh: { enabled: true, color: 'lightgreen', animate: true }
  }
});

React

import { VitalSignCamera } from 'react-vital-sign-camera';

const App = () => (
  <VitalSignCamera
    visualizationOptions={{
      heatmap: { enabled: true, mode: 'field' },
      boundingBox: { enabled: true },
      faceMesh: { enabled: true }
    }}
  />
);

Vue

<template>
  <VitalSignCamera
    :visualizationOptions="visualizationOptions"
  />
</template>

<script setup>
const visualizationOptions = {
  heatmap: { enabled: true, mode: 'field' },
  boundingBox: { enabled: true },
  faceMesh: { enabled: true }
};
</script>

Runtime Updates

Visualization options can be updated at runtime using the visualizationOptions setter:

// Disable heatmap
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  heatmap: { enabled: false }
};

// Change heatmap preset
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  heatmap: { mode: 'neon' }
};

VisualizationOptions Interface

interface VisualizationOptions {
  boundingBox?: BoundingBoxOptions;
  faceMesh?: FaceMeshOptions;
  modelLoadingProgress?: ModelLoadingProgressOptions;
  heatmap?: HeatmapOptions;
}

Each sub-option is lazy-initialized when first enabled and destroyed when disabled.