Artificial intelligence-based grid layout method, device, equipment, and storage medium

Abstract

The present application proposes an artificial intelligence-based grid layout method, device, electronic device and storage medium. The artificial intelligence-based grid layout method includes: reading the attribute value of the interface element according to the grid layout system to obtain a single-layer layout element, and the grid layout system is used to generate a grid layout page; expanding the attribute of the single-layer layout element according to a preset script to obtain a nested container element; dragging the interface element based on the nested container element to obtain a nested layout view; and proportionally scaling the interface element based on the nested layout view to obtain a complete grid layout. The present application transforms the single-layer hierarchy into a nested hierarchy, so that the interface elements can be freely dragged into or out of the container component. At the same time, the chart elements dragged in and out can be proportionally scaled according to the width of the sub-elements in the nested container, thereby improving the user's development efficiency of visual reports.

Description

Technical Field

[0001] The present application relates to the field of artificial intelligence technology, and in particular to an artificial intelligence-based grid layout method, device, electronic device, and storage medium. Background Art

[0002] Grid layout is a commonly used layout method for web pages. The grid layout divides the web page into rows and columns to divide the web page into multiple independent areas, making the web page layout neat and beautiful.

[0003] In the existing technology, visual reports all require grid layout to be constructed. However, common visual report development systems cannot support users to freely drag chart elements into and out of container components. For example, some report development pages that appear on the market, when users drag interface elements into the container, they cannot place the interface elements outside the container by dragging them out. They can only choose to delete the interface elements and reconfigure them, which brings great inconvenience to users. Summary of the Invention

[0004] In view of the above, it is necessary to propose an artificial intelligence-based grid layout method and related equipment to solve the technical problem of how to support users to freely drag interface elements into and out of container components. The related equipment includes an artificial intelligence-based grid layout device, an electronic device and a storage medium.

[0005] This application provides a grid layout method based on artificial intelligence, the method comprising:

[0006] Reading attribute values ​​of interface elements according to a grid layout system to obtain single-layer layout elements, wherein the grid layout system is used to generate a grid layout page;

[0007] Expanding the properties of the single-layer layout element according to a preset script to obtain a nested container element;

[0008] Dragging the interface element based on the nested container element to obtain a nested layout view;

[0009] The interface elements are scaled proportionally based on the nestable layout view to obtain a complete grid layout.

[0010] In this way, by transforming a single-layer hierarchy into a nested hierarchy, interface elements can be freely dragged into or out of container components. At the same time, the dragged chart elements can be scaled proportionally according to the width of the sub-elements in the container, thereby improving the user's development efficiency of visual reports.

[0011] In some embodiments, reading the attribute value of the interface element according to the grid layout system to obtain the single-layer layout element includes:

[0012] Draw the root layout according to the grid layout system and preset property values;

[0013] Configure the properties of multiple interface elements according to preset property values ​​to construct a configuration object array;

[0014] traversing the configuration object array to generate object layout elements according to a grid layout system;

[0015] Draw the object layout element to the root layout to obtain a single-layer layout element.

[0016] In this way, the initial root layout page can be quickly obtained based on the grid layout system, and multiple single-layer layout elements of the same level and without nesting relationships can be generated within the root layout, eliminating the need for manual operation to perform page layout, thereby improving page layout efficiency.

[0017] In some embodiments, the nested container element includes:

[0018] parentId, used to indicate the parent element ID of the single-layer layout element. If the single-layer layout element has no parent element, the corresponding parentId is empty;

[0019] isDragzone, used to indicate whether the single-layer layout element can be nested. If isDragzone is false, it indicates that the single-layer layout element cannot be nested. If isDragzone is true, it indicates that the single-layer layout element is a nested container element.

[0020] children, used to represent all child elements of the single-layer layout element, is an object array.

[0021] In this way, by setting the three extended properties, a nested container element can be generated, thereby supporting the page layout with a nested hierarchical structure, making it possible for the user to drag interface elements into and out of the container component in the subsequent process.

[0022] In some embodiments, dragging the interface element based on the nested container element to obtain a nested layout view includes:

[0023] Adding a class attribute to the HTML element generated corresponding to the nested container element according to a preset script to record the unique identifier of the nested container element;

[0024] Drag the interface element to the target container element to obtain the class attribute of the target container element;

[0025] The dragged interface element is added to the children object array of the target container element according to the class attribute of the target container element to obtain the nested layout view.

[0026] In this way, the unique identifier of the target container element can be determined through the class attribute, and thus the interface elements can be freely dragged into or out of the container component, effectively improving the efficiency of the user's page layout.

[0027] In some embodiments, dragging the interface element into a target container element to obtain a class attribute of the target container element includes:

[0028] When clicking the mouse to drag the interface element, set the CSS property of the dragged element to point-events:none so that the currently dragged element will not become the target object of the mouse event;

[0029] When the mouse is released, a mouse event is triggered to obtain the class attribute of the target container element through a callback function.

[0030] In this way, the element currently being dragged can be prevented from being called the target object of the mouse event, so that the class attribute of the target container element corresponding to the dragged element can be successfully obtained through the callback function.

[0031] In some embodiments, before scaling the interface elements proportionally based on the nestable layout view to obtain a complete grid layout, the method further includes:

[0032] Determine an operation type corresponding to the nested layout view, where the operation type includes a single-layer operation type and a nested operation type;

[0033] If the operation type is a single-layer operation type, directly scaling the interface element according to the layout information of the target container element;

[0034] If the operation type is a nested operation type, the interface element is delayed and called according to the layout information of the target container element.

[0035] In this way, by determining the operation type corresponding to the nested layout view, the interface elements can be scaled in different forms according to different operation types, thereby improving the efficiency of scaling the interface elements.

[0036] In some embodiments, if the operation type is a nested operation type, delaying the calling of the interface element according to the layout information of the target container element includes:

[0037] Counting the levels of the interface elements in the target container element to obtain a level sorting result;

[0038] Setting the delay call time layer by layer according to the hierarchical sorting results;

[0039] The interface elements of the corresponding level are scaled proportionally according to the delayed call time and the layout information of the target container element to obtain a complete grid layout.

[0040] In this way, by delaying the call layer by layer, it is possible to effectively prevent the proportional scaling error of the interface element caused by the layout information of the target container element when it is adjusted and changed, thereby improving the accuracy of proportional scaling of the interface element.

[0041] The present application also provides an artificial intelligence-based grid layout device, comprising:

[0042] a reading unit, configured to read attribute values ​​of interface elements according to a grid layout system to obtain single-layer layout elements, wherein the grid layout system is configured to generate a grid layout page;

[0043] An extension unit, configured to extend the properties of the single-layer layout element according to a preset script to obtain a nested container element;

[0044] A dragging unit, configured to drag the interface element based on the nested container element to obtain a nested layout view;

[0045] An acquisition unit is configured to scale the interface elements proportionally based on the nestable layout view to acquire a complete grid layout.

[0046] An embodiment of the present application further provides an electronic device, comprising:

[0047] a memory storing at least one instruction;

[0048] A processor executes instructions stored in the memory to implement the artificial intelligence-based grid layout method.

[0049] An embodiment of the present application also provides a computer-readable storage medium, in which at least one instruction is stored. The at least one instruction is executed by a processor in an electronic device to implement the artificial intelligence-based grid layout method. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] Figure 1 It is a flow chart of a preferred embodiment of the artificial intelligence-based grid layout method involved in this application.

[0051] Figure 2This is a flowchart of a preferred embodiment of the present application for reading the attribute values ​​of interface elements based on the grid layout system to obtain single-layer layout elements.

[0052] Figure 3 It is a flowchart of a preferred embodiment of the present application involving dragging the interface element based on the nested container element to obtain a nested layout view.

[0053] Figure 4 This is a functional module diagram of a preferred embodiment of the artificial intelligence-based grid layout device involved in this application.

[0054] Figure 5 It is a structural diagram of an electronic device of a preferred embodiment of the artificial intelligence-based grid layout method involved in this application.

[0055] Figure 6 This is the root layout drawing involved in this application.

[0056] Figure 7 This is a configuration and layout relationship diagram of Example 1 involved in this application.

[0057] Figure 8 This is a layout drawing of i1 involved in this application.

[0058] Figure 9 This is a layout drawing of i2 involved in this application.

[0059] Figure 10 This is a diagram of the configuration and layout relationship with nested levels of Example 2 involved in this application.

[0060] Figure 11 This is a schematic diagram of the drag operation scenario involved in this application.

[0061] Figure 12 This is a schematic diagram of dragging the interface element based on the nested container element involved in this application.

[0062] Figure 13 It is a schematic diagram of the delayed call involved in this application. DETAILED DESCRIPTION

[0063] In order to more clearly understand the purpose, features and advantages of the present application, the present application is described in detail below in conjunction with the accompanying drawings and specific embodiments. It should be noted that, in the case of no conflict, the embodiments of the present application and the features in the embodiments can be combined with each other. In the following description, many specific details are set forth to facilitate a full understanding of the present application. The embodiments described are only a part of the embodiments of the present application, rather than all of the embodiments.

[0064] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of the technical features being referred to. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the described features. Throughout the description of this application, "plurality" means two or more, unless otherwise specifically defined.

[0065] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those skilled in the art to which this application pertains. The terms used herein in the specification of this application are for the purpose of describing specific embodiments only and are not intended to limit this application. The term "and / or" as used herein includes any and all combinations of one or more of the associated listed items.

[0066] An embodiment of the present application provides an artificial intelligence-based grid layout method that can be applied to one or more electronic devices. An electronic device is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions. Its hardware includes but is not limited to a microprocessor, an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), a digital signal processor (DSP), an embedded device, etc.

[0067] An electronic device can be any electronic product that can interact with a user, such as a personal computer, tablet computer, smartphone, personal digital assistant (PDA), game console, Internet Protocol Television (IPTV), smart wearable device, etc.

[0068] The electronic device may also include a network device and / or a client device, wherein the network device includes, but is not limited to, a single network server, a server group consisting of multiple network servers, or a cloud based on cloud computing consisting of a large number of hosts or network servers.

[0069] The network where the electronic device is located includes but is not limited to the Internet, wide area network, metropolitan area network, local area network, virtual private network (VPN), etc.

[0070] like Figure 1The flowchart of the preferred embodiment of the grid layout method based on artificial intelligence of the present application is shown. According to different requirements, the order of the steps in the flowchart can be changed, and some steps can be omitted.

[0071] S10 , reading attribute values ​​of interface elements according to a grid layout system to obtain single-layer layout elements, wherein the grid layout system is used to generate a grid layout page.

[0072] In this optional embodiment, the interface elements refer to a series of elements that meet the user interaction requirements and are contained in the software or system interface that can meet the interaction requirements, and are referred to as elements for short.

[0073] In this optional embodiment, since there is a relationship of inclusion and being included between interface elements, in this scheme, the interface elements that can be included by other interface elements are called child elements; the interface elements that can include other interface elements are called parent elements; among them, a parent element can include multiple child elements, each child element has only one parent element, and the parent element and child element are relative concepts.

[0074] In this optional embodiment, a container refers to a collection of processes that isolates other resources of the system and has its own independent resource view. Containers can also be nested within each other. A container that can contain other containers is called a parent container, and a container contained by other containers is called a child container.

[0075] The first level of layout formed by the grid layout system is called the root layout, which is also the root container.

[0076] In an optional embodiment, the grid layout system may use the open source grid layout system react-grid-layout (RGL for short), which can generate a simple page layout by setting the number of layout columns, the height of each row, the layout configuration of all interface elements, etc., and can drag, scale, and recalculate coordinates of interface elements, etc., where the coordinate origin (0,0) of the layout is located in the upper left corner, the horizontal axis to the right is the x-axis, and the vertical axis downward is the y-axis.

[0077] Example 1: A drag layout is generated by react-grid-layout, with a width of 1200px. The layout is set to have 12 columns (cols is 12, that is, it is divided horizontally into 12 equal parts, and each adjacent x-coordinate point is horizontally spaced 100px apart), and the row height of each part is set to 30px (rowHeight is 30px, that is, each adjacent y-coordinate point is vertically spaced 30px apart). The spacing between elements is not considered, and element overlap is not allowed. If there is an element A (the configuration object is {x:0,y:0,w:3,h:2}, whose properties are the layout configuration properties agreed upon by RGL), the starting x coordinate is 0, the starting y coordinate is 0, the width fraction w is 3, and the height fraction h is 2, then element A in the layout is 3*(1200px / 12)=300px wide and 2*30px=60px high, located in the upper left corner of the layout. If the width of the drag zone becomes 1600px, the width of element A will increase to 3*(1600px / 12)=400px (the height and position remain unchanged). Suppose there is another element B (configuration object {x:3,y:0,w:3,h:2}) arranged in the same row and adjacent to A. If B is dragged to the coordinate position (0,0), it will overlap with A. RGL will then recalculate A's coordinate point and move it vertically downward to directly below B. The final configuration of A becomes {x:0,y:2,w:3,h:2}, and the configuration of B becomes {x:0,y:0,w:3,h:2}. In other words, all elements in the layout are horizontally tiled at the same level and vertically compacted upward, with no actual nesting relationship.

[0078] The above process has explained the meaning of the attributes x, y, w, and h in the interface element configuration. In this solution, the basic configuration object of each element is named BasicLayoutItem. In order to clearly identify each interface element, RGL also stipulates an attribute i, which can be any string or number as long as its uniqueness can be guaranteed. In this solution, the UUID algorithm can be used to generate the said i, where UUID is the abbreviation of Universally Unique Identifier, a software construction standard and also part of the Open Software Foundation in the field of distributed computing environments. Its purpose is to allow all elements in a distributed system to have unique identification information without the need for a central control terminal to specify the identification information.

[0079] See Figure 2 In an optional embodiment, reading the attribute value of the interface element according to the grid layout system to obtain the single-layer layout element includes:

[0080] S101: Draw a root layout according to a grid layout system and preset property values.

[0081] In this optional embodiment, for the sake of example, all HTML interface elements created in this article will use Tags. HTML, which stands for Hypertext Markup Language, is a markup language that includes a series of tags. These tags can unify the format of documents on the Internet and connect scattered Internet resources into a logical whole. It is one of the tags in HTML. In the process of making a web page, some independent logical parts can be divided out and placed in a In the tag, this The role of a label is equivalent to a container.

[0082] In this optional embodiment, if it is known that the height of each line is 10px, the CSS attribute position of the layout element (the way the element is positioned in the web page) is set to relative positioning (position:relative), and the position of the child element inside it is set to absolute positioning (position:absolute). Then, by setting the offset values ​​of top (the offset between the upper boundary of the element and the upper boundary of its nested container element) and left (the offset between the left boundary of the element and the left boundary of its nested container element), and then setting the values ​​of width (element width) and height (element height), the child element can be positioned in the correct position and with the correct specifications. The relative positioning means that the position of the document flow occupied by the element is retained, and the element itself is offset relative to its original position. The absolute positioning means that the element is separated from the document flow and does not occupy the position of the document flow. It can be understood as floating above the document flow and positioned relative to the previous parent element with positioning set.

[0083] like Figure 6 As shown, in this optional embodiment, the root layout is first drawn. For example, in Example 1, the root layout width is 1200px, the positioning method is relative positioning, and its height is temporarily set to 100 (depending on the requirements, this is just an example), that is, a div element is set, and its style attribute (CSS style declaration applied to this element) value is "width:1200px" (that is,<divstyle="position:relative;width:1200px;height:1000px;"> ).

[0084] S102: configuring properties of a plurality of interface elements according to preset property values ​​to construct a configuration object array.

[0085] In this optional embodiment, multiple interface elements configured according to preset attribute values ​​can be combined into a configuration object array, and this array can be passed to the configured RGL to obtain a simple layout, in which all current interface elements are at the only first level. For example, in Example 2, two interface elements "i1{"i":"i1","x":0,"y":0,"w":6,"h":2} and "i2"{"i":"i2","x":6,"y":0,"w":6,"h":4} are now configured, and they are placed in an array and passed to RGL. Through the set configuration (the number of columns cols is 12, and the row height of each row is 10px), the corresponding layout can be obtained, as shown in the following example. Figure 7 shown.

[0086] S103: traverse the configuration object array according to the grid layout system to generate object layout elements.

[0087] like Figure 8 As shown, in this optional embodiment, the configuration object array is traversed, for example, the first configuration object {"i":"i1","x":0,"y":0,"w":6,"h":2} in Example 2 is taken out, and RGL calculates the final layout information of "i1" as top is 0px, left is 0px, width is 600px, and height is 20px. Then, a div element with a width of 600px and a height of 20px is generated on the web page, which is close to the left and top boundaries of the layout (i.e. <div style＝"position:absolute；top:0；left:0；width:600px；height:20px；"> ).

[0088] S104: Draw the object layout element to the root layout to obtain a single-layer layout element.

[0089] In this optional embodiment, the obtained object layout elements are drawn in the root layout according to the grid layout system until all the object layout elements are drawn. For example, as in Example 1, the next configuration object "i2" {"i":"i2","x":6,"y":0,"w":6,"h":4} is processed. Similarly, a second div element (i.e., div element) with a width of 600px and a height of 40px is generated on the final web page, 600px to the right of the left border of the layout and close to the top border of the layout. <div style＝"position:absolute；top:0；left:600px；width:600px；height:40px；"> ),like Figure 9 shown.

[0090] In this optional embodiment, the code structure of the above process is as follows (pseudo-code, only showing a simple structure):

[0091] <Root layout element>

[0092] <i1 element / >

[0093] <i2 element / >

[0094] < / Root layout element>

[0095] In this optional embodiment, each layout element obtained by finally traversing the configuration object array and performing drawing is used as the single-layer layout element, and the single-layer layout element is an interface element that is initially drawn and does not include sub-elements.

[0096] In this way, the initial root layout page can be quickly obtained according to the grid layout system, and at the same time, multiple single-layer layout elements at the same level and without nested relationships are generated within the root layout, eliminating the need for manual page layout operations, thereby improving the efficiency of page layout.

[0097] S11. Expand the attributes of the single-layer layout element according to a preset script to obtain a nested container element.

[0098] In this optional embodiment, the BasicLayoutItem of the single-layer layout element is further expanded into a nested container element named LayoutItem according to a preset script. The nested container element LayoutItem has added the following three attributes, including:

[0099] parentId, which is used to represent the ID of the parent element of the single-layer layout element, denoted by i. If the single-layer layout element has no parent element, the corresponding parentId is empty. If the single-layer layout element has a parent element, the parentId should take the ID of its parent element as the unique identifier;

[0100] isDragzone, which is used to represent whether the single-layer layout element can be nested. If isDragzone is false, it means that the single-layer layout element cannot be nested. If isDragzone is true, it means that the single-layer layout element is a nested container element;

[0101] children, which is used to represent all the sub-elements of the single-layer layout element and is an array of LayoutItem objects.

[0102] In this optional embodiment, since the three newly added attributes are custom, RGL will not process them. Therefore, the three newly added attributes can be judged through a preset script. When isDragzone is true, it means that this interface element is a container that can nest other child elements. It is necessary to recursively call RGL for the children configuration of this type of element to generate its sub-layout. Among them, the attribute value of isDragzone can be preset.

[0103] In this optional embodiment, based on Example 2 above, the "i2” element is transformed into a nested container element as Example 3. Specifically, add the isDragzone attribute with a value of true to "i2”. It contains two child elements, "i2-1” {"i": "i2-1", "x": 0, "y": 0, "w": 6, "h": 2, "parentId": "i2"} and "i2-2” {"i": "i2-2", "x": 6, "y": 0, "w": 6, "h": 4, "parentId": "i2"}. Place these two child elements in an array and assign it to the children attribute. Then, the first-level configurations of "i1” and "i2” will generate the first-level layout. Since the isDragzone attribute of "i2” is true and children has a value, the second-level call to RGL is recursively performed, and the values of children are traversed to generate the second-level layout, as Figure 10 shown.

[0104] In this optional embodiment, the final code structure is as follows (pseudo-code, only showing a simple structure):

[0105] <Root layout element>

[0106] <i1 element / >

[0107] <i2 layout element>

[0108] <i2-1 element / >

[0109] <i2-2 element / >

[0110] < / i2 layout element>

[0111] < / Root layout element>

[0112] So far, the extended LayoutItem data structure already supports and can reflect the nested hierarchical structure. In this solution, the elements that can perform nested operations are used as the nested container elements.

[0113] In this way, by setting the three extended properties, a nested container element can be generated, thereby supporting the page layout with a nested hierarchical structure, making it possible for the user to drag interface elements into and out of the container component in the subsequent process.

[0114] S12: Drag the interface element based on the nested container element to obtain a nested layout view.

[0115] like Figure 11 As shown, in this optional embodiment, there are three scenarios when dragging the interface element, namely: dragging the nested container element vertically; dragging it out to the root container component (i.e., the first-level layout); dragging it into an adjacent nested container element or dragging it into nested container elements of different levels.

[0116] like Figure 3 As shown, in an optional embodiment, dragging the interface element based on the nested container element to obtain a nested layout view includes:

[0117] S121 , adding a class attribute to an HTML element generated corresponding to the nested container element according to a preset script to record a unique identifier of the nested container element.

[0118] In this optional embodiment, a corresponding HTML element is generated for the nested container element according to a preset script, that is, a layout element corresponding to the nested container element is generated in an HTML layout page, and this layout element is used as the HTML element corresponding to the nested container element.

[0119] In this optional embodiment, the value of the global attribute class is a space-separated list of element class names, which allows CSS and Javascript to select and access specific elements through class selectors or DOM methods (document.getElementsByClassName).

[0120] For example, let class = "dragzone-i2" ("dragzone-" plus the value of the unique identifier i). Then, when you need to find a nested container element later, you can use the class attribute to read whether the current element contains "dragzone-" + i, so as to determine the value of the unique identifier i.

[0121] S122: Drag the interface element into a target container element to obtain a class attribute of the target container element.

[0122] In this optional embodiment, the interface element is dragged into a nested container element, and the nested container element that needs to contain the interface element is used as the target container element.

[0123] In this optional embodiment, when the left mouse button is clicked and dragged, the CSS (style sheet language, used to set the style and layout of the web page) attribute point-events:none of the dragged element is set. This attribute setting prevents the currently dragged element from becoming the target object of the mouse event, but instead obtains the class attribute of the target container element corresponding to the dragged element.

[0124] In this optional embodiment, when the mouse is released, the native mouseup event of the Document Object Model (DOM) can be triggered (a listening event triggered when the left mouse button is released). This event will pass the event object of the current target container element (containing the element's own properties and callable native methods) through the callback function, and obtain the property event.target.className (that is, the class attribute previously set for the HTML element) from it.

[0125] In this optional embodiment, DOM connects web pages with scripts or programming languages. DOM uses a logical tree to represent a document. The end point of each branch of the tree is a node, and each node contains objects. DOM methods can operate on this tree in specific ways, using these methods to change the structure, style or content of the document. Nodes can be associated with event handlers, and once an event is triggered, those event handlers will be executed. The mouse events used in this solution are the most commonly used event types in Web development.

[0126] S123: Add the dragged interface element to the children object array of the target container element according to the class attribute of the target container element to obtain the nested layout view.

[0127] In this optional embodiment, if the obtained class attribute value contains "dragzone-" (such as "dragzone-i2"), then the remaining "i2" is cut off, which is the unique identifier i of the target container element, and then the layout information of the dragged element is added to the children array of the target container element, and the layout information of the dragged element in the root container is deleted, such as Figure 12 shown.

[0128] The code structure of the above process consists of:

[0129] <root layout element>

[0130] <i1 element / >

[0131] <i2 layout element>

[0132] < / i2 layout element>

[0133] <i3 element / >

[0134] < / root layout element>

[0135] Converted to:

[0136] <root layout element>

[0137] <i1 element / >

[0138] <i2 layout element>

[0139] <i3 element / >

[0140] < / i2 layout element>

[0141] < / root layout element>

[0142] In this optional embodiment, Figure 12 It demonstrates the situation when the scenario is vertical dragging into a nested container element, that is, dragging i3 into i2, dragging out to the root container component, and the scenarios of dragging into an adjacent nested container element or dragging into a nested container element at a different level are the same as the process when the scenario is vertical dragging into a nested container element. Among them, in the scenario of dragging out to the root container component, since the root container has no parent element, the element attribute class of the root container is set to "root-dragzone". When the value of event.target.className of the target container element contains "root-dragzone", it means that the current target container element is the root container element. Then, only need to remove the layout of this dragged element from the original nested container element and add it to the layout of the root container.

[0143] In this way, the unique identifier of the target container element can be determined through the class attribute, and thus the interface element can be freely dragged into or out of the container component, effectively improving the efficiency of the user to layout the page.

[0144] S13, Based on the nestable layout view, scale the interface element proportionally to obtain a complete grid layout.

[0145] In this optional embodiment, taking the width of each layout element as an example, since RGL is a grid layout system, the width of each layout element is the number of parts that account for the layout width. Therefore, when the layout width changes, the width of each layout element will definitely change accordingly.

[0146] In this optional embodiment, the operation type corresponding to the nested layout view can be determined based on the corresponding scene during dragging, and the operation type includes a single-layer operation type and a nested operation type; if the operation type is a single-layer operation type, the interface element is directly scaled according to the layout information of the target container element; if the operation type is a nested operation type, the interface element is delayed and called according to the layout information of the target container element.

[0147] In this optional embodiment, delaying the calling of the interface elements according to the layout information of the target container element includes: counting the levels of the interface elements in the target container element to obtain a hierarchical sorting result; setting the delayed calling time layer by layer according to the hierarchical sorting result; and proportionally scaling the interface elements of the corresponding level according to the delayed calling time and the layout information of the target container element to obtain a complete grid layout.

[0148] In this optional embodiment, when the corresponding scenario during dragging is vertically dragging into a nested container element, since the width of the target container is fixed at this time, the new width can be directly calculated based on the proportion of w in the layout information (RGL already supports this).

[0149] In this optional embodiment, when the corresponding scenario during dragging is dragging out to the root container component and dragging into an adjacent nested container element or dragging into a nested container element of a different level, there is a situation where the child element cannot immediately obtain the final width of the parent element until the width of the parent element is adjusted (for example, when dragging the browser for rapid and frequent zooming, the moment it suddenly stops, the adjustment of the parent element and the child element is triggered at the same time, and the width of the parent element may still be in the process of adjusting from 600px to 700px. Then, the parent element obtained by the child element at this time may not be the final value of 700px we expect, and naturally the accurate child element width cannot be obtained).

[0150] In this optional embodiment, the width adjustment of the sub-element can be delayed according to the number of nested layers (window.setTimeout can be used to set the timer, assuming that the time interval for each layer is 20ms, and the incoming callback is triggered after the expiration). No delay timer is set under the root layout, and the sub-element width adjustment can be executed immediately. The level of the first-layer sub-layout element is 1. A timer is set after 20ms to adjust its internal sub-elements. The level of the second-layer sub-layout element is 2. A timer is set after 40ms to adjust its internal sub-elements. And so on. An attribute layer is extended to LayoutItem to record the level of the current element. Then the timer delay calculation formula is layer*20ms.

[0151] For example, based on Example 2, the root layout width was originally 1200px and is now widened to 1600px. "i1" and "i2" are both elements under the first-level layout, and their layer value is 1. However, since they are child elements under the root layout, their widths are immediately recalculated, and the result is 6*(1600px / 12)=800px. The width of the child elements of the first layer is adjusted (i.e., style="width:800px;…"); "i2-1" and "i2-2" are in the layout of the "i2" element, and the layer value of "i2" is 1, and the width has become 800px. Therefore, after 20ms, the widths of "i2-1" and "i2-2" are recalculated at the same time, and the result is 6*(800px / 12)=400px. The child elements of the second layer are also adjusted (i.e., style="width:400px;…"). Figure 13 shown.

[0152] In this optional embodiment, the scaling process of other layout information of the interface elements is consistent with the scaling process of the width. Finally, based on react-grid-layout, a container with a hierarchical nesting relationship and supporting the free dragging and unloading of elements is modified and implemented.

[0153] In this way, by delaying the call layer by layer, it is possible to effectively prevent the proportional scaling error of the interface element caused by the layout information of the target container element when it is adjusted and changed, thereby improving the accuracy of proportional scaling of the interface element.

[0154] See Figure 4 , Figure 4 This is a functional block diagram of a preferred embodiment of the artificial intelligence-based grid layout device of the present application. The artificial intelligence-based grid layout device 11 includes a reading unit 110, an expansion unit 111, a dragging unit 112, and an acquisition unit 113. The modules / units referred to herein are a series of computer-readable instruction segments that can be executed by the processor 13 and perform a fixed function, and are stored in the memory 12. In this embodiment, the functions of each module / unit will be described in detail in subsequent embodiments.

[0155] In an optional embodiment, the reading unit 110 is configured to read the attribute values ​​of the interface elements according to a grid layout system to obtain the single-layer layout elements, wherein the grid layout system is configured to generate the grid layout page.

[0156] In an optional embodiment, the grid layout system may use the open source grid layout system react-grid-layout (RGL for short), which can generate a simple page layout by setting the number of layout columns, the height of each row, the layout configuration of all interface elements, etc., and can drag, scale, and recalculate coordinates of interface elements, etc., where the coordinate origin (0,0) of the layout is located in the upper left corner, the horizontal axis to the right is the x-axis, and the vertical axis downward is the y-axis.

[0157] Example 1: A drag layout is generated by react-grid-layout, with a width of 1200px. The layout is set to have 12 columns (cols is 12, that is, it is divided horizontally into 12 equal parts, and each adjacent x-coordinate point is horizontally spaced 100px apart), and the row height of each part is set to 30px (rowHeight is 30px, that is, each adjacent y-coordinate point is vertically spaced 30px apart). The spacing between elements is not considered, and element overlap is not allowed. If there is an element A (the configuration object is {x:0,y:0,w:3,h:2}, whose properties are the layout configuration properties agreed upon by RGL), the starting x coordinate is 0, the starting y coordinate is 0, the width fraction w is 3, and the height fraction h is 2, then element A in the layout is 3*(1200px / 12)=300px wide and 2*30px=60px high, located in the upper left corner of the layout. If the width of the drag zone becomes 1600px, the width of element A will increase to 3*(1600px / 12)=400px (the height and position remain unchanged). Suppose there is another element B (configuration object {x:3,y:0,w:3,h:2}) arranged in the same row and adjacent to A. If B is dragged to the coordinate position (0,0), it will overlap with A. RGL will then recalculate A's coordinate point and move it vertically downward to directly below B. The final configuration of A becomes {x:0,y:2,w:3,h:2}, and the configuration of B becomes {x:0,y:0,w:3,h:2}. In other words, all elements in the layout are horizontally tiled at the same level and vertically compacted upward, with no actual nesting relationship.

[0158] The above process has explained the meaning of the attributes x, y, w, and h in the interface element configuration. In this solution, the basic configuration object of each element is named BasicLayoutItem. In order to clearly identify each interface element, RGL also stipulates an attribute i, which can be any string or number as long as its uniqueness can be guaranteed. In this solution, the UUID algorithm can be used to generate the said i, where UUID is the abbreviation of Universally Unique Identifier, a software construction standard and also part of the Open Software Foundation in the field of distributed computing environments. Its purpose is to allow all elements in a distributed system to have unique identification information without the need for a central control terminal to specify the identification information.

[0159] In an optional embodiment, the step of reading the attribute value of the interface element according to the grid layout system to obtain the single-layer layout element includes:

[0160] Draw the root layout according to the grid layout system and preset property values;

[0161] Configure the properties of multiple interface elements according to preset property values ​​to construct a configuration object array;

[0162] traversing the configuration object array to generate object layout elements according to a grid layout system;

[0163] Draw the object layout element to the root layout to obtain a single-layer layout element.

[0164] In this optional embodiment, for the sake of example, all HTML interface elements created in this article will use Tags. HTML, which stands for Hypertext Markup Language, is a markup language that includes a series of tags. These tags can unify the format of documents on the Internet and connect scattered Internet resources into a logical whole. It is one of the tags in HTML. In the process of making a web page, some independent logical parts can be divided out and placed in a In the label, this The role of a label is equivalent to a container.

[0165] In this optional embodiment, if it is known that the height of each line is 10px, the CSS attribute position of the layout element (the way the element is positioned in the web page) is set to relative positioning (position:relative), and the position of the child element inside it is set to absolute positioning (position:absolute). Then, by setting the offset values ​​of top (the offset between the upper boundary of the element and the upper boundary of its nested container element) and left (the offset between the left boundary of the element and the left boundary of its nested container element), and then setting the values ​​of width (element width) and height (element height), the child element can be positioned in the correct position and with the correct specifications. The relative positioning means that the position of the document flow occupied by the element is retained, and the element itself is offset relative to its original position. The absolute positioning means that the element is separated from the document flow and does not occupy the position of the document flow. It can be understood as floating above the document flow and positioned relative to the previous parent element with positioning set.

[0166] like Figure 6 As shown, in this optional embodiment, the root layout is first drawn. For example, in Example 1, the root layout width is 1200px, the positioning method is relative positioning, and its height is temporarily set to 100 (depending on the requirements, this is just an example), that is, a div element is set, and its style attribute (CSS style declaration applied to this element) value is "width:1200px" (that is,<divstyle="position:relative;width:1200px;height:1000px;"> )。

[0167] In this optional embodiment, multiple interface elements configured according to preset attribute values can be combined into an array of configuration objects. Passing this array to the configured RGL can obtain a simple layout, and all current interface elements are at a unique first level. For example, in Example 2, now configure two interface elements "i1" {"i": "i1", "x": 0, "y": 0, "w": 6, "h": 2}, "i2" {"i": "i2", "x": 6, "y": 0, "w": 6, "h": 4}, place them in the array and pass it to RGL. Through the set configuration (the number of columns cols is 12, and the height of each row rowHeight is 10px), the corresponding layout can be obtained, as Figure 7 shown.

[0168] As Figure 8 shown, in this optional embodiment, traverse the array of configuration objects. For example, take the first configuration object {"i": "i1", "x": 0, "y": 0, "w": 6, "h": 2} in Example 2. RGL calculates that the final layout information of "i1" is top: 0px, left: 0px, width: 600px, height: 20px. Then a div element with a width of 600px, a height of 20px, and紧贴布局左边界线和上边界的 (i.e., <div style＝"position:absolute；top:0；left:0；width:600px；height:20px；"> ) is generated on the web page.

[0169] In this optional embodiment, the obtained object layout elements are drawn in the root layout according to the grid layout system until all object layout elements are drawn. Exemplarily, like processing the next configuration object "i2" {"i": "i2", "x": 6, "y": 0, "w": 6, "h": 4} in Example 1. Similarly, a second div element with a width of 600px, a height of 40px, located 600px to the right of the left boundary of the layout and紧贴布局上边界的 (i.e., <div style＝"position:absolute；top:0；left:600px；width:600px；height:40px；"> ) is generated on the web page, as Figure 9 shown.

[0170] In this optional embodiment, the code structure of the above process is as follows (pseudo-code, only showing a simple structure):

[0171] <Root layout element>

[0172] <i1 element / >

[0173] <i2 element / >

[0174] < / Root layout element>

[0175] In this optional embodiment, each layout element finally obtained by traversing the configuration object array and drawing is used as the single-layer layout element, and the single-layer layout element is the interface element obtained by initial drawing and does not include sub-elements.

[0176] In an optional embodiment, the extending unit 111 is configured to extend the attributes of the single-layer layout element according to a preset script to obtain a nested container element.

[0177] In this optional embodiment, the single-layer layout element BasicLayoutItem is further expanded into a nested container element named LayoutItem according to a preset script. The nested container element LayoutItem has the following three new attributes, including:

[0178] parentId, used to indicate the parent element ID of the single-layer layout element, represented by i. If the single-layer layout element has no parent element, the corresponding parentId is empty. If the single-layer layout element has a parent element, parentId should take the ID of the parent element as a unique identifier;

[0179] isDragzone, used to indicate whether the single-layer layout element can be nested. If isDragzone is false, it indicates that the single-layer layout element cannot be nested. If isDragzone is true, it indicates that the single-layer layout element is a nested container element.

[0180] children, which is an array of LayoutItem objects and is used to represent all child elements of the single-layer layout element.

[0181] In this optional embodiment, since the three newly added attributes are customized, RGL will not process them. Therefore, the three newly added attributes can be judged by a preset script. If isDragzone is true, it means that the interface element is a container that can nest other child elements. It is necessary to recursively call RGL for the children configuration of this type of element to generate its child layout, where the attribute value of isDragzone can be preset.

[0182] In this optional embodiment, based on Example 2 above, the "i2" element is transformed into a nested container element as Example 3. Specifically, the "isDragzone" attribute is added to "i2" with a value of true. It contains two child elements, "i2-1" {"i": "i2-1", "x": 0, "y": 0, "w": 6, "h": 2, "parentId": "i2"} and "i2-2" {"i": "i2-2", "x": 6, "y": 0, "w": 6, "h": 4, "parentId": "i2"}. These two child elements are placed in an array and assigned to the "children" attribute. Then, the first-level configurations of "i1" and "i2" will generate the first-level layout. Since the "isDragzone" attribute of "i2" is true and "children" has a value, the second-level RGL is called recursively, and the values of "children" are traversed to generate the second-level layout, as Figure 10 shown.

[0183] In this optional embodiment, the final code structure is as follows (pseudo-code, only showing the simple structure):

[0184] <Root layout element>

[0185] <i1 element / >

[0186] <i2 layout element>

[0187] <i2-1 element / >

[0188] <i2-2 element / >

[0189] < / i2 layout element>

[0190] < / Root layout element>

[0191] So far, the extended LayoutItem data structure already supports and can reflect the nested hierarchical structure. In this solution, the elements that can perform nested operations are used as the nested container elements.

[0192] In an optional embodiment, the generation unit 112 is used to drag the interface elements based on the nested container elements to obtain a nestable layout view.

[0193] In an optional embodiment, the dragging of the interface elements based on the nested container elements to obtain a nestable layout view includes:

[0194] Adding a class attribute to the HTML element corresponding to the nested container element according to a preset script to record the unique identifier of the nested container element;

[0195] Drag the interface element to the target container element to obtain the class attribute of the target container element;

[0196] The dragged interface element is added to the children object array of the target container element according to the class attribute of the target container element to obtain the nested layout view.

[0197] like Figure 11 As shown, in this optional embodiment, there are three scenarios when dragging the interface element, namely: dragging the nested container element vertically; dragging it out to the root container component (i.e., the first-level layout); dragging it into an adjacent nested container element or dragging it into nested container elements of different levels.

[0198] In this optional embodiment, a corresponding HTML element is generated for the nested container element according to a preset script, that is, a layout element corresponding to the nested container element is generated in an HTML layout page, and this layout element is used as the HTML element corresponding to the nested container element.

[0199] In this optional embodiment, the value of the global attribute class is a space-separated list of element class names, which allows CSS and Javascript to select and access specific elements through class selectors or DOM methods (document.getElementsByClassName).

[0200] For example, let class = "dragzone-i2" ("dragzone-" plus the value of the unique identifier i). Then, when you need to find a nested container element later, you can use the class attribute to read whether the current element contains "dragzone-" + i, so as to determine the value of the unique identifier i.

[0201] In this optional embodiment, the interface element is dragged into a nested container element, and the nested container element that needs to contain the interface element is used as the target container element.

[0202] In this optional embodiment, when the left mouse button is clicked and dragged, the CSS (style sheet language, used to set the style and layout of the web page) attribute point-events:none of the dragged element is set. This attribute setting prevents the currently dragged element from becoming the target object of the mouse event, but instead obtains the class attribute of the target container element corresponding to the dragged element.

[0203] In this optional embodiment, when the mouse is released, the native mouseup event of the Document Object Model (DOM) can be triggered (a listening event triggered when the left mouse button is released). This event passes the event object of the current drop target container element (including the element's own attributes and callable native methods) through a callback function, and the property event.target.className (i.e., the class attribute previously set for the HTML element) is obtained from it.

[0204] In this optional embodiment, the DOM connects the web page with a script or programming language. The DOM represents a document with a logical tree, and the end point of each branch of the tree is a node, and each node contains objects. The methods of the DOM can operate on this tree in a specific way, and these methods can change the structure, style, or content of the document. Nodes can be associated with event handlers, and once an event is triggered, those event handlers will be executed. The mouse events used in this solution are the most commonly used event types in web development.

[0205] In this optional embodiment, if the obtained class attribute value contains "dragzone-" (such as "dragzone-i2"), then "dragzone-" is intercepted and the remaining "i2" is obtained. This is the unique identifier i of the target container element. Then, the layout information of the dragged element is added to the children array of the target container element, and the layout information of the dragged element in the root container is deleted, as Figure 12 shown.

[0206] The code structure of the above process consists of:

[0207] <Root layout element>

[0208] <i1 element / >

[0209] <i2 layout element>

[0210] < / i2 layout element>

[0211] <i3 element / >

[0212] < / Root layout element>

[0213] is converted to:

[0214] <Root layout element>

[0215] <i1 element / >

[0216] <i2 layout element>

[0217] <i3 element / >

[0218] < / i2 layout element>

[0219] < / root layout element>

[0220] In this optional embodiment, Figure 12 The situation when the scenario is vertically dragging into a nested container element is demonstrated. That is, dragging i3 into i2, dragging out to the root container component, and the scenarios of dragging into an adjacent nested container element or dragging into a nested container element at a different level are the same as the process when the scenario is vertically dragging into a nested container element. Among them, in the scenario of dragging out to the root container component, since the root container has no parent element, the element attribute class of the root container is set to "root - dragzone". When the value of event.target.className of the target container element contains "root - dragzone", it indicates that the current target container is the root. Then, only need to remove the layout of the dragged element from the original nested container element and add it to the layout of the root container.

[0221] In an optional embodiment, the determination unit 113 is used to perform proportional scaling on the interface element based on the nestable layout view to obtain a complete grid layout.

[0222] In this optional embodiment, taking the width of each layout element as an example, since RGL is a grid layout system, the width of each layout element is the number of parts that account for the layout width. So when the layout width changes, the width of each layout element will definitely change accordingly. [[ID=1十七]]

[0223] In this optional embodiment, the operation type corresponding to the nestable layout view can be determined according to the scenario during dragging. The operation type includes a single - layer operation type and a nested operation type. If the operation type is a single - layer operation type, the interface element is directly scaled according to the layout information of the target container element. If the operation type is a nested operation type, a delayed call is made to the interface element according to the layout information of the target container element.

[0224] In this optional embodiment, making a delayed call to the interface element according to the layout information of the target container element includes: counting the levels of the interface element in the target container element to obtain a level sorting result; setting the delayed call time layer by layer according to the level sorting result; proportionally scaling the interface element at the corresponding level according to the delayed call time and the layout information of the target container element to obtain a complete grid layout.

[0225] In this optional embodiment, when the scenario during dragging is vertically dragging into a nested container element, since the width of the target container is fixed at this time, the new width can be directly calculated according to the number of parts of the w ratio in the layout information (RGL already supports this).

[0226] In this optional embodiment, when the corresponding scenario during dragging is dragging out to the root container component and dragging into an adjacent nested container element or dragging into a nested container element of a different level, there is a situation where the child element cannot immediately obtain the final width of the parent element until the width of the parent element is adjusted (for example, when dragging the browser for rapid and frequent zooming, the moment it suddenly stops, the adjustment of the parent element and the child element is triggered at the same time, and the width of the parent element may still be in the process of adjusting from 600px to 700px. Then, the parent element obtained by the child element at this time may not be the final value of 700px we expect, and naturally the accurate child element width cannot be obtained).

[0227] In this optional embodiment, the width adjustment of the sub-element can be delayed according to the number of nested layers (window.setTimeout can be used to set the timer, assuming that the time interval for each layer is 20ms, and the incoming callback is triggered after the expiration). No delay timer is set under the root layout, and the sub-element width adjustment can be executed immediately. The level of the first-layer sub-layout element is 1. A timer is set after 20ms to adjust its internal sub-elements. The level of the second-layer sub-layout element is 2. A timer is set after 40ms to adjust its internal sub-elements. And so on. An attribute layer is extended to LayoutItem to record the level of the current element. Then the timer delay calculation formula is layer*20ms.

[0228] For example, based on Example 2, the root layout width was originally 1200px and is now widened to 1600px. "i1" and "i2" are both elements under the first-level layout, and their layer value is 1. However, since they are child elements under the root layout, their widths are immediately recalculated, and the result is 6*(1600px / 12)=800px. The width of the child elements of the first layer is adjusted (i.e., style="width:800px;…"); "i2-1" and "i2-2" are in the layout of the "i2" element, and the layer value of "i2" is 1, and the width has become 800px. Therefore, after 20ms, the widths of "i2-1" and "i2-2" are recalculated at the same time, and the result is 6*(800px / 12)=400px. The child elements of the second layer are also adjusted (i.e., style="width:400px;…"). Figure 13 shown.

[0229] In this optional embodiment, the scaling process of other layout information of the interface elements is consistent with the scaling process of the width. Finally, based on react-grid-layout, a container with a hierarchical nesting relationship and supporting the free dragging and unloading of elements is modified and implemented.

[0230] It can be seen from the above technical solution that the present application can transform a single-layer hierarchy into a nested hierarchy, so that interface elements can be freely dragged into or out of a container component. At the same time, the dragged chart elements can be scaled proportionally according to the width of the sub-elements in the container, thereby improving the user's development efficiency of visual reports.

[0231] See Figure 5 , is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. Electronic device 1 includes memory 12 and processor 13. Memory 12 is used to store computer-readable instructions, and processor 13 is used to execute the computer-readable instructions stored in the memory to implement the artificial intelligence-based grid layout method described in any of the above embodiments.

[0232] In an optional embodiment, the electronic device 1 further includes a bus, a computer program stored in the memory 12 and executable on the processor 13 , such as an artificial intelligence-based grid layout program.

[0233] Figure 5 Only the electronic device 1 having the memory 12 and the processor 13 is shown. It can be understood by those skilled in the art that Figure 5 The structure shown does not constitute a limitation on the electronic device 1 , and the electronic device 1 may include fewer or more components than shown in the figure, or combine certain components, or arrange the components differently.

[0234] Combine Figure 1 The memory 12 in the electronic device 1 stores a plurality of computer-readable instructions to implement a grid layout method based on artificial intelligence, and the processor 13 can execute the plurality of instructions to implement:

[0235] Reading attribute values ​​of interface elements according to a grid layout system to obtain single-layer layout elements, wherein the grid layout system is used to generate a grid layout page;

[0236] Expanding the properties of the single-layer layout element according to a preset script to obtain a nested container element;

[0237] Dragging the interface element based on the nested container element to obtain a nested layout view;

[0238] The interface elements are scaled proportionally based on the nestable layout view to obtain a complete grid layout.

[0239] Specifically, the specific implementation method of the processor 13 for the above instructions can refer to Figure 1 The description of the relevant steps in the corresponding embodiments will not be repeated here.

[0240] Those skilled in the art will understand that the schematic diagram is merely an example of the electronic device 1 and does not constitute a limitation on the electronic device 1. The electronic device 1 may have a bus structure or a star structure. The electronic device 1 may also include more or less other hardware or software than shown in the figure, or a different arrangement of components. For example, the electronic device 1 may also include input and output devices, network access devices, etc.

[0241] It should be noted that the electronic device 1 is only an example, and other existing or future electronic products that are suitable for this application should also be included in the scope of protection of this application and incorporated herein by reference.

[0242] Among them, the memory 12 includes at least one type of readable storage medium, and the readable storage medium can be non-volatile or volatile. The readable storage medium includes flash memory, mobile hard disk, multimedia card, card-type memory (for example: SD or DX memory, etc.), magnetic memory, disk, optical disk, etc. In some embodiments, the memory 12 can be an internal storage unit of the electronic device 1, such as a mobile hard disk of the electronic device 1. In other embodiments, the memory 12 can also be an external storage device of the electronic device 1, such as a plug-in mobile hard disk, smart memory card (Smart Media Card, SMC), secure digital (Secure Digital, SD) card, flash card (Flash Card), etc. equipped on the electronic device 1. The memory 12 can not only be used to store application software and various types of data installed on the electronic device 1, such as the code of the grid layout program based on artificial intelligence, but can also be used to temporarily store data that has been output or is to be output.

[0243] In some embodiments, the processor 13 may be comprised of an integrated circuit, such as a single packaged integrated circuit or a plurality of packaged integrated circuits with the same or different functions, including one or more central processing units (CPUs), microprocessors, digital processing chips, graphics processors, and a combination of various control chips. The processor 13 is the control core (Control Unit) of the electronic device 1, connecting the various components of the entire electronic device 1 using various interfaces and circuits. It executes or executes programs or modules stored in the memory 12 (e.g., executing an artificial intelligence-based grid layout program) and accesses data stored in the memory 12 to perform various functions of the electronic device 1 and process data.

[0244] The processor 13 executes the operating system of the electronic device 1 and various installed applications. The processor 13 executes the applications to implement the steps in the above-mentioned embodiments of the grid layout method based on artificial intelligence, such as Figures 1 to 3 Steps shown.

[0245] Exemplarily, the computer program may be divided into one or more modules / units, which are stored in the memory 12 and executed by the processor 13 to complete the present application. The one or more modules / units may be a series of computer-readable instruction segments capable of performing specific functions, which are used to describe the execution process of the computer program in the electronic device 1. For example, the computer program may be divided into a reading unit 110, an expansion unit 111, a dragging unit 112, and an acquisition unit 113.

[0246] The above-mentioned integrated unit implemented in the form of a software functional module can be stored in a computer-readable storage medium. The above-mentioned software functional module is stored in a storage medium and includes a number of instructions for causing a computer device (which can be a personal computer, computer device, or network device, etc.) or a processor to execute the portion of the artificial intelligence-based grid layout method described in various embodiments of the present application.

[0247] If the modules / units integrated in the electronic device 1 are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment methods, and can also instruct the relevant hardware devices to complete them through a computer program. The computer program can be stored in a computer-readable storage medium, and when the computer program is executed by a processor, it can implement the steps of each of the above-mentioned method embodiments.

[0248] The computer program includes computer program code, which may be in source code form, object code form, executable file, or some intermediate form. The computer-readable medium may include any entity or device capable of carrying the computer program code, a recording medium, a USB flash drive, a mobile hard drive, a magnetic disk, an optical disk, a computer memory, a read-only memory (ROM), a random access memory, or other memory.

[0249] Furthermore, the computer-readable storage medium may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function, etc.; the data storage area may store data created according to the use of the blockchain node, etc.

[0250] The blockchain referred to in this application is a new application model for computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanisms, and encryption algorithms. Blockchain is essentially a decentralized database, a series of data blocks generated using cryptographic methods. Each data block contains information about a batch of network transactions, which is used to verify the validity of this information (to prevent counterfeiting) and generate the next block. Blockchain can include the underlying blockchain platform, the platform product service layer, and the application service layer.

[0251] The bus can be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 5 The diagram is represented by only one arrow, but it does not mean that there is only one bus or one type of bus. The bus is configured to implement connection and communication between the memory 12 and at least one processor 13, etc.

[0252] An embodiment of the present application also provides a computer-readable storage medium (not shown), in which computer-readable instructions are stored. The computer-readable instructions are executed by a processor in an electronic device to implement the artificial intelligence-based grid layout method described in any of the above embodiments.

[0253] In addition, the functional modules in the various embodiments of the present application may be integrated into a single processing unit, or each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or in the form of hardware plus software functional modules.

[0254] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application and are not intended to limit the present application. Although the present application has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical solutions of the present application may be modified or replaced by equivalents without departing from the spirit and scope of the technical solutions of the present application.

Claims

1. A grid layout method based on artificial intelligence, characterized in that: The method comprises: Reading attribute values ​​of preset interface elements according to a grid layout system to obtain single-layer layout elements, wherein the grid layout system is used to generate a grid layout page; Expand the properties of the single-layer layout element according to a preset script to obtain a nested container element. The nested container element includes: parentId, which is used to indicate the ID of the parent element of the single-layer layout element. If the single-layer layout element has no parent element, the corresponding parentId is empty; isDragzone, which is used to indicate whether the single-layer layout element can be nested. If isDragzone is false, it indicates that the single-layer layout element cannot be nested. If isDragzone is true, it indicates that the single-layer layout element is a nested container element; children, which is an object array, which indicates all child elements of the single-layer layout element. Dragging the interface element based on the nested container element to obtain a nested layout view; The interface elements are proportionally scaled based on the nested layout view to obtain a complete grid layout, including: judging the operation type corresponding to the nested layout view according to the corresponding scene during dragging, and if the operation type is a nested operation type, counting the levels of the interface elements in the target container element to obtain a hierarchical sorting result; setting a delayed call time layer by layer according to the hierarchical sorting result; and proportionally scaling the interface elements of the corresponding level according to the delayed call time and the layout information of the target container element to obtain a complete grid layout.

2. The artificial intelligence-based grid layout method according to claim 1, wherein: The step of reading the attribute value of the interface element according to the grid layout system to obtain the single-layer layout element includes: Draw the root layout according to the grid layout system and preset property values; Configure the properties of multiple interface elements according to preset property values ​​to construct a configuration object array; traversing the configuration object array to generate object layout elements according to a grid layout system; Draw the object layout element to the root layout to obtain a single-layer layout element.

3. The artificial intelligence-based grid layout method according to claim 1, wherein: The dragging of the interface element based on the nested container element to obtain a nested layout view includes: Adding a class attribute to the HTML element generated corresponding to the nested container element according to a preset script to record the unique identifier of the nested container element; Drag the interface element to the target container element to obtain the class attribute of the target container element; The dragged interface element is added to the children object array of the target container element according to the class attribute of the target container element to obtain the nested layout view.

4. The artificial intelligence-based grid layout method according to claim 3, wherein: The step of dragging the interface element into a target container element to obtain the class attribute of the target container element includes: When clicking the mouse to drag the interface element, set the CSS property of the dragged element to point-events: none so that the currently dragged element will not become the target object of the mouse event; When the mouse is released, a mouse event is triggered to obtain the class attribute of the target container element through a callback function.

5. The artificial intelligence-based grid layout method according to claim 1, wherein: Before scaling the interface elements proportionally based on the nestable layout view to obtain a complete grid layout, the method further includes: If the operation type is a single-layer operation type, directly scaling the interface element according to the layout information of the target container element; If the operation type is a nested operation type, the interface element is delayed and called according to the layout information of the target container element.

6. A grid layout device based on artificial intelligence, characterized in that: The device comprises: a reading unit, configured to read attribute values ​​of interface elements according to a grid layout system to obtain single-layer layout elements, wherein the grid layout system is configured to generate a grid layout page; An extension unit, configured to extend the properties of the single-layer layout element according to a preset script to obtain a nested container element. The nested container element includes: parentId, which is used to indicate the ID of the parent element of the single-layer layout element. If the single-layer layout element has no parent element, the corresponding parentId is empty; isDragzone, which is used to indicate whether the single-layer layout element can be nested. If isDragzone is false, it indicates that the single-layer layout element cannot be nested. If isDragzone is true, it indicates that the single-layer layout element is a nested container element; children, which is an object array and indicates all child elements of the single-layer layout element. A dragging unit, configured to drag the interface element based on the nested container element to obtain a nested layout view; An acquisition unit is used to proportionally scale the interface elements based on the nested layout view to obtain a complete grid layout, including: judging the operation type corresponding to the nested layout view according to the corresponding scene during dragging, and if the operation type is a nested operation type, counting the levels of the interface elements in the target container element to obtain a hierarchical sorting result; setting a delayed call time layer by layer according to the hierarchical sorting result; and proportionally scaling the interface elements of the corresponding level according to the delayed call time and the layout information of the target container element to obtain a complete grid layout.

7. An electronic device, characterized in that: The electronic device comprises: a memory storing computer-readable instructions; and A processor executes computer-readable instructions stored in the memory to implement the artificial intelligence-based grid layout method according to any one of claims 1 to 5.

8. A computer-readable storage medium, characterized in that The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the artificial intelligence-based grid layout method according to any one of claims 1 to 5.

Images