Electrocardio waveform drawing method and device based on Web browser

Abstract

The invention discloses an electrocardio waveform drawing method and device based on a Web browser, and the method comprises the steps: creating a Canvas context and an off-screen buffer region in the Web browser in advance, and receiving electrocardio data which are fragmented and compressed by a server according to a time window through a Web Worker thread; decompressing the compressed electrocardiogram data into a voltage-time sequence by using a pre-loaded decompression library; screening a voltage-time sequence according to the current window range and the data display interval; drawing a smooth electrocardiogram waveform curve according to the screened voltage-time sequence and an anti-aliasing algorithm; and overlapping grid lines, a scale label and a heart rate parameter panel on the electrocardio waveform curve to obtain a complete electrocardio oscillogram. According to the method, real-time drawing of the electrocardiogram data in the Web browser is achieved, electrocardiogram waveform processing does not depend on localized software any more, data compatibility is good, and waveform smooth display of high-sampling-rate data is supported.

Description

Technical Field

[0001] This application relates to the technical field of electrocardiogram waveform drawing, and specifically relates to a method and device for drawing electrocardiogram waveforms based on a Web browser. Background Art

[0002] As a reflection of cardiac electrical activity, the electrocardiogram wave is an important tool for diagnosing heart health in the medical field. It records the electrical signals generated by each heartbeat of the heart through electrodes, and can provide important information about the heart rhythm, conduction, and its functional status. Electrocardiogram (ECG), as a non-invasive, simple, and rapid diagnostic method, has been widely used in clinical practice to help doctors identify various heart diseases, such as arrhythmia, myocardial infarction, etc.

[0003] With the progress of science and technology, the processing methods of electrocardiogram waves are also constantly evolving. From traditional manual analysis to modern digital analysis, the automated processing of electrocardiogram waves has been significantly improved in terms of accuracy, efficiency, and real-time performance. Through a series of technical means such as signal denoising, feature extraction, and pattern recognition, the electrocardiogram can not only provide a routine heart health assessment, but also perform more accurate abnormal detection and early warning. In this process, the signal processing of electrocardiogram waves has become a key link in improving the quality and accuracy of medical diagnosis.

[0004] However, the existing electrocardiogram waveform processing technologies have the following defects:

[0005] (1) Platform dependence: It depends on local software (such as a dedicated ECG analysis tool), cannot be directly accessed through a Web browser, and has poor cross-platform compatibility;

[0006] (2) Real-time bottleneck: Traditional electrocardiogram waveform processing uses static image transmission or low-frequency data rendering technology, resulting in waveform delay, lag, or distortion;

[0007] (3) Lack of interaction function: Traditional electrocardiogram waveform processing tools lack core interaction functions such as lead error correction, waveform re-analysis, and waveform comparison. Doctors need to switch tools repeatedly to complete the diagnosis, with low efficiency;

[0008] (4) Insufficient data compatibility: It is difficult to parse the electrocardiogram data formats generated by different devices (such as DICOM, HL7). Format conversion is time-consuming and error-prone. Summary of the Invention

[0009] Therefore, this application provides a method and device for drawing electrocardiogram waveforms based on a Web browser to solve the problems of existing electrocardiogram waveform processing relying on local software, poor data compatibility, and waveform delay or lag.

[0010] To achieve the above object, this application provides the following technical solutions:

[0011] In a first aspect, a method for drawing an electrocardiogram (ECG) waveform based on a web browser creates a Canvas context and an off-screen buffer in the web browser in advance. The method includes:

[0012] Receiving ECG data compressed by the server in time window shards through a Web Worker thread;

[0013] Decompressing the compressed ECG data into a voltage-time series using a pre-loaded decompression library;

[0014] Filtering the voltage-time series according to the current view window range and the data display interval;

[0015] Drawing a smooth ECG waveform curve according to the filtered voltage-time series and an anti-aliasing algorithm;

[0016] Overlaying grid lines, scale labels, and a heart rate parameter panel on the ECG waveform curve to obtain a complete ECG waveform diagram.

[0017] Preferably, it further includes: processing mouse and touch events using the Pointer Events API.

[0018] Preferably, it further includes: calculating and displaying measurement results in real time based on the mapping relationship between screen coordinates and data sampling rate.

[0019] Preferably, the ECG data is encapsulated in binary, and the encapsulation format is: [4-byte length header][zstd compressed body][2-byte CRC check code].

[0020] Preferably, the server uses the Zstandard compression algorithm when compressing ECG data in time window shards.

[0021] Preferably, when decompressing the compressed ECG data into a voltage-time series using the pre-loaded decompression library, a Zstandard decompression library compiled in the WebAssembly format is used.

[0022] Preferably, the anti-aliasing algorithm uses a cubic Bezier curve interpolation algorithm.

[0023] Preferably, it further includes: creating an independent Canvas layer for each lead and synthesizing the final view.

[0024] Preferably, it further includes: dynamically adjusting the data sampling interval according to the web browser window size and device performance.

[0025] In a second aspect, an apparatus for drawing an ECG waveform based on a web browser creates a Canvas context and an off-screen buffer in the web browser in advance. The apparatus includes:

[0026] A data receiving module, configured to receive the electrocardiogram data compressed by the server in time window shards through a Web Worker thread;

[0027] A data decompression module, configured to decompress the compressed electrocardiogram data into a voltage-time series by using a pre-loaded decompression library;

[0028] A data screening module, configured to screen the voltage-time series according to the current window range and the data display interval;

[0029] A real-time waveform rendering module, configured to draw a smooth electrocardiogram waveform curve according to the screened voltage-time series and an anti-aliasing algorithm;

[0030] And superimpose grid lines, scale labels and a heart rate parameter panel on the electrocardiogram waveform curve to obtain a complete electrocardiogram waveform diagram.

[0031] Compared with the prior art, the present application has at least the following beneficial effects:

[0032] The present application provides an electrocardiogram waveform drawing method based on a Web browser. By creating a Canvas context and an off-screen buffer in the Web browser in advance, receiving the electrocardiogram data compressed by the server in time window shards through a Web Worker thread; decompressing the compressed electrocardiogram data into a voltage-time series by using a pre-loaded decompression library; screening the voltage-time series according to the current window range and the data display interval; drawing a smooth electrocardiogram waveform curve according to the screened voltage-time series and an anti-aliasing algorithm; superimposing grid lines, scale labels and a heart rate parameter panel on the electrocardiogram waveform curve to obtain a complete electrocardiogram waveform diagram. The present application realizes the real-time drawing of electrocardiogram data in a Web browser, enables the electrocardiogram waveform processing to no longer depend on local software, has good data compatibility, and supports the smooth display of waveforms of high-sampling-rate data. Description of the Drawings

[0033] To more intuitively illustrate the prior art and the present application, exemplary drawings are given below. It should be understood that the specific shapes and structures shown in the drawings generally should not be regarded as limiting conditions when implementing the present application; for example, those skilled in the art are capable of making conventional adjustments or further optimizations to the addition / deletion / attribution division of certain units (components), specific shapes, positional relationships, connection methods, dimensional proportional relationships, etc. based on the technical concept disclosed in the present application and the exemplary drawings.

[0034] Figure 1 It is a flowchart of an electrocardiogram waveform drawing method based on a Web browser provided in Embodiment 1 of the present application. Detailed Embodiments

[0035] The present application will be further described in detail below with reference to the accompanying drawings and through specific embodiments.

[0036] In the description of the present application: Unless otherwise specified, the meaning of "a plurality" is two or more. Terms such as "first", "second", "third", etc. in the present application are intended to distinguish the objects being referred to, and do not have special significance in terms of technical connotations (for example, they should not be understood as emphasizing importance or order, etc.). Expressions such as "including", "comprising", "having", etc. also mean "not limited to" (certain units, components, materials, steps, etc.).

[0037] Terms such as "upper", "lower", "left", "right", "middle", etc. cited in the present application are usually indications of the general relative position relationship for the convenience of intuitively understanding with reference to the accompanying drawings, and are not absolute limitations on the position relationship in the actual product.

[0038] Embodiment 1

[0039] An electrocardiogram waveform drawing method based on a Web browser provided in this embodiment needs to pre-detect the drawing API supported by the browser, create a Canvas context and an off-screen buffer in the Web browser, so as to provide a necessary drawing environment for subsequent waveform rendering, and optimize the rendering performance through the off-screen buffer. If it is detected that the browser does not support the HTML5 Canvas API, the user will be prompted to upgrade the browser or use other compatible devices.

[0040] Please refer to Figure 1 , an electrocardiogram waveform drawing method based on a Web browser provided in this embodiment includes:

[0041] S1: Receive the electrocardiogram data compressed by the server in time window slices through a Web Worker thread;

[0042] Specifically, the data acquisition end (i.e., the electrocardiogram device) transmits the collected original electrocardiogram signal to the gateway through Bluetooth or WiFi, and sends it to the server end through the gateway. The server performs preprocessing such as baseline correction, power frequency filtering, and noise suppression on the original electrocardiogram signal, and transmits the preprocessed electrocardiogram signal to the browser end in real time after compressing it in time window slices.

[0043] When the server slices and compresses electrocardiogram (ECG) data by time window, it uses the Zstandard compression algorithm. Specifically, the server divides the preprocessed ECG data into data blocks according to a 500-ms time window, and each data block contains 1250 sampling points (based on a sampling rate of 250 Hz). During compression, the dictionary compression mode of Zstandard is adopted. By pre-training a compression dictionary containing typical ECG waveform features, the entropy value of repetitive patterns can be effectively reduced, thus significantly improving the compression efficiency. In this embodiment, the Zstandard algorithm is used to increase the compression rate of the original data to 80%, effectively reducing the network transmission load.

[0044] When the server slices and compresses ECG data by time window, it uses multi-threaded compression. Specifically, the zstd-worker-pool module is enabled in the Node.js service layer, and the compression level is set to 3 (balancing speed and compression rate). The compression time for a single data block is <5 ms.

[0045] The server binary packages the compressed ECG data, and the compressed data stream adopts a custom packaging format: [4-byte length header][zstd compressed body][2-byte CRC check code]. This packaging method supports the browser side to quickly verify the integrity of the data.

[0046] When the browser receives ECG data, it is received through a Web Worker thread. A Web Worker thread is a technology used for multi-threaded programming in web development. It allows the creation of a background thread that runs independently of the main thread (usually the UI thread) in the browser environment to execute time-consuming tasks, thus preventing the main thread from being blocked and ensuring the responsiveness and smoothness of the web page.

[0047] S2: Use the pre-loaded decompression library to decompress the compressed ECG data into a voltage-time series;

[0048] Specifically, in the browser initialization stage of this embodiment, the Zstandard decompression library (zstd-dec.wasm) compiled into the WebAssembly (WASM) format will be loaded. Compared with the pure JavaScript implementation, using WebAssembly can significantly improve the decompression speed, up to 4 times faster.

[0049] WebAssembly is an efficient, low-level bytecode format that can run in the browser. It allows developers to compile code written in languages such as C, C++, and Rust into the WASM format, and then run it in the browser at a speed close to native code.

[0050] Zstandard is an efficient compression algorithm, characterized by a high compression ratio and fast decompression. zstd-dec.wasm is the file obtained by compiling the Zstandard decompression library from C or C++ into the WebAssembly format. In this way, the Zstandard decompression algorithm can be efficiently run in the browser.

[0051] This embodiment adopts the streaming decompression technology. By using the TransformStream API to establish a decompression pipeline, it can decompress the received binary data stream in real time and convert it into a voltage-time series in the Float32Array format, with the latency of the entire process being less than 10 milliseconds.

[0052] This embodiment develops a general parser based on JavaScript, which supports the parsing of ECG data in formats such as DICOM and HL7, can be compatible with multiple formats, and the parsing error rate is <0.1%.

[0053] S3: Filter the voltage-time series according to the current window range and the data display interval;

[0054] Specifically, since ECG data is usually a time series containing a large number of data points. To efficiently process and display this data, this embodiment needs to filter out the data points to be plotted according to the range of the current window (i.e., the area that the user can currently see). By only processing and plotting the data within the current window range, the computational and rendering burdens can be significantly reduced, improving performance. And when the user zooms or scrolls the window, the visible data interval can be dynamically adjusted according to the new window range to ensure that the display of the waveform is always optimal.

[0055] S4: Draw a smooth ECG waveform curve according to the filtered voltage-time series and the anti-aliasing algorithm;

[0056] Specifically, the anti-aliasing algorithm uses the cubic Bezier curve interpolation algorithm. The cubic Bezier curve interpolation algorithm is a mathematical method for generating smooth curves. It defines the shape of the curve through four control points. This algorithm is widely used in computer graphics and animation because it can produce smooth and visually appealing curves. In the drawing of ECG waveforms, the cubic Bezier curve interpolation algorithm can be used to smoothly connect data points, reduce the aliasing effect, and improve the visual quality of the waveform.

[0057] For example:

[0058] ctx.bezierCurveTo(

[0059] x0 + 0.3 * dx, y0 + 0.2 * dy,

[0060] x1 - 0.3*dx, y1 - 0.2*dy,

[0061] x1, y1 )

[0063] In this embodiment, the Canvas adopts a double-buffering mechanism to create a main Canvas view and an off-screen Canvas buffer. The rendering thread first performs drawing operations on the off-screen Canvas, and then achieves 60fps frame synchronization through requestAnimationFrame, which can achieve high-performance drawing of the Canvas. This embodiment uses HTML5 Canvas to implement basic waveform drawing, which can ensure a smoothness of 60 frames per second.

[0064] This embodiment can also perform adaptive sampling, that is, it can dynamically adjust the data sampling interval according to the browser window size and device performance to balance the rendering quality and performance. The code example of the adaptive sampling algorithm is as follows:

[0065] function dynamicSampling(data, viewWidth) {

[0066] const maxSamples = viewWidth * devicePixelRatio * 2; / / Up to 2 points per pixel

[0067] if (data.length > maxSamples) {

[0068] return decimate(data, maxSamples); / / Adopt the LTTB downsampling algorithm

[0069] }

[0070] return data;

[0071] }

[0072] S5: Superimpose grid lines, scale labels, and a heart rate parameter panel on the electrocardiogram waveform curve to obtain a complete electrocardiogram waveform diagram.

[0073] Specifically, the grid lines are horizontal and vertical lines drawn on the chart background to help users read the coordinates of data points more accurately; the scale labels are texts marked on the coordinate axes to indicate specific numerical values or time points; the heart rate parameter panel is an area that displays the heart rate and other relevant parameters, usually located in a corner or beside the chart. In this embodiment, by superimposing grid lines, scale labels, and a heart rate parameter panel on the electrocardiogram waveform curve, the chart can be made more readable and usable.

[0074] A method for drawing electrocardiogram waveforms based on a Web browser provided in this embodiment further includes: uniformly processing mouse and touch events through the PointerEvents API. The Pointer Events API is a modern Web standard for handling events of various input devices (such as mice, touchscreens, touchpads, and digital pens, etc.). It simplifies the code complexity for developers when dealing with different input devices by providing a unified event model, improving the maintainability and scalability of the code.

[0075] For example: The user performs a zoom operation through the touchscreen to view waveform details within different time ranges. To ensure the accuracy and responsiveness of touch operations, this embodiment dynamically adjusts the sensitivity of touch recognition according to the zoom level of the current waveform. The sensitivity is usually controlled by the touch recognition threshold. The lower the threshold, the more sensitive the touch operation; the higher the threshold, the less sensitive the touch operation. By dynamically adjusting the sensitivity of touch recognition, it can better adapt to the operation requirements of users at different zoom levels, improve the accuracy and responsiveness of interaction, and thus significantly enhance the user experience.

[0076] The code can be: const sensitivity = baseSensitivity * Math.log2(zoomLevel).

[0077] For example: Inertial scroll simulation: After releasing the touchscreen drag, calculate the decay motion trajectory based on the release speed. The code can be:

[0078] function inertialScroll(velocity) {

[0079] let pos = 0;

[0080] const decay = 0.95;

[0081] while(Math.abs(velocity) > 0.5) {

[0082] pos += velocity;

[0083] velocity *= decay;

[0084] }

[0085] return pos;

[0086] }

[0087] By recording the coordinates and timestamps of the user's drag, calculating the speed at the time of release, and using a decay function to simulate the trajectory of the content continuing to scroll, the user experience can be significantly improved, making the scrolling operation more natural and smooth.

[0088] A method for electrocardiogram waveform drawing based on a web browser provided in this embodiment further includes: based on the mapping relationship between screen coordinates and data sampling rate, calculating and displaying measurement results in real time, specifically including:

[0089] S101: Coordinate conversion engine, that is, establishing a two-way mapping between screen coordinates and physical quantity values;

[0090] For example:

[0091] voltage = (canvasHeight / 2 - screenY) * (scaleUV / mmPerPixel);

[0092] time = (screenX - xOffset) / (samplesPerPixel * samplingInterval).

[0093] S102: Feature point detection, that is, enabling a real-time QRS detection algorithm in the measurement mode, adopting an improved Pan-Tompkins algorithm, and performing parallel calculations in a Web Worker.

[0094] A method for electrocardiogram waveform drawing based on a web browser provided in this embodiment further includes: multi-lead synchronous rendering, that is, creating an independent Canvas layer for each lead, and synthesizing the final view through context.drawImage(). When switching leads, only the layer visibility needs to be switched. The multi-lead switching can be achieved by a one-key switch of a 12-lead view through a front-end interface control, and custom lead combinations are supported.

[0095] GPU acceleration can be triggered during synchronous rendering, that is, enabling ctx.imageSmoothingEnabled = true for the waveform path to trigger browser GPU hardware acceleration.

[0096] A method for electrocardiogram waveform drawing based on a web browser provided in this embodiment can also perform state persistence, that is, the user operation preferences (such as zoom ratio, channel layout) are automatically saved to the browser local storage. The parsed electrocardiogram data is associated and stored with the interaction records in a cloud database, supporting historical data traceability within 10 years.

[0097] A method for electrocardiogram waveform drawing based on a web browser provided in this embodiment has the following advantages:

[0098] I. Improvement in technical performance

[0099] (1) Data compression ratio: The Zstandard compression algorithm reduces the amount of transmitted data by 80%, significantly reducing the data volume and adapting to low-bandwidth environments;

[0100] (2) Compatibility: Supports the parsing of multiple types of electrocardiogram formats, and the parsing error rate is <0.1%.

[0101] II. Clinical application value

[0102] (1) Diagnostic efficiency: The interactive function shortens the writing time of a single report from 15 minutes to 9 minutes (a 40% reduction);

[0103] (2) Resource coverage: Low-configuration devices can run smoothly, increasing the penetration rate in primary hospitals.

[0104] III. User feedback

[0105] (1) Doctor evaluation: 90% of the doctors using it believe that the lead error correction and re-analysis functions significantly improve the diagnostic convenience;

[0106] (2) Patient experience: The electrocardiogram analysis time is shortened from 20 minutes to 5 minutes, enhancing the applicability in emergency scenarios.

[0107] A method for electrocardiogram waveform drawing based on a Web browser provided in this embodiment realizes the real-time drawing of electrocardiogram data in a Web browser, supports the smooth display of high-sampling-rate data; provides multi-dimensional interactive functions (such as lead error correction, re-analysis, waveform comparison, etc.), improving the doctor's diagnostic efficiency; constructs a multi-format compatible parsing engine, seamlessly integrating medical data standards such as DICOM and HL7; through cloud collaboration and encryption mechanisms, ensures data security and cross-terminal collaboration capabilities; optimizes resource occupancy, enabling low-performance devices to run smoothly.

[0108] A method for electrocardiogram waveform drawing based on a Web browser provided in this embodiment is applicable to scenarios such as remote electrocardiogram, electrocardiogram monitoring, and physical examination management platforms, and can realize high-precision and low-latency electrocardiogram waveform visualization and interactive operations through a browser without installing plugins or clients.

[0109] Embodiment 2

[0110] This embodiment provides an electrocardiogram waveform drawing device based on a Web browser, which pre-creates a Canvas context and an off-screen buffer in the Web browser. The device includes:

[0111] A data receiving module, configured to receive electrocardiogram data compressed by the server in time window slices through a Web Worker thread;

[0112] A data decompression module, configured to decompress the compressed electrocardiogram data into a voltage-time series by using a pre-loaded decompression library;

[0113] A data screening module, configured to screen the voltage-time series according to the current window range and the data display interval;

[0114] A real-time waveform rendering module, configured to draw a smooth electrocardiogram waveform curve according to the screened voltage-time series and an anti-aliasing algorithm;

[0115] And overlay grid lines, scale labels and a heart rate parameter panel on the electrocardiogram waveform curve to obtain a complete electrocardiogram waveform diagram.

[0116] For the specific implementation content of each module in an electrocardiogram waveform drawing device based on a web browser, reference may be made to the definition of an electrocardiogram waveform drawing method based on a web browser in the foregoing text, which will not be elaborated herein.

[0117] The technical features of the above embodiments can be combined arbitrarily (as long as there is no contradiction in the combination of these technical features). For the sake of brief description, not all possible combinations of the technical features in the above embodiments are described; these embodiments not explicitly written out should also be considered to be within the scope described in this specification.

Claims

1. A method for drawing an electrocardiogram waveform based on a Web browser, characterized in that: Pre-creating a Canvas context and an off-screen buffer in a Web browser, the method comprising: Receive ECG data compressed by time window from the server through Web Worker thread; Decompress the compressed ECG data into voltage-time series using the pre-loaded decompression library; Filter voltage-time series according to the current window range and data display interval; Draw a smooth ECG waveform curve based on the filtered voltage-time series and anti-aliasing algorithm; Overlay grid lines, scale labels and heart rate parameter panel on the ECG waveform to obtain a complete ECG waveform.

2. The method for drawing ECG waveform based on a Web browser according to claim 1, characterized in that: Also includes: Use the Pointer Events API to handle mouse and touch events.

3. The method for drawing ECG waveform based on a Web browser according to claim 1, characterized in that: Also includes: Based on the mapping relationship between screen coordinates and data sampling rate, the measurement results are calculated and displayed in real time.

4. The method for drawing ECG waveform based on a Web browser according to claim 1, characterized in that: The ECG data is encapsulated in binary format, and the encapsulation format is: [4-byte length header][zstd compressed body][2-byte CRC check code].

5. The method for drawing ECG waveform based on a Web browser according to claim 1, characterized in that: The server uses the Zstandard compression algorithm when compressing the ECG data in time window segments.

6. The method for drawing ECG waveform based on a Web browser according to claim 5, characterized in that: When decompressing the compressed ECG data into a voltage-time series using a pre-loaded decompression library, a Zstandard decompression library compiled into a WebAssembly format is used.

7. The method for drawing ECG waveform based on a Web browser according to claim 1, characterized in that: The anti-aliasing algorithm adopts a cubic Bezier curve interpolation algorithm.

8. The method for drawing ECG waveform based on a Web browser according to claim 1, characterized in that: Also includes: Create separate Canvas layers for each lead and composite the final view.

9. The method for drawing ECG waveform based on a Web browser according to claim 1, characterized in that: Also includes: Dynamically adjust the data sampling interval according to the Web browser window size and device performance.

10. An electrocardiogram waveform drawing device based on a Web browser, characterized in that: A Canvas context and an off-screen buffer are created in advance in a Web browser, the device comprising: A data receiving module is used to receive ECG data compressed by time window slices from a server through a Web Worker thread; A data decompression module, used to decompress the compressed ECG data into a voltage-time series using a pre-loaded decompression library; Data filtering module, used to filter voltage-time series according to the current window range and data display interval; Real-time waveform rendering module, used to draw smooth ECG waveform curves based on the filtered voltage-time series and anti-aliasing algorithm; And superimpose grid lines, scale labels and heart rate parameter panels on the ECG waveform curve to obtain a complete ECG waveform graph.

Images