Method, device, processor and computer readable storage medium for implementing real-time display of multiple spectrum traces and frequency markers based on web

Abstract

The present application relates to a kind of method for realizing real-time display of multiple spectrum traces and frequency mark based on Web, comprising the following steps: Web page calculates maximum drawing point number, central server parses Restful data acquisition request, and generates equipment control instruction;Central server analyzes, statistics, extracts, encapsulates and sends spectrum data, Web page analyzes spectrum data, calculates frequency mark and draws track and frequency mark;Web page sets stop flag;Central server stops and issues stop equipment instruction.The present application also relates to a kind of device for realizing real-time display of multiple spectrum traces and frequency mark based on Web, processor and its storage medium.The method for realizing real-time display of multiple spectrum traces and frequency mark based on Web, device, processor and its computer readable storage medium of the present application are not dependent on client and plug-in installation, realize multiple spectrum traces and frequency mark real-time dynamic update display on browser, can long time stable operation, support multiple users based on Internet data sharing viewing.

Description

Technical Field

[0001] This invention relates to the field of radio monitoring and analysis, and more particularly to the field of spectrum plotting. Specifically, it refers to a method, apparatus, processor, and computer-readable storage medium for real-time display of multiple spectrum traces and frequency marks based on the Web. Background Technology

[0002] Since web pages run in a browser, which is a single-threaded mode, the conventional multi-threaded mode based on C and Java is not suitable for this scenario.

[0003] Conventional spectrum monitoring is a client-server (CS) application mode, which is not suitable for browser-based browser (BS) mode. For example, it does not require installing client software on the machine where the browser is located, nor does it require installing plugins; it can run directly in the browser.

[0004] Browser resources are limited, with significant restrictions on CPU and memory usage. For example, a webpage exceeding 200MB of memory usage can easily cause it to crash. In practical applications, it needs to support drawing four traces and eight frequency standards. The traces need to support different statistical types, such as maximum, minimum, average, and real-time. The statistical types of the traces should be able to switch dynamically, and some traces should remain static while others are refreshed, with their data not updated. Summary of the Invention

[0005] The purpose of this invention is to overcome the shortcomings of the prior art and provide a method, apparatus, processor and computer-readable storage medium for real-time display of multiple spectral traces and frequency labels based on the Web, which meets the requirements of high observation accuracy, real-time updates and wide application range.

[0006] To achieve the above objectives, the present invention provides a method, apparatus, processor, and computer-readable storage medium for real-time display of multiple spectrum traces and frequency labels based on a Web interface, as follows:

[0007] The main feature of this web-based method for real-time display of multiple spectrum traces and frequency labels is that the method includes the following steps:

[0008] (1) Collect spectrum data, calculate the maximum number of drawing points on the Web page, send the channel ID through the Websocket channel, and the central server parses the RESTful data collection request and generates device control instructions;

[0009] (2) The central server parses, counts, extracts, encapsulates and sends the spectrum data, and the web page parses the spectrum data, calculates the frequency standard and draws the trajectory and frequency standard;

[0010] (3) Set a stop flag on the Web page, close the socket channel, and stop drawing; the central server stops sending data to the WebSocket and extracting the current batch data, and issues a stop device command.

[0011] Preferably, step (1) specifically includes the following steps:

[0012] (1.1) Obtain the width of the drawing area from the web page;

[0013] (1.2) Calculate the maximum number of points to be drawn;

[0014] (1.3) Establish a WebSocket channel with the central server;

[0015] (1.4) The central server sends the channel ID generated by the central server to the web page through the WebSocket channel;

[0016] (1.5) Generate batch processing tokens on the web page and send RESTful data collection requests to the central server;

[0017] (1.6) The central server parses the RESTful data collection request into a web page data definition;

[0018] (1.7) The central server generates and issues device control commands.

[0019] Preferably, the calculation of the maximum number of drawing points in step (1.2) is specifically as follows:

[0020] The maximum number of points to draw is calculated using the following formula:

[0021] wlimit = INT(drawing area pixel width × 2);

[0022] points = Round(k × (freqEnd - freqStart) / device spectral resolution);

[0023] LimitFrame=Min(wlimit, points);

[0024] Where wlimit is the maximum number of points to be drawn, points is the number of spectrum points to be drawn, LimitFrame is the maximum number of points to be drawn, k is the mobile network bandwidth coefficient, freqEnd is the drawing cutoff frequency, and freqStart is the drawing start frequency.

[0025] Preferably, step (1) further includes the following steps:

[0026] (1-1.1) The central server returns the task ID to the web page;

[0027] (1-1.2) Web page temporary storage task ID and Web page data definition;

[0028] (1-1.3) Update the data timestamp of the stored data when the web page receives data, and monitor the changes in the data timestamp;

[0029] (1-1.4) If the data timestamp changes, a drawing operation is triggered.

[0030] Preferably, step (2) specifically includes the following steps:

[0031] (2.1) The central server receives the spectrum data stream;

[0032] (2.2) The central server parses the spectrum data, splices and unifies the segmented spectrum data.

[0033] (2.3) The central server compiles spectrum data based on the data type set defined in the Web page data definition;

[0034] (2.4) The central server extracts spectrum data from the statistical spectrum object and the unified real-time spectrum object according to the frequency range to be drawn, and compresses the data according to the maximum number of drawing points;

[0035] (2.5) The central server encapsulates each data type and sends them sequentially;

[0036] (2.6) The central server establishes a sending thread based on the data type, sends spectrum data to the Web page, and performs frame rate control on the data at the same time;

[0037] (2.7) The central server receives the received frame rate from the Web page via WebSocket, performs network quality assessment, and determines the sending frame rate based on the network quality assessment results;

[0038] (2.8) The web page receives flow control data, verifies it according to the batch processing token, records the corresponding receiving timestamp, counts the receiving frame rate, and sends it to the central server via WebSocket;

[0039] (2.9) Parsing spectrum data from web pages;

[0040] (2.10) Determine the validity of the data;

[0041] (2.11) Convert the spectrum data into data in the unit selected by the user;

[0042] (2.12) Calculate the x-pixel coordinates and y-pixel coordinates of the trace to be drawn;

[0043] (2.13) Set the color according to the data type or trace number, and draw the trace;

[0044] (2.14) Draw the frequency standard.

[0045] Preferably, step (2.2) specifically includes:

[0046] Obtain a fixed-length int spectrum array corresponding to the task ID plus the device ID. If subsequent spectrum data is received, update the data segment corresponding to the subsequent spectrum array.

[0047] Preferably, step (2.3) specifically includes:

[0048] (2.3.1) Save the data to a HashMap collection using a two-level key-value pair method;

[0049] (2.3.2) If the central server receives data collection instructions and data operation instructions from the Web page, it will count the reference counts of each data type code of the current task according to the Web page data definition stored by the central server;

[0050] (2.3.3) Stop counting the reference count of the type code when the reference count of the type code is 0.

[0051] Preferably, step (2.4) specifically includes the following steps:

[0052] (2.4.1) Process the already truncated data during data compression;

[0053] (2.4.2) If the length of the truncated data is less than or equal to the maximum number of drawing points, the compression process is skipped; otherwise, the truncated data is segmented according to the maximum number of drawing points, and the data within the segment is projected to obtain the compressed data.

[0054] Preferably, step (3) specifically includes the following steps:

[0055] (3.1) Set a stop flag on the web page and send an instruction to the central server to perform resource release operations;

[0056] (3.2) The Web page closes the socket channel, stops drawing, clears the cache, and resets the control variables; the central server stops sending data to the WebSocket, removes the WebSocket from the channel list, stops extracting the current batch data, and issues a stop device command.

[0057] The device for realizing real-time display of multiple spectrum traces and frequency marks based on the Web is characterized in that the device includes:

[0058] A processor is configured to execute computer-executable instructions;

[0059] The memory stores one or more computer-executable instructions, which, when executed by the processor, implement the steps of the above-described method for real-time display of multiple spectrum traces and frequency labels based on the Web.

[0060] The processor used to implement real-time display of multiple spectrum traces and frequency marks based on the Web is characterized in that the processor is configured to execute computer-executable instructions, which, when executed by the processor, implement the various steps of the above-mentioned method for real-time display of multiple spectrum traces and frequency marks based on the Web.

[0061] The main feature of this computer-readable storage medium is that it stores a computer program thereon, which can be executed by a processor to implement the various steps of the above-described method for real-time display of multiple spectral traces and frequency labels based on the Web.

[0062] The present invention employs a method, apparatus, processor, and computer-readable storage medium for real-time display of multiple spectrum traces and frequency marks based on the Web. It does not rely on client or plugin installation, and realizes real-time dynamic updating and display of multiple spectrum traces and frequency marks on a browser. It can run stably for a long time, has good adaptability to network environment, and supports multiple users to share and view data via the Internet. Attached Figure Description

[0063] Figure 1 This is a flowchart of the method for real-time display of multiple spectrum traces and frequency labels based on the Web according to the present invention.

[0064] Figure 2 This is a flowchart illustrating the preparation stage of the method for real-time display of multiple spectral traces and frequency labels based on the Web, as described in this invention.

[0065] Figure 3 This is a flowchart illustrating the data display and operation phases of the Web-based method for real-time display of multiple spectrum traces and frequency labels according to the present invention.

[0066] Figure 4 This is a schematic diagram of the data structure of the statistical centralized processing object in the Web-based method for real-time display of multiple spectrum traces and frequency standards according to the present invention.

[0067] Figure 5 This is a projection diagram illustrating the method for real-time display of multiple spectral traces and frequency marks based on the Web according to the present invention.

[0068] Figure 6 This is a schematic diagram of the data extraction format of the method for real-time display of multiple spectrum traces and frequency labels based on the Web according to the present invention.

[0069] Figure 7 This is a schematic diagram of a packaged implementation of the method for real-time display of multiple spectrum traces and frequency labels based on the Web, according to the present invention.

[0070] Figure 8 This is a schematic diagram illustrating the multi-trace effect of the method for real-time display of multiple spectrum traces and frequency labels based on the Web, as presented in this invention.

[0071] Figure 9 This is a schematic diagram illustrating the frequency mark measurement effect of the method for real-time display of multiple spectral traces and frequency marks based on the Web, according to the present invention.

[0072] Figure 10 This is a schematic diagram showing the enlarged view of the method for real-time display of multiple spectrum traces and frequency labels based on the Web, according to the present invention.

[0073] Figure 11 This is a flowchart of the final stage of the Web-based method for real-time display of multiple spectral traces and frequency labels according to the present invention. Detailed Implementation

[0074] To more clearly describe the technical content of the present invention, the following description is provided in conjunction with specific embodiments.

[0075] The present invention provides a method for real-time display of multiple spectrum traces and frequency labels based on the Web, comprising the following steps:

[0076] (1) Collect spectrum data, calculate the maximum number of drawing points on the Web page, send the channel ID through the Websocket channel, and the central server parses the RESTful data collection request and generates device control instructions;

[0077] (2) The central server parses, counts, extracts, encapsulates and sends the spectrum data, and the web page parses the spectrum data, calculates the frequency standard and draws the trajectory and frequency standard;

[0078] (3) Set a stop flag on the Web page, close the socket channel, and stop drawing; the central server stops sending data to the WebSocket and extracting the current batch data, and issues a stop device command.

[0079] In a preferred embodiment of the present invention, step (1) specifically includes the following steps:

[0080] (1.1) Obtain the width of the drawing area from the web page;

[0081] (1.2) Calculate the maximum number of points to be drawn;

[0082] (1.3) Establish a WebSocket channel with the central server;

[0083] (1.4) The central server sends the channel ID generated by the central server to the web page through the WebSocket channel;

[0084] (1.5) Generate batch processing tokens on the web page and send RESTful data collection requests to the central server;

[0085] (1.6) The central server parses the RESTful data collection request into a web page data definition;

[0086] (1.7) The central server generates and issues device control commands.

[0087] In a preferred embodiment of the present invention, the calculation of the maximum number of drawing points in step (1.2) specifically involves:

[0088] The maximum number of points to draw is calculated using the following formula:

[0089] wlimit = INT(drawing area pixel width × 2);

[0090] points = Round(k × (freqEnd - freqStart) / device spectral resolution);

[0091] LimitFrame=Min(wlimit, points);

[0092] Where wlimit is the maximum number of points to be drawn, points is the number of spectrum points to be drawn, LimitFrame is the maximum number of points to be drawn, k is the mobile network bandwidth coefficient, freqEnd is the drawing cutoff frequency, and freqStart is the drawing start frequency.

[0093] In a preferred embodiment of the present invention, step (1) further includes the following steps:

[0094] (1-1.1) The central server returns the task ID to the web page;

[0095] (1-1.2) Web page temporary storage task ID and Web page data definition;

[0096] (1-1.3) Update the data timestamp of the stored data when the web page receives data, and monitor the changes in the data timestamp;

[0097] (1-1.4) If the data timestamp changes, a drawing operation is triggered.

[0098] In a preferred embodiment of the present invention, step (2) specifically includes the following steps:

[0099] (2.1) The central server receives the spectrum data stream;

[0100] (2.2) The central server parses the spectrum data, splices and unifies the segmented spectrum data.

[0101] (2.3) The central server compiles spectrum data based on the data type set defined in the Web page data definition;

[0102] (2.4) The central server extracts spectrum data from the statistical spectrum object and the unified real-time spectrum object according to the frequency range to be drawn, and compresses the data according to the maximum number of drawing points;

[0103] (2.5) The central server encapsulates each data type and sends them sequentially;

[0104] (2.6) The central server establishes a sending thread based on the data type, sends spectrum data to the Web page, and performs frame rate control on the data at the same time;

[0105] (2.7) The central server receives the received frame rate from the Web page via WebSocket, performs network quality assessment, and determines the sending frame rate based on the network quality assessment results;

[0106] (2.8) The web page receives flow control data, verifies it according to the batch processing token, records the corresponding receiving timestamp, counts the receiving frame rate, and sends it to the central server via WebSocket;

[0107] (2.9) Parsing spectrum data from web pages;

[0108] (2.10) Determine the validity of the data;

[0109] (2.11) Convert the spectrum data into data in the unit selected by the user;

[0110] (2.12) Calculate the x-pixel coordinates and y-pixel coordinates of the trace to be drawn;

[0111] (2.13) Set the color according to the data type or trace number, and draw the trace;

[0112] (2.14) Draw the frequency standard.

[0113] In a preferred embodiment of the present invention, step (2.2) specifically comprises:

[0114] Obtain a fixed-length int spectrum array corresponding to the task ID plus the device ID. If subsequent spectrum data is received, update the data segment corresponding to the subsequent spectrum array.

[0115] In a preferred embodiment of the present invention, step (2.3) specifically comprises:

[0116] (2.3.1) Save the data to a HashMap collection using a two-level key-value pair method;

[0117] (2.3.2) If the central server receives data collection instructions and data operation instructions from the Web page, it will count the reference counts of each data type code of the current task according to the Web page data definition stored by the central server;

[0118] (2.3.3) Stop counting the reference count of the type code when the reference count of the type code is 0.

[0119] In a preferred embodiment of the present invention, step (2.4) specifically includes the following steps:

[0120] (2.4.1) Process the already truncated data during data compression;

[0121] (2.4.2) If the length of the truncated data is less than or equal to the maximum number of drawing points, the compression process is skipped; otherwise, the truncated data is segmented according to the maximum number of drawing points, and the data within the segment is projected to obtain the compressed data.

[0122] In a preferred embodiment of the present invention, step (3) specifically includes the following steps:

[0123] (3.1) Set a stop flag on the web page and send an instruction to the central server to perform resource release operations;

[0124] (3.2) The Web page closes the socket channel, stops drawing, clears the cache, and resets the control variables; the central server stops sending data to the WebSocket, removes the WebSocket from the channel list, stops extracting the current batch data, and issues a stop device command.

[0125] The present invention relates to an apparatus for realizing real-time display of multiple spectrum traces and frequency standards based on a web platform, wherein the apparatus comprises:

[0126] A processor is configured to execute computer-executable instructions;

[0127] The memory stores one or more computer-executable instructions, which, when executed by the processor, implement the steps of the above-described method for real-time display of multiple spectrum traces and frequency labels based on the Web.

[0128] The present invention discloses a processor for implementing real-time display of multiple spectrum traces and frequency marks based on the Web, wherein the processor is configured to execute computer-executable instructions, and when the computer-executable instructions are executed by the processor, the various steps of the above-described method for real-time display of multiple spectrum traces and frequency marks based on the Web are implemented.

[0129] The computer-readable storage medium of the present invention stores a computer program thereon, which can be executed by a processor to implement the various steps of the above-described method for real-time display of multiple spectral traces and frequency labels based on the Web.

[0130] The spectrum is drawn using mature HTML5 canvas technology and developed using the Vue framework. Webpacket is used to package and compile the application into a web page using Javascript, HTML5, and CSS, allowing the program to run in a browser or be packaged into an APK installation package for mobile devices. As a web application, it adopts a B / S architecture, with the web page handling display and interaction, and the central service handling data processing. The central service is based on Spring's RESTful service technology and WebSocket technology, and is developed using Java.

[0131] Compared to existing spectrum display technologies, this invention has typical characteristics of internet and mobile internet applications:

[0132] Multi-user: Multiple users can access the same central service simultaneously using different browsers, or access the same central service using an app on multiple mobile devices.

[0133] Data sharing: Multiple users can operate on the same spectrum data, such as amplification of different frequency ranges, without interfering with each other;

[0134] Compatibility: As a pure JavaScript HTML5 application, it can run on any browser that supports HTML5, without requiring additional plugins or ActiveX components. Due to the compatibility of uni-app applications with iOS, Android, and HarmonyOS platforms, the compiled app can run on these platforms.

[0135] In a specific embodiment of the present invention, the key aspect, addressing the limitations of web mobile applications, is the adaptive processing of spectrum data content. The data processing involves two parts: a central service and a browser web page, and is divided into three stages:

[0136] I. Preparation Phase:

[0137] This phase begins with the user and continues until the spectrum data arrives at the central service center from the acquisition device. The specific process is as follows: Figure 2 As shown.

[0138] Since the actual range of spectrum acquisition is determined by the acquisition equipment—for example, from 1kHz to 30GHz with a spectral resolution of 1kHz—if each 1kHz point is used for display, the total number of points to be displayed across the entire frequency band would be 30M points, far exceeding the pixel width of the user's screen. Furthermore, the amount of data transmitted is enormous. While traditional spectrum display technologies, using computer internal buses or gigabit networks, can directly transmit data to client software for processing and display, the limitation of mobile internet bandwidth (only 3–150 Mbps) presents a significant challenge. Simultaneously, it must meet the requirements of multi-user operation, data sharing, and independent operation. Therefore, the overall approach for displaying via a webpage is to transmit only the necessary data to the webpage; this stage defines the data requirements for the webpage.

[0139] Web page data is defined as follows:

[0140]

[0141] The mobile network bandwidth coefficient k is as follows:

[0142] Network bandwidth coefficient illustrate >400Mbps 1 Gigabit LAN environment >100Mbps 0.5 100 Mbps LAN environment >20Mbps 0.25 4G mobile network environment <=20Mbps 0.1 Low-speed network environment

[0143] Maximum number of points to draw:

[0144] wlimit = INT(drawing area pixel width × 2);

[0145] Note: The value of 2 is chosen to align with the extraction algorithm of the central service. To avoid data distortion after extraction, the web page will draw two points, one high and one low, on the same pixel. The spectrum index starts from 0, with even numbers representing low points and odd numbers representing high points.

[0146] Number of points for spectrum plotting:

[0147] points = Round(k × (freqEnd - freqStart) / device spectral resolution);

[0148] The formula for calculating the maximum number of points to be drawn is as follows:

[0149] LimitFrame=Min(wlimit, points);

[0150] If LimitFrame × 0.5 is an even number, then LimitFrame = LimitFrame + 2.

[0151] In this invention, the spectral coordinate plotting starts from the starting frequency and ends at the ending frequency, dividing the display area into fixed equal parts of 2, 4, and 10, with coordinate axes labeled. To avoid errors in frequency standard measurement and plotting, the number of plotted frequency points must be odd. The number of equal parts is determined by the plotting frequency range.

[0152] The number of equal parts n = Round (plot frequency range / device spectral resolution);

[0153] Finally, take the smallest value among 2, 4, and 10, which are greater than n.

[0154] This invention employs JSON-based RESTful service requests to transmit extensible command parameters composed of JSON strings. It uses RESTful service semantics to define operations; for example, POST is used to initiate spectrum data acquisition commands during the preparation phase, and PUT is used to adjust observation parameters during data display and operation phases. Traditional spectrum display methods, such as TCP / IP data streams, shared memory, or API calls, are not accessible through web pages. Furthermore, RESTful service requests use short connections, significantly reducing the pressure and resource consumption of the central server. However, RESTful service requests cannot transmit data for extended periods; therefore, WebSocket technology is used for long-term, large-volume data transmission. The WebSocket channel is established at the start of measurement and closed at the end to minimize resource consumption on the server and web page. Since WebSocket establishment takes 100-200ms, slower than RESTful requests, to improve response efficiency, a WebSocket channel is established before sending the RESTful request. The central service then sends a channel ID generated by the central service through the WebSocket channel. This ensures the uniqueness of the channel ID on the central service and allows the web page to confirm that the central service is ready.

[0155] In this invention, the main functions of the WebSocket channel are:

[0156] Used to receive assembled spectrum data; confirm online status with the central service; coordinate with the central service to confirm real-time network speed; and provide asynchronous service response data, including confirmation of anomalies and task execution.

[0157] Because the Spring framework provides comprehensive support for RESTful service requests and can also perform logging and access control based on AOP technology, this invention does not use WebSocket channels for command transmission. Compared with the traditional TCP / IP mode, this avoids the delay in command issuance caused by transmitting large amounts of data through the data channel, thus improving system reliability and response speed.

[0158] After receiving a RESTful data collection request, the central service parses it into a web page data definition and returns a task ID to the web page. This task ID is a UUID and is used for subsequent operations. The central service uses the task ID to identify and manage the received web page data definitions.

[0159] The web page uses VueX to temporarily store task IDs and web page data definitions. Utilizing VueX and its provided `watch` and `computed` methods, the web page can coordinate the synchronization of responses between components such as coordinate axes, spectral line plots, frequency scale plots, and parameter operation button controls. VueX avoids browser restrictions on cookies and solves the limitation of not being able to use the file system for temporary parameter storage during web page operations. Compared to some spectrum rendering techniques that send operation parameters back to a server-side database for storage, using VueX improves web page response speed and simplifies server-side design and implementation. When the web page receives data, it updates the data timestamp stored in the VueX state, and then uses Vue's `watch` to monitor changes in the data timestamp. When the data timestamp changes, the rendering operation is triggered, which is one of the keys to the web page's ability to dynamically display the spectrum.

[0160] When the webpage is refreshed or reopened, the user can select a task from the list of currently running tasks, obtain the corresponding task ID, and then retrieve the webpage data definition from the central service based on the task ID. Subsequent processes follow the same procedure. This fulfills the requirement that the shared data viewing operation on the webpage does not affect the acquisition and storage of spectrum data after it is closed, and that observation can continue.

[0161] II. Data Display and Operation:

[0162] This phase begins when the central service receives the collected raw spectrum data and ends before the user issues a stop command. It is used for processing spectrum data display and interactive operations, and the main process is as follows: Figure 3 As shown.

[0163] Central server:

[0164] Received spectrum data stream: determined by the communication protocol of the connected devices.

[0165] Parsing spectrum data: The purpose is to process the spectrum from different devices into a unified data format for easier subsequent processing. For segmented spectrum data, this process also involves stitching together the data. The resulting spectrum data format after this stage is as follows:

[0166] The table for the unified real-time spectrum object is as follows:

[0167]

[0168]

[0169] To improve processing efficiency and conserve memory, a fixed-length integer spectrum array is assigned to each task ID and device ID. Subsequent arrival of spectrum data simply updates the corresponding data segment in the spectrum array. The spectrum unit is uniformly set to dBm, simplifying server-side processing and improving transmission efficiency. The conversion is handled by the web interface based on the user-selected unit, reducing latency caused by front-end and back-end command interactions and enhancing the user experience.

[0170] The spectrum array is allocated memory upon receiving the first frame of data for this task, calculated according to the following formula:

[0171] Array length = (spectral cutoff frequency - spectral start frequency) / device spectral resolution.

[0172] When the task ends, release all spectrum arrays corresponding to the task ID from memory.

[0173] Statistical spectrum data: Statistics are performed based on the data type set defined in the web page data definition. This process yields statistical spectrum data in the following format:

[0174] The table of statistical spectrum objects is as follows:

[0175] Fields illustrate Data Identifier TaskId_DeviceId_DataTypeCode Spectrum array int[], unit: 0.1dBm, invalid elements are filled with -9999.

[0176] The array length is the same as the spectrum array length in the unified real-time spectrum object. Statistical processing is skipped when the data is -9999.

[0177] To ensure the accuracy of data scaling operations and the independence of the operation sequence, this process must be completed before the spectral data extraction operation.

[0178] As a mobile internet application, it supports multiple users sharing and viewing the same spectrum data. However, different users may operate on different frequency bands and statistical types. Processing each user separately would easily lead to excessive overhead of centralized service resources. Therefore, this invention adopts a centralized statistical processing approach, followed by extraction based on the user's operating frequency band.

[0179] The data structure of the statistical centralized processing objects is as follows: Figure 4 As shown.

[0180] A two-level key-value pair approach is used to store data in a HashMap collection. The first-level key is the task ID, and the second-level key is the data type code. When the central service receives data collection or manipulation instructions from a webpage, it calculates the reference count of each data type code for the current task based on the webpage data definition stored by the central service. When the reference count of a data type code reaches 0, the counting of that data type code stops, and it is removed from the HashMap collection of statistical processing objects. Simultaneously, the corresponding statistical spectrum object is also removed from the statistical spectrum object collection. This aims to reduce resource usage.

[0181] Extracting spectrum data: This process involves statistically analyzing data defined in the web page, extracting spectrum data from the statistical spectrum object and the unified real-time spectrum object based on the corresponding Socket channel ID and the frequency range to be drawn, and compressing the data according to the maximum number of drawing points.

[0182] Start position for truncation = (starting frequency for plotting - starting frequency for spectrum) / device spectrum resolution;

[0183] Cutoff point = (Cutoff frequency - Start frequency of spectrum) / Device spectrum resolution.

[0184] The data compression process processes the truncated data. If the length of the truncated data is less than or equal to the maximum number of plotted points, the compression process is skipped, and the transmitted data is lossless amplified, accurate spectral data. Data compression involves segmenting the truncated data according to the maximum number of plotted points, and then projecting the data within each segment to obtain the compressed data, such as... Figure 5 As shown.

[0185] The projection principle is shown in the diagram above. The amplitudes of the five frequency points on the left are projected into a single frequency point with a high and low range. According to the conventions for web page rendering, the data storage array uses even numbers for low points and odd numbers for high points.

[0186] Even amplitude = Min(spectral value within the segment);

[0187] Odd amplitude = Max(spectral value within the segment).

[0188] The format of the extracted data is as follows Figure 6 As shown, the extracted spectrum data is in the following format:

[0189] Fields illustrate Compression mark 0: Uncompressed, 1: Compressed Spectrum array int[], unit: 0.1dBm, invalid elements are filled with -9999.

[0190] A three-level key-value pair caching system was used. After the socket channel was established and the first frame of spectrum data was received, cached data with the above structure was built according to the web page data definition. During user observation, the above cache only overwrites the extracted spectrum data corresponding to the updated data type code, avoiding excessive memory consumption and reducing the pressure on Java memory reclamation.

[0191] Encapsulating Spectrum Data: Due to limitations in network bandwidth and webpage memory usage, the amount of data transmitted at one time cannot be too large. Although the data volume is significantly reduced after extraction, transmitting several data types together can still cause network congestion and greatly increase memory and CPU resource usage. Therefore, this invention addresses this problem by encapsulating individual data types and then sending them sequentially. Encapsulating data also aims to achieve data independence (webpages do not depend on preceding data when processing data), thereby improving the efficiency of webpage processing. Examples of encapsulated data include... Figure 7 As shown.

[0192] Where zip is the compression flag, 0: uncompressed, 1: compressed; data is the extracted spectrum array; and time is the data acquisition timestamp.

[0193] The transmission of spectrum data is limited by network transmission bandwidth and webpage memory usage; therefore, the transmission frame rate for different data types is controlled separately. The upper limit for the transmission frame rate of real-time spectrum is 35fps, while the maximum, minimum, and average transmission frame rate limits are all 1fps.

[0194] The frame rate control described above enables continuous observation of the spectrum by the human eye and real-time response to signal changes. The central service establishes sending threads based on data type, one thread per data type. Since the number of data types is controllable, the number of data threads is also controllable, avoiding excessive resource consumption.

[0195] The following table is used for frame rate control during thread data transmission:

[0196]

[0197] A thread of one data type maintains a list of the above objects and determines whether to send data based on the difference between the current system time and the last sending time. If the time difference is insufficient, the data is skipped during the iteration.

[0198] Receive Flow Control Data: Network transmission rates fluctuate due to various factors. To prevent further network congestion caused by excessive data transmission despite slow network speeds, the central service assesses network quality by receiving frame rates from web pages via WebSocket and determines the transmission frame rate based on the assessment results.

[0199] The traffic control data structure for web pages sent to the central service is as follows:

[0200] Fields illustrate Socket Channel ID Frame rate Unit: fps

[0201] The network quality assessment process is as follows:

[0202] 1. If the frame rate of the corresponding socket channel is greater than or equal to the last sent frame rate of the current thread, then send according to the currently set frame rate;

[0203] 2. If the frame rate of the corresponding socket channel is less than the frame rate of the last transmission by the current thread, then the actual frame rate to be transmitted is f: f = INT(the current thread's set frame rate × (the socket channel's frame rate / the current thread's set frame rate)); if f = 0, then...

[0204] f = 1;

[0205] Note: Due to the time-varying nature of network fluctuations, when network transmission recovers, the previously reduced frame rate may prevent the frame rate from being restored if the original frame rate is used.

[0206] Web page:

[0207] Receiving Spectrum Data: Since web pages lack multithreading capabilities and are prone to crashing when memory usage exceeds 200MB, untimely network data processing can lead to WebSocket channel congestion, data accumulating in browser memory, resulting in excessive system resource consumption and slow system response. To address these issues, this invention employs Vue and VueX to isolate data reception and display processing. Data received via WebSocket is first verified using the batch token BatchNo. If the BatchNo differs from the parameters in the RESTful service request, it is considered dirty data and skipped. If they match, it is stored in the local Vuex state's rawData using VueX's Action -> Mutation -> State mechanism. This process takes only 1-5ms, thus improving data reception efficiency.

[0208] While receiving data, the system also records the corresponding receiving timestamp, calculates the receiving frame rate, and uses a flow control data structure to send the data to the central service via WebSocket.

[0209] Receive frame rate fps = INT(50000 / (timestamp of the 50th frame - timestamp of the 1st frame));

[0210] When the 50th frame of data is recorded, the counter is set to 0. After that, when new data is received (without verifying BatchNo), the counter is incremented and the timestamp of this time is recorded as the 1st frame of data.

[0211] Parsing Spectrum Data: Data temporarily stored in rawData needs to be parsed into the corresponding data type before it can be displayed. The control parameter format for displaying traces on the web page is as follows:

[0212]

[0213] The data parsing process involves cloning the spectrum array in rawData into the corresponding data (maxData, minData, avgData) based on the data type.

[0214] Because arrays are object references in JavaScript, updates to their contents can alter data being processed, potentially causing exceptions. Therefore, using the cloning pattern (copying array element values) for updates cuts off the propagation path of changes.

[0215] When parsing data and preparing to update, check the processing status. If it is 0, update; if it is 1, skip.

[0216] Since the statistical data and real-time data use the same coordinate system, the frequency range of rawData must be checked to ensure consistency with the drawing frequency range before cloning. Cloning is only performed if they are consistent.

[0217] Unit Conversion: Converts spectral data in 0.1dBm units to data in the user-selected units. To improve efficiency and reduce page resource usage (only one iteration of the statistical data is needed, and intermediate calculations do not use arrays to store intermediate results, reducing memory usage), this conversion is performed in the same process as trace drawing. That is, after conversion, the x and y pixel coordinates for drawing the trace are directly output and then drawn immediately.

[0218] x: Calculated from the index (frequency) of the spectrum array:

[0219] x = (i+1) × p;

[0220] In the formula: p = drawing width / (spectrum array length + 1), unit: px, the X-axis is divided equally according to the length of the uncompressed spectrum array, and if it is compressed data, it is divided equally according to half the array length.

[0221] The index of the spectrum array starts from 0. The data is compressed, and the index value is taken every other 1 for calculation (i.e., odd-numbered indices are not included in the calculation of x).

[0222] y: Calculated by converting the values ​​(amplitude) of the spectrum array to units.

[0223] y=H×(1-(F(amp[i] / 10)-Ymin)×0.01)

[0224] Where H is the height of the drawing area in pixels (px); F() is the unit conversion formula, for example: dbmTodBuV() = amplitude + 107; amp[] is the spectrum array; i is the index of the spectrum array; and Ymin is the minimum value of the amplitude range corresponding to the display unit.

[0225] Drawing: The entire drawing area is fixed at 100 grids along the Y-axis, which simplifies calculations and improves efficiency while ensuring the accuracy of amplitude display. Each trace obtains its corresponding data type from the trace data type table through its own trace number. Then, based on the data type, it retrieves the data to be displayed from maxData, minData, avgData, realData, and static data, i.e., the amp[] array in the formula. This allows multiple traces to use the same statistical data and can also remain static. Drawing a trace first sets the color according to the data type or trace number, and then uses canvas.lineto() to draw a straight line connecting them. The frequency mark is calculated based on the user-drawn straight line at the specified canvas position, and the frequency value and spectrum array index are calculated based on the pixel value of x. Then, the frequency and spectrum amplitude are displayed in the specified area. The measurement effect of multiple traces and frequency marks is as follows. Figures 8 to 9 As shown.

[0226] Spectrum scaling operation:

[0227] Because web-based spectrum displays differ significantly from traditional displays in terms of operational support—for example, web-based displays rarely use right-click pop-up menus or double-click functionality—a specific design was implemented for spectrum scaling.

[0228] First, switch to spectrum selection mode on the web page (to avoid conflicts with frequency standard operations). Then, double-click the spectrum drawing area to obtain the corresponding frequency. When the user clicks the zoom-in button, send a spectrum data request to the central service, i.e., modify the drawing start frequency, drawing end frequency, batch token (batchNo), and maximum drawing points (limitFrame) in the web page data definition. The zoom-in operation is as follows: Figure 10 As shown.

[0229] After the selection mode is activated, double-click to draw the area to be enlarged, and simultaneously enable the zoom-in button in the upper left corner. Subsequent processing follows the same logic as the previous data display and operations. The enlarged spectrum data comes from the extraction operation of the central service. Dirty data between the end of the web page operation and the data update in the central service is filtered out by the web page's data parsing and validity checks.

[0230] III. Conclusion:

[0231] The termination phase is triggered when the user ends observation, the webpage is refreshed, or the browser is closed directly. Figure 11 This is the processing flow for the final stage under normal operating conditions.

[0232] Since there is a process from when the user clicks "stop" to when the system completes all stop operations, in order to improve the user experience and avoid the web page displaying changed data because there is still cached spectrum data being transmitted on the network after stopping, the web page first sets a stop flag. At this time, the data receiving, data parsing, and data validity detection processes will skip directly when they detect the stop flag, thus achieving the above goal.

[0233] The subsequent steps involve releasing the occupied resources, including issuing a command to the central service to perform resource release operations. Closing the socket channel on the web page releases the cached network data in the channel and the resources used to maintain the socket channel. Stopping the plotting operation releases the memory occupied by the spectrum array in the trace's control parameters. To ensure that the page can immediately execute new spectrum observation operations after stopping, the trace's control parameters are reset to their default values.

[0234] Upon receiving the stop command, the central service first collects the data type reference count during the spectrum reference control process. When the reference count reaches 0, it issues a stop device command before releasing the memory occupied by the corresponding real-time data and statistical data. Otherwise, data collected before the device stops may become unprocessable.

[0235] When a webpage is refreshed or the browser is closed, a WebSocket connection exception will occur. This exception will be detected by the central service, which will then trigger the process described above.

[0236] For the specific implementation scheme of this embodiment, please refer to the relevant descriptions in the above embodiments, which will not be repeated here.

[0237] It is understood that the same or similar parts in the above embodiments can be referred to each other, and the contents not described in detail in some embodiments can be referred to the same or similar contents in other embodiments.

[0238] It should be noted that in the description of this invention, the terms "first," "second," etc., are used for descriptive purposes only and should not be construed as indicating or implying relative importance. Furthermore, in the description of this invention, unless otherwise stated, "a plurality of" means at least two.

[0239] Any process or method description in the flowchart or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or more executable instructions for implementing a particular logical function or process, and the scope of the preferred embodiments of the invention includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the functions involved, as will be understood by those skilled in the art to which embodiments of the invention pertain.

[0240] It should be understood that various parts of the present invention can be implemented in hardware, software, firmware, or a combination thereof. In the above embodiments, multiple steps or methods can be implemented in software or firmware stored in memory and executed by a suitable instruction execution device. For example, if implemented in hardware, as in another embodiment, it can be implemented using any one or a combination of the following techniques known in the art: discrete logic circuits having logic gates for implementing logical functions on data signals, application-specific integrated circuits (ASICs) having suitable combinational logic gates, programmable gate arrays (PGAs), field-programmable gate arrays (FPGAs), etc.

[0241] Those skilled in the art will understand that all or part of the steps of the methods in the above embodiments can be implemented by a program instructing related hardware. The corresponding program can be stored in a computer-readable storage medium. When the program is executed, it includes one or a combination of the steps of the method embodiments.

[0242] Furthermore, the functional units in the various embodiments of the present invention can be integrated into a processing module, or each unit can exist physically separately, or two or more units can be integrated into a module. The integrated module can be implemented in hardware or as a software functional module. If the integrated module is implemented as a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium.

[0243] The storage media mentioned above can be read-only memory, disk, or optical disk, etc.

[0244] In the description of this specification, references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of the invention. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples.

[0245] The present invention employs a method, apparatus, processor, and computer-readable storage medium for real-time display of multiple spectrum traces and frequency marks based on the Web. It does not rely on client or plugin installation, and realizes real-time dynamic updating and display of multiple spectrum traces and frequency marks on a browser. It can run stably for a long time, has good adaptability to network environment, and supports multiple users to share and view data via the Internet.

[0246] In this specification, the invention has been described with reference to specific embodiments thereof. However, it will be apparent that various modifications and variations can be made without departing from the spirit and scope of the invention. Therefore, the specification and drawings should be considered illustrative rather than restrictive.

Claims

1. A method for real-time display of multiple spectral traces and frequency labels based on the Web, characterized in that, The method includes the following steps: (1) Collect spectrum data, calculate the maximum number of drawing points on the Web page, send the channel ID through the Websocket channel, and the central server parses the Restful data collection request and generates device control instructions; (2) The central server parses, counts, extracts, encapsulates and sends the spectrum data, and the web page parses the spectrum data, calculates the frequency standard and draws the trajectory and frequency standard; (3) The Web page sets a stop flag, closes the socket channel, and stops drawing; the central server stops sending data to the WebSocket and extracting the current batch data, and issues a stop device command; Step (2) specifically includes the following steps: (2.1) The central server receives the spectrum data stream; (2.2) The central server parses the spectrum data, splices and unifies the segmented spectrum data. (2.3) The central server statistically analyzes spectrum data based on the data type set defined in the Web page data definition; (2.4) The central server extracts spectrum data from the statistical spectrum object and the unified real-time spectrum object according to the frequency range to be drawn, and compresses the data according to the maximum number of drawing points; (2.5) The central server encapsulates each data type and sends them sequentially; (2.6) The central server establishes a sending thread according to the data type, sends spectrum data to the Web page, and performs frame rate control on the data at the same time; (2.7) The central server receives the received frame rate of the Web page via WebSocket, performs network quality assessment, and determines the sending frame rate based on the network quality assessment results; (2.8) The web page receives flow control data, verifies it according to the batch processing token, records the corresponding receiving timestamp, counts the receiving frame rate, and sends it to the central server via WebSocket; (2.9) Parsing spectrum data from web pages; (2.10) Determine the validity of the data; (2.11) Convert the spectrum data into data in the unit selected by the user; (2.12) Calculate the x-pixel coordinates and y-pixel coordinates of the trace to be drawn; (2.13) Set the color according to the data type or trace number, and draw the trace; (2.14) Draw the frequency standard.

2. The method for real-time display of multiple spectrum traces and frequency labels based on Web as described in claim 1, characterized in that, Step (1) specifically includes the following steps: (1.1) Obtain the width of the drawing area from the web page; (1.2) Calculate the maximum number of points to be drawn; (1.3) Establish a WebSocket channel with the central server; (1.4) The central server sends the channel ID generated by the central server to the web page through the WebSocket channel; (1.5) Generate a batch processing token on the web page and send a RESTful data collection request to the central server; (1.6) The central server parses the RESTful data collection request into a Web page data definition; (1.7) The central server generates and issues equipment control commands.

3. The method for real-time display of multiple spectrum traces and frequency labels based on Web, as described in claim 2, is characterized in that... The calculation of the maximum number of points to be drawn in step (1.2) is as follows: The maximum number of points to draw is calculated using the following formula: wlimit = INT(drawing area pixel width × 2); points = Round(k × (freqEnd - freqStart) / device spectral resolution); LimitFrame=Min(wlimit, points); Where wlimit is the maximum number of points to be drawn, points is the number of spectrum points to be drawn, LimitFrame is the maximum number of points to be drawn, k is the mobile network bandwidth coefficient, freqEnd is the drawing cutoff frequency, and freqStart is the drawing start frequency.

4. The method for real-time display of multiple spectrum traces and frequency labels based on Web as described in claim 2, characterized in that, Step (1) further includes the following steps: (1-1.1) The central server returns the task ID to the web page; (1-1.2) Web page temporary storage task ID and Web page data definition; (1-1.3) Update the data timestamp of the stored data when the web page receives data, and monitor the changes in the data timestamp; (1-1.4) If the data timestamp changes, the drawing operation is triggered.

5. The method for real-time display of multiple spectrum traces and frequency labels based on Web as described in claim 1, characterized in that, The specific steps (2.2) are as follows: Obtain a fixed-length int spectrum array corresponding to the task ID plus the device ID. If subsequent spectrum data is received, update the data segment corresponding to the subsequent spectrum array.

6. The method for real-time display of multiple spectrum traces and frequency labels based on Web as described in claim 1, characterized in that, The specific steps (2.3) are as follows: (2.3.1) Save the data to a HashMap collection using a two-level key-value pair method; (2.3.2) If the central server receives data collection instructions and data operation instructions from the Web page, it shall count the reference counts of each data type code of the current task according to the Web page data definition stored by the central server; (2.3.3) Stop counting the reference count of the type code when the reference count of the type code is 0.

7. The method for real-time display of multiple spectrum traces and frequency labels based on Web as described in claim 1, characterized in that, Step (2.4) specifically includes the following steps: (2.4.1) Process the already truncated data during data compression; (2.4.2) If the length of the truncated data is less than or equal to the maximum number of drawing points, the compression process is skipped; otherwise, the truncated data is segmented according to the maximum number of drawing points, and the data within the segment is projected to obtain the compressed data.

8. The method for real-time display of multiple spectrum traces and frequency labels based on Web as described in claim 1, characterized in that, Step (3) specifically includes the following steps: (3.1) Set a stop flag on the web page and send an instruction to the central server to perform resource release operations; (3.2) The Web page closes the socket channel, stops drawing, clears the cache, and resets the control variables; the central server stops sending data to the WebSocket, removes the WebSocket from the channel list, stops extracting the current batch data, and issues a stop device command.

9. An apparatus for realizing real-time display of multiple spectral traces and frequency standards based on a Web platform, characterized in that, The device includes: A processor is configured to execute computer-executable instructions; The memory stores one or more computer-executable instructions, which, when executed by the processor, implement the steps of the method for real-time display of multiple spectral traces and frequency labels based on the Web, as described in any one of claims 1 to 8.

10. A processor for implementing real-time display of multiple spectral traces and frequency standards based on a Web platform, characterized in that, The processor is configured to execute computer-executable instructions, which, when executed by the processor, implement the steps of the method for real-time display of multiple spectral traces and frequency labels based on the Web, as described in any one of claims 1 to 8.

11. A computer-readable storage medium, characterized in that, It stores a computer program that can be executed by a processor to implement the steps of the method for real-time display of multiple spectral traces and frequency labels based on the Web, as described in any one of claims 1 to 8.

Images