Big data-based equal-ratio adaptive grid layout system and control method

Abstract

The invention discloses an equal-ratio adaptive grid layout system based on big data and a control method, and relates to the technical field of grid layout adjustment. The equal-ratio adaptive grid layout system based on big data and the control method specifically comprise the following steps: S1, system initialization and configuration; s2, region division and attribute calculation; s3, performing equal-ratio adaptive layout adjustment; s4, performing dynamic adjustment; by dynamically calculating the number of grids and introducing equal-ratio adaptive layout adjustment, grid layout adaptation under different equipment screen sizes is realized, and the flexibility and compatibility of the layout are greatly improved. And secondly, through application of a region recognition algorithm and a deep learning model, the accuracy and the intelligent degree of region division are improved, and layout adjustment is more accurate and efficient. In addition, the method also supports dynamic grid adjustment and user-defined layout, allows the user to carry out personalized setting according to own requirements, and enhances user experience.

Description

Technical Field

[0001] The present invention relates to the technical field of grid layout adjustment, and particularly to an equal-ratio adaptive grid layout system and a control method based on big data. Background Art

[0002] The grid layout of a screen interface is a method of dividing the screen space into a series of grid cells for organizing and arranging content therein. This method is very common in web design, mobile application interface design, and desktop application interface design, and it provides a structured and consistent way to layout elements. The grid layout is based on a two-dimensional grid system composed of rows and columns. Designers can define the number of rows and columns of the grid, as well as the size of each row and column according to needs. Then, interface elements (such as text, images, buttons, etc.) can be placed in specific cells of the grid. The grid layout provides a clear structural framework, enabling interface elements to be arranged orderly.

[0003] When the layout of the screen interface is switched to other devices, the layout will change. Although the system can automatically adjust the layout to adapt to the screen size and resolution of different devices, this adaptation is often based on preset rules and templates. When facing extreme or special screen sizes, the automatic adjustment may not achieve the best effect. In addition, the automatic adjustment function may not fully consider the specific needs and preferences of users, such as font size, icon spacing, etc., resulting in the interface looking less coordinated or comfortable on some devices. Moreover, different operating systems and device platforms may have different screen layouts and interaction specifications, and the automatic adjustment function may not fully adapt to these differences, resulting in inconsistent performance of the interface on different platforms.

[0004] Publication No. CN103941963B discloses a method for automatically adjusting page layout, including the steps of: capturing the operation of the user on the frame, and determining the frame to be adjusted; judging the positional relationship between the frame to be adjusted and other frames or grids, and adjusting the size or position of the frame to be adjusted according to a preset automatic adjustment scheme. Among them, the operation of the user on the frame includes the selection operation on the frame or the operation of changing the shape or position of the frame; the operation of changing the shape or position of the frame includes the dragging operation or the operation of inputting the width, height, or characteristic coordinates of the frame to change the shape or position of the frame.

[0005] However, the above technology only provides a function of manual adjustment, providing a way to repair problems such as inconsistent layout and differentiation, but still requires subsequent users to process again, increasing the trouble, and still lacking in the ability of automatic adjustment in the early stage. Summary of the Invention

[0006] In view of the deficiencies of the prior art, the present invention provides a geometric ratio adaptive grid layout system and control method based on big data, which solves the above technical problems.

[0007] To achieve the above objectives, the present invention is realized through the following technical solutions: A control method for a geometric ratio adaptive grid layout system based on big data, specifically including the following steps:

[0008] S1. System initialization and configuration: Set the initial grid size, dynamically calculate the number of grids according to the screen size, and preset the attributes of text, images, and blank areas, and configure the area recognition algorithm;

[0009] S2. Area division and attribute calculation: Use image recognition technology to identify different areas in the interface, mark the grids occupied by each area, calculate the area and length and width dimensions of each area, and sort the areas in the order from left to right and top to bottom, and store the area list and corresponding attributes;

[0010] S3. Geometric ratio adaptive layout adjustment: When switching to a new screen, give priority to keeping the area layout unchanged according to the aspect ratio and area ratio of the new screen; for scalable areas, perform equal-proportion scaling to adapt to the new screen size; for text areas, adjust the length and width dimensions according to the new screen size and rearrange the text; for situations where the interface changes greatly, keep the proportion of the text area and the image area occupying the overall area unchanged, and achieve layout adjustment by adjusting the proportion of the image area and rearranging the text area;

[0011] S4. Dynamic adjustment: Introduce a dynamic grid adjustment algorithm to automatically adjust the grid size and layout according to user operations or interface changes; and provide a function for users to customize the layout, allowing users to adjust the size and position of areas according to their own needs and save the user-defined layout.

[0012] Preferably, step S1 specifically includes:

[0013] S1.1 Define the grid system: Set the initial grid size as G size (the pixel size of each grid), and dynamically calculate the number of grids N x and N y :

[0014] where, represents rounding up;

[0015] S1.2 Configure area types: Preset the attributes of text areas TA (TextArea), image areas IA (Image Area), and blank areas BA (BlankArea). Among them, the aspect ratio of text areas is allowed to change, and image areas are only allowed to be scaled proportionally;

[0016] S1.3 Region recognition algorithm: Use image recognition technology (such as deep learning models) to recognize different regions in the interface image, and distinguish TA, IA, and BA according to region features (such as color, texture, shape, etc.).

[0017] Preferably, the region recognition algorithm uses a deep learning model for recognition, and distinguishes TA, IA, and BA by recognizing the region features of color, texture, and shape. The deep learning model is pre-trained and verified through a training set and a validation set during development.

[0018] Preferably, step S2 specifically includes:

[0019] S2.1 Grid division: Divide the interface into N x ×N y grids, each grid has a unique identifier (i, j), identify and mark the grids occupied by each region, and record the set of grids A occupied by each region ij ;

[0020] S2.2 Calculate region attributes: Calculate the area S of each region according to the number of grids occupied A :

[0021]

[0022] Then calculate the length and width dimensions of each region through grid coordinates, and calculate for non-rectangular regions through polygon approximation;

[0023] S2.3 Region sorting: Sort different regions in the order from left to right and top to bottom to obtain a sorted region list LA, and store the sorted region list and attributes (such as area, length and width dimensions, etc.).

[0024] Preferably, step S3 specifically includes:

[0025] S3.1 Determine the new screen layout: When switching to a new screen, first determine the arrangement order and general position of each region by serial number, and then calculate the length and width ratios of the new and old screens as well as the area ratio where W new represents the length of the new screen, W old represents the length of the original screen; H new represents the width of the new screen, H old represents the width of the original screen; S new represents the area of the new screen, S old represents the area of the original screen;

[0026] S3.2 Intelligent adjustment of grid size: According to the aspect ratio and area ratio of the new screen, prioritize maintaining the unchanged regional layout;

[0027] For the image area IA, perform proportional scaling according to the new screen size:

[0028]

[0029] Among them, represents the area of the image area IA in the new screen, represents the area of the image area IA in the original screen;

[0030] For the text area TA, adjust the length and width dimensions according to the new screen size, and rearrange the text to adapt to the new grid layout;

[0031] S3.3 Complex layout adjustment: For the situation where the interface changes greatly, keep the proportion of the text area and the image area occupying the overall area unchanged, scale and adjust the proportion of the image area, and ensure that the image is not distorted:

[0032]

[0033] Among them, represents the aspect ratio of the adjusted image area, represents the aspect ratio of the image area before adjustment;

[0034] Adjust the length, width dimensions and arrangement method of the text area to adapt to the new grid layout and screen size.

[0035] Preferably, step S4 specifically includes:

[0036] S4.1 Dynamic grid adjustment: Dynamically adjust the grid size G size and layout according to user operations or interface changes, introduce an adaptive algorithm, and automatically adjust the number and size of grids according to content changes;

[0037] S4.2 Multi-resolution support: Support devices with multiple resolutions and screen sizes, ensure that the layout can maintain good display effects on different devices, and use mathematical formulas to calculate the number and size of grids at different resolutions:

[0038]

[0039] Among them, N x ′ and N y ′ respectively represent the number of grids divided by the device screen in the horizontal and vertical directions at the new resolution;

[0040] S4.3 Intelligent Recognition and Optimization: Use deep learning models for image recognition to improve the accuracy of area division; and introduce an optimization algorithm to adjust the layout according to the user's usage habits and needs;

[0041] S4.4 User-Defined Layout: Provide the function of user-defined layout, allowing users to adjust the size and position of areas according to their own needs, and save the user-defined layout for automatic loading when used next time;

[0042] S4.5 Real-Time Feedback and Adjustment: Provide real-time feedback during the layout adjustment process so that users can see the adjusted effect; and allow users to make fine-tuning until they reach a satisfactory layout effect.

[0043] Preferably, in S4.1, the steps of introducing an adaptive algorithm and automatically adjusting the number and size of grids according to content changes specifically include:

[0044] Adaptive algorithm:

[0045] Introduce an adaptive algorithm f adapt , and automatically adjust the number and size of grids according to content changes;

[0046] Algorithm f adapt The input of the algorithm includes the current grid size G size , the current layout parameter L ayout , and the content change parameter C change ;

[0047] The output of the algorithm is the new grid size G size ' and the new layout L ayout ';

[0048] The grid size adjustment formula is expressed as: G size ' = f size (G size , C change );

[0049] Among them, f size () is a function that adjusts the grid size according to content changes;

[0050] The layout parameter adjustment formula is expressed as: L ayout ' = f Layout (L ayout , C change );

[0051] Among them, f Layout () is a function that adjusts the layout according to content changes;

[0052] Grid quantity adjustment (indirectly reflected by size changes): Since the grid quantity is calculated based on the screen size and grid size, the adjustment of the grid quantity can be indirectly achieved by adjusting the grid size; that is, when the grid size changes, the grid quantity is recalculated according to the screen size.

[0053] Preferably, when the screen interface changes due to switching between different devices, an adaptive algorithm is also used to automatically adjust the density of the grids according to the density and importance factors of the content, specifically including:

[0054] A1. Define variables and weights:

[0055] D t : represents the content density of the t-th grid cell;

[0056] I t : represents the content importance of the t-th grid cell;

[0057] α: the weight of content density;

[0058] β: the weight of content importance;

[0059] The adjusted size of the t-th grid cell;

[0060] A2. Calculate the comprehensive score: Calculate a comprehensive score P for each grid cell t , the comprehensive score P t is based on content density and importance, and considers the corresponding weights:

[0061] P t = α·D t + β·I t ;

[0062] A3. Normalization processing: Normalize the comprehensive scores of all grid cells to ensure they are in the range of 0 to 1:

[0063]

[0064] where P t ' represents the comprehensive score after normalization processing, and min(P) and max(P) are respectively the minimum and maximum values among the comprehensive scores of all grid cells;

[0065] A4. Calculate the adjusted grid size: Calculate the adjusted size of each grid cell according to the normalized comprehensive score; the adjusted size is a certain proportion of the initial size, and the proportion is directly proportional to the normalized comprehensive score:

[0066]

[0067] Among them, k is an adjustment factor used to control the degree of size adjustment. The value of k is adjusted as needed to obtain the required range of grid size changes;

[0068] A5. Apply the adjusted grid size: Apply the calculated adjusted grid size to the interface layout to achieve the effect of automatically adjusting the grid density according to the content density and importance.

[0069] The present invention also discloses an equi-ratio adaptive grid layout system based on big data, including:

[0070] An initialization and configuration unit responsible for the initialization work of the system, including setting the initial grid size, dynamically calculating the number of grids according to the screen size, presetting the attributes of different regions, and configuring the region recognition algorithm;

[0071] A region division and attribute calculation unit that identifies different regions in the interface by using image recognition technology, performs size calculation and sorting;

[0072] An adaptive layout adjustment unit for intelligently adjusting the interface layout according to the aspect ratio and area ratio of the new screen;

[0073] A dynamic adjustment unit for introducing a dynamic grid adjustment algorithm to automatically adjust the grid size and layout according to user operations or interface changes.

[0074] Preferably, there is also provided:

[0075] A database for storing the layouts independently adjusted by users in the dynamic adjustment unit and allowing classification editing; it is also used to temporarily store the interface layout data before modification for restoring the original layout;

[0076] A background management module for system maintenance by management personnel and providing a customer service guidance platform to guide user operations.

[0077] The present invention provides an equi-ratio adaptive grid layout system based on big data and a control method. Compared with the prior art, it has the following beneficial effects:

[0078] 1. The control method of the equal-ratio adaptive grid layout system based on big data realizes the adaptive grid layout under different device screen sizes through dynamic calculation of the number of grids and the introduction of equal-ratio adaptive layout adjustment, greatly improving the flexibility and compatibility of the layout. Secondly, by applying the region recognition algorithm and deep learning model, the accuracy and intelligence of region division are improved, making the layout adjustment more precise and efficient. In addition, this method also supports dynamic grid adjustment and user-defined layout, allowing users to make personalized settings according to their own needs, enhancing the user experience. Finally, the introduction of the real-time feedback and adjustment mechanism enables users to intuitively see the effect of layout adjustment and make fine-tuning until a satisfactory layout effect is achieved, further enhancing the user's participation and satisfaction.

[0079] 2. The control method of the equal-ratio adaptive grid layout system based on big data further realizes the innovative function of automatically adjusting the grid density based on content density and importance, significantly enhancing the intelligence and personalization level of the interface layout. By defining content density and importance variables and their weights, calculating the comprehensive score and normalizing it, and then adjusting the grid size according to the normalized score, the interface layout can be automatically optimized according to the characteristics of different contents, not only ensuring the prominent display of important contents but also effectively utilizing the screen space. This function not only improves the user experience but also enhances the flexibility and adaptability of the layout, providing strong support for seamless switching between different devices.

[0080] 3. The control method of the equal-ratio adaptive grid layout system based on big data forms a comprehensive and intelligent equal-ratio adaptive grid layout control system by integrating units such as initialization and configuration, region division and attribute calculation, adaptive layout adjustment, and dynamic adjustment. The innovation of this system lies in its high automation and personalization. It can not only automatically adjust the layout according to the device screen but also store user-defined layouts and allow editing and classification, enhancing the flexibility and satisfaction of the user experience. At the same time, the background management module facilitates system maintenance, and the customer service guidance platform ensures smooth user operation, further improving the practicality and user-friendliness of the system. BRIEF DESCRIPTION OF THE DRAWINGS

[0081] Figure 1 It is the general flow diagram of the present invention;

[0082] Figure 2 It is the detailed principle block diagram of the present invention;

[0083] Figure 3 It is the system principle block diagram of the present invention. DETAILED DESCRIPTION OF THE INVENTION

[0084] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0085] Referring to Figure 1 - Figure 2 , the present invention provides the following two technical solutions:

[0086] The first implementation manner: A control method for a geometric ratio adaptive grid layout system based on big data, specifically including the following steps:

[0087] S1. System initialization and configuration: Set the initial grid size, dynamically calculate the number of grids according to the screen size, and preset the attributes of text, images, and blank areas, and configure the area recognition algorithm;

[0088] S2. Area division and attribute calculation: Use image recognition technology to identify different areas in the interface, mark the grids occupied by each area, calculate the area and length and width dimensions of each area, sort the areas in the order from left to right and from top to bottom, and store the area list and corresponding attributes;

[0089] S3. Geometric ratio adaptive layout adjustment: When switching to a new screen, give priority to keeping the area layout unchanged according to the length-width ratio and area ratio of the new screen; for scalable areas, perform geometric ratio scaling to adapt to the new screen size; for text areas, adjust the length and width dimensions according to the new screen size and rearrange the text; for cases where the interface changes greatly, keep the proportion of the text area and the image area occupying the overall area unchanged, and achieve layout adjustment by adjusting the proportion of the image area and rearranging the text area;

[0090] S4. Dynamic adjustment: Introduce a dynamic grid adjustment algorithm to automatically adjust the grid size and layout according to user operations or interface changes; and provide the function of user-defined layout, allowing users to adjust the size and position of areas according to their own needs and save the user-defined layout.

[0091] In this embodiment, step S1 specifically includes:

[0092] S1.1 Define the grid system: Set the initial grid size as G size (the pixel size of each grid), and dynamically calculate the number of grids N x and N y :

[0093] Wherein, represents rounding up;

[0094] Assume the parameters of the initial screen interface are as follows:

[0095] The initial grid size Gsize = 100 pixels (i.e., the width and height of each grid are both 100 pixels);

[0096] The screen width W = 750 pixels;

[0097] The screen height H = 1334 pixels;

[0098] Then:

[0099]

[0100] According to the above calculations, the screen will be divided into 8×14 grids, each grid with a size of 100×100 pixels, and these grids will completely cover the screen without gaps or overlaps.

[0101] S1.2 Configure area types: Preset the attributes of text area TA (TextArea), image area IA (Image Area), and blank area BA (BlankArea). Among them, the aspect ratio of the text area is allowed to change, and the image area is only allowed to be scaled proportionally;

[0102] S1.3 Area recognition algorithm: Use image recognition technology (such as a deep learning model) to identify different areas in the interface image, and distinguish TA, IA, and BA according to area features (such as color, texture, shape, etc.);

[0103] Among them, the area recognition algorithm uses a deep learning model for recognition, and distinguishes TA, IA, and BA by recognizing area features such as color, texture, and shape. The deep learning model is pre-trained and verified through a training set and a validation set during development.

[0104] Specific calculation steps of the area recognition algorithm

[0105] Data preparation:

[0106] Collect a large amount of labeled area image data, including text areas (TA), image areas (IA), and blank areas (BA);

[0107] Preprocess the image data, such as resizing and normalizing, to meet the input requirements of the deep learning model.

[0108] Model selection:

[0109] Select a deep learning model suitable for image classification tasks, such as VGG, ResNet, or a custom convolutional neural network (CNN);

[0110] Determine the depth and width of the model according to the complexity of the model and the computing resources.

[0111] Model training:

[0112] Input the preprocessed image data into the model for supervised training;

[0113] Use the cross-entropy loss function as the optimization objective and update the weights of the model through the backpropagation algorithm;

[0114] During the training process, use the validation set to monitor the performance of the model to prevent overfitting.

[0115] Feature extraction:

[0116] After training is completed, use the model to extract features from the image. These features can be the feature maps output by the convolutional layer or the feature vectors before the fully connected layer;

[0117] The purpose of feature extraction is to convert the image into a vector in a high-dimensional space for subsequent classification and recognition.

[0118] Region classification:

[0119] According to the extracted features, use a classifier (such as a support vector machine, random forest, or neural network classifier) to classify each region in the image;

[0120] The task of the classifier is to distinguish three different types of regions: TA, IA, and BA;

[0121] Methods such as sliding window or region proposal network (RPN) can be used to traverse the entire image and classify each local region.

[0122] Post-processing:

[0123] Perform post-processing on the classification results to remove noise and misclassified regions;

[0124] Morphological operations (such as dilation, erosion, opening, and closing) can be used to smooth the classification results.

[0125] Connected component analysis can also be used to merge adjacent regions of the same class and remove small isolated regions.

[0126] Region marking:

[0127] According to the classification results, mark each region in the image as TA, IA, or BA;

[0128] Different colors or borders can be used to visualize the marking results for verification and debugging.

[0129] In this embodiment, step S2 specifically includes:

[0130] S2.1 Grid division: Divide the interface into N x ×N y grids, each grid has a unique identifier (i, j), identify and mark the grids occupied by each area, and record the set of grids A occupied by each area ij ;

[0131] S2.2 Calculate area properties: Calculate the area S of each area according to the number of grids occupied A :

[0132]

[0133] Then calculate the length and width dimensions of each area through grid coordinates, and for non-rectangular areas, calculate by polygon approximation;

[0134] S2.3 Area sorting: Sort different areas in the order from left to right and top to bottom to obtain the sorted area list LA, and store the sorted area list and properties (such as area, length and width dimensions, etc.).

[0135] In this embodiment, step S3 specifically includes:

[0136] S3.1 Determine the new screen layout: When switching to a new screen, first determine the arrangement order and general position of each area according to the serial number, and then calculate the length and width ratios of the new and old screens and the area ratio where W new represents the length of the new screen, W old represents the length of the original screen; H new represents the width of the new screen, H old represents the width of the original screen; S new represents the area of the new screen, S old represents the area of the original screen;

[0137] S3.2 Intelligent adjustment of grid size: According to the length and width ratios and area ratio of the new screen, give priority to keeping the area layout unchanged;

[0138] For the image area IA, perform equal-proportion scaling according to the new screen size:

[0139]

[0140] where, represents the area of the image area IA in the new screen, represents the area of the image area IA in the original screen;

[0141] For the text area TA, adjust the length and width according to the new screen size, and rearrange the text to fit the new grid layout;

[0142] S3.3 Complex layout adjustment: For cases where the interface changes significantly, keep the ratio of the text area and the image area occupying the overall area unchanged, scale and adjust the ratio of the image area, and ensure that the image is not distorted:

[0143]

[0144] Among them, represents the aspect ratio of the length and width of the adjusted image area, represents the aspect ratio of the length and width of the image area before adjustment;

[0145] Adjust the length, width dimensions and arrangement of the text area to fit the new grid layout and screen size.

[0146] Suppose the parameters of the screen before and after the change are as follows:

[0147] Original screen length W old = 1920 pixels;

[0148] Original screen width H old = 1080 pixels;

[0149] New screen length W new = 1366 pixels;

[0150] New screen width H new = 768 pixels;

[0151] The area of the image area IA in the original screen

[0152] The area of the text area TA in the original screen (assumed to be rectangular) is 320×200 pixels (width x height);

[0153] Then calculate the aspect ratio and area ratio of the old and new screens as follows:

[0154]

[0155] Adjustment of the image area IA:

[0156]

[0157] However, considering that the image is not distorted, we may keep the aspect ratio of the image unchanged. Therefore, the actual adjusted size is 448×336 pixels, that is, both the width and height are multiplied by 0.7, maintaining the original aspect ratio of the image of 1.6:1;

[0158] For the image region IA, if the interface changes significantly and the image needs to be kept distortion-free, the aspect ratio of the image region is adjusted as follows:

[0159]

[0160] Since the aspect ratio of the original image is 1.6:1 (i.e., 640:480), then:

[0161]

[0162] In this embodiment, step S4 specifically includes:

[0163] S4.1 Dynamic grid adjustment: Dynamically adjust the grid size G size and layout, introduce an adaptive algorithm, and automatically adjust the number and size of the grids according to the content change, specifically including:

[0164] Adaptive algorithm:

[0165] Introduce an adaptive algorithm f adapt , and automatically adjust the number and size of the grids according to the content change;

[0166] Algorithm f adapt 's input includes the current grid size G size , the current layout parameter L ayout , and the content change parameter C change ;

[0167] The output of the algorithm is the new grid size G size ' and the new layout L ayout ';

[0168] The grid size adjustment formula is expressed as: G size ' = f size (G size , C change );

[0169] where f size () is a function that adjusts the grid size according to the content change;

[0170] The layout parameter adjustment formula is expressed as: L ayout ' = f Layout (L ayout , C change );

[0171] where f Layout () is a function that adjusts the layout according to the content change;

[0172] Grid quantity adjustment (indirectly reflected by size changes): Since the grid quantity is calculated based on the screen size and grid size, the adjustment of the grid quantity can be indirectly achieved by adjusting the grid size; that is, when the grid size changes, the grid quantity is recalculated according to the screen size;

[0173] S4.2 Multi - resolution support: Support devices with multiple resolutions and screen sizes to ensure that the layout can maintain a good display effect on different devices. Use mathematical formulas to calculate the grid quantity and size at different resolutions:

[0174]

[0175] Among them, N x ′ and N y ′ respectively represent the number of grids into which the device screen is divided in the horizontal and vertical directions at the new resolution;

[0176] S4.3 Intelligent recognition and optimization: Use a deep - learning model for image recognition to improve the accuracy of area division; and introduce an optimization algorithm to adjust the layout according to the user's usage habits and requirements;

[0177] S4.4 User - defined layout: Provide the function of user - defined layout, allowing users to adjust the size and position of areas according to their own needs, and save the user - defined layout for automatic loading when used next time;

[0178] S4.5 Real - time feedback and adjustment: Provide real - time feedback during the layout adjustment process so that users can see the adjusted effect; and allow users to make fine - tuning until they reach a satisfactory layout effect.

[0179] This method realizes the adaptive grid layout under different device screen sizes through dynamic calculation of the grid quantity and introduction of the equal - ratio adaptive layout adjustment, greatly improving the flexibility and compatibility of the layout. Secondly, through the application of the area recognition algorithm and the deep - learning model, the accuracy and intelligence of area division are improved, making the layout adjustment more accurate and efficient. In addition, this method also supports dynamic grid adjustment and user - defined layout, allowing users to make personalized settings according to their own needs, enhancing the user experience. Finally, the introduction of the real - time feedback and adjustment mechanism enables users to intuitively see the effect of layout adjustment and make fine - tuning until they reach a satisfactory layout effect, further enhancing the user's participation and satisfaction.

[0180] The second implementation method, the main difference from the first implementation method is that: when switching between different devices causes changes in the screen interface, an adaptive algorithm is also used to automatically adjust the density of the grids according to factors such as the density and importance of the content, specifically including:

[0181] A1. Define variables and weights:

[0182] D t : Represents the content density of the t-th grid cell;

[0183] I t : Represents the content importance of the t-th grid cell;

[0184] α: The weight of content density;

[0185] β: The weight of content importance;

[0186] The adjusted size of the t-th grid cell;

[0187] A2. Calculate the comprehensive score: Calculate a comprehensive score P for each grid cell t , the comprehensive score P t Based on content density and importance, and considering the corresponding weights:

[0188] P t = α·D t + β·I t ;

[0189] A3. Normalization: Normalize the comprehensive scores of all grid cells to ensure they are in the range of 0 to 1:

[0190]

[0191] where, P t ' represents the normalized comprehensive score, min(P) and max(P) are respectively the minimum and maximum values among the comprehensive scores of all grid cells, P t ′ represents the normalized comprehensive score;

[0192] A4. Calculate the adjusted grid size: Calculate the adjusted size of each grid cell according to the normalized comprehensive score; the adjusted size is a certain proportion of the initial size, and the proportion is proportional to the normalized comprehensive score:

[0193]

[0194] where, k is an adjustment factor used to control the degree of size adjustment, and the value of k is adjusted as needed to obtain the required range of grid size changes;

[0195] A5. Apply the adjusted grid size: Apply the calculated adjusted grid size to the interface layout to achieve the effect of automatically adjusting the grid density according to content density and importance.

[0196] Assume the following parameter settings:

[0197] Initial grid size G size = 100 pixels (assuming the initial size of each grid is the same);

[0198] Content density D t Range: 0 to 10 (indicating the density of the content within the grid cell, the higher the value, the denser the content);

[0199] Content importance I t Range: 0 to 5 (indicating the importance of the content within the grid cell, the higher the value, the more important the content);

[0200] Weight of content density α = 0.6;

[0201] Weight of content importance β = 0.4;

[0202] Adjustment factor k = 0.1 (used to control the degree of size adjustment);

[0203] Simulation calculation process:

[0204] Assume we have 4 grid cells, and their content densities and importances are as follows:

[0205] Grid cell <![CDATA[Content density D t > <![CDATA[Content importance I t > 1 5 3 2 8 2 3 2 4 4 10 1

[0206] Calculate the comprehensive score P t :

[0207] Grid 1: P1 = 0.6×5 + 0.4×3 = 3 + 1.2 = 4.2;

[0208] Grid 2: P2 = 0.6×8 + 0.4×2 = 4.8 + 0.8 = 5.6;

[0209] Grid 3: P3 = 0.6×2 + 0.4×4 = 1.2 + 1.6 = 2.8;

[0210] Grid 4: P4 = 0.6×10 + 0.4×1 = 6 + 0.4 = 6.4;

[0211] Normalization process:

[0212] Minimum comprehensive score min(P) = 2.8;

[0213] Maximum comprehensive score max(P) = 6.4;

[0214] Normalized comprehensive score P t ':

[0215] Grid 1:

[0216] Grid 2:

[0217] Grid 3:

[0218] Grid 4:

[0219] Calculate the adjusted grid size

[0220] Grid 1:

[0221] Grid 2:

[0222] Grid 3:

[0223] Grid 4:

[0224] The above steps further implement an innovative function of automatically adjusting the grid density based on content density and importance, significantly improving the intelligence and personalization level of the interface layout. By defining content density and importance variables and their weights, calculating the comprehensive score and performing normalization processing, and then adjusting the grid size according to the normalized score, the interface layout can be automatically optimized according to the characteristics of different contents, ensuring both the prominent display of important contents and the effective utilization of screen space. This function not only improves the user experience but also enhances the flexibility and adaptability of the layout, providing strong support for seamless switching between different devices.

[0225] Refer to Figure 3 , the present invention also discloses a geometric ratio adaptive grid layout system based on big data, including:

[0226] An initialization and configuration unit, responsible for the initialization work of the system, including setting the initial grid size, dynamically calculating the number of grids according to the screen size, presetting the attributes of different regions, and configuring the region recognition algorithm;

[0227] A region division and attribute calculation unit, which identifies different regions in the interface by using image recognition technology, performs size calculation and sorting;

[0228] An adaptive layout adjustment unit, used to intelligently adjust the interface layout according to the length-width ratio and area ratio of the new screen;

[0229] A dynamic adjustment unit, used to introduce a dynamic grid adjustment algorithm to automatically adjust the grid size and layout according to user operations or interface changes.

[0230] This system is also provided with:

[0231] A database, which is used to store the layouts independently adjusted by users in the dynamic adjustment unit and allows for editing of categories; it is also used to temporarily store the interface layout data before modification for restoring the original layout;

[0232] A background management module, which is used for system maintenance by managers and provides a customer service guidance platform to guide users' operations.

[0233] By integrating units such as initialization and configuration, area division and attribute calculation, adaptive layout adjustment, and dynamic adjustment, the above system forms a comprehensive and intelligent equal-ratio adaptive grid layout control system. The innovation of this system lies in its high automation and personalization. It can not only automatically adjust the layout according to the device screen, but also store user-defined layouts and allow for editing of categories, enhancing the flexibility and satisfaction of the user experience. At the same time, the background management module facilitates system maintenance, and the customer service guidance platform ensures smooth user operations, further improving the practicality and user-friendliness of the system.

[0234] Meanwhile, the content not described in detail in this specification belongs to the prior art well-known to those skilled in the art.

[0235] It should be noted that in this text, relational terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the term "comprising", "including" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, article or device comprising a series of elements not only includes those elements, but also includes other elements not expressly listed, or elements inherent to such process, method, article or device.

[0236] Although the embodiments of the present invention have been shown and described, for those of ordinary skill in the art, it can be understood that various changes, modifications, substitutions and variations can be made to these embodiments without departing from the principles and spirit of the present invention. The scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. Control method of a geometric ratio adaptive grid layout system based on big data, characterized in that, Specifically, it includes the following steps: S1. System initialization and configuration: Set the initial grid size, dynamically calculate the number of grids according to the screen size, preset the attributes of text, images, and blank areas, and configure the area recognition algorithm; S2. Area division and attribute calculation: Use image recognition technology to identify different areas in the interface, mark the grids occupied by each area, calculate the area and length-width dimensions of each area, sort the areas in the order from left to right and top to bottom, and store the area list and corresponding attributes; S3. Proportional adaptive layout adjustment: When switching to a new screen, prioritize keeping the area layout unchanged according to the length-width ratio and area ratio of the new screen; for scalable areas, perform proportional scaling to adapt to the new screen size; for text areas, adjust the length-width dimensions according to the new screen size and rearrange the text; for cases where the interface changes significantly, keep the proportion of the text area and image area in the overall area unchanged, and achieve layout adjustment by adjusting the proportion of the image area and rearranging the text area; S4. Dynamic adjustment: Introduce a dynamic grid adjustment algorithm to automatically adjust the grid size and layout according to user operations or interface changes; and provide a function for users to customize the layout, allowing users to adjust the size and position of areas according to their own needs and save the user-defined layout.

2. The control method of the equal-ratio adaptive grid layout system based on big data according to claim 1, wherein: Step S1 specifically includes: S1.1 Define the grid system: Set the initial grid size to G size , and dynamically calculate the number of grids N based on the screen width W and height H x and N y : Among them, represents rounding up; S1.2 Configure area types: Preset the attributes of text area TA, image area IA, and blank area BA. Among them, the text area allows the length-width ratio to change, and the image area only allows proportional scaling; S1.3 Area recognition algorithm: Use image recognition technology to identify different areas in the interface image, and distinguish TA, IA, and BA according to area characteristics.

3. The control method of the equal-ratio adaptive grid layout system based on big data according to claim 2, characterized in that: The area recognition algorithm uses a deep learning model for recognition, and distinguishes TA, IA, and BA by recognizing area characteristics such as color, texture, and shape. The deep learning model is pre-trained and verified through a training set and a validation set during development.

4. The control method of the equal-ratio adaptive grid layout system based on big data according to claim 1, characterized in that: Step S2 specifically includes: S2.1 Grid division: Divide the interface into N x ×N y grids, each grid has a unique identifier (i, j), identify and mark the grids occupied by each area, and record the set A of grids occupied by each area ij ; S2.2 Calculate regional attributes: Calculate the area S of each region according to the number of occupied grids A : Then calculate the length-width dimensions of each area through grid coordinates, and for non-rectangular areas, calculate them by polygon approximation; S2.3 Area sorting: Sort different areas in the order from left to right and top to bottom to obtain the sorted area list LA, and store the sorted area list and attributes.

5. The control method of the equal-ratio adaptive grid layout system based on big data according to claim 1, characterized in that: Step S3 specifically includes: S3.1 Determine the new screen layout: When switching to a new screen, first determine the arrangement order and general positions of each area according to the serial numbers, and then calculate the length and width ratios of the new and original screens as well as the area ratio where W new represents the length of the new screen, and W old represents the length of the original screen; H new represents the width of the new screen, and H old represents the width of the original screen; S new represents the area of the new screen, and S old represents the area of the original screen; S3.2 Intelligent adjustment of grid size: Prioritize keeping the area layout unchanged according to the length-width ratio and area ratio of the new screen; For the image area IA, perform proportional scaling according to the new screen size: Among them, represents the area of the image region IA in the new screen, represents the area of the image region IA in the original screen; For the text area TA, adjust the length-width dimensions according to the new screen size and rearrange the text to adapt to the new grid layout; S3.3 Complex layout adjustment: For cases where the interface changes significantly, keep the proportion of the text area and image area in the overall area unchanged, scale and adjust the proportion of the image area, and ensure that the image is not distorted: Among them, represents the aspect ratio of the adjusted image region, represents the aspect ratio of the image region before adjustment; Adjust the length-width dimensions and arrangement method of the text area to adapt to the new grid layout and screen size.

6. The control method of the equal-ratio adaptive grid layout system based on big data according to claim 1, wherein: Step S4 specifically includes: S4.1 Dynamic grid adjustment: Dynamically adjust the grid size G according to user operations or interface changes size and layout, introduce an adaptive algorithm to automatically adjust the number and size of grids according to content changes; S4.2 Multi - resolution Support: Support devices with various resolutions and screen sizes, and use mathematical formulas to calculate the number and size of grids at different resolutions: Among them, N x ′ and N y ′ respectively represent the number of grids into which the device screen is divided in the horizontal and vertical directions at the new resolution; S4.3 Intelligent Recognition and Optimization: Use deep - learning models for image recognition to improve the accuracy of region division; and introduce optimization algorithms to adjust the layout according to users' usage habits and requirements; S4.4 User - defined Layout: Provide the function of user - defined layout, allowing users to adjust the size and position of regions according to their own needs, and save the user - defined layout for automatic loading when used next time; S4.5 Real - time Feedback and Adjustment: Provide real - time feedback during the layout adjustment process so that users can see the adjusted effect; and allow users to make fine - tuning until they reach a satisfactory layout effect.

7. The control method of the equal-ratio adaptive grid layout system based on big data according to claim 6, characterized in that: In S4.1, the steps of introducing the adaptive algorithm and automatically adjusting the number and size of grids according to content changes are specifically as follows: Adaptive Algorithm: Introduce the adaptive algorithm f adapt , and automatically adjust the number and size of the grid according to the content change; Algorithm f adapt The input of size includes the current grid size G ayout , the current layout parameter L change , and the content change parameter C ; The output of the algorithm is the new grid size G size ′ and the new layout L ayout ′; The mesh size adjustment formula is expressed as: G size ′ = f size (G size , C change ); where f size () is a function that adjusts the grid size according to the content change; The layout parameter adjustment formula is expressed as: L ayout ′ = f Layout (L ayout , C change ); where f Layout () is a function that adjusts the layout according to content changes; Adjustment of the Number of Grids: Since the number of grids is calculated based on the screen size and grid size, the adjustment of the number of grids can be indirectly achieved by adjusting the grid size; that is, when the grid size changes, recalculate the number of grids according to the screen size.

8. The control method of the equal-ratio adaptive grid layout system based on big data according to claim 1, characterized in that: When the screen interface changes due to switching between different devices, an adaptive algorithm is also used to automatically adjust the density of grids according to the density and importance factors of the content, specifically including: A1. Define variables and weights: D t : represents the content density of the t-th grid cell; I t : represents the content importance of the t-th grid cell; α: The weight of content density; β: The weight of content importance; The adjusted size of the t-th grid cell; A2. Calculate the comprehensive score: Calculate a comprehensive score P for each grid cell t , the comprehensive score P t based on content density and importance, and considering the corresponding weights: P t = α·D t + β·I t ; A3. Normalization Processing: Normalize the comprehensive scores of all grid cells to ensure they are within the range of 0 to 1: Among them, P t ' represents the comprehensive score after normalization, and min(P) and max(P) are the minimum and maximum values among the comprehensive scores of all grid cells respectively; A4. Calculate the Adjusted Grid Size: Calculate the adjusted size of each grid cell according to the normalized comprehensive score; the adjusted size is a certain proportion of the initial size, and the proportion is directly proportional to the normalized comprehensive score: where k is an adjustment factor used to control the degree of size adjustment, and the value of k is adjusted as needed to obtain the required range of grid size changes; A5. Apply the Adjusted Grid Size: Apply the calculated adjusted grid size to the interface layout.

9. A geometric ratio adaptive grid layout system based on big data, which is used to implement the geometric ratio adaptive grid layout system and control method according to any one of claims 1-8, and is characterized in that: Including: Initialization and Configuration Unit, responsible for the initialization work of the system, including setting the initial grid size, dynamically calculating the number of grids according to the screen size, presetting the attributes of different regions, and configuring the region recognition algorithm; Region Division and Attribute Calculation Unit, which uses image recognition technology to identify different regions in the interface, perform size calculation and sorting; Adaptive Layout Adjustment Unit, used to intelligently adjust the interface layout according to the aspect ratio and area ratio of the new screen; Dynamic Adjustment Unit, used to introduce a dynamic grid adjustment algorithm to automatically adjust the grid size and layout according to user operations or interface changes.

10. The system for equal-ratio adaptive grid layout based on big data according to claim 9, characterized in that: There is also: Database, used to store the layouts independently adjusted by users in the dynamic adjustment unit and allow classification editing; also used to temporarily store the interface layout data before modification for restoring the original layout; Background Management Module, used for administrators to perform system maintenance and provide a customer service guidance platform to guide users' operations.

Images