SCADA Web HMI Parallel Threading for Low-Latency DOM Updates
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
The existing browser-based SCADA HMI subsystems face delays in data display when receiving large amounts of signal data, exceeding the display performance of the HMI client, due to slower rendering processing and potential buffer overflow issues.
Innovation Solution
The SCADA web HMI system employs a parallel execution of communication and DOM update threads within the HMI client, where signal data is buffered and updated only when necessary, preventing buffer overflow and ensuring timely rendering processing by inhibiting continuous DOM updates until previous processing is complete.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Productivity
If continuous DOM update processing is executed to process large amount of signal data, then data processing completeness is improved, but rendering processing timing is lost and display delay occurs
Solution Approach 1:
The patent implements periodic action by using requestAnimationFrame to trigger rendering at optimal browser refresh intervals rather than continuous rendering. The DOM update thread processes data continuously but the rendering is synchronized to periodic browser refresh cycles, preventing timing loss while maintaining processing completeness.
Solution Approach 2:
The patent applies preliminary action by pre-processing signal data in the DOM update thread before rendering is triggered. Data is prepared and buffered in advance, so when the browser is ready to render (at the next animation frame), the processing is already complete and can be displayed immediately without delay.
2Ease of operation
If web browser rendering processing is used to display signal data, then ease of operation and cross-platform compatibility are improved, but rendering speed is slower compared to native display processing
Solution Approach 1:
The patent applies dynamics by making the rendering system adaptive - it uses requestAnimationFrame to dynamically adjust rendering timing based on browser performance and tab visibility. The system monitors whether the browser tab is active and adjusts rendering frequency accordingly, optimizing speed while maintaining compatibility.
Solution Approach 2:
The patent uses requestAnimationFrame as an intermediary mechanism between the DOM update thread and the rendering system. This mediator synchronizes data updates with browser refresh cycles, allowing the web browser to maintain its cross-platform compatibility while achieving near-native rendering speeds through optimized timing.
3Reliability
If signal data is transmitted at high frequency for real-time monitoring, then real-time property is improved, but buffer overflow and processing delays occur when data volume exceeds display performance
Solution Approach 1:
The patent extracts the buffer management complexity from the main processing flow by using a separate DOM update thread dedicated to data buffering and preparation. This thread continuously receives high-frequency signal data and prepares it for rendering, separating the real-time data acquisition from the rendering process and preventing buffer overflow.
Solution Approach 2:
The patent implements feedback through the requestAnimationFrame callback mechanism, which provides continuous feedback about browser rendering readiness. The system adjusts data transmission and processing based on this feedback, ensuring real-time property is maintained while preventing buffer overflow by slowing down data intake when the browser is not ready to render.
Data Source
AI summary
A web browser (5) makes a communication thread (7) and a DOM update thread (6) run in parallel. The communication thread (7) overwrites, when signal data having the same unique identifier as received signal data already exists in a buffer area, the signal data stored in the buffer area with the received signal data. When receiving a signal data request event from the DOM update thread (6), the communication thread (7) transmits all signal data stored in the buffer area to the DOM update thread (6). The DOM update thread (6) updates a DOM for all the signal data. The DOM update thread (6) transmits, after updating the DOM, the signal data request event to the communication thread and updates, according to the updated DOM, a display content of a display part displayed on the web browser (5).