Interface layout method, electronic equipment, storage medium and program product

Abstract

The embodiment of the invention provides an interface layout method, electronic equipment, a storage medium and a program product. The method comprises the following steps: acquiring external input data, and representing the external input data as a component for display; the component comprises a component container and component content; according to the first size of the component container and the second size of the layout container, the layout line number and the layout column number needed for containing the component container in the layout container are determined; and arranging the component container in the arrangement container based on the arrangement row number and the arrangement column number. According to the scheme of the embodiment, the reasonability, readability and attractiveness of the generative interface layout are improved, manpower and time needed for designing and developing the interface are saved, the tedious process of manually adjusting the size and position of the assembly is avoided, and the requirements of customers can be better met.

Description

Technical Field

[0001] This disclosure relates to the field of interface generation technology, and in particular to an interface layout method, electronic device, storage medium, and program product. Background Technology

[0002] The advent of ChatGPT (Chat Generative Pre-trained Transformer) has demonstrated the commercial value of large-scale models to businesses, becoming a significant driving force for the development of artificial intelligence. As natural language processing technology matures, the focus of experience design is shifting towards "generative interfaces," which will become a key product feature, giving businesses a competitive edge. Summary of the Invention

[0003] This disclosure provides an interface layout method, an electronic device, a storage medium, and a program product.

[0004] In a first aspect, embodiments of this disclosure provide an interface layout method, the method including:

[0005] Acquire external input data and represent the external input data as a component for display; the component includes a component container and component content; the component container is used to hold the component content, and the component content is used to characterize the external input data;

[0006] The number of layout rows and columns required to accommodate the component container in the layout container are determined based on the first size of the component container and the second size of the layout container.

[0007] The component container is laid out in the layout container based on the number of layout rows and the number of layout columns.

[0008] In a second aspect, embodiments of this disclosure provide an electronic device, including:

[0009] One or more processors;

[0010] A memory that stores one or more programs, which, when executed by one or more processors, enable the one or more processors to implement the interface layout method.

[0011] One or more input / output (I / O) interfaces are connected between the processor and the memory and configured to enable information exchange between the processor and the memory.

[0012] Thirdly, embodiments of this disclosure provide a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the interface layout method described above.

[0013] Fourthly, this disclosure provides a computer program product, which includes a computer program that, when executed by a processor, implements the interface layout method.

[0014] This disclosure provides a solution for acquiring external input data and representing it as a component for display. This component includes a component container and component content. The component container carries the component content, which in turn represents the external input data, providing a technical foundation for the automated and rational layout of the external input data. This disclosure determines the number of layout rows and columns required to accommodate the component container within the layout container based on a first size of the component container and a second size of the layout container. This allows for the layout of the component container within the layout container based on the number of layout rows and columns, resulting in a more rational layout of the component containers within the layout container. This significantly improves the rationality of the generative interface layout, enhances the quality of the generative interface, and further improves the readability and aesthetics of the interface. Furthermore, this disclosure enhances adaptability to different devices and screen sizes by determining the number of layout rows and columns required to accommodate the component container within the layout container based on the first size of the component container and the second size of the layout container, expanding the applicability of this disclosure. Additionally, since the layout method of this disclosure achieves automated layout, it saves manpower and time required for interface design and development, avoids the tedious process of manually adjusting component size and position, and better meets customer needs. Attached Figure Description

[0015] In the accompanying drawings of the embodiments disclosed herein:

[0016] Figure 1 A flowchart of the interface layout method provided in this embodiment of the disclosure;

[0017] Figure 2 A flowchart of a method for determining the number of layout rows and columns required to accommodate the component container in a layout container based on a first size of the component container and a second size of the layout container, provided in an embodiment of this disclosure;

[0018] Figure 3 A flowchart illustrating a method for determining the layout orientation of a component container within a layout container based on a first size, as provided in an embodiment of this disclosure.

[0019] Figure 4A flowchart of a method for determining the number of layout rows and columns based on the layout direction, a first dimension, and a second dimension when the layout direction is horizontal, provided in an embodiment of this disclosure.

[0020] Figure 5 A flowchart of a method for determining the number of layout rows and columns based on the layout direction, a first dimension, and a second dimension when the layout direction is vertical, provided in an embodiment of this disclosure.

[0021] Figure 6 A flowchart illustrating a method for determining the layout position of a corresponding component container within a layout container based on component content, as provided in this embodiment of the disclosure.

[0022] Figure 7 A flowchart illustrating a method for determining the layout position of a component container within a layout container based on importance level, as provided in this embodiment of the disclosure;

[0023] Figure 8 This is a preliminary layout diagram of 11 line graphs provided in the embodiments of this disclosure;

[0024] Figure 9 A schematic diagram of the layout of the component containers after size adjustment for 11 line graphs provided in the embodiments of this disclosure;

[0025] Figure 10 A schematic diagram showing the layout of the components of the 11 line graphs provided in this embodiment of the disclosure after the size adjustment.

[0026] Figure 11 This is a schematic diagram showing the layout of the link diagram provided in an embodiment of the present disclosure;

[0027] Figure 12 A preliminary layout diagram of one link diagram and seven line graphs provided for embodiments of this disclosure;

[0028] Figure 13 A schematic diagram of the layout of the component container after size adjustment, showing one link diagram and seven line graphs provided in the embodiments of this disclosure;

[0029] Figure 14 A schematic diagram showing the layout of the component content after size adjustment for one link diagram and seven line graphs provided in this embodiment of the disclosure;

[0030] Figure 15 This is a block diagram of an electronic device provided in an embodiment of the present disclosure. Detailed Implementation

[0031] To enable those skilled in the art to better understand the technical solutions of this disclosure, the communication-sensing data processing method and computer-readable storage medium provided in the embodiments of this disclosure will be described in detail below with reference to the accompanying drawings.

[0032] The present disclosure will be described more fully below with reference to the accompanying drawings; however, the embodiments shown may be embodied in different forms, and the present disclosure should not be construed as limited to the embodiments set forth below. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will enable those skilled in the art to fully understand the scope of the disclosure.

[0033] The accompanying drawings of the embodiments disclosed herein are provided to further illustrate the embodiments of this disclosure and form part of the specification. They are used together with the detailed embodiments to explain this disclosure and do not constitute a limitation thereof. The above and other features and advantages will become more apparent to those skilled in the art from the description of the detailed embodiments with reference to the accompanying drawings.

[0034] This disclosure may be described with reference to plan and / or cross-sectional views using the ideal schematic diagrams of this disclosure. Therefore, the example illustrations may be modified according to manufacturing techniques and / or tolerances.

[0035] Where there is no conflict, the various embodiments of this disclosure and the features thereof in the embodiments may be combined with each other.

[0036] The terminology used in this disclosure is for the purpose of describing particular embodiments only and is not intended to limit the disclosure. The term "and / or" as used in this disclosure includes any and all combinations of one or more of the associated enumerated entries. The singular forms "a" and "the" as used in this disclosure are also intended to include the plural forms, unless the context clearly indicates otherwise. The terms "comprising," "made of," etc., as used in this disclosure specify the presence of the stated feature, integral, step, operation, element, and / or component, but do not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components, and / or groups thereof.

[0037] Unless otherwise specified, all terms used in this disclosure (including technical and scientific terms) have the same meaning as commonly understood by one of ordinary skill in the art. It will also be understood that terms such as those defined in commonly used dictionaries should be interpreted as having a meaning consistent with their meaning in the context of the relevant art and this disclosure, and will not be interpreted as having an idealized or overly formal meaning, unless expressly so defined in this disclosure.

[0038] The advent of ChatGPT (Chat Generative Pre-trained Transformer) has demonstrated the commercial value of large-scale models to businesses, becoming a significant driving force for the development of artificial intelligence. As natural language processing technology matures, the focus of experience design is shifting towards "generative interfaces," which will become a key product feature, giving businesses a competitive edge.

[0039] While generative interface technology holds immense potential, it remains in its developmental stage and faces several challenges and limitations. One significant issue is layout rationality, currently facing the following challenges:

[0040] 1. Conflicting or overlapping interface layouts lead to decreased usability of the interface;

[0041] 2. Does not conform to human design principles: The generated interface violates conventional design principles in terms of alignment, spacing, and hierarchy, affecting the readability and aesthetics of the interface;

[0042] 3. Insufficient adaptability: The generated interface fails to provide a consistent user experience across different devices and screen sizes, lacking responsiveness.

[0043] For the reasons mentioned above, how to provide a layout method to improve the quality of generative interfaces and make them more in line with user needs has become an urgent problem to be solved.

[0044] This disclosure provides a solution for acquiring external input data and representing it as a component for display. This component includes a component container and component content. The component container carries the component content, which in turn represents the external input data, providing a technical foundation for the automated and rational layout of the external input data. This disclosure determines the number of layout rows and columns required to accommodate the component container within the layout container based on a first size of the component container and a second size of the layout container. This allows for the layout of the component container within the layout container based on the number of layout rows and columns, resulting in a more rational layout of the component containers within the layout container. This significantly improves the rationality of the generative interface layout, enhances the quality of the generative interface, and further improves the readability and aesthetics of the interface. Furthermore, this disclosure enhances adaptability to different devices and screen sizes by determining the number of layout rows and columns required to accommodate the component container within the layout container based on the first size of the component container and the second size of the layout container, expanding the applicability of this disclosure. Additionally, since the layout method of this disclosure achieves automated layout, it saves manpower and time required for interface design and development, avoids the tedious process of manually adjusting component size and position, and better meets customer needs.

[0045] The interface layout method of this disclosure can be applied to any terminal device, including but not limited to: control devices, in-vehicle devices, user equipment (UE), mobile devices, computing devices, wearable devices, etc., such as, but not limited to, cellular phones, cordless phones, personal digital assistants (PDAs), portable computers, etc. This interface layout method can be implemented by a processor calling computer-readable program instructions stored in memory, or it can be implemented by a server.

[0046] The interface layout method of this disclosure can be applied to, but is not limited to, wireless network management products.

[0047] The embodiments of this disclosure will be described in detail below.

[0048] This disclosure provides an interface layout method, such as... Figure 1 As shown, the method includes steps S11-S13:

[0049] S11. Obtain external input data and represent the external input data as a component for display; the component includes a component container and component content; the component container is used to hold the component content, and the component content is used to represent the external input data.

[0050] In embodiments of this disclosure, before determining the components required for the external input data, the method may further include any one or more of the following:

[0051] Define the minimum and maximum sizes that the component container can use;

[0052] Define the component types to which different component content belongs and the importance level corresponding to each component type; and,

[0053] Define the layout positions corresponding to different importance levels.

[0054] In this embodiment, the minimum and maximum sizes of the component container can be predefined using preset component modules. The size of the component container can be based on a "minimum unit," which can be determined using a grid method according to a screen resolution. The minimum unit and the minimum and maximum sizes of the component container can remain unchanged across different screen resolutions.

[0055] In this embodiment, by pre-setting minimum and maximum sizes, issues such as overlapping, overflow, missing, unreadable, and excessive space occupation of component content are avoided. Subsequent calculations (such as the number of layout rows, the number of layout columns, and the number of layout containers required to accommodate all component containers) are calculated based on the minimum size of the component container (because the minimum size can only be expanded, not shrunk, and can serve as a benchmark), or can be calculated based on the system's preset default size or a specified size. The minimum and maximum sizes that can be used for the already defined component containers can remain unchanged in layout containers of different sizes.

[0056] In this embodiment, the size of both the layout container and the component container can be based on a "minimum unit." The minimum unit is determined using a grid method according to a screen resolution. Using a grid method for layout allows the layout container to be divided into multiple rows of equal height and multiple columns of equal width, forming a grid-like structure. Therefore, this grid method can be considered a grid form, with each grid cell serving as a mesh, and the minimum mesh cell being called a grid unit. The size of any component container occupies one or more grid units. The starting coordinates of the component container's placement position can be aligned with the starting coordinates of the grid unit, making the page layout more neat and uniform. This solves the problem of traditional interface generation violating conventional design principles in terms of alignment, spacing, and hierarchical structure, thus affecting the readability and aesthetics of the interface.

[0057] In this embodiment of the disclosure, different component contents can be pre-classified by type so that each component content has a corresponding component type, and a mapping relationship between component content and component type can be established. For example, if the component content is a line chart, curve chart, etc., it can be classified into the component type of line chart, and if the component content is a structural block diagram, flowchart, etc., it can be classified into the component type of block diagram.

[0058] In this embodiment of the disclosure, for the divided component types, corresponding importance levels can be set for different component types. These importance levels can be predefined by relevant technical personnel, and a correspondence between different component contents and their respective importance levels can be established. Different component types can correspond to different importance levels, and the same component type can correspond to the same importance level. For example, regarding the aforementioned component types of line diagrams and block diagrams, the importance level of the block diagram can be defined as 1, and the importance level of the line diagram as 2, with the block diagram having a higher importance level than the line diagram.

[0059] In this embodiment of the disclosure, the layout positions that can be set in the layout container for component containers corresponding to component content with different importance levels can also be predefined. The positions of the components corresponding to different importance levels can be predefined by relevant technical personnel.

[0060] In this embodiment of the disclosure, the principles for setting the defined layout positions may include any one or more of the following:

[0061] Different importance levels can correspond to different component positions;

[0062] The same importance level can correspond to the same component position;

[0063] The higher the importance level, the more prominent the corresponding layout position, and the higher the priority of the layout position of the component container corresponding to that importance level; and,

[0064] The lower the importance level, the less prominent the corresponding layout position, and the layout position of the component container corresponding to that importance level can be postponed.

[0065] In this embodiment of the disclosure, prominent layout locations in the layout container (e.g., a visualization screen) may include, but are not limited to: a preset area at the upper left corner of the layout container, a preset area at the upper right corner, a preset area in the middle of the first row, a preset area in the middle of the first column, and a preset area in the center of the entire layout container.

[0066] In this embodiment of the disclosure, the layout container can determine its own size according to the screen resolution or a preset range, and use it to put all component containers into the layout container and automatically arrange them until the layout container can accommodate all component containers; if it cannot accommodate the minimum size of all component containers, the size of the layout container (i.e., the second size) can be automatically adjusted and / or the number of layout containers can be increased. The automatically added layout containers still arrange the contained component containers according to the scheme of this embodiment of the disclosure.

[0067] In this embodiment, the above scheme describes layout based on predefined minimum size, maximum size, importance level, and layout position. In other embodiments, layout may not be based on predefined minimum size, maximum size, importance level, and layout position. There may be no minimum or maximum size. After obtaining external input data, the size of the corresponding component container (which may not be the minimum size) is adaptively generated based on the size of the external input data. The number of layout rows and columns can be directly calculated based on the adaptively generated component container size. The components are then adaptively placed within the determined layout container based on the calculated number of layout rows and columns until each component container finds a suitable layout position, suitable layout direction, and suitable first size. Here, the suitable layout position, suitable layout direction, and suitable first size refer to the ability of the layout container to perfectly accommodate all component containers without stacking or conflicts.

[0068] In the embodiments disclosed herein, the layout method of the present application embodiment can be described in detail below using the case of a predefined minimum size, maximum size, importance level and layout position as an example.

[0069] In this embodiment of the disclosure, arbitrary external input data is first obtained through the data module, and the component content corresponding to the external input data and the required component container are determined so as to represent the external input data as a component.

[0070] In this embodiment of the disclosure, there are no restrictions on the method of obtaining external input data, which may include, but is not limited to, natural language dialogue, database query, API (Application Programming Interface) call, file reading, etc.

[0071] S12. Determine the number of layout rows and columns required to accommodate the component container in the layout container based on the first size of the component container and the second size of the layout container.

[0072] In the embodiments disclosed herein, the detailed structure and implementation of the layout container are not limited. For example, the layout container may be a single display area, a combined part of multiple combined display areas, or a part of the entire display screen.

[0073] In the embodiments disclosed herein, such as Figure 2 As shown, determining the number of layout rows and columns required to accommodate the component container within the layout container based on the first size of the component container and the second size of the layout container may include steps S21-S22:

[0074] S21. Determine the layout orientation of the component container in the layout container based on the first dimension.

[0075] In the embodiments disclosed herein, such as Figure 3 As shown, determining the layout orientation of the component container within the layout container based on the first size may include steps S31-S32:

[0076] S31. Obtain the importance level corresponding to the component content.

[0077] In this embodiment of the disclosure, the importance level corresponding to the component content can be obtained by the aforementioned scheme. First, the component type corresponding to the component content is obtained, and then the importance level corresponding to the component type is determined as the importance level corresponding to the component content.

[0078] S32. Based on the determined number of different importance levels and the number of component containers, determine the layout direction of the component containers according to the first size.

[0079] In this embodiment of the disclosure, the first dimension may include the width of the first component and the height of the first component; based on the determined number of importance levels and the number of component containers, the layout direction of the component containers is determined according to the first dimension, including:

[0080] Given that there is one importance level and one component container, compare the width and height of the first component in the component container.

[0081] If the width of the first component is greater than or equal to the height of the first component, the layout direction of the component container is determined to be horizontal.

[0082] If the width of the first component is less than the height of the first component, the layout direction of the component container is determined to be vertical.

[0083] In this embodiment of the disclosure, when the determined importance level is one and the component container is one, the component container can be directly placed inside the layout container, and the layout direction of the component container, whether horizontal or vertical, can be directly calculated based on the first component width and the first component height of the component container.

[0084] In this embodiment of the disclosure, for example, if the component to be displayed is only one link diagram, the width (i.e., the width of the first component) and the height (i.e., the height of the first component) of the one link diagram can be determined. The size of the width and height is compared. If the width of the one link diagram is greater than or equal to the height of the one link diagram, the layout direction of the one link diagram is determined to be horizontal, that is, the one link diagram is placed horizontally in the layout container; if the width of the one link diagram is less than the height of the one link diagram, the layout direction of the one link diagram is determined to be vertical, that is, the one link diagram is placed vertically in the layout container.

[0085] In this embodiment of the disclosure, the first dimension may include the area of ​​the first component, the width of the second component, and the height of the second component; based on the determined number of importance levels and the number of component containers, the layout direction of the component containers is determined according to the first dimension, including:

[0086] Given that there is one level of importance and multiple component containers, obtain the first component container with the largest area among the multiple component containers, as well as the second width and second component height corresponding to the first component container;

[0087] Compare the width of the second component and the height of the second component;

[0088] If the width of the second component is greater than or equal to the height of the second component, determine the layout direction of the multiple component containers as horizontal.

[0089] If the width of the second component is less than the height of the second component, the layout direction of the multiple component containers is determined to be vertical.

[0090] In this embodiment of the disclosure, when there is one level of importance and multiple component containers, the layout direction of the multiple component containers can be determined based on the component container with the largest area (i.e., the area of ​​the first component mentioned above) among the multiple component containers (such as the first component container).

[0091] In this embodiment of the disclosure, when determining the layout direction of multiple component containers based on the component container with the largest area (i.e., the area of ​​the first component mentioned above) among multiple component containers (such as the first component container), the width (i.e., the width of the second component) and the height (i.e., the height of the second component) of the component container with the largest area (such as the first component container) can also be compared. If the width is greater than or equal to the height, the layout direction of the multiple component containers is horizontal; if the width is less than the height, the layout direction of the multiple component containers is vertical.

[0092] In this embodiment of the disclosure, for example, if the components to be displayed are 7 line charts, the width (i.e., the width of the second component) and height (i.e., the height of the second component) of the 7 line charts can be determined, and the area of ​​the component container corresponding to each of the 7 line charts (i.e., the area of ​​the first component) can be determined. The component container with the largest area is selected, and the width and height of the component container with the largest area are compared. If the width of the component container with the largest area is greater than or equal to the height of the component container with the largest area, the layout direction of the 7 line charts is determined to be horizontal, that is, the 7 line charts are placed horizontally in the layout container; if the width of the component container with the largest area is less than the height of the component container with the largest area, the layout direction of the 7 line charts is determined to be vertical, that is, the 7 line charts are placed vertically in the layout container.

[0093] In this embodiment of the disclosure, the first dimension may include a second area, a third component width, and a third component height; based on the determined number of importance levels and the number of component containers, determining the layout direction of the component containers according to the first dimension may include:

[0094] When there are multiple importance levels and multiple component containers, obtain at least one component container with the highest importance level among the multiple component containers;

[0095] From the at least one component container, determine the second component container with the largest second area, and the third component width and third component height corresponding to the second component container;

[0096] Compare the width and height of the third component;

[0097] If the width of the third component is greater than or equal to the height of the third component, determine the layout direction of the multiple component containers as horizontal.

[0098] If the width of the third component is less than the height of the third component, determine the layout direction of the multiple component containers as vertical.

[0099] In this embodiment of the disclosure, when there are multiple importance levels and multiple component containers, the layout direction of multiple component containers can be determined based on the importance level of the component content corresponding to the multiple component containers and the component container with the largest area (i.e., the area of ​​the second component mentioned above) among the multiple component containers (such as the second component container).

[0100] In this embodiment of the disclosure, when determining the layout direction of multiple component containers based on the importance level of the component content corresponding to multiple component containers and the component container with the largest area (i.e., the area of ​​the second component mentioned above) among multiple component containers (such as the second component container), the component container corresponding to the component content with the highest importance level can be determined first. The component content with the highest importance level can be at least one, and thus corresponds to at least one corresponding component container.

[0101] In this embodiment of the disclosure, when there is only one component with the highest importance level and it corresponds to one component container, the layout direction of all component containers can be determined based on the width (i.e., the width of the third component) and the height (i.e., the height of the third component) of the one component container. Similarly, the width (i.e., the width of the third component) and the height (i.e., the height of the third component) of the one component container are compared. If the width is greater than or equal to the height, the layout direction of all component containers is horizontal; if the width is less than the height, the layout direction of all component containers is vertical.

[0102] In this embodiment of the disclosure, when there are multiple components with the highest importance level and corresponding to multiple component containers, the layout direction of all component containers can be determined based on the width (i.e., the width of the third component) and height (i.e., the height of the third component) of the component container with the largest area (i.e., the area of ​​the second component mentioned above) among the multiple component containers with the highest importance level. Similarly, the width (i.e., the width of the third component) and height (i.e., the height of the third component) of the component container with the largest area (i.e., the area of ​​the second component mentioned above) among the multiple component containers with the highest importance level are compared. If the width is greater than or equal to the height, the layout direction of all component containers is horizontal; if the width is less than the height, the layout direction of all component containers is vertical.

[0103] In this embodiment of the disclosure, for example, if the components to be displayed are two link diagrams and seven line graphs, then the component content with the highest importance level in the two link diagrams and seven line graphs can be determined to correspond to the two link diagrams. Therefore, the area of ​​the component container corresponding to each link diagram in the two link diagrams (i.e., the area of ​​the second component) can be determined, and the component container with the largest area is selected from the component containers corresponding to the two link diagrams. For example, if the component container with the largest area in the two link diagrams is selected as the component container corresponding to the first link diagram, then the first link diagram is compared with the component container corresponding to the first link diagram. The width and height of the corresponding component container are determined as follows: if the width of the component container corresponding to the first link diagram is greater than or equal to the height of the component container corresponding to the first link diagram, then the layout direction of the two link diagrams and seven line diagrams is determined to be horizontal, that is, the two link diagrams and seven line diagrams are placed horizontally within the layout container; if the width of the component container corresponding to the first link diagram is less than the height of the component container corresponding to the first link diagram, then the layout direction of the two link diagrams and seven line diagrams is determined to be vertical, that is, the two link diagrams and seven line diagrams are placed vertically within the layout container.

[0104] S22. Determine the number of layout rows and the number of layout columns based on the layout direction, the first dimension, and the second dimension.

[0105] In this embodiment of the disclosure, the size of the layout container is not fixed and can be adjusted according to the number and size of the component containers. The corresponding number of layout rows and columns can be set to adapt to the needs of different application scenarios, so that the generated interface can provide a consistent user experience on different devices and screen sizes.

[0106] In this embodiment of the disclosure, after determining the layout direction of all component containers based on the aforementioned scheme, the number of layout rows and columns required to accommodate the component containers in the layout container can be determined based on the layout direction.

[0107] In the embodiments of this disclosure, when calculating the number of layout rows and columns required for a component container, if the component containers contain multiple importance levels, the required number of layout rows and columns can be calculated for all component containers of each importance level according to the following scheme of the embodiments of this disclosure.

[0108] In this embodiment of the disclosure, in a horizontal layout, the component containers in the same row have the same height, but the number and width of the component containers displayed in each row can be different. The horizontal layout can be calculated by first calculating the number of layout rows and then calculating the number of layout columns.

[0109] In this embodiment of the disclosure, in a vertical layout, the component containers in the same column have the same width, but the number and height of the component containers displayed in each column can be different. The vertical layout can be calculated by first calculating the number of layout columns and then calculating the number of layout rows.

[0110] In the embodiments disclosed herein, the schemes for determining the number of layout rows and columns based on horizontal and vertical layouts will be described in detail below.

[0111] In the embodiments disclosed herein, such as Figure 4 As shown, when the layout direction is horizontal, determining the number of layout rows and columns based on the layout direction, the first dimension, and the second dimension may include steps S41-S42:

[0112] S41. Perform a first calculation based on the number of component containers, the first size, and the second size to determine the number of layout rows.

[0113] In this embodiment of the disclosure, the first dimension may include the width of the fourth component and the height of the fourth component, and the second dimension may include the width of the first layout and the height of the first layout.

[0114] In this embodiment of the disclosure, determining the number of layout rows based on the number of component containers, a first size, and a second size may include:

[0115] Divide the first layout width by the base width corresponding to the component container to obtain the base number of columns;

[0116] Divide the number of component containers by the number of base columns to obtain the first quotient and the first remainder;

[0117] If the first remainder is 0, the first quotient is used as the number of rows to be laid out.

[0118] If the first remainder is not 0, add 1 to the first quotient to determine the number of rows to be laid out.

[0119] In this embodiment of the disclosure, the reference width may include, but is not limited to, any one or more of the following:

[0120] The minimum width of the fourth component among all fourth component widths, the system default width, and the specified width.

[0121] In this embodiment of the disclosure, when the base width is any combination of the minimum fourth component width among all fourth component widths, the system default width, and a specified width, a preset calculation can be performed on these arbitrary widths to obtain a final base width for calculation with the first layout width. This preset calculation may include, but is not limited to, weighted calculation, average calculation, etc.

[0122] In this embodiment of the disclosure, there may be a remainder when calculating the base column number. In this case, it is sufficient to round down. That is, the quotient obtained by dividing the first layout width by the base width corresponding to the component container is used as the base column number, regardless of the remainder.

[0123] In this embodiment, when the first remainder is 0, it means that the number of layout rows representing the first quotient is sufficient to accommodate the number of component containers; when the first remainder is not 0, it means that the number of layout rows representing the first quotient is insufficient to accommodate all the component containers, therefore an additional layout row is needed to accommodate the component containers representing the first remainder. The height of this additional row is the height of the component containers when they are laid out horizontally. This embodiment avoids component container stacking due to insufficient space, improving the usability of the interface.

[0124] S42. Perform a second calculation based on the number of component containers and the number of layout rows to determine the number of layout columns.

[0125] In this embodiment of the disclosure, the second calculation to determine the number of layout columns based on the number of component containers and the number of layout rows may include:

[0126] Divide the number of component containers by the number of layout rows to obtain the corresponding second quotient and second remainder;

[0127] If the second remainder is 0, the second quotient is used as the number of columns to be laid out.

[0128] If the second remainder is not zero, the number of layout columns is determined based on the number of importance levels of the component container.

[0129] In this embodiment, when the second remainder is 0, it indicates that the number of layout columns representing the second quotient is sufficient to accommodate the number of component containers. When the second remainder is not 0, it indicates that the number of layout columns representing the second quotient is insufficient to accommodate all the component containers. Therefore, it is necessary to add a layout column, or alternatively, not add one and place the excess component containers in an empty area to accommodate the component containers corresponding to the second remainder. The width of the added column is the width of the component containers when laid out horizontally. This embodiment avoids component container stacking due to insufficient space, improving interface usability.

[0130] In this embodiment of the disclosure, determining the number of layout columns based on the number of importance levels of the component containers may include:

[0131] If the importance level of the component container is one, add 1 to the second quotient to determine the number of layout columns.

[0132] In this embodiment of the disclosure, when the importance level of the component container is one, the component content corresponding to the importance level should be the same or similar, and the first size defined by the corresponding component container should also be the same or similar. When placing multiple component containers of the same importance level, they are usually placed in order, and there will be no blank area in a column that can hold the next component container. Therefore, if a second remainder is calculated, it means that the number of columns determined according to the second quotient cannot accommodate the component container corresponding to the second remainder. Therefore, an additional column is needed, and the second quotient is increased by 1 as the number of layout columns.

[0133] In this embodiment of the disclosure, in the added column, the component container of the second remainder can be set starting from the first row corresponding to the column, and set sequentially in the order of increasing row number until the component container of the second remainder is set; the component container of the second remainder can also be set starting from the last row corresponding to the column, and set sequentially in the order of decreasing row number until the component container of the second remainder is set; the component container of the second remainder can also be randomly or set into one or more calculated layout rows according to a specified row number.

[0134] In this embodiment of the disclosure, the first dimension may include: the width of the fifth component and the height of the fifth component; determining the number of layout columns based on the number of importance levels of the component containers may include:

[0135] When there are multiple importance levels for a component container, determine the second importance level corresponding to the component container used to calculate the number of layout columns;

[0136] If there are no component containers with a higher importance level than the second most important level among all the component containers to be laid out, add 1 to the second quotient as the number of layout columns.

[0137] If, among all the component containers to be laid out, there are component containers with an importance level higher than the second most important level, check whether the row containing the component container with the higher importance level is full. If the row containing the component container with the higher importance level is full, add 1 to the second quotient to get the number of layout columns. If the row containing the component container with the higher importance level is not full, check whether the width of the unfilled area is greater than or equal to the sum of the widths of the fifth components of the component containers corresponding to the second remainder. If the width of the unfilled area is less than the sum of the widths of the fifth components of the component containers corresponding to the second remainder, add 1 to the second quotient to get the number of layout columns. If the width of the unfilled area is greater than or equal to the sum of the widths of the fifth components of the component containers corresponding to the second remainder, use the second quotient as the number of layout columns.

[0138] In this embodiment of the disclosure, if there is no component container with an importance level higher than the second importance level among all the component containers to be laid out, it indicates that the second importance level is the highest level among all the component containers to be laid out. Therefore, it is impossible to fill the blank area of ​​the column where the higher-level component container is located with the second remainder component container. Therefore, only one column can be added to accommodate the second remainder component container.

[0139] In this embodiment of the disclosure, if there are component containers with an importance level higher than the second importance level among all the component containers to be laid out, it indicates that there are component containers corresponding to higher importance levels. In this case, the columns where these higher-level component containers are located may have blank areas (i.e., the columns where the higher-level component containers are located are not filled). If there are blank areas, it can be checked whether the size of the blank area can accommodate the second remainder of component containers. If it cannot accommodate them, a column still needs to be added. If it can accommodate them, a column does not need to be added, and the second quotient can be directly used as the number of layout columns.

[0140] In the embodiments disclosed herein, such as Figure 5 As shown, when the layout direction is vertical, the number of layout rows and columns are determined based on the layout direction, the first dimension, and the second dimension, including steps S51-S52:

[0141] S51. Based on the number of component containers, the first size and the second size, perform a third calculation to determine the number of layout columns.

[0142] In this embodiment of the disclosure, the first dimension may include: the width of the sixth component and the height of the sixth component; the second dimension may include: the width of the second layout and the height of the second layout.

[0143] In this embodiment of the disclosure, a third calculation is performed based on the number of component containers, the first size, and the second size to determine the number of layout columns, including:

[0144] Divide the second layout height by the base height corresponding to the component container to obtain the base row number;

[0145] Divide the number of component containers by the base row number to obtain the corresponding third quotient and third remainder;

[0146] When the third remainder is 0, the third quotient is used as the number of columns in the layout;

[0147] If the third remainder is not 0, add 1 to the third quotient to determine the number of columns in the layout.

[0148] In this embodiment of the disclosure, the reference height may include, but is not limited to, any one or more of the following:

[0149] The minimum height of the sixth component among all sixth component heights, the system default height, and the specified height.

[0150] In this embodiment of the disclosure, when the reference height is any combination of the minimum sixth component height among all sixth component heights, the system default height, and a specified height, a preset calculation can be performed on these arbitrary heights to obtain a final reference height for calculation with the second layout height. This preset calculation may include, but is not limited to, weighted calculation, average calculation, etc.

[0151] In this embodiment of the disclosure, there may be a remainder when calculating the base row number. In this case, it is sufficient to round down. That is, the quotient obtained by dividing the second layout height by the base height corresponding to the component container is used as the base column number, regardless of the remainder.

[0152] In this embodiment, when the third remainder is 0, it indicates that the number of layout columns representing the third quotient is sufficient to accommodate the number of component containers. When the third remainder is not 0, it indicates that the number of layout columns representing the third quotient is insufficient to accommodate all the component containers, therefore an additional layout column is needed to accommodate the component containers corresponding to the third remainder. The width of this additional column is the width of the component containers when laid out vertically. This embodiment avoids component container stacking due to insufficient space, improving interface usability.

[0153] S52. Perform a fourth calculation based on the number of component containers and the number of layout columns to determine the number of layout rows.

[0154] In this embodiment of the disclosure, a fourth calculation is performed based on the number of component containers and the number of layout columns to determine the number of layout rows, including:

[0155] Divide the number of component containers by the number of layout columns to obtain the corresponding fourth quotient and fourth remainder;

[0156] If the fourth remainder is 0, the fourth quotient is used as the number of rows to be laid out.

[0157] If the fourth remainder is not zero, the number of layout rows is determined based on the number of importance levels of the component container.

[0158] In this embodiment, when the fourth remainder is 0, it indicates that the number of layout rows (representing the fourth quotient) can accommodate the number of component containers. When the fourth remainder is not 0, it indicates that the number of layout columns (representing the fourth quotient) cannot accommodate all the component containers. Therefore, depending on the specific situation, it is necessary to add a layout row, or alternatively, not add one and place the excess component containers in an empty area to accommodate the component containers corresponding to the fourth remainder. The height of the added row is the height of the component containers when they are laid out vertically. This embodiment avoids the stacking of component containers due to insufficient space, improving the usability of the interface.

[0159] In this embodiment of the disclosure, determining the number of layout rows based on the number of importance levels of the component container may include:

[0160] If the component container has only one importance level, add 1 to the fourth quotient to determine the number of layout rows.

[0161] In this embodiment of the disclosure, when the importance level of the component container is one, the component content corresponding to the importance level should be the same or similar, and the first size defined by the corresponding component container should also be the same or similar. When placing multiple component containers of the same importance level, they are usually placed in order, and there will be no blank area in a row that can be used to place the next component container. Therefore, if a fourth remainder is calculated, it means that the number of rows determined by the fourth quotient cannot accommodate the component container corresponding to the fourth remainder. Therefore, an additional row is needed, and the fourth quotient is increased by 1 as the number of layout rows.

[0162] In this embodiment of the disclosure, in the added rows, the component container of the fourth remainder can be set starting from the first column corresponding to the row, and set sequentially in order of increasing column number until the component container of the fourth remainder is set; the component container of the fourth remainder can also be set starting from the last column corresponding to the row, and set sequentially in order of decreasing column number until the component container of the fourth remainder is set; the component container of the fourth remainder can also be randomly or set into one or more calculated layout columns according to a specified number of columns.

[0163] In this embodiment of the disclosure, the first dimension may include: the width of the seventh component and the height of the seventh component; determining the number of layout rows based on the number of importance levels of the component container includes:

[0164] When there are multiple importance levels for a component container, determine the third importance level corresponding to the component container used to calculate the number of layout rows;

[0165] If there are no component containers with an importance level higher than the third importance level among all the component containers to be laid out, add 1 to the fourth quotient as the number of layout rows.

[0166] If, among all the component containers to be laid out, there are component containers with an importance level higher than the third importance level, check whether the column containing the component containers with an importance level higher than the third importance level is full. If the column containing the component containers with an importance level higher than the third importance level is full, add 1 to the fourth quotient to get the number of layout rows. If the column containing the component containers with an importance level higher than the third importance level is not full, check whether the height of the unfilled area is greater than or equal to the sum of the heights of the seventh components of the component containers corresponding to the fourth remainder. If the height of the unfilled area is less than the sum of the heights of the seventh components of the component containers corresponding to the fourth remainder, add 1 to the fourth quotient to get the number of layout rows. If the height of the unfilled area is greater than or equal to the sum of the heights of the seventh components of the component containers corresponding to the fourth remainder, use the fourth quotient as the number of layout rows.

[0167] In this embodiment of the disclosure, if there is no component container with an importance level higher than the third importance level among all the component containers to be laid out, it indicates that the third importance level is the highest level among all the component containers to be laid out. Therefore, it is impossible to fill the blank area of ​​the column where the fourth remainder component container is located. Therefore, only one row can be added to accommodate the fourth remainder component container.

[0168] In this embodiment of the disclosure, if there are component containers with an importance level higher than the third importance level among all the component containers to be laid out, it indicates that there are component containers corresponding to higher importance levels. Then, there may be blank areas in the rows where these higher-level component containers are located (i.e., the rows where the higher-level component containers are located are not filled). If there are blank areas, it can be checked whether the size of the blank area can accommodate the fourth remainder component containers. If it cannot accommodate them, then a row still needs to be added. If it can accommodate them, then a row does not need to be added, and the fourth quotient can be directly used as the number of layout rows.

[0169] S13. Lay out component containers in the layout container based on the number of layout rows and columns.

[0170] In this embodiment of the disclosure, laying out component containers within a layout container based on the number of layout rows and columns may include:

[0171] The final second size of the layout container is determined based on the number of layout rows and columns;

[0172] In the layout container with the final second size, each component container is placed inside the layout container.

[0173] In this embodiment of the disclosure, after the final layout container is determined, since the number of layout rows and columns that the current layout container can accommodate is calculated based on the size of the component containers, it can accommodate all component containers without overlapping or conflicting. Therefore, based on the layout direction determined when calculating the number of layout rows and columns, all component containers can be placed inside the layout container. The detailed position of each component container is not limited, and all component containers can be adaptively placed inside the layout container. Based on the above-mentioned number of layout rows and columns, any placement scheme that can accommodate all component containers and ensure that all component containers do not overlap or conflict is within the protection scope of this application.

[0174] In this embodiment of the disclosure, before laying out the component containers in the layout container based on the number of layout rows and columns, the method may further include:

[0175] The layout position of the corresponding component container within the layout container is determined based on the component content.

[0176] In this embodiment of the disclosure, after the acquired external input data is represented as a component, the layout position of the component container corresponding to the component content in the layout container can be determined based on the component content in the component.

[0177] In the embodiments disclosed herein, such as Figure 6 As shown, determining the layout position of the corresponding component container within the layout container based on the component content may include steps S61-S63:

[0178] S61. Determine the component type based on its content.

[0179] In this embodiment of the disclosure, the component type to which the current component content belongs can be determined based on the mapping relationship between component content and component type defined in the foregoing content.

[0180] In this embodiment of the disclosure, for example, based on external input data, it is determined that the components to be displayed are 11 line charts, thereby determining that the component type of the line chart is a line graph.

[0181] In this embodiment of the disclosure, for example, based on external input data, it is obtained that the components to be displayed are one link diagram and seven line diagrams. Thus, it can be determined that the component type of the link diagram is a block diagram and the component type of the line diagrams is a line graph.

[0182] S62. Determine the importance level of the component content based on the component type to which the component content belongs.

[0183] In this embodiment of the disclosure, the importance level corresponding to the current component type can be determined based on the mapping relationship between component types and importance levels defined in the foregoing content.

[0184] In this embodiment of the disclosure, for example, if, based on external input data, it is determined that the components to be displayed are 11 line charts, and the component type of the line chart is determined to be a line graph, then the importance level corresponding to the line graph can be determined to be 2 based on the mapping relationship between component type and importance level. Accordingly, it can be determined that only one importance level is obtained.

[0185] In this embodiment of the disclosure, for example, based on external input data, if the components to be displayed are identified as one link diagram and seven line charts, and the component type of the link diagram is determined to be a block diagram and the component type of the line charts is a line graph, then the importance level corresponding to the block diagram can be determined to be 1 and the importance level corresponding to the line graphs can be determined to be 2 based on the mapping relationship between component type and importance level. Accordingly, two importance levels can be determined.

[0186] S63. Determine the layout position of the component container corresponding to the component content within the layout container based on the importance level.

[0187] In this embodiment of the disclosure, the layout position can be determined based on the number of different importance levels. For example, if there are five importance levels, and all five are importance level 2, then there is one type of importance level. If there are three importance levels, two of which are importance level 2 and one is importance level 1, then there are two types of importance levels.

[0188] In this embodiment of the disclosure, determining the layout position of the component container corresponding to the component content within the layout container based on the importance level may include:

[0189] If only one importance level is determined, any position within the layout container will be designated as the layout position of the component container corresponding to the component content.

[0190] In this embodiment of the disclosure, when the determined importance level is one, since all the current component content has the same importance level, the corresponding layout positions also have the same level. In addition, since all the current component content needs to be laid out within the entire layout container, any layout position within the entire layout container is a layout position of the same level for all component containers, or in other words, there is no level distinction. That is, any position within the layout container can be determined as the layout position of the component container.

[0191] In this embodiment of the disclosure, for example, if, based on external input data, it is determined that the components to be displayed are 11 line charts, and the component type of the line charts is determined to be a line graph, then the importance level corresponding to the line graph can be determined to be 2 based on the mapping relationship between component type and importance level. Accordingly, if it is determined that there is only one importance level, then for the 11 line charts, any position within the layout container can be used as a layout position for layout arrangement.

[0192] In the embodiments disclosed herein, such as Figure 7 As shown, determining the layout position of the component container corresponding to the component content within the layout container based on the importance level can include steps S71-S73:

[0193] S71. When multiple importance levels are determined, determine the relative importance of each level and the relative importance of different positions within the layout device.

[0194] S72. Obtain any first position and first importance level that matches the level;

[0195] S73. The first position is the layout position of the component container corresponding to the first importance level within the layout container.

[0196] In this embodiment of the disclosure, when there are multiple levels of importance, the layout position of the corresponding level can be set for the component content of different importance levels, so that the important content can be placed in a prominent position in the layout container, making it easier and more intuitive for users to see the more important component content.

[0197] In this embodiment of the disclosure, for different importance levels, the layout position of the component container corresponding to the component content of each importance level can be determined based on the layout position setting principles defined in the foregoing content.

[0198] In this embodiment of the disclosure, for example, based on external input data, if the components to be displayed are identified as one link diagram and seven line charts, and the component type of the link diagram is determined to be a block diagram and the component type of the line charts is a line graph, then the importance level corresponding to the block diagram can be determined to be 1 and the importance level corresponding to the line graphs can be determined to be 2 based on the mapping relationship between component type and importance level. Accordingly, if two importance levels are determined, then for these two importance levels, it can be determined that the importance level of the block diagram is higher than the importance level of the line graphs, that is, the importance level of the aforementioned one link diagram is higher than the importance level of the seven line charts. Based on the principle that component containers with higher importance levels should be placed in more prominent positions, the link diagram can be placed in a prominent position within the layout container. For example, it can be placed in any of the following locations: the top left corner, the top right corner, the middle of the first row, the middle of the first column, or the center of the entire layout container. As for the seven line charts, since they have the same importance level, they can be placed anywhere within the layout container other than where the link diagram is located.

[0199] In this embodiment of the disclosure, determining the layout position of the component container corresponding to the component content with a lower importance level (such as the 7 line graphs mentioned above) may include: subtracting the sum of the first dimensions of the component container corresponding to the component content with a higher importance level (such as the 1 link graph mentioned above) from the second dimension of the layout container, and obtaining the size as the position size that can be used to lay out the component container with a lower importance level.

[0200] In this embodiment of the disclosure, after determining the layout position of the component containers corresponding to component content of different importance levels, the corresponding component containers can be placed in the area where the corresponding layout position is located.

[0201] In this embodiment of the disclosure, when placing the corresponding component containers within the area of ​​the corresponding layout location, the component containers containing components with higher importance levels can be placed first, followed by the component containers containing components with lower importance levels. For example, the component containers containing the corresponding component contents can be placed sequentially according to their importance levels from highest to lowest.

[0202] In this embodiment of the disclosure, after placing component containers containing components with higher importance levels, component containers containing components with lower importance levels can be placed preferentially in areas where there are no component containers with higher importance levels in an entire row or column. If it is not possible to place all component containers containing components with lower importance levels in areas where there are no component containers with higher importance levels in an entire row or column, the remaining component containers containing components with lower importance levels can be placed in the blank areas of the row and / or column where the component containers with higher importance levels are located.

[0203] In this embodiment of the disclosure, before placing the corresponding component container in the area where the corresponding layout position is located, the layout elements such as the layout direction, number of layout rows, and number of layout columns of the component container in that area can also be determined.

[0204] In this embodiment of the disclosure, laying out component containers within a layout container based on the number of layout rows and columns may include:

[0205] Layout component containers within a layout container based on layout position, number of layout rows, and number of layout columns.

[0206] In this embodiment of the disclosure, laying out component containers within a layout container based on layout position, number of layout rows, and number of layout columns may include:

[0207] The final second size of the layout container is determined based on the number of layout rows and columns;

[0208] In the layout container with the final second size, each component container is placed in its corresponding layout position within the layout container according to the layout direction corresponding to the number of layout rows and columns.

[0209] In this embodiment of the disclosure, the number of layout rows and columns calculated based on the aforementioned scheme can ultimately determine the final size (i.e., the final second size) of the layout container that accommodates all component containers. All component containers can be set based on this layout container, and the setting is based on the determined layout position.

[0210] In this embodiment of the disclosure, laying out component containers within a layout container based on layout position, number of layout rows, and number of layout columns may include:

[0211] When the importance level of the component content corresponding to the component container is one, all component containers are sequentially set to any layout position in the layout container according to the layout direction corresponding to the number of layout rows and columns.

[0212] When the component content corresponding to the component container has multiple importance levels, the multiple importance levels are arranged in descending order of importance. Based on the layout direction corresponding to the number of layout rows and columns, the component containers corresponding to the component content of the multiple importance levels are placed in the layout positions corresponding to the importance levels in descending order of importance.

[0213] In this embodiment of the disclosure, for example, if the importance level of the component containers to be placed is all 1, then all component containers are placed in the layout container in a preset order.

[0214] In this embodiment of the disclosure, for example, if the importance levels of the component containers to be placed include importance level 1 and importance level 2, and importance level 1 is higher than importance level 2, then the component container corresponding to importance level 1 is first placed in the layout position corresponding to importance level 1 within the layout container, and then the component container corresponding to importance level 2 is placed in a position outside the layout position corresponding to importance level 1 within the layout container. If there are multiple component containers corresponding to importance level 1, they can be placed in a preset order within the layout position corresponding to importance level 1; similarly, if there are multiple component containers corresponding to importance level 2, they can be placed in a preset order within the layout position corresponding to importance level 2.

[0215] In this embodiment of the disclosure, when there are multiple importance levels of the component content corresponding to the component container, for each importance level, the component containers corresponding to the same importance level can be set sequentially in a preset order within the layout position.

[0216] In this embodiment of the disclosure, if the layout position corresponding to any importance level cannot accommodate all component containers of that importance level, it indicates that there may be blank areas in the row or column where the component containers of a higher importance level are located. The excess component containers of lower importance levels can be placed in the blank areas. If no higher importance level is detected, or a higher importance level exists but the row or column where the component containers of the higher importance level are located has no blank areas, or the existing blank areas still cannot accommodate all the excess component containers of lower importance levels, it indicates that the number of layout rows and / or the number of layout columns calculated by the aforementioned scheme is incorrect. An error can be reported, and the interface layout scheme of this embodiment of the disclosure can be automatically or reimplemented under user instruction.

[0217] In this embodiment of the disclosure, after laying out the component containers in the layout container based on the number of layout rows and the number of layout columns, the method may further include:

[0218] If the component containers do not fill the layout container, adjust the size of any one or more component containers so that all component containers fill the layout container.

[0219] In this embodiment of the disclosure, the first dimension may include: the width of the eighth component and the height of the eighth component, and the second dimension includes: the width of the third layout and the height of the third layout;

[0220] If a component container does not fill the layout container, resize any one or more component containers to ensure that all component containers fill the layout container. This includes: if all component containers in the layout have the same importance level, performing the following resizing on all component containers in the layout:

[0221] Calculate the height of the eighth component in each row of the component container based on the third layout height of the layout container and the number of layout rows;

[0222] Calculate the width of the eighth component in each column of the component container based on the third layout width of the layout container and the number of layout columns;

[0223] The first size of each component container set within the layout container is adjusted based on the width and height of the eighth component.

[0224] In this embodiment of the disclosure, for example, if the component container to be laid out consists of 11 component containers corresponding to line charts, and the number of layout rows determined for these 11 component containers is 3, the number of layout columns is 4 and 3 (specifically, the first and second rows have 4 columns, and the third row has 3 columns), the height of the layout container (i.e., the aforementioned third layout height) is 24, and the width of the layout container (i.e., the aforementioned third layout width) is 24, then according to the above scheme, the height of each row of component containers (i.e., the height of the eighth component) should be: 24 / 3 = 8, the width of each column of component containers in the first two rows should be: 24 / 4 = 6, and the width of each column of component containers in the last row should be 24 / 3 = 8. Therefore, the component containers laid out within the layout container can be adjusted according to the calculated height and width of each row.

[0225] In this embodiment of the disclosure, the first dimension may include: the width of the ninth component, the height of the ninth component, the width of the tenth component, and the height of the tenth component; the second dimension may include: the width of the fourth layout and the height of the fourth layout; the importance level includes at least the fourth importance level and the fifth importance level; the level of the fourth importance level is higher than the level of the fifth importance level.

[0226] In this embodiment of the disclosure, when the component containers do not completely fill the layout container, adjusting the size of any one or more component containers to make all component containers fill the layout container includes: when all component containers in the layout have multiple importance levels, performing the following size adjustment on all component containers in the layout:

[0227] If any row contains a component container of the fourth importance level, align the component container in that row with one or more component containers in all rows of the layout container except for that row; check whether the row and / or other rows are filled after alignment; if any first blank area in the row and other rows is not filled, adjust the width of the ninth component of the component container in the row corresponding to the first blank area according to the first preset adjustment strategy; and / or,

[0228] If any column has a component container of the fourth importance level, align the component container in that column with any one or more component containers in all columns of the layout container except for that column; check whether the column and / or other columns are filled after alignment; if any second blank area in the column and other columns is not filled, adjust the height of the ninth component of the component container in the column corresponding to the second blank area according to the second preset adjustment strategy.

[0229] In this embodiment of the disclosure, for example, if any row has a component container with a fourth importance level, the width of the ninth component of a component container with a fifth importance level in any row other than any row within the layout container, or the sum of the widths of the ninth components of multiple component containers with fifth importance levels, is aligned with the width of the tenth component of the component container with a fourth importance level; it is detected whether other rows are filled after alignment; if other rows are not filled, the width of the ninth component of the unaligned component containers in other rows is adjusted according to a first preset adjustment strategy; and / or,

[0230] If any column has a component container with a fourth importance level, align the height of the ninth component of one of the component containers with a fifth importance level in all columns except for that column within the layout container, or the sum of the heights of the ninth components of multiple component containers with a fifth importance level, with the height of the tenth component of the component container with a fourth importance level; check whether other columns are filled after alignment, and if other columns are not filled, adjust the height of the ninth component of the unaligned component containers in other columns according to the second preset adjustment strategy.

[0231] In this embodiment of the disclosure, when there are high-level and low-level importance levels within the layout container, when laying out component containers corresponding to the low-level importance level, they can first be aligned with component containers corresponding to the high-level importance level. During the alignment process, one or multiple component containers corresponding to the low-level importance level can be aligned to make the layout container look neater and more aesthetically pleasing. After the alignment of component containers corresponding to the low-level importance level is completed, if there are still blank areas in the rows or columns where the component containers corresponding to the low-level importance level are located, the size of the blank areas can be distributed to the first size of the unaligned component containers corresponding to the low-level importance level based on the first preset adjustment strategy and the second preset adjustment strategy.

[0232] In this embodiment of the disclosure, after aligning the lower-level component container with the higher-level component container in the above scheme, adjusting the size of any one or more component containers may further include:

[0233] If any row contains a component container with a fourth importance level, and any row contains at least one component container with a fifth importance level, check if any row is full. If any row is not full, adjust the width of the ninth component of the component container with a fifth importance level in any row according to the first preset adjustment strategy; and / or,

[0234] If any column has a component container with a fourth importance level and any column has at least one component container with a fifth importance level, check whether any column is full. If any column is not full, adjust the height of the ninth component of the component container with a fifth importance level in any column according to the second preset adjustment strategy.

[0235] In this embodiment of the disclosure, when there are high-level importance levels and low-level importance levels within the layout container, if there is a low-level importance level component container in the row or column where the component container corresponding to the high-level importance level is located, but the blank area is not completely filled, i.e., not fully occupied, then the size of the unfilled blank area can still be allocated to the first size of the component container corresponding to the low-level importance level in the row and column based on the first preset adjustment strategy and the second preset adjustment strategy.

[0236] In this embodiment of the disclosure, the first preset adjustment strategy may include: allocating the width corresponding to the unoccupied area to the width of the ninth component of at least one component container; and / or,

[0237] The second preset adjustment strategy may include: allocating the height corresponding to the unoccupied area to the height of the ninth component of at least one component container.

[0238] In this embodiment of the disclosure, for example, when there is remaining width in the layout container (i.e., not fully occupied), the method of allocating the width corresponding to the unoccupied area to the ninth component width of at least one component container may include, but is not limited to: fine-tuning the component width of one or more component containers in the row corresponding to the blank area, such as increasing the width of each component by at least the size corresponding to the smallest unit, or increasing the width of each component by a calculated ratio; the increase may be made from the first component container in the row corresponding to the blank area, or from the last component container in the row corresponding to the blank area, or the width of a specified number of component containers in the blank area of ​​adjacent layout containers may be increased; the increased width of each component container may be the same or different.

[0239] In this embodiment of the disclosure, for example, when there is remaining (i.e., not fully occupied) layout height in the layout container, the method of allocating the height corresponding to the unoccupied area to the ninth component height of at least one component container may include, but is not limited to: fine-tuning the component height of one or more component containers in the column corresponding to the blank area, such as increasing the height of each component by at least the size corresponding to the smallest unit, or increasing the height of each component by a calculated ratio; the increase may be made from the first component container in the column corresponding to the blank area, or from the last component container in the column corresponding to the blank area, or the height of a specified number of component containers in the blank area of ​​adjacent layout containers may be increased; the increased height of each component container may be the same or different.

[0240] In this embodiment of the disclosure, when the layout container has both remaining width and remaining height, it can be determined whether to fill the layout container based on the method of having remaining width or the method of having remaining height, according to the layout direction.

[0241] In this embodiment of the disclosure, when the layout direction is horizontal, the layout container can be filled by having remaining width; when the layout direction is vertical, the layout container can be filled by having remaining height.

[0242] In this embodiment of the disclosure, after resizing any one or more component containers, the method may further include:

[0243] Resize the component content within the adjusted component container so that the component content fills the component container.

[0244] In this embodiment of the disclosure, in order to make the display of component content more harmonious and easier to view, the size of component content can be adjusted accordingly after the size of component container is adjusted.

[0245] In this embodiment of the disclosure, the size of the component content within the adjusted component container is adjusted so that the component content fills the component container, including:

[0246] Adjust the size of the component content proportionally to the adjustment ratio of the component container.

[0247] In this embodiment of the disclosure, the proportional adjustment of the component content size may include: increasing the width of the component content according to the expansion ratio of the component container in width; and / or increasing the height of the component content according to the expansion ratio of the component container in height.

[0248] In this disclosure, two detailed embodiments of the interface layout method are given below.

[0249] Example 1

[0250] The layout container can be 1920*1080 pixels, using a 24-grid layout. The width and height of the smallest unit are both 1 grid cell. Therefore, the layout container size = 24*24 smallest units (i.e., width and height are both 24). Based on external input data, 11 line charts need to be displayed. This confirms that the 11 line charts have identical content (all are line charts, all are line graphs, and all have the same importance level). The minimum size of the component container for each component is 6*6 smallest units. Since the component width of the component container equals the component height, a horizontal layout is adopted.

[0251] Calculate the number of layout rows for the component containers corresponding to the 11 line charts:

[0252] Number of base columns = layout width of layout container (24) / base width (here we choose the minimum width of component container 6) = 24 / 6 = 4;

[0253] Number of layout rows = Number of component containers (11) / Number of base columns = 11 / 4 = 2...3; If there is a remainder: add 1 row, the number of layout rows = 2 + 1 = 3, that is, the number of layout rows is 3.

[0254] Calculate the number of layout columns for the component containers corresponding to the 11 line charts:

[0255] Number of layout columns = Number of component containers / Number of layout rows = 11 / 3 = 3...2; If there is a remainder: add 1 column, the number of layout columns = 3 + 1 = 4, that is, the number of layout columns is 4.

[0256] For rows and columns that are not fully occupied, the layout container can be filled according to certain rules: The extra 2 (remainder) in the layout column calculation refers to two additional component containers. These two component containers can be placed in the added columns, and within each added column, one component container can be added to each corresponding layout row in a top-to-bottom order, until the two additional component containers are set. That is, one component container is added to the first row and one to the second row, for example... Figure 8 As shown.

[0257] For the component containers corresponding to these 11 line charts, the determined layout row count is 3, and the layout column counts are 4 and 3 respectively (specifically, the first and second rows have 4 columns, and the third row has 3 columns). Since the height and width of the layout container are both 24, the calculated height of each row's component container should be 24 / 3 = 8, the width of each column's component container in the first two rows should be 24 / 4 = 6, and the width of each column's component container in the last row should be 24 / 3 = 8. Therefore, by adjusting the component containers within the layout container based on the calculated height and width of each row, the following can be obtained: Figure 9 The layout result is shown.

[0258] because Figure 9 There are no blank areas within the layout container, so there is no need to adjust the size of the component containers within the layout container again.

[0259] based on Figure 9 The layout container structure allows for further adjustment of the component content within the container based on the actual size of the container, ensuring the content fills the container. The adjusted layout diagram is shown below. Figure 10 As shown.

[0260] Example 2

[0261] The layout container can be 1920*1080 pixels, using a 24-grid layout. The width and height of the smallest unit are both 1 grid cell. Therefore, the layout container size = 24*24 smallest units (i.e., width and height are both 24). Based on external input data, the components to be displayed are 1 link diagram and 7 line charts. This indicates that the content of the link diagram and the 7 line charts are different. The link diagram is a block diagram, while the 7 line charts are line graphs. The block diagram has an importance level of 1, and the line graphs have an importance level of 2. Therefore, the component content is different, resulting in different importance levels, with the block diagram having a higher importance level than the line graphs. The link diagram has a high importance level, with a minimum size of 12*8 smallest units and a maximum size of 24*12 smallest units. Each line chart has a low importance level, with a minimum size of 6*6 smallest units.

[0262] Since the link diagram is of higher importance than the line diagram, and the link diagram is a single unit (i.e., its component container is the largest component container in terms of area), and the minimum size of the link diagram is wider than its height, the single link diagram and the seven line diagrams are laid out horizontally.

[0263] Since link diagrams are of higher importance than line charts, when placing link diagrams and line charts within a layout container, the link diagram should be placed in a prominent position within the layout container first, such as... Figure 11 The top left corner is shown, and then 7 line charts are placed in inconspicuous positions.

[0264] The area corresponding to a non-prominent location can be calculated using the following method: the size of the layout container (i.e., the second size) minus the sum of the sizes of the component containers (i.e., the one link diagram) corresponding to the higher importance level. The calculation yields: the size of the area in the entire row without component containers (i.e., the one link diagram) corresponding to the higher importance level = 24 * (24 - 8) = 24 * 16 minimum units; the size of the blank area in the row with component containers corresponding to the higher importance level = (24 - 12) * 8 = 12 * 8 minimum units.

[0265] Since there is only one link diagram, the number of layout rows and columns corresponding to this link diagram is 1. For the 7 line charts, the number of layout rows and columns required for the 7 line charts can be calculated according to the calculation scheme for the number of layout rows and columns introduced above.

[0266] Calculate the number of layout rows for the component containers corresponding to the 7 line charts:

[0267] Number of base columns = layout width of layout container / base width (here we choose the minimum width of component container 6) = 24 / 6 = 4;

[0268] Number of layout rows = Number of component containers (7) / Number of base columns = 7 / 4 = 1...3; Remainder: Add 1 row, 1 (quotient is 1) + 1 (added 1 row) = 2, that is, number of layout rows = 2.

[0269] Calculate the number of layout columns for the component containers corresponding to the 7 line charts:

[0270] Number of layout columns = Number of component containers (7) / Number of layout rows = 7 / 2 = 3...1; There is a remainder. Since there is a higher-level link diagram, for this remainder, first check if there is a blank area in the row where the link diagram is located. It is confirmed that there is a blank area. Then check if the blank area can accommodate the component container with a remainder of 1 (i.e., one component container left). It is confirmed that the blank area can accommodate the remaining component container. Therefore, there is no need to add a column to accommodate the remaining component container.

[0271] Based on the above results and the calculated number of layout rows and columns, one link diagram and seven line diagrams can be placed, as follows: Figure 12 As shown.

[0272] because Figure 12 There are blank areas within the layout container, so the size of the component containers within the layout container needs to be adjusted again.

[0273] The height of the component container can be increased proportionally to the height of each row's component container until it fills the entire height of the layout container:

[0274] Link graphs with high importance levels have a minimum height of 8 minimum units, while line graphs with low importance levels have a minimum height of 6 minimum units. Figure 12 It can be seen that the remaining 4 minimum units in height can be proportionally allocated to the link diagram and the line chart. The height of the link diagram is 8 + 1 = 9 minimum units, and the height of the line chart is 6 + 1 = 7 minimum units. The remaining 1 minimum unit can be allocated to the row containing the main content, i.e., the first row containing the link diagram, to ensure the height is filled. After the above adjustments, the height of the first row is 10 minimum units, and the heights of the second and third rows are 7 minimum units.

[0275] Rows 2 and 3 are both line charts. The component containers have the same importance level, and the width of the component container = the width of the layout container (24) / the number of layout columns (3) = 24 / 3 = 8 minimum units. The importance level of the link chart in row 1 is higher than that of the line chart. The width of the line chart in row 1 is first aligned with the width of the line charts in rows 2 and 3. The blank area is filled by the link chart, such as... Figure 13 As shown.

[0276] based on Figure 13 The layout container structure allows for further adjustment of the component content within the container based on the actual size of the container, ensuring the content fills the container. The adjusted layout diagram is shown below. Figure 14 As shown.

[0277] In this disclosure, the embodiments include at least the following advantages:

[0278] 1. Currently, most competing products rely on manual interface design and development based on user requirements. Some competitors offer low-code designers, allowing for on-site user interface design and automatic front-end code generation. This patent, however, automatically generates a logically laid-out interface by converting external input data into components. This significantly reduces the need for manual interface design and development, saving manpower and time, avoiding the tedious process of manually adjusting component positions and sizes, and improving efficiency in meeting customer needs.

[0279] 2. The system includes components with pre-set minimum and maximum sizes to avoid issues such as overlapping, overflow, missing, unreadable, or excessive space occupation. The calculation of the number of layout rows and columns, as well as the number of layout containers required to accommodate all components, are based on the minimum size of the components (or can be calculated based on the system's default size or a user-specified size), improving the accuracy and rationality of the layout.

[0280] 3. The size of the layout container and component container is based on the "smallest unit". The smallest unit is determined by a grid method according to a certain screen resolution. In this embodiment, a grid system is used for layout, dividing the layout container into rows and columns of equal width to form a grid structure. The component size occupies one or more grid units. The starting coordinates of the component placement position are aligned with the starting coordinates of the grid unit, making the page layout more neat and uniform.

[0281] 4. The solution of this embodiment automatically lays out the components based on the determined layout position and layout direction, as well as the calculated number of layout rows and layout columns, thus avoiding the tedious process of manually adjusting the position and size of the components.

[0282] 5. The solutions disclosed herein significantly improve the rationality of the generative interface layout, further enhance the readability and aesthetics of the interface, and strengthen its adaptability to different devices and screen sizes. Furthermore, because the solutions disclosed herein save the manpower and time required for interface design and development, and avoid the tedious process of manually adjusting component sizes and positions, they can better meet customer needs.

[0283] This disclosure also provides an interface layout device, which may include:

[0284] The data module is configured to acquire external input data and represent it as a component for display. This component includes a component container and component content. The component container holds the component content, and the component content represents the external input data.

[0285] The layout module is configured to determine the number of layout rows and columns required to accommodate the component container within the layout container, based on the first size of the component container and the second size of the layout container.

[0286] The layout module is also configured to lay out component containers within a layout container based on the number of layout rows and columns.

[0287] In the embodiments disclosed herein, any of the foregoing interface layout methods are applicable to the interface layout device, and will not be described in detail here.

[0288] This disclosure also provides an electronic device 100, such as... Figure 15As shown, it may include:

[0289] One or more processors 101;

[0290] The memory 102 stores one or more computer programs that, when executed by the one or more processors 101, cause the one or more processors 101 to implement the interface layout method.

[0291] This disclosure also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the interface layout method.

[0292] This disclosure also provides a computer program product, which includes a computer program that, when executed by a processor, implements the interface layout method.

[0293] Those skilled in the art will understand that all or some of the functional modules / units disclosed above can be implemented as software, firmware, hardware, or suitable combinations thereof.

[0294] In hardware implementations, the division between functional modules / units mentioned in the above description does not necessarily correspond to the division of physical components; for example, a physical component may have multiple functions, or a function or step may be executed by several physical components working together.

[0295] Some or all of the physical components may be implemented as software executed by a processor, such as a central processing unit (CPU), digital signal processor, or microprocessor, or as hardware, or as an integrated circuit, such as an application-specific integrated circuit (ASIC). Such software may be distributed on a computer-readable medium, which may include computer storage media (or non-transitory media) and communication media (or transient media). As is known to those skilled in the art, the term computer storage media includes volatile and non-volatile, removable and non-removable media implemented in any method or technique for storing information (such as computer-readable instructions, data structures, program modules, or other data). Computer storage media include, but are not limited to, random access memory (RAM, more specifically SDRAM, DDR, etc.), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory (FLASH) or other disk storage; read-only optical disc (CD-ROM), digital versatile disc (DVD) or other optical disc storage; magnetic cartridges, magnetic tapes, disk storage or other magnetic storage; and any other media that can be used to store desired information and can be accessed by a computer. Furthermore, as is known to those skilled in the art, communication media typically contain computer-readable instructions, data structures, program modules, or other data in modulated data signals such as carrier waves or other transmission mechanisms, and may include any information delivery medium.

[0296] This disclosure has disclosed exemplary embodiments, and although specific terminology has been used, it is for general illustrative purposes only and should not be construed as limiting. In some instances, it will be apparent to those skilled in the art that features, characteristics, and / or elements described in conjunction with particular embodiments may be used alone, or in combination with features, characteristics, and / or elements described in conjunction with other embodiments, unless otherwise expressly indicated. Therefore, those skilled in the art will understand that various changes in form and detail may be made without departing from the scope of this disclosure as set forth by the appended claims.

Claims

1. A method for interface layout, characterized in that, The method includes: Acquire external input data and represent the external input data as a component for display; the component includes a component container and component content; the component container is used to hold the component content, and the component content is used to characterize the external input data; The number of layout rows and columns required to accommodate the component container in the layout container are determined based on the first size of the component container and the second size of the layout container. The component container is laid out in the layout container based on the number of layout rows and the number of layout columns.

2. The interface layout method according to claim 1, characterized in that, Before determining the components required for the external input data, the method further includes any one or more of the following: Define the minimum and maximum sizes that the component container can adopt; Define the component types to which the different component contents belong and the importance level corresponding to each component type; and, Define the layout positions corresponding to the different importance levels.

3. The interface layout method according to claim 1 or 2, characterized in that, Determining the number of layout rows and columns required to accommodate the component container within the layout container based on the first size of the component container and the second size of the layout container includes: The layout orientation of the component container in the layout container is determined based on the first dimension; The number of layout rows and the number of layout columns are determined based on the layout direction, the first size, and the second size.

4. The interface layout method according to claim 3, characterized in that, Determining the layout orientation of the component container within the layout container based on the first size includes: Obtain the importance level corresponding to the content of the component; Based on the determined number of importance levels and the number of component containers, the layout orientation of the component containers is determined according to the first size.

5. The interface layout method according to claim 3, characterized in that, When the layout direction is horizontal, determining the number of layout rows and the number of layout columns based on the layout direction, the first dimension, and the second dimension includes: The number of layout rows is determined by performing a first calculation based on the number of component containers, the first size, and the second size. A second calculation is performed based on the number of component containers and the number of layout rows to determine the number of layout columns.

6. The interface layout method according to claim 3, characterized in that, When the layout direction is vertical, determining the number of layout rows and the number of layout columns based on the layout direction, the first dimension, and the second dimension includes: A third calculation is performed based on the number of component containers, the first size, and the second size to determine the number of layout columns; A fourth calculation is performed based on the number of component containers and the number of layout columns to determine the number of layout rows.

7. The interface layout method according to claim 1 or 2, characterized in that, The step of laying out the component container in the layout container based on the number of layout rows and the number of layout columns includes: The final second size of the layout container is determined based on the number of layout rows and the number of layout columns; In the layout container having the final second size, each of the component containers is respectively placed inside the layout container.

8. The interface layout method according to claim 1 or 2, characterized in that, Before laying out the component container in the layout container based on the number of layout rows and the number of layout columns, the method further includes: The layout position of the corresponding component container within the layout container is determined based on the component content.

9. The interface layout method according to claim 8, characterized in that, Determining the layout position of the corresponding component container within the layout container based on the component content includes: The component type is determined based on the component content; The importance level of the component content is determined based on the component type to which the component content belongs; The layout position of the component container corresponding to the component content within the layout container is determined based on the importance level.

10. The interface layout method according to claim 8, characterized in that, The step of laying out the component container in the layout container based on the number of layout rows and the number of layout columns includes: The component container is laid out in the layout container based on the layout position, the number of layout rows, and the number of layout columns.

11. The interface layout method according to claim 10, characterized in that, The step of laying out the component container in the layout container based on the layout position, the number of layout rows, and the number of layout columns includes: The final second size of the layout container is determined based on the number of layout rows and the number of layout columns; In the layout container having the final second size, each component container is placed in its corresponding layout position within the layout container according to the layout direction corresponding to the number of layout rows and the number of layout columns.

12. The interface layout method according to claim 1, characterized in that, After laying out the component container in the layout container based on the number of layout rows and the number of layout columns, the method further includes: If the component containers do not fill the layout container, the size of any one or more of the component containers is adjusted so that all the component containers fill the layout container.

13. An electronic device, characterized in that, include: One or more processors; A memory having stored one or more computer programs that, when executed by one or more processors, cause the one or more processors to implement the interface layout method according to any one of claims 1-12.

14. A computer-readable storage medium storing a computer program that, when executed by a processor, implements the interface layout method according to any one of claims 1-12.

15. A computer program product comprising a computer program that, when executed by a processor, implements the interface layout method according to any one of claims 1-12.

Images