Larvitar Documentation
Home
Guide
API
GitHub
Home
Guide
API
GitHub
  • API

    • Initializing
    • Parsing
    • Loading
    • Rendering
    • Interacting
    • Testing
    • Modules

      • Logger
      • Store
      • Managers

        • Image Manager
        • GSPS Manager
        • File Manager
      • Parsers

        • PDF Parser
        • NRRD Parser
        • ECG Parser
      • Loaders
        • DICOM Loader
        • MultiFrame Loader
        • SingleFrame Loader
        • DSA Image Loader
        • File Loader
        • Nrrd Loader
      • Interaction Tools

        • Initialize and manage Tools
        • Default and Custom Tools
        • Segmentation Tools
        • DvTools
      • Utilities

        • DICOM Anonymization
        • DICOM Customization
        • Tags
        • Utils
        • Memory
      • Post Processing

        • DSA
      • Visualizations

        • Layers
        • ECG
        • Color Maps
        • Greyscale Presentation States
      • Testing
Larvitar

ECG Waveform Module

The waveforms/ecg module provides utility functions for rendering ECG (Electrocardiogram) waveforms using plotly.js. This enables visualization of ECG data in an interactive and dynamic way, supporting real-time updates and synchronization with imaging data.

Key Features

  • Rendering ECG Data: Displays ECG waveform data within a given div element.

  • Customizable Layout: Allows users to specify custom styling, colors, and grid settings.

  • Frame Synchronization: Supports updating the ECG visualization based on image frame selection.

  • Interactivity: Enables click and scroll events to adjust the ECG marker position dynamically.

Use Cases

This module is particularly useful in multi-frame cardiac imaging, where ECG signals are used to correlate different phases of the heart cycle with imaging frames. Some specific applications include:

  • Cardiac MRI and CT Analysis: Synchronizing ECG waveforms with multi-frame DICOM images to visualize heart motion and function.
  • Echocardiography Interpretation: Aligning ultrasound frames with corresponding ECG signals for enhanced cardiac assessment.
  • Stress Testing & Holter Monitoring: Providing real-time ECG overlays on imaging data for evaluating heart function under different conditions.
  • AI-Assisted Diagnosis: Integrating ECG and imaging data for machine learning models in automated arrhythmia or cardiac disease detection.

Example:

import { renderECG, updateECGMarker } from "./waveforms/ecg";

const data = [0, 1, 0, -1, 0, 1, 0, -1];
const divId = "ecgPlot";
const colorMarker = "red";
const numberOfFrames = 100;
const frameTime = 40;
const frameId = 0;

renderECG(data, divId, colorMarker, numberOfFrames, frameTime, frameId);

API Reference

getDefaultECGLayout

Returns the default layout configuration for the ECG plot, including axis settings, grid styles, and background colors.

Syntax

getDefaultECGLayout(): Partial<Plotly.Layout>

Returns

Partial<Plotly.Layout> - The default layout for ECG visualization.

renderECG

Renders an ECG waveform in the specified divId with configurable properties such as color markers and frame synchronization.

Syntax

renderECG(
  data: number[],
  divId: string,
  colorMarker: string,
  numberOfFrames: number,
  frameTime: number,
  frameId: number,
  customLayout?: Partial<Plotly.Layout>
): Partial<Plotly.PlotData>[]

Parameters

ParameterTypeDescription
datanumber[]ECG waveform data
divIdstringDivId to render waveform in
colorMarkerstringColor of the marker
numberOfFramesnumberNumber of frames in the image
frameTimenumberTime interval of each frame in the image
frameIdnumberFrameId of the image to be rendered
customLayoutPartial<Plotly.Layout>Custom layout for the plotly plot

Returns

Partial<Plotly.PlotData>[] - Plotly trace data

unrenderECG

Removes the ECG plot from the specified divId.

Syntax

renderECG(
  divId: string,
): void

Parameters

ParameterTypeDescription
divIdstringDivId to render waveform in

Returns

void - Calls Plotly.purge(divId);

syncECGFrame

Synchronizes the ECG waveform with image frames, updating marker positions based on user interaction.

Syntax

syncECGFrame(
  traceData: Partial<Plotly.PlotData>[],
  seriesId: string,
  canvasId: string,
  numberOfFrames: number,
  divId: string
): void

Parameters

ParameterTypeDescription
traceDataPartial<Plotly.PlotData>[]ECG trace data
seriesIdstringThe image series ID
canvasIdstringThe canvas ID where the image is displayed
numberOfFramesnumberTotal number of frames in the series
divIdstringThe div where the ECG is rendered

Returns

void

updateECGTotalTime

Updates the ECG waveform based on a new total time, adjusting axis ranges accordingly.

Syntax

updateECGTotalTime(
  traceData: Partial<Plotly.PlotData>[],
  frameId: number,
  numberOfFrames: number,
  frameTime: number,
  divId: string
): void

Parameters

ParameterTypeDescription
traceDataPartial<Plotly.PlotData>[]ECG trace data
frameIdnumberThe current frame index
numberOfFramesnumberTotal number of frames in the series
frameTimenumberTime interval per frame
divIdstringThe div where the ECG is rendered

Returns

void

updateECGMarker

Updates the position of the ECG marker dynamically when navigating through frames.

Syntax

updateECGMarker(
  traceData: Partial<Plotly.PlotData>[],
  frameId: number,
  numberOfFrames: number,
  frameTime: number,
  divId: string
): void

Parameters

ParameterTypeDescription
traceDataPartial<Plotly.PlotData>[]ECG trace data
frameIdnumberThe current frame index
numberOfFramesnumberTotal number of frames in the series
divIdstringThe div where the ECG is rendered

Returns

void


D/Vision Lab
Last Updated:
Contributors: Laura Borghesi, Simone "Lateralus" Manini
Prev
Layers
Next
Color Maps