Grid layout conversion method and system, readable storage medium

Abstract

The application provides a grid layout conversion method and system, and a readable storage medium. The grid layout conversion method comprises the following steps: in response to detecting that the number of rows and columns of a grid system changes, performing proportional calculation according to the number of rows and columns of an original grid system and the number of rows and columns of a new grid system to obtain column proportion and row proportion; grouping a plurality of layout items in the original grid system by rows and sorting the layout items by columns in each row; for each sorted layout item, performing proportional conversion according to the column proportion and the row proportion to obtain an initial layout; and when a layout item of the initial layout exceeds the boundary of the new grid system, adjusting the layout item; when the layout items of the initial layout overlap, adjusting the layout items, and the adjustment method comprises one or a combination of the following: two-layer nested loops, an intelligent scaling strategy or an overflow processing mechanism. Through the technical solution of the application, the relative position relationship of the layout items can be maintained during grid conversion, and the problem of layout item overlap can be intelligently processed.

Description

Technical Field

[0001] This application relates to the field of grid layout conversion technology, and more specifically, to a grid layout conversion method and system, and a readable storage medium. Background Technology

[0002] Grid layout technology is an interface design method based on a regular grid array. By dividing the canvas into regular grid units, it achieves precise positioning and flexible layout of visual content items. Existing grid layout systems have significant limitations when dynamically adjusting the number of grids, specifically manifested in the following problems: The cost of global rearrangement: While completely rearranging all elements can adapt to the new grid, it completely disrupts the user's original visual logic and layout intent, significantly reducing operational predictability and user experience. The rigidity of fixed-position strategies: Some systems maintain the absolute coordinates of layout items to cope with grid changes. Although this avoids element rearrangement, it leads to negative effects, as newly added grid areas are not effectively utilized. The inherent defects of proportional scaling: Traditional methods use a global proportional scaling strategy. When the number of grids changes, all layout items adjust their size by a fixed ratio, but the ratio is not necessarily an integer and requires further processing. This method easily leads to component overlap or misalignment. Lack of intelligent conflict resolution: Existing technologies lack effective conflict resolution mechanisms. When layout items overlap, they cannot intelligently adjust their position and size. Summary of the Invention

[0003] This application aims to solve or improve the aforementioned technical problems.

[0004] Therefore, the primary objective of this application is to provide a grid layout conversion method.

[0005] The second objective of this application is to provide a grid layout conversion system.

[0006] A third objective of this application is to provide a grid layout conversion system.

[0007] The fourth objective of this application is to provide a readable storage medium.

[0008] To achieve the first objective of this application, the technical solution of the first aspect of this application provides a grid layout conversion method, comprising: in response to detecting a change in the number of rows and columns of the grid system, performing proportional calculations based on the number of rows and columns of the original grid system and the number of rows and columns of the new grid system to obtain column ratios and row ratios; grouping multiple layout items in the original grid system by row and sorting them by column within each row; performing proportional conversion on each sorted layout item based on the column ratio and row ratio to obtain an initial layout; adjusting the layout items when the layout items of the initial layout exceed the boundary of the new grid system; and adjusting the layout items when they overlap, wherein the adjustment method includes one or a combination of the following: two nested loops, intelligent scaling strategies, or overflow handling mechanisms.

[0009] According to the grid layout conversion method provided in this application, firstly, in response to the detection of a change in the number of rows and columns in the grid system, the column ratio and row ratio are calculated based on the number of rows and columns in the original grid system and the new grid system. Then, multiple layout items in the original grid system are grouped by row and sorted by column within each row. For each sorted layout item, a proportional conversion is performed based on the column ratio and row ratio to obtain the initial layout. For the initial layout, when layout items exceed the boundary of the new grid system, the layout items are adjusted. When layout items overlap in the initial layout, adjustments are made through two nested loops, intelligent scaling strategies, or overflow handling mechanisms. Through proportional conversion and layout sorting, the relative positional relationship of layout items is effectively maintained, making the layout conversion more natural. Compared with simple proportional scaling, the overall structure of the layout is better preserved. The multi-level conflict resolution strategy effectively handles the problem of overlapping layout items, resolving conflicts with minimal changes to the original layout. For layout items that exceed the boundaries, a strategy of adjusting their position first and then their size is adopted to maintain the visibility and functional integrity of the layout items. Compared with simple truncation, this strategy can better maintain the availability of layout items.

[0010] In some technical solutions, optionally, for each sorted layout item, a proportional transformation is performed according to the column ratio and row ratio to obtain an initial layout, including: for each sorted layout item, a proportional transformation is performed according to the column ratio and row ratio to obtain the initial position and size of each layout item in the new grid system; and coordinate correction is performed on adjacent layout items.

[0011] In this technical solution, each sorted layout item is proportionally transformed according to the column and row ratios to obtain an initial layout. Specifically, each sorted layout item is first proportionally transformed according to the column and row ratios to obtain the initial position and size of each layout item in the new grid system. Then, coordinate correction is performed on adjacent layout items. Specifically, the x-coordinate and width w of the layout item are multiplied by the column ratio and rounded down. The y-coordinate and height h of the layout item are multiplied by the row ratio and rounded down. To maintain the continuity of the layout, coordinate correction of adjacent layout items can solve the problem of inaccurate coordinates of originally adjacent content items caused by rounding down, resulting in separation.

[0012] In some technical solutions, optionally, when layout items overlap in the initial layout, the layout items are adjusted, including: when there is spatial overlap between layout items in the initial layout, the layout items are adjusted through two nested loops to find available positions for the overlapping layout items that do not overlap with other layout items; when no suitable position can be found, the size of the layout items is reduced through a preset strategy and a new available position is found; when there is no available space in the grid, the layout items are overflowed.

[0013] In this technical solution, when layout items overlap in the initial layout, the layout items are adjusted. Specifically, firstly, when there is spatial overlap between layout items in the initial layout, the layout items are adjusted through two nested loops to find available positions for the overlapping layout items that do not overlap with other layout items. When no suitable position can be found, the size of the layout item is reduced using a preset strategy, and a new available position is searched. When there is no available space within the grid, the layout item overflows. This multi-layered conflict resolution strategy effectively handles the problem of overlapping layout items, resolving conflicts with minimal alteration to the original layout.

[0014] In some technical solutions, optionally, layout items are adjusted through two nested loops to find available positions for overlapping layout items that do not overlap with other layout items. This includes: traversing all possible vertical positions through the outer loop, with the loop condition that the layout item does not exceed the bottom boundary of the grid; and traversing all possible horizontal positions through the inner loop, with the loop condition that the layout item does not exceed the right boundary of the grid.

[0015] In this technical solution, layout items are adjusted using two nested loops to find available positions where overlapping layout items do not overlap with other layout items. Specifically, the outer loop iterates through all possible vertical positions, with the loop condition that the layout item does not exceed the bottom boundary of the grid. Then, the inner loop iterates through all possible horizontal positions, with the loop condition that the layout item does not exceed the right boundary of the grid. In essence, when overlapping layout items are detected, the system initiates the position adjustment process. The system scans the entire grid from left to right and from top to bottom, searching for a position that does not overlap with other layout items. This is specifically implemented using two nested loops: the outer loop `for(lettestY=0;testY<=newRows-h;testY++)` iterates through all possible vertical positions (y-coordinate), where `newRows-h` ensures that the layout item does not exceed the bottom boundary of the grid. The inner loop `for(lettestX=0;testX<=newCols-w;testX++)` iterates through all possible horizontal positions (x-coordinate), where `newCols-w` ensures that the layout item does not exceed the right boundary of the grid. This boundary condition design ensures that layout items are always completely within the mesh, preventing any items from exceeding the mesh boundaries. This double-loop approach ensures that the system systematically checks every possible location in the mesh until the first usable location is found or it is confirmed that no usable location exists.

[0016] In some technical solutions, optionally, the layout items are adjusted by two nested loops to find available positions for overlapping layout items that do not overlap with other layout items. This also includes: for each position combination, creating a test rectangle and checking whether the test rectangle overlaps with the already placed layout items.

[0017] This technical solution adjusts layout items through two nested loops, finding available positions for overlapping layout items that do not overlap with other layout items. It also includes creating a test rectangle for each position combination and checking if the test rectangle overlaps with already placed layout items. Every possible position is tested until a suitable position is found, ensuring the system systematically checks every possible position in the grid until the first available position is found or it is confirmed that no available position exists.

[0018] In some technical solutions, optionally, the size of the layout item is reduced by a preset strategy to find a new available position, including: reducing the width of the layout item and searching for a new available position through two nested loops; if no available position is found, reducing the height of the layout item and searching for a new available position through two nested loops; if no available position is found, shrinking the layout item to a preset size and placing it in the first available position.

[0019] In this technical solution, the size of the layout item is reduced using a preset strategy to find a usable position. Specifically, the width of the layout item is first reduced, and a two-level nested loop is used to search for a usable position. If no usable position is found, the height of the layout item is reduced, and a two-level nested loop is used to search for a usable position. If no usable position is found, the layout item is shrunk to a preset size and placed in the first usable position. In more extreme cases, if a suitable position cannot be found, the layout item size will be reduced. First, the width of the layout item is reduced while the height remains unchanged, and then a two-level nested loop is used again to search for a usable position. If adjusting the width still fails to place the item, the height is reduced while the width remains unchanged, and then a two-level nested loop is used again to search for a usable position. In the most extreme case, the layout item will be shrunk to a minimum size of 1×1 and placed in the first usable position.

[0020] In some technical solutions, the layout item may optionally be overflowed, including: determining whether there is enough space in the bottom row of the currently placed layout items to place the layout item; if there is enough space, placing the layout item at the end of the bottom row; if there is not enough space, placing the layout item at the beginning of the next row.

[0021] In this technical solution, overflow handling is implemented for layout items. Specifically, it checks if there is enough space in the bottom row of currently placed layout items. If there is enough space, the layout item is placed at the end of the bottom row. If there is not enough space, the layout item is placed at the beginning of the next row. This can be understood as allowing downward overflow when there is absolutely no available space within the grid. The system finds the largest y-coordinate among the currently placed layout items (the bottom row). It checks if there is enough space in the bottom row to place the current layout item. If there is enough space in the bottom row, the layout item is placed at the end of the bottom row. If there is insufficient space in the bottom row, the layout item is placed at the beginning of the next row. In this case, the layout item retains its original size and is not shrunk.

[0022] To achieve the second objective of this application, the technical solution of the second aspect of this application provides a grid layout conversion system, comprising: a scaling module, configured to, in response to detecting a change in the number of rows and columns of the grid system, perform scaling calculations based on the number of rows and columns of the original grid system and the number of rows and columns of the new grid system to obtain column scaling and row scaling; a sorting module, configured to group multiple layout items in the original grid system by row and sort them by column within each row; an initial conversion module, configured to perform scaling conversion on each sorted layout item based on the column scaling and row scaling to obtain an initial layout; a boundary processing module, configured to adjust the layout items when the layout items of the initial layout exceed the boundary of the new grid system; and an overlap adjustment module, configured to adjust the layout items when they overlap, wherein the adjustment method includes one or a combination of the following: two nested loops, intelligent scaling strategy, or overflow handling mechanism.

[0023] The raster layout conversion system provided in this application includes a scaling module, a sorting module, an initial conversion module, a boundary processing module, and an overlap adjustment module. The scaling module, in response to a detected change in the number of rows and columns in the raster system, calculates the column and row ratios based on the original and new raster system's row and column numbers. The sorting module groups multiple layout items in the original raster system by row and sorts them by column within each row. The initial conversion module performs a scaling conversion on each sorted layout item based on the column and row ratios to obtain an initial layout. The boundary processing module adjusts the layout items when they exceed the boundaries of the new raster system. The overlap adjustment module adjusts the layout items when they overlap, using methods such as nested loops, intelligent scaling strategies, or overflow handling mechanisms. Through scaling conversion and layout sorting, the relative positional relationships of the layout items are effectively maintained, making the layout conversion more natural. Compared to simple proportional scaling, it better preserves the overall structure of the layout. Employing a multi-layered conflict resolution strategy effectively handles layout item overlap issues, resolving conflicts with minimal alteration to the original layout. For layout items exceeding boundaries, a strategy of first adjusting their position and then their size is used to maintain their visibility and functional integrity. Compared to simple truncation, this approach better preserves the usability of layout items.

[0024] To achieve the third objective of this application, the technical solution of the third aspect of this application provides a grid layout conversion system, including: a memory and a processor, wherein the memory stores a program or instructions that can be run on the processor, and when the processor executes the program or instructions, it implements the grid layout conversion method of any one of the technical solutions of the first aspect, thus having the technical effects of any one of the technical solutions of the first aspect, which will not be elaborated here.

[0025] To achieve the fourth objective of this application, the technical solution of the fourth aspect of this application provides a readable storage medium storing a program or instructions thereon. When the program or instructions are executed by a processor, they implement the steps of the grid layout conversion method of any one of the technical solutions of the first aspect, and thus have the technical effects of any one of the technical solutions of the first aspect, which will not be repeated here.

[0026] Additional aspects and advantages of this application will become apparent in the following description or may be learned by practice of this application. Attached Figure Description

[0027] The above and / or additional aspects and advantages of this application will become apparent and readily understood from the description of the embodiments taken in conjunction with the following drawings, in which:

[0028] Figure 1 This is a flowchart illustrating the steps of a grid layout conversion method according to an embodiment of this application;

[0029] Figure 2 This is a flowchart illustrating the steps of a grid layout conversion method according to an embodiment of this application;

[0030] Figure 3 This is a flowchart illustrating the steps of a grid layout conversion method according to an embodiment of this application;

[0031] Figure 4 This is a flowchart illustrating the steps of a grid layout conversion method according to an embodiment of this application;

[0032] Figure 5 This is a flowchart illustrating the steps of a grid layout conversion method according to an embodiment of this application;

[0033] Figure 6 This is a flowchart illustrating the steps of a grid layout conversion method according to an embodiment of this application;

[0034] Figure 7 This is a flowchart illustrating the steps of a grid layout conversion method according to an embodiment of this application;

[0035] Figure 8 This is a schematic block diagram of a grid layout conversion system according to an embodiment of this application;

[0036] Figure 9 This is a schematic block diagram of a grid layout conversion system according to an embodiment of this application;

[0037] Figure 10 This is a flowchart illustrating a grid layout conversion method according to an embodiment of this application;

[0038] Figure 11 This is a flowchart illustrating a grid layout conversion method according to an embodiment of this application.

[0039] Figure label:

[0040] 10: Grid layout conversion system; 110: Scale calculation module; 120: Sorting module; 130: Initial conversion module; 140: Boundary processing module; 150: Overlap adjustment module; 20: Grid layout conversion system; 300: Memory; 400: Processor. Detailed Implementation

[0041] To better understand the above-mentioned objectives, features, and advantages of this application, the application will be further described in detail below with reference to the accompanying drawings and specific embodiments. It should be noted that, unless otherwise specified, the embodiments and features described in these embodiments can be combined with each other.

[0042] Many specific details are set forth in the following description in order to provide a full understanding of this application. However, this application may also be implemented in other ways different from those described herein. Therefore, the scope of protection of this application is not limited to the specific embodiments disclosed below.

[0043] The following reference Figures 1 to 11 This application describes a grid layout conversion method and system, and a readable storage medium, based on some embodiments of this application.

[0044] like Figure 1 As shown, an embodiment of the first aspect of this application provides a grid layout conversion method, including the following steps:

[0045] Step S102: In response to the detection of a change in the number of rows and columns in the grid system, the column ratio and row ratio are calculated based on the number of rows and columns in the original grid system and the number of rows and columns in the new grid system.

[0046] Step S104: Group multiple layout items in the original grid system by row and sort them by column within each row;

[0047] Step S106: For each sorted layout item, perform proportional conversion based on the column ratio and row ratio to obtain the initial layout;

[0048] Step S108: For the initial layout, when the layout items of the initial layout exceed the boundary of the new grid system, adjust the layout items;

[0049] Step S110: When layout items overlap in the initial layout, adjust the layout items using one or a combination of the following methods: two nested loops, smart scaling strategy, or overflow handling mechanism.

[0050] According to the grid layout conversion method provided in this embodiment, firstly, in response to the detection of a change in the number of rows and columns in the grid system, the column ratio and row ratio are calculated based on the number of rows and columns in the original grid system and the number of rows and columns in the new grid system. Then, multiple layout items in the original grid system are grouped by row and sorted by column within each row. For each sorted layout item, a proportional conversion is performed based on the column ratio and row ratio to obtain the initial layout. For the initial layout, when the layout items exceed the boundary of the new grid system, the layout items are adjusted. When layout items overlap in the initial layout, the layout items are adjusted through two nested loops, intelligent scaling strategies, or overflow handling mechanisms. Through proportional conversion and layout sorting, the relative positional relationship of the layout items is effectively maintained, making the layout conversion more natural. Compared with simple proportional scaling, the overall structure of the layout can be better preserved. The multi-level conflict resolution strategy can effectively handle the problem of overlapping layout items, resolving conflicts with minimal changes to the original layout. For layout items that exceed the boundaries, a strategy of adjusting their position first and then their size is adopted to maintain the visibility and functional integrity of the layout items. Compared with simple truncation, this strategy can better maintain the availability of layout items.

[0051] like Figure 2 As shown, a grid layout conversion method according to an embodiment of this application involves proportionally converting each sorted layout item according to the column ratio and row ratio to obtain an initial layout, including the following steps:

[0052] Step S202: For each sorted layout item, perform a scaling transformation based on the column ratio and row ratio to obtain the initial position and size of each layout item in the new grid system;

[0053] Step S204: Perform coordinate correction on adjacent layout items.

[0054] In this embodiment, for each sorted layout item, a proportional transformation is performed based on the column and row ratios to obtain the initial layout. Specifically, firstly, for each sorted layout item, a proportional transformation is performed based on the column and row ratios to obtain the initial position and size of each layout item in the new grid system. Then, coordinate correction is performed on adjacent layout items. Specifically, the x-coordinate and width w of the layout item are multiplied by the column ratio and rounded down. The y-coordinate and height h of the layout item are multiplied by the row ratio and rounded down. To maintain the continuity of the layout, coordinate correction is performed on adjacent layout items, which can solve the problem of inaccurate coordinates of originally adjacent content items caused by rounding down, resulting in them being separated.

[0055] like Figure 3 As shown, a grid layout conversion method according to an embodiment of this application adjusts the layout items when they overlap in the initial layout, specifically including the following steps:

[0056] Step S302: When there is spatial overlap between layout items in the initial layout, adjust the layout items through two nested loops to find available positions for the overlapping layout items that do not overlap with other layout items.

[0057] Step S304: When no suitable location can be found, the size of the layout item is reduced using a preset strategy, and a new available location is searched.

[0058] Step S306: When there is no available space in the grid, overflow the layout item.

[0059] In this embodiment, when layout items overlap in the initial layout, the layout items are adjusted. Specifically, when there is spatial overlap between layout items in the initial layout, the layout items are adjusted through two nested loops to find available positions for the overlapping layout items that do not overlap with other layout items. When no suitable position can be found, the size of the layout item is reduced using a preset strategy, and a new available position is searched. When there is no available space within the grid, the layout item overflows. This multi-layered conflict resolution strategy effectively handles the layout item overlap problem, resolving conflicts with minimal changes to the original layout.

[0060] like Figure 4 As shown, a grid layout conversion method according to an embodiment of this application adjusts layout items through two nested loops to find available positions for overlapping layout items that do not overlap with other layout items, including the following steps:

[0061] Step S402: Iterate through all possible vertical positions using an outer loop, where the loop condition for the outer loop is that the layout items do not exceed the bottom boundary of the grid.

[0062] Step S404: Iterate through all possible horizontal positions using an inner loop, with the loop condition being that the layout item does not exceed the right boundary of the grid.

[0063] In this embodiment, layout items are adjusted using two nested loops to find available positions where overlapping layout items do not overlap with other layout items. Specifically, the outer loop iterates through all possible vertical positions, with the loop condition that the layout item does not exceed the bottom boundary of the grid. Then, the inner loop iterates through all possible horizontal positions, with the loop condition that the layout item does not exceed the right boundary of the grid. It can be understood that when overlapping layout items are detected, the system initiates the position adjustment process. The system scans the entire grid from left to right and from top to bottom to find a position that does not overlap with other layout items. This is specifically implemented using two nested loops: the outer loop `for(lettestY=0;testY<=newRows-h;testY++)` iterates through all possible vertical positions (y-coordinate), where `newRows-h` ensures that the layout item does not exceed the bottom boundary of the grid. The inner loop `for(lettestX=0;testX<=newCols-w;testX++)` iterates through all possible horizontal positions (x-coordinate), where `newCols-w` ensures that the layout item does not exceed the right boundary of the grid. This boundary condition design ensures that layout items are always completely within the mesh, preventing any items from exceeding the mesh boundaries. This double-loop approach ensures that the system systematically checks every possible location in the mesh until the first usable location is found or it is confirmed that no usable location exists.

[0064] like Figure 5 As shown, the grid layout conversion method according to an embodiment of this application adjusts layout items through two nested loops to find available positions for overlapping layout items that do not overlap with other layout items, and further includes the following steps:

[0065] Step S502: For each position combination, create a test rectangle and check whether the test rectangle overlaps with the placed layout items.

[0066] In this embodiment, layout items are adjusted through two nested loops to find available positions for overlapping layout items that do not overlap with other layout items. This also includes creating a test rectangle for each position combination and checking whether the test rectangle overlaps with already placed layout items. Every possible position is tested until a suitable position is found, ensuring that the system systematically checks every possible position in the grid until the first available position is found or it is confirmed that no available position exists.

[0067] like Figure 6 As shown, a grid layout conversion method according to an embodiment of this application reduces the size of layout items and re-finds available positions through a preset strategy, including the following steps:

[0068] Step S602: Reduce the width of the layout item and find available positions through two nested loops;

[0069] Step S604: If no available position is found, reduce the height of the layout item and search for an available position using two nested loops;

[0070] Step S606: If no available space is found, shrink the layout item to the preset size and place it in the first available space.

[0071] In this embodiment, the layout item size is reduced using a preset strategy to re-find a usable position. Specifically, the width of the layout item is first reduced, and a two-level nested loop is used to search for a usable position. If no usable position is found, the height of the layout item is reduced, and a two-level nested loop is used to search for a usable position. If no usable position is found, the layout item is shrunk to a preset size and placed in the first usable position. Specifically, if a suitable position cannot be found, the layout item size will be reduced. First, the width of the layout item is reduced while the height remains unchanged, and then a two-level nested loop is used again to search for a usable position. If the width adjustment still fails to place the item, the height is reduced while the width remains unchanged, and then a two-level nested loop is used again to search for a usable position. In the most extreme case, the layout item will be shrunk to a minimum size of 1×1 and placed in the first usable position.

[0072] like Figure 7 As shown, a grid layout conversion method according to an embodiment of this application performs overflow processing on layout items, including the following steps:

[0073] Step S702: Determine whether there is enough space in the bottom row of the currently placed layout items to place layout items;

[0074] Step S704: If there is enough space, place the layout item at the end of the bottom row;

[0075] Step S706: If there is not enough space, place the layout item at the beginning of the next line.

[0076] In this embodiment, overflow handling of layout items is performed by determining whether there is enough space in the bottom row of currently placed layout items. If there is enough space, the layout item is placed at the end of the bottom row. If there is not enough space, the layout item is placed at the beginning of the next row. It can be understood that when there is absolutely no available space within the grid, downward overflow is allowed. The system will find the largest y-coordinate among the currently placed layout items (the bottom row). It will check whether there is enough space in the bottom row to place the current layout item. If there is enough space in the bottom row, the layout item is placed at the end of the bottom row. If there is insufficient space in the bottom row, the layout item is placed at the beginning of the next row. In this case, the layout item will maintain its original size and will not be shrunk.

[0077] like Figure 8 As shown, an embodiment of the second aspect of this application provides a grid layout conversion system 10, including: a scaling calculation module 110, used to calculate the column ratio and row ratio based on the number of rows and columns of the original grid system and the number of rows and columns of the new grid system in response to detecting a change in the number of rows and columns of the grid system; a sorting module 120, used to group multiple layout items in the original grid system by row and sort them by column within each row; an initial conversion module 130, used to perform a scaling conversion on each sorted layout item based on the column ratio and row ratio to obtain an initial layout; a boundary processing module 140, used to adjust the layout items when the layout items of the initial layout exceed the boundary of the new grid system; and an overlap adjustment module 150, used to adjust the layout items when they overlap, the adjustment method including one or a combination of the following: two nested loops, intelligent scaling strategy, or overflow handling mechanism.

[0078] The grid layout conversion system 10 provided in this embodiment includes a scaling module 110, a sorting module 120, an initial conversion module 130, a boundary processing module 140, and an overlap adjustment module 150. The scaling module calculates the column and row ratios based on the original and new grid system's row and column numbers in response to a detected change in the number of rows and columns in the grid system. The sorting module groups multiple layout items in the original grid system by row and sorts them by column within each row. The initial conversion module performs a scaling conversion on each sorted layout item based on the column and row ratios to obtain an initial layout. The boundary processing module adjusts the layout items when they exceed the boundaries of the new grid system. The overlap adjustment module adjusts the layout items when they overlap, using one or a combination of methods such as nested loops, intelligent scaling strategies, or overflow handling mechanisms. Through scaling conversion and layout sorting, the relative positional relationships of the layout items are effectively maintained, making the layout conversion more natural. Compared to simple proportional scaling, it better preserves the overall layout structure. Employing a multi-layered conflict resolution strategy effectively handles overlapping layout items, resolving conflicts with minimal alteration to the original layout. For layout items exceeding boundaries, a strategy of adjusting their position first, then their size, maintains their visibility and functional integrity, preserving usability better than simple truncation.

[0079] like Figure 9As shown, an embodiment of the third aspect of this application provides a grid layout conversion system 20, including a memory 300 and a processor 400. The memory 300 stores a program or instructions that can be run on the processor 400. When the processor 400 executes the program or instructions, it implements the steps of the grid layout conversion method of any one of the embodiments of the first aspect, and thus has the technical effects of any embodiment of the first aspect, which will not be repeated here.

[0080] An embodiment of the fourth aspect of this application provides a readable storage medium having a program or instructions stored thereon. When the program or instructions are executed by a processor, they implement the steps of the grid layout conversion method of any one of the embodiments of the first aspect, and thus have the technical effects of any embodiment of the first aspect described above, which will not be repeated here.

[0081] like Figure 10 and Figure 11 As shown, a grid layout conversion method according to a specific embodiment of this application is used for grid layout switching in scenarios such as self-service analysis visualization editors, dashboards, and drag-and-drop dashboards. Grid layout technology is an interface design method based on a regular grid array. By dividing the canvas into regular grid units, it achieves precise positioning and flexible layout of visual content items. This technology allows users to drag and drop various content items such as graphics, tables, filters, tabs, images, text, containers, and clocks onto the canvas, which automatically snaps to the nearest grid line. Users can also adjust the size of content items on the canvas through drag-and-drop operations, significantly reducing interface layout design time, improving design efficiency, and ensuring the neatness and consistency of the layout.

[0082] Grid system: Divides the page into columns of equal width and rows of equal height to form a grid layout system.

[0083] Layout item: A component placed in a grid system, with position (x, y) and size (w, h) attributes.

[0084] Overlap detection: Determines whether two layout items intersect in space.

[0085] Layout transformation: Recalculate the position and size of layout items when the number of rows and columns in the grid system changes.

[0086] Scale conversion: Calculate the new position and size of the layout items based on the scale relationship between the old and new grid systems.

[0087] Solution Overview:

[0088] This embodiment proposes an intelligent grid layout conversion algorithm, which mainly includes the following steps:

[0089] 1. Calculation of ratio: Calculate the conversion coefficient based on the ratio of rows and columns in the old and new grid systems.

[0090] 2. Initial transformation: Apply proportional transformation to all layout items to obtain the initial layout.

[0091] 3. Boundary handling: Detect and adjust layout items that exceed the boundaries.

[0092] 4. Overlap Detection and Adjustment: Detects overlaps between layout items and resolves conflicts through methods such as position adjustment and size reduction.

[0093] 3. Detailed implementation:

[0094] Step 1: Preprocessing and Proportion Calculation:

[0095] Calculate the ratio between the old and new grid systems:

[0096] The column ratio colRatio is calculated as: new column number newCols / original column number.

[0097] Calculate row ratio: rowRatio = number of new rows / number of original rows;

[0098] Step 2: Sort layout items:

[0099] To maintain the relative positions of the layout items, first sort the layout items, grouping them by row and then sorting them by column within each row:

[0100] Sorting rules: First group by Y-coordinate, then sort by X-coordinate from smallest to largest within each group.

[0101] Step 3: Initial Conversion:

[0102] Apply the aspect ratio conversion obtained in step 1 to all layout items to get a new initial layout;

[0103] The x and w attributes are multiplied by colRatio and rounded down;

[0104] The y and h attributes are multiplied by rowRatio and rounded down.

[0105] Step 4: Correct adjacent layout items:

[0106] To maintain layout continuity, coordinate corrections are performed on adjacent layout items.

[0107] This measure is to address the issue of inaccurate coordinates of originally adjacent content items caused by rounding down, which leads to them being separated.

[0108] Step 5: Boundary Processing

[0109] Detect and adjust layout items that exceed the boundaries;

[0110] Iterate through all layout items;

[0111] If x + w > newCols, the number of columns exceeds the boundary.

[0112] If newCols-w≥0, x=newCols-w, and w remains unchanged;

[0113] Otherwise, x=0, w=newCols, meaning this term is placed in the top left corner for later processing.

[0114] The same logic applies to layout items in the y-direction.

[0115] Step 6: Overlap Detection and Adjustment:

[0116] 6.1. Detecting overlap: When overlap between layout items is detected, the system will initiate the position adjustment process.

[0117] 6.2. Locating available locations:

[0118] The system will scan the entire grid from left to right and from top to bottom to find a position that does not overlap with other layout items.

[0119] The specific implementation uses two nested loops:

[0120] The outer loop `for(let testY=0; testY<=newRows-h; testY++)` iterates through all possible vertical positions (y-coordinates), where `newRows-h` ensures that the layout items do not exceed the bottom boundary of the grid.

[0121] The inner loop `for(let testX=0; testX<=newCols-w; testX++)` iterates through all possible horizontal positions (x-coordinates), where `newCols-w` ensures that the layout items do not exceed the right boundary of the grid.

[0122] This boundary condition design ensures that the layout items are always completely inside the grid, and that no part of the layout items will exceed the grid.

[0123] For each position combination (testX, testY), the system creates a test rectangle and checks whether it overlaps with the placed layout items.

[0124] This two-level loop ensures that the system can systematically check every possible location in the grid until the first usable location is found or it is confirmed that no location is usable.

[0125] Every possible location will be tested until a suitable location is found.

[0126] 6.3. Smart Scaling Strategy: If a suitable location cannot be found, the layout item size will be reduced.

[0127] First, try reducing the width of the layout item while keeping the height unchanged, and then execute the logic in 6.2 again.

[0128] If the device still cannot be placed after adjusting the width, try reducing the height while keeping the width unchanged, and then execute the logic in 6.2 again.

[0129] In the most extreme case, the layout item will be shrunk to a minimum size of 1×1 and placed in the first available position.

[0130] 6.4. Overflow Handling Mechanism: When there is absolutely no available space within the grid, if downward overflow is allowed:

[0131] The system will find the largest y-coordinate (bottom row) among the currently placed layout items.

[0132] Check if there is enough space in the bottom row to place the current layout items.

[0133] If there is enough space in the bottom row, place the layout item at the end of the bottom row.

[0134] If there is not enough space in the bottom row, the layout item will be placed at the beginning of the next row.

[0135] In this case, the layout item will retain its original size and will not be shrunk.

[0136] 6.5. Layout Recalculation: After the current item's position is adjusted, if necessary (e.g., when there is insufficient space in the bottom row and the layout item needs to be placed on the next line), the layout position of the current item will be recalculated.

[0137] This algorithm ensures that all layout items are arranged as reasonably as possible within a limited grid space, while making intelligent size adjustments when necessary to avoid overlapping conflicts between layout items.

[0138] Specifically, such as Figure 10 As shown, the overall process of the grid layout conversion method is as follows: Step S802: Input: new and old grid sizes and original layout; Step S804: preprocessing and scale calculation; Step S806: layout sorting; Step S808: initial scale conversion; Step S810: correct adjacent layout items; Step S812: boundary detection and adjustment; Step S814: overlap detection and adjustment; Step S816: output: adjusted layout.

[0139] like Figure 11As shown, the overlap detection and adjustment process is as follows: Step S902: Start detecting overlap; Step S904: Determine if overlap exists? If it exists, proceed to step S906; if it does not exist, proceed to step S932; Step S906: Search for available positions from left to right and from top to bottom (testY:0 to newRows-h)(testX:0 to newCols-w); Step S908: Determine if an available position is found? If found, proceed to step S922; if not found, proceed to step S912; Step S912: Determine if component size > 1×1? If component size > 1×1, proceed to step S914; if component size ≤ 1×1, proceed to step S928; Step S914: Attempt to reduce the width (newW:w-1 to 1); Step S916: Determine if an available position is found? If found, proceed to step S922; if not found, proceed to step S918. Step S918: Try to reduce the height (newH: h-1 to 1). Step S920: Determine if a usable position is found? If found, proceed to step S922; if not found, proceed to step S924. Step S922: Use the found position. Step S924: Set to 1×1 and search for a position. Step S926: Determine if a usable position is found? If found, proceed to step S922; if not found, proceed to step S928. Step S928: Place below the canvas (at the end of the row with the largest y-value or at the beginning of the next row). Step S930: Determine if the current item's position needs to be recalculated? If recalculation is needed, proceed to step S904; if not, proceed to step S934. Step S932: Maintain the original position. Step S934: End the adjustment.

[0140] In summary, the beneficial effects of the embodiments of this application are as follows:

[0141] 1. Maintaining Relative Positional Relationships: By scaling and rearranging the layout, the relative positions of the layout items are effectively maintained, making layout transitions more natural. Compared to simple proportional scaling, this solution better preserves the overall structure of the layout.

[0142] 2. Intelligent Conflict Resolution: Employing a multi-layered conflict resolution strategy (position adjustment, size reduction), this solution effectively handles overlapping layout items. Compared to existing technologies that simply rearrange or ignore overlaps, this solution resolves conflicts with minimal alteration to the original layout.

[0143] 3. Intelligent Boundary Handling: For layout items that exceed the boundaries, a strategy of adjusting their position first and then their size is adopted to maintain the visibility and functional integrity of the layout items. Compared with simple truncation, this solution can better maintain the availability of layout items.

[0144] In this application, the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance; the term "multiple" refers to two or more unless otherwise expressly defined. The terms "install," "connect," "link," and "fix" should be interpreted broadly. For example, "connect" can mean a fixed connection, a detachable connection, or an integral connection; "link" can mean a direct connection or an indirect connection through an intermediate medium. Those skilled in the art can understand the specific meaning of the above terms in this application based on the specific circumstances.

[0145] In the description of this application, it should be understood that the terms "upper", "lower", "front", "rear", etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings. They are only for the convenience of describing this application and simplifying the description, and do not indicate or imply that the device or module referred to must have a specific orientation or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on this application.

[0146] In the description of this specification, the terms "one embodiment," "some embodiments," "specific embodiment," etc., refer to a specific feature, structure, material, or characteristic described in connection with that embodiment or example, which is included in at least one embodiment or example of this application. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples.

[0147] The above are merely preferred embodiments of this application and are not intended to limit this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A grid layout conversion method, characterized in that, include: In response to the detection of a change in the number of rows and columns in the raster system, the column ratio and row ratio are calculated based on the number of rows and columns in the original raster system and the number of rows and columns in the new raster system. The multiple layout items in the original grid system are grouped by row and sorted by column within each row; For each sorted layout item, a proportional conversion is performed based on the column ratio and the row ratio to obtain the initial layout; For the initial layout, when a layout item in the initial layout exceeds the boundary of the new grid system, the layout item is adjusted; When layout items overlap in the initial layout, the layout items are adjusted using one or a combination of the following methods: two nested loops, a smart scaling strategy, or an overflow handling mechanism.

2. The grid layout conversion method according to claim 1, characterized in that, The step of performing a proportional transformation on each sorted layout item according to the column ratio and the row ratio to obtain an initial layout includes: For each sorted layout item, a scaling transformation is performed based on the column ratio and the row ratio to obtain the initial position and size of each layout item in the new grid system; Perform coordinate correction on adjacent layout items.

3. The grid layout conversion method according to claim 1, characterized in that, When layout items overlap in the initial layout, adjusting the layout items includes: When there is spatial overlap between the layout items in the initial layout, the layout items are adjusted through two nested loops to find available positions for the overlapping layout items that do not overlap with other layout items. When a suitable location cannot be found, the layout item size is reduced using a preset strategy, and a new available location is searched. When there is no available space within the grid, the layout item will overflow.

4. The grid layout conversion method according to claim 3, characterized in that, The step of adjusting the layout items through two nested loops to find available positions for overlapping layout items that do not overlap with other layout items includes: The outer loop iterates through all possible vertical positions, with the loop condition being that the layout item does not exceed the bottom boundary of the grid. The layout is iterated through all possible horizontal positions by an inner loop, the loop condition of which is that the layout item does not exceed the right boundary of the grid.

5. The grid layout conversion method according to claim 4, characterized in that, The step of adjusting the layout items through two nested loops to find available positions for overlapping layout items that do not overlap with other layout items also includes: For each position combination, create a test rectangle and check whether the test rectangle overlaps with the placed layout items.

6. The grid layout conversion method according to claim 3, characterized in that, The step of reducing the size of layout items and finding new available locations through a preset strategy includes: Reduce the width of the layout item and find an available position through the two nested loops; If no available space is found, reduce the height of the layout item and search for an available space using the two nested loops. If no available space is found, the layout item is shrunk to a preset size and placed in the first available space.

7. The grid layout conversion method according to claim 3, characterized in that, The overflow handling of the layout item includes: Determine if there is enough space in the bottom row of the currently placed layout items to place the layout item; If there is enough space, place the layout item at the end of the bottom row; If there is not enough space, place the layout item at the beginning of the next line.

8. A grid layout conversion system, characterized in that, include: The scaling module is used to respond to the detection of a change in the number of rows and columns of the raster system by performing scaling calculations based on the number of rows and columns of the original raster system and the number of rows and columns of the new raster system to obtain the column scaling and row scaling. The sorting module is used to group multiple layout items in the original grid system by row and sort them by column within each row; The initial conversion module is used to perform proportional conversion on each sorted layout item according to the column ratio and the row ratio to obtain the initial layout. A boundary processing module is used to adjust the layout items when the layout items of the initial layout exceed the boundary of the new grid system. The overlap adjustment module is used to adjust the layout items when they overlap in the initial layout. The adjustment method includes one or a combination of the following: two nested loops, intelligent scaling strategy or overflow handling mechanism.

9. A grid layout conversion system, characterized in that, include: A memory and a processor, wherein the memory stores a program or instructions executable on the processor, and the processor, when executing the program or instructions, implements the steps of the grid layout conversion method as described in any one of claims 1 to 7.

10. A readable storage medium having a program or instructions stored thereon, characterized in that, When the program or the instructions are executed by the processor, they implement the steps of the grid layout conversion method as described in any one of claims 1 to 7.

Images