CN112306481A - Code display method, system, device and storage medium for graphical programming scene - Google Patents
Code display method, system, device and storage medium for graphical programming scene Download PDFInfo
- Publication number
- CN112306481A CN112306481A CN202011111004.9A CN202011111004A CN112306481A CN 112306481 A CN112306481 A CN 112306481A CN 202011111004 A CN202011111004 A CN 202011111004A CN 112306481 A CN112306481 A CN 112306481A
- Authority
- CN
- China
- Prior art keywords
- target
- code
- operation area
- function
- function block
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 55
- 238000013507 mapping Methods 0.000 claims abstract description 18
- 230000006870 function Effects 0.000 claims description 259
- 230000008569 process Effects 0.000 description 12
- 230000004048 modification Effects 0.000 description 9
- 238000012986 modification Methods 0.000 description 9
- 238000010586 diagram Methods 0.000 description 5
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000007667 floating Methods 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
Abstract
The application discloses a code display method, a system, a device and a storage medium of a graphical programming scene. The method comprises the following steps: providing a graphical programming interface, wherein the graphical programming interface comprises a first operation area and a second operation area, the first operation area is provided with a function block set, each function block is respectively configured with a group of function codes, and mapping relations exist between the function codes and the function blocks; receiving a dragging instruction sent by a user, wherein the dragging instruction is used for requesting to drag a target function block in the function block set from the first operation area to a target position of the second operation area; displaying the target function block at the target position; receiving a switching instruction sent by a user, and acquiring a target code corresponding to the target function block; and generating a third operation area and displaying the target code in the third operation area.
Description
Technical Field
The present application relates to the field of programming technologies, and in particular, to a method, a system, an apparatus, and a storage medium for displaying codes of a graphical programming scene.
Background
Graphical programming refers to a programming method for creating a program by operating graphical elements by a designer, compared with the traditional programming mode, the graphical programming is realized by dragging preset graphical function blocks and splicing the preset graphical function blocks together according to rules without typing a text command during programming, and each graphical function block is formed by one or more function functions to form a function code so as to realize a module programming function. Under the graphical programming scene, the programming process is flexible in operation, strong in readability and easy to check errors.
At present, in a related scheme for realizing graphical programming, in the process of graphical programming by a user, actual function codes represented by graphical function blocks are invisible to the user, and the user cannot know the programming principle of the actual function codes of the graphical function blocks, so that the user experience is influenced.
Disclosure of Invention
In order to solve the technical problem, the application provides a code display method, a system, a device and a storage medium for a graphical programming scene, so that a user can read an actual function code behind a graphical function block in a graphical programming process, and user experience is improved.
The application provides a code display method of a graphical programming scene in a first aspect, which comprises the following steps:
providing a graphical programming interface, wherein the graphical programming interface comprises a first operation area and a second operation area, the first operation area is provided with a function block set, each function block is respectively configured with a group of function codes, and mapping relations exist between the function codes and the function blocks;
receiving a dragging instruction sent by a user, wherein the dragging instruction is used for requesting to drag a target function block in the function block set from the first operation area to a target position of the second operation area;
displaying the target function block at the target position;
receiving a switching instruction sent by a user, and acquiring a target code corresponding to the target function block;
and generating a third operation area and displaying the target code in the third operation area.
Optionally, if the number of the target function blocks is several, the displaying the target code in the third operation area includes:
determining the splicing relation of the target function blocks in the second operation area;
determining an execution sequence among the target codes corresponding to the target function blocks according to the splicing relation;
displaying the object codes in the third operation area according to the execution sequence.
Optionally, the determining, according to the splicing relationship, an execution sequence among the target codes corresponding to the target function blocks includes:
when the splicing relation is longitudinal splicing, determining that the execution sequence among the target codes corresponding to the target function blocks is sequential execution;
and when the splicing relationship is transverse splicing, determining that the execution sequence among the target codes corresponding to the target function blocks is selected to execute or circularly execute.
Optionally, the method further includes:
presetting the attribute of the third operation area as an editable attribute;
receiving an editing instruction of a user on the target code, and modifying the target code according to the editing instruction;
and updating the function codes configured by the target function blocks according to the modified target codes.
Optionally, the updating the function code configured by the target function block according to the modified target code includes:
judging whether the modified target code is legal or not;
if yes, updating the function codes configured by the target function block according to the modified target codes;
if not, generating prompt information, wherein the prompt information is used for prompting the user that the target code is illegal.
Optionally, the graphical programming interface further includes a presentation interface, the presentation interface includes at least one operation object, and after the object code is displayed in the third operation area, the method further includes:
receiving a dynamic display instruction sent by a user, compiling and executing the object code;
and controlling the operation object to execute the operation corresponding to the target code in the demonstration interface, and displaying the target code in a highlighted manner in the third operation area.
Optionally, the method further includes:
receiving a preview instruction sent by a user, and acquiring a target code corresponding to the target function block;
generating a temporary display area independent of the graphical programming interface and displaying the object code in the temporary display area;
and receiving a preview canceling instruction sent by a user, and hiding the temporary display area.
A second aspect of the present application provides a code display system for a graphical programming scenario, including:
the system comprises a first display unit, a second display unit and a display unit, wherein the first display unit is used for providing a graphical programming interface, the graphical programming interface comprises a first operation area and a second operation area, a function block set is accommodated in the first operation area, each function block is respectively configured with a group of function codes, and mapping relations exist between the function codes and the function blocks;
a first receiving unit, configured to receive a dragging instruction sent by a user, where the dragging instruction is used to request that a target function block in the function block set is dragged from the first operation area to a target position of the second operation area;
a second display unit for displaying the target function block at the target position;
the second receiving unit is used for receiving a switching instruction sent by a user;
the acquisition unit is used for acquiring a target code corresponding to the target function block after the second receiving unit receives a switching instruction sent by a user;
a first generating unit configured to generate a third operation region;
a third display unit, configured to display the object code in the third operation area.
A third aspect of the present application provides a code display apparatus for a graphical programming scenario, including:
a processor, a memory, an input-output device, and a bus;
the processor is connected with the memory, the input and output equipment and the bus;
the memory holds a program that the processor calls to perform the code presentation method as claimed in any one of the first aspects.
A fourth aspect of the present application provides a computer-readable storage medium having a program stored thereon, the program, when executed on a computer, performing the code presentation method of any one of the first aspects.
According to the technical scheme, the method has the following advantages:
by adding the code display function, a user can read the actual code behind the graphical function block in the graphical programming process, so that the user can know the programming principle of the actual function code of the graphical function block by comparing the graphical function block with the code, the programming thought is clear, the user experience is improved, and the practicability is improved.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the description of the embodiments are briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.
FIG. 1 is a flowchart illustrating an embodiment of a method for displaying codes of a graphical programming scenario provided by the present application;
FIG. 2 is a schematic flowchart of another embodiment of a code display method for a graphical programming scenario provided in the present application;
FIG. 3 is a schematic flowchart of another embodiment of a code display method for a graphical programming scenario provided in the present application;
FIG. 4 is a schematic structural diagram of an embodiment of a code presentation system of a graphical programming scenario provided by the present application;
FIG. 5 is a schematic structural diagram of another embodiment of a code presentation system of a graphical programming scenario provided by the present application;
fig. 6 is a schematic structural diagram of an embodiment of a code display apparatus of a graphical programming scenario provided in the present application.
Detailed Description
The application provides a code display method, a system, a device and a storage medium for a graphical programming scene, so that a user can read actual codes behind a graphical programming function in the graphical programming process, and the user experience is improved.
It should be noted that the code display method for the graphical programming scene provided by the present application may be applied to a terminal, a system, and a server, for example, the terminal may be a smartphone or a computer, a tablet computer, a smart television, a smart watch, a portable computer terminal, or a fixed terminal such as a desktop computer, and is specifically applied to various graphical programming tools. For convenience of explanation, the following description will be given taking a terminal as an execution subject.
Referring to fig. 1, fig. 1 is a flowchart illustrating an embodiment of a code display method for a graphical programming scenario provided by the present application, where the method includes:
101. providing a graphical programming interface, wherein the graphical programming interface comprises a first operation area and a second operation area, the first operation area is internally provided with a function block set, each function block is respectively configured with a group of function codes, and the function codes and the function blocks have mapping relations;
in the graphical programming scene, a user does not need to write source codes, and only needs to drag graphical programming functional blocks (namely the functional blocks in the application) to perform splicing combination, so that programming is realized for a target object. In the game scene, the target object can be a cartoon character, an airplane or other virtual objects.
In this embodiment, the graphical programming interface provided by the terminal is an interactive interface of a graphical programming application, and the graphical programming interface includes a first operation area and a second operation area. The first operation area includes a plurality of different function blocks, that is, a plurality of graphical function blocks with function codes written in advance are displayed in the first operation area, and a user can drag the function blocks in the first operation area to the second operation area to combine the function blocks.
Each function block corresponds to a group of function codes, and the terminal completes the conversion from the graphical programming program to the executable code sequence of the computer through the mapping relation between the predefined function blocks and the function codes. For example, a function realized by a certain function block is "rotate 15 degrees", and its corresponding function code is "turn (15)"; the other function block realizes the function of advancing 1 lattice within 0.5 second, the corresponding function code is moveForward (1,0.5), a mapping relation is established between the function blocks and the function code, when the function block is called, the terminal converts the graph into the statement, namely the function block is converted into the code according to the mapping relation, then the code is executed according to the corresponding instruction, and the result is output.
It should be noted that the graphical programming interface may further include other areas besides the first operating area and the second operating area, and the interface functions provided by the areas in the graphical programming interface are different. In addition, the relative position of each region in the graphical programming interface, the size of the region, and the style of each function block can be flexibly set according to a specific scene, which is not limited herein.
102. Receiving a dragging instruction sent by a user, wherein the dragging instruction is used for requesting to drag a target function block in the function block set from the first operation area to a target position of the second operation area;
it should be noted that the target function block refers to a function block called by a user in a graphical programming process. In practical application, a user selects a function block to be called in a first operation area, and drags and places the function block at a proper position in a second area through dragging operation. The second operating region refers to a programming region in which a user can complete programming of the target object.
103. Displaying the target function block at the target position;
when the target function block is placed in the second operation area through dragging, the dragged function block is determined as the current object to be edited, the terminal displays the target function block at the target position to indicate that the target function block is successfully called currently, and the terminal can control the target object by executing the target code corresponding to the target function block. For example, after a user drags a "rotate 15 degrees" function block from a first operation region to a second operation region through a dragging operation, the terminal displays the function block in the second operation region, and at this time, when the user initiates an execution instruction, the terminal obtains and compiles and executes a "turn (15)" code according to a mapping relationship, that is, the control target object rotates 15 degrees.
104. Receiving a switching instruction sent by a user, and acquiring a target code corresponding to the target function block;
the object code refers to a function code corresponding to a function block called by a user.
In this embodiment, the user may start the code display function by switching the instruction, that is, display the function code corresponding to the target function block. Specifically, the terminal may obtain the switching instruction by detecting a click operation in the preset region, for example, the user may start the code display function by pressing a specific button.
After receiving the switching instruction, the terminal finds the function code corresponding to each function block in the graphical programming program according to the mapping relation between the predefined function blocks and the function codes.
105. And generating a third operation area and displaying the object code in the third operation area.
After receiving the switching instruction, the terminal generates a third operation area, namely a code display area, and the terminal displays the acquired target code in the code display area. For example, a function block "advance 1 lattice within 0.5 second" is displayed in the second operation area, when the terminal receives a switching instruction initiated by a user, the terminal acquires a function code "move forward (1, 0.5)" according to a mapping relationship, and then generates a third operation area and displays the code. It should be noted that, in a graphical programming scenario, related parameters in the code may be directly modified in the function block, for example, a parameter indicating time in "moveForward (1, 0.5)", and if the user modifies the parameter value to be 1 in the function block, the code is also updated to be corresponding to "moveForward (1, 1)" when switching to code presentation.
In this embodiment, by adding the code display function, the user can read the actual code behind the graphical function block in the graphical programming process, so that the user can know the programming principle of the actual function code of the graphical function block through graphical programming and code comparison, the programming idea is clear, the user experience is improved, and the practicability is improved.
In conjunction with the above embodiments, the following will specifically describe the relevant mechanism and code modification function of the code presentation method of the graphical programming scenario.
Referring to fig. 2, fig. 2 is another embodiment of a code display method for a graphical programming scenario provided in the present application, the method includes:
201. providing a graphical programming interface, wherein the graphical programming interface comprises a first operation area and a second operation area, the first operation area is internally provided with a function block set, each function block is respectively configured with a group of function codes, and the function codes and the function blocks have mapping relations;
202. receiving a dragging instruction sent by a user, wherein the dragging instruction is used for requesting to drag a target function block in the function block set from the first operation area to a target position of the second operation area;
203. displaying the target function block at the target position;
204. receiving a switching instruction sent by a user, and acquiring a target code corresponding to the target function block;
205. generating a third operation area;
in this embodiment, steps 201 to 205 are similar to steps 101 to 105 in the embodiment of the present invention, and are not described herein again.
206. Determining the splicing relation of the target function blocks in the second operation area;
in the graphical programming scene, the terminal determines the specific executable code sequence through the splicing process of the graphical function blocks, so when a plurality of target function blocks exist in the second operation area, before the target code is displayed, the splicing relationship of the function blocks needs to be determined, and the correct code sequence can be displayed.
207. Determining an execution sequence among the target codes corresponding to the target function blocks according to the splicing relation;
and under the graphical programming scene, the terminal processes the construction and analysis of the graphical programming program according to a preset splicing rule. Specifically, the terminal determines the execution sequence of each code according to the splicing sequence between the function blocks, and when the splicing relationship between the function blocks is vertical splicing, the terminal determines that the execution sequence between the corresponding target codes is sequential execution. For example, the function blocks of "rotate by 15 degrees" and "advance by 1 lattice within 0.5 second" are spliced together longitudinally in sequence, and then "turn (15)" is executed first and then "moveForward (1, 0.5)" is executed according to the splicing sequence, so that the code should be displayed according to the execution sequence.
And when the splicing relation is horizontal splicing, the terminal determines the execution sequence between the corresponding target codes as selective execution or circular execution. For example, to implement "repeat ten times and rotate 15 degrees", it is necessary to transversely splice the "repeat 10 times" function block and the "rotate 15 degrees" function block to implement loop execution, and at this time, the code "for i _ ═ 1,10 should be displayed according to the loop execution sequence; do turn (15); end'
208. Displaying the object codes in the third operation area according to the execution sequence;
and the terminal displays the object codes in sequence according to the execution sequence among the object codes, so that the finally displayed code sequence can correspond to the program compiled by the functional block combination and accords with the execution result of the final program.
209. Presetting the attribute of the third operation area as an editable attribute;
furthermore, for some specific users, a code modification function can be opened, and the user can freely modify the displayed code through the code modification function. And giving modification permission to the specific user for the editable attribute by presetting a third operation area in the graphical programming interface of the user.
210. Receiving an editing instruction of a user for the target code, and modifying the target code according to the editing instruction;
when the user has the modification right for the code displayed in the third operation area, the user can modify the target code, so that the function expected by the user is realized. For example, the code of the function block "advance 1 lattice in 0.5 second" is "moveForward (1, 0.5)", and the user can modify its code to "turn (60); moveForward (1,0.5) ", and the function block can be rotated by 60 degrees and advanced by 1 lattice within 0.5 second by calling the function block after modification, thereby realizing the personalized customization of the function block to meet different requirements of users.
211. Judging whether the modified target code is legal, if so, executing step 212, otherwise, executing step 213;
after the user modifies the code, the terminal needs to determine whether the modified target code conforms to the preset grammar rule of the used programming language. If so, the terminal executes step 212 to update the function code corresponding to the function block; if the code does not match, the terminal cannot compile and execute the code, and then the execution step 213 generates a prompt message.
212. Updating the function code configured by the target function block according to the modified target code;
when the target code modified by the user accords with the preset grammar rule, the terminal updates the function code configured by the function block corresponding to the target code according to the modified target code, namely, the mapping relation between the target function block and the function code is reestablished and stored according to the modified target code, and the function of the target code modified by the user can be realized when the function block is called later.
213. And generating prompt information for prompting the user that the object code is illegal.
And when the code modified by the user does not accord with the preset grammar rule, generating prompt information to prompt the user that the modification is illegal and can not be modified. For example, the user modifies the code of the function block "advance 1 lattice in 0.5 seconds" to "tnrn (60); moveForward (1,0.5) "when the code has spelling error, the terminal can not compile and execute the code, and the terminal can prompt the user that the function" tnrn "can not be found and please check spelling problem.
In this embodiment, the code modification function can provide a more convenient program writing manner for high-level users, so that the graphical programming and the traditional programming manner are combined to meet the requirements of different users.
In addition to the code modification function, the present application also provides a code dynamic display function and a code preview function, which are described in detail below.
Referring to fig. 3, fig. 3 is another embodiment of a code display method for a graphical programming scenario provided in the present application, the method includes:
301. providing a graphical programming interface, wherein the graphical programming interface comprises a first operation area and a second operation area, the first operation area is internally provided with a function block set, each function block is respectively configured with a group of function codes, and the function codes and the function blocks have mapping relations;
302. receiving a dragging instruction sent by a user, wherein the dragging instruction is used for requesting to drag a target function block in the function block set from the first operation area to a target position of the second operation area;
303. displaying the target function block at the target position;
304. receiving a switching instruction sent by a user, and acquiring a target code corresponding to the target function block;
305. generating a third operation area, and displaying the target code in the third operation area;
in this embodiment, steps 301 to 305 are similar to steps 101 to 105 in the embodiment of the present invention, and are not described herein again.
306. Receiving a dynamic display instruction sent by a user, compiling and executing the object code;
in the embodiment, for some target codes which comprise some more complex code functions, the principle of the code functions can be represented by a dynamic display function. In practical application, a user can initiate a dynamic display instruction through a specific key, and the terminal compiles and executes a corresponding object code after receiving the dynamic display instruction, so that the function realized by the object code is demonstrated.
307. Controlling an operation object to execute the operation corresponding to the target code in a demonstration interface, and highlighting the target code in the third operation area;
in this embodiment, the graphical programming interface further includes a demonstration interface, the demonstration interface includes an operation object, and the terminal controls the operation object according to the object code to enable the operation object to execute an operation corresponding to the object code. At the same time, the object code is correspondingly highlighted in the code display area. For example, in the function for controlling the "circle" of the operation object, which is actually composed of the movement of the operation object in at least two directions at each moment, the terminal may mark out which code corresponds to the movement in the a direction and which code corresponds to the movement in the B direction in the displayed object code, and compile and execute the code through the dynamic presentation function, and highlight and scroll the corresponding code in real time while the operation object moves.
The realization principle of the complex function can be known by the user through the dynamic display function, and the teaching significance is achieved.
308. Receiving a preview instruction sent by a user, and acquiring a target code corresponding to the target function block;
in this embodiment, in addition to dragging the target function block to the second operation area and then switching the operation display code, the function code corresponding to the target function block may be displayed through a preview function. Specifically, the user may open the preview function by hovering the mouse over the target function block in the first operation area, or may open the preview function by right clicking the mouse, where a specific opening manner is not limited here.
And after receiving the preview instruction, the terminal acquires the target code corresponding to the target function block according to the predefined mapping relation between the function block and the function code.
309. Generating a temporary display area independent of the graphical programming interface and displaying the object code in the temporary display area;
after the terminal acquires the target code, a temporary display area is generated for displaying the target code, the temporary display area can be attached to one side of the target function block, and the specific position is not limited here. The temporary display area may be in the form of a floating window that is separate from the graphical programming interface and overlays the interface.
In addition, besides displaying the object code in the temporary display area to realize the preview function, some code use examples can be displayed in the area, and the related parameters in the code are explained to help the user to quickly know the function realized by the function block and the usage of the function block. For example, when the user mouse hovers over the function block of "advance 1 lattice within 0.5 second" in the first operation area, the terminal generates a floating window, and displays the code "moveForward (1, 0.5)" and example 1: "turn (30) in the floating window; for i is 1,20 do; moveForward (1, 0.5); end ", thereby enabling the user to understand the implementation principle of the function block and to use the function block nested in the loop function block.
310. And receiving a preview canceling instruction sent by a user and hiding the temporary display area.
The user can cancel the preview function by moving the mouse after the mouse is hovered, or cancel the preview function by clicking the mouse again, and the terminal hides the temporary display area after receiving a preview cancellation instruction sent by the user, namely, cancels the preview.
In this embodiment, a code dynamic display function and a code preview function are further provided, so that a more convenient code display mode is provided for a user, different requirements of the user are met, and the practicability is improved.
The above is a description of the code display method of the graphical programming scene provided in the present application, and a description of the code display system of the graphical programming scene in the present application is provided below.
Referring to fig. 4, fig. 4 is a diagram illustrating an embodiment of a code display system of a graphical programming scenario provided by the present application, the system including:
a first display unit 401, configured to provide a graphical programming interface, where the graphical programming interface includes a first operating area and a second operating area, the first operating area accommodates a set of function blocks, each function block is configured with a set of function codes, and a mapping relationship exists between the function codes and the function blocks;
a first receiving unit 402, configured to receive a dragging instruction sent by a user, where the dragging instruction is used to request to drag a target function block in the function block set from the first operation area to a target position of the second operation area;
a second display unit 403 for displaying the target function block at the target position;
a second receiving unit 404, configured to receive a switching instruction sent by a user;
an obtaining unit 405, configured to obtain a target code corresponding to the target function block after the second receiving unit receives a switching instruction sent by a user;
a first generating unit 406 for generating a third operation region;
a third display unit 407, configured to display the object code in the third operation area.
In this embodiment, after the second receiving unit 404 receives a switching instruction sent by a user, the first obtaining unit 405 obtains an object code corresponding to an object function block, and the first generating unit 406 and the third display unit 407 implement code display, and by adding the code display function, the user can view an actual code behind a graphical programming function in a graphical programming process, so that the user can know a principle of function implementation through the graphical programming function and a comparison of the codes, clarify a programming thought, and improve user experience.
Referring to fig. 5, a code presentation system of a graphical programming scenario in the present application is described in detail below, and another embodiment of the code presentation system of the graphical programming scenario in the present application includes:
a first display unit 501, configured to provide a graphical programming interface, where the graphical programming interface includes a first operating area and a second operating area, the first operating area accommodates a set of function blocks, each function block is configured with a set of function codes, and a mapping relationship exists between the function codes and the function blocks;
a first receiving unit 502, configured to receive a dragging instruction sent by a user, where the dragging instruction is used to request to drag a target function block in the function block set from the first operation area to a target position of the second operation area;
a second display unit 503 for displaying the target function block at the target position;
a second receiving unit 504, configured to receive a switching instruction sent by a user;
an obtaining unit 505, configured to obtain a target code corresponding to the target function block after the second receiving unit receives a switching instruction sent by a user;
a first generating unit 506 for generating a third operation region;
a third display unit 507 for displaying the object code in the third operation area.
Optionally, if the number of the target function blocks is several, the third display unit 507 includes:
a first determining module 5071, configured to determine a splicing relationship of the target function blocks in the second operation area;
a second determining module 5072, configured to determine, according to the splicing relationship, an execution order among the target codes corresponding to the target function blocks;
a display module 5073, configured to display the object codes in the third operation area according to the execution order.
Optionally, the second determining module 5072 is specifically configured to:
when the first determining module determines that the splicing relationship is longitudinal splicing, determining that the execution sequence among the target codes corresponding to the target function blocks is sequential execution;
when the first determining module determines that the splicing relation is horizontal splicing, determining that the execution sequence among the target codes corresponding to the target function blocks is selected to execute or circularly execute.
Optionally, the system further comprises:
a setting unit 508, configured to preset an attribute of the third operation area as an editable attribute;
a third receiving unit 509, configured to receive an editing instruction of the target code from the user;
a modifying unit 510, configured to modify the object code according to the editing instruction;
and an updating unit 511, configured to update the function code configured in the target function block according to the modified target code.
Optionally, the updating unit 511 includes:
a judging module 5111, configured to judge whether the modified target code is legal;
an updating module 5112, configured to update the function code configured in the target function block according to the modified target code when the determination result of the determining module is yes;
a prompting module 5113, configured to generate a prompting message when the determination result of the determining module is negative, where the prompting message is used to prompt the user that the object code is illegal.
Optionally, the graphical programming interface further includes a presentation interface, where the presentation interface includes at least one operation object, and the system further includes:
a fourth receiving unit 512, configured to receive a dynamic display instruction sent by a user;
an execution unit 513, configured to compile and execute the object code after the fourth receiving unit receives the dynamic display instruction sent by the user;
and a control unit 514, configured to control the operation object in the presentation interface to perform an operation corresponding to the object code, and to highlight the object code in the third operation area.
Optionally, the system further comprises:
a fifth receiving unit 515, configured to receive a preview instruction sent by a user;
the obtaining unit 505 is further configured to obtain an object code corresponding to the object function block when the fifth receiving unit receives a preview instruction sent by a user;
a second generating unit 516, configured to generate a temporary display area independent of the graphical programming interface;
a fourth display unit 517 for displaying the object code in the temporary display area;
the fifth receiving unit 515 is further configured to receive a cancel preview instruction sent by the user;
a hiding unit 518, configured to hide the temporary display area when the fifth receiving unit receives a cancel preview instruction sent by the user.
In the system of this embodiment, the functions of each unit and each module correspond to the steps in the method embodiments shown in fig. 2 and fig. 3, and are not described herein again.
Referring to fig. 6, fig. 6 is a schematic diagram illustrating an embodiment of a code presentation apparatus for a graphical programming scenario, the apparatus including:
a processor 601, a memory 602, an input-output device 603, and a bus 604;
the processor 601 is connected to the memory 602, the input/output device 602, and the bus 604;
the memory 602 holds a program that the processor 601 calls to perform any of the code presentation methods described above.
In this embodiment, the functions of the processor 601 correspond to the steps in the embodiments shown in fig. 1 to fig. 3, and are not described herein again.
The present application also relates to a computer-readable storage medium having a program stored thereon, which, when run on a computer, causes the computer to perform any of the code presentation methods described above.
It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described systems, apparatuses and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
In the several embodiments provided in the present application, it should be understood that the disclosed system, apparatus and method may be implemented in other manners. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the units is only one logical division, and other divisions may be realized in practice, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or units, and may be in an electrical, mechanical or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.
The integrated unit, if implemented in the form of a software functional unit and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application may be substantially implemented or contributed to by the prior art, or all or part of the technical solution may be embodied in a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a read-only memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and the like.
Claims (10)
1. A code display method of a graphical programming scene is characterized by comprising the following steps:
providing a graphical programming interface, wherein the graphical programming interface comprises a first operation area and a second operation area, the first operation area is provided with a function block set, each function block is respectively configured with a group of function codes, and mapping relations exist between the function codes and the function blocks;
receiving a dragging instruction sent by a user, wherein the dragging instruction is used for requesting to drag a target function block in the function block set from the first operation area to a target position of the second operation area;
displaying the target function block at the target position;
receiving a switching instruction sent by a user, and acquiring a target code corresponding to the target function block;
and generating a third operation area and displaying the target code in the third operation area.
2. The method according to claim 1, wherein if the number of the target function blocks is several, the displaying the target code in the third operation area comprises:
determining the splicing relation of the target function blocks in the second operation area;
determining an execution sequence among the target codes corresponding to the target function blocks according to the splicing relation;
displaying the object codes in the third operation area according to the execution sequence.
3. The method according to claim 2, wherein the determining an execution order among the target codes corresponding to the target function blocks according to the splicing relationship comprises:
when the splicing relation is longitudinal splicing, determining that the execution sequence among the target codes corresponding to the target function blocks is sequential execution;
and when the splicing relationship is transverse splicing, determining that the execution sequence among the target codes corresponding to the target function blocks is selected to execute or circularly execute.
4. The method of claim 1, further comprising:
presetting the attribute of the third operation area as an editable attribute;
receiving an editing instruction of a user on the target code, and modifying the target code according to the editing instruction;
and updating the function codes configured by the target function blocks according to the modified target codes.
5. The method of claim 4, wherein updating the configured function code of the target function block according to the modified target code comprises:
judging whether the modified target code is legal or not;
if yes, updating the function codes configured by the target function block according to the modified target codes;
if not, generating prompt information, wherein the prompt information is used for prompting the user that the target code is illegal.
6. The method according to any one of claims 1 to 5, wherein the graphical programming interface further comprises a presentation interface, the presentation interface comprises at least one operation object, and after the target code is displayed in the third operation area, the method further comprises:
receiving a dynamic display instruction sent by a user, compiling and executing the object code;
and controlling the operation object to execute the operation corresponding to the target code in the demonstration interface, and displaying the target code in a highlighted manner in the third operation area.
7. The method according to any one of claims 1 to 5, further comprising:
receiving a preview instruction sent by a user, and acquiring a target code corresponding to the target function block;
generating a temporary display area independent of the graphical programming interface and displaying the object code in the temporary display area;
and receiving a preview canceling instruction sent by a user, and hiding the temporary display area.
8. A code presentation system for a graphical programming scenario, comprising:
the system comprises a first display unit, a second display unit and a display unit, wherein the first display unit is used for providing a graphical programming interface, the graphical programming interface comprises a first operation area and a second operation area, a function block set is accommodated in the first operation area, each function block is respectively configured with a group of function codes, and mapping relations exist between the function codes and the function blocks;
a first receiving unit, configured to receive a dragging instruction sent by a user, where the dragging instruction is used to request that a target function block in the function block set is dragged from the first operation area to a target position of the second operation area;
a second display unit for displaying the target function block at the target position;
the second receiving unit is used for receiving a switching instruction sent by a user;
the acquisition unit is used for acquiring a target code corresponding to the target function block after the second receiving unit receives a switching instruction sent by a user;
a first generating unit configured to generate a third operation region;
a third display unit, configured to display the object code in the third operation area.
9. A code presentation apparatus for graphically programming a scene, the apparatus comprising:
a processor, a memory, an input-output device, and a bus;
the processor is connected with the memory, the input and output equipment and the bus;
the memory holds a program that the processor calls to execute the code presentation method of any one of claims 1 to 7.
10. A computer-readable storage medium having a program stored thereon, the program, when executed on a computer, performing the code presentation method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011111004.9A CN112306481A (en) | 2020-10-16 | 2020-10-16 | Code display method, system, device and storage medium for graphical programming scene |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011111004.9A CN112306481A (en) | 2020-10-16 | 2020-10-16 | Code display method, system, device and storage medium for graphical programming scene |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112306481A true CN112306481A (en) | 2021-02-02 |
Family
ID=74327988
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011111004.9A Pending CN112306481A (en) | 2020-10-16 | 2020-10-16 | Code display method, system, device and storage medium for graphical programming scene |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112306481A (en) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112817582A (en) * | 2021-03-05 | 2021-05-18 | 网易（杭州）网络有限公司 | Code processing method and device, computer equipment and storage medium |
| CN113254008A (en) * | 2021-06-21 | 2021-08-13 | 腾讯科技（深圳）有限公司 | Data processing method, device and equipment |
| CN113535154A (en) * | 2021-07-16 | 2021-10-22 | 麦克方程(北京)科技有限责任公司 | Code-free programming method and device, electronic equipment and readable storage medium |
| CN114201162A (en) * | 2022-02-21 | 2022-03-18 | 北京布局未来教育科技有限公司 | Graphical programming splicing method and device, electronic equipment and medium |
| WO2023173631A1 (en) * | 2022-03-15 | 2023-09-21 | 上海商汤智能科技有限公司 | Programming method and apparatus, and device, storage medium and computer program product |
| WO2024041081A1 (en) * | 2022-08-22 | 2024-02-29 | 腾讯科技（深圳）有限公司 | Data processing method, apparatus and device, and readable storage medium |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140359559A1 (en) * | 2013-06-04 | 2014-12-04 | Qualcomm Incorporated | Automated graph-based programming |
| CN105511860A (en) * | 2015-11-30 | 2016-04-20 | 大连文森特软件科技有限公司 | On-line graphical programming system |
| CN108345456A (en) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | Page code generation method, device, computer equipment and storage medium |
| US20180285084A1 (en) * | 2017-04-03 | 2018-10-04 | Innovation First, Inc. | Mixed mode programming |
| CN109614090A (en) * | 2017-09-30 | 2019-04-12 | 南京维汀拉沃网络科技有限公司 | A kind of graphic programming system |
| CN109710242A (en) * | 2018-12-29 | 2019-05-03 | 深圳点猫科技有限公司 | Exchange method, system and the electronic equipment of web terminal graphic programming |
| CN109960504A (en) * | 2019-04-05 | 2019-07-02 | 腾讯科技（深圳）有限公司 | Object switching method, method for showing interface and device based on visual programming |
-
2020
- 2020-10-16 CN CN202011111004.9A patent/CN112306481A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140359559A1 (en) * | 2013-06-04 | 2014-12-04 | Qualcomm Incorporated | Automated graph-based programming |
| CN105511860A (en) * | 2015-11-30 | 2016-04-20 | 大连文森特软件科技有限公司 | On-line graphical programming system |
| US20180285084A1 (en) * | 2017-04-03 | 2018-10-04 | Innovation First, Inc. | Mixed mode programming |
| CN109614090A (en) * | 2017-09-30 | 2019-04-12 | 南京维汀拉沃网络科技有限公司 | A kind of graphic programming system |
| CN108345456A (en) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | Page code generation method, device, computer equipment and storage medium |
| CN109710242A (en) * | 2018-12-29 | 2019-05-03 | 深圳点猫科技有限公司 | Exchange method, system and the electronic equipment of web terminal graphic programming |
| CN109960504A (en) * | 2019-04-05 | 2019-07-02 | 腾讯科技（深圳）有限公司 | Object switching method, method for showing interface and device based on visual programming |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112817582A (en) * | 2021-03-05 | 2021-05-18 | 网易（杭州）网络有限公司 | Code processing method and device, computer equipment and storage medium |
| CN112817582B (en) * | 2021-03-05 | 2023-08-08 | 网易（杭州）网络有限公司 | Code processing method, device, computer equipment and storage medium |
| CN113254008A (en) * | 2021-06-21 | 2021-08-13 | 腾讯科技（深圳）有限公司 | Data processing method, device and equipment |
| CN113254008B (en) * | 2021-06-21 | 2024-04-19 | 腾讯科技（深圳）有限公司 | Data processing method, device and equipment |
| CN113535154A (en) * | 2021-07-16 | 2021-10-22 | 麦克方程(北京)科技有限责任公司 | Code-free programming method and device, electronic equipment and readable storage medium |
| CN114201162A (en) * | 2022-02-21 | 2022-03-18 | 北京布局未来教育科技有限公司 | Graphical programming splicing method and device, electronic equipment and medium |
| WO2023173631A1 (en) * | 2022-03-15 | 2023-09-21 | 上海商汤智能科技有限公司 | Programming method and apparatus, and device, storage medium and computer program product |
| WO2024041081A1 (en) * | 2022-08-22 | 2024-02-29 | 腾讯科技（深圳）有限公司 | Data processing method, apparatus and device, and readable storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112306481A (en) | Code display method, system, device and storage medium for graphical programming scene | |
| US10255044B2 (en) | Method and system for modifying deployed applications | |
| US9881404B2 (en) | Manipulating graphical objects | |
| US10346013B2 (en) | Manipulating graphical objects | |
| EP3338179B1 (en) | Graphical representation of data in a program code editor | |
| CN112115678B (en) | Information display method and device, storage medium and electronic equipment | |
| TW201525776A (en) | Invocation control over keyboard user interface | |
| US10169313B2 (en) | In-context editing of text for elements of a graphical user interface | |
| CN108304239B (en) | Rapid interface interaction method and device for remote operation | |
| CN110075519B (en) | Information processing method and device in virtual reality, storage medium and electronic equipment | |
| US11256481B2 (en) | Software development environment with compilation and read-evaluate-print-loop operations | |
| US20170039037A1 (en) | Live mobile application visual editor demo | |
| AU9597498A (en) | System to associate control with applications using drag and drop interface | |
| KR20160053545A (en) | Method for inputting command editing object in word processor | |
| Pacey | Starterator guide | |
| CN113918198A (en) | Model-code synchronization method | |
| US10949173B1 (en) | Systems and methods for automatic code generation | |
| GB2523074A (en) | A method and system for modifying deployed applications | |
| EP2883214B1 (en) | Manipulating graphical objects | |
| US20230297208A1 (en) | Collaborative widget state synchronization | |
| CN110968991A (en) | Method and related device for editing characters | |
| Weisenburg et al. | Design and Development of an Integrated Development Environment for the Driving Simulation Software Mave | |
| CN116627510A (en) | Application program guiding method and device | |
| CN117130644A (en) | Code modification method, device, all-in-one machine and program product | |
| CN117839209A (en) | Game interface interaction method and device, readable storage medium and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |