ecg-dicom-web-viewer

ecg-dicom-web-viewer

This library allows viewing an ECG file in DICOM format in web view.

• NPM: https://www.npmjs.com/package/ecg-dicom-web-viewer

Installation

This module is distributed via [npm][npm-url] which is bundled with [node][node] and should be installed as one of your project's dependencies:

// To install the newest version
npm install --save ecg-dicom-web-viewer

Example

1. Once installed import the project.

// Import
import {
  ReadECG, //Optional.
  SOP_CLASS_UIDS, //Optional.
  WAVE_FORM_BITS_STORED, //Optional.
  KEY_UNIT_INFO, //Optional.
  SPLINE, //Optional.
  DicomECGViewer, //Principal.
} from "ecg-dicom-web-viewer";

1. Instantiate the new class with the necessary data and create the view.

//Load view:
let viewer = new DicomECGViewer(
  byteArray, //Data array ECG (XMLHttpRequest response array or...local open data)
  divView, //Div where to draw the view
  viewportIndex //View number, since you can have several views.
);
viewer.loadCanvas(); // Load canvas view.

Result

Documentation

Currently it works:

• Sop12LeadECGWaveformStorage: '1.2.840.10008.5.1.4.1.1.9.1.1', --> YES
• GeneralECGWaveformStorage: '1.2.840.10008.5.1.4.1.1.9.1.2', --> YES
• AmbulatoryECGWaveformStorage: '1.2.840.10008.5.1.4.1.1.9.1.3', --> YES
• HemodynamicWaveformStorage: '1.2.840.10008.5.1.4.1.1.9.2.1', --> YES
• CardiacElectrophysiologyWaveformStorage: '1.2.840.10008.5.1.4.1.1.9.2.1', --> YES

The next available classes are as follows:

Class DicomECGViewer

- constructor(dataDICOMarrayBuffer, idView, nameView)

dataDICOMarrayBuffer DICOM DCM ECG Array Buffer.

idView Draw ID View. Recomended a div.

nameView Identifier of the view you want to put, in case you have several views, default 0.

- loadCanvas()

Main method, draws the canvas and its entire view.

Class ReadECG

- ReadECG(this.dataDICOMarrayBuffer, '', opts)

Receives a dataSet data structure and returns a readable array.

optsspeed: 25, amplitude: 10, applyLowPassFilter: true

- getWaveform()

Read the arraydicombuffer and return legible data.

- getInfo()

Read the arraydicombuffer and return information data, example: BPM, Name, Duration ECG...

Static Constants

SOP_CLASS_UIDS - SOP UID of ECG types and graph measurements.

WAVE_FORM_BITS_STORED - Accuracy and quality of the recorded signal.

KEY_UNIT_INFO - These are the data to be displayed/read from the ECG. Example: QTC INTERVAL, QRS AXIS, P DURATION etc...

SPLINE - Generates interpolation in the ECG view with a spline, enabled by default, may affect performance.

Class GenericCanvas

It is the generic class for the canvas, it contains the values ​​of the number of views, canvas size, rows, columns, grid size...

Class DrawECGCanvas extends GenericCanvas

This class renders the data, both the grid and the view, it also contains the button events.

Features

• Improve canvas scrolling performance.

Changelog

2.1.2 (2025-01-08)

Note: Added in constants SPLINE - Generates interpolation in the ECG view with a spline, enabled by default, may affect performance. Advantages of Using Splines in an ECG: Smoothness: Splines can make ECG lines look smoother and more continuous, which can be more pleasing to the eye and easier to interpret. Interpolation: If the sample data has large intervals, splines can interpolate the points in between, providing a more continuous representation of the signal. Zoom: When zooming, splines can help maintain the continuity of the lines, preventing individual points from being seen. Disadvantages of Using Splines in an ECG Accuracy: In some cases, splines can over-smooth the signal, obscuring important details that could be clinically relevant. Complexity: Implementing splines adds complexity to the code and can require more computational resources.

Tension (tension = 0.5) The tension in a cardinal spline controls the stiffness of the curve. A tension value of 0.5 is a good middle ground that provides a smooth curve without being too stiff or too loose. Low Tension (close to 0): The curve will be looser and smoother, but may deviate more from the control points. High Tension (close to 1): The curve will be stiffer and will fit closer to the control points, but may appear more angular. A value of 0.5 is chosen as a compromise between smoothness and accuracy, providing a curve that is visually pleasing and follows the control points reasonably well. Number of Segments (numOfSegments = 16) The number of segments determines how many intermediate points are calculated between each pair of control points. A value of 16 is a good balance between curve accuracy and performance. Fewer Segments (low value): The curve will be less accurate and more angular, but the calculation will be faster. More Segments (high value): The curve will be more accurate and smoother, but the calculation will be slower. A value of 16 provides a smooth and accurate curve without requiring too many computational resources, which is important to maintain good performance, especially in real-time applications such as ECG visualization.