ECG Viewer – Real-Time Electrocardiogram Visualization Tool
Purpose
The ECG Viewer is a web-based application designed to simulate and display real-time electrocardiogram (ECG) waveforms. Its primary purpose is to provide a lightweight, accessible tool for educational demonstrations, medical training, or personal exploration of heart rhythm patterns. By offering a visual representation of cardiac electrical activity, it helps users understand ECG morphology without requiring specialized medical hardware or software.
Functions
- Real-Time Waveform Rendering: Continuously generates and plots synthetic ECG signals (P-QRS-T complex) on a dynamic canvas, mimicking a live medical monitor.
- Adjustable Heart Rate: Users can modify the beats per minute (BPM) via a slider, ranging from 30 to 200 BPM, to observe how heart rate affects waveform spacing and morphology.
- Lead Selection: Simulates different ECG leads (e.g., Lead I, II, III) by altering the amplitude and polarity of the waveform components, demonstrating standard clinical perspectives.
- Pause/Resume: Allows freezing the waveform at any point for detailed analysis, then resuming the live feed.
- Grid Overlay: Displays a calibrated grid (1mm x 1mm scale) behind the waveform to aid in measuring intervals and amplitudes, as in real ECG paper.
Technologies
- Frontend: Built with vanilla JavaScript, HTML5, and CSS3 for a lightweight, dependency-free experience.
- Canvas API: Uses the HTML5
<canvas>element for high-performance, real-time 2D rendering of the ECG trace and grid. - Signal Generation: Implements a mathematical model of the ECG waveform using sine waves and Gaussian functions to simulate P, QRS, and T waves with adjustable parameters.
- Responsive Design: CSS Flexbox and media queries ensure the interface adapts to various screen sizes, from desktops to tablets.
- No Backend Required: Entirely client-side; no server or database needed, making it instantly deployable on static hosting (e.g., GitHub Pages, Netlify).
UI Features
- Minimalist Dashboard: Clean, dark-themed interface with a central waveform display and side panel for controls, reducing visual clutter.
- Interactive Controls: Sliders, dropdown menus, and buttons with smooth transitions for adjusting BPM, lead selection, and playback state.
- Real-Time Feedback: The waveform scrolls smoothly from right to left, with a moving vertical cursor indicating the current time point.
- Calibrated Grid: A light gray grid with major (5mm) and minor (1mm) divisions, mimicking standard ECG paper for educational accuracy.
- Color-Coded Waveform: The ECG trace is rendered in bright green on a dark background, enhancing contrast and reducing eye strain during prolonged use.
- Status Indicators: Displays current BPM, lead name, and a live timestamp, updating in real time as parameters change.
Overall, the ECG Viewer combines educational utility with modern web technologies, offering an intuitive and responsive tool for anyone interested in cardiac signal visualization. Its self-contained architecture and polished UI make it a standout example of a practical, single-page application.