Dynamic drawing system and method for civil aircraft test flight time sequence data rendering
The dynamic editor is built through IoTDB and uPlot.js and other technologies, which solves the lack of interactiveness and response speed of civil aircraft test flight timing data processing tools, and realizes efficient and dynamic timing data monitoring and visualization, and outputs clear high-resolution timing diagrams to meet the various drawing needs of users.
Patent Information
- Application Number
- CN202510391933.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-03-31
- Publication Date
- 2025-08-08
AI Technical Summary
The existing civil aircraft test flight timing data processing tools have shortcomings in data loading, response speed and interactive functions, and it is difficult to meet the dynamic interactive drawing requirements of high-frequency and large-data time series data, especially when exploring interactively between complex parameters.
Through real-time data stream processing, the IoTDB timing database is used to align and store data, and combine uPlot.js, uPlot-Vue and Canvas technologies to build a dynamic editor, supports interactive operations such as drag and drop, and zoom, and output high-resolution timing diagrams.
It realizes dynamic monitoring and efficient visualization of civil aircraft test flight timing data, supports multiple interactive operations, outputs clear high-resolution timing diagrams, adapts to different screen sizes and resolutions, and improves user drawing experience.
Smart Images
Figure CN120451327A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of civil aircraft data processing, and in particular to a dynamic drawing system, method, device and medium for rendering civil aircraft flight test time series data. Background Art
[0002] Processing time-series data for civil aircraft flight tests is a complex and critical process, requiring not only efficient and accurate analysis of massive, multi-dimensional data but also visual display to support decision-making and design verification. The raw data processing stage involves the selection of test points, requiring precise parameter recording under specific flight conditions. This includes aircraft performance indicators, including flight status, flight angle, and many other factors. In the computational analysis phase of civil aircraft professional subjects, static charts or data tables cannot meet the rapidly changing and highly customized professional needs. Dynamic, interactive drawing technology is needed to improve work efficiency and analytical accuracy.
[0003] However, existing drawing technologies often have limitations, such as slow data loading and response speeds and insufficient interactive functionality. For high-frequency, large-volume time-series data, existing tools are limited by computing performance and optimization, resulting in low efficiency in loading and real-time refreshing. Traditional drawing software was not designed to fully consider the need for interactive exploration between complex parameters, resulting in users being unable to conveniently interact through dragging, dropping, zooming, and other interactions. When customized interactive features are required for specific professions, it is difficult to effectively utilize visualization to complete specialized auxiliary analysis tasks.
[0004] Based on the above problems, the applicant proposed the technical solution of this application. Summary of the Invention
[0005] In view of the above-mentioned defects of the prior art, the present invention provides a dynamic drawing method and system for rendering civil aircraft test flight timing data. It utilizes real-time data stream processing to monitor the dynamic changes of data during civil aircraft test flight, and uses a multi-component configuration to form a dynamic editor to output high-resolution timing diagrams, which can meet the dynamic interactive drawing needs of civil aircraft test flight timing data.
[0006] To achieve the above-mentioned object, the present invention discloses a dynamic drawing method for rendering civil aircraft flight test time series data, comprising:
[0007] Performing data alignment on the civil aircraft flight test time series data, arranging data of different time series by timestamps, and obtaining flight test sorting data;
[0008] Before rendering data, determine whether it is the first rendering of the data. If it is the first rendering of the data, initialize the drawing canvas and timing diagram. If it is not the first rendering of the data, configure the drawing component, drawing plug-in, drag component and canvas component to form a dynamic editor.
[0009] The test flight sequencing data is edited using the dynamic editor, the edited data is rendered, and a data timing diagram is output.
[0010] Preferably, the initialization configuration of the drawing canvas and the timing diagram includes:
[0011] Define a drawing canvas, a timing diagram, and a drawing data table, wherein the drawing data table includes a plurality of arrays, each array representing a data column of a sequence time;
[0012] Define the line type, range, coordinate axis and cursor of the time series chart. Define the line type to determine the type of each data column in the chart. Define the range to determine the value range and scale of the coordinate axis. Define the coordinate axis to determine the position and title of the coordinate axis. Define the cursor to determine the position of the mouse on the chart.
[0013] Preferably, the configuration of the drawing component, the drawing plug-in, the drag component and the canvas component includes:
[0014] Configuring the data format and core configuration objects in the drawing component. The data format includes the time points and data points of the civil aircraft test flight time series data. The core configuration objects include coordinate axes, legends, line styles, and color mapping.
[0015] Configuring basic plug-ins and custom plug-ins in the drawing plug-in, the basic plug-in includes a scroll wheel zoom plug-in and a mouse hover prompt plug-in, and the custom plug-in includes adjusting the speed of the scroll time response and changing the information format displayed when the mouse hovers;
[0016] Configure the drag component, which uses the Vue drag and drop control library;
[0017] Configure the canvas component, which uses the canvas component.
[0018] Preferably, the dynamic editor further includes a legend plug-in, which is implemented by setting a monitoring hook in uPlot and creating a DOM element.
[0019] Preferably, the dynamic editor further includes a legend plug-in, which is added to a canvas component or creates an HTML tag and is set at a preset position.
[0020] Preferably, the dynamic editor further includes a wheel plug-in, which monitors input events and processes mouse wheel scrolling events.
[0021] Preferably, before performing data alignment processing on the civil aircraft flight test time series data, the method further includes: importing the civil aircraft flight test time series data into a time series database through a data interface service, and the time series database saves the civil aircraft flight test time series data in the form of a storage group.
[0022] The present invention also discloses a dynamic drawing system for rendering civil aircraft flight test time series data, comprising the following modules:
[0023] a data processing module, configured to perform data alignment processing on the civil aircraft flight test time series data, arrange the data of different time series by timestamps, and obtain flight test sorting data;
[0024] The dynamic editing module is used to determine whether it is the first rendering of the data before rendering. If it is the first rendering of the data, the drawing canvas and timing diagram are initialized and configured. If it is not the first rendering of the data, the drawing component, drawing plug-in, drag component and canvas component are configured to form a dynamic editor;
[0025] The front-end rendering module is used to edit the test flight sorting data using the dynamic editor, render the edited data, and output a data timing diagram.
[0026] The present invention also discloses a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the above-mentioned dynamic drawing method for rendering civil aircraft flight test time series data is implemented.
[0027] The present invention also discloses a computer-readable storage medium, on which a computer program is stored. When the computer program is processed and executed, the dynamic drawing method for rendering civil aircraft test flight time series data is implemented.
[0028] Compared with the prior art, the present invention has the following beneficial effects:
[0029] The present invention processes civil aircraft flight test time series data through a time series database, realizes the processing of real-time data streams, facilitates the dynamic monitoring of civil aircraft flight test time series data, utilizes a multi-component configuration to form a dynamic editor, and outputs a high-resolution time series diagram, so that the clarity of the time series diagram can be guaranteed even in the case of a high-density data set. The present invention supports functions such as zooming and panning through a dynamic editor, provides convenience for drawing and can meet the user's various drawing requirements. After the edited data is rendered, multiple axes can be displayed simultaneously, which is suitable for displaying multiple data series of different units or ranges. The output time series diagram can automatically adapt to different screen sizes and resolutions, which is conducive to improving the user's drawing experience.
[0030] The concept, specific structure and technical effects of the present invention will be further described below in conjunction with the accompanying drawings to fully understand the purpose, characteristics and effects of the present invention. BRIEF DESCRIPTION OF THE DRAWINGS
[0031] Figure 1 It is a flow chart of a dynamic drawing method for rendering civil aircraft flight test time series data according to the present invention.
[0032] Figure 2 This is a schematic diagram of the DOM structure of the uPlot-vue object used in the dynamic drawing method for rendering civil aircraft flight test time series data of the present invention.
[0033] Figure 3 The present invention is a schematic diagram of the operation flow of a dynamic drawing method for rendering civil aircraft flight test time series data during drawing. DETAILED DESCRIPTION
[0034] In order to make the technical means, creative features, objectives and effects of the invention easier to understand, the invention is further described below with reference to specific diagrams. However, the invention is not limited to the following implementation cases.
[0035] It should be noted that the structures, proportions, sizes, etc. illustrated in the drawings in this specification are only used to match the contents disclosed in the specification so that people familiar with this technology can understand and read them. They are not used to limit the conditions under which the present invention can be implemented. Therefore, they have no substantive technical significance. Any modification of the structure, change in the proportion relationship or adjustment of the size should still fall within the scope of the technical content disclosed in the present invention without affecting the efficacy and purpose that can be achieved by the present invention.
[0036] Civil aircraft flight test time series data has the characteristics of high-frequency sampling, multi-parameter synchronous acquisition and unified time base. Its corresponding time series diagram needs to be drawn in a dynamic and interactive way to meet the existing civil aircraft navigation needs. In view of the multi-heterogeneous characteristics of civil aircraft flight test time series data, this embodiment constructs an IoTDB time series database to store flight test time series data. It uses corresponding data processing services to connect to the IoTDB time series database to handle the reading and writing, querying, missing value filling, frequency increase and decrease and other data processing requirements of flight test time series data. Through the drawing service corresponding to the user operation logic, the data from different data files are integrated and processed, and through splicing and transformation, the data return results required for visualization are finally provided. According to the front-end or client request, the final time series diagram is generated on the front-end page.
[0037] The following is an explanation of the technical terms mentioned in this embodiment, where IoTDB represents an efficient storage database technology for time series data; uPlot.js is a high-performance, lightweight time series chart library that is suitable for drawing charts with real-time updates or a large number of data points. It can render efficiently and supports interactive zooming and panning operations; uPlot-Vue is a component that encapsulates uPlot under the Vue.js framework, providing a more convenient integration method for Vue projects, binding uPlot charts to the data of Vue applications; Vue-draggable is a drag-and-drop control library for Vue.js, which creates draggable time series chart layouts and can be integrated with Vue's responsive system; Canvas is used to draw images on time series charts by manipulating pixel data. The Canvas element itself does not draw anything, but serves as a canvas container for drawing elements.
[0038] like Figure 1 As shown, this embodiment discloses a dynamic drawing method for rendering civil aircraft flight test time series data, including the following steps:
[0039] Step S1: importing civil aircraft flight test time series data into a time series database through a data interface service, and the time series database stores the civil aircraft flight test time series data in a storage group form.
[0040] Specifically, the acquired civil aircraft flight test time data was imported into the IoTDB time series database through data import. A storage group in the IoTDB time series database is a logical storage container, with each storage group corresponding to an independent file directory structure, including complete data files, indexes, and metadata. When storing civil aircraft flight test time series data, a reasonable storage group structure is set to achieve efficient data storage.
[0041] By processing the civil aircraft flight test time series data through the time series database, it is possible to process real-time data streams and facilitate the dynamic monitoring of civil aircraft flight test time series data.
[0042] Step S2: performing data alignment processing on the civil aircraft flight test time series data, arranging the data of different time series by timestamps, and obtaining flight test sorting data.
[0043] Specifically, data alignment for civil aircraft flight test time series data requires data padding for different sampling frequencies, clock desynchronization, or missing data. The IoTDB time series database has multiple built-in alignment features, such as setting time intervals for fixed-interval sampling and setting time deviation thresholds for precise timestamp alignment. After data alignment, any missing data is padded and then arranged according to the same timestamp.
[0044] Step 3: Before rendering the data, determine whether it is the first time to render the data. If it is the first time to render the data, proceed to step S31 to initialize the drawing canvas and timing diagram. If it is not the first time to render the data, proceed to step S32 to configure the drawing component, drawing plug-in, drag component and canvas component, and finally proceed to step S33 to form a dynamic editor.
[0045] Specifically, for the first rendering, the drawing canvas and timing diagram are initialized and configured, including: defining the drawing canvas, timing diagram and drawing data table, the drawing data table includes several arrays, each array represents a data column of a sequence time; defining the line type, range, coordinate axis and cursor of the timing diagram, defining the line type is to determine the type of each data column in the chart, defining the range is to determine the value range and scale of the coordinate axis, defining the coordinate axis is to determine the position and title of the coordinate axis, and defining the cursor is to determine the position of the mouse on the chart.
[0046] The uPlot library expects data to be an array or multiple arrays, where each array represents a time series column. The sorted flight test data is then organized into multiple columns, each representing a different time series. Each column is represented in the chart as a line or other series type, such as a bar or point. Defining a line type defines the style, color, width, and associated column index of each series. The x- and y-axes define the axis range and scale, as well as the specific position, title, and formatting function for each axis.
[0047] For non-first rendering, the drawing component, drawing plug-in, drag component and canvas component are configured, including: configuring the data format and core configuration objects in the drawing component, the data format includes the time points and data points of the civil aircraft test flight timing data, and the core configuration objects include coordinate axes, legends, line styles and color mapping; configuring basic plug-ins and custom plug-ins in the drawing plug-in, the basic plug-in includes a scroll wheel zoom plug-in and a mouse hover prompt plug-in, and the custom plug-in includes adjusting the speed of the scroll time response and changing the information format displayed when the mouse hovers; configuring the drag component, the drag component uses Vue's drag and drop control library; configuring the canvas component, the canvas component uses the canvas component.
[0048] In addition to drawing components, drawing plug-ins, drag components and canvas components, the dynamic editor also includes legend plug-ins, legend plug-ins and scroll wheel plug-ins. The specific implementation of the plug-in is that the legend plug-in is implemented in uPlot by listening to the init hook and creating and managing DOM elements outside the chart. The DOM structure of the uPlot-vue object is as follows Figure 2 As shown, u-wrap serves as the outer wrapper layer, with an internal three-layer structure: u-under as the lower layer, u-over as the upper layer, and canvas as the intermediate drawing layer. The u-over layer also integrates u-cursor-x, u-cursor-y, and u-cursor-pt, which are related to cursor operations, and u-select, which is related to capture operations. Captions are dynamically added to the canvas during drawing, or additional HTML tags are created and placed in appropriate locations, depending on specific needs. Scroll wheel zooming and panning are supported by listening for input events and handling mouse wheel scroll events.
[0049] In one example, custom plugins based on uPlot's internal API were created by manipulating uPlot's core API to optimize or expand the basic interactive experience. When writing a wheel control plugin, zooming and panning the chart data range were implemented by listening for mouse wheel events and calling uPlot's setScale, pan, or zoom methods. In another example, canvas component technology was used to add an interactive layer. For newly added layers such as legends and captions, independent canvas components were used, combined with HTML / SVG elements, and implemented through Vue's data binding and event handling mechanisms. The interactive layer was separated from the uPlot time series chart, and the rendering logic communicated with uPlot through an event triggering mechanism.
[0050] For non-first rendering, the plug-in is activated and edited by the front-end user. When the canvas editing component needs to be activated, the canvas editing is activated. Through the plug-in and user editing, dynamic rendering and user interaction functions are realized.
[0051] By utilizing multiple components to create a dynamic editor, the output of high-resolution timing diagrams ensures clarity even in dense datasets. The dynamic editor supports zooming, panning, and other functions, facilitating drawing and meeting various user requirements.
[0052] Step S4: using the dynamic editor to edit the test flight sequencing data, rendering the edited data, and outputting a data timing diagram.
[0053] Specifically, users use the dynamic editor to edit data, draw using the drawing component, drag using the drag component, and perform legend, mouse lift, caption, and scroll wheel operations using the canvas editing component.
[0054] uPlot is a fast and efficient Canvas 2D chart for drawing time series, line, area, OHLC, and bar charts. It renders after editing. From a cold start, it can create an interactive chart with 150,000 data points in 90 milliseconds and scale linearly at 31,000 points per minute. uPlot's rendering allows for rapid presentation of time series data on the front-end interface and output as a time series graph.
[0055] After the edited data is rendered, it can display multiple axes simultaneously, which is suitable for displaying multiple data series with different units or ranges. The output time series chart can automatically adapt to different screen sizes and resolutions, which is conducive to improving the user's drawing experience.
[0056] like Figure 3 As shown in the figure, when users perform dynamic drawing operations, they import time series data packets into the IoTDB time series database. When drawing begins, the system first checks whether the timestamp sequence and parameter sequence are aligned. If not, the timestamp and parameter sequences are aligned through the time series data processing service. After alignment, it determines whether it is the first rendering. If it is the first rendering, the canvas and time series graph are defined in order, and the line type, range, and coordinate axes of the time series graph are set. If it is not the first rendering, various plug-ins are activated for front-end user editing. During the editing process, the canvas editing component is activated as needed. After the user completes the dynamic editing, the front-end rendering of the time series graph is performed, and the time series graph is output after rendering.
[0057] A second embodiment of the present invention discloses a dynamic drawing system for rendering civil aircraft flight test time series data, including a data import module, a data processing module, a dynamic editing module and a front-end rendering module.
[0058] The data import module is used to import the civil aircraft test flight time series data into the time series database through the data interface service. The time series database stores the civil aircraft test flight time series data in the form of storage groups.
[0059] a data processing module, configured to perform data alignment processing on the civil aircraft flight test time series data, arrange the data of different time series by timestamps, and obtain flight test sorting data;
[0060] The dynamic editing module is used to determine whether it is the first rendering of the data before rendering. If it is the first rendering of the data, the drawing canvas and timing diagram are initialized and configured. If it is not the first rendering of the data, the drawing component, drawing plug-in, drag component and canvas component are configured to form a dynamic editor;
[0061] The front-end rendering module is used to edit the test flight sorting data using the dynamic editor, render the edited data, and output a data timing diagram.
[0062] Since the first embodiment and this embodiment correspond to each other, this embodiment can be implemented in conjunction with the first embodiment. The relevant technical details mentioned in the first embodiment are still valid in this embodiment, and the technical effects achieved in the first embodiment can also be achieved in this embodiment. To reduce repetition, they will not be repeated here. Accordingly, the relevant technical details mentioned in this embodiment can also be applied to the first embodiment.
[0063] A third embodiment of the present invention relates to a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the method in the first embodiment when executing the computer program.
[0064] A fourth embodiment of the present invention relates to a computer-readable storage medium having a computer program / instruction stored thereon, wherein the computer program / instruction implements the steps of the method in the first embodiment when executed by a processor.
[0065] The preferred embodiments of the present invention have been described in detail above. It should be understood that numerous modifications and variations based on the concepts of the present invention are possible without inventive effort by those skilled in the art. Therefore, any technical solution that can be derived by one skilled in the art through logical analysis, reasoning, or limited experimentation based on the concepts of the present invention and the prior art should be within the scope of protection defined by the claims.
Claims
1. A dynamic drawing method for rendering civil aircraft flight test time series data, characterized in that: include: Performing data alignment on the civil aircraft flight test time series data, arranging data of different time series by timestamps, and obtaining flight test sorting data; Before rendering data, determine whether it is the first rendering of the data. If it is the first rendering of the data, initialize the drawing canvas and timing diagram. If it is not the first rendering of the data, configure the drawing component, drawing plug-in, drag component and canvas component to form a dynamic editor. The test flight sequencing data is edited using the dynamic editor, the edited data is rendered, and a data timing diagram is output.
2. The dynamic drawing method for rendering civil aircraft flight test time series data according to claim 1 is characterized in that: The initialization configuration of the drawing canvas and the timing diagram includes: Define a drawing canvas, a timing diagram, and a drawing data table, wherein the drawing data table includes a plurality of arrays, each array representing a data column of a sequence time; Define the line type, range, coordinate axis and cursor of the time series chart. Define the line type to determine the type of each data column in the chart. Define the range to determine the value range and scale of the coordinate axis. Define the coordinate axis to determine the position and title of the coordinate axis. Define the cursor to determine the position of the mouse on the chart.
3. The dynamic drawing method for rendering civil aircraft flight test time series data according to claim 1, characterized in that: The configuration of the drawing component, the drawing plug-in, the drag component and the canvas component includes: Configuring the data format and core configuration objects in the drawing component. The data format includes the time points and data points of the civil aircraft test flight time series data. The core configuration objects include coordinate axes, legends, line styles, and color mapping. Configuring basic plug-ins and custom plug-ins in the drawing plug-in, the basic plug-in includes a scroll wheel zoom plug-in and a mouse hover prompt plug-in, and the custom plug-in includes adjusting the speed of the scroll time response and changing the information format displayed when the mouse hovers; Configure the drag component, which uses the Vue drag and drop control library; Configure the canvas component, which uses the canvas component.
4. The dynamic drawing method for rendering civil aircraft flight test time series data according to claim 3 is characterized in that: The dynamic editor also includes a legend plug-in, which is implemented by setting a monitoring hook in uPlot and creating a DOM element.
5. The dynamic drawing method for rendering civil aircraft flight test time series data according to claim 4, characterized in that: The dynamic editor also includes a legend plug-in, which is added to the canvas component or creates an HTML tag and is set at a preset position.
6. The dynamic drawing method for rendering civil aircraft flight test time series data according to claim 1, characterized in that: The dynamic editor also includes a wheel plug-in, which monitors input events and processes mouse wheel scrolling events.
7. The dynamic drawing method for rendering civil aircraft flight test time series data according to claim 1, characterized in that: Before performing data alignment processing on the civil aircraft flight test time series data, the method further includes: importing the civil aircraft flight test time series data into a time series database through a data interface service, and the time series database stores the civil aircraft flight test time series data in the form of a storage group.
8. A dynamic drawing system for rendering civil aircraft flight test time series data, characterized by: Includes the following modules: a data processing module, configured to perform data alignment processing on the civil aircraft flight test time series data, arrange the data of different time series by timestamps, and obtain flight test sorting data; The dynamic editing module is used to determine whether it is the first rendering of the data before rendering. If it is the first rendering of the data, the drawing canvas and timing diagram are initialized and configured. If it is not the first rendering of the data, the drawing component, drawing plug-in, drag component and canvas component are configured to form a dynamic editor; The front-end rendering module is used to edit the test flight sorting data using the dynamic editor, render the edited data, and output a data timing diagram.
9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the dynamic drawing method for rendering civil aircraft flight test time series data according to any one of claims 1 to 7 is implemented.
10. A computer-readable storage medium, characterized in that The storage medium stores a computer program, which, when processed and executed, implements the dynamic drawing method for rendering civil aircraft flight test time series data according to any one of claims 1 to 7.