A programming tool scaling method and related device
By providing code block area scaling function in graphical programming tools, it solves the problems of low efficiency and high eye burden for young users when selecting and writing programming blocks, achieving a more efficient programming experience and a larger editing space.
Patent Information
- Application Number
- CN202410024914.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2024-01-03
- Publication Date
- 2024-12-17
- Estimated Expiration
- 2044-01-03
AI Technical Summary
When young users use graphical programming tools, they are inefficient in selecting and writing programming blocks, and they need to work hard to identify, resulting in increased eye burden.
A programming tool scaling method and device is provided, allowing users to scale, zoom in or out the code block area before selecting programming building blocks, making it easier to identify building blocks, and adjust the size of the editing area to reduce eye burden.
With the scaling operation, younger users can more easily identify and select programming blocks, improve writing efficiency, and reduce eye burden while providing a larger editing area.
Smart Images

Figure CN118012317B_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of computer technology, and in particular to a programming tool scaling method and related devices. Background Art
[0002] With the development of information technology, more and more people are beginning to learn programming knowledge, and children's programming education based on graphical programming tools is becoming increasingly popular. Graphical programming tools have the advantages of not relying on hardware environment, only requiring network, high degree of standardization, and easy sharing and dissemination, and are developed and applied by most companies in the industry.
[0003] Current graphical programming tools encapsulate text programming languages in code form into a code block in the code block area. By combining and splicing code blocks of corresponding functions in the graphical editing area, programming can be completed simply and quickly. Users can scale the editing area at any time according to their own needs. However, young users need to work hard to identify when selecting blocks, which makes block code writing inefficient and increases the burden on the eyes. Summary of the invention
[0004] The embodiments of the present application provide a programming tool zooming method and related devices, which are used to zoom in and out the code block area displaying programming blocks before selecting programming blocks. Young users can enlarge the code block area according to their own needs to facilitate identification of blocks and reduce the burden on the eyes. The code block area can also be reduced to provide a larger editing area.
[0005] In view of this, the present application provides a programming tool scaling method on one hand, which is executed by a terminal device running a graphical programming tool, wherein the display interface of the graphical programming tool includes a toolbox area, a code block area, and an editing area, and the method includes:
[0006] Display brick categories in the toolbox area;
[0007] In response to a first selection instruction for a first category of the building block categories, displaying a plurality of candidate programming building blocks corresponding to the first category in the code block area, wherein the plurality of candidate programming building blocks are programming module components with different functions;
[0008] Get the first scaling instruction;
[0009] Scaling the code block area according to the first scaling instruction;
[0010] In response to the second selection instruction, a first programming building block is selected from a plurality of candidate programming building blocks and added to an editing area, where the editing area is a graphical interactive area for performing code editing using the selected programming building block.
[0011] On the other hand, the present application provides a programming tool zooming device, the device runs a graphical programming tool, the display interface of the graphical programming tool includes a toolbox area, a code block area and an editing area, and the device includes:
[0012] A display unit is used to display the building block categories in the toolbox area; in response to a first selection instruction for a first category of the building block categories, a plurality of candidate programming building blocks corresponding to the first category are displayed in the code block area, wherein the plurality of candidate programming building blocks are programming module components with different functions;
[0013] An acquiring unit, used for acquiring a first scaling instruction;
[0014] A scaling unit, configured to scale the code block area according to a first scaling instruction;
[0015] The adding unit is used to select a first programming building block from a plurality of candidate programming building blocks and add it to the editing area in response to the second selection instruction. The editing area is a graphic interaction area for performing code editing using the selected programming building block.
[0016] In a possible design, in another implementation of another aspect of the embodiment of the present application, the scaling unit is further configured to:
[0017] Get the second scaling instruction;
[0018] The toolbox area is scaled according to the second scaling instruction.
[0019] In a possible design, in another implementation of another aspect of the embodiment of the present application, the scaling unit is specifically configured to:
[0020] The code block area, the toolbox area and the editing area are scaled according to the first scaling instruction.
[0021] In a possible design, in another implementation of another aspect of the embodiment of the present application, the scaling unit is specifically configured to:
[0022] According to the first scaling instruction, the code block area, the toolbox area and the editing area are scaled in equal proportions.
[0023] In a possible design, in another implementation of another aspect of the embodiment of the present application, the scaling unit is specifically configured to:
[0024] According to the first scaling instruction, the code block area, the toolbox area and the editing area are scaled in different proportions.
[0025] In a possible design, in another implementation of another aspect of the embodiment of the present application, the scaling unit is specifically configured to:
[0026] According to the first scaling instruction, scaling the code block area based on the width of the toolbox area;
[0027] The width of the editing area is adjusted according to the width of the toolbox area and the code block area.
[0028] In a possible design, in another implementation of another aspect of the embodiment of the present application, the device further includes an adjustment unit, and the adjustment unit is specifically used to:
[0029] Adjust the scroll bar properties of the editing area according to the size of the code block area and toolbox area.
[0030] In a possible design, in another implementation of another aspect of the embodiment of the present application, the adding unit is specifically used for:
[0031] In response to the second selection instruction, setting the position of a first programming building block selected by the mouse from a plurality of candidate programming building blocks as the pointing position of the mouse;
[0032] The first programming block is added to the editing area according to the stop position of the mouse.
[0033] In a possible design, in another implementation of another aspect of the embodiment of the present application, the device further includes an editing unit, and the editing unit is specifically used to:
[0034] In response to the editing instruction, editing the first programming building block in the editing area;
[0035] The instruction code corresponding to the first programming building block is determined according to the editing result.
[0036] In a possible design, in another implementation of another aspect of the embodiment of the present application, the editing unit is specifically used for:
[0037] In response to editing instructions, move the building block frame in the editing area, or modify the parameters of the parameter control.
[0038] In a possible design, in another implementation of another aspect of the embodiment of the present application, the device further includes a determining unit, and the determining unit is specifically configured to:
[0039] The instruction codes corresponding to the various programming blocks in the editing area are combined to determine the program configuration file for running.
[0040] In a possible design, in another implementation of another aspect of the embodiment of the present application, the scaling unit is further configured to:
[0041] In response to the third zoom instruction, the area where the current focus of the object is located is zoomed.
[0042] Another aspect of the present application provides a computer device, comprising:
[0043] memories, transceivers, processors, and bus systems;
[0044] Wherein, the memory is used to store programs;
[0045] The processor is used to execute the program in the memory, including executing the above-mentioned methods;
[0046] The bus system is used to connect the memory and the processor so that the memory and the processor can communicate with each other.
[0047] Another aspect of the present application provides a computer-readable storage medium, in which instructions are stored. When the computer-readable storage medium is run on a computer, the computer is enabled to execute the above-mentioned methods.
[0048] Another aspect of the present application provides a computer program product or a computer program, the computer program product or the computer program includes computer instructions, the computer instructions are stored in a computer-readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the methods provided by the above aspects.
[0049] It can be seen from the above technical solutions that the embodiments of the present application have the following advantages:
[0050] In the embodiment of the present application, after the terminal device running a graphical programming tool displays the building block category in the toolbox area of the graphical programming tool display interface, multiple candidate programming building blocks corresponding to the first category can be displayed in the code block area according to the first selection instruction of the first category from the building block category, and each candidate programming building block is a programming module component with different functions. After obtaining the first scaling instruction of the user object, the code block area can be scaled, and then the first programming building block is selected from the multiple candidate programming building blocks in the scaled code block area, and added to the editing area of the graphical interactive area for code editing as the programming building block. In the above manner, before selecting the programming building block, the code block area displaying the programming building block can be scaled, and the young user object can enlarge the code block area according to its own needs, and one or more other areas in the display area can also be scaled in the same way, which is convenient for the young user object to identify the building blocks and reduce the burden on the eyes, and the code block area can also be reduced to provide a larger range of editing areas. BRIEF DESCRIPTION OF THE DRAWINGS
[0051] Figure 1 This is a block diagram of an exemplary system architecture in an embodiment of the present application;
[0052] Figure 2A schematic diagram of a display interface of a graphical programming tool in an embodiment of the present application;
[0053] Figure 3 A schematic diagram of a flow chart of a programming tool scaling method in an embodiment of the present application;
[0054] Figure 4 A schematic diagram of a display interface of another graphical programming tool in an embodiment of the present application;
[0055] Figure 5 This is a schematic diagram of a code block area zoom in an embodiment of the present application;
[0056] Figure 6 A schematic diagram of a zoom button of a display interface in an embodiment of the present application;
[0057] Figure 7 This is an enlarged schematic diagram of a display interface in an embodiment of the present application;
[0058] Figure 8 This is an enlarged schematic diagram of another display interface in an embodiment of the present application;
[0059] Fig. 9 This is a schematic diagram of a geometric scaling process in an embodiment of the present application;
[0060] Fig.10 This is a schematic diagram of a non-uniform scaling process in an embodiment of the present application;
[0061] Fig.11 This is a schematic diagram of a vertical scroll bar moving right in an embodiment of the present application;
[0062] Fig.12 This is a schematic diagram of another vertical scroll bar in an embodiment of the present application;
[0063] Fig.13 This is a structural schematic diagram of a programming tool scaling device in an embodiment of the present application;
[0064] Fig.14 It is a structural schematic diagram of a computer device in an embodiment of the present application. DETAILED DESCRIPTION
[0065] The embodiments of the present application provide a programming tool zooming method and related devices, which are used to zoom in and out the code block area displaying programming blocks before selecting programming blocks. Young users can enlarge the code block area according to their own needs to facilitate identification of blocks and reduce the burden on the eyes. The code block area can also be reduced to provide a larger editing area.
[0066] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein, for example. In addition, the terms "including" and "corresponding to" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.
[0067] The word “exemplary” is used exclusively herein to mean “serving as an example, example, or illustration.” Any embodiment described herein as “exemplary” is not necessarily to be construed as preferred or advantageous over other embodiments.
[0068] In the embodiments of the present application, the term "module" or "unit" refers to a computer program or a part of a computer program with a predetermined function, and works together with other related parts to achieve a predetermined goal, and can be implemented in whole or in part by using software, hardware (such as processing circuits or memories) or a combination thereof. Similarly, a processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be part of an overall module or unit that includes the function of the module or unit.
[0069] In addition, in order to better illustrate the present application, numerous specific details are given in the following specific embodiments. It should be understood by those skilled in the art that the present application can also be implemented without certain specific details. In some examples, methods, means, components and circuits well known to those skilled in the art are not described in detail in order to highlight the subject matter of the present application.
[0070] In order to facilitate understanding of the above-mentioned technical solutions and the technical effects produced by the embodiments of the present application, the embodiments of the present application first explain the relevant professional terms:
[0071] Programming building blocks (components): building blocks or building block components or programming building blocks or programming building block components are visual programming elements that provide a series of modules or modular tools with different functions, allowing users to create program codes by connecting these components. This programming method is different from the traditional text programming method and can make programming more intuitive and easy to learn. In the embodiments of the present application, building blocks and building block components have the same meaning as programming building blocks and programming building block components.
[0072] Block programming: It is a visual programming method based on programming blocks, which allows users to build code by dragging and connecting programming blocks. This programming method does not require users to enter code, which makes programming more intuitive and easy to learn. Block programming is usually used for beginners, children or non-professionals to learn programming, and can also be used for rapid prototyping and small-scale project development.
[0073] With the development of information technology, more and more people are beginning to learn programming knowledge, and children's programming education based on graphical programming tools is becoming increasingly popular. Graphical programming tools have the advantages of not relying on hardware environment, only requiring network, high degree of standardization, and easy sharing and dissemination, and are developed and applied by most companies in the industry.
[0074] Current graphical programming tools encapsulate text programming languages in code form into a code block in the code block area. By combining and splicing code blocks of corresponding functions in the graphical editing area, programming can be completed simply and quickly. Users can scale the editing area at any time according to their own needs. However, young users need to work hard to identify when selecting blocks, which makes block code writing inefficient and increases the burden on the eyes.
[0075] Based on this, an embodiment of the present application provides a programming tool zooming method. After a terminal device running a graphical programming tool displays a building block category in the toolbox area of the graphical programming tool display interface, multiple candidate programming building blocks corresponding to the first category can be displayed in the code block area according to the first selection instruction of the first category from the building block category, and each candidate programming building block is a programming module component with different functions. After obtaining the first zoom instruction of the user, the code block area can be zoomed, and then the first programming building block can be selected from the multiple candidate programming building blocks in the zoomed code block area, and added to the editing area of the graphical interactive area for code editing as a programming building block. Through the above method, the code block area displaying the programming building block can be zoomed before selecting the programming building block. The young user can enlarge the code block area according to their own needs, which is convenient for identifying the building blocks and reducing the burden on the eyes. The code block area can also be reduced to provide a larger editing area.
[0076] The following is an explanation using an example in which a server and a terminal device collaborate to implement the programming tool scaling method provided in an embodiment of the present application. Figure 1 The following schematically shows an exemplary system architecture block diagram that applies the technical solution of the present application. Figure 1As shown, the system architecture 100 may include a terminal device 110, a network 120, and a server 130. The terminal device 110 may include various electronic devices such as a smart phone, a tablet computer, a laptop computer, and a desktop computer. The server 130 may be an independent physical server, or a server cluster or a distributed system composed of multiple physical servers, or a cloud server providing cloud computing services. The network 120 may be a communication medium of various connection types that can provide a communication link between the terminal device 110 and the server 130, such as a wired communication link or a wireless communication link.
[0077] According to the implementation requirements, the system architecture in the embodiment of the present application can have any number of terminal devices, networks and servers. For example, the server 130 can be a server group composed of multiple server devices. In addition, the technical solution provided in the embodiment of the present application can be applied to the terminal device 110, can also be applied to the server 130, or can be implemented by the terminal device 110 and the server 130 together, and the present application does not make any special restrictions on this.
[0078] A programming tool client that provides a graphical programming function can be installed on the terminal device 110. The programming tool client can be a stand-alone client program or a hosted program mounted on other applications. For example, a user can open and run a small program for graphical programming through a social application installed on the terminal device 110, and perform graphical programming based on the small program. The program file obtained after graphical programming can be saved in the local database of the terminal device 110, or it can be uploaded to the server 130 through the network 120. After completing the writing of the program file, the user can also debug and run the program file through the terminal device 110. The program file can be run on the terminal device 110 in the form of a program or a hosted program, or it can be run as an internal system component of the terminal device 110, and it can also be run based on a service program or a cloud program on the server 130.
[0079] Graphical programming refers to the way programming users create applications by manipulating graphic elements. Its core is to convert text programming languages in code form into graphic elements. Graphic elements can be expressed as building blocks with different shapes and contents. Programs are written by moving and splicing building blocks, which has the advantages of being easy to understand and write.
[0080] In actual application, taking the operation of the program file based on the service program or cloud program on the server 130 as an example, the user can access the web-side graphical programming tool through the terminal device 110, and through the terminal device 110, select programming blocks from the candidate programming blocks provided in the display interface of the web-side graphical programming tool to build a code block combination, thereby obtaining a set of programming programs. Exemplarily, the user can use the mouse of the terminal device 110 to select the required programming blocks in the code block area in the display interface of the graphical programming tool, and drag the selected programming blocks to the editing area in the display interface of the graphical programming tool; the user can select multiple programming blocks from the code block area and drag them to the editing area through multiple operations, and the server 130 will construct the association relationship between the multiple programming blocks according to the dragging order or the dragging position of the multiple programming blocks dragged to the editing area, so as to obtain a program configuration file corresponding to a set of programming programs.
[0081] Figure 2 The display interface diagram of the graphical programming tool provided by the related art is shown, and the method is executed by the terminal device 110 running the visual programming tool. The terminal device 110 displays the display interface of the graphical programming tool, and the display interface includes at least one of the toolbox area 210, the code block area 220, and the editing area 230. The position of each area in this embodiment is only an example, and the specific position of different areas on the interface is not limited.
[0082] In some embodiments, the toolbox area 210 and the code block area 220 may be referred to as a building block selection toolbar, and the editing area 230 may be referred to as a building block code editor or a building block code editing area. The present application does not limit the specific names of different interfaces.
[0083] The toolbox area 210 is a Blockly panel for displaying available building block categories, such as event building blocks, control building blocks, operation building blocks, variable building blocks, function building blocks, PID building blocks, expression building blocks, motion building blocks, perception building blocks, etc.
[0084] The code block area 220 is used to display programming building blocks of a specific category. When the user selects a building block category, the related programming building blocks will be displayed in the code block area 220 for the user to select and drag and drop into the editing area 230.
[0085] Use the object to select a programming block from the code block area 220 and place it in the editing area 230, and repeat this operation to edit the programming block code. The programming block code is the program code (JavaScript code) corresponding to the selected programming block displayed in code form, or in the form of a single programming block, or in the form of a combination of multiple programming blocks. Compared with the program code, it is more intuitive.
[0086] The programming tool scaling method provided in the embodiment of the present application will be described below in conjunction with the accompanying drawings. The executor of the following programming tool scaling method takes a terminal device as an example, and can be specifically implemented by the terminal device by running the various computer programs mentioned above; of course, based on the understanding of the following text, it is not difficult to see that the programming tool scaling method provided in the embodiment of the present application can also be implemented collaboratively by the terminal device and the server.
[0087] See also Figure 3 , Figure 3 The figure is a flow chart of a programming tool scaling method provided by an embodiment of the present application, the method comprising:
[0088] Step 301: Display the building block categories in the toolbox area.
[0089] In one or more embodiments, the toolbox area displays various building block categories that are available for selection, such as event blocks, control blocks, calculation blocks, variable blocks, function blocks, PID blocks, expression blocks, motion blocks, perception blocks, etc. Users can select the required category from the various building block categories displayed according to their own needs.
[0090] Step 302: In response to a first selection instruction for a first category of the building block categories, display a plurality of candidate programming building blocks corresponding to the first category in the code block area, wherein the plurality of candidate programming building blocks are programming module components with different functions.
[0091] In one or more embodiments, after the user determines to select the first category among multiple building block categories, the user can trigger a first selection instruction to cause the graphical programming tool to display multiple candidate programming building blocks belonging to the first category in the code block area. The multiple candidate programming building blocks are programming module components with program commands formed by packaging program contents written in different program codes, and have different functions. It can be understood that the programming building blocks in the embodiments of the present application are graphical representations of the abstraction of programming languages, specifically block structures used to replace code snippets. For the relationship between the first category and the candidate programming building blocks, taking control building blocks as an example, please refer to Figure 4The display interface diagram of the graphical programming tool, the control building blocks may include a plurality of building blocks with different control functions, such as repeat execution building blocks, loop execution building blocks, judgment building blocks, wait building blocks, hold wait building blocks and repeat execution building blocks, etc. The first selection instruction may be triggered by clicking the first category in the toolbox area with the mouse, or may be triggered by touching the first category in the toolbox area, which is not limited here.
[0092] Step 303: Get a first scaling instruction.
[0093] In one or more embodiments, the first zoom instruction may be triggered by clicking a zoom button on the object, or may be triggered by inputting a zoom command on the object, which is not limited here.
[0094] Step 304: Scale the code block area according to the first scaling instruction.
[0095] In one or more embodiments, when the first scaling instruction is obtained, the size of the code block area can be adjusted according to the scaling instruction, wherein, while the code block area is adjusted, the programming building blocks in the code block area and the text on the programming building blocks are also adjusted accordingly, for example, when the first scaling instruction indicates to enlarge the code block area, the programming building blocks and text displayed in the code block area are also enlarged accordingly. The user can perform multiple scaling operations on the code block area as needed.
[0096] For example, see Figure 5 ,like Figure 5 The figure shows a schematic diagram of code block area zooming in an embodiment of the present application. The display interface of the graphical programming tool includes a toolbox area (Toolbox area), a building block area (Flyout area) and an editing area (Workspace area). When the first zoom instruction is triggered, Figure 5 In the example, the zoom instruction is taken as an example, and the zoom factor is 1.2. The building block category takes the event building block as an example. The event building block includes the "when starting to run" building block, the "when receiving a broadcast **" building block, and the "send a broadcast ** and wait for completion" building block. Figure 5 The upper part is the display interface before the first zoom instruction is triggered. Figure 5 The lower part is the display interface after the first zoom instruction is triggered. The block area is enlarged by 1.2 times, and the event blocks including the "When starting to run" block, the "When receiving a broadcast **" block, and the "Send a broadcast ** and wait for completion" block are also enlarged by 1.2 times. Among them, the editing area will move to the right accordingly as the block area is enlarged. Among them, "**" is the editable content.
[0097] Step 305 . In response to the second selection instruction, a first programming building block is selected from a plurality of candidate programming building blocks and added to an editing area, where the editing area is a graphical interactive area for performing code editing using the selected programming building block.
[0098] In one or more embodiments, the terminal device determines the required first programming building block from multiple candidate programming building blocks based on the second selection instruction, and adds the first programming building block to the position indicated by the second selection instruction in the editing area, and the editing area is a graphical interactive area for code editing, and the first programming building block can be used for code editing. The second selection instruction can be triggered by at least one of clicking to select a building block, long pressing and dragging a building block, and box-selecting a building block.
[0099] In an embodiment of the present application, after a terminal device running a graphical programming tool displays a building block category in the toolbox area of the graphical programming tool display interface, multiple candidate programming building blocks corresponding to the first category can be displayed in the code block area according to a first selection instruction for a first category from the building block category, and each candidate programming building block is a programming module component with different functions. After obtaining the first zoom instruction of the user, the code block area can be zoomed, and then the first programming building block can be selected from the multiple candidate programming building blocks in the zoomed code block area, and added to the editing area of the graphical interactive area for code editing as a programming building block. In the above manner, the code block area displaying the programming building block can be zoomed before selecting the programming building block. The young user can enlarge the code block area according to their own needs, which is convenient for identifying the building blocks and reducing the burden on the eyes. The code block area can also be reduced to provide a larger editing area.
[0100] Optionally, in the above Figure 3 On the basis of the corresponding embodiments, in another optional embodiment provided by the embodiment of the present application, the method further includes:
[0101] Get the second scaling instruction;
[0102] The toolbox area is scaled according to the second scaling instruction.
[0103] In one or more embodiments, a method for scaling a toolbox area is introduced. The first scaling instruction and the second scaling instruction can be triggered by the same key, that is, when the object is used to trigger the key, the terminal device can scale the toolbox area and the code block area at the same time. The trigger key of the second scaling instruction can also be different from the trigger key of the first scaling instruction, that is, scaling keys can be configured for the toolbox area and the code block area respectively, and the toolbox area and the code block area can be scaled separately. After obtaining the second scaling instruction, the terminal device can scale the toolbox area accordingly according to the scaling multiple indicated by the second scaling instruction. Accordingly, the object can also scale the toolbox area alone through the second scaling instruction, without scaling the code block area at the same time.
[0104] Secondly, in the embodiment of the present application, a method for scaling the toolbox area is provided. In the above method, the toolbox area can be scaled according to the second scaling instruction, and the toolbox area can be scaled separately, thereby improving the flexibility of scaling.
[0105] Optionally, in the above Figure 3 On the basis of the corresponding embodiments, in another optional embodiment provided by the embodiment of the present application, scaling the code block area according to the first scaling instruction includes:
[0106] The code block area, the toolbox area and the editing area are scaled according to the first scaling instruction.
[0107] In one or more embodiments, a method for scaling a display interface is introduced. Only one scaling button may be configured in the display interface, and the user object may generate the first scaling instruction by triggering the scaling button, so that the graphical programming tool simultaneously scales the toolbox area, the code block area, and the editing area in the display interface.
[0108] For example, see Figure 6 The schematic diagram of the zoom button of the display interface shown in the figure, the building block categories shown in the toolbox area include events, controls, calculations, variables, functions, PID, expressions, motions, perceptions, etc. Use the object to click on the building block category in the Toolbox area, and the Flyout area will automatically expand and display all the building blocks under the specific building block category clicked by the object. Use the object to drag the specific building block from the Flyout area to the Workspace area to complete the writing of the building block code. Taking the event building block as an example, the event building block includes the "when starting to run" building block, the "when receiving a broadcast **" building block, and the "send broadcast ** and wait for completion" building block, etc. The editing area can contain the added event building blocks or other building block categories. Here, the "when starting to run" building block is taken as an example. The zoom button of the embodiment of the present application can be configured at any position, Figure 6Taking the zoom button of the current editing area as an example, it includes a zoom-in button and a zoom-out button, that is, when the zoom-in button is triggered, the graphical programming tool simultaneously zooms in the toolbox area, the code block area and the editing area; when the zoom-out button is triggered, the graphical programming tool simultaneously zooms out the toolbox area, the code block area and the editing area.
[0109] Secondly, in the embodiment of the present application, a method for scaling the display interface is provided. In the above method, the toolbox area, the code block area and the editing area are scaled at the same time using the first scaling instruction, thereby improving the convenience of scaling.
[0110] Optionally, in the above Figure 3 On the basis of the corresponding embodiments, in another optional embodiment provided by the embodiment of the present application, scaling the code block area, the toolbox area, and the editing area according to the first scaling instruction includes:
[0111] According to the first scaling instruction, the code block area, the toolbox area and the editing area are scaled in equal proportions.
[0112] In one or more embodiments, a method for scaling a display interface is introduced. On the basis of configuring only one scaling button, after the scaling button is triggered to generate a first scaling instruction, the code block area, the toolbox area, and the editing area can be scaled according to a preset magnification, and the preset scaling magnifications of the code block area, the toolbox area, and the editing area are the same, that is, they are scaled in proportion according to the first scaling instruction.
[0113] For example, see Figure 7 The enlarged schematic diagram of the display interface is shown in Figure 6 On the basis of, after triggering the zoom button, the code block area, toolbox area and editing area can be enlarged according to the preset magnification. Figure 7 Take the progressive relationship of 1.2 times, 1.4 times, and 1.6 times as an example, that is, click the zoom button to enlarge the code block area, toolbox area, and editing area to 1.2 times, and click the zoom button again to enlarge the code block area, toolbox area, and editing area to 1.4 times. Figure 7 The enlarged code block area, toolbox area, and text, blocks, etc. in the editing area are enlarged to the corresponding multiples at the same time.
[0114] Secondly, in the embodiment of the present application, a method for scaling the display interface is provided. By scaling the code block area, the toolbox area and the editing area in the same proportion, the flexibility of scaling the display interface can be improved.
[0115] Optionally, in the above Figure 3On the basis of the corresponding embodiments, in another optional embodiment provided by the embodiment of the present application, scaling the code block area, the toolbox area, and the editing area according to the first scaling instruction includes:
[0116] According to the first scaling instruction, the code block area, the toolbox area and the editing area are scaled in different proportions.
[0117] In one or more embodiments, a method of zooming a display interface is introduced. On the basis of configuring only one zoom button, after the zoom button is triggered to generate a first zoom instruction, the code block area, toolbox area and editing area can be zoomed according to different magnifications, and corresponding magnification configurations are set for different magnification requirements, so that the code block area, toolbox area and editing area can be zoomed in and out at different ratios. Unequal scaling takes unequal scale magnification as an example, and unequal scale magnification can be partial or full unequal scales, for example, the magnification ratio of the building block area is the same as that of the toolbox area, but different from that of the editing area, or, the magnification ratio of the building block area is the same as that of the editing area, but different from that of the toolbox area, or, the magnification ratio of the toolbox area is the same as that of the editing area, but different from that of the building block area, or, the magnification ratio of the toolbox area is the same as that of the editing area, but different from that of the building block area, or, the magnification ratio of the code block area, toolbox area and editing area are different, or.
[0118] For example, Figure 8 Another enlarged schematic diagram of the display interface shown in FIG. Figure 6 On the basis of, after triggering the zoom button, the zoom ratio of the building block area is the same as that of the editing area, which can be set to 1.2 times, and the zoom ratio of the toolbox area is 1.4 times, or, the zoom ratio of the toolbox area is the same as that of the editing area, which can be set to 1.2 times, and the zoom ratio of the building block area is 1.4 times, or, the zoom ratio of the editing area is 1.2 times, the zoom ratio of the toolbox area is 1 times, and the zoom ratio of the building block area is 1.4 times, etc.
[0119] Secondly, in the embodiment of the present application, a method for scaling the display interface is provided. By scaling the code block area, the toolbox area and the editing area in different proportions, the flexibility of scaling the display interface can be improved.
[0120] Optionally, in the above Figure 3 On the basis of the corresponding embodiments, in another optional embodiment provided by the embodiment of the present application, scaling the code block area according to the first scaling instruction includes:
[0121] According to the first scaling instruction, scaling the code block area based on the width of the toolbox area;
[0122] The width of the editing area is adjusted according to the width of the toolbox area and the code block area.
[0123] In one or more embodiments, a method for scaling a code block area is introduced. In order to prevent the enlarged code block area from covering the toolbox area, when scaling the code block area, the width of the toolbox area can be used as a limit, that is, the enlarged code block area needs to be placed starting from the boundary of the toolbox area. The size of the display interface is fixed, and the enlarged code block area squeezes the position of the editing area. After the code block is enlarged, the size of the editing area needs to be adjusted accordingly based on the space occupied by the toolbox area and the code block area, that is, the width of the toolbox area, the width of the code block area and the width of the display interface are determined, and the remaining width of the display interface is the width of the editing area, and the corresponding area position not occupied by the toolbox area and the code block area is the position of the editing area. When the first scaling instruction scales the code block area, the toolbox area and the editing area at the same time, the toolbox area can be scaled first, and then the scaled code block area can be placed according to the size of the toolbox area. After scaling, the editing area is displayed with the remaining area of the display interface.
[0124] For example, the graphical programming tool Blockly provides a zoom interface zoomCenter for the editing area, but does not provide a zoom interface for the toolbox area and the code block area. The first step to achieve proportional scaling of the toolbox area and the code block area is to obtain the scaling ratio of the editing area. Use Blockly.mainWorkspace.options.zoomOption.startScale to get the starting scale of the editing area (hereinafter referred to as scale 1). When the user clicks the zoom button, the zoomCenter interface is called to scale the editing area, and the scale of the editing area after scaling is obtained through Blockly.mainWorkspace.scale (hereinafter referred to as scale 2). You don't need to worry about how much you scaled at that time. The final scaling value is The actual scaling ratio is written later.
[0125] The toolbox area is wrapped in a div element. The attributes of the toolbox area div element include transform-origin attribute, height attribute and transform attribute. The code block area is an svg element. The code block area is wrapped in an svg element. The attributes of the svg element include height attribute, transform-origin attribute and translate parameter of transform attribute. Therefore, it is necessary to implement the interface of scaling the toolbox area and scaling the code block area respectively.
[0126] To scale the toolbox area, the zoomToolbox interface is implemented by modifying the style of the div element. Specifically, the zoom origin is set to the top left corner of the element by setting the transform-origin property to top left, the toolbox div is scaled to the actual scale ratio by the scale function of the transform property, and the height property is adjusted to the height value after scaling.
[0127] Similar to the toolbox area above, in order to scale the code block area, the same style adjustment should be made to the svg element. It should be noted that the left edge of the code block area is close to the right edge of the toolbox area, and the x value of the translate parameter of the transform attribute of the svg element needs to be adjusted according to the width of the toolbox.
[0128] Accordingly, see Fig. 9 The schematic diagram of the proportional zoom process shown in the figure, step 901. Get the first zoom instruction. Step 902. Call the zoomCenter interface to zoom the editing area. Step 903. Use the customized zoomToolbox interface to zoom the toolbox area. Step 904. Use the customized zoomFlyout interface to zoom the code block area. Step 905. Adjust the size of the editing area according to the sizes of the toolbox area and the code block area.
[0129] See also Fig.10 The flowchart of non-uniform scaling shown in the figure, step 1001. Get the first scaling instruction. Step 1002. Call the zoomCenter interface and use the first preset ratio to scale the editing area. Step 1003. Use the customized zoomToolbox interface to scale the toolbox area using the second preset ratio. The first preset ratio can be pre-entered or obtained by adaptive adjustment. Step 1004. Use the customized zoomFlyout interface to scale the code block area using the third preset ratio. The second preset ratio can be pre-entered or obtained by adaptive adjustment. Step 1005. Adjust the size of the editing area according to the sizes of the toolbox area and the code block area.
[0130] Secondly, in the embodiment of the present application, a method for scaling the code block area is provided. Through the above method, the position of the scaled code block area is adjusted based on the position of the toolbox area, and the position and width of the editing area are adjusted accordingly, so as to avoid the impact of the scaling code block area on the display interface and improve the user experience.
[0131] Optionally, in the above Figure 3 On the basis of the corresponding embodiments, in another optional embodiment provided by the embodiment of the present application, after scaling the code block area according to the first scaling instruction, the method further includes:
[0132] Adjust the scroll bar properties of the editing area according to the size of the code block area and toolbox area.
[0133] In one or more embodiments, a method for adjusting the scroll bar of the editing area is introduced. Since the editing area is a space that can be expanded infinitely, scroll bars, such as a horizontal scroll bar and a vertical scroll bar, can be configured for the editing area. The horizontal scroll bar is used to display the horizontal space content of the editing area when scrolling left and right, and the vertical scroll bar is used to display the vertical space content of the editing area when scrolling up. After the code block area and / or the toolbox area are scaled, the display space of the editing area will be affected. For example, when the code block area is enlarged, the editing area is squeezed by the code block area, and part of the area will be squeezed outside the display interface. At this time, the vertical scroll bar is correspondingly outside the display interface, making it impossible to scroll up and down, for example Fig.11 The vertical scroll bar shown in the figure moves right. Figure 6 Based on the above, the editing area is equipped with horizontal and vertical scroll bars. The positions of the horizontal and vertical scroll bars can be as follows: Fig.11 For example, the horizontal scroll bar is placed at the bottom of the editing area, and the vertical scroll bar is placed at the right side of the editing area. After the code block area is enlarged by 1.4 times, the editing area moves to the right accordingly, and the vertical scroll bar cannot be displayed. Therefore, it is also necessary to synchronously adjust the properties of the scroll bar of the editing area based on the size of the code block area and the toolbox area, such as adjusting the position of the vertical scroll bar to be within the display interface. Exemplarily, the value of the width attribute of the scroll bar and the x value of the translate function of the transform attribute can be recalculated according to the size of the toolbox area and the code block area after scaling. The schematic diagram of the modified vertical scroll bar can be referred to. Fig.12 As shown, after the code block area is enlarged by 1.4 times, the editing area moves to the right accordingly, and the vertical scroll bar moves to the right side of the editing area displayed on the display interface accordingly, wherein the horizontal scroll bar can also adjust the properties accordingly, which is not limited here.
[0134] Secondly, in the embodiment of the present application, a method for adjusting the scroll bar of the editing area is provided. Through the above method, after the code block area or toolbox area is scaled to squeeze the space of the editing area, the properties of the scroll bar can be changed accordingly, so that the scroll bar is not squeezed to a position outside the display interface, avoiding the inability to view the upper and lower spaces of the editing area, and improving the experience effect.
[0135] Optionally, in the above Figure 3 On the basis of the corresponding embodiments, in another optional embodiment provided by the embodiment of the present application, in response to the second selection instruction, selecting a first programming building block from a plurality of candidate programming building blocks and adding it to the editing area includes:
[0136] In response to the second selection instruction, setting the position of a first programming building block selected by the mouse from a plurality of candidate programming building blocks as the pointing position of the mouse;
[0137] The first programming block is added to the editing area according to the stop position of the mouse.
[0138] In one or more embodiments, a method for adjusting the position of programming blocks is introduced. After the code block area is scaled, the display position of the programming blocks in the code block area in the display interface also changes with the scaling of the code block area, but for the graphical programming tool, the position of the programming blocks in the code block area in the record is still in the original position, that is, the display position deviates from the original position. When dragging the programming blocks from the code block area to the editing area, the graphical programming tool believes that the original position of the dragged programming blocks is inconsistent with the display position, resulting in an abnormality, and the block position and mouse position following the mouse are offset. In the embodiment of the present application, the position of the programming block dragged by the mouse can be set to the mouse position, such as after multiple candidate programming blocks in the code block area, the position of the first programming block clicked by the mouse is set to the mouse pointing position, and added to the stop position of the mouse in the editing area as the mouse is dragged. Among them, the same is true when the position of the code block area is changed due to the enlargement of the toolbox area, which will not be repeated here.
[0139] Secondly, in the embodiment of the present application, a method for adjusting the position of a programming block is provided. By the above method, the position of the selected programming block is set to the position pointed by the mouse, so as to avoid the display of the programming block being deviated from the original position due to the scaling of the toolbox area or the code block area, thereby improving the user experience.
[0140] Optionally, in the above Figure 3 On the basis of the corresponding embodiments, in another optional embodiment provided by the embodiment of the present application, after selecting a first programming building block from a plurality of candidate programming building blocks and adding the first programming building block to the editing area in response to the second selection instruction, the method further includes:
[0141] In response to the editing instruction, editing the first programming building block in the editing area;
[0142] The instruction code corresponding to the first programming building block is determined according to the editing result.
[0143] In one or more embodiments, a method for determining an instruction code of a programming block is introduced. The editing instruction may be an instruction to move a first programming block, such as adjusting the position of the first programming block in an editing area. The editing instruction may also be an instruction to modify a parameter of the first programming block, such as inputting a target parameter to the first programming block. The specific input method may be to Figure 5The "**" in the programming building block shown is modified. After the corresponding editing result can be obtained in response to the editing instruction, the instruction template corresponding to the first programming building block can be obtained, and the instruction template includes text information used to describe the function of the programming building block and the target function of realizing the function of the programming building block. The instruction code corresponding to the first programming building block is determined in combination with the editing result. Among them, the parameters edited for the editing instruction are the calling parameters of the target function.
[0144] Secondly, in the embodiment of the present application, a method for determining the instruction code of a programming block is provided. Through the above method, the programming block added to the editing area is edited, and the instruction code corresponding to the programming block is determined based on the editing result. The programming block parameters can be modified at any time to improve programming convenience.
[0145] Optionally, in the above Figure 3 On the basis of the corresponding embodiments, in another optional embodiment provided by the embodiment of the present application, the first programming building block includes a building block frame, the building block frame has a parameter control embedded therein, and in response to the editing instruction, editing the first programming building block in the editing area includes:
[0146] In response to editing instructions, move the building block frame in the editing area, or modify the parameters of the parameter control.
[0147] In one or more embodiments, a method for editing programming blocks is introduced. Each programming block is indicated by a different block frame, each block frame corresponds to a corresponding instruction template, and a parameter control is embedded in the block frame. The parameter control can obtain the input parameters as the item parameters of the objective function of the programming block function in the instruction template. Correspondingly, the method of using objects to edit programming blocks can be to move the block frame in the editing area, adjust it to the required display position, or modify the parameters of the parameter control. Exemplarily, taking the "When receiving broadcast **" block in the event class block as an example, "When receiving broadcast ()" is the block frame, and "**" is the parameter control, and the parameters of the parameter control can be modified at any time.
[0148] Secondly, in the embodiment of the present application, a method for editing programming blocks is provided. Through the above method, a method for editing programming blocks is provided, which improves the convenience of programming tools.
[0149] Optionally, in the above Figure 3 On the basis of the corresponding embodiments, in another optional embodiment provided by the embodiment of the present application, the method further includes:
[0150] The instruction codes corresponding to the various programming blocks in the editing area are combined to determine the program configuration file for running.
[0151] In one or more embodiments, a method for determining a program configuration file is introduced. After completing the addition and editing of programming blocks in the editing area, the instruction codes corresponding to the programming blocks can be combined according to the combination relationship of the programming blocks to obtain a program configuration file. By loading the program configuration file, parsing it and running it, the corresponding program content can be executed.
[0152] Secondly, in the embodiment of the present application, a method for determining a program configuration file is provided. By combining the instruction codes of the programming building blocks, the program configuration file is obtained. The program configuration file is related to the combination relationship of the programming building blocks in the editing area, which is convenient for using the object programming program configuration file.
[0153] Optionally, in the above Figure 3 On the basis of the corresponding embodiments, in another optional embodiment provided by the embodiment of the present application, the method further includes:
[0154] In response to the third zoom instruction, the area where the current focus of the object is located is zoomed.
[0155] In one or more embodiments, a display interface zooming method is introduced. The third zoom instruction does not zoom a fixed area, but zooms an area where the current focus of the object is located. The current focus of the object can be the current pointing position of the mouse. For example, when the mouse points to the toolbox area, in response to the third zoom instruction, the toolbox area is zoomed accordingly, wherein the third zoom instruction can be issued by rolling the mouse wheel, which is not limited here.
[0156] Secondly, in the embodiment of the present application, a display interface zooming method is provided. Through the above method, the area where the focus position of the object is directly zoomed based on the zoom instruction is provided, providing another zooming method and improving the zooming flexibility.
[0157] The following is a detailed description of the programming tool scaling in this application. Fig.13 , Fig.13 This is a schematic diagram of an embodiment of a programming tool scaling device in an embodiment of the present application. The device 130 runs a graphical programming tool. The display interface of the graphical programming tool includes a toolbox area, a code block area, and an editing area. The programming tool scaling device 130 includes:
[0158] The display unit 1301 is used to display the building block categories in the toolbox area; in response to a first selection instruction for a first category in the building block categories, a plurality of candidate programming building blocks corresponding to the first category are displayed in the code block area, wherein the plurality of candidate programming building blocks are programming module components with different functions;
[0159] An acquiring unit 1302 is used to acquire a first scaling instruction;
[0160] A scaling unit 1303, configured to scale the code block area according to a first scaling instruction;
[0161] The adding unit 1304 is used to select a first programming building block from a plurality of candidate programming building blocks and add it to the editing area in response to the second selection instruction. The editing area is a graphical interactive area for performing code editing using the selected programming building block.
[0162] In an embodiment of the present application, a programming tool zooming device is provided. Through the above device, the code block area displaying the programming building blocks can be zoomed in and out before selecting the programming building blocks. Young users can zoom in on the code block area according to their needs to facilitate identification of the building blocks and reduce the burden on their eyes. The code block area can also be reduced to provide a larger editing area.
[0163] Optionally, in the above Fig.13 On the basis of the corresponding embodiment, in another embodiment of the programming tool scaling device 130 provided in the embodiment of the present application, the scaling unit 1303 is further used for:
[0164] Get the second scaling instruction;
[0165] The toolbox area is scaled according to the second scaling instruction.
[0166] In an embodiment of the present application, a programming tool scaling device is provided. Through the above device, the toolbox area can be scaled according to the second scaling instruction, and the toolbox area can be scaled separately, thereby improving the flexibility of scaling.
[0167] Optionally, in the above Fig.13 On the basis of the corresponding embodiment, in another embodiment of the programming tool scaling device 130 provided in the embodiment of the present application, the scaling unit 1303 is specifically used for:
[0168] The code block area, the toolbox area and the editing area are scaled according to the first scaling instruction.
[0169] In an embodiment of the present application, a programming tool zooming device is provided. Through the above device, the toolbox area, the code block area and the editing area are zoomed at the same time using the first zooming instruction, thereby improving the convenience of zooming.
[0170] Optionally, in the above Fig.13 On the basis of the corresponding embodiment, in another embodiment of the programming tool scaling device 130 provided in the embodiment of the present application, the scaling unit 1303 is specifically used for:
[0171] According to the first scaling instruction, the code block area, the toolbox area and the editing area are scaled in equal proportions.
[0172] In an embodiment of the present application, a programming tool scaling device is provided. By scaling the code block area, toolbox area and editing area in the same proportion, the flexibility of scaling the display interface can be improved.
[0173] Optionally, in the above Fig.13 On the basis of the corresponding embodiment, in another embodiment of the programming tool scaling device 130 provided in the embodiment of the present application, the scaling unit 1303 is specifically used for:
[0174] According to the first scaling instruction, the code block area, the toolbox area and the editing area are scaled in different proportions.
[0175] In an embodiment of the present application, a programming tool scaling device is provided. By means of the device, the code block area, toolbox area and editing area are scaled in different proportions, so as to improve the flexibility of display interface scaling.
[0176] Optionally, in the above Fig.13 On the basis of the corresponding embodiment, in another embodiment of the programming tool scaling device 130 provided in the embodiment of the present application, the scaling unit 1303 is specifically used for:
[0177] According to the first scaling instruction, scaling the code block area based on the width of the toolbox area;
[0178] The width of the editing area is adjusted according to the width of the toolbox area and the code block area.
[0179] In an embodiment of the present application, a programming tool scaling device is provided. Through the above device, the position of the scaled code block area is adjusted based on the position of the toolbox area, and the position and width of the editing area are adjusted accordingly, so as to avoid the impact of the scaled code block area on the display interface and improve the user experience.
[0180] Optionally, in the above Fig.13 On the basis of the corresponding embodiment, in another embodiment of the programming tool scaling device 130 provided in the embodiment of the present application, the device 130 further includes an adjustment unit 1305, and the adjustment unit 1305 is specifically used for:
[0181] Adjust the scroll bar properties of the editing area according to the size of the code block area and toolbox area.
[0182] In an embodiment of the present application, a programming tool zooming device is provided. Through the above device, after the code block area or toolbox area is zoomed to squeeze the space of the editing area, the properties of the scroll bar can be changed accordingly, so that the scroll bar is not squeezed to a position outside the display interface, avoiding the inability to view the upper and lower spaces of the editing area, and improving the experience effect.
[0183] Optionally, in the above Fig.13 On the basis of the corresponding embodiment, in another embodiment of the programming tool scaling device 130 provided in the embodiment of the present application, the adding unit 1304 is specifically used for:
[0184] In response to the second selection instruction, setting the position of a first programming building block selected by the mouse from a plurality of candidate programming building blocks as the pointing position of the mouse;
[0185] The first programming block is added to the editing area according to the stop position of the mouse.
[0186] In an embodiment of the present application, a programming tool scaling device is provided. Through the above device, the position of the selected programming building block is set to the mouse pointing position, avoiding the display of the programming building block being deviated from the original position due to the scaling of the toolbox area or the code block area, thereby improving the user experience.
[0187] Optionally, in the above Fig.13 On the basis of the corresponding embodiment, in another embodiment of the programming tool scaling device 130 provided in the embodiment of the present application, the device 130 further includes an editing unit 1306, and the editing unit 1306 is specifically used for:
[0188] In response to the editing instruction, editing the first programming building block in the editing area;
[0189] The instruction code corresponding to the first programming building block is determined according to the editing result.
[0190] In an embodiment of the present application, a programming tool scaling device is provided. Through the above device, a programming block added to the editing area is edited, and the instruction code corresponding to the programming block is determined based on the editing result. The programming block parameters can be modified at any time to improve programming convenience.
[0191] Optionally, in the above Fig.13 On the basis of the corresponding embodiment, in another embodiment of the programming tool scaling device 130 provided in the embodiment of the present application, the editing unit 1306 is specifically used for:
[0192] In response to editing instructions, move the building block frame in the editing area, or modify the parameters of the parameter control.
[0193] In an embodiment of the present application, a programming tool scaling device is provided. Through the above device, a method for editing programming blocks is provided, thereby improving the convenience of the programming tool.
[0194] Optionally, in the above Fig.13 On the basis of the corresponding embodiment, in another embodiment of the programming tool scaling device 130 provided in the embodiment of the present application, the device 130 further includes a determining unit 1307, and the determining unit 1307 is specifically used to:
[0195] The instruction codes corresponding to the various programming blocks in the editing area are combined to determine the program configuration file for running.
[0196] In an embodiment of the present application, a programming tool scaling device is provided. Through the above device, the instruction codes of the programming building blocks are combined to obtain a program configuration file, which is related to the combination relationship of the programming building blocks in the editing area, so as to facilitate the use of the object programming program configuration file.
[0197] Optionally, in the above Fig.13 On the basis of the corresponding embodiment, in another embodiment of the programming tool scaling device 130 provided in the embodiment of the present application, the scaling unit 1303 is further used for:
[0198] In response to the third zoom instruction, the area where the current focus of the object is located is zoomed.
[0199] In an embodiment of the present application, a programming tool zooming device is provided. Through the above device, the area where the focus position of the object is directly zoomed based on the zoom instruction is used, providing another zooming method and improving the zooming flexibility.
[0200] Fig.14 3 is a schematic diagram of the structure of a computer device provided in an embodiment of the present application. The computer device 300 may have relatively large differences due to different configurations or performances, and may include one or more central processing units (CPU) 322 (for example, one or more processors) and memory 332, and one or more storage media 330 (for example, one or more mass storage devices) storing application programs 342 or data 344. Among them, the memory 332 and the storage medium 330 can be short-term storage or permanent storage. The program stored in the storage medium 330 may include one or more modules (not shown in the figure), and each module may include a series of instruction operations in the computer device. Furthermore, the central processing unit 322 can be configured to communicate with the storage medium 330 to execute a series of instruction operations in the storage medium 330 on the computer device 300.
[0201] The computer device 300 may also include one or more power supplies 326, one or more wired or wireless network interfaces 350, one or more input and output interfaces 358, and / or one or more operating systems 341, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, etc.
[0202] The steps performed by the terminal device in the above embodiment can be based on the Fig.14 The computer device structure shown.
[0203] A computer-readable storage medium is also provided in an embodiment of the present application, on which a computer program is stored. When the computer program is executed by a processor, the steps of the methods described in the above embodiments are implemented.
[0204] A computer program product is also provided in an embodiment of the present application, including a computer program, which, when executed by a processor, implements the steps of the methods described in the above embodiments.
[0205] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.
[0206] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.
[0207] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
[0208] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.
[0209] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), disk or optical disk and other media that can store program code.
[0210] As described above, the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application.
Claims
1. A programming tool scaling method, characterized in that: The method is executed by a terminal device running a graphical programming tool, wherein the display interface of the graphical programming tool includes a toolbox area, a code block area, and an editing area, and the method includes: displaying the building block categories in the toolbox area; In response to a first selection instruction for a first category among the building block categories, displaying a plurality of candidate programming building blocks corresponding to the first category in the code block area, the plurality of candidate programming building blocks being programming module components with different functions; Get the first scaling instruction; Scaling the code block area according to the first scaling instruction specifically includes: when the first scaling instruction scales the code block area, the toolbox area and the editing area at the same time, first scaling the toolbox area, then placing the scaled code block area according to the size of the toolbox area, and then displaying the scaled editing area in the remaining area of the display interface; or, according to the first scaling instruction, scaling the code block area based on the width of the toolbox area, placing the scaled code block area starting from the boundary of the toolbox area, and then adjusting the width of the editing area according to the widths of the toolbox area and the code block area, so that the width of the editing area is the remaining width of the display interface; Adjusting the properties of the scroll bar of the editing area according to the sizes of the code block area and the toolbox area; In response to the second selection instruction, a first programming building block is selected from the plurality of candidate programming building blocks in the zoomed code block area and added to the editing area, where the editing area is a graphical interactive area for performing code editing using the selected programming building block.
2. The method according to claim 1, characterized in that The method further comprises: Get the second scaling instruction; The toolbox area is scaled according to the second scaling instruction.
3. The method according to claim 1, characterized in that In response to the second selection instruction, selecting a first programming building block from the plurality of candidate programming building blocks and adding the first programming building block to the editing area comprises: In response to the second selection instruction, setting the position of a first programming building block selected by the mouse from the plurality of candidate programming building blocks as the pointing position of the mouse; The first programming building block is added to the editing area according to the stop position of the mouse.
4. The method according to claim 1, characterized in that: After selecting a first programming building block from the plurality of candidate programming building blocks and adding the first programming building block to the editing area in response to the second selection instruction, the method further includes: In response to an edit instruction, editing the first programming building block in the edit area; The instruction code corresponding to the first programming building block is determined according to the editing result.
5. The method according to claim 4, characterized in that The first programming building block includes a building block frame, the building block frame has a parameter control embedded therein, and in response to the editing instruction, editing the first programming building block in the editing area includes: In response to an editing instruction, the building block frame in the editing area is moved, or the parameters of the parameter control are modified.
6. The method according to claim 4 or 5, characterized in that: The method further comprises: The instruction codes corresponding to the programming blocks in the editing area are combined to determine a program configuration file for running.
7. The method according to claim 1, characterized in that The method further comprises: In response to the third zoom instruction, the area where the current focus of the object is located is zoomed.
8. A programming tool scaling device, characterized in that: The device runs a graphical programming tool, the display interface of the graphical programming tool includes a toolbox area, a code block area and an editing area, and the device includes: a display unit, configured to display the building block categories in the toolbox area; and in response to a first selection instruction for a first category of the building block categories, display a plurality of candidate programming building blocks corresponding to the first category in the code block area, wherein the plurality of candidate programming building blocks are programming module components with different functions; An acquiring unit, used for acquiring a first scaling instruction; a scaling unit, configured to scale the code block area according to the first scaling instruction, specifically comprising: when the first scaling instruction scales the code block area, the toolbox area and the editing area at the same time, scaling the toolbox area first, then placing the scaled code block area according to the size of the toolbox area, and then displaying the scaled editing area in the remaining area of the display interface; or, according to the first scaling instruction, scaling the code block area based on the width of the toolbox area, placing the scaled code block area starting from the boundary of the toolbox area, and then adjusting the width of the editing area according to the widths of the toolbox area and the code block area, so that the width of the editing area is the remaining width of the display interface; Adjusting the properties of the scroll bar of the editing area according to the sizes of the code block area and the toolbox area; The adding unit is used to select a first programming building block from the plurality of candidate programming building blocks in the zoomed code block area in response to the second selection instruction and add the first programming building block to the editing area, where the editing area is a graphical interactive area for code editing using the selected programming building block.
9. The device according to claim 8, characterized in that The scaling unit is also used for: Get the second scaling instruction; The toolbox area is scaled according to the second scaling instruction.
10. The device according to claim 8, characterized in that The adding unit is specifically used for: In response to the second selection instruction, setting the position of a first programming building block selected by the mouse from the plurality of candidate programming building blocks as the pointing position of the mouse; The first programming building block is added to the editing area according to the stop position of the mouse.
11. The device according to claim 8, characterized in that It also includes editing units, specifically for: In response to an edit instruction, editing the first programming building block in the edit area; The instruction code corresponding to the first programming building block is determined according to the editing result.
12. The device according to claim 11, characterized in that The first programming building block includes a building block frame, the building block frame is embedded with a parameter control, and the editing unit is specifically used for: In response to an editing instruction, the building block frame in the editing area is moved, or the parameters of the parameter control are modified.
13. The device according to claim 11 or 12, characterized in that It also includes a determination unit, specifically configured to: The instruction codes corresponding to the programming blocks in the editing area are combined to determine a program configuration file for running.
14. The device according to claim 8, characterized in that The scaling unit is also used for: In response to the third zoom instruction, the area where the current focus of the object is located is zoomed.
15. A computer device, characterized in that: include: memories, transceivers, processors, and bus systems; Wherein, the memory is used to store programs; The processor is used to execute the program in the memory, including executing the method according to any one of claims 1 to 7; The bus system is used to connect the memory and the processor so that the memory and the processor can communicate with each other.
16. A computer-readable storage medium comprising instructions, which, when executed on a computer, causes the computer to perform the method according to any one of claims 1 to 7.
17. A computer program product, characterized in that When the computer program product is executed on a computer, the computer performs the method according to any one of claims 1 to 7.
Citation Information
Patent Citations
Display interface amplification method, terminal and computer readable storage medium
CN107908349A
Content editing method and system, computer readable storage medium and terminal equipment
CN111596852A
