Software interface design method and device
Through component tree analysis and configuration file configuration, the problems of complex interface interaction logic and different data acquisition methods in traditional ground testing software are solved, and the interface design and business processes are decoupled and unified data management are realized, and development efficiency is improved.
Patent Information
- Application Number
- CN202510606331.8
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-05-12
- Publication Date
- 2025-08-12
AI Technical Summary
In traditional ground testing software, the interface interaction logic is complex and the interface data acquisition methods are different. The interface style coding is time-consuming and difficult to manage in a unified manner.
Using the method of component tree analysis and configuration files, the static interface information and layout information are configured through the first configuration file, the interactive events are converted into process messages, the data is displayed using the data pool unified management interface, and the second configuration file adjusts the data items and models to achieve the decoupling of interface design and business processes.
It reduces the workload of interface style coding, improves development efficiency, realizes the decoupling of interface design and business processes, unifies interface data management, and simplifies the interface style design process.
Smart Images
Figure CN120469689A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of interface design, and in particular to a software interface design method and device. Background Art
[0002] Ground test and launch software is an important software for the launch vehicle testing and launch control stage. It is used to complete the test items in each stage. The software interface is responsible for responding to the test item command interaction and real-time display of data to ensure the correct operating status of the rocket before, during and after the test.
[0003] Traditional ground test software design couples test items and interface controls, resulting in complex interface interaction logic, different interface data acquisition methods, and difficulty in unified management. At the same time, traditional interface design requires the completion of UI design drawings first, and then according to the UI design Figure 1 Compared to writing front-end code, coding the front-end interface style alone consumes most of the design cycle. Summary of the Invention
[0004] The present invention provides a software interface design method and device to solve the problems in the prior art of complex interface interaction logic, different interface data acquisition methods and time-consuming interface style coding.
[0005] In a first aspect, the present invention provides a software interface design method, comprising:
[0006] The component tree is parsed according to a first configuration file, wherein the first configuration file is used to configure the static interface of the software, including component information and component layout information. The component information includes component ID, component type, component width, component height, component font, component color, and interaction events. The interaction event will be converted into a process message when triggered. The component layout information includes the component ID, parent component ID, child component ID, model name, number of child component rows, number of child component columns, child component alignment, child component spacing, and relative position of child components. The model name is used to bind a data model. The data model includes the model name and a data item sequence number corresponding to each child component. The data item sequence number corresponding to each child component is selected from the interface subscription data item. The interface subscription data item includes the data item sequence number subscribed from all data item information. The data item information is used to define the result data obtained and stored in the data pool after the software executes the test item according to the process message. The data pool pushes the corresponding result data to the user interface based on the interface subscription data item when the push condition is met. The data model, the interface subscription data item, and the data item information are configured in the second configuration file;
[0007] Traverse the component tree starting from the root node and determine the component code according to the component type of the current node;
[0008] The user interface is constructed according to the component codes of all nodes.
[0009] Optionally, the component types include an input box, a dial, a static text box, a slider combination, a group box, a status light, a button, a line chart, a row layout component, a column layout component, and a grid layout component, wherein:
[0010] The input box, the dial, the static text box, the slider combination, the group box, the status light, the button and the line graph are basic components;
[0011] The row layout component, the column layout component, and the grid layout component belong to layout components.
[0012] Optionally, the data item information includes the data item serial number, data item name, category name, number of elements, data item description, data item default value, data item minimum value, data item maximum value, data item precision, data item unit and data item abbreviation.
[0013] Optionally, the push conditions are configured in the second configuration file, including write push, update push and periodic push.
[0014] Optionally, the second configuration file is stored in a service configuration database.
[0015] Optionally, the interaction event is also used to actively obtain data items from the data pool.
[0016] Optionally, determining the component code according to the component type of the current node includes:
[0017] Determine whether the component type of the current node belongs to a basic component;
[0018] If yes, matching the basic component code from a general component library according to the component information of the current node, where the general component library includes multiple basic components and their corresponding basic component codes;
[0019] If not, generate layout component code according to the component layout information of the current node and traverse the subcomponents of the current node.
[0020] In a second aspect, the present invention provides a software interface design device, comprising a file parsing module, a component identification module, and a component integration module, wherein:
[0021] The file parsing module is used to parse the component tree according to the first configuration file. The first configuration file is used to configure the static interface of the software, including component information and component layout information. The component information includes component ID, component type, component width, component height, component font, component color and interaction event. The interaction event will be converted into a process message when triggered. The component layout information includes the component ID, parent component ID, child component ID, model name, number of child component rows, number of child component columns, child component alignment, child component spacing and relative position of child components. The model name is used to bind the data model. The data model includes the model name and the data item sequence number corresponding to each child component. The data item sequence number corresponding to each child component is selected from the interface subscription data item. The interface subscription data item includes the data item sequence number subscribed from all data item information. The data item information is used to define the result data obtained and stored in the data pool after the software executes the test item according to the process message. The data pool pushes the corresponding result data to the user interface based on the interface subscription data item when the push condition is met. The data model, the interface subscription data item and the data item information are configured in the second configuration file;
[0022] The component identification module is used to traverse the component tree starting from the root node and determine the component code according to the component type of the current node;
[0023] The component integration module is used to construct a user interface according to the component codes of all nodes.
[0024] In a third aspect, the present invention provides a computing device, comprising:
[0025] a memory for storing program instructions;
[0026] The processor is configured to call the program instructions stored in the memory and execute any of the above methods according to the obtained program.
[0027] In a fourth aspect, the present invention provides a computer-readable non-volatile storage medium, comprising computer-readable instructions, which enables a computer to perform any of the above methods when the computer reads and executes the computer-readable instructions.
[0028] For different user interface display requirements, the above scheme only needs to modify the first configuration file to implement the component property setting and nested combination of the general component library, parse the first configuration file to generate component code, and for different data acquisition requirements, only need to modify the data item information, interface subscription data items and data model in the second configuration file. For different control test project requirements, only need to modify the interaction events, and complete the interface design process of the ground test and launch software from the configurable design of the user interface, the configurable design of the user interface display data and the configurable design of the control test project, reducing the workload of writing interface style coding; through interactive event control test projects, the interface design is only responsible for converting interactive events into process messages, realizing the decoupling of interface design and business process; the interface display data all comes from the data pool, and the result data are all stored in the data pool. The data pool provides a unified data reading and writing interface, avoiding direct data interaction between the user interface and the business processing module of the ground test and launch software. BRIEF DESCRIPTION OF THE DRAWINGS
[0029] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.
[0030] Figure 1 A flowchart of a software interface design method provided by an embodiment of the present invention;
[0031] Figure 2 A schematic diagram of the control test item interaction process provided by an embodiment of the present invention;
[0032] Figure 3 A schematic diagram of double-buffered queue asynchronous processing provided by an embodiment of the present invention;
[0033] Figure 4 A schematic structural diagram of a software interface design device provided by an embodiment of the present invention. DETAILED DESCRIPTION
[0034] To make the objectives, technical solutions, and advantages of the present invention more apparent, the present invention will be further described in detail below with reference to the accompanying drawings. It is apparent that the embodiments described are only some, not all, of the present invention. All other embodiments derived by persons of ordinary skill in the art based on the embodiments of the present invention without creative effort are intended to fall within the scope of protection of the present invention.
[0035] Figure 1 The following details the process of a software interface design method provided by an embodiment of the present invention, including:
[0036] S101. Parse a component tree according to a first configuration file.
[0037] Specifically, the first configuration file is used to configure the static interface of the software, including component information and component layout information.
[0038] The first configuration file abstracts the static interface into a component tree, which describes the component composition and component layout of the user interface. The root node of the component tree is the outermost interface view, and the child nodes are the components.
[0039] Specifically, as shown in Table 1, the component information includes component ID, component type, component width, component height, component font, component color and interaction event. The interaction event will be converted into a process message when triggered.
[0040] Table 1
[0041] Serial number Field Name Data Type meaning Remark 1 id int Component ID -- 2 type string Component Type -- 3 width int Component width -- 4 height int Component height -- 5 font object Component font -- 6 color Object Component color -- 7 method Object Interaction Events Actions performed in response to interaction events
[0042] It should be noted that each component has a unique ID.
[0043] In one example, the component types include an input box, a dial, a static text box, a slider combination, a group box, a status light, a button, a line chart, a row layout component, a column layout component, and a grid layout component, wherein:
[0044] Input boxes, dials, static text boxes, slider combinations, group boxes, status lights, buttons, and line graphs are basic components;
[0045] The Row Layout component, Column Layout component, and Grid Layout component are layout components.
[0046] It should be noted that layout components can be nested and there is no need to set component width, component height, component font, component color, and interaction events.
[0047] The vast majority of interactive events in ground test and launch software control test items. To decouple interface design from business processes, the interface design is solely responsible for converting user-triggered interactive events into process messages. Process messages can take the form of "test item name: control action." Test item control requests include starting, pausing, terminating, and continuing a test item. The corresponding process messages are "test item name: start," "test item name: pause," "test item name: stop," and "test item name: continue." Therefore, for different test items, interactive events are all sent as process messages.
[0048] Component layout information describes the hierarchical relationship, relative position relationship and associated data model of components.
[0049] Specifically, as shown in Table 2, the component layout information includes component ID, parent component ID, child component ID, model name, number of child component rows, number of child component columns, child component alignment, child component spacing, and child component relative position.
[0050] Table 2
[0051]
[0052] For the root node of the component tree, it has no parent node and does not need to set the parent component ID; for the component with a parent node in the component tree, the parent component ID needs to be set.
[0053] For components with child nodes in the component tree, you need to set the child component ID, model name, child component alignment, child component spacing, and child component relative position. For grid layout components, you need to set the number of child component rows and columns. For row layout components, you don't need to set the number of child component columns. For column layout components, you don't need to set the number of child component rows.
[0054] Specifically, the model name is used to bind the data model. As shown in Table 3, the data model includes the model name and the data item number corresponding to each subcomponent.
[0055] Table 3
[0056] Serial number Field Name Data Type meaning Remark 1 modelName string Model Name Cannot be empty 2 dataID int Data item number Cannot be empty
[0057] It should be noted that each subcomponent corresponds to only one data item number in the data model.
[0058] Specifically, the data item serial number corresponding to each subcomponent is selected from the interface subscription data items, and the interface subscription data items include the data item serial numbers subscribed from all data item information.
[0059] In one possible implementation, the software's interface engine module subscribes to interface subscription data items from all data item information. Simultaneously, other business modules in the software also need to subscribe to data items. Therefore, module serial numbers are used to distinguish between modules that subscribe to data items. As shown in Table 4, module subscription data items include module serial numbers and data item serial numbers.
[0060] Table 4
[0061] Serial number Field Name Data Type meaning Remark 1 moduleID word Module serial number Cannot be empty 2 dataID int Data item number Cannot be empty
[0062] It should be noted that only data items subscribed to through the software's interface engine module will be displayed in the user interface.
[0063] Specifically, the data item information is used to define the result data obtained and stored in the data pool after the software executes the test item according to the process message. When the push condition is met, the data pool pushes the corresponding result data to the user interface based on the interface subscription data item.
[0064] In one example, as shown in Table 5, the data item information includes the data item sequence number, data item name, category name, number of elements, data item description, data item default value, data item minimum value, data item maximum value, data item precision, data item unit and data item abbreviation.
[0065] Table 5
[0066]
[0067] Data items are divided into basic data types and composite data types. For basic data types, the number of elements is set to 1. For composite data types such as strings and arrays, the number of elements is set to the array length for fixed-length arrays and 0 for variable-length data. Furthermore, for composite data types, the maximum value, minimum value, precision, and unit of the data item do not need to be set.
[0068] In one possible implementation, the interaction process of controlling the test items is as follows: Figure 2 As shown, the process message is sent to the process engine module of the software via the message sending interface provided by the interface engine module. The process engine module matches the process entity (i.e., the specific process steps of the test project) from the business configuration database according to the process message, and writes the result data obtained after the software executes the process entity into the data pool. When the push conditions are met, the data pool pushes the interface subscription data item directly to the interface engine module, and then the interface engine module transmits it to the user interface.
[0069] Furthermore, the interface engine module processes the interface subscription data items using a double-buffered queue asynchronous processing method.
[0070] Double buffer queue asynchronous processing can meet the processing needs of large amounts of data, such as Figure 3 As shown, one of the buffer queues is used to store data pushed by the data pool to the interface engine module. The interface engine module processes the data of the other buffer queue as a consumer. When the interface engine module finishes processing the data of the current buffer queue, the buffer queue is exchanged.
[0071] In one example, the push conditions are configured in the second configuration file, including write push, update push, and periodic push.
[0072] Write push means that when the data item subscribed by the module is written into the data pool, the data item acts as the subject to traverse all module subscribers and copy the data item to each module.
[0073] Specifically, the data model, interface subscription data items, and data item information are configured in the second configuration file.
[0074] In one example, the second configuration file is stored in a service configuration database.
[0075] In one example, the interaction event is also used to actively obtain data items from the data pool.
[0076] In a possible implementation, the interaction event calls the data reading and writing interface of the interface engine module, sends the data item name or data item serial number, and actively obtains the data item copy in the data pool.
[0077] S102: Traverse the component tree starting from the root node and determine the component code according to the component type of the current node.
[0078] In one example, determining the component code according to the component type of the current node includes:
[0079] Determine whether the component type of the current node belongs to the basic component;
[0080] If yes, match the basic component code from the general component library according to the component information of the current node. The general component library includes multiple basic components and their corresponding basic component codes;
[0081] If not, generate layout component code according to the component layout information of the current node and traverse the subcomponents of the current node.
[0082] The components in the general component library are the foundation of user interfaces, used to build the visual structure of the interface. They include commonly used input boxes, dials, static text boxes, slider combinations, group boxes, status lights, buttons, and graphs. Components in the general component library can be developed and combined flexibly. Custom components can be created by combining existing components and setting personalized properties (including width, height, font, and color) to meet specific display requirements. Custom components can be registered as members of the general component library.
[0083] By building a universal component library, the user interface can be directly generated by combining the components of the universal component library. The interface design can be completed only through configuration, without having to start the interface construction project from the drawing of basic components. This reduces the complexity of interface style design, reduces the workload of writing interface style code, and improves development efficiency.
[0084] S103: Construct a user interface according to the component codes of all nodes.
[0085] For different user interface display requirements, the above scheme only needs to modify the first configuration file to implement the component property setting and nested combination of the general component library, parse the first configuration file to generate component code, and for different data acquisition requirements, only need to modify the data item information, interface subscription data items and data model in the second configuration file. For different control test project requirements, only need to modify the interaction events, and complete the interface design process of the ground test and launch software from the configurable design of the user interface, the configurable design of the user interface display data and the configurable design of the control test project, reducing the workload of writing interface style coding; through interactive event control test projects, the interface design is only responsible for converting interactive events into process messages, realizing the decoupling of interface design and business process; the interface display data all comes from the data pool, and the result data are all stored in the data pool. The data pool provides a unified data reading and writing interface, avoiding direct data interaction between the user interface and the business processing module of the ground test and launch software.
[0086] Based on the same technical concept, such as Figure 4 As shown, an embodiment of the present invention provides a software interface design device, including a file parsing module, a component identification module and a component integration module, wherein:
[0087] The file parsing module is used to parse the component tree according to the first configuration file. The first configuration file is used to configure the static interface of the software, including component information and component layout information. The component information includes component ID, component type, component width, component height, component font, component color and interaction events. The interaction event will be converted into a process message when triggered. The component layout information includes component ID, parent component ID, child component ID, model name, number of child component rows, number of child component columns, child component alignment, child component spacing and relative position of child components. The model name is used to bind the data model. The data model includes the model name and the data item serial number corresponding to each child component. The data item serial number corresponding to each child component is selected from the interface subscription data item. The interface subscription data item includes the data item serial number subscribed from all data item information. The data item information is used to define the result data obtained and stored in the data pool after the software executes the test item according to the process message. The data pool pushes the corresponding result data to the user interface based on the interface subscription data item when the push condition is met. The data model, interface subscription data item and data item information are configured in the second configuration file;
[0088] The component identification module is used to traverse the component tree starting from the root node and determine the component code according to the component type of the current node;
[0089] The component integration module is used to build the user interface based on the component codes of all nodes.
[0090] Based on the same technical concept, an embodiment of the present invention provides a computing device, including:
[0091] a memory for storing program instructions;
[0092] The processor is used to call the program instructions stored in the memory and execute the above method according to the obtained program.
[0093] Based on the same technical concept, an embodiment of the present invention provides a computer-readable non-volatile storage medium, including computer-readable instructions. When a computer reads and executes the computer-readable instructions, the computer executes the above method.
[0094] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowcharts and / or block diagrams, as well as combinations of processes and / or blocks in the flowcharts and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowcharts and / or block diagrams. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.
[0095] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.
[0096] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.
[0097] Although the preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.
[0098] Obviously, those skilled in the art may make various changes and modifications to this application without departing from the spirit and scope of this application. Thus, if these modifications and variations of this application fall within the scope of the claims of this application and their equivalents, this application is intended to include these modifications and variations.
Claims
1. A software interface design method, characterized in that: include: The component tree is parsed according to a first configuration file, wherein the first configuration file is used to configure the static interface of the software, including component information and component layout information. The component information includes component ID, component type, component width, component height, component font, component color, and interaction events. The interaction event will be converted into a process message when triggered. The component layout information includes the component ID, parent component ID, child component ID, model name, number of child component rows, number of child component columns, child component alignment, child component spacing, and relative position of child components. The model name is used to bind a data model. The data model includes the model name and a data item sequence number corresponding to each child component. The data item sequence number corresponding to each child component is selected from the interface subscription data item. The interface subscription data item includes the data item sequence number subscribed from all data item information. The data item information is used to define the result data obtained and stored in the data pool after the software executes the test item according to the process message. The data pool pushes the corresponding result data to the user interface based on the interface subscription data item when the push condition is met. The data model, the interface subscription data item, and the data item information are configured in the second configuration file; Traverse the component tree starting from the root node and determine the component code according to the component type of the current node; The user interface is constructed according to the component codes of all nodes.
2. The method according to claim 1, characterized in that The component types include input boxes, dials, static text boxes, slider combinations, group boxes, status lights, buttons, line graphs, row layout components, column layout components, and grid layout components, where: The input box, the dial, the static text box, the slider combination, the group box, the status light, the button and the line graph are basic components; The row layout component, the column layout component, and the grid layout component belong to layout components.
3. The method according to claim 1, characterized in that The data item information includes the data item sequence number, data item name, category name, number of elements, data item description, data item default value, data item minimum value, data item maximum value, data item precision, data item unit and data item abbreviation.
4. The method according to claim 1, characterized in that The push conditions are configured in the second configuration file, including write push, update push and periodic push.
5. The method according to claim 1, characterized in that: The second configuration file is stored in a service configuration database.
6. The method according to claim 1, characterized in that The interaction event is also used to actively obtain data items from the data pool.
7. The method according to claim 1, characterized in that: Determining the component code according to the component type of the current node includes: Determine whether the component type of the current node belongs to a basic component; If yes, matching the basic component code from a general component library according to the component information of the current node, where the general component library includes multiple basic components and their corresponding basic component codes; If not, generate layout component code according to the component layout information of the current node and traverse the subcomponents of the current node.
8. A software interface design device, characterized in that: It includes file parsing module, component identification module and component integration module, among which: The file parsing module is used to parse the component tree according to the first configuration file. The first configuration file is used to configure the static interface of the software, including component information and component layout information. The component information includes component ID, component type, component width, component height, component font, component color and interaction event. The interaction event will be converted into a process message when triggered. The component layout information includes the component ID, parent component ID, child component ID, model name, number of child component rows, number of child component columns, child component alignment, child component spacing and relative position of child components. The model name is used to bind the data model. The data model includes the model name and the data item sequence number corresponding to each child component. The data item sequence number corresponding to each child component is selected from the interface subscription data item. The interface subscription data item includes the data item sequence number subscribed from all data item information. The data item information is used to define the result data obtained and stored in the data pool after the software executes the test item according to the process message. The data pool pushes the corresponding result data to the user interface based on the interface subscription data item when the push condition is met. The data model, the interface subscription data item and the data item information are configured in the second configuration file; The component identification module is used to traverse the component tree starting from the root node and determine the component code according to the component type of the current node; The component integration module is used to construct a user interface according to the component codes of all nodes.
9. A computing device, characterized in that include: a memory for storing program instructions; A processor is configured to call the program instructions stored in the memory and execute the method according to any one of claims 1 to 7 according to the obtained program.
10. A computer-readable non-volatile storage medium, characterized in that: The method comprises computer-readable instructions, and when a computer reads and executes the computer-readable instructions, the computer is caused to execute the method according to any one of claims 1 to 7.