Method, device and storage medium for visualizing version presentation of a programming project

Abstract

A version display method and device for visual programming projects, an apparatus, and a storage medium, relate to the technical field of computers and the Internet. The method comprises the following steps: in a user interface of a visual programming editor, an entry control for opening a version management interface is displayed, and the visual programming editor is used for developing a visual programming project; in response to an operation on the entry control, the version management interface is displayed, and display content of at least one historical version of the visual programming project is displayed in the version management interface; in response to an operation of comparing a first historical version in the at least one historical version, a version comparison interface of the first historical version is displayed; and in the version comparison interface, the first project content and the second project content are displayed in comparison. The method provides the function of comparing the project content of different versions for the user, which is beneficial to the user to quickly locate the similarities and differences between the project content of different versions and improves the development efficiency of the user.

Description

Technical Field

[0001] This application relates to the fields of computer and internet technology, and in particular to a method, apparatus, device, and storage medium for displaying versions of a visual programming project. Background Technology

[0002] With the development of computer technology, more and more people have a need to learn programming. Visual programming is a programming method based on a graphical interface. It uses graphical blocks to represent the logic and function of a program, making it easy for non-professional developers to understand and create programs.

[0003] In related technologies, when developing using visual programming, users periodically save a version of the visual programming project in the drafts folder for reference or restoration during subsequent development. When a specific version needs to be referenced or restored, it is located in the drafts folder, and then the complete or partial version of the visual programming project is copied to the current version.

[0004] In related technologies, referencing or restoring a version in the above manner can easily lead to the introduction of incorrect content into the current version of the project due to manual operation. Summary of the Invention

[0005] This application provides a method, apparatus, device, and storage medium for displaying versions of a visual programming project. The technical solution provided by this application is as follows:

[0006] According to one aspect of the embodiments of this application, a method for displaying versions of a visual programming project is provided, the method comprising:

[0007] The user interface of the visual programming editor displays an entry control for opening the version management interface. The visual programming editor is used to develop visual programming projects.

[0008] In response to an operation on the entry control, the version management interface is displayed, which displays at least one historical version of the visual programming project;

[0009] In response to the operation of comparing the first historical version among the at least one historical version, a version comparison interface of the first historical version is displayed;

[0010] The version comparison interface displays the content of a first project and the content of a second project. The first project content is the content of the visual programming project in the first historical version, and the second project content is the content of the visual programming project in the current version or the second historical version.

[0011] According to one aspect of the embodiments of this application, a version display device for a visual programming project is provided, the device comprising:

[0012] An entry display module is used to display an entry control for opening the version management interface in the user interface of the visual programming editor, which is used to develop visual programming projects;

[0013] The version management module is used to display the version management interface in response to the operation of the entry control. The version management interface displays the display content of at least one historical version of the visual programming project.

[0014] The version comparison module is used to display the version comparison interface of the first historical version in response to the operation of comparing the first historical version among the at least one historical version.

[0015] The content comparison module is used to compare and display the content of a first item and the content of a second item in the version comparison interface. The content of the first item is the content of the visual programming project in the first historical version, and the content of the second item is the content of the visual programming project in the current version or the second historical version.

[0016] According to one aspect of the embodiments of this application, a computer device is provided, the computer device including a processor and a memory, the memory storing a computer program, the computer program being loaded and executed by the processor to implement the above-described method for displaying the version of a visual programming project.

[0017] According to one aspect of the embodiments of this application, a computer-readable storage medium is provided, wherein a computer program is stored in the storage medium, the computer program being loaded and executed by a processor to implement the above-described method for displaying the version of a visual programming project.

[0018] According to one aspect of the embodiments of this application, a computer program product is provided, the computer program product including a computer program, the computer program being loaded and executed by a processor to implement the above-described method for displaying the version of a visual programming project.

[0019] The technical solutions provided in this application have at least the following beneficial effects:

[0020] By allowing users to select a historical version of the project content in the version management interface and then compare it with another version in the version comparison interface, the system provides users with the ability to compare project content from different versions. Comparing and displaying project content from different versions on the same interface helps users quickly identify the differences between the project content from different versions, reduces the probability of errors caused by manual identification, and thus improves the user's development efficiency. Attached Figure Description

[0021] Figure 1 This is a schematic diagram of the implementation environment of a solution provided in one embodiment of this application;

[0022] Figure 2 This is a flowchart of a method for displaying versions of a visual programming project according to an embodiment of this application;

[0023] Figure 3 This is a schematic diagram of the user interface of a visual programming editor provided in one embodiment of this application;

[0024] Figure 4 This is a schematic diagram of a version management interface provided in one embodiment of this application;

[0025] Figure 5 This is a schematic diagram of a display operation control provided in one embodiment of this application;

[0026] Figure 6 This is a flowchart illustrating the display of status tags according to an embodiment of this application;

[0027] Figure 7 This is a schematic diagram showing a comparison of custom functions provided in one embodiment of this application;

[0028] Figure 8 This is a schematic diagram showing a comparison of code blocks provided in one embodiment of this application;

[0029] Figure 9 This is a schematic diagram of aligned display provided in one embodiment of this application;

[0030] Figure 10 This is a flowchart of a method for displaying a code block according to an embodiment of this application;

[0031] Figure 11 This is a schematic diagram of an operation control for a historical version provided in one embodiment of this application;

[0032] Figure 12 This is a block diagram of a version display device for a visual programming project provided in one embodiment of this application;

[0033] Figure 13This is a structural block diagram of a terminal device provided in one embodiment of this application. Detailed Implementation

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

[0035] Please refer to Figure 1 This diagram illustrates an implementation environment provided by one embodiment of the present application. This implementation environment can be implemented as an application system. The implementation environment may include: a terminal device 10 and a server 20.

[0036] Terminal device 10 includes, but is not limited to, mobile phones, tablets, smart voice interaction devices, game consoles, wearable devices, multimedia playback devices, PCs (Personal Computers), in-vehicle terminals, smart home appliances, AR (Augmented Reality) devices, VR (Virtual Reality) devices, and other electronic devices. Terminal device 10 can run a client of a target application (such as a visual programming application). Optionally, the target application can be an application that needs to be downloaded and installed, or it can be a webpage or a mini-program; this application embodiment does not limit this.

[0037] In this application embodiment, the target application can be a visual programming application, a game application, or other applications with visual programming capabilities; this application embodiment does not limit this. It is understood that game applications have visual programming capabilities. For example, users can use this visual programming function to create UGC (User Generated Content).

[0038] Optionally, the target application is a puzzle game application that provides users with a visual programming editor to customize levels. A puzzle game is a game genre where the main objective is to complete a series of challenging levels. Users must face various obstacles, enemies, or puzzles to complete each level and ultimately achieve victory. Introducing a visual programming editor into the puzzle game application allows users without programming experience to easily design more complex custom levels. When designing a custom level, users often need to iterate and adjust multiple versions. If a problem occurs in the current version, it is necessary to go back and find and correct errors in previous versions. Using the technical solution of this application helps users intuitively understand the differences between different versions, thereby improving the efficiency of creating custom levels.

[0039] Server 20 is used to provide backend services for the client of the target application in terminal device 10. For example, server 20 can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms, but it is not limited to these.

[0040] Terminal device 10 and server 20 can communicate with each other via a network. This network can be a wired network or a wireless network.

[0041] Please refer to Figure 2 The diagram illustrates a flowchart of a method for displaying a version of a visual programming project according to an embodiment of this application. The execution entity for each step of this method can be... Figure 1 In the implementation environment shown, the terminal device 10 can be a client of the target application, where the execution entity for each step can be a client of the target application. The method may include at least one of the following steps (210-240):

[0042] Step 210: In the user interface of the visual programming editor, an entry control for opening the version management interface is displayed. This visual programming editor is used to develop visual programming projects.

[0043] Visual programming is a programming method based on a graphical user interface (GUI), which uses graphical elements to represent the structure and logic of a program. Graphical elements are the basic building blocks used to represent the structure and logic of a program, including but not limited to blocks, nodes, connections, comments, and labels. Visual programming includes at least one of the following types: block programming, node programming, and flowchart programming. Block programming refers to visual programming that allows users to build programs using blocks. Node programming refers to visual programming that allows users to build programs using nodes and connections. Flowchart programming refers to visual programming that allows users to build programs using flowchart symbols. Therefore, a visual programming editor is an editor provided by the target application for users to develop visual programming projects. Optionally, the visual programming editor provides tools, graphical elements, help information, etc., for development.

[0044] Understandably, a visual programming project is a project developed using visual programming.

[0045] The user interface (UI) of a visual programming editor provides a programming environment for visual programming. This UI includes controls such as the workspace, block panel, menu bar, and console.

[0046] The version management interface is used to view, compare, and manage different historical versions of a visual programming project. Optionally, the entry control of the version management interface can be an explicit control, implemented using interactive elements including but not limited to icons, buttons, and menus, or other interactive elements; this application does not limit its implementation in this regard. Optionally, the entry control of the version management interface can also be an implicit control. For example, the version management interface can be triggered by an AI (Artificial Intelligence) assistant in the visual editor, where the AI ​​assistant provides users with prompts, suggestions, and assistance.

[0047] Step 220: In response to an operation on the entry control, a version management interface is displayed, which shows at least one historical version of the visual programming project.

[0048] Operations related to the entry control refer to user actions performed to display the version management interface. For example, when the entry control is an icon or button, clicking it displays the version management interface. Similarly, when the entry control is a menu, clicking it brings up multiple selection controls; different services correspond to different selection controls, and clicking the selection control corresponding to the version management interface displays the interface. Furthermore, if the entry control is implemented using an AI assistant in a visual programming editor, sending a request to the AI ​​assistant to display the version management interface will then display it.

[0049] For example, please refer to Figure 3 This diagram illustrates a user interface of a visual programming editor provided in one embodiment of the present application. The user interface 30 of the visual programming editor displays an entry control 31 for a version management interface.

[0050] Based on the previous example, please refer to Figure 4 It shows a schematic diagram of a version management interface provided in one embodiment of this application, where the user clicks... Figure 3 The entry control 31 shown can then be displayed. Figure 4 The version management interface 40 is shown in sub-diagram (a).

[0051] During the development of visual programming projects, users archive different visual programming projects at different times, that is, saving a historical version each time. Each historical version is obtained after at least one edit, such as adding, modifying, or deleting, from the previous version. The content displayed for each historical version includes, but is not limited to, at least one of the following: save time, name, edit summary, and tags. The save time of a historical version refers to the specific time when the historical version was saved. The name of the historical version is used to uniquely identify that historical version. The edit summary of the historical version is used to indicate the edits made based on the previous version. The tags of the historical version can be used to indicate information such as major features, key points, and milestones implemented in that historical version.

[0052] Optionally, this version management interface does not display any historical versions. For example, if the visual programming project has just been created and the user or system has not yet archived it, the version management interface will not display any historical versions of the visual programming project.

[0053] Optionally, the display content of at least one historical version of the above-mentioned visual programming project can be presented in at least one of the following ways: list format, grid format, menu format, navigation bar format, etc., and other methods can also be used. This application embodiment does not limit this.

[0054] Optionally, the content of at least one historical version of the aforementioned visual programming project is displayed in chronological order. Here, chronological order refers to sorting the content in ascending or descending order based on the time at which the at least one historical version was saved.

[0055] For example, please refer to Figure 4 The subgraph (a) presents at least one historical version of the visual programming project currently selected by the user in the form of a version list 41. The version list 41 includes five historical versions, and displays the save time and name of each historical version in the version list 41, and sorts them in reverse order by save time.

[0056] Step 230: In response to the operation of comparing at least one historical version with the first historical version, display the version comparison interface of the first historical version.

[0057] The first historical version is a historical version selected by the user from at least one historical version. Therefore, the first historical version can be any one of the at least one historical version mentioned above.

[0058] The first historical version comparison interface refers to the interface for comparing the first historical version with other versions. Understandably, other versions can be the current version, or any historical version other than the first historical version mentioned above.

[0059] The operation of comparing at least one historical version with the first historical version refers to the operation of viewing the differences between the first historical version and other versions.

[0060] In some embodiments, in response to the operation of selecting a first historical version from at least one historical version, identification information of at least one block element group contained in the first project content is displayed; in response to the operation of selecting the first block element group from at least one block element group, a version comparison interface of the first historical version is displayed; in the version comparison interface, the first block element group and the second block element group are compared and displayed, wherein the second block element group is a block element group in the second project content that has a corresponding relationship with the first block element group.

[0061] The operation of selecting the first historical version from at least one historical version refers to the operation performed by the user to select the first historical version from at least one historical version. The operation of selecting the first historical version from at least one historical version can be by clicking the jump control of the first historical version, or by double-clicking the area of ​​the first historical version in the version management interface, or by other methods, which are not limited in this application.

[0062] The first project content refers to the project content of the first historical version of the visual programming project. The second project content refers to the project content of other versions of the visual programming project. It should be noted that, unless otherwise specified, "visual programming project" mentioned in this application refers to the same visual programming project. That is, the project content of at least one historical version refers to the project content of the visual programming project at different stages. Optionally, the project content of each historical version is stored in the server's backend database in the form of a JSON (JavaScript Object Notation, a lightweight data interchange format) file. For ease of explanation, unless otherwise specified in this application, the second project content refers to the project content of the current version of the visual programming project.

[0063] In visual programming projects, each save operation preserves the project's structure and configuration information as a JSON file. This JSON file can be read and processed using the programming language's JSON parsing library, allowing the reconstruction of the visual programming project's structure and configuration.

[0064] Building blocks are the basic units in visual programming, and different building blocks represent different programming concepts. Optionally, building blocks may include, but are not limited to, the following elements: building blocks, building block parameters, virtual objects, materials, etc., and may also include other elements, which are not limited in this embodiment.

[0065] Blocks refer to graphical programming blocks used to perform specified operations. Users can build programs in a visual programming editor by dragging and dropping blocks and assembling them. Optionally, blocks can include at least one of the following types: event type, control type, action type, appearance type, sound type, detection type, operation type, pen type, variable type, function type, music type, etc., and may also include other types, which are not limited in this embodiment. Event type blocks are used to trigger specified events and are the starting point of a program execution. For example, the specified event can be an event execution event, a screen switching event, a click event, etc. Control type blocks are used to manage the execution flow of the program, such as loops, conditional judgments, etc. Action type blocks are used to control the movement and positioning of virtual characters, for example, controlling virtual character 1 to rotate 15 degrees, or controlling virtual character 2 to move to the position of the mouse pointer, etc. Appearance type blocks are used to change the appearance of virtual characters or the background, for example, changing the shape of the virtual character, or changing the color of the background, etc. Sound type blocks are used to play sounds or adjust the volume. Detection blocks are used to detect user input and changes in the environment, such as detecting whether a user has pressed a specified key, whether a timer has reached zero, or whether the cursor is in a specified area. Operation blocks are used to perform mathematical and logical operations. Pen blocks are used to draw or change pen properties, such as lifting the pen, putting the pen down, setting the pen color, or changing the pen size. Variable blocks are used to create, set, and get variable values. Function blocks are used to define and call user-defined functions. Music blocks are used to play musical instruments and control music playback.

[0066] Block parameters refer to information defined for a user-defined function, which may include, but is not limited to, at least one of the following: input parameters, output parameters, and function name, and may also include other information, which is not limited in this embodiment. Virtual objects refer to entities simulated in visual programming, such as virtual characters, two-dimensional graphics, three-dimensional graphics, virtual buildings, controls, etc. Materials refer to various resources in visual programming, including but not limited to: images, sounds, animations, text, etc.

[0067] A block element group consists of a series of related block elements. The block elements in a block element group work together to achieve a specific function or task. The above identification information is used to distinguish different block element groups within the first project content and can be represented by strings, numbers, etc.

[0068] For example, when the block element is a block parameter, the first block element group mentioned above corresponds to the input parameters, output parameters, and function name included in a custom function.

[0069] For example, when the building block elements are blocks, the first group of building block elements described above can correspond to a code block or a group of code blocks. It should be noted that a group of code blocks includes at least one code block, and a code block includes at least one consecutive block.

[0070] For example, please refer to Figure 4 In subgraph (a), the user selects the pre-release version 42, which is the first historical version, in the version list 41 displayed in the left area of ​​the version management interface 40. In response to the operation of selecting the first historical version, the identification information of three block element groups is displayed in the right area of ​​the version management interface 40, namely "trigger group 1", "trigger group 2" and "trigger group 3", which correspond to block element group 43, block element group 44 and block element group 45 respectively.

[0071] The comparison display refers to showing the first and second block element groups in the version comparison interface. Optionally, the version comparison interface may also display the differences between the first and second block element groups.

[0072] Using the above method, the first and second block element groups are displayed in the version comparison interface, clearly showing users the differences of the same block element group in different versions.

[0073] In some embodiments, the block element group includes: a code block group and a custom function, the block element including: a block and a block parameter; in response to an operation of selecting a first historical version from at least one historical version, a code block group control and a function control are displayed; in response to an operation on the code block group control, identification information of at least one code block group contained in the first item content is displayed, the code block group including at least one code block, the code block including at least one block; in response to an operation on the function control, identification information of at least one custom function contained in the first item content is displayed, the custom function being used to encapsulate at least one block, the custom function including at least one block parameter, the block parameter being used to pass data in the custom function.

[0074] A code block, also known as a trigger, is a logical unit composed of multiple blocks used to trigger an operation or event in a program when a specific condition is met. A code block begins with a block of event type and consists of at least one consecutive block of another type. A group of code blocks, also known as a trigger group, includes at least one trigger. A trigger group contains at least one trigger with a close business relationship. This business relationship refers to the logical association between different triggers in the program.

[0075] In a broad sense, a user-defined function refers to a reusable piece of code logic that encapsulates a series of operations or functionalities. It allows programmers to encapsulate a piece of code logic into a function, specifying a name and a set of parameters for that function. In visual programming, a user-defined function refers to at least one reusable building block defined by the user. A user-defined function includes its name, parameter definitions, and function body. The function body refers to at least one building block encapsulated by the user-defined function. The parameters of the at least one building block included in the user-defined function include the function name and parameter definitions. Optionally, the identifier of the user-defined function is its name.

[0076] The code block control is used to display or hide the identification information of at least one code block group contained in the first item content. The function control is used to display or hide the identification information of at least one custom function contained in the first item content. Optionally, the code block control and the function control can be implemented in any of the following ways: buttons, switches, checkboxes, drop-down menus, etc., or other ways, which are not limited in this embodiment.

[0077] In some embodiments, in response to an operation on a code block group control, the identification information of at least one code block group contained in the first item content is hidden; in response to an operation on a function control, the identification information of at least one custom function contained in the first item content is hidden.

[0078] For example, click Figure 4 The code block control 46 in subgraph (a) displays the identification information of three code block groups, namely "Trigger Group 1", "Trigger Group 2" and "Trigger Group 3". Clicking the code block control 46 again hides the identification information of the above three code block groups.

[0079] For example, click Figure 4 The function control 47 in subgraph (b) displays the identification information of three custom functions, namely "Function 1", "Custom Block 2" and "Monster Damage Calculation". Clicking the function control 47 again hides the identification information of the above three custom functions.

[0080] By separating and displaying trigger groups and functions in the above manner, users can quickly find the trigger groups or functions they need to compare.

[0081] In some embodiments, in response to an operation of selecting a first block element group from at least one block element group, an operation control for the first block element group is displayed, the operation control including at least one of the following: a first comparison control and a second comparison control; in response to an operation of the first comparison control, a version comparison interface for a first historical version is displayed, wherein the second item content is the item content of the current version of the visual programming project; in response to an operation of the second comparison control, a version comparison interface for a first historical version is displayed, wherein the second item content is the item content of the second historical version of the visual programming project.

[0082] The current version refers to the latest version of the visual programming project that the user is currently editing. The second historical version can be the third historical version described above, or any historical version of the visual programming project other than the first historical version. Optionally, if the second historical version is any historical version of the visual programming project other than the first historical version, the second historical version is selected by the user from at least one historical version.

[0083] In some embodiments, in response to an operation on the expand control of the first block element group, an operation control for the first block element group is displayed.

[0084] The first comparison control displays a version comparison interface between the first historical version and the current version. The second comparison control displays a version comparison interface between the first historical version and the current version.

[0085] For example, please refer to Figure 5 The diagram shows a schematic of the display operation controls provided in an embodiment of this application. Clicking the expand control 51 in the version management interface 40 displays three operation controls for the block element group 44, namely the view control 52, the compare current control 53, and the compare previous version control 54. The compare current control 53 corresponds to the first comparison control, and the compare previous version control 54 corresponds to the second comparison control.

[0086] Using the above methods, users can select two versions to compare according to their needs, making version management more flexible.

[0087] In some embodiments, a status label corresponding to the block element group is displayed, which is used to indicate the editing status of the block element group.

[0088] Status labels can be implemented in one or more of the following ways: color marking, icon marking, text marking, dynamic prompts, border styles, etc., and other methods can also be used, which are not limited in this embodiment. For example, different specified colors of labels or background colors can be used to indicate different editing states. Another example is using different icons to indicate different editing states. Yet another example is using short text labels to describe different editing states. For yet another example is displaying prompt information indicating the editing state when the pointer hovers over the identification information of a block element group. And yet another example is using different border styles to indicate different editing states.

[0089] For the first historical version, the edit status refers to the editing status of the block element group compared to the previous historical version. That is, compared to the previous historical version, whether there are any modified block elements, newly added block elements, or deleted block elements in the block element group.

[0090] In some embodiments, a difference information table of the first historical version is obtained, the difference information table including at least one difference information. The difference information includes the edit type of the edited block element group and the unique identifier of the block element group; based on the difference information table, the status label corresponding to the block element group is displayed. The edit type includes, but is not limited to, adding, modifying, and deleting. Optionally, when editing based on the content of the third project, if any block element group in the third project content undergoes any type of edit, the corresponding difference information is added to the difference information table of the first historical version.

[0091] Optionally, a project table and a version table are stored in the server's backend database. The project table includes project information for at least one visual programming project developed by the same user, and the project information may include the information shown in Table 1. The version table includes version information for at least one historical version of the visual programming project, and the version information may include the information shown in Table 2.

[0092] Table 1: Field Descriptions of the Works Table

[0093]

[0094]

[0095] Table 2 Version Table Field Descriptions

[0096]

[0097] The UUID (Universally Unique Identifier) ​​in the data types listed in Tables 1 and 2 is used to uniquely identify entities or objects in a computing system. It is a 128-bit number, typically represented as 32 hexadecimal digits separated by hyphens. The purpose of a UUID is to generate a globally unique identifier. It does not rely on any central control authority and can be generated in distributed systems without collisions. Therefore, UUIDs are widely used in many fields, such as database records, distributed systems, and network communication. Various programming languages ​​have algorithms for generating UUIDs.

[0098] By using the above method, different status labels are used to indicate different editing states, intuitively showing users the editing status of the block element group in the corresponding historical version.

[0099] In some embodiments, the editing state includes at least one of the following: add state, modify state, and delete state; if there is no block element group in the third project content that corresponds to the block element group, the editing state of the block element group is determined to be add state; if there is a block element in the block element group that is different from the block element in the third project content, the editing state of the block element group is determined to be modify state; if there is no block element group in the first project content and there is a block element group in the third project content, the editing state of the block element group is determined to be delete state; wherein, the third project content is the project content of the visual programming project of the third historical version, and the third historical version refers to the version most recently saved before saving the first historical version.

[0100] The first project content is obtained by editing the third project content; that is, the third historical version is the previous historical version of the first historical version. In other words, for any block element group in the first project content, if the block element group is in a newly added state, it means that the block element group does not exist in the third project content and was added during editing based on the third project content; if the block element group is in a modified state, it means that the block element group was obtained by modifying the corresponding block element group in the third project content; if the block element group is in a deleted state, it means that the block element group was deleted from the third project content during editing based on the third project content, and the block element group will not exist in the first project content.

[0101] Optionally, if any block element in the block element group is identical to a corresponding block element in the third item content, then the editing status of the block element group is determined to be unmodified.

[0102] For example, please refer to Figure 4In subgraph (a), the editing status of block element group 43 is "unmodified," and no status label is displayed before the identification information of block element group 43. The editing status of block element group 44 is "modified," so the modification label "M" is displayed before the identification information of block element group 44. The editing status of block element group 45 is "new," so the new label "A" is displayed before block element group 44.

[0103] For example, please refer to Figure 4 If the editing state of the subgraph (b) and the block element group 48 is the deletion state, then the deletion label "D" will be displayed before the block element group 48.

[0104] For example, please refer to Figure 6 The diagram illustrates a flowchart of status label display provided in one embodiment of this application. For any block element group in the first project content, the difference information of the block element group is queried in the difference information table of the first historical version. If found, it is determined whether the edit type of the block element group is "Add". If so, an "Add" label is displayed in front of the identification information of the block element group; otherwise, an "Edit" label is displayed in front of the identification information of the block element group. The difference information table is traversed, and if the difference information table includes a block element group with an edit type of "Delete", a "Delete" label is displayed in front of the block element group.

[0105] By using the above method, the editing status of each block element group is determined, and the block element groups that have been edited in this historical version are displayed to the user intuitively.

[0106] Step 240: In the version comparison interface, the content of the first project and the content of the second project are compared and displayed. The content of the first project is the content of the visual programming project in the first historical version, and the content of the second project is the content of the visual programming project in the current version or the second historical version.

[0107] In some embodiments, the version comparison interface displays a first display area and a second display area; in the first display area, at least one block element contained in the content of the first project is displayed; in the second display area, at least one block element contained in the content of the second project is displayed; wherein, the block element corresponds to a piece of programming logic code.

[0108] When the block element is a block parameter, the name of the custom function and its parameter list are displayed in the work area. The parameter list includes input and output parameters. In this case, the programming logic code corresponding to the block element is the programming logic code defining the custom function.

[0109] When the building block elements are blocks, blocks belonging to the same trigger are connected together in a specific order in the working area to form a complete instruction sequence. There is a blank interval between two adjacent triggers in the working area. At this time, the programming logic code corresponding to the block element is the programming logic code corresponding to the instruction or operation indicated by the block.

[0110] In some embodiments, a distinguishing marker is displayed when the programming logic code of two corresponding block elements is different.

[0111] In this application, each block element, block element group, and code block has a UUID that remains unchanged before and after modification. Optionally, there may be a correspondence between block elements, block element groups, or code blocks with the same UUID in different historical versions.

[0112] By displaying two versions of project content on the same interface using the above method, users can quickly locate the differences between the different versions of project content and improve the efficiency of their analysis of different versions of project content.

[0113] In some embodiments, the first display area and the second display area are located on both sides of the dividing line; two block elements with a corresponding relationship in the first item content and the second item content are aligned and displayed on both sides of the dividing line; if the programming logic codes of the two block elements with a corresponding relationship are different, a distinguishing mark is displayed at the position corresponding to the two block elements with a corresponding relationship on the dividing line.

[0114] Alignment display refers to sorting according to specified rules, which can be one of the following alignment methods: horizontal alignment, vertical alignment, grid alignment, area alignment, etc. The specific alignment method used is designed by relevant technical personnel, and this application embodiment does not limit it.

[0115] Distinguishing markers are used to indicate differences between different versions. Optionally, the distinguishing markers can be implemented in at least one of the following forms: color markers, icon markers, label markers, shape markers, border markers, etc., and other forms may also be used, which are not limited in this embodiment. Optionally, the distinguishing markers can also be displayed in the area where the block element is located.

[0116] Optionally, if the second project content is the project content of the current version of the visual programming project, at least one block element in the second display area can be edited.

[0117] The work area is divided into two regions by a dividing line: a first display area and a second display area. Optionally, the dividing line points vertically downwards, dividing the work area into left and right regions. Optionally, the first and second display areas are the same size. The work area refers to the area used for visual programming.

[0118] For example, please refer to Figure 7 The diagram illustrates a comparison display of custom functions provided in an embodiment of this application. The version comparison interface 700 displays at least one block parameter of two corresponding custom functions in its first display area 701 and second display area 702. In the first display area 701, the function name 703, parameter name 704, and parameter name 705 of the custom function in the first item are displayed. In the second display area 702, the function name 706 of the custom function in the second item corresponds to the function name 703, and therefore, function names 703 and 706 are displayed horizontally aligned. The parameter name 707 of the second item corresponds to the parameter name 704, and therefore, function names 704 and 707 are displayed horizontally aligned. The parameter name 708 of the second item corresponds to the parameter name 705, and therefore, function name 705 and parameter name 708 of the second item are displayed horizontally aligned. Parameter name 709 is displayed sequentially in the second display area 702.

[0119] Based on the previous example, function names 703 and 706 are different, so a distinguishing marker 711 is displayed on the dividing line 710. The distinguishing marker 711 is horizontally aligned with function names 703 and 706. Parameter names 704 and 707 are different, so a distinguishing marker 712 is displayed on the dividing line 710. The distinguishing marker 712 is horizontally aligned with function name 704 and parameter name 708 in the second item.

[0120] For example, please refer to Figure 8 As shown, this is a schematic diagram of code block comparison display provided in an embodiment of this application. The first display area 701 and the second display area 702 of the version comparison interface 700 respectively display at least one block contained in two code blocks with corresponding relationships. The first display area 701 displays blocks 801, 802, 803 and 804 in the first item content. Since blocks 801, 802 and 803 have corresponding relationships with blocks 805, 806 and 807 in the second item content, blocks 805, 806 and 807 are displayed horizontally aligned with blocks 801, 802 and 803 respectively.

[0121] Based on the previous example, since the corresponding blocks 802 and 806 are different, a distinguishing mark 808 is displayed on the dividing line 710, which is horizontally aligned with blocks 802 and 806.

[0122] By using the above method and displaying the elements in an aligned manner, the differences between the same block element can be intuitively shown to the user.

[0123] In some embodiments, when the first item content contains a first block element and the second item content does not contain a block element that corresponds to the first block element, a distinguishing mark is displayed at the position corresponding to the first block element on the dividing line; when the second item content contains a second block element and the first item content does not contain a block element that corresponds to the second block element, a distinguishing mark is displayed at the position corresponding to the second block element on the dividing line.

[0124] For example, please refer to Figure 7 In the second item content, there is a block parameter 709, but in the first item content, there is no block parameter that corresponds to block parameter 709. Therefore, a distinguishing mark 713 is displayed on the dividing line 710, and the distinguishing mark 713 is horizontally aligned with block parameter 709.

[0125] For example, please refer to Figure 8 In the first item content, there is a block 804, but in the second item content, there is no block that corresponds to block 804. Therefore, a distinguishing mark 809 is displayed on the dividing line 710, and the distinguishing mark 809 is horizontally aligned with block 804.

[0126] By using the above method and displaying distinguishing markers, users can quickly locate the positions of block elements that differ between versions.

[0127] In some embodiments, if the editing time of the current version is greater than or equal to a threshold, the current version is automatically saved as the fifth historical version.

[0128] Editing duration indicates the time elapsed from the start of editing the current version to the current moment. The aforementioned threshold is the time interval for automatic archiving of the visual programming project, which should be set by relevant technical personnel, and this application embodiment does not limit it.

[0129] In some embodiments, if the editing time of the current version is greater than or equal to the threshold, and if the difference information table of the current version is not empty, the current version is automatically saved as the fifth historical version.

[0130] For example, the threshold is one hour. If the project content of the current version of the visual programming project has been edited, the project content of the current version will be saved, and the project content will correspond to the fifth historical version.

[0131] By archiving visual programming projects at regular intervals, the tediousness of manual operations and the risk of data loss are reduced.

[0132] In some embodiments, in the version comparison interface, in response to the operation of running the first project content and the second project content, the running results of the first project content and the running results of the second project content are compared and displayed.

[0133] Optionally, the version comparison interface displays a comparison run control, which is used to run the first item content and the second item content.

[0134] In some embodiments, the result of running the project content refers to the result after executing at least one block contained in the project content in sequence; or, the result of running the project content refers to the result after executing at least one code block contained in the project content in sequence. The result may include, but is not limited to, calculation results, function call results, interactive feedback, display effects, etc., and may also include other forms of result, which are not limited in this application.

[0135] In some embodiments, the version comparison interface displays an up-execute control and a down-execute control. The up-execute control is used to execute the previous code block, and the down-execute control is used to execute the next code block.

[0136] The above method, by comparing and displaying the running results of different versions, intuitively demonstrates the similarities and differences in the running effects of different versions of the project content.

[0137] In summary, the technical solution provided in this application allows users to select the first historical version of the project content in the version management interface, and then compare and display it with the second version of the project content in the version comparison interface. This enables users to compare project content from different versions. Comparing and displaying project content from different versions on the same interface helps users quickly locate the differences between project content from different versions, reduces the probability of errors caused by manual location, and thus improves the user's development efficiency.

[0138] The following describes the process of comparing and displaying building block elements.

[0139] (1) The first block element group is a code block group.

[0140] In some embodiments, code block information of each of the at least one code block contained in the first block element group and code block information of each of the at least one code block contained in the second block element group are obtained, wherein the code block information includes block identifier information of the code block and block identifier information of the at least one block included in the code block; if the block identifier information of the first code block matches the block identifier information of the second code block, starting from the i-th block of the second code block, the block identifier information of the k-th block that matches the block identifier information of the j-th block of the first code block is searched. The first code block is a code block contained in the first block element group, and the first code block includes M blocks. The second code block is a code block contained in the second block element group, and the second code block includes N blocks. M and N are integers greater than or equal to 0, wherein the initial values ​​of i and j are 0, i is an integer greater than or equal to 0 and less than or equal to N, j is an integer greater than or equal to 0 and less than or equal to M, and k is an integer greater than or equal to i and less than or equal to N; if a block identifier information matching the j-th block is found in the second code block... Matching blocks are displayed in the second display area of ​​the version comparison interface, showing blocks from the i-th to the k-th block in the second code block. The j-th block in the first code block is displayed in the first display area of ​​the version comparison interface. The first and second display areas are located on opposite sides of a dividing line, with the j-th block of the first code block and the k-th block of the second code block aligned on either side of the dividing line. The value obtained by adding 1 to k is assigned to i. If no matching block is found in the second code block, the j-th block of the first code block is displayed in the first display area. If j is less than M, the value obtained by adding 1 to j is assigned to j, and the process begins again, starting from the i-th block of the second code block, searching for the k-th block whose identifier matches the j-th block's identifier. If j equals M, the process of comparing and displaying the next matching code block in the first and second block element groups begins.

[0141] The block identifier information of a code block is used to uniquely identify the code block. If the block identifier information of the first code block and the block identifier information of the second code block are the same, it is determined that the first code block and the second code block are matched.

[0142] The block identifier information is used to uniquely identify the block. If the block identifier information of the first block in the first code block is consistent with the block identifier information of the second block in the second code block, it is determined that the first block and the second block are matched.

[0143] Optionally, both the block identifier information and the building block identifier information are of the data type UUID. Other methods can also be used to uniquely identify code blocks or building blocks. This application embodiment does not limit this.

[0144] During the alignment process, if there are inconsistencies, the display area with missing blocks will have a vertical blank space.

[0145] For example, please refer to Figure 9 The illustration shows a schematic diagram of an aligned display provided in an embodiment of this application. On the left are block elements 1, 2, 3, 4, 5, and 7, and on the right are block elements 1, 5, 6, and 7. Block elements 1, 5, and 7 are kept horizontally aligned on both sides. The position of block element 6 between block elements 5 and 7 on the left is left blank, and the positions of block elements 2, 3, and 4 between block elements 1 and 5 on the right are also left blank.

[0146] Please refer to Figure 10 It illustrates a flowchart of a code block display method provided in an embodiment of this application, which executes the code block display method after determining that the first code block and the second code block match. Figure 10 The algorithm flow shown in the flowchart is as follows:

[0147] 1) Initialize i and j to 0;

[0148] 2) Starting from the i-th block of the second code block, find the block that matches the j-th block of the first code block;

[0149] 3) Was a matching block found for the j-th block of the first code block? If yes, proceed to step 4); otherwise, proceed to step 8.

[0150] 4) Assign the order of the blocks found in the second code block to k;

[0151] 5) Display the i-th to k-th blocks in the second code block in the second display area;

[0152] 6) Display the j-th block in the first code block in the first display area, and display the j-th block in the first code block and the k-th block in the second code block in alignment;

[0153] 7) Assign the value obtained by adding 1 to k to i; then execute step 9);

[0154] 8) Display the j-th block in the first code block in the first display area; execute step 9);

[0155] 9) Does the first code block contain the (j+1)th block? If yes, proceed to step 10); otherwise, proceed to step 11.

[0156] 10) Assign the value of j plus 1 to j, and continue execution from step 2);

[0157] 11) End.

[0158] The above display method can be used to display any set of matching code blocks.

[0159] (2) The first block element group is a user-defined function.

[0160] In some embodiments, parameter information of a first block element group and parameter information of a second block element group are obtained. The parameter information is used to indicate at least one block parameter and the order information of at least one block parameter contained in the custom function. Based on the parameter information of the first block element group, at least one block parameter of the first block element group is displayed in order in the first display area of ​​the version comparison interface. Based on the parameter information of the second block element group, at least one block parameter of the second block element group is displayed in order in the second display area of ​​the version comparison interface.

[0161] Parameter information is used to indicate the user's definition of a custom function, including but not limited to the function name, parameter list, and the order of at least one block parameter. The parameter list includes the input and output parameters defined in the custom function. The order information of at least one block parameter indicates the function name and the display order of the parameters in the parameter list.

[0162] For example, for any custom function, the function name of the custom function is displayed first, and then the parameter names of at least one parameter in the parameter list are displayed according to the order information.

[0163] Optionally, based on the order information of the first block element group, at least one block element contained in the first block element group is displayed in the first display area; based on the order information of the second block element group, at least one block element contained in the second block element group is displayed in the first display area; block elements aligned in the first display area and the second display area are identified as block elements with a corresponding relationship; if the block elements with a corresponding relationship are different, a corresponding distinguishing mark is displayed on the dividing line.

[0164] By using the above method, corresponding block elements in two matching block element groups are displayed according to specified rules, which helps to intuitively show users the differences between corresponding block elements.

[0165] The following section describes other features related to version control.

[0166] In some embodiments, in response to an operation on the up view control, the block elements displayed in the first display area and the second display area are adjusted such that the previous block element with a distinguishing mark displayed in the set area is displayed in the set area; in response to an operation on the down view control, the block elements displayed in the first display area and the second display area are adjusted such that the next block element with a distinguishing mark displayed in the set area is displayed in the set area.

[0167] The designated area refers to a location in the version comparison interface that is easily noticed by users. It is used to display a block element with a distinguishing mark and is set by relevant technical personnel. This embodiment of the application does not limit this. The designated area consists of a portion of the first display area and a portion of the second display area.

[0168] For example, please refer to Figure 8 Assuming the set area is the first display area 701, the area where block 804 with the distinguishing mark 809 is located is horizontally aligned with the distinguishing mark 809, and the distinguishing mark 808 is the previous distinguishing mark of the distinguishing mark 809, after the user clicks the upward view control 810, blocks 802 and 806 are displayed in the set area. Similarly, after clicking the downward view control 811, block 804 is displayed in the set area.

[0169] Using the above method, users can quickly view the differences between different versions by using the up and down view controls.

[0170] In some embodiments, in response to the operation of copying a third block element from the first item content, a third block element is added to the second item content displayed in the second display area.

[0171] Optionally, if there is no block element in the second item that corresponds to the third block element, then a new block element corresponding to the third block element is added directly to the second item, and the newly added block element is consistent with the third block element.

[0172] Optionally, if there is a block element in the second item that corresponds to the third block element, then the corresponding block element is covered, and the block element used for covering is consistent with the third block element.

[0173] Using the above method, users can directly copy block elements from previous versions into the current version of the project content, reducing the steps of referencing previous versions for editing and improving the progress of users in developing visual programming projects.

[0174] In some embodiments, the operation control further includes a view control; in response to an operation on the view control, details of the first block element group are displayed.

[0175] The detailed content of the first block element group may include, but is not limited to, the following: at least one block element included in the first block element group, modification markers, annotation information, etc., and may also include other content, which is not limited in this embodiment of the application.

[0176] For example, click Figure 5 The viewing control 52 in the work area can display at least one block element contained in the block element group 44.

[0177] In some embodiments, in response to an operation on the rename control for the first historical version, a name input box for the first historical version is displayed; in response to an operation on entering rename text in the name input box, the name of the first historical version is changed to the rename text; in response to an operation on the restore control for the first historical version, the current version is saved as the fourth historical version, and the first historical version is determined as the new current version; in response to an operation on the delete control for the first historical version, the display content of the first historical version is removed from the version management interface.

[0178] In some embodiments, in response to an operation on an expanded control for a first historical version, an operation control for the first historical version is displayed, the operation control including at least one of the following: a rename control, a restore control, and a delete control.

[0179] The Rename control is used to reset the name of the first historical version. The Restore control is used to restore the first historical version to the current version for continued editing. The Delete control is used to delete the first historical version. Note that once the first historical version is deleted, it cannot be restored.

[0180] Optionally, in response to an operation on the restore control for the first historical version, the version content of the first historical version is loaded into the work area; the current version is saved as the fourth historical version, and the first historical version is determined as the new current version.

[0181] For example, please refer to Figure 11 The diagram illustrates an embodiment of the operation controls for historical versions provided in this application. In the version list 41 displayed in the left area of ​​the version management interface 40, the user clicks the expansion control 111 of the pre-release version 42 to display three operation controls for the pre-release version 42, namely the rename control 112, the restore control 113, and the delete control 114.

[0182] By providing users with the functions of renaming, restoring, and deleting specific historical versions, the above methods help users manage multiple historical versions of visual programming projects.

[0183] The following are embodiments of the apparatus described in this application, which can be used to execute the embodiments of the method described in this application. For details not disclosed in the apparatus embodiments of this application, please refer to the embodiments of the method described in this application.

[0184] Please refer to Figure 12 This diagram illustrates a block diagram of a version display device for a visual programming project according to an embodiment of this application. The device has the functionality to implement the method example described above; this functionality can be implemented in hardware or by hardware executing corresponding software. The device can be the computer device described above, or it can be installed within a computer device. For example... Figure 12 As shown, the device 1200 may include an entry display module 1210, a version management module 1220, a version comparison module 1230, and a content comparison module 1240.

[0185] The entry display module 1210 is used to display an entry control for opening the version management interface in the user interface of the visual programming editor, which is used to develop visual programming projects.

[0186] Version management module 1220 is used to display the version management interface in response to an operation on the entry control. The version management interface displays at least one historical version of the visual programming project.

[0187] The version comparison module 1230 is used to display the version comparison interface of the first historical version in response to the operation of comparing the first historical version among the at least one historical version.

[0188] The content comparison module 1240 is used to compare and display the content of a first item and the content of a second item in the version comparison interface. The content of the first item is the content of the visual programming project in the first historical version, and the content of the second item is the content of the visual programming project in the current version or the second historical version.

[0189] In some embodiments, the version comparison interface displays a first display area and a second display area; the content comparison module 1240 is used to display at least one block element contained in the content of the first project in the first display area; and to display at least one block element contained in the content of the second project in the second display area; wherein the block element corresponds to a piece of programming logic code.

[0190] In some embodiments, the first display area and the second display area are located on both sides of the dividing line. The content comparison module 1240 is further configured to align and display two corresponding block elements in the first item content and the second item content on both sides of the dividing line; and when the programming logic codes of the two corresponding block elements are different, to display a distinction mark at the position on the dividing line corresponding to the two corresponding block elements.

[0191] In some embodiments, the content comparison module 1240 is further configured to display a distinction mark at the position corresponding to the first building block element on the dividing line when the first item content contains a first building block element and the second item content does not contain a building block element corresponding to the first building block element; and to display a distinction mark at the position corresponding to the second building block element on the dividing line when the second item content contains a second building block element and the first item content does not contain a building block element corresponding to the second building block element.

[0192] In some embodiments, the content comparison module 1240 is further configured to, in response to an operation of the up-view control, adjust the block elements displayed in the first display area and the second display area such that the previous block element with the distinguishing mark displayed in the set area is displayed in the set area; and in response to an operation of the down-view control, adjust the block elements displayed in the first display area and the second display area such that the next block element with the distinguishing mark displayed in the set area is displayed in the set area.

[0193] In some embodiments, the content comparison module 1240 is further configured to, in response to the operation of copying the third block element in the first item content, add and display the third block element in the second item content displayed in the second display area.

[0194] In some embodiments, the version comparison module 1230 includes an element group display submodule and a version comparison submodule (in Figure 12 (Not shown in the image); The content comparison module 1240 is also used to compare and display the first block element group and the second block element group in the version comparison interface, wherein the second block element group is a block element group in the second item content that has a corresponding relationship with the first block element group.

[0195] The element group display submodule, in response to the operation of selecting a first historical version from the at least one historical version, displays the identification information of at least one block element group contained in the first item content.

[0196] The version comparison submodule, in response to the operation of selecting the first block element group in the at least one block element group, displays the version comparison interface of the first historical version.

[0197] In some embodiments, the block element group includes: a code block group and a custom function, the block element including: a block and a block parameter; the element group display submodule is configured to display a code block group control and a function control in response to an operation of selecting a first historical version from the at least one historical version; in response to an operation of the code block group control, display identification information of at least one code block group contained in the first project content, the code block group including at least one code block, the code block including at least one block; in response to an operation of the function control, display identification information of at least one custom function contained in the first project content, the custom function being used to encapsulate at least one block, the custom function including at least one block parameter, the block parameter being used to pass data in the custom function.

[0198] In some embodiments, the version comparison module 1230 is further configured to, in response to an operation of selecting a first block element group from the at least one block element group, display an operation control for the first block element group, the operation control including at least one of the following: a first comparison control and a second comparison control; in response to an operation of the first comparison control, display a version comparison interface for the first historical version, wherein the second item content is the item content of the visual programming project in the current version; and in response to an operation of the second comparison control, display a version comparison interface for the first historical version, wherein the second item content is the item content of the visual programming project in the second historical version.

[0199] In some embodiments, the operation control further includes a viewing control; the version comparison module 1230 is further configured to display detailed content of the first block element group in response to an operation on the viewing control.

[0200] In some embodiments, the version comparison module 1230 is further configured to display a status label corresponding to the block element group, the status label being used to indicate the editing status of the block element group.

[0201] In some embodiments, the editing state includes at least one of the following: a new state, a modified state, and a deleted state; the version comparison module 1230 is further configured to: if there is no block element group in the third project content that corresponds to the block element group, then determine the editing state of the block element group as a new state; if there is a block element in the block element group that is different from the block element in the third project content, then determine the editing state of the block element group as a modified state; if there is no block element group in the first project content and there is a block element group in the third project content, then determine the editing state of the block element group as a deleted state; wherein, the third project content is the project content of the visual programming project in the third historical version, and the third historical version refers to the version most recently saved before saving the first historical version.

[0202] In some embodiments, the first block element group is a code block group; the content comparison module 1240 is further configured to obtain code block information of each of the at least one code block contained in the first block element group, and code block information of each of the at least one code block contained in the second block element group, wherein the code block information includes block identifier information of the code block, and block identifier information of at least one block included in the code block; if the block identifier information of the first code block matches the block identifier information of the second code block, starting from the i-th block of the second code block, a search is performed to find the block identifier information of the first code block and the code block information of the second code block. The block identifier information of the j-th block in the first code block matches the block identifier information of the k-th block. The first code block is a code block contained in the first block element group, and the first code block includes M blocks. The second code block is a code block contained in the second block element group, and the second code block includes N blocks. M and N are integers greater than or equal to 0, where the initial values ​​of i and j are 0, i is an integer greater than or equal to 0 and less than or equal to N, j is an integer greater than or equal to 0 and less than or equal to M, and k is an integer greater than or equal to i and less than or equal to N. If in the second... If a matching block is found in the code block, the blocks from the i-th to the k-th block in the second code block are displayed in the second display area of ​​the version comparison interface, and the j-th block in the first code block is displayed in the first display area of ​​the version comparison interface. The first and second display areas are located on opposite sides of a dividing line, and the j-th block of the first code block and the k-th block of the second code block are aligned on opposite sides of the dividing line. The value obtained by adding 1 to k is assigned to i. If no matching block is found in the second code block... The process begins by displaying the j-th block of the first code block in the first display area. If j is less than M, the value obtained by adding 1 to j is assigned to j, and the process starts again from the step of searching for the k-th block that matches the block identifier information of the j-th block of the first code block, starting from the i-th block of the second code block, when the block identifier information of the first code block matches the block identifier information of the second code block. If j equals M, the process of comparing and displaying the next matching code block in the first and second block element groups begins.

[0203] In some embodiments, the first block element group is a user-defined function; the content comparison module 1240 is further configured to obtain parameter information of the first block element group and parameter information of the second block element group, wherein the parameter information is used to indicate at least one block parameter contained in the user-defined function and the order information of the at least one block parameter; based on the parameter information of the first block element group, at least one block parameter of the first block element group is displayed sequentially in the first display area of ​​the version comparison interface; based on the parameter information of the second block element group, at least one block parameter of the second block element group is displayed sequentially in the second display area of ​​the version comparison interface.

[0204] In some embodiments, the device 1200 further includes other functional modules (in Figure 12 (Not shown in the image) is used to respond to an operation on the rename control for the first historical version, display the name input box for the first historical version, and change the name of the first historical version to the rename text in response to an operation on the name input box; save the current version as the fourth historical version in response to an operation on the restore control for the first historical version, and determine the first historical version as the new current version; and remove the display content of the first historical version from the version management interface in response to an operation on the delete control for the first historical version.

[0205] In some embodiments, the device 1200 further includes an automatic save module (in Figure 12 (Not shown in the image) is used to automatically save the current version as the fifth historical version when the editing time of the current version is greater than or equal to a threshold; in the version comparison interface, in response to the operation of running the first project content and the second project content, the running results of the first project content and the running results of the second project content are compared and displayed.

[0206] In summary, the technical solution provided in this application allows users to select the first historical version of the project content in the version management interface, and then compare and display it with the second version of the project content in the version comparison interface. This enables users to compare project content from different versions. Comparing and displaying project content from different versions on the same interface helps users quickly locate the differences between project content from different versions, reduces the probability of errors caused by manual location, and thus improves the user's development efficiency.

[0207] It should be noted that the apparatus provided in the above embodiments is only illustrated by the division of the above functional modules when implementing its functions. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. In addition, the apparatus and method embodiments provided in the above embodiments belong to the same concept, and the specific implementation process can be found in the method embodiments, which will not be repeated here.

[0208] Please refer to Figure 13 This diagram illustrates a structural block diagram of a terminal device 1300 provided in one embodiment of this application. The terminal device 1300 may be... Figure 1 The terminal device 10 in the implementation environment shown is used to implement the version display method for a visual programming editor provided in the above embodiments. Specifically:

[0209] Typically, terminal device 1300 includes a processor 1310 and a memory 1320.

[0210] Processor 1310 may include one or more processing cores, such as a quad-core processor, an octa-core processor, etc. Processor 1310 may be implemented using at least one hardware form selected from Digital Signal Processing (DSP), Field Programmable Gate Array (FPGA), and Programmable Logic Array (PLA). Processor 1310 may also include a main processor and a coprocessor. The main processor, also known as the Central Processing Unit (CPU), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 1310 may integrate a Graphics Processing Unit (GPU), which is responsible for rendering and drawing the content to be displayed on the screen. In some embodiments, processor 1310 may also include an AI processor for handling computational operations related to machine learning.

[0211] The memory 1320 may include one or more computer-readable storage media, which may be non-transitory. The memory 1320 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 1320 are used to store a computer program configured to be executed by one or more processors to implement the version display method applied to the visual programming editor described above.

[0212] In some embodiments, the terminal device 1300 may also optionally include a peripheral device interface 1330 and at least one peripheral device. The processor 1310, memory 1320, and peripheral device interface 1330 can be connected via a bus or signal line. Each peripheral device can be connected to the peripheral device interface 1330 via a bus, signal line, or circuit board. Specifically, the peripheral device includes at least one of a radio frequency circuit 1340, a display screen 1350, an audio circuit 1360, and a power supply 1370.

[0213] Those skilled in the art will understand that Figure 13 The structure shown does not constitute a limitation on the terminal device 1300, and may include more or fewer components than shown, or combine certain components, or use different component arrangements.

[0214] In an exemplary embodiment, a computer-readable storage medium is also provided, wherein a computer program is stored in the storage medium, and the computer program, when executed by a processor, implements the version display method applied to a visual programming editor described above. Optionally, the computer-readable storage medium may include: read-only memory (ROM), random access memory (RAM), solid-state drive (SSD), or optical disk, etc. The random access memory may include resistive random access memory (ReRAM) and dynamic random access memory (DRAM).

[0215] In an exemplary embodiment, a computer program product is also provided, the computer program product including a computer program stored in a computer-readable storage medium. A processor of a terminal device reads the computer program from the computer-readable storage medium, and the processor executes the computer program, causing the terminal device to perform the version display method applied to a visual programming editor as described above.

[0216] It should be noted that the data collection and processing in this application should strictly comply with the requirements of relevant national laws and regulations, obtain the informed consent or separate consent of the personal information subject, and carry out subsequent data use and processing within the scope of laws and regulations and the authorization of the personal information subject.

[0217] It should be understood that "multiple" as used herein refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. Furthermore, the step numbers described herein are merely illustrative of one possible execution order. In some other embodiments, the steps may not be executed in numerical order, such as two steps with different numbers being executed simultaneously, or two steps with different numbers being executed in the reverse order of the illustration. This application does not limit this.

[0218] The above description is merely an optional embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A method for visually displaying the version of a programming project, characterized in that, The method includes: The user interface of the visual programming editor displays an entry control for opening the version management interface. The visual programming editor is used to develop visual programming projects. In response to an operation on the entry control, the version management interface is displayed, which displays at least one historical version of the visual programming project; In response to the operation of comparing the first historical version among the at least one historical version, the identification information of at least one group of block elements contained in the first project content is displayed; In response to the operation of selecting the first block element group in the at least one block element group, the version comparison interface of the first historical version is displayed. The block element group includes a series of related block elements, and the block elements in the block element group cooperate with each other to achieve functions or tasks. The version comparison interface compares and displays the content of the first project and the content of the second project. The content of the first project is the content of the visual programming project in the first historical version, and the content of the second project is the content of the visual programming project in the current version or the second historical version. The comparison of the first and second project contents includes: in the version comparison interface, the first block element group and the second block element group are compared and displayed. The version comparison interface also displays the differences between the first and second block element groups. The second block element group is a block element group in the second project contents that corresponds to the first block element group.

2. The method according to claim 1, characterized in that, The version comparison interface displays a first display area and a second display area; The version comparison interface compares and displays the content of the first item and the content of the second item, including: In the first display area, at least one block element contained in the content of the first project is displayed; In the second display area, at least one block element contained in the content of the second project is displayed; Each block element corresponds to a piece of programming logic code.

3. The method according to claim 2, characterized in that, The first display area and the second display area are located on both sides of the dividing line, and the method further includes: Align and display two corresponding block elements from the first and second project contents on both sides of the dividing line. If the programming logic codes of two corresponding building blocks are different, a distinguishing mark is displayed at the position on the dividing line corresponding to the two corresponding building blocks.

4. The method according to claim 3, characterized in that, The method further includes: If the first item contains a first building block element, and the second item does not contain a building block element that corresponds to the first building block element, a distinguishing mark is displayed at the position corresponding to the first building block element on the dividing line; If the second item contains a second building block element, and the first item does not contain a building block element that corresponds to the second building block element, a distinguishing mark is displayed at the position corresponding to the second building block element on the dividing line.

5. The method according to claim 3, characterized in that, The method further includes: In response to an operation on the up view control, the block elements displayed in the first display area and the second display area are adjusted such that the block element with the distinguishing mark preceding the block element displayed in the set area is displayed in the set area; In response to an operation on the down view control, the block elements displayed in the first display area and the second display area are adjusted such that the next block element with the distinguishing mark displayed in the set area is displayed in the set area.

6. The method according to claim 2, characterized in that, The method further includes: In response to the operation of copying the third block element from the first item content, the third block element is added and displayed in the second item content displayed in the second display area.

7. The method according to claim 1, characterized in that, The block element group includes: a code block group and a user-defined function; the block element includes: a block and a block parameter. In response to the operation of selecting a first historical version from the at least one historical version, the display of identification information for at least one group of block elements contained in the first project content includes: In response to the operation of selecting a first historical version from the at least one historical version, a code block group control and a function control are displayed; In response to an operation on the code block group control, identification information of at least one code block group contained in the first project content is displayed, the code block group including at least one code block, and the code block including at least one block; In response to an operation on the function control, the identification information of at least one custom function contained in the first item content is displayed. The custom function is used to encapsulate at least one block, and the custom function includes at least one block parameter, which is used to pass data in the custom function.

8. The method according to claim 1, characterized in that, The method further includes: In response to the operation of selecting a first block element group from the at least one block element group, an operation control for the first block element group is displayed, the operation control including at least one of the following: a first comparison control and a second comparison control; In response to an operation on the first comparison control, a version comparison interface for the first historical version is displayed, wherein the second item content is the item content of the visual programming project in the current version; In response to an operation on the second comparison control, a version comparison interface for the first historical version is displayed, wherein the second item content is the item content of the visual programming project in the second historical version.

9. The method according to claim 8, characterized in that, The operation control also includes a viewing control; the method further includes: In response to an operation on the view control, the detailed contents of the first block element group are displayed.

10. The method according to claim 1, characterized in that, The method further includes: Display the status label corresponding to the block element group, which is used to indicate the editing status of the block element group.

11. The method according to claim 10, characterized in that, The editing state includes at least one of the following: add state, modify state, and delete state; the method further includes: If there is no block element group in the third project that corresponds to the block element group, then the editing status of the block element group will be determined as the new state. If there is a block element in the block element group that is different from the block element in the third item content, then the editing state of the block element group is determined to be the modified state. If the block element group does not exist in the first item content, but exists in the third item content, then the editing status of the block element group is determined to be the deletion status; The third project content refers to the project content of the visual programming project in the third historical version, and the third historical version refers to the version most recently saved before saving the first historical version.

12. The method according to claim 1, characterized in that, The first block element group is a code block group; The comparison of the first and second block element groups in the version comparison interface includes: Obtain the code block information of each of the at least one code block contained in the first block element group, and the code block information of each of the at least one code block contained in the second block element group, wherein the code block information includes the block identifier information of the code block and the block identifier information of the at least one block included in the code block; If the block identifier information of the first code block matches the block identifier information of the second code block, starting from the i-th block of the second code block, search for the block identifier information of the k-th block that matches the block identifier information of the j-th block of the first code block. The first code block is the code block contained in the first block element group, which includes M blocks. The second code block is the code block contained in the second block element group, which includes N blocks. M and N are integers greater than or equal to 0. The initial values ​​of i and j are 0. i is an integer greater than or equal to 0 and less than or equal to N. j is an integer greater than or equal to 0 and less than or equal to M. k is an integer greater than or equal to i and less than or equal to N. If a matching block is found in the second code block, the blocks from the i-th to the k-th block in the second display area of ​​the version comparison interface are displayed, and the j-th block in the first code block is displayed in the first display area of ​​the version comparison interface. The first display area and the second display area are located on both sides of the dividing line, and the j-th block of the first code block and the k-th block of the second code block are displayed aligned on both sides of the dividing line. Assign the value obtained by adding 1 to k to i; If no matching block is found in the second code block, the j-th block of the first code block is displayed in the first display area; If j is less than M, the value obtained by adding 1 to j is assigned to j, and the process starts again from the step of searching for the block identifier information of the kth block that matches the block identifier information of the jth block of the first code block, when the block identifier information of the first code block matches the block identifier information of the second code block. When j equals M, the process of comparing and displaying the next matching code block in the first and second block groups begins.

13. The method according to claim 1, characterized in that, The first block element group is a user-defined function; The comparison of the first and second block element groups in the version comparison interface includes: Obtain parameter information of the first block element group and parameter information of the second block element group, wherein the parameter information is used to indicate at least one block parameter contained in the custom function and the order information of the at least one block parameter; Based on the parameter information of the first block element group, at least one block parameter of the first block element group is displayed sequentially in the first display area of ​​the version comparison interface. Based on the parameter information of the second block element group, at least one block parameter of the second block element group is displayed sequentially in the second display area of ​​the version comparison interface.

14. The method according to claim 1, characterized in that, The method further includes at least one of the following: In response to an operation on the rename control for the first historical version, a name input box for the first historical version is displayed; in response to an operation of entering rename text in the name input box, the name of the first historical version is changed to the rename text. In response to the operation of the restore control for the first historical version, the current version is saved as the fourth historical version, and the first historical version is determined as the new current version; In response to the operation of the delete control for the first historical version, the display content of the first historical version is removed from the version management interface.

15. The method according to claim 1, characterized in that, The method further includes at least one of the following: If the editing time of the current version is greater than or equal to the threshold, the current version will be automatically saved as the fifth historical version. In the version comparison interface, in response to the operation of running the first project content and the second project content, the running results of the first project content and the running results of the second project content are compared and displayed.

16. A version display device for a visual programming project, characterized in that, The device includes: An entry display module is used to display an entry control for opening the version management interface in the user interface of the visual programming editor, which is used to develop visual programming projects; The version management module is used to display the version management interface in response to the operation of the entry control. The version management interface displays the display content of at least one historical version of the visual programming project. The version comparison module is used to display the identification information of at least one group of building block elements contained in the first project content in response to the operation of comparing the first historical version among the at least one historical version; The version comparison module is also used to display the version comparison interface of the first historical version in response to the operation of selecting the first block element group in the at least one block element group. The block element group includes a series of related block elements, and the block elements in the block element group cooperate with each other to achieve functions or tasks. The content comparison module is used to compare and display the content of a first item and the content of a second item in the version comparison interface. The content of the first item is the content of the visual programming project in the first historical version, and the content of the visual programming project in the current version or the second historical version is the content of the visual programming project. The comparison of the first and second project contents includes: in the version comparison interface, the first block element group and the second block element group are compared and displayed. The version comparison interface also displays the differences between the first and second block element groups. The second block element group is a block element group in the second project contents that corresponds to the first block element group.

17. A computer device, characterized in that, The computer device includes a processor and a memory, the memory storing a computer program that is loaded and executed by the processor to implement the method as claimed in any one of claims 1 to 15.

18. A computer-readable storage medium, characterized in that, The storage medium stores a computer program that is executed by a processor to implement the method as described in any one of claims 1 to 15.

19. A computer program product, characterized in that, The computer program product includes a computer program that is loaded and executed by a processor to implement the method as described in any one of claims 1 to 15.

Images