Method, system and non-transitory computer-readable storage medium for generating description code of user interface

1. A method for generating a description code of a user interface, comprising:

displaying a programmable user interface having a first object and a second object;

grouping the first object and the second object to form a grouping block, wherein the first object and the second object are in the grouping block;

cutting the grouping block into a first sub-block and a second sub-block, wherein the first object is in the first sub-block and the second object is in the second sub-block;

setting a first interval between the first object and the second object as having a first display attribute or a second display attribute;

displaying a first attribute element together with the first object and the second object on the programmable user interface, wherein the first attribute element presents a first display state for representing the first display attribute or presents a second display state for representing the second display attribute;

detecting whether the first attribute element displayed on the programmable user interface is selected;

when the first attribute element displayed on the programmable user interface is detected as selected, switching the first interval between having the first display attribute and having the second display attribute and switching the first attribute element between presenting the first display state and presenting the second display state; and

generating a first description code corresponding to the first object and the second object according to the first display attribute or the second display attribute after switching the first interval between having the first display attribute and having the second display attribute and after switching the first attribute element between presenting the first display state and presenting the second display state, wherein:

the first object and the second object are arranged in a same row when the first interval has the first display attribute and a first display displaying the programmable user interface has a first width;

the first object and the second object are arranged in different rows when the first interval has the second display attribute and a second display displaying the programmable user interface has a second width; and

the second width is smaller than the first width.

2. The method according to claim 1 , wherein the programmable user interface further has a third object, and the method further comprises:

setting a second interval between the second object and the third object as having a third display attribute or a fourth display attribute;

displaying a second attribute element together with the first attribute element on the programmable user interface, wherein the second attribute element presents a third display state for representing the third display attribute or presents a fourth display state for representing the fourth display attribute;

detecting whether the second attribute element displayed on the programmable user interface is selected; and

when the second attribute element displayed on the programmable user interface is detected as selected, switching the second interval between having the third display attribute and having the fourth display attribute and switching the second attribute element between presenting the third display state and presenting the fourth display state, wherein:

the first object, the second object and the third object are arranged in the same row when the first interval has the first display attribute, the second interval has the fourth display attribute, and the first display displaying the programmable user interface has the first width; and

the first object is arranged in a row and the second object and the third object are arranged in another row when the first interval has the first display attribute, the second interval has the fourth display attribute, and the second display displaying the programmable user interface has the second width.

3. The method according to claim 2 , further comprising:

setting the first sub-block as having a fifth display attribute associated with a logical unit length of the first sub-block;

displaying a third attribute element together with the first sub-block on the programmable user interface, wherein the third attribute element presents a fifth display state for representing the fifth display attribute;

detecting whether the third attribute element displayed on the programmable user interface is selected;

when the third attribute element displayed on the programmable user interface is detected as selected, changing the fifth display attribute of the first sub-block to a sixth display attribute associated with the logical unit length of the first sub-block and changing the fifth display state presented by the third attribute element to a sixth display state, wherein the sixth display state is used to represent the sixth display attribute; and

generating a second description code corresponding to the first sub-block according to the sixth display attribute after changing the fifth display attribute of the first sub-block to the sixth display attribute associated with the logical unit length of the first sub-block.

4. The method according to claim 3 , wherein the step of cutting the grouping block into the first sub-block and the second sub-block further comprises:

detecting whether the first interval exists between the first object and the second object, wherein the first interval is defined by a first edge of the first object and a second edge of the second object, wherein:

when the first interval between the first object and the second object is detected, cutting the grouping block into the first sub-block and the second sub-block along at least one path in the first interval.

5. The method according to claim 4 , wherein the at least one path comprises a first path and a second path, the first path being adjacent to the first edge of the first object, the second path being adjacent to the second edge of the second object, and wherein the step of cutting the grouping block into the first sub-block and the second sub-block further comprises:

cutting the grouping block into the first sub-block, the second sub-block and a third sub-block along the first path and the second path, wherein the third sub-block is between the first sub-block and the second sub-block.

6. The method according to claim 3 , wherein when the first sub-block is set as having the fifth display attribute, the logical unit length of the first sub-block is fixed, and when the fifth display attribute of the first sub-block is changed to the sixth display attribute, the logical unit length of the first sub-block changes adaptively according to a length of a display displaying the programmable user interface; or

when the first sub-block is set as having the fifth display attribute, the logical unit length of the first sub-block changes adaptively according to the length of the display displaying the programmable user interface, and when the fifth display attribute of the first sub-block is changed to the sixth display attribute, the logical unit length of the first sub-block is fixed.

7. A system for generating a description code of a user interface, comprising:

a display module configured to display a programmable user interface having a first object and a second object;

a grouping module configured to group the first object and the second object to form a grouping block, wherein the first object and the second object are in the grouping block;

a cutting module configured to cut the grouping block into a first sub-block and a second sub-block, wherein the first object is in the first sub-block and the second object is in the second sub-block;

a setting module configured to set a first interval between the first object and the second object as having a first display attribute or a second display attribute, wherein the display module is further configured to display a first attribute element together with the first object and the second object on the programmable user interface, wherein the first attribute element presents a first display state for representing the first display attribute or presents a second display state for representing the second display attribute;

a first detection module configured to detect whether the first attribute element displayed on the programmable user interface is selected, wherein when the first detection module detects that the first attribute element displayed on the programmable user interface is selected, the first interval is switched between having the first display attribute and having the second display attribute, and the first attribute element is switched between presenting the first display state and presenting the second display state;

a description code generation module configured to generate a first description code corresponding to the first object and the second object according to the first display attribute or the second display attribute after the first interval is switched between having the first display attribute and having the second display attribute and after the first attribute element is switched between presenting the first display state and presenting the second display state, wherein:

the first object and the second object are arranged in a same row when the first interval has the first display attribute and a first display displaying the programmable user interface has a first width;

the first object and the second object are arranged in different rows when the first interval has the second display attribute and a second display displaying the programmable user interface has a second width; and

the second width is smaller than the first width.

8. The system according to claim 7 , wherein the programmable user interface further has a third object, and wherein:

the setting module is further configured to set a second interval between the second object and the third object as having a third display attribute or a fourth display attribute;

the display module is further configured to display a second attribute element together with the first attribute element on the programmable user interface, wherein the second attribute element presents a third display state for representing the third display attribute or presents a fourth display state for representing the fourth display attribute;

the first detection module is further configured to detect whether the second attribute element displayed on the programmable user interface is selected, wherein when the first detection module detects that the second attribute element displayed on the programmable user interface is selected, the second interval is switched between having the third display attribute and having the fourth display attribute, and the second attribute element is switched between presenting the third display state and presenting the fourth display state, wherein:

the first object, the second object and the third object are arranged in the same row when the first interval has the first display attribute, the second interval has the fourth display attribute, and the first display displaying the programmable user interface has the first width; and

the first object is arranged in a row and the second object and the third object are arranged in another row when the first interval has the first display attribute, the second interval has the fourth display attribute, and the second display displaying the programmable user interface has the second width.

9. The system according to claim 8 , wherein:

the setting module is further configured to set the first sub-block as having a fifth display attribute associated with a logic unit length of the first sub-block;

the display module is further configured to display a third attribute element together with the first sub-block on the programmable user interface, wherein the third attribute element presents a fifth display state for representing the fifth display attribute;

the first detection module is further configured to detect whether the third attribute element is selected, wherein when the first detection module detects that the third attribute element is selected, the setting module changes the fifth display attribute of the first sub-block to a sixth display attribute associated with the logic unit length of the first sub-block and changes the fifth display state presented by the third attribute element to a sixth display state, wherein the sixth display state is used to represent the sixth display attribute; and

the description code generation module is configured to generate a second description code corresponding to the first sub-block according to the sixth display attribute associated with the logic unit length of the first sub-block.

10. The system according to claim 9 , further comprising:

a second detection module configured to detect whether the first interval exists between the first object and the second object, wherein the first interval is defined by a first edge of the first object and a second edge of the second object, wherein:

when the second detection module detects the first interval between the first object and the second object, the cutting module is further configured to cut the grouping block into the first sub-block and the second sub-block along at least one path in the first interval.

11. The system according to claim 10 , wherein the at least one path comprises a first path and a second path, the first path being adjacent to the first edge of the first object, the second path being adjacent to the second edge of the second object, and wherein:

the cutting module is further configured to cut the grouping block into the first sub-block, the second sub-block and a third sub-block along the first path and the second path; and

the third sub-block is between the first sub-block and the second sub-block.

12. A non-transitory computer-readable storage medium for storing at least one program including a plurality of instructions that, when executed by at least one computer, generates a plurality of operations, wherein the plurality of operations comprises:

displaying a programmable user interface having a first object and a second object;

grouping the first object and the second object to form a grouping block, wherein the first object and the second object are in the grouping block;

cutting the grouping block into a first sub-block and a second sub-block, wherein the first object is in the first sub-block and the second object is in the second sub-block;

setting a first interval between the first object and the second object as having a first display attribute or a second display attribute;

displaying a first attribute element together with the first object and the second object on the programmable user interface, wherein the first attribute element presents a first display state for representing the first display attribute or presents a second display state for representing the second display attribute;

detecting whether the first attribute element displayed on the programmable user interface is selected;

when the first attribute element displayed on the programmable user interface is detected as selected, switching the first interval between having the first display attribute and having the second display attribute and switching the first attribute element between presenting the first display state and presenting the second display state; and

generating a first description code corresponding to the first object and the second object according to the first display attribute or the second display attribute after switching the first interval between having the first display attribute and having the second display attribute and after switching the first attribute element between presenting the first display state and presenting the second display state, wherein:

the first object and the second object are arranged in a same row when the first interval has the first display attribute and a first display displaying the programmable user interface has a first width;

the first object and the second object are arranged in different rows when the first interval has the second display attribute and a second display displaying the programmable user interface has a second width; and

the second width is smaller than the first width.

13. The non-transitory computer-readable storage medium according to claim 12 , wherein the programmable user interface further has a third object, and the plurality of operations further comprises:

setting a second interval between the second object and the third object as having a third display attribute or a fourth display attribute;

displaying a second attribute element together with the first attribute element on the programmable user interface, wherein the second attribute element presents a third display state for representing the third display attribute or presents a fourth display state for representing the fourth display attribute;

detecting whether the second attribute element displayed on the programmable user interface is selected; and

when the second attribute element displayed on the programmable user interface is detected as selected, switching the second interval between having the third display attribute and having the fourth display attribute and switching the second attribute element between presenting the third display state and presenting the fourth display state, wherein:

the first object, the second object and the third object are arranged in the same row when the first interval has the first display attribute, the second interval has the fourth display attribute, and the first display displaying the programmable user interface has the first width; and

the first object is arranged in a row and the second object and the third object are arranged in another row when the first interval has the first display attribute, the second interval has the fourth display attribute, and the second display displaying the programmable user interface has the second width.

14. The non-transitory computer-readable storage medium according to claim 13 , wherein the plurality of operations further comprises:

setting the first sub-block as having a fifth display attribute associated with a logical unit length of the first sub-block;

displaying a third attribute element together with the first sub-block on the programmable user interface, wherein the third attribute element presents a fifth display state for representing the fifth display attribute;

detecting whether the third attribute element displayed on the programmable user interface is selected;

when the third attribute element displayed on the programmable user interface is detected as selected, changing the fifth display attribute of the first sub-block to a sixth display attribute associated with the logical unit length of the first sub-block and changing the fifth display state presented by the third attribute element to a sixth display state, wherein the sixth display state is used to represent the sixth display attribute; and

generating a second description code corresponding to the first sub-block according to the sixth display attribute after changing the fifth display attribute of the first sub-block to the sixth display attribute associated with the logical unit length of the first sub-block.

15. The non-transitory computer-readable storage medium according to claim 14 , wherein the operation of cutting the grouping block into the first sub-block and the second sub-block further comprises:

detecting whether the first interval exists between the first object and the second object, wherein the first interval is defined by a first edge of the first object and a second edge of the second object, wherein:

when the first interval between the first object and the second object is detected, cutting the grouping block into the first sub-block and the second sub-block along at least one path in the first interval.

16. The non-transitory computer-readable storage medium according to claim 15 , wherein the at least one path comprises a first path and a second path, the first path being adjacent to the first edge of the first object, the second path being adjacent to the second edge of the second object, and wherein the operation of cutting the grouping block into the first sub-block and the second sub-block further comprises:

cutting the grouping block into the first sub-block, the second sub-block and a third sub-block along the first path and the second path, wherein the third sub-block is between the first sub-block and the second sub-block.