A processing method and device for efficiently and quickly generating controls

Abstract

The present invention discloses a processing method and device for efficiently and quickly generating controls, the method comprising: copying the selected controls to a container A; obtaining a user drag operation from an initial position to a current position to generate a second rectangular virtual frame, and saving the position and size of the second rectangular virtual frame in a canvas; calculating and determining the number of containers A that can be accommodated in the second rectangular virtual frame and the position of each container A in the second rectangular virtual frame according to the size of the second rectangular virtual frame; calling out controls identical to the controls in the container A from a control resource library, and loading them into the second rectangular virtual frame according to the distribution of the controls in the container A, thereby quickly completing the reuse of batch controls. The present invention can efficiently and quickly complete the reuse and layout of controls, reduce the tediousness of operations, improve efficiency and user experience, and freely modify the shape of controls during the process of dragging the second rectangular virtual frame.

Description

Technical Field

[0001] The present invention relates to the technical field of interface design editor editing controls, and in particular to a processing method and device for efficiently and quickly generating controls. Background Art

[0002] With the rise and development of the Internet, various types of interface design editors on the market have also risen and developed. Interface design editors enable people who are not good at or even do not understand programming to design an interface or flowchart and other needs. Usually, an interface with one or more controls is generated in the interface design editor, so that a corresponding physical device can be controlled through the control. For example, a control specifically used to turn on and off the lighting, and another control used to turn on and off the air conditioner, so as to control the corresponding device on the designed interface and realize intelligent control. However, if the current interface design editor needs to generate multiple identical controls, it can only copy the existing controls and need to rearrange the copied controls, which will cause users to repeat the copying, pasting and layout operations, resulting in a large workload, low efficiency and cumbersome operation. In particular, such operations will bring inconvenience to users during use. For example, a control terminal with an interface (such as a remote control) is produced for the user, and there are several controls on the interface. Each control can control the corresponding device / equipment in the home, such as controlling lighting, refrigerators, air conditioners, etc. However, if the user has new equipment or replaces equipment, the user needs to add new controls or change the shape of controls or even need to rearrange the layout of controls in the interface. It may be necessary to use controls that are the same as existing controls. If the traditional method of copying, pasting and layout operations is used, the user experience is extremely poor. Summary of the invention

[0003] In view of the deficiencies in the prior art, the purpose of the present invention is to provide a processing method and device for efficiently and quickly generating controls, which can solve the problems existing in the prior art described in the background technology.

[0004] The technical solution to achieve the purpose of the present invention is: a processing method for efficiently and quickly generating controls, which is applied to an interface design editor, and the interface design editor has a built-in control resource library, including the following steps:

[0005] Step 1: Obtain the control selected by the user in the canvas of the interface design editor, and generate a first rectangular virtual frame that is the same as the selected area;

[0006] Step 2: Obtain the number and type of controls in the first rectangular virtual frame, as well as the position and size of the first rectangular virtual frame in the canvas, and copy the controls in the first rectangular virtual frame to container A;

[0007] Step 3: Obtain a user drag operation from the initial position to the current position to generate a second rectangular virtual frame, and save the position and size of the second rectangular virtual frame in the canvas;

[0008] Step 4: according to the size of the second rectangular virtual frame, calculate and determine the number of containers A that can be accommodated in the second rectangular virtual frame, and the position of each container A in the second rectangular virtual frame;

[0009] Step 5: Call out controls identical to those in container A from the control resource library, and load them into the second rectangular virtual frame according to the distribution of controls in container A, thereby quickly completing the reuse of batch controls.

[0010] Furthermore, in step 1, a selection area is drawn by using a mouse or by touching and dragging on a touch screen, and the controls covered by the selection area are the selected controls.

[0011] Furthermore, the first rectangular virtual frame is transparent.

[0012] Further, the position of the first rectangular virtual frame in the canvas is determined by the coordinates of the four vertices of the first rectangular virtual frame.

[0013] Furthermore, a signal generated by a keyboard key + mouse left button press and move operation is used as the first movement signal, the position when the mouse left button is pressed is used as the initial position, the position of the mouse at the current moment is used as the current position, and a rectangular virtual box is generated by dragging the area covered by the initial position to the current position, and the rectangular virtual box is used as the second rectangular virtual box.

[0014] Furthermore, if an oblique line is formed between the initial position and the current position, the initial position and the current position are two relative vertex corners of the rectangular virtual frame; if a vertical or horizontal straight line is formed between the initial position and the current position, the initial position and the current position are the two vertices of the length or the width of the rectangular virtual frame, and the other width or length is a preset value, thereby determining the size of the second rectangular virtual frame.

[0015] Furthermore, in step 4, the calculation determines the number of containers A that can be accommodated in the second rectangular virtual frame, and its specific implementation includes:

[0016] Assuming that the size of the second rectangular virtual frame is m*n and the size of the container A is p*q, t containers A can be accommodated, and t is the largest positive integer satisfying the two relations p*t≤m and q*t≤n.

[0017] Furthermore, in step 5, the controls in container A are distributed and loaded into each grid unit in the second rectangular virtual frame.

[0018] The second rectangular virtual frame includes a plurality of grid units, the size of each grid unit is greater than or equal to the size of the container A, and each grid unit accommodates one container A.

[0019] Furthermore, in step 2, after the control is placed in container A, if a first modification signal is received, a row, column or control selected by the user in container A is received, and a shape modification option for the selected control is provided, and the result of the user's shape modification option is updated to the corresponding control in container A. Finally, in step 5, the control whose shape has been changed is loaded into the corresponding position of the second rectangular virtual frame.

[0020] A processing device, comprising:

[0021] A memory for storing program instructions;

[0022] The processor is used to run the program instructions to execute the steps of the processing method for efficiently and quickly generating controls.

[0023] The beneficial effects of the present invention are as follows: the present invention can efficiently and quickly complete the reuse and layout of controls, reduce the complexity of operations, improve efficiency and user experience, and freely modify the shape of controls during the process of dragging the second rectangular virtual frame. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1 It is a flow chart of a preferred embodiment of the present invention;

[0025] Figure 2 A schematic diagram of the structure of the processing device. DETAILED DESCRIPTION

[0026] In order to make the purpose, technical scheme and advantages of the present application clearer, the specific embodiments of the present application are further described in detail below in conjunction with the accompanying drawings. It is understood that the specific embodiments described herein are only used to explain the present application, rather than to limit the present application. It should also be noted that, for the convenience of description, only the part related to the present application but not all the contents are shown in the accompanying drawings. Before discussing the exemplary embodiments in more detail, it should be mentioned that some exemplary embodiments are described as processes or methods depicted as flow charts. Although the flow chart describes each operation (or step) as a sequential process, many of the operations therein can be implemented in parallel, concurrently or simultaneously. In addition, the order of each operation can be rearranged. The process can be terminated when its operation is completed, but it can also have additional steps not included in the accompanying drawings. The process can correspond to a method, a function, a procedure, a subroutine, a subprogram, etc.

[0027] like Figure 1As shown, a method for efficiently and quickly generating controls is applied to an interface design editor, and the interface design editor has a built-in control resource library, including the following steps:

[0028] Step 1: Obtain the control selected by the user in the canvas of the interface design editor, and generate a first rectangular virtual frame that is the same as the selected area.

[0029] In this step, the user selects the current control that he wants to reuse in the canvas, and can use the mouse or touch and drag on the touch screen to draw a selection area, which covers the current control that he wants to reuse. The selection area includes one or more controls, which may be of the same type or different types. A first rectangular virtual frame that is the same as the selection area is generated. The first rectangular virtual frame means that the user cannot see it on the screen with naked eyes, that is, the first rectangular virtual frame is transparent.

[0030] Step 2: Obtain the number and type of controls in the first rectangular virtual box, as well as the position and size of the first rectangular virtual box in the canvas, and copy the controls in the first rectangular virtual box to container A. The position of the first rectangular virtual box in the canvas can be determined by the coordinates of the four vertices of the first rectangular virtual box.

[0031] Step 3: Receive the first movement signal generated by the user's dragging operation, and obtain the initial position and current position of the first movement signal in the canvas, generate a second rectangular virtual frame from the initial position to the current position, and save the position and size of the second rectangular virtual frame in the canvas.

[0032] In this step, the signal generated by a certain key of the keyboard + the left button of the mouse can be used as the first movement signal, and of course it can also be other customized movement signals. Through the customized movement signal, once the movement signal is received, it means that the second rectangular virtual frame needs to be selected. The position where the left button of the mouse is pressed is taken as the initial position, and the position of the mouse moved to the current moment is the current position. A rectangular virtual frame is generated by dragging from the initial position to the area covered by the current position. Among them, if a slant line is formed between the initial position and the current position, the initial position and the current position are the two relative vertices of the rectangular virtual frame, and the size of the rectangular virtual frame can be uniquely determined; if a vertical or horizontal straight line is formed between the initial position and the current position, the initial position and the current position are the two vertices of the length or width of the rectangular virtual frame, and the other width or length is determined according to the preset, thereby determining the size of the second rectangular virtual frame.

[0033] Step 4: According to the size of the second rectangular virtual frame, calculate and determine the number of containers A that can be accommodated in the second rectangular virtual frame, and the position of each container A in the second rectangular virtual frame.

[0034] In this step, the number and type of the selected controls are stored in container A, and the selected controls are still distributed in container A according to the original distribution, and each control itself has a certain size. Therefore, multiple controls still need to occupy a certain size of position range in container A, so that container A has a size. The second rectangular virtual frame is the range dragged by the user in the area where there is no control distribution, and it also has a certain size. Therefore, the second rectangular virtual frame can accommodate integer or non-integer multiples of container A, but only integer multiples of container A can be set in the second rectangular virtual frame. It will also be equivalent to forming a number of grid units in the second rectangular virtual frame, each grid unit size ≥ container A size, and each grid unit accommodates a container A. Since the position of each grid in the second rectangular virtual frame is determined, the distribution of container A contained in the second rectangular virtual frame is also determined.

[0035] For example, if the size of the second rectangular virtual box is 30*20, if the size of container A is 5*4, then the second rectangular virtual box can accommodate 5; if the size of container A is 5*3, then it can accommodate 6; if the size of container A is 4*3, then it can accommodate 6. That is, assuming that the size of the second rectangular virtual box is m*n and the size of container A is p*q, then t containers A can be accommodated, and t is the largest positive integer that satisfies the two relations p*t≤m and q*t≤n.

[0036] Step 5: Call out controls identical to those in container A from the control resource library, and load them into each grid unit in the second rectangular virtual frame according to the distribution of controls in container A, thereby quickly completing the reuse of batch controls.

[0037] In another optional embodiment, in step 2, after the control is placed in container A, if a first modification signal is received, a row, column or control selected by the user in container A is received, and an option is provided to select the shape of the control to be changed, and the corresponding control shape in container A is updated with the control shape selected by the user. Finally, in step 5, the control whose shape has been changed is also loaded into the corresponding position of the second rectangular virtual frame, so that the shape of the control can be changed while reusing the same type of control, thereby improving the user experience.

[0038] The present invention can efficiently and quickly complete the reuse and layout of controls, reduce the complexity of operations, improve efficiency and user experience, and freely modify the shape of controls during the process of dragging the second rectangular virtual frame.

[0039] like Figure 2 As shown, the present invention also provides a processing device 100, which includes:

[0040] Memory 101, used for storing program instructions;

[0041] The processor 102 is used to run the program instructions to execute the steps of the processing method for efficiently and quickly generating controls.

[0042] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0043] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0044] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0045] Although the preferred embodiments of the present invention have been described, those skilled in the art may make other changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0046] Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include these modifications and variations.

Claims

1. A method for efficiently and quickly generating controls, characterized in that: Applied to the interface design editor, which has a built-in control resource library, including the following steps: Step 1: Obtain the control selected by the user in the canvas of the interface design editor, and generate a first rectangular virtual frame that is the same as the selected area; Step 2: Obtain the number and type of controls in the first rectangular virtual frame, as well as the position and size of the first rectangular virtual frame in the canvas, and copy the controls in the first rectangular virtual frame to container A; Step 3: Obtain the user's dragging operation from the initial position to the current position to generate a second rectangular virtual frame, and save the position and size of the second rectangular virtual frame in the canvas. The second rectangular virtual frame is the range that the user drags out in the area where no controls are distributed; Step 4: according to the size of the second rectangular virtual frame, calculate and determine the number of containers A that can be accommodated in the second rectangular virtual frame, and the position of each container A in the second rectangular virtual frame; Step 5: Call out controls identical to those in container A from the control resource library, and load them into the second rectangular virtual frame according to the distribution of controls in container A, thereby quickly completing the reuse of batch controls.

2. The method for efficiently and quickly generating controls according to claim 1 is characterized in that: In the step 1, a selection area is drawn by using a mouse or by touching and dragging on a touch screen, and the controls covered by the selection area are the selected controls.

3. The method for efficiently and quickly generating controls according to claim 1 is characterized in that: The first rectangular virtual frame is transparent.

4. The method for efficiently and quickly generating controls according to claim 1 is characterized in that: The position of the first rectangular virtual frame in the canvas is determined by the coordinates of the four vertices of the first rectangular virtual frame.

5. The method for efficiently and quickly generating controls according to claim 1 is characterized in that: The signal generated by a keyboard key + mouse left button press and move operation is the first movement signal, the position when the mouse left button is pressed is taken as the initial position, the position of the mouse at the current moment is taken as the current position, and a rectangular virtual frame is generated from the initial position to the area covered by the current position, and the rectangular virtual frame is taken as the second rectangular virtual frame.

6. The method for efficiently and quickly generating controls according to claim 5 is characterized in that: If the initial position and the current position form an oblique line, the initial position and the current position are two relative vertex corners of the rectangular virtual frame. If the initial position and the current position form a vertical or horizontal straight line, the initial position and the current position are the two vertices of the length or the width of the rectangular virtual frame, and the other width or length is a preset value, thereby determining the size of the second rectangular virtual frame.

7. The method for efficiently and quickly generating controls according to claim 1 is characterized in that: In step 4, the calculation determines the number of containers A that can be accommodated in the second rectangular virtual frame, and its specific implementation includes: Assuming that the size of the second rectangular virtual frame is m*n and the size of the container A is p*q, t containers A can be accommodated, where t is the largest positive integer satisfying the two relations p*t≤m and q*t≤n.

8. The method for efficiently and quickly generating controls according to claim 1 is characterized in that: In step 5, the controls in container A are distributed and loaded into each grid unit in the second rectangular virtual frame. The second rectangular virtual frame includes a plurality of grid units, the size of each grid unit is greater than or equal to the size of the container A, and each grid unit accommodates one container A.

9. The method for efficiently and quickly generating controls according to claim 1, characterized in that: In step 2, after the control is placed in container A, if a first modification signal is received, a row, column or control selected by the user in container A is received, and a shape modification option for the selected control is provided, and the result of the user's shape modification option is updated to the corresponding control in container A. Finally, in step 5, the control whose shape has been changed is loaded into the corresponding position of the second rectangular virtual frame.

10. A processing device, characterized in that: It includes: A memory for storing program instructions; A processor is used to run the program instructions to execute the steps of the processing method for efficiently and quickly generating controls as described in any one of claims 1 to 9.

Images