LbrBeatEkgPlayer

Description

The LbrBeatEkgPlayer component is an advanced player for electrocardiogram (ECG) signals built with Lit. This component is designed to load and play ECG signals from WFDB files (.hea and .dat), allowing interactive visualization of the signals and providing controls for playback and data manipulation.

Main Features:

• Load ECG signals from WFDB files (.hea and .dat).
• Graphical visualization of ECG signals on a canvas element.
• Interactive controls:
  • Play, stop, and restart the signal.
  • Switch between multiple available signals.
  • Interactive progress bar for signal navigation.
  • Select available signals through a dropdown menu.
• Accurate synchronization between visualization and playback time.
• Dynamic time display of elapsed and total time in HH:MM:SS format.

Screenshots

Installation

1. Install via npm:

   npm install lbr-beat-ekg-player

2. Use in an HTML/JS project:

   • Import the component in your main file:

     import 'lbr-beat-ekg-player';

   • Add it to your HTML:

     <lbr-beat-ekg-player
       hea-url="path/to/file.hea"
       dat-url="path/to/file.dat"
       auto-play
     ></lbr-beat-ekg-player>

Properties

Key Properties:

• heaUrl (String): URL to the WFDB header file (.hea).
• datUrl (String): URL to the WFDB data file (.dat).
• signals (Array): List of signals loaded from the files.
• isPlaying (Boolean): Indicates if the signal is currently playing.
• currentIndex (Number): Current index of the sample in the signal.
• selectedSignal (Number): Index of the selected signal.
• selectedSignalName (String): Name of the selected signal.
• currentSecond (Number): Current playback second.
• autoPlay (Boolean): If enabled, starts playback automatically after loading data.
• totalDuration (Number): Total duration of the loaded signal in seconds.
• samplingFrequency (Number): Sampling frequency of the signals.

Component Usage

Available Controls:

1. Signal dropdown menu: Allows switching between available signals loaded from the files.
2. Control buttons:
   • Play: Starts playing the signal from the current time.
   • Stop: Stops playback at the current time.
   • Restart: Restarts playback from second 0.
3. Interactive progress bar:
   • Allows navigation through the signal by clicking or dragging the slider.

Example Usage:

<lbr-beat-ekg-player
  hea-url="https://example.com/signal.hea"
  dat-url="https://example.com/signal.dat"
  auto-play
></lbr-beat-ekg-player>

Technical Details

The component uses an HTML canvas to render ECG signals. As the signal plays, data is dynamically updated and synchronized with the progress bar. Playback is time-based, utilizing requestAnimationFrame to ensure smooth and precise visualization.

Main Methods:

• loadWFDBData: Loads the .hea and .dat files and decodes the signals for visualization.
• playSignal: Starts playing the signal.
• stopSignal: Stops playback.
• resetSignal: Resets playback to the beginning.
• seekTo: Changes the current playback time to a specific point.
• renderPausedSignal: Renders the signal on the canvas when paused.
• updateProgressBar: Visually updates the progress bar and slider.

Events:

• @change on the dropdown menu to switch between signals.
• @click and @mousedown on the progress bar to navigate through the signal.

In Development

Future versions aim to include:

1. Support for additional file formats: Adding compatibility for other formats such as CSV, JSON, or specific binary formats.
2. Styling customization: Adding options to customize colors and interface styles.
3. Signal export: Enabling export of processed signals to different formats.
4. Advanced visualization: Improving analysis tools and visualization, such as event markers on the signal.

License

This component is available under the MIT License.

LbrBeatEkgPlayer

Descripción

El componente LbrBeatEkgPlayer es un reproductor avanzado para señales de electrocardiograma (ECG) desarrollado con Lit. Este componente está diseñado para cargar y reproducir señales de ECG a partir de archivos en formato WFDB (.hea y .dat), permitiendo la visualización interactiva de las señales y proporcionando controles para la reproducción y manipulación de los datos.

Funcionalidades principales:

• Carga de señales ECG desde archivos WFDB (.hea y .dat).
• Visualización gráfica de las señales ECG en un elemento canvas.
• Controles interactivos:
  • Reproducir, detener y reiniciar la señal.
  • Cambiar entre múltiples señales disponibles.
  • Barra de progreso interactiva para navegar por la señal.
  • Selección de señales disponibles a través de un menú desplegable.
• Sincronización precisa entre la visualización y el tiempo de reproducción.
• Visualización dinámica de tiempo transcurrido y tiempo total en formato HH:MM:SS.

Capturas de pantalla

Instalación

1. Instalación desde npm:

   npm install lbr-beat-ekg-player

2. Uso en un proyecto HTML/JS:

   • Importa el componente en tu archivo principal:

     import 'lbr-beat-ekg-player';

   • Añádelo a tu HTML:

     <lbr-beat-ekg-player
       hea-url="path/to/file.hea"
       dat-url="path/to/file.dat"
       auto-play
     ></lbr-beat-ekg-player>

Propiedades

Propiedades principales:

• heaUrl (String): URL al archivo de cabecera WFDB (.hea).
• datUrl (String): URL al archivo de datos WFDB (.dat).
• signals (Array): Lista de señales cargadas desde los archivos.
• isPlaying (Boolean): Indica si la señal está siendo reproducida actualmente.
• currentIndex (Number): Índice actual de la muestra en la señal.
• selectedSignal (Number): Índice de la señal seleccionada.
• selectedSignalName (String): Nombre de la señal seleccionada.
• currentSecond (Number): Segundo actual de la reproducción.
• autoPlay (Boolean): Si está activado, inicia la reproducción automáticamente después de cargar los datos.
• totalDuration (Number): Duración total de la señal cargada en segundos.
• samplingFrequency (Number): Frecuencia de muestreo de las señales.

Uso del componente

Controles disponibles:

1. Menú desplegable de señales: Permite seleccionar entre las señales disponibles en los archivos cargados.
2. Botones de control:
   • Reproducir: Inicia la reproducción de la señal desde el tiempo actual.
   • Detener: Detiene la reproducción en el tiempo actual.
   • Reiniciar: Reinicia la reproducción desde el segundo 0.
3. Barra de progreso interactiva:
   • Permite navegar por la señal haciendo clic o arrastrando el control deslizante.

Ejemplo de uso:

<lbr-beat-ekg-player
  hea-url="https://example.com/signal.hea"
  dat-url="https://example.com/signal.dat"
  auto-play
></lbr-beat-ekg-player>

Funcionamiento técnico

El componente utiliza un canvas HTML para renderizar las señales ECG. A medida que la señal se reproduce, los datos se actualizan dinámicamente y se sincronizan con la barra de progreso. La reproducción está basada en el tiempo, utilizando requestAnimationFrame para garantizar una visualización suave y precisa.

Métodos principales:

• loadWFDBData: Carga los archivos .hea y .dat, y decodifica las señales para la visualización.
• playSignal: Inicia la reproducción de la señal.
• stopSignal: Detiene la reproducción.
• resetSignal: Reinicia la reproducción desde el inicio.
• seekTo: Cambia el tiempo actual de reproducción a un punto específico.
• renderPausedSignal: Renderiza la señal en pausa en el canvas.
• updateProgressBar: Actualiza visualmente la barra de progreso y el control deslizante.

Eventos:

• @change en el menú desplegable para cambiar entre señales.
• @click y @mousedown en la barra de progreso para navegar por la señal.

En desarrollo

En futuras versiones, se buscará incluir:

1. Soporte para otros formatos de archivo: Incluir soporte para formatos adicionales como CSV, JSON o formatos binarios específicos.
2. Personalización del estilo: Añadir opciones para personalizar colores y estilos de la interfaz.
3. Exportación de señales: Permitir exportar las señales procesadas a diferentes formatos.
4. Visualización avanzada: Mejorar las herramientas de análisis y visualización, como marcadores de eventos en la señal.

Licencia

Este componente está disponible bajo la licencia MIT.