A method, system, and storage medium for building a graphical editor based on VS Code

Abstract

The application discloses a graphical editor construction method based on VS Code, which comprises the following steps: starting an extension interface, registering and activating a first editor, starting a VS Code editor, opening a package.json file by a user, detecting whether a type field belongs to rt-thread-component, starting a functional component graphical interface if the type field belongs to rt-thread-component, starting a second editor if the type field does not belong to rt-thread-component, and the functional component graphical interface is convenient for a developer to edit the construction configuration of each module and intuitively see the construction relationship of different functional groups, and meanwhile, during maintenance, only the corresponding source code array needs to be modified according to the functional component division, and the modification will not affect other components.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a method, system, and storage medium for building a graphical editor based on VS Code. Background Technology

[0002] In traditional embedded systems, the configuration of software components is primarily accomplished through either building the code using the SCONS software build tool or compiling the code using the MAKEFILES automatic compilation tool. Developers often need to write complex SCONS scripts to describe the compilation rules for embedded code components. These rules include information such as file lists, header file paths, and dependency macro definitions. Furthermore, the build rules often differ significantly between different projects, requiring developers to rewrite scripts and build logic, which consumes considerable time. Additionally, when a project contains multiple functional component modules, the compilation rules for each module may be stored in different build scripts.

[0003] When a project contains multiple functional component modules, the conditional compilation logic of each component module may be scattered in different build scripts. Therefore, it is difficult for developers to intuitively understand the build and compilation rules of the components and to quickly locate and modify the configuration of specific modules. Summary of the Invention

[0004] To address the aforementioned technical problems, this invention provides a method, system, and storage medium for building a graphical editor based on VS Code.

[0005] The present invention is achieved through the following technical solutions.

[0006] This invention provides a method for building a graphical editor based on VS Code, comprising the following methods:

[0007] Enable the extension interface, register and activate the primary editor, and launch the VS Code editor; When a user opens the package.json file, the system checks if the type field belongs to rt-thread-component. If it does, the system launches the graphical interface for the functional component; otherwise, it launches the second editor.

[0008] Furthermore, the graphical interface for the startup function component includes the following methods: Users create source code arrays through the graphical interface of functional components and send creation instructions to the data model, which includes basic information of operating system components, global macro configurations, and source code group arrays. The data model initializes the source code array and returns the source code array index and default configuration to the graphical interface of the functional components. Users can configure the dependency macros in each source code array and send them to the data model through the graphical interface of the functional components; The data model sends a macro name format verification command to the validator; the validator verifies whether the macro name conforms to the C language identifier specification and returns the verification result to the data model. The data model sends update commands to the graphical interface of the functional components. After the interface is updated, it sends a command to the data model to add files to the source code array. The data model sends a file access command to the file system, and the file system returns the selected file path to the data model; The data model converts the selected file path into a relative path and saves it to the source code array; The data model sends an update file list display command to the graphical interface of the functional components, and after the graphical interface of the functional components is updated, it returns a command to the data model to save the current configuration. The data model iterates through all source code arrays and generates JSON structured data. The data model writes the package.json file to the file system. After the file system saves the file, it sends a confirmation command to the data model to indicate that the save is complete, and the communication process ends.

[0009] Furthermore, the method for creating the source code array for the functional component graphical interface includes the following: Create a device description structure array, configure communication delay parameters, configure management parameters, set delay functions, and set the communication status management array.

[0010] Furthermore, the verification process in step (004) also includes the following methods: If the verification result meets the specifications, the data model sends an update interface status command to the graphical interface of the functional component and displays the correct status. If the verification result does not meet the specifications, the data model sends an error message to the graphical interface of the functional component, pointing out the specific error and providing modification suggestions. At this time, the source file will not be added or saved to the source code array.

[0011] Furthermore, the first editor is used to process RT-Thread component configuration, specifically including an extended registration module, a Webview interface, a message communication module, and a file selection module, to implement macro validation and JSON read / write functions; The second editor mentioned is a regular editor.

[0012] This invention also provides a graphical editor building system based on VS Code, including: a functional component graphical interface, a business logic layer, an extension interface, and a data access layer. The functional component graphical interface sends user file selection requests to the business logic layer, the business logic layer processes the data and sends it to the extension interface, and the extension interface communicates with the file system and then sends the data to the data access layer.

[0013] Furthermore, the extended interface serves as a port for data exchange with the file system, and the functional component graphical interface provides users with an editable UI interface, and adopts the Vue3 framework. The UI component library is the Element Plus component library based on Vue3.

[0014] Furthermore, the configuration information of the functional components includes basic information of the configuration file, global configuration, and source code group array.

[0015] The present invention also provides a graphical editor building device based on VS Code, including a module for executing the method described in any of the above claims, including a processor and an interface circuit. The interface circuit is used to receive signals from other devices other than the device executing kernel-mode commands and transmit them to the processor, or to send signals from the processor to other devices other than the device executing kernel-mode commands. The processor is used to implement the method described in any of the above claims through logic circuits or execution code instructions.

[0016] The present invention also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method described in any of the preceding claims.

[0017] The beneficial effects of this invention are as follows: the graphical interface of the functional components makes it easy for developers to edit the build configuration of each module and intuitively see the build relationship of different functional groups. At the same time, during maintenance, it is only necessary to find the corresponding source code array according to the functional component division and modify the configuration without affecting other components. Since the dependency relationship is clearer, configuration errors are significantly reduced, especially in complex projects containing multiple modules. Attached Figure Description

[0018] Figure 1 This is the overall software architecture of this invention embodiment; Figure 2 This refers to the configuration information of functional components in this embodiment of the invention; Figure 3 This is a flowchart illustrating the communication principle between layers in an embodiment of the present invention; Figure 4 This is a diagram showing the relationship between the functional components and their source code arrays in an embodiment of the present invention; Figure 5This is a flowchart illustrating the communication mechanism between the graphical interface and the editor of the functional components in this embodiment of the invention. Figure 6 This is a flowchart illustrating the communication mechanism between the graphical interface of functional components and the editor under the secure access mechanism of this invention. Figure 7 This is a flowchart of the graphical interface startup process of the functional components in an embodiment of the present invention; Figure 8 This is a flowchart of the macro name verification process of the verifier in an embodiment of the present invention; Figure 9 This is a flowchart illustrating the creation of the source code array for the graphical interface of the functional components in an embodiment of the present invention. Detailed Implementation

[0019] The technical solution of the present invention is further described below, but the scope of protection is not limited to what is described.

[0020] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be described in detail below with reference to the accompanying drawings and specific embodiments.

[0021] Currently, the configuration of software components in traditional embedded systems is mainly accomplished by using the SCONS software build tool to build the code or by using the MAKEFILES automatic compilation tool to compile the code. During the development process, developers often need to write complex SCONS scripts to describe the compilation rules of embedded code components. The compilation rules include information such as file lists, header file paths, and dependency macro definitions. Moreover, the build rules often differ significantly when creating different projects, and rewriting scripts and build logic takes more time. For developers, when creating a project containing multiple functional component modules, the compilation rules for each functional component module may be stored in different build scripts. This embodiment adopts a visual creation interface, providing developers with a more intuitive build method.

[0022] This embodiment is applied to a smart car scenario, and the overall software architecture is as follows: Figure 1 As shown, it includes a functional component graphical interface, a business logic layer, an extension interface, and a data access layer. The functional component graphical interface is operated by the user on the terminal display. The extension interface serves as a port for data communication with the file system. The functional component graphical interface provides users with an editable UI interface, using the Vue3 framework. The UI component library is the Element Plus component library based on Vue3. Users can directly build corresponding functional components through the functional component graphical interface according to their actual needs. The configuration information of each functional component is as follows: Figure 2As shown, it includes basic configuration information, global configuration, and source code arrays. Basic information includes descriptive functions such as name, description, and type. Global configuration includes descriptive functions such as delines and dependencies. Each functional component creates its own source code array. The functional components and their source code arrays created in this embodiment are shown below. Figure 4 As shown: The interactive interface, driver module, process management module, power management module, and debugging interface are defined as follows: The source code arrays for each of these modules are set as follows: The interactive interface has a related array called Communication Interface Group in its code structure. In this embodiment, the I2C communication array is used to set the dependency macro RT_USING_I2C within the group. RT_USING_I2C sets the communication-related parameter information. The specific method and parameters are as follows: (S100) Create a device description structure array, including the address storage parameter dev_addr, which is used to store the I2C address of the device; the address size parameter addr_size, which is used to specify the address size of the device's internal registers; the communication timeout parameter timeout, which prevents the program from deadlocking; and the clock frequency parameter clock_speed, which is used to configure the I2C bus clock frequency. (S200) Configure communication delay parameters, including the start delay parameter start_delay, which is used for preparation delay before initiating communication; the time interval between byte transmissions byte_delay; the stop delay parameter stop_delay, which is the delay after the communication ends; the device acknowledgment timeout ack_timeout; the reset delay reset_delay, etc. (S300) Configure management parameters, including device identifier, communication parameters, status management parameters, callback mechanism parameters, etc.; (S400) Set the delay function, including the following functions: set the delay_timer_t function to record the time and status of the delay target; delay_elapsed function to check whether the delay has expired; start_delay_t function to start the delay timer. This embodiment uses non-blocking delay communication, which can ensure the maximum utilization of thread resources. (S500) Set up a communication state management array to define the state mechanism of I2C communication and manage each communication process. In this embodiment, the I2C_State_t enumeration mechanism is adopted. First, all possible states in the I2C communication process are defined, and the I2C_Transaction_t structure is set to track the current communication state and detect the data buffer to ensure the stability and reliability of the I2C communication process. The driver module contains a Sensor Driver Group, which sets the dependent macro RT_USING_SENSORS within the group. This macro includes driving parameters related to vehicle driving, such as temperature parameter sensor_temp, humidity parameter sensor_humidity, light parameter sensor_light, and air pressure parameter sensor_pres. Thresholds are set for each of these parameters. When a parameter exceeds the threshold range, the relevant sensor is activated. For example, when the temperature parameter sensor_temp is greater than 26°C, the air conditioner cools and releases cold air; when the light parameter sensor_light is greater than a certain light intensity, the sun visor rotates to a suitable angle. Users can flexibly set the relevant parameters according to their actual needs. Since each driver group is completely independent, adjustments can be made at any time without affecting each other. The process management module has an extended array Data Processing Group and sets the group's dependency macro RT_USING_DSP, including: filter process parameter dsp_filter, calibration process parameter dsp_calibration, and storage process dsp_storage, which respectively perform code filtering analysis, error correction and repair, and code storage. In this embodiment, each process has an extended array Data Processing Group, realizing the separation of code editor functions. Each process communicates with the main editor process through IPC. The power management module has a power management array Power Management Group, and sets the group's dependency macro RT_USING_PM. The main parameters include the low power warning parameter pm_lowpower and the power wake-up parameter pm_wakeup, which are used to indicate important changes in the power status of the vehicle during operation. The debugging interface includes a test array Debug&Test Group, and sets the dependency macro RT_USING_TEST within the group. In this embodiment, the test parameters are mainly used to test each unit, including performance. With a graphical user interface, users can flexibly create graphical interfaces for each functional component, and can intuitively obtain the compilation conditions, source files, header files and various parameters contained in each functional component. The communication principle between layers in the architecture is as follows: Figure 3As shown, after the user inputs a command, the functional component's graphical interface collects the necessary command information and then calls the business logic layer. The business logic layer processes the command information. First, the system verifies the format of the command information. If it does not conform to the macro name specification, the system gives an error message and points out the specific error, providing modification suggestions. If it conforms to the specification, the current command is saved, and the processed command information is sent to the extension interface. After the extension interface starts, it registers the editor of the RT-Thread system component. This embodiment takes the embedded operating system RT-Thread as an example. For the scenario of building software components in this system, when the user opens the package.json file, the system automatically detects its type field. If it belongs to the rt-thread-component type, the Vue3 architecture is loaded and the Elements Plus component is called. If it does not belong to the rt-thread-component type, the default JSON editor is used. After the user calls the ElementsPlus component, they enter the functional component's graphical interface. The communication process between the functional component's graphical interface and the editor's extension mechanism includes the following methods: Users send file selection requests to the extension interface through the functional component's graphical interface. The extension interface reads the package.json file and sends it to the file system. After reading the package.json file, the file system returns configuration data to the extension interface. The extension interface and the functional component's graphical interface exchange message queues. The extension interface sends information to the functional component's graphical interface, including user configuration information, application status data, and database query results. After obtaining the above information through the functional component's graphical interface, the user sends a file selection command to the extension interface. The extension interface updates the local file selection interface and sends the selected file and its path to the functional component's graphical interface. The user sends a save command through the functional component's graphical interface. The extension interface sends a command to the file system to write the package.json file. After the file system successfully saves the file, it sends feedback to the functional component's graphical interface.

[0023] Because the file system has a secure access mechanism, in the actual communication process, the extended interface first calls the native file dialog box, sends an access command to the file system through the file dialog box, the file system returns a file list to the file dialog box, the file dialog box sends the file selected by the user to the extended interface, and at the same time converts the file path in the returned information to a relative path. The graphical interface of the functional component updates the interface display, and the user can access local files from the graphical interface of the functional component and create corresponding graphical component modules. Users manage sub-source code arrays through source code group arrays. Each source code array serves as an independent configuration unit, storing its compilation information. Users can add, delete, and modify configurations within source code arrays through the functional component graphical interface. The system synchronously stores component configuration information in configuration files. The communication process includes the following steps: (S001) The user creates a new source code array through the graphical interface of the functional component and sends the creation command to the data model, wherein the data model includes basic information of the operating system components, global macro configuration, and source code group array; (S002) The data model initializes the source code array and returns the source code array index and default configuration to the graphical interface of the functional components; (S003) Users configure the dependency macros in each source code array through the graphical interface of the functional components and send them to the data model concurrently; (S004) The data model sends a macro name format verification instruction to the validator; the validator verifies whether the macro name conforms to the C language identifier specification and returns the verification result to the data model; (S005) The data model sends an update command to the graphical interface of the functional component. After the interface is updated, it sends a command to the data model to add a file to the source code array. (S006) The data model sends a file access instruction to the file system, and the file system returns the selected file path to the data model; (S007) The data model converts the selected file path into a relative path and saves it to the source code array; (S008) The data model sends an update file list display instruction to the graphical interface of the functional component, and after the graphical interface of the functional component is updated, it returns an instruction to save the current configuration to the data model; (S009) The data model traverses all source code arrays and generates JSON structured data; (S010) The data model writes the package.json file to the file system. After the file system saves the file, it sends a confirmation command to the data model to indicate that the saving is complete. The communication process ends.

[0024] The validator's macro name validation process includes the following steps: (S401) If the verification result meets the specification, the data model sends an update interface status instruction to the functional component graphical interface and displays the correct status. (S402) If the verification result does not meet the specification, the data model sends an error message to the graphical interface of the functional component, pointing out the specific error and providing modification suggestions. At this time, the source file will not be added or saved to the source code array.

[0025] The above embodiments are preferred solutions for implementing the present invention. It should be noted that any obvious substitutions and minor changes are within the protection scope of the present invention without departing from the concept of the present invention.

Claims

1. A method for building a graphical editor based on VS Code, characterized in that... Including the following methods: Enable the extension interface, register and activate the primary editor, and launch the VS Code editor; When a user opens the package.json file, the system checks if the type field belongs to rt-thread-component. If it does, the system launches the graphical interface for the functional component; otherwise, it launches the second editor.

2. The method as described in claim 1, characterized in that: The graphical interface for the startup function component includes the following methods: Users create source code arrays through the graphical interface of functional components and send creation instructions to the data model, which includes basic information of operating system components, global macro configurations, and source code group arrays. The data model initializes the source code array and returns the source code array index and default configuration to the graphical interface of the functional components. Users can configure the dependency macros in each source code array and send them to the data model through the graphical interface of the functional components; The data model sends a macro name format verification command to the validator; the validator verifies whether the macro name conforms to the C language identifier specification and returns the verification result to the data model. The data model sends update commands to the graphical interface of the functional components. After the interface is updated, it sends a command to the data model to add files to the source code array. The data model sends a file access command to the file system, and the file system returns the selected file path to the data model; The data model converts the selected file path into a relative path and saves it to the source code array; The data model sends an update file list display command to the graphical interface of the functional components, and after the graphical interface of the functional components is updated, it returns a command to the data model to save the current configuration. The data model iterates through all source code arrays and generates JSON structured data. The data model writes the package.json file to the file system. After the file system saves the file, it sends a confirmation command to the data model to indicate that the save is complete, and the communication process ends.

3. The method as described in claim 2, characterized in that: The method for creating the source code array for the graphical interface of the functional components includes the following: Create a device description structure array, configure communication delay parameters, configure management parameters, set delay functions, and set the communication status management array.

4. The method as described in claim 2, characterized in that: The verification process also includes the following methods: If the verification result meets the specifications, the data model sends an update interface status command to the graphical interface of the functional component and displays the correct status. If the verification result does not meet the specifications, the data model sends an error message to the graphical interface of the functional component, pointing out the specific error and providing modification suggestions. At this time, the source file will not be added or saved to the source code array.

5. The method as described in claim 1, characterized in that: The first editor is used to handle RT-Thread component configuration, specifically including an extended registration module, a Webview interface, a message communication module, and a file selection module, and implements macro validation and JSON read / write functions; The second editor mentioned is a regular editor.

6. A graphical editor building system based on VS Code, characterized in that... include: The system comprises a functional component graphical interface, a business logic layer, an extension interface, and a data access layer. The functional component graphical interface sends user file selection requests to the business logic layer, which processes the data and sends it to the extension interface. After the extension interface communicates with the file system, it sends the data to the data access layer.

7. The system as described in claim 6, characterized in that: The extended interface serves as a port for data exchange with the file system. The functional component graphical interface provides users with an editable UI interface and adopts the Vue3 framework. The UI component library is the Element Plus component library based on Vue3.

8. The system as described in claim 6, characterized in that: The configuration information for the functional components includes basic information about the configuration file, global configuration, and array of source code groups.

9. A graphical editor building apparatus based on VS Code, comprising a module for performing the method as described in any one of claims 1-5, characterized in that, The device includes a processor and an interface circuit, wherein the interface circuit is used to receive signals from other devices besides the device executing kernel-mode commands and transmit them to the processor, or to send signals from the processor to other devices besides the device executing kernel-mode commands. The processor is used to implement the method as described in any one of claims 1-5 through logic circuits or execution code instructions.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the method as described in any one of claims 1-5.

Images