A TDU virtual simulation visual editor and editing method thereof

Abstract

The present invention proposes a TDU virtual simulation visual editor and an editing method thereof. The editor comprises a virtual resource embedding management module, a virtual simulation process editing module, a block visual editing module, and a real-time virtual simulation effect preview module. Web-end technology is used to build a project and a page structure, and a programming language is used to create a visual tool block to realize code creation from graphics. The virtual resource embedding management module comprises a picture resource adding unit, an animation resource adding unit, an audio resource adding unit, and a video resource adding unit. The picture resource adding unit is used to import a code block in a picture format into the editor; the animation resource adding unit is used to import a code block in an animation format into the editor; the audio resource adding unit is used to import a code block in an audio format into the editor; and the video resource adding unit is used to import a code block in a video format into the editor.

Description

Technical Field

[0001] The invention belongs to the field of visual editing, and in particular relates to a TDU virtual simulation visual editor and an editing method thereof. Background Art

[0002] Driven by new infrastructure, digital transformation is the inevitable path for future economic and social development. In the future, all enterprises will become digital companies. This requires not only the development of digitally enabled products but also the digital transformation of the entire product design, development, manufacturing, and service process, connecting the enterprise's internal and external environments through digital means. Transforming physical systems into digital models through simulation modeling, virtual reality, data-driven development, and interactive visualization, and using simulation models for current status monitoring, predictive analysis, and visualization, is key to achieving safe production and intelligent manufacturing. The primary value lies in simulation modeling, visualization, data interaction, analytical reasoning, and predictive optimization.

[0003] At present, when developing virtual simulation projects, a three-dimensional engine framework has been implemented, which can quickly generate corresponding virtual simulation projects by importing BosonExamFile format configuration table (hereinafter referred to as EXM configuration table) and related pictures, animations, audio, and video resource files.

[0004] However, configuring these resources presents some challenges, requiring not only coding skills but also a solid understanding of project structure. These challenges are particularly acute when providing services to the public. For those without a programming background, this development approach presents significant challenges.

[0005] Therefore, there is a great need for a Tdu virtual simulation visual editor and an editing method thereof. Summary of the Invention

[0006] The present invention proposes a TDU virtual simulation visual editor and its editing method, which solves the problem that there is a threshold in resource configuration in the existing technology. Most people do not have the ability to write code. For people without programming foundation, this development method is extremely difficult. In order to solve the above problems, a virtual simulation visual editor is used to process in the form of a graphical interface.

[0007] The technical solution of the present invention is implemented as follows: a Tdu virtual simulation visual editor, which consists of a virtual resource embedding management module, a virtual simulation process editing module, a block visual editing module and a real-time virtual simulation effect preview module, adopts Web-side technology to build projects and page structures, and creates visual tool blocks through programming languages ​​to realize the creation of codes from graphics; the virtual resource embedding management module includes a picture resource adding unit, an animation resource adding unit, an audio resource adding unit and a video resource adding unit, and the picture resource adding unit is used to import code blocks in picture format into the editor; the animation resource adding unit is used to import code blocks in animation format into the editor; the audio resource adding unit is used to add code blocks to the editor Import code blocks in audio format into the editor: import code blocks in video format into the editor through the video resource adding unit; the virtual simulation process editing module extracts the process functions into independent function type blocks, and performs virtual simulation process editing in the process editing area by dragging and splicing building blocks; the block visualization editing module includes a data display unit and a data modification unit, the data display unit is used to visualize the resource data embedded in the virtual resource management module, and back up, store and replace the data through the data modification unit; the real-time virtual simulation effect preview module uses the Webgl visualization three-dimensional engine to edit blocks while making synchronous changes and presenting virtual simulation effects in real time.

[0008] This application document uses the web-side technology Vue+TypeScript+Vite to build projects and construct page structures through a virtual simulation visual editor; the programming language Google Blockly is used to create visual tool blocks to create code from graphics. Users can build an EXM configuration table with graphic objects in a way similar to playing with Lego toys. Each graphic object is a code block, and users can splice them together to create the behavior they want, and then combine simple functions to build a complete executable EXM configuration table. The entire process only requires dragging the mouse, without keyboard typing, which is extremely convenient.

[0009] As a preferred embodiment, the virtual simulation process editing module includes a block category area management unit, a block display area management unit, a block workspace management unit, a block data conversion unit and a configuration file generation unit; the block category area management unit is used to classify and partition the code blocks, so that users can quickly find the class blocks they need through the category column; the block display area management unit is used to perform regional management of the category column display area and classify the class blocks in the display area; the block workspace management unit is used to divide the workspace into three areas including the classification area, the building block area and the script area, and adjust the placement position of the code blocks; the block data conversion unit is used to adjust the format data of the code blocks when adjusting the positions of the code blocks in different partitions in the workspace; the configuration file generation unit is used to select a resource file from the local storage for upload, and transfer the file to the back end for storage in the form of a file stream.

[0010] As a preferred embodiment, the real-time virtual simulation effect preview module includes a data access unit, a data processing unit, a data docking unit and a data interaction effect display unit. The virtual simulation display data is accessed through the data access unit and the data format is processed through the data processing unit. The processed data is sent to the data interaction effect display unit through the data docking unit to display the virtual simulation effect.

[0011] A method for editing a TDU virtual simulation visual editor comprises the following steps: S1: entering the TDU virtual simulation visual editor and then initializing a workspace in the editor; S2: after completing the workspace initialization, uploading resource data, and after acquiring the resource data, performing block area editing; S3: operating blocks in a script area through a start block, wherein the blocks in the script area select display data by selecting a block class, and then inputting the selected block class into the script area through an output block; S4: after a block in the script area is clicked, executing and synchronously operating a WebgI engine rendering and displaying information in the clicked block; S5: after completing the WebgI engine rendering, previewing through a virtual scene, and after completing the display of the information in the block, modifying and backing up the block information; S6: when the execution is completed after clicking, ending the block editing, and outputting an EXM configuration table to end the entire editing.

[0012] By adopting the above technical solution, the present invention has the following beneficial effects: Traditional development processes require personnel with professional knowledge and skills to write code and configure resource files, which are costly and expensive. The emergence of the Tdu virtual simulation visual editor will greatly reduce this cost and allow even personnel without programming knowledge to engage in this development work. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. 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.

[0014] Attachment Figure 1 This is the functional diagram of the Tdu virtual simulation visual editor framework.

[0015] Attachment Figure 2 This is the workflow diagram of the Tdu virtual simulation visual editor. DETAILED DESCRIPTION

[0016] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments of the present invention without making any creative efforts shall fall within the scope of protection of the present invention.

[0017] Example:

[0018] like Figure 1 As shown, a Tdu virtual simulation visual editor consists of a virtual resource embedding management module, a virtual simulation process editing module, a block visual editing module and a real-time virtual simulation effect preview module. It uses Web-side technology to build projects and page structures, and creates visual tool blocks through programming languages ​​to create codes from graphics. The virtual resource embedding management module includes a picture resource adding unit, an animation resource adding unit, an audio resource adding unit and a video resource adding unit. The picture resource adding unit is used to import code blocks in picture format into the editor; the animation resource adding unit is used to import code blocks in animation format into the editor; and the audio resource adding unit is used to import audio into the editor. Code blocks in video format: video format code blocks are imported into the editor through the video resource adding unit; the virtual simulation process editing module extracts the process functions into independent function type blocks, and performs virtual simulation process editing in the process editing area by dragging and splicing building blocks; the block visualization editing module includes a data display unit and a data modification unit, the data display unit is used to visualize the resource data embedded in the virtual resource management module, and back up, store and replace the data through the data modification unit; the real-time virtual simulation effect preview module uses the Webgl visualization three-dimensional engine to edit blocks while making synchronous changes and presenting virtual simulation effects in real time.

[0019] The virtual simulation visual editor includes functional modules such as virtual simulation resource embedding management, virtual simulation process editing function, block visual editing, and real-time virtual simulation effect preview, so that people who do not need a 3D engine and code programming foundation can publish virtual simulation content through the platform. The visual editor extracts process-related functions into independent function type blocks. In the process editing area, virtual simulation process editing can be achieved by dragging and splicing building blocks. Different types of function blocks can be found intuitively and quickly through different colors and indicator icons. The splicing and arrangement order between blocks can also significantly present the process of the currently edited virtual simulation. The editor combines WebgI visual 3D engine technology to achieve simultaneous changes and real-time presentation of virtual simulation effects while editing blocks. The presented effects are completely consistent with the final output virtual simulation content, truly achieving what you see is what you get.

[0020] The virtual simulation visual editor primarily uses the programming language Google Blockly to implement visual editing. We built a main workspace and divided it into three areas: the classification area, the building block area, and the script area. In the classification area, we categorize behaviors and group all block types with the same behavior, allowing users to quickly find the blocks they need through the category bar on the left. We use the factory pattern to define the base class for all graphic blocks in the building block area. Each base class block has its own style, information code, and data logic generation definition. Depending on the category, each block may have functions such as text input, data drop-down display, and logical calculations. Users can generate their corresponding instance objects by dragging these base class blocks. Each instance object will be dynamically assigned an ID as its unique identifier by the ID generator; users can drag graphic blocks in the building block area to the script area, where users can edit the virtual simulation process. The information data carried by each graphic block dragged to the script area will be cached in the block queue. After the user completes the virtual simulation process editing, the editor will retrieve all the information data from the block queue and, under the data mapping mechanism we set, pick up the block data and convert it into Extensible Markup Language (XML), and then store it in the data pool to achieve data persistence.

[0021] The virtual simulation process editing module includes a block category area management unit, a block display area management unit, a block workspace management unit, a block data conversion unit and a configuration file generation unit; the block category area management unit is used to classify and partition the code blocks, so that users can quickly find the class blocks they need through the category column; the block display area management unit is used to perform regional management of the category column display area and classify the class blocks in the display area; the block workspace management unit is used to divide the workspace into three areas including the classification area, the building block area and the script area, and adjust the placement position of the code blocks; the block data conversion unit is used to adjust the format data of the code blocks when adjusting the positions of the code blocks in different partitions in the workspace; the configuration file generation unit is used to select a resource file from the local storage for upload, and transmit the file to the back end for storage in the form of a file stream.

[0022] The real-time virtual simulation effect preview module includes a data access unit, a data processing unit, a data docking unit and a data interaction effect display unit. The virtual simulation display data is accessed through the data access unit, the data format is processed through the data processing unit, and then the processed data is sent to the data interaction effect display unit through the data docking unit to display the virtual simulation effect.

[0023] like Figure 2 As shown, a method for editing a Tdu virtual simulation visual editor comprises the following steps: S1: entering the Tdu virtual simulation visual editor and then initializing the workspace in the editor; S2: after completing the workspace initialization, uploading resource data, and after obtaining the resource data, performing block area editing; S3: operating the blocks in the script area through the starting block, the blocks in the script area select display data by selecting the block class, and then inputting the selected block class into the script area through the output block; S4: after the block in the script area is clicked, executing and synchronously operating the WebgI engine rendering and displaying the information in the clicked block; S5: after completing the WebgI engine rendering, previewing through the virtual scene, and after completing the display of the information in the block, modifying and backing up the block information; S6: when the execution is completed after clicking, the block editing is ended, and the EXM configuration table is output to end the entire editing.

[0024] Even professionals can sometimes feel overwhelmed by the tedious task of resource configuration. To enhance the user experience, the editor incorporates a virtual resource embedding and management feature. The editor provides an upload entry for images, animations, audio, and video resources. Clicking the upload button launches the local file manager, where users can select a resource file from local storage and upload it. The editor then streams the file to the backend for storage. Users only need to focus on which resource to use, not how to use it.

[0025] Ordinary users do not have a clear understanding of the effects of code like professional technicians. To solve the confusion of users about the specific effects when editing graphic blocks, we have added a real-time virtual simulation effect preview function in the editor. The virtual simulation visual editor is based on the MVVM (Model-View-ViewModel) architecture. After the user clicks on the instantiated graphic block in the script area and updates the data of the graphic block, the editor will save the result of the modification and then update the Model layer data. After the Webgl engine in the ViewModel layer receives the update notification of the Model layer data, it will re-render the View layer view and display the results through the HTML inline frame element. <iframe> The updated view is added to the browser context of the specified area in the visual editor. The preview area on the right side of the editor will display the final effect of the graphic block in real time, allowing users to have a clearer understanding of the graphic block when operating. After the user finishes editing the graphic block and uploading the resource file, click Save. The editor will store all the user's current operations in the database. The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present invention shall be included in the scope of protection of the present invention.< / iframe>

Claims

1. A Tdu virtual simulation visual editor, characterized in that: It consists of a virtual resource embedding management module, a virtual simulation process editing module, a block visual editing module, and a real-time virtual simulation effect preview module. It uses Web-based technology to build projects and page structures, and uses programming languages ​​to create visual tool blocks to create code from graphics. The virtual resource embedding management module includes a picture resource adding unit, an animation resource adding unit, an audio resource adding unit, and a video resource adding unit. The picture resource adding unit is used to import a code block in picture format into the editor; the animation resource adding unit is used to import a code block in animation format into the editor; the audio resource adding unit is used to import a code block in audio format into the editor; and the video resource adding unit is used to import a code block in video format into the editor. The virtual simulation process editing module extracts process functions into independent function type blocks, and performs virtual simulation process editing in the process editing area by dragging and splicing building blocks; The block visual editing module includes a data display unit and a data modification unit. The data display unit is used to visually display the resource data embedded in the virtual resource management module and to back up, store and replace the data through the data modification unit. The real-time virtual simulation effect preview module uses the Webgl visualization three-dimensional engine to perform synchronous changes while editing blocks and present the virtual simulation effect in real time.

2. A Tdu virtual simulation visual editor according to claim 1, characterized in that: The virtual simulation process editing module includes a block category area management unit, a block display area management unit, a block work area management unit, a block data conversion unit and a configuration file generation unit; The block category area management unit is used to classify and partition code blocks, so that users can quickly find the blocks they need through the category column; The block display area management unit is used to perform regional management on the category column display area and classify and manage the category blocks in the display area; The block workspace management unit is used to divide the workspace into three areas including a classification area, a building block area and a script area, and adjust the placement of code blocks; The block data conversion unit is used to adjust the format data of the code blocks when the positions of the code blocks in different partitions in the workspace are adjusted with each other; The configuration file generating unit is used to select a resource file from the local storage for uploading, and transmit the file in the form of a file stream to the backend for storage.

3. The Tdu virtual simulation visual editor according to claim 1, wherein: The real-time virtual simulation effect preview module includes a data access unit, a data processing unit, a data docking unit and a data interaction effect display unit. The virtual simulation display data is accessed through the data access unit, the data format is processed through the data processing unit, and then the processed data is sent to the data interaction effect display unit through the data docking unit to display the virtual simulation effect.

4. A method for editing a Tdu virtual simulation visual editor, characterized in that: The method comprises the following steps: S1: Enter the Tdu virtual simulation visual editor and then initialize the workspace in the editor; S2: After completing the workspace initialization, upload the resource data. After obtaining the resource data, edit the block. S3: The blocks in the script area are operated through the start block. The blocks in the script area select the display data by selecting the block type and then input the selected block type into the script area through the output block; S4: After the block in the script area is clicked, it executes and synchronizes the WebgI engine rendering and displays the information in the clicked block; S5: After the WebgI engine rendering is completed, the virtual scene is previewed, and after the information in the block is displayed, the block information is modified and backed up; S6: When the execution is completed after clicking, the block editing ends, and the EXM configuration table is output and the entire editing ends.

Images