Creation method and device of automatic driving visual panel, equipment and storage medium

Abstract

The invention relates to the technical field of automatic driving, and discloses an automatic driving visual panel creation method, device and equipment and a storage medium, and the method comprises the steps: receiving a panel creation instruction of a user for automatic driving function debugging, and generating an initial panel according to the panel creation instruction; responding to a dragging operation for a target regulation and control component in the material component library, and obtaining component instance data and a dynamic form structure corresponding to the target regulation and control component; fusing the component instance data and the dynamic form structure to obtain first fused data, and rendering the first fused data to the initial panel to obtain a first debugging panel in an editing state; and converting the first debugging panel into a target debugging panel in a running state when a running operation of a user on the first debugging panel is received. The problems that an existing automatic driving debugging tool is fixed in function, cannot arrange control signals in real time and lacks a general interaction mechanism are solved.

Description

Technical Field

[0001] This invention relates to the field of autonomous driving technology, and more specifically to a method, apparatus, device, and storage medium for creating an autonomous driving visualization panel. Background Technology

[0002] In the software development process, existing visualization and debugging tools (such as RViz, RQt, etc.) and standalone utilities generally suffer from limited functionality. These tools often only perform specific functions, and if user needs do not match the tool's capabilities, new tools must be developed independently. For example, when a company is developing an autonomous driving system or middleware, if it needs to debug specific control signals that existing tools cannot support, it must develop the corresponding control tools itself. Furthermore, the same functions need to be implemented separately in different middleware or systems. The lack of a universal solution that allows for flexible programming, adjustment of control signals, and real-time modification and use leads to low debugging efficiency during the development process.

[0003] Existing tools like rviz and rqt require modifying configuration files to adjust functionality, necessitating a system restart after each modification. This not only lacks real-time editing capabilities but also demands a high level of user proficiency, and the edited results are difficult to verify beforehand. Furthermore, existing solutions lack a universal debugging and control method, requiring intrusion into application code. Developing new tools necessitates separate design for different control functions, leading to a surge in tool maintenance costs and resource waste as underlying system functions are updated. Moreover, the lack of unified usage standards across various tools, with their inconsistent styles, increases the learning curve for users, resulting in overall inefficiency and an unscientific approach. Summary of the Invention

[0004] In view of this, embodiments of the present invention provide a method, apparatus, device and storage medium for creating an autonomous driving visualization panel, in order to solve the problems of existing autonomous driving debugging tools having fixed functions, being unable to orchestrate control signals in real time and lacking a universal interaction mechanism.

[0005] In a first aspect, embodiments of the present invention provide a method for creating an autonomous driving visualization panel, the method comprising:

[0006] Receive a panel creation instruction from a user for debugging the autonomous driving function, and generate an initial panel according to the panel creation instruction;

[0007] In response to a drag-and-drop operation on a target control component in a material component library, the system obtains the component instance data and dynamic form structure corresponding to the target control component. The material component library includes multiple preset control components, and the target control component is any one of the preset control components. The preset control component is used to generate control signals for an autonomous driving function based on user interaction behavior.

[0008] The component instance data and the dynamic form structure are merged to obtain first merged data, and the first merged data is rendered to the initial panel to obtain the first debug panel in the editing state.

[0009] When a user performs a running operation on the first debug panel, the first debug panel in the editing state is converted into the target debug panel in the running state.

[0010] Furthermore, prior to a drag-and-drop operation targeting a control component in the material component library, the method further includes:

[0011] Receive a component creation instruction from a user, wherein the component creation instruction includes a component identifier;

[0012] A preset control component is created based on the component identifier, and a preset configuration file corresponding to the component identifier is obtained, wherein the preset configuration file includes an attribute hierarchy structure and initialization fields;

[0013] The attribute hierarchy is converted into a dynamic form structure, and the component instance data is constructed using the initialization fields;

[0014] The preset control component, the component instance data, and the dynamic form structure are associated and stored in the material component library.

[0015] Furthermore, the step of converting the attribute hierarchy into a dynamic form structure includes:

[0016] Parse the attribute types in the attribute hierarchy;

[0017] Based on the mapping relationship between preset attribute types and preset form controls, determine the form control that matches the attribute type;

[0018] The form controls are nested and combined according to the attribute hierarchy to obtain a dynamic form structure.

[0019] Furthermore, the method also includes:

[0020] Responding to the modification operation triggered by the user in the first debugging panel;

[0021] The component instance data is updated according to the modification operation to obtain the updated component instance data and the updated dynamic form structure;

[0022] The updated component instance data and the updated dynamic form structure are merged to obtain second merged data, and the second merged data is rendered to the first debug panel to obtain the second debug panel in edit state.

[0023] Furthermore, updating the component instance data according to the modification operation to obtain the updated component instance data includes:

[0024] Obtain the attribute fields and modified values ​​corresponding to the modification operation;

[0025] Based on the attribute field, locate the target attribute in the component instance data;

[0026] The modified value is updated to the target attribute to generate updated component instance data.

[0027] Furthermore, the method also includes:

[0028] Responding to the undo command triggered by the user on the first debug panel;

[0029] According to the cancellation instruction, obtain the historical operation sequence associated with the first debugging panel, and extract the historical component instance data and historical form structure of the previous state from the historical operation sequence;

[0030] The historical component instance data and the historical form structure are merged to obtain third merged data, and the third merged data is rendered to the first debugging panel to obtain the third debugging panel in the editing state.

[0031] Furthermore, the step of converting the first debug panel in the editing state into the target debug panel in the running state includes:

[0032] Obtain the panel layout information and component set information of the first debugging panel;

[0033] Render the component view to the target debug panel container based on the panel layout information and the component collection information;

[0034] Each component in the target debug panel container is bound to a corresponding event handling strategy, and a communication link is established between the target debug panel container and the target system to obtain the target debug panel in its running state.

[0035] Secondly, embodiments of the present invention provide an apparatus for creating an autonomous driving visualization panel, the apparatus comprising:

[0036] A receiving module is used to receive the user's panel creation instruction and generate an initial panel according to the panel creation instruction.

[0037] The response module is used to respond to the drag operation of the target control component in the material component library, and to obtain the component instance data and dynamic form structure corresponding to the target control component. The material component library includes multiple preset control components, and the target control component is any one of the preset control components. The preset control component is used to generate control signals for the automatic driving function based on user interaction behavior.

[0038] The fusion module is used to fuse the component instance data and the dynamic form structure to obtain first fused data, and render the first fused data to the initial panel to obtain the first debug panel in the editing state;

[0039] The conversion module is used to convert the first debugging panel in the editing state into the target debugging panel in the running state when it receives a user's running operation on the first debugging panel.

[0040] Thirdly, embodiments of the present invention provide a computer device, including: a memory and a processor, the memory and the processor being communicatively connected to each other, the memory storing computer instructions, and the processor executing the computer instructions to perform the method described in the first aspect or any corresponding embodiment thereof.

[0041] Fourthly, embodiments of the present invention provide a computer-readable storage medium storing computer instructions that cause a computer to perform the method described in the first aspect or any of its corresponding embodiments.

[0042] The method provided in this application has the following beneficial effects:

[0043] The method provided in this application receives a user panel creation command to generate an initial panel, laying the foundation for subsequent operations and enabling users to quickly start the panel creation process; it responds to the drag-and-drop operation of the target control component and obtains the corresponding data and structure, supporting users to flexibly select components based on visual operations, greatly improving the ease of operation and interactive experience; it integrates and renders the component instance data and dynamic form structure, accurately presenting the user-selected components on the panel, ensuring the consistency of panel function and display; it converts the edit state panel to the running state, realizing the conversion of user interaction events into target system control signals, achieving a closed loop from panel design to actual functional output, enabling users to efficiently create running panels that can control the target system in real time through intuitive graphical operations, solving the problems of fixed functions and lack of real-time interaction and general control mechanisms in existing debugging tools, and significantly improving the flexibility and efficiency of development and debugging. Attached Figure Description

[0044] To more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0045] Figure 1 This is a flowchart illustrating a method for creating an autonomous driving visualization panel according to an embodiment of the present invention;

[0046] Figure 2 This is a functional schematic diagram of a custom panel system according to an embodiment of the present invention;

[0047] Figure 3 This is a flowchart illustrating the process of building an editing panel and configuring components according to an embodiment of the present invention;

[0048] Figure 4 This is a schematic diagram illustrating the process of creating and configuring the operation panel according to an embodiment of the present invention;

[0049] Figure 5 This is a flowchart illustrating the panel rendering and associated target system according to an embodiment of the present invention;

[0050] Figure 6 This is a structural block diagram of an apparatus for creating an autonomous driving visualization panel according to an embodiment of the present invention;

[0051] Figure 7 This is a schematic diagram of the hardware structure of a computer device according to an embodiment of the present invention. Detailed Implementation

[0052] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0053] According to embodiments of the present invention, a method, apparatus, device, and storage medium for creating an autonomous driving visualization panel are provided. It should be noted that the steps shown in the flowcharts in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowcharts, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0054] This embodiment provides a method for creating an autonomous driving visualization panel. Figure 1 This is a flowchart of a method for creating an autonomous driving visualization panel according to an embodiment of the present invention, such as... Figure 1 As shown, the process includes the following steps:

[0055] Step S11: Receive the user's panel creation instruction and generate the initial panel according to the panel creation instruction.

[0056] It should be noted that the panel creation command refers to the operation command triggered by the user in the system to create a panel, such as clicking the create panel button on the system interface. The initial panel is a blank panel generated by the system according to the panel creation command, which has not yet had any components added or edited. It will be used later to build the control interface for interacting with the autonomous driving system.

[0057] In this embodiment, when the system receives the user's panel creation instruction, it first determines whether the panel management module has been initialized. If not, it calls the getList interface to retrieve all panel data from the user database. Then, it triggers a creation action, inserts basic information of the panel (such as function name, size, description, etc.) into the database through the creation action, and creates a panel instance for global use. Then, it caches the panel data to the front end, updates the panel management list, and re-renders the view, thereby generating an initial panel that can be edited for subsequent components. This panel will serve as the basic carrier for debugging autonomous driving functions.

[0058] Step S12: In response to the drag-and-drop operation of the target control component in the material component library, the component instance data and dynamic form structure corresponding to the target control component are obtained. The material component library includes multiple preset control components, and the target control component is any one of the preset control components. The preset control components are used to generate control signals for the automatic driving function based on user interaction behavior.

[0059] It should be noted that the material component library refers to the collection of basic and composite components provided by the system, including preset control components such as buttons, input boxes, text, images, bar charts, pie charts, tables, and progress bars. These preset control components are used to generate control signals for autonomous driving functions (such as steering wheel signals and vehicle speed adjustment signals) based on user interaction. The target control component is the specific component that the user selects and drags from the component library. The drag-and-drop operation refers to the interactive behavior of the user dragging the target control component from the component library to the editor.

[0060] Before the user drags and drops the target control component, the system has already completed the component pre-preparation: receiving the component creation instruction (including the component identifier), creating the preset control component based on the identifier and obtaining the corresponding preset configuration file (including attribute hierarchy and initialization fields), parsing the attribute hierarchy according to attribute type, matching form controls according to the preset mapping relationship and nesting them into a dynamic form structure, constructing component instance data using the initialization fields, and finally storing the preset control component, instance data, and form structure together in the material component library. The attribute configuration of the preset control component (such as the "click event" of a button) is directly associated with the control logic of the autonomous driving system; for example, a button click can be mapped to a "activate cruise control" signal.

[0061] When a user triggers a drag-and-drop operation, the system responds to this interaction event, retrieving the component instance data (such as user-editable attributes like initial position and style) and dynamic form structure (such as attribute configuration form controls) corresponding to the target control component from the component library. This provides the data foundation for subsequent fusion rendering. The component instance data is instance data created based on the component's preset information, and the dynamic form structure is a hierarchical structure of form controls generated based on the component's preset configuration file. This data will be used to build the component interface that interacts with the autonomous driving system; for example, an input box can be used to set the target speed for autonomous driving.

[0062] A functional diagram of the custom panel system, such as... Figure 2 As shown, the left side is the material component library, which includes preset control components such as buttons, input boxes, text, and images; the middle is the editor area, which can receive target control components dragged by the user to build the panel (the example shows the editing state of the input box and button components); the right side presents the target debug panel effect after the component has been edited and converted into a running state.

[0063] Step S13: Merge the component instance data and the dynamic form structure to obtain the first merged data, and render the first merged data to the initial panel to obtain the first debug panel in the editing state.

[0064] It should be noted that component instance data refers to component instance user data (such as location, style, autonomous driving control signal parameters, etc.) created based on the preset information of the material component library. The dynamic form structure is a nested combination of form controls (such as input boxes, drop-down boxes, etc. arranged according to attribute hierarchy) generated by converting the attribute hierarchy of the component preset configuration file. The first fused data is the complete configuration data formed by integrating the component instance data and the dynamic form structure. The first debug panel in the edit state is a function panel that can be edited in real time after the fused data is rendered, used for visually configuring the control components of the autonomous driving system.

[0065] In this embodiment, after obtaining component instance data (including user-editable initial attribute values) and a dynamic form structure (including attribute editing control hierarchy), the attribute values ​​in the component instance data are mapped and associated with the controls in the dynamic form structure to form first fused data containing component appearance configuration and attribute editing capabilities. Next, the fused data is converted into visual view controls by the panel editor's rendering module and rendered onto the canvas area of ​​the initial panel according to the position, size, and other information in the component instance data. Simultaneously, the attribute editing interface corresponding to the dynamic form structure is synchronously displayed in the attribute configurator, ultimately generating a first debugging panel that can be edited in real-time through drag-and-drop, attribute modification, and other operations. This enables the visual presentation and interactive configuration of the autonomous driving function control components on the panel. For example, after dragging a slider component to the panel, its mapped throttle opening control signal range can be configured through the dynamic form structure.

[0066] As an example, a flowchart illustrating the editing panel setup and component configuration process is shown below. Figure 3 As shown, the process starts by entering the creation command in the panel list to generate the basics; then, drag and drop the target control component into the editor to get the first debugging panel; after selecting the component, double-click to open the property panel, where you can set the component alias (if the alias is duplicated, you need to set it again), bind the data source, and control / display property settings in parallel; after completing these configurations, click the save button to finally change the style of the component in the first debugging panel, clearly showing the complete operation process from panel creation, adding the component to the property configuration, and saving to take effect.

[0067] Step S14: When receiving a user's run operation on the first debug panel, the first debug panel in the edit state is converted into the target debug panel in the run state.

[0068] It should be noted that the "run" operation refers to the user's instruction to switch the panel from editing mode to usage mode (such as clicking the "run" button). The first debugging panel is a function panel that is in editing mode and has completed component configuration. The target debugging panel is the converted running status panel, which is used to convert the user's operations on the panel into signals to control the autonomous driving system (such as braking signals and lane keeping signals).

[0069] In this embodiment, upon receiving a user's operation on the first debugging panel, the system first acquires the panel layout information (including basic information such as panel name, size, and description) and component set information (including data related to autonomous driving control, such as the position, style, and signal description of each component). Then, based on the panel layout information and component set information, the component view is rendered into the target debugging panel container to form a visual running interface. Finally, a corresponding event handling strategy (e.g., signal sending logic when a button is clicked) is bound to each component in the target debugging panel container, and a communication link is established between the target debugging panel container and the autonomous driving system. This enables the debugging components in the target debugging panel to convert user interaction events (such as input box content modification, button clicks, etc.) into control signals according to a standardized protocol and transmit them to the autonomous driving system, thereby completing the conversion from the first debugging panel in the editing state to the target debugging panel in the running state.

[0070] As an example, a flowchart illustrating the creation and configuration process of the target debug panel is shown below. Figure 4 As shown, the process begins by creating / opening a panel. Then, it proceeds in two ways: adding components to the panel, which involves binding component variables, setting component properties, and updating the component list; and modifying existing components, which involves modifying specified property values ​​in the property panel and saving the property panel. After these operations are complete, the panel is saved, and then the panel is run to implement control and display functions. The process concludes by demonstrating the complete logic from creating / opening a panel to adding, modifying, configuring, and running / displaying components.

[0071] A flowchart illustrating the panel rendering and associated target system, as shown below. Figure 5 As shown, the process starts from the beginning and then splits into two cases: For opening an existing panel, clicking "Render" will render the current panel; for opening a rendering panel, the list of renderable panels is first opened, and then a new rendering panel is added through the rendering panel. After these two branch operations, it checks whether a target system is selected. If not, it adds the panel and selects a target system; if selected, it performs control / display operations. Finally, the process ends, clearly demonstrating the complete workflow logic from opening and rendering the panel to associating it with a target system and controlling its display.

[0072] In this embodiment of the application, before responding to a drag operation on a target control component in the material component library, the method further includes steps A1-A4:

[0073] Step A1: Receive the user's component creation instruction, wherein the component creation instruction includes a component identifier.

[0074] Specifically, the system receives user creation operations for target control components in the material component library through a front-end interactive event listening mechanism (such as mouse click and drag-and-drop start events), and parses the operation to generate instruction data containing component identifiers. For example, when a user clicks the "steering wheel control button" component in the component library list or starts dragging the component, the front-end module captures the operation and generates a component creation instruction containing the component identifier "steering wheel control button component ID". This instruction is passed to the system processing module through the event bus or API interface, providing a data foundation for subsequent retrieval of preset configuration files and creation of component instances based on the component identifier. The component identifier is associated with the steering control protocol of the autonomous driving system, and the subsequent component instance will be used to generate steering angle control signals.

[0075] Step A2: Create a preset control component based on the component identifier and obtain the preset configuration file corresponding to the component identifier. The preset configuration file includes an attribute hierarchy and initialization fields.

[0076] Specifically, the preset configuration file is a JSON file that stores the component's attribute structure and initial values. It includes an attribute hierarchy (organized by component-attribute group-attribute) and initialization fields (default attribute values ​​when the component is created). Based on the component identifier (e.g., "button component ID"), the corresponding template is called from the preset control component collection in the material component library to create a blank preset control component instance. Simultaneously, the associated preset configuration file is located and read based on the component identifier. For example, the button component's configuration file defines attribute groups such as "click event" and "style," with each attribute group containing specific attributes such as "color" and "position," along with initial values ​​(e.g., the initial color value is red). The attribute hierarchy and initialization fields in this configuration file will serve as the basis for subsequently generating dynamic forms and component instance data, ensuring that components have a standardized attribute structure and default parameters when created.

[0077] Step A3: Convert the attribute hierarchy into a dynamic form structure and use the initialization fields to build component instance data.

[0078] Specifically, firstly, the attributes at each level of the attribute hierarchy (such as component layer, attribute group layer, and attribute layer) are parsed, and the type of each attribute (such as text, enumeration, numeric, etc.) is identified. Then, according to the preset attribute type-form control mapping relationship (such as text type corresponding to input box control, enumeration type corresponding to drop-down box control), the corresponding form control is matched for each attribute. Next, according to the nesting relationship of the attribute hierarchy (such as attribute group corresponding to form group control), the form controls are combined into a dynamic form structure. At the same time, using the default values ​​in the initialization field (such as the initial position coordinates being [100, 50]), initial instance data containing attributes such as component position, style, and signal is constructed, so that the component instance has editable default parameters when it is created.

[0079] Step A4: Associate and store the preset control components, component instance data, and dynamic form structure in the material component library.

[0080] Specifically, the created preset control components, generated component instance data (including initialization fields), and dynamic form structure (including control mapping relationships) are stored in the material component library through a data association mechanism. Using the component identifier (e.g., "button component ID") as an index, entries are created in the library, and key-value pairs are mapped and stored for the preset control component instance, the attribute values ​​in the instance data (e.g., initial position [100, 50]), and the control configurations of the dynamic form structure (e.g., color attributes corresponding to dropdown controls). During storage, the front-end first caches the associated data in memory or local storage, and simultaneously persists the data to the component library table in the database (e.g., a table containing component ID, preset data, instance data, and form structure fields) via the back-end API. This ensures that when users subsequently drag and drop the target control component from the component library, they can obtain and load the complete component configuration information in real time.

[0081] The method provided in this application achieves standardized integration between component attributes and the autonomous driving system by pre-creating and storing preset control components related to autonomous driving functions. The attribute hierarchy in the preset configuration file is directly associated with the vehicle control protocol, eliminating the need for users to repeatedly configure underlying communication parameters and significantly improving panel creation efficiency. The default values ​​provided by the initialization fields offer a safety baseline for users, avoiding potential risks caused by misconfiguration and ensuring that the generated control signals conform to the interface specifications of the autonomous driving system.

[0082] In this embodiment, converting the attribute hierarchy into a dynamic form structure includes: parsing the attribute types in the attribute hierarchy; determining the form control that matches the attribute type based on the mapping relationship between preset attribute types and preset form controls; and nesting and combining the form controls according to the attribute hierarchy to obtain the dynamic form structure.

[0083] It should be noted that attribute types are the inherent data types of attributes at each level (such as text, enumeration, numeric, etc.), preset form controls are system-predefined interactive controls (such as input boxes, drop-down boxes, radio buttons, etc.), mapping relationships are the correspondence rules between attribute types and form controls (such as enumeration types corresponding to drop-down boxes, numeric types corresponding to input boxes), and dynamic form structures are control hierarchy systems based on nested combinations of attribute levels.

[0084] Specifically, first, the attribute hierarchy is traversed, and the type information of each attribute layer (such as component layer, attribute group layer, and attribute layer) is parsed. For example, the "color" attribute is identified as an enumeration type and the "position" attribute as a numeric type. Second, according to the preset "attribute type - form control" mapping rules (stored in the system configuration file or front-end code), the corresponding control is matched for each attribute. For example, the enumeration type "color" attribute matches a drop-down list control, and the numeric type "position" attribute matches an input box control. Finally, according to the nesting relationship of the attribute hierarchy (such as attribute groups corresponding to form group controls), the matched form controls are hierarchically combined. For example, the "color" and "position" controls are nested in the group controls corresponding to the "style" attribute group, forming a dynamic form control tree structure consistent with the original attribute hierarchy.

[0085] The method provided in this application transforms abstract autonomous driving control parameters into an intuitive interactive interface through intelligent mapping of attribute types to form controls. Users can directly adjust complex parameters (such as acceleration curves) through visual controls without writing code, thus lowering the barrier to panel creation. The nested combination of form controls maintains consistency with the attribute hierarchy, ensuring a clear display of complex control logic and improving the accuracy of parameter configuration.

[0086] In this embodiment of the application, the method further includes the following steps B1-B3:

[0087] Step B1 is in response to a modification operation triggered by the user in the first debug panel.

[0088] Specifically, user actions on the first debug panel are captured in real time through a front-end event listening mechanism (such as mouse movement, input box content changes, and button click events). When a user performs a modification operation (e.g., changing the "X-coordinate" of a component in the property configurator), the front-end module identifies the operation type and generates a corresponding modification instruction. This instruction includes the identifier of the modified component, the attribute field, and the new modified value. The instruction is passed to the system processing module through the event bus or data synchronization interface, providing trigger signals for subsequent updates to component instance data and re-rendering of the panel, ensuring that the modification operation is accurately received and processed by the system.

[0089] Step B2: Update the component instance data according to the modification operation to obtain the updated component instance data and the updated dynamic form structure.

[0090] Specifically, the system first retrieves the attribute fields (e.g., "X-coordinate of position") and modified values ​​(e.g., "100") corresponding to the modification operation. Then, it locates the target attribute in the component instance data (e.g., the position attribute object of a button component) using the component identifier and attribute fields. The modified value is then updated to the corresponding field of the target attribute, generating component instance data containing the latest user configuration. Simultaneously, if the modification operation involves associated attributes of form controls (e.g., changes to enumeration type attribute values), the system updates the state (e.g., selected state of a dropdown option) or editability (e.g., triggering the display / hiding of other controls) of the corresponding controls in the dynamic form structure based on the preset "attribute-control" mapping relationship, ensuring real-time consistency between the form structure and the component instance data.

[0091] Step B3: Merge the updated component instance data and the updated dynamic form structure to obtain the second merged data, and render the second merged data to the first debug panel to obtain the second debug panel in edit mode.

[0092] Specifically, the updated component instance data (such as modified position attribute values) and the updated dynamic form structure (such as the control states of corresponding attributes) are mapped and integrated to form a second set of merged data containing the latest component attributes and form configurations. Next, the panel editor's rendering module converts the component position, style, and other information from the merged data into visual view controls, synchronously updating the appearance and position of the components on the canvas. Simultaneously, the attribute editing interface corresponding to the dynamic form structure (such as dropdowns and input boxes) is re-rendered to the attribute configurator to ensure that the form control states are consistent with the component instance data. Finally, through a front-end data synchronization mechanism, the second set of merged data is rendered in real-time to the first debug panel, generating a second debug panel that can be further edited, thus visually presenting the modification operations.

[0093] The method provided in this application supports real-time modification and dynamic updates during panel editing, improving the flexibility of autonomous driving function debugging. Users can adjust parameters and observe system responses in real time, forming a closed-loop process of modification-verification. The synchronous update of the dynamic form structure ensures the consistency between the attribute editing interface and the actual control logic, avoiding debugging errors caused by the asynchrony between the interface and data.

[0094] In this embodiment of the application, updating the component instance data according to the modification operation to obtain the updated component instance data includes: obtaining the attribute field and the modified value corresponding to the modification operation; locating the target attribute in the component instance data based on the attribute field; updating the modified value to the target attribute, and generating the updated component instance data.

[0095] Specifically, modification operations (such as the defocusing event of the input box in the attribute panel) are captured by front-end event listeners. The operation parameters are parsed to obtain the corresponding attribute fields (such as "X-axis position") and the modified values ​​(such as "100"). Based on the component identifier and attribute fields, the target attribute is located in the component instance data through object property addressing. The modified value is directly assigned to the target attribute to generate component instance data containing the latest user configuration. This data is updated in real time through the front-end state management mechanism and synchronized to the database for persistent storage.

[0096] The method provided in this application offers a precise data update mechanism, ensuring that user modifications are accurately reflected in the autonomous driving control parameters. By precisely locating the corresponding control parameter through attribute fields and updating it in real time, it avoids configuration errors caused by parameter name mismatches in traditional methods. Directly manipulating the target attribute reduces the computational overhead of data updates and improves system response speed.

[0097] In this embodiment of the application, the method further includes the following steps C1-C3:

[0098] Step C1 is in response to an undo command triggered by the user on the first debug panel.

[0099] Specifically, the system uses a front-end interaction event listening mechanism (such as button click events and keyboard key events) to capture undo operations triggered by the user on the first debugging panel in real time. When the user performs an undo operation, the front-end module recognizes the corresponding event (such as an undo event), generates an event object containing the undo instruction, and transmits the instruction to the system processing module through the event bus or data synchronization interface. This instruction carries a unique identifier for the current panel (such as a panel ID) to facilitate subsequent association with historical operation data, providing trigger signals and contextual basis for obtaining historical operation sequences and previous state data.

[0100] Step C2: Obtain the historical operation sequence associated with the first debug panel according to the undo command, and extract the historical component instance data and historical form structure of the previous state from the historical operation sequence.

[0101] Specifically, upon receiving an undo command, the system first retrieves the historical operation sequence associated with the first debug panel from the front-end state management tool (such as a state hook) or the database using the panel identifier (e.g., panel number). This sequence stores snapshots of each operation in a stack structure or timeline format. Next, based on the number of times the undo command was triggered or the order of operations, the record of the previous state is extracted from the historical operation sequence (e.g., if the current operation stack is at the top of the nth operation, the previous state is a snapshot of the (n-1)th operation). This record contains component instance data (such as historical values ​​of position and style) and dynamic form structure (such as historical form control configurations) from the previous state. By parsing the data fields in this record, the historical component instance data and historical form structure are separated, providing the complete configuration information required for rollback in the blended rendering.

[0102] Step C3: Merge the historical component instance data and the historical form structure to obtain the third merged data, and render the third merged data to the first debug panel to obtain the third debug panel in the edit state.

[0103] Specifically, historical component instance data (such as the historical position coordinates of a component [50,50]) and historical form structures (such as the input box control configuration corresponding to the historical attributes of the component) are integrated at the field level to form third fused data that includes the appearance and attribute editing capabilities of the component in the previous state. Next, through the rendering module of the panel editor, the component position, style, and other information in the fused data are converted into visual view controls, covering the display state of the current component in the canvas; at the same time, the attribute editing interface corresponding to the historical form structure (such as the option state of the historical form control) is re-rendered to the attribute configurator. Finally, through the front-end data synchronization mechanism, the third fused data is rendered to the first debug panel in real time, generating a third debug panel that reverts to the previous editing state, realizing the visual presentation of the undo operation.

[0104] The method provided in this application provides a safety net for editing autonomous driving panels through an undo mechanism, making it particularly suitable for complex debugging scenarios. Users can quickly restore to the previous valid state using the undo command, avoiding the tedious process of reconfiguration. The hierarchical storage of historical operation sequences supports fine-grained undo / redo, improving editing flexibility, and the complete operation record also provides a reliable basis for subsequent debugging and traceability.

[0105] In this embodiment of the application, converting the first debug panel in the editing state into the target debug panel in the running state includes the following steps D1-D3:

[0106] Step D1: Obtain the panel layout information and component set information of the first debugging panel.

[0107] Specifically, upon receiving the run command, the system first retrieves the panel state data of the first debug panel from the front-end cache (or database) using the panel identifier. This data includes panel layout information (such as parsing the panel size and name from fields like canvas number and panel number in the panel state) and component collection information (obtaining the X-axis position, Y-axis position, style, and other attributes of all component instances from the component state field in the panel state). The system then reads the complete state of the current editing panel from the panel management module's cache. The component collection information stores the unique identifier, position, style, and signal configuration of each component in an array, while the panel layout information is stored in the root node of the panel state. This ensures that the retrieved data fully describes the panel's appearance and component configuration, providing the foundational data for subsequent rendering of the component view.

[0108] Step D2: Render the component view to the target debug panel container based on the panel layout information and component collection information.

[0109] Specifically, after obtaining panel layout information (such as panel width, height, and background style) and component collection information (such as component position arrays), the basic framework of the target debug panel container is first created based on the panel layout information (such as generating HTML container elements of a specified size). Next, each component instance data in the component collection information is traversed, and based on its position coordinates and style attributes, the component data is converted into visual view controls (such as rendering a button component as a button element and setting Cascading Style Sheets for positioning) using a front-end rendering engine (such as React or Vue). Specifically, each component instance is mapped to a corresponding DOM element, its position is achieved through absolute positioning or flexbox layout, and its styles are applied through inline Cascading Style Sheets or class names. Finally, it is rendered into the target debug panel container according to the component collection hierarchy (such as cascading order attributes), forming a component view layout consistent with the editing state.

[0110] Step D3: Bind the corresponding event handling strategy to each component in the target debug panel container, and establish a communication link between the target debug panel container and the target system to obtain the target debug panel in running state.

[0111] Specifically, the process first iterates through all component instances (such as buttons and input boxes) in the target debugging panel container. Based on the component type (such as "button"), it retrieves the corresponding event handling strategy (such as a click event triggering a signal sending function) from the preset event library. Then, through a front-end event listening mechanism (such as adding event listeners), the strategy is bound to the component's interactive behavior (such as a click event). Simultaneously, based on a standardized control communication channel design, a bidirectional communication link is established between the target debugging panel and the autonomous driving target system via a backend service interface (such as network sockets or Hypertext Transfer Protocol). This link follows a unified data transmission protocol (such as encapsulating control signals in JSON format). After binding, when the user interacts with a component (such as clicking a button), the event handling strategy converts the operation into a standardized control signal (such as {type: "button click", data: {signal: "lights on"}}), which is then transmitted to the autonomous driving system through the communication link, achieving real-time linkage between user interaction and functional control within the autonomous driving system.

[0112] The method provided in this application defines the process of converting an edit-state debug panel into a running-state debug panel, ensuring seamless integration from design to practical application. It automatically extracts signal conversion strategies from the component set and establishes a connection with the autonomous driving system through a standardized communication link, enabling the same panel design to be compatible with different models of autonomous vehicles. The pre-binding of component event handling strategies ensures fast response times in the running state, meeting the real-time requirements of autonomous driving.

[0113] This embodiment also provides an apparatus for creating an autonomous driving visualization panel, which is used to implement the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the apparatus described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0114] This embodiment provides a device for creating an autonomous driving visualization panel, such as... Figure 6 As shown, it includes:

[0115] The receiving module 61 is used to receive the panel creation instruction from the user for debugging the autonomous driving function, and generate an initial panel according to the panel creation instruction;

[0116] The response module 62 is used to respond to the drag operation of the target control component in the material component library and to obtain the component instance data and dynamic form structure corresponding to the target control component. The material component library includes multiple preset control components, and the target control component is any one of the preset control components. The preset control components are used to generate control signals for the automatic driving function based on user interaction behavior.

[0117] The fusion module 63 is used to fuse component instance data and dynamic form structure to obtain first fused data, and render the first fused data to the initial panel to obtain the first debug panel in the editing state;

[0118] The conversion module 64 is used to convert the first debug panel in the editing state into the target debug panel in the running state when it receives a user's running operation on the first debug panel.

[0119] Furthermore, the device also includes a storage module, wherein the storage module includes a first receiving submodule, an acquisition submodule, a construction submodule, and a storage submodule;

[0120] The first receiving submodule is used to receive the user's component creation instruction, wherein the component creation instruction includes a component identifier;

[0121] The acquisition submodule is used to create a preset control component based on the component identifier and to obtain the preset configuration file corresponding to the component identifier. The preset configuration file includes the attribute hierarchy and initialization fields.

[0122] Build a submodule to convert the attribute hierarchy into a dynamic form structure and use initialization fields to build component instance data;

[0123] The storage submodule uses language to associate and store preset control components, component instance data, and dynamic form structures to the material component library.

[0124] Furthermore, a submodule is constructed to parse the attribute types in the attribute hierarchy; based on the mapping relationship between preset attribute types and preset form controls, the form controls that match the attribute types are determined; and the form controls are nested and combined according to the attribute hierarchy to obtain a dynamic form structure.

[0125] Furthermore, the device also includes an update module, wherein the update module includes a response submodule, an update submodule, and a fusion submodule;

[0126] The response submodule is used to respond to modification operations triggered by the user in the first debug panel;

[0127] The update submodule is used to update the component instance data based on the modification operation, so as to obtain the updated component instance data and the updated dynamic form structure;

[0128] The fusion submodule is used to fuse the updated component instance data and the updated dynamic form structure to obtain the second fused data, and then render the second fused data to the first debug panel to obtain the second debug panel in edit mode.

[0129] Furthermore, the update submodule is used to obtain the attribute fields and modified values ​​corresponding to the modification operation; locate the target attribute in the component instance data based on the attribute fields; update the modified value to the target attribute, and generate the updated component instance data.

[0130] Furthermore, the device also includes: an extraction module, used to respond to an undo command triggered by the user on the first debugging panel; to obtain the historical operation sequence associated with the first debugging panel according to the undo command, and to extract the historical component instance data and historical form structure of the previous state from the historical operation sequence; to fuse the historical component instance data and historical form structure to obtain third fused data, and to render the third fused data to the first debugging panel to obtain the third debugging panel in the editing state.

[0131] Furthermore, the conversion module 64 is used to obtain the panel layout information and component set information of the first debugging panel; render the component view to the target debugging panel container based on the panel layout information and component set information; bind a corresponding event handling strategy to each component in the target debugging panel container; and establish a communication link between the target debugging panel container and the target system to obtain the target debugging panel in the running state.

[0132] Please see Figure 7 , Figure 7 This is a schematic diagram of the structure of a computer device provided in an optional embodiment of the present invention, such as... Figure 7 As shown, the computer device includes one or more processors 10, memory 20, and interfaces for connecting the components, including high-speed interfaces and low-speed interfaces. The components communicate with each other via different buses and can be mounted on a common motherboard or otherwise installed as needed. The processors can process instructions executed within the computer device, including instructions stored in or on memory to display graphical information of a GUI on external input / output devices (such as display devices coupled to the interfaces). In some alternative implementations, multiple processors and / or multiple buses can be used with multiple memories and multiple memory modules, if desired. Similarly, multiple computer devices can be connected, each providing some of the necessary operations (e.g., as a server array, a group of blade servers, or a multiprocessor system).

[0133] Processor 10 may be a central processing unit, a network processor, or a combination thereof. Processor 10 may further include a hardware chip. The hardware chip may be an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or a combination thereof. The programmable logic device may be a complex programmable logic device (CAMP), a field-programmable gate array (FPGA), a general-purpose array logic (GDA), or any combination thereof.

[0134] The memory 20 stores instructions executable by at least one processor 10 to cause at least one processor 10 to perform the method shown in the above embodiments.

[0135] The memory 20 may include a program storage area and a data storage area. The program storage area may store the operating system and applications required for at least one function; the data storage area may store data created based on the use of the computer device as shown by a landing page for an app. Furthermore, the memory 20 may include high-speed random access memory and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some alternative embodiments, the memory 20 may optionally include memory remotely located relative to the processor 10, which can be connected to the computer device via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0136] The memory 20 may include volatile memory, such as random access memory; the memory may also include non-volatile memory, such as flash memory, hard disk or solid-state drive; the memory 20 may also include a combination of the above types of memory.

[0137] The computer device also includes a communication interface 30 for communicating with other devices or communication networks.

[0138] This invention also provides a computer-readable storage medium. The methods described above according to embodiments of the invention can be implemented in hardware or firmware, or implemented as computer code that can be recorded on a storage medium, or implemented as computer code downloaded via a network and originally stored on a remote storage medium or a non-transitory machine-readable storage medium and then stored on a local storage medium. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium can also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code, which, when accessed and executed by the computer, processor, or hardware, implements the methods shown in the above embodiments.

[0139] Although embodiments of the invention have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of the invention, and such modifications and variations all fall within the scope defined by the appended claims.

Claims

1. A method for creating an autonomous driving visualization panel, characterized in that, The method includes: Receive a panel creation instruction from the user for debugging the autonomous driving function, and generate an initial panel according to the panel creation instruction; In response to a drag-and-drop operation on a target control component in a material component library, the system obtains the component instance data and dynamic form structure corresponding to the target control component. The material component library includes multiple preset control components, and the target control component is any one of the preset control components. The preset control component is used to generate control signals for an autonomous driving function based on user interaction behavior. The component instance data and the dynamic form structure are merged to obtain first merged data, and the first merged data is rendered to the initial panel to obtain the first debug panel in the editing state. When a user performs a running operation on the first debug panel, the first debug panel in the editing state is converted into the target debug panel in the running state.

2. The method according to claim 1, characterized in that, Prior to responding to a drag-and-drop operation targeting a control component in the material component library, the method further includes: Receive a component creation instruction from a user, wherein the component creation instruction includes a component identifier; A preset control component is created based on the component identifier, and a preset configuration file corresponding to the component identifier is obtained, wherein the preset configuration file includes an attribute hierarchy structure and initialization fields; The attribute hierarchy is converted into a dynamic form structure, and the component instance data is constructed using the initialization fields; The preset control component, the component instance data, and the dynamic form structure are associated and stored in the material component library.

3. The method according to claim 2, characterized in that, The step of converting the attribute hierarchy into a dynamic form structure includes: Parse the attribute types in the attribute hierarchy; Based on the mapping relationship between preset attribute types and preset form controls, determine the form control that matches the attribute type; The form controls are nested and combined according to the attribute hierarchy to obtain a dynamic form structure.

4. The method according to claim 1, characterized in that, The method further includes: Responding to the modification operation triggered by the user in the first debugging panel; The component instance data is updated according to the modification operation to obtain the updated component instance data and the updated dynamic form structure; The updated component instance data and the updated dynamic form structure are merged to obtain second merged data, and the second merged data is rendered to the first debug panel to obtain the second debug panel in edit state.

5. The method according to claim 4, characterized in that, The step of updating the component instance data according to the modification operation to obtain the updated component instance data includes: Obtain the attribute fields and modified values ​​corresponding to the modification operation; Based on the attribute field, locate the target attribute in the component instance data; The modified value is updated to the target attribute to generate updated component instance data.

6. The method according to claim 1, characterized in that, The method further includes: Responding to the undo command triggered by the user on the first debug panel; According to the cancellation instruction, obtain the historical operation sequence associated with the first debugging panel, and extract the historical component instance data and historical form structure of the previous state from the historical operation sequence; The historical component instance data and the historical form structure are merged to obtain third merged data, and the third merged data is rendered to the first debugging panel to obtain the third debugging panel in the editing state.

7. The method according to claim 1, characterized in that, The step of converting the first debug panel in the editing state into the target debug panel in the running state includes: Obtain the panel layout information and component set information of the first debugging panel; Render the component view to the target debug panel container based on the panel layout information and the component collection information; Each component in the target debug panel container is bound to a corresponding event handling strategy, and a communication link is established between the target debug panel container and the target system to obtain the target debug panel in its running state.

8. An apparatus for creating an autonomous driving visualization panel, characterized in that, The device includes: A receiving module is used to receive the user's panel creation instruction and generate an initial panel according to the panel creation instruction. The response module is used to respond to the drag operation of the target control component in the material component library, and to obtain the component instance data and dynamic form structure corresponding to the target control component. The material component library includes multiple preset control components, and the target control component is any one of the preset control components. The preset control component is used to generate control signals for the automatic driving function based on user interaction behavior. The fusion module is used to fuse the component instance data and the dynamic form structure to obtain first fused data, and render the first fused data to the initial panel to obtain the first debug panel in the editing state; The conversion module is used to convert the first debugging panel in the editing state into the target debugging panel in the running state when it receives a user's running operation on the first debugging panel.

9. A computer device, characterized in that, include: A memory and a processor, the memory and the processor being communicatively connected to each other, the memory storing computer instructions, the processor executing the computer instructions to perform the method of any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing the computer to perform the method of any one of claims 1 to 7.

Images