CN116719597A - Self-adaptive view rendering method and creation method based on grid layout - Google Patents
Self-adaptive view rendering method and creation method based on grid layout Download PDFInfo
- Publication number
- CN116719597A CN116719597A CN202311003540.0A CN202311003540A CN116719597A CN 116719597 A CN116719597 A CN 116719597A CN 202311003540 A CN202311003540 A CN 202311003540A CN 116719597 A CN116719597 A CN 116719597A
- Authority
- CN
- China
- Prior art keywords
- component
- grid
- view
- browser
- size
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 72
- 238000009877 rendering Methods 0.000 title claims abstract description 48
- 230000003044 adaptive effect Effects 0.000 claims abstract description 17
- 238000013507 mapping Methods 0.000 claims abstract description 9
- 230000006978 adaptation Effects 0.000 claims description 33
- 241000219112 Cucumis Species 0.000 claims description 14
- 235000015510 Cucumis melo subsp melo Nutrition 0.000 claims description 14
- FJJCIZWZNKZHII-UHFFFAOYSA-N [4,6-bis(cyanoamino)-1,3,5-triazin-2-yl]cyanamide Chemical compound N#CNC1=NC(NC#N)=NC(NC#N)=N1 FJJCIZWZNKZHII-UHFFFAOYSA-N 0.000 claims description 14
- 238000004364 calculation method Methods 0.000 claims description 4
- 238000012790 confirmation Methods 0.000 claims description 3
- 238000012544 monitoring process Methods 0.000 claims description 3
- 238000004088 simulation Methods 0.000 claims description 3
- 230000000694 effects Effects 0.000 abstract description 10
- 238000011161 development Methods 0.000 abstract description 6
- 238000013461 design Methods 0.000 description 23
- 230000002776 aggregation Effects 0.000 description 5
- 238000004220 aggregation Methods 0.000 description 5
- 230000008859 change Effects 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 5
- 238000012545 processing Methods 0.000 description 5
- 230000000007 visual effect Effects 0.000 description 5
- 238000007726 management method Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 230000006835 compression Effects 0.000 description 3
- 238000007906 compression Methods 0.000 description 3
- 238000004458 analytical method Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000004422 calculation algorithm Methods 0.000 description 2
- 238000007405 data analysis Methods 0.000 description 2
- 230000014509 gene expression Effects 0.000 description 2
- 230000007774 longterm Effects 0.000 description 2
- 230000009467 reduction Effects 0.000 description 2
- 238000001179 sorption measurement Methods 0.000 description 2
- 206010036086 Polymenorrhoea Diseases 0.000 description 1
- 230000004308 accommodation Effects 0.000 description 1
- 238000012512 characterization method Methods 0.000 description 1
- 239000000470 constituent Substances 0.000 description 1
- 230000010485 coping Effects 0.000 description 1
- 238000013079 data visualisation Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000007717 exclusion Effects 0.000 description 1
- 238000001125 extrusion Methods 0.000 description 1
- 230000000873 masking effect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000010606 normalization Methods 0.000 description 1
- 238000003672 processing method Methods 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
- G06F9/4451—User profiles; Roaming
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Controls And Circuits For Display Device (AREA)
- Image Generation (AREA)
Abstract
An adaptive view rendering method based on a grid layout, comprising: s101: obtaining browser window parameters; s102: calculating the ratio of the resolution in the width direction of the browser to the resolution in the height direction of the browser; s103: when the ratio falls into a numerical range of a preset threshold value, a first type rendering mode is used; or when the ratio does not fall into the numerical range of the preset threshold value, a second type rendering mode is used. A method of creating an adaptive view based on a grid layout, comprising: s401: establishing a view, and configuring view attributes for the view; the size of the view is in units of a grid; s402: adding components in the view, enabling the components and the view to form a mapping relation, and configuring component attributes for the components; s403: setting a component container position and a component container size; the module container size is in units of gratings. With the method of the present invention, the view development threshold and development cost can be reduced, and screens of various sizes can be adapted with better effect at the front end with only one version.
Description
Technical Field
The invention relates to the technical field of adaptive view rendering.
Background
With the popularity of mobile terminals, adaptive layout is often used to solve compatibility problems on different devices in order to display on different devices, but multiple versions are maintained for different devices, thereby increasing the complexity of architecture design. In addition, problems of overcrowding of content, distortion of display proportion and the like when the screen is too small easily occur in the self-adaptive display, and the display experience of the page and the readability of the page are greatly affected.
In the chinese invention publication No. CN102223502a, an adaptive page generating apparatus is disclosed, including: the system comprises a page analysis processing module, a terminal information module, a file selection module and a service output module; the page analysis module is used for analyzing the constituent elements of the service page requested by the television and calling the file selection module to generate a page frame to be output; the terminal information module is used for storing and inquiring terminal hardware information and digital fingerprint information; the file selection module is used for selecting files for constructing service pages requested by the television according to the hardware information of the television; the service output module is configured to generate the service page and output the service page to the television. In the related art, there are also problems that one version can only correspond to one type, and when the screen size is too small compared with the design, the display content is crowded, the display proportion is distorted, and the like.
Disclosure of Invention
The present invention is to solve the problems in the related art described above.
In view of the limitations, the invention provides a self-adaptive view rendering method and a creation method based on grid layout.
An adaptive view rendering method based on a grid layout comprises the following steps:
s101: obtaining browser window parameters, wherein the browser window parameters are as follows: browser height direction resolution, browser width direction resolution;
s102: calculating the ratio of the resolution in the width direction of the browser to the resolution in the height direction of the browser;
s103: when the ratio falls into a numerical range of a preset threshold, judging that the screen type is a first type, and using a first type rendering mode; the first type rendering mode realizes the self-adaptive arrangement of the component containers based on the size of the adjusting grille;
or when the ratio does not fall into the numerical range of the preset threshold value, judging that the screen type is a second type, and using a second type rendering mode; the second type rendering mode realizes the self-adaptive arrangement of the component containers based on the number of grids occupied by the adjustment component containers.
Further: the first type rendering mode is as follows:
S201: calculating a grid adaptation ratio according to the grid parameters;
s202: adjusting the size of the grille according to the grille adaptation proportion;
s203: adjusting the size of the component container according to the adjusted grid size;
s204: rendering the component elements according to the proportion of the size of the component container after adjustment relative to the size of the component container before adjustment;
the module container size is in units of the number of gratings.
Further: the grid is square, and the grid parameters comprise: grid pixel number, transverse grid number, longitudinal grid number;
the grid pixel number is the pixel number corresponding to the grid side length; the number of the transverse grids is the number of grid columns along the transverse direction of the view;
the number of the longitudinal grids is the number of grid lines along the longitudinal direction of the view;
the mode of calculating the grille adaptation proportion is as follows:
lateral grid adaptation ratio = browser width direction resolution/(grid pixel number x lateral grid number);
vertical grid adaptation ratio = browser height direction resolution/(grid pixel number x vertical grid number);
the view transverse direction is the width direction of the browser; the view longitudinal direction is the browser height direction.
Further: the mode of adjusting the size of the grille according to the grille adaptation proportion is as follows:
Firstly, comparing the adaptation proportion of the transverse grating with the adaptation proportion of the longitudinal grating, and adjusting the size of the grating by taking a value with smaller variation as an adjustment proportion;
the mode of adjusting the size of the component container according to the adjusted grille size is as follows:
the size of the component container is adjusted along with the adjustment of the size of the grille occupied by the component container, and if the view has residual space after adjustment, the component container performs melon division according to a preset sequence.
Further: the second type rendering mode is as follows: the method comprises the steps of S301-S305, wherein the steps of S301-S305 are as follows:
s301: calculating the total grid number accommodated by the browser;
s302: calculating the total estimated area of the assembly, wherein the total estimated area of the assembly is the sum of the grid numbers occupied by all assembly containers;
s303: comparing the total grid number accommodated by the browser with the total estimated area of the assembly;
when the total grid number accommodated by the browser is greater than or equal to the total estimated area of the assembly, step S304 is entered;
when the total number of grids accommodated by the browser is smaller than the total estimated area of the assembly, step S305 is performed;
s304: arranging the component containers by using a space arrangement method to obtain at least one row combination mode, calculating the space utilization rate of each row combination mode, and finishing all row arrangement of the component containers in the view according to the row combination mode with the highest space utilization rate;
In the arrangement of step S304, when all the row arrangements of the component containers in the view are completed by using the row combination mode with the highest space utilization, if there is a component container exceeding the arrangement of the view, step S305 is entered;
s305: sequentially adjusting the sizes of the component containers from high to low according to the adjustment step sizes and the adjustment weights; after each adjustment of the size of the component container corresponding to the component of the weight value of the adjustment, calculating the total estimated area of the component until the total number of grids contained in the browser is greater than or equal to the total estimated area of the component, and entering step S304.
Further: the arrangement mode of the component containers by using the space arrangement method is as follows:
arranging the component containers into a column according to a preset component container arrangement sequence from left to right and from top to bottom, and preferentially combining the component containers with the same height in the column to form rows to obtain at least one row combination mode; the step length of adjustment is 1-4 grids;
the adjusting weight is as follows: the relative proportion is unlimited; the value range of the relative proportion is 0% -infinity.
Further: the formula of the total estimated area of the calculation assembly is as follows:
；
wherein i is a component sequence number, and i is a non-negative integer;
the number of the longitudinal grids of the assembly is the number of grids occupied by the assembly container in the longitudinal direction; the number of the transverse grids of the assembly is the number of grids occupied by the assembly container in the transverse direction; the transverse direction is the width direction of the browser; the longitudinal direction is the height direction of the browser.
Further: the method for acquiring the browser window parameters comprises the following steps:
monitoring a resize event and a load event of a browser window;
the following variables were obtained when the above event was monitored: window inner width, window inner height;
and acquiring the resolution of the browser in the width direction according to the width of the window, and acquiring the resolution of the browser in the height direction according to the height of the window.
A method for creating an adaptive view based on a grid layout for creating a view rendered by the method as described above; the method comprises the following steps:
s401: establishing a view, and configuring view attributes for the view; the dimensions of the view are in units of a grid;
s402: adding components in the view, enabling the components and the view to form a mapping relation, and configuring component attributes for the components;
s403: setting a component container position and a component container size; the module container size is in units of a grid.
Further: the module container positions and module container dimensions are set as follows:
displaying a view and a component container on a front page, receiving the drag of a user on the position of the component container and the scaling of the size of the component container, displaying the simulation of the position of a predicted component container falling point and the size of the component container, receiving the confirmation of the user, adsorbing the component container on the position of the predicted component container falling point and at least one grid matched with the size of the component container, and realizing automatic alignment;
The module container dimensions include: the lateral dimension of the module container, the longitudinal dimension of the module container;
the transverse dimension of the component container corresponds to the number of columns of the grid occupied by the component container in the width direction of the browser, and the longitudinal dimension of the component container corresponds to the number of rows of the grid occupied by the component container in the height direction of the browser.
Compared with the related art, the invention has the following advantages:
according to the grid layout-based self-adaptive view rendering method, the types of the screen are divided into the first type or the second type by comparing the width and the height of the browser, and different strategies are used for processing, so that the self-adaptive arrangement of component containers is realized, the problem that different self-adaptive page versions are required to be maintained because of different types of the screen is avoided, and meanwhile, the problem that readability is influenced due to the fact that the display proportion of the components in the view is disordered, the display distortion of elements in the components and the overcrowding of content display are caused by changing the display size of the view to adapt to the size of the screen is also avoided.
The self-adaptive view creation method based on the grid layout of the other invention is characterized in that the view is created to be the view configuration attribute, the components are introduced into the view, so that the components and the view form the mapping relation and the component configuration attribute are realized, the view is created by the method of abstracting component management and flexible component configuration, and the view can be flexibly configured and modified after modeling, thereby saving the workload of view development and improving the expandability of the view for different application scenes. Meanwhile, the view created in the mode is used for the self-adaptive view rendering method based on the grid layout, so that the effect of self-adaptive rendering can be further improved, and the problems of display congestion, proportion distortion and the like caused by overlarge screen size change are further avoided.
Drawings
FIG. 1 is a flow chart of a grille layout based adaptive view rendering method in accordance with one embodiment of the present invention;
FIG. 2 is a flow chart of a first type of rendering mode in a grid layout based adaptive view rendering method according to an embodiment of the present invention;
FIG. 3 is a flow chart of a second type of rendering method in a grid layout based adaptive view rendering method according to an embodiment of the present invention;
FIG. 4 is a flow chart of a method of creating an adaptive view based on a grid layout in accordance with one embodiment of the present invention;
fig. 5 is a schematic diagram of component melon surplus space in a grid layout-based adaptive view rendering method according to an embodiment of the present invention.
Detailed Description
The present invention will be described in further detail below in order to make the objects, technical solutions and advantages of the present invention more apparent. It is to be understood that the description is only intended to illustrate the invention and is not intended to limit the scope of the invention.
Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention belongs, and the terms used herein in this description of the invention are for the purpose of describing particular embodiments only and are not intended to be limiting of the invention. The characterization means referred to herein are all referred to in the related description of the prior art, and are not described herein in detail.
For a further understanding of the present invention, the present invention will be described in further detail with reference to the following preferred embodiments.
Example 1
As shown in fig. 1-3, an adaptive view rendering method based on a grid layout includes the following steps:
s101: obtaining browser window parameters, wherein the browser window parameters are as follows: browser height direction resolution, browser width direction resolution;
s102: calculating the ratio of the resolution in the width direction of the browser to the resolution in the height direction of the browser;
s103: when the ratio falls into a numerical range of a preset threshold, judging that the screen type is a first type, and using a first type rendering mode; the first type rendering mode realizes the self-adaptive arrangement of the component containers based on the size of the adjusting grille;
or when the ratio does not fall into the numerical range of the preset threshold value, judging that the screen type is a second type, and using a second type rendering mode; the second type rendering mode is based on adjusting the occupied grille of the component container to realize the self-adaptive arrangement of the component container.
The inclusion of a numerical range endpoint, the exclusion of the inclusion of a numerical range endpoint. For example, the numerical range (2, 3), then 2.ltoreq.x.ltoreq.3 falls within the numerical range, x > 3 and x < 2 does not fall within the numerical range.
In step S103, the numerical range of the preset threshold=design scale (scale used when the user designs the view) ±fault-tolerant scale, which can be input-set. For example, the user designs a 1:1 view on the canvas, the fault tolerance ratio is set to 10%, and the numerical range of the preset threshold is 1:1 by 10%, that is, (0.9 to 1.1): (0.9-1.1), and a numerical range exceeding a preset threshold is obtained when the numerical range is out of the range interval, namely, the numerical range is not fallen into the numerical range. The above values are merely examples, and the present invention is not limited to the above set values, and may be set according to the needs of the user.
The browser window includes, but is not limited to, display windows of desktop computers, notebook computers, tablet computers, mobile devices, large display screens, vehicle-mounted computers, medical devices, equipment instruments, projectors, and the like.
CSS Grid layout (Grid) is a completely new method of creating a two-dimensional layout on the Web. The view is based on the grid layout, the size of the view is based on the number of grids, for example, 24×16 grids, the size of the component container is assigned by adopting the aggregation of the grids (namely, the size of the component container is represented by the number of grids), the grids are used as a configurable item-unit grid (pixels of a user configurable unit grid) in the system, a standard square grid with the ratio of 1:1 is used as a minimum area unit, the concept of pixel points is replaced, the definition of aspect ratio is realized, and the length and width are integers because the computing mode is aggregation, so that the view space is very beneficial to users; as for the grids, the invention defines the grids as abstract area units, so that the size of the grids and the spacing between the grids can be parameterized, the grids can be enlarged for large screens, and the grids can be reduced for small screens, so that screens with different sizes can be adapted in a simple and convenient manner.
In the present invention, a component is an abstract concept, which is a collection of visual elements and front-end controls (e.g., a text component has the following components: title, text box), and the component may be implemented in a program by different schemes, for example, using CSS in the Web, or a mobile-end system may use a Swift, etc. Component containers (containers) may be used to carry components for layout and display of components in a view, the component containers having specific locations and sizes in the view.
In the view design of the invention, the view size is in the unit of the grating, and the size of the component container is also in the unit of the grating, so that the design is convenient for users.
When judging the screen type, a CSS media query (MediaQueries) function is used, different layouts and styles can be provided for different device screen sizes and characteristics based on the CSS media query function, and the CSS media query module allows media query expressions to be added for designating the media types and selects corresponding expressions according to the different media types. Parameters such as Width (Width), height (Height) and the like can be queried using the media query function. And identifying and judging according to two preset screen types through the CSS media inquiry function, so that a rendering processing mode of the first type or the second type is selected.
When the browser window changes and triggers, four variables, namely window, innerWidth, window, innerHeight and windowWidth, windowHeight, can be obtained, wherein the window, innerWidth represents the internal width of the browser window, namely the width of the visible area; window, inlineheight, represents the internal height of the browser window, i.e., the height of the viewable area; the internal width and the internal height of the browser window are the actual display areas of the view. Therefore, in the method of the present invention, the browser width direction resolution and the browser height direction resolution are preferably obtained by using window. Inlinerwidth and window. Inlinerheight, but it will be understood that windowWidth, windowHeight may also be used to obtain the browser width direction resolution and the browser width direction resolution, and the former is more accurate when only used to process the view. Specifically, the program monitors the size change and scaling of the browser window by a listener developed based on JavaScript (JS), which uses the window. Addeventlist method to monitor the browser window for resize and load events, and obtains four variables, window. Incarnation width, window. Incarnation height, windowWidth, windowHeight when a browser window change triggers.
In the invention, a Grid System (Grid System) based on a CSS frame realizes the configuration of grids; the elements in the web page are flexibly aligned and organized based on the Flexbox layout of the CSS 3.
When different screens are actually used to display pictures, a screen beyond the conventional proportion (such as an ultra-wide central large screen or a square screen of a legacy computer) can be encountered, and the situation that the pictures are very narrow/wide or very high/short can occur, if the pictures are still rendered according to the original design, the problems of extrusion, proportion imbalance, display overflow and the like of the graphics can be necessarily caused. By comparing the width and height ratios of the browser, the screen types are divided into a first type or a second type, and different strategies are used for processing, so that the self-adaptive arrangement of the component containers is realized, the problem that different self-adaptive page versions need to be maintained because of different screen types is avoided, and meanwhile, the problems of component proportion imbalance, element display distortion and overcrowding in the components caused by screen size change are also avoided.
By using the method of the invention, a set of front-end program can be used for coping with different display environments with larger screen resolution and aspect ratio, view design with lower operation cost can be realized, and specialized programming requirements of view designers can be reduced. By introducing and mapping key objects such as 'view', 'component', 'data source', and the like, the design object is defined as 'view', the view is used as an abstract data object, any display requirement can be borne, abstract metadata is formed into an attribute library which can be expanded and maintained and stored in a relational database, attributes such as 'theme, resolution, margin' and the like can be configured for the view, a view template which can be continuously modified is formed after the view modeling, and the view template can be modified into a visual display window suitable for any occasion, including but not limited to a workshop operation billboard, a management cockpit large screen and a desktop end data analysis view, so that the expandability of the view under different application scenes is improved.
Compared with the related art, the invention has the following advantages:
highly customizable views: through abstract view objects and metadata management, a designer can be helped to complete view design under different scenes through some key parameters in a code-free mode, view development thresholds and development cost are reduced, and quick data visualization large-screen or billboard short-period development and delivery capacity is efficiently provided for various clients, so that the method can be applied to business activities faster and more flexibly.
An abstract component: through abstract component library and parameter configuration, the designer can be helped to complete visual design of various styles, themes and contents, so as to more effectively cope with rapidly-changing market demands and technical innovations, and provide a long-term stable and effective technical tool.
Automatic adsorption, grid aggregation and self-adaptive algorithm: helping users to complete view designs with better experience and shorter time and adapting screens of various sizes with better effect at the front end will solve the problem of the display effect of many non-conventional size scale screens now, opening up the way for the users to work or develop business using visual data.
Example 2
As shown in fig. 1-3, further on the basis of example 1: the first type rendering mode is as follows:
s201: calculating a grid adaptation ratio according to the grid parameters;
s202: adjusting the size of the grille according to the grille adaptation proportion;
s203: adjusting the size of the component container according to the adjusted grid size;
s204: rendering the component elements according to the proportion of the size of the component container after adjustment relative to the size of the component container before adjustment;
the module container size is in units of a grid.
Further: the grid is square, and the grid parameters comprise: grid pixel number, transverse grid number, longitudinal grid number;
the grid pixel number is the pixel number corresponding to the grid side length; the number of the transverse grids is the number of grid columns along the transverse direction of the view;
the number of the longitudinal grids is the number of grid lines along the longitudinal direction of the view;
the mode of calculating the grille adaptation proportion is as follows:
lateral grid adaptation ratio = browser width direction resolution/(grid pixel number x lateral grid number);
vertical grid adaptation ratio = browser height direction resolution/(grid pixel number x vertical grid number);
the view transverse direction is the width direction of the browser; the view longitudinal direction is the browser height direction.
Further: the mode of adjusting the size of the grille according to the grille adaptation proportion is as follows:
firstly, comparing the adaptation proportion of the transverse grating with the adaptation proportion of the longitudinal grating, and adjusting the size of the grating by taking a value with smaller variation as an adjustment proportion;
the mode of adjusting the size of the component container according to the adjusted grille size is as follows:
the size of the component container is adjusted along with the adjustment of the size of the grille occupied by the component container, and if the view has residual space after adjustment, the component container performs melon division according to a preset sequence.
When the window size of the browser is small, and the view size designed according to the original grid size appears too large in the browser, for example, the horizontal grid adaptation ratio=1/2; the longitudinal grid adaptation ratio=1/3, the variation of the grid size adjustment is smaller according to the transverse grid adaptation ratio, and the adjustment is performed according to the transverse grid adaptation ratio, at this time, the size of the component container is reduced along with the reduction of the occupied grid size in the transverse direction, so that the component container can be accommodated, but in the longitudinal direction, since the adjusted ratio does not reach the ratio that the longitudinal size should be adjusted, the component container is out of the range of the parent container (here, view), at this time, the compression is realized based on the flex-krink configuration and the distribution of the compressed grid number, for example, the compressed grid number is distributed in the order from bottom to top. It will be appreciated that the invention is not limited to the examples described above, as long as a reasonable distribution of the amount of compression is achieved, such that the component container is fully contained in the view
The other way is to adjust the adaptation proportion of the longitudinal grille with larger variation, at this time, in the longitudinal direction, through grille size adjustment, the size of the component container is reduced along with the reduction of the occupied grille size, so that all components can be accommodated, and because the transverse adjustment proportion is larger than the transverse adjustment proportion, the residual space is generated in the transverse direction, at this time, the component container can divide more space in the control part, and the melon divides according to the preset sequence (for example, from bottom to top, from right to left, etc.). Melon scores may be implemented based on the number of parts that the flex-grow is configured for the component. flex-grow allows the component to divide the remaining space of the parent container (here, view) by a preset number of melon parts. Melon division is carried out according to a preset sequence such as from bottom to top, from right to left and the like.
When the browser window size is large, the view size designed according to the original grid size is displayed too small in the browser, for example, the horizontal grid adaptation ratio=2; the longitudinal grille adaptation proportion=3, the change amount of grille size adjustment according to the transverse grille adaptation proportion is small, the transverse grille adaptation proportion is adopted to adjust the size of the grille, meanwhile, the size of the component is increased along with the increase of the size of the occupied grille, after adjustment is completed, the remaining space is generated in the longitudinal direction, at the moment, the component container can divide the space with more melons, and the melons divide the space according to a preset sequence (for example, from bottom to top, from right to left and the like). Melon scores may be implemented based on the number of parts that the flex-grow is configured for the component. flex-grow allows the component to divide the remaining space of the parent container (here, view) by a preset number of melon parts. As shown in fig. 5, (a) is a schematic view of the space left in the longitudinal direction, and (b) is a schematic view of the container after dividing the space left. Melon division can be performed according to a preset sequence, such as from bottom to top, right to left, and the like. For example, when the preset melon dividing mode is from bottom to top and from right to left, when the melon dividing is in the vertical space, the space is divided according to the sequence of the component row positions from bottom to top, and the melon dividing is firstly performed from the lowest row, and is sequentially performed from the upper row to the upper row. Similarly, when there is a remaining space in the transverse direction, the space is divided in the order of the component column positions from right to left. The above order may be set from top to bottom, from left to right, and the like, and the present invention is not limited to the above manner as long as the remaining space can be reasonably allocated.
It will be appreciated that in another alternative, a larger variation of the longitudinal grid scaling may be used, with all of the component containers being accommodated by the view, by compressing the lateral dimensions of the component containers using a compression method. And will not be described in detail herein.
The present invention is not limited to the above-described embodiments, and any embodiments may be used as long as the problems of remaining space or insufficient space after adjusting the size of the grille can be realized and the container assembly can be adjusted accordingly.
It will be appreciated that the above is merely an example, and the present invention is not limited to the use of flex-growth, flex-spring, auto-fit, auto-fill, etc. methods, and the particular method may be selected for use according to a particular program.
Further: the second type rendering mode is as follows: the method comprises the steps of S301-S305, wherein the steps of S301-S305 are as follows:
s301: calculating the total grid number accommodated by the browser;
s302: calculating the total estimated area of the assembly, wherein the total estimated area of the assembly is the sum of the grid numbers occupied by all assembly containers;
s303: comparing the total grid number accommodated by the browser with the total estimated area of the assembly;
when the total grid number accommodated by the browser is greater than or equal to the total estimated area of the assembly, step S304 is entered;
When the total number of grids accommodated by the browser is smaller than the total estimated area of the assembly, step S305 is performed;
s304: arranging the component containers by using a space arrangement method to obtain at least one row combination mode, calculating the space utilization rate of each row combination mode, and finishing all row arrangement of the component containers in the view according to the row combination mode with the highest space utilization rate;
in the arrangement of step S304, when all the row arrangements of the component containers in the view are completed by using the row combination mode with the highest space utilization, if there is a component container exceeding the arrangement of the view, step S305 is entered;
s305: sequentially adjusting the sizes of the component containers from high to low according to the adjustment step sizes and the adjustment weights; after each adjustment of the size of the component container corresponding to the component of the weight value of the adjustment, calculating the total estimated area of the component until the total number of grids contained in the browser is greater than or equal to the total estimated area of the component, and entering step S304.
The component container dimensions include a lateral dimension and a longitudinal dimension of the component container.
The specific adjustment in step S305 is as follows: sequentially adjusting the sizes of the component containers according to the order of adjusting weights from high to low and the preset step length; after the component container size of the component corresponding to the weight value of each adjustment weight is adjusted, calculating the total estimated area of the component, comparing the total grid number accommodated by the browser with the total estimated area of the component, adjusting the component container size of the component corresponding to the next ordered adjustment weight if the total grid number accommodated by the browser is smaller than the total estimated area of the component, and if the component container size of the component corresponding to all adjustment weights is adjusted, starting to adjust again from the maximum value of the adjustment weights until the total grid number accommodated by the browser is larger than or equal to the total estimated area of the component, and entering step S304.
Row utilization = sum of widths of the row components/current window width;
for example: the window width 30, 3 components with the same height to be placed in the row are 10, 10 and 15 respectively, the current window obviously cannot accommodate 3 components at the same time, the combination of 10+10 or the combination of 10+15 is determined by calculating the utilization rate of the row, and obviously, the utilization rate of the combination of 10+15 is high, so that the combination of the components of 10+15 is selected to be placed in the row.
Since the window has a certain width, when combining component containers having the same height, there are cases where all container components cannot be placed in a row, and there can be a plurality of combinations. The permutation combination formed by all combinations of all rows is at least one row combination mode. And selecting a row combination mode with the highest row utilization rate from the at least one row combination mode by calculating the row utilization rate, and arranging component containers, so that the space utilization rate can be optimized.
In the arrangement of step S304, when all the rows of the component containers in the view are arranged by using the row combination mode with the highest space utilization rate, the component containers exceeding the view arrangement are mainly the case that part of the component containers exceed the view because the row utilization rate cannot reach 100%. In this case, after the adjustment is performed in S305, the accommodation of all component containers by the view can be quickly performed after a relatively small number of adjustments, and the adjustment is ended.
Further: the arrangement mode of the component containers by using the space arrangement method is as follows:
arranging the component containers into a column according to a preset component container arrangement sequence from left to right and from top to bottom, and preferentially combining the component containers with the same height in the column to form rows to obtain at least one row combination mode;
the step length of adjustment is 1-4 grids; the adjustment step length means that the number of grids of the length and width of the component container is adjusted each time from the component serial number i=1. When the step length is 1, the effect is better. The adjustment step size may be set by receiving an input, and is not limited to the above-mentioned numerical value.
The adjusting weight is as follows: the relative proportion is unlimited;
the value range of the relative proportion is 0% -infinity.
In the arrangement mode of the components by using the space arrangement method, the components are arranged into a column from left to right and from top to bottom according to the preset arrangement sequence of the component containers, and in the column, the component containers with the same arrangement height are preferentially combined to form rows, so that at least one (one or more) row combination mode is obtained. That is, all the components are arranged into a column according to the sequence, then the components with the same height are combined into a group, and a row combination mode with the optimal row utilization rate is determined according to the window width and the row utilization rate. And combining the components according to the row combination mode, and displaying the components in one row. After the rows are assembled, the arrangement sequence among the rows can be determined by the arrangement sequence number when the first component of the row is arranged into a column. In the components arranged in one row, the components are also arranged according to the sequence of the arrangement sequence numbers when the components are arranged in one row, so that the originally designed arrangement sequence is ensured to the greatest extent. The order of the arrangement may be set according to the needs of the user without considering the original order, so that the arrangement order may not be limited to the above method.
In the second type of rendering mode, because the special display proportion is processed, after the processing according to the method is processed, the components in the view are not completely displayed according to the arrangement sequence of the original design, but the processing method changes part of the original layout in order to ensure that each component in the view can completely display the content in normal proportion as far as possible, but the layout is as far as possible according to the sequence of the user design at the time, namely from left to right to top to bottom.
The predetermined sequence may be from left to right, from top to bottom, and is not limited to the above sequence, and may be set.
Assigning an adjustment weight according to the limit range size allowed by the component content scaling, and sorting the component containers according to the adjustment weight size: the component content type determines the size of the allowed limit range, the adjustment weight is determined based on the selection of the user, and the formula is defined: xmax/xmin/ymax/ymin = lock aspect ratio/relative ratio/unlimited, configured by user selection; for example, the lateral text component may be set to be unlimited, but the length maximum (xmax) may be set to be 100% but the height minimum (ymen) may be set to be only the current value, i.e., ymen may be adjustable in the range of 10% -100% if ymen=10% is set and may be adjustable in the range of 100% -200% if ymen=200% is set. A default value may be used for the value that the relative proportion user does not set.
In general, the smaller the limit the larger the weight, so the unrestricted weight > the relative proportional weight > the lock aspect ratio weight. The user may set the weights, for example, set unlimited weight=101 points, relative proportion weight 1 to 100 points, lock aspect ratio 0.5, etc., as needed, as long as several types of scores are made to meet unlimited weight > relative proportion weight > lock aspect ratio weight.
Or the system automatically maps the values of xmax, xmin, ymax, ymin to 1-100 points, and the unlimited weight=101 points, the locking aspect ratio of 0.5 and the like, so long as the scores of several types accord with the unlimited weight > the relative proportion weight > the locking aspect ratio weight.
The mapping uses a normalization formula, e.g. the formula between the mapping to the numerical ranges (a, b) is:
*（b-a）+a
wherein, xmin and Xmax are the upper and lower limits of the allowable value range, and x' is the mapped score.
When the above weights are used to adjust the size of the component container, all components xmax and ymax are used as a group, xmin and ymin are used as a group, when the components need to be enlarged, the weights calculated by the xmin and ymin groups are used, and when the components need to be reduced, so in step S305, the weights calculated by the xmin and ymin groups are used, and therefore, the component weight value=the weight value calculated by xmin+the weight value calculated by ymin; in step S305, when the adjustment is performed, the components are first sorted according to the weight values from large to small, and the components (component groups) are assigned with serial numbers i=1 to imax according to the sorting, imax is the total number of different weight values, i=1 corresponds to the maximum weight group, and i=imax corresponds to the minimum weight group; firstly, adjusting a component with the largest weight score, namely, a component with i=1; adjusting according to a preset adjusting step length, wherein i=i+1 after adjustment; calculating the total estimated area of the components again, comparing, and if the total grid number contained in the browser is greater than or equal to the total estimated area of the components, entering step S304; otherwise, continuing to adjust, and when continuing to adjust, adjusting the component with the weight value ranked next (the component with the sequence number i=2), repeating the steps until the step S304 is entered, or traversing all the components, starting to adjust the components from the component with the maximum weight value for a new round (i=1), and repeating the steps until the step S304 is entered. The same weight is adjusted, one or more components can be corresponding, and when the weight is adjusted by traversing, one component or a group of components with the same weight value is adjusted.
The above process may be summarized as traversing the adjustment weights from high to low, adjusting the sizes of one or a group of components corresponding to the current adjustment weight each time, calculating and judging, ending if the adjustment is possible, traversing to the component of the next weight to adjust if the adjustment is impossible, entering step S304 after the adjustment, entering the next round of traversing if one round of adjustment is still impossible, and entering step S304 after the adjustment.
Further: when the maximum proportion of a certain component is adjusted, the component is not adjusted any more.
During the adjustment process, if the preset limit proportion of the assembly is reached, the size of the assembly container is not adjusted any more.
Further: the formula of the total estimated area of the calculation assembly is as follows:
wherein i is a component sequence number, and i is a non-negative integer;
the number of the longitudinal grids of the assembly is the number of grids occupied by the assembly container in the longitudinal direction; the number of the transverse grids of the assembly is the number of grids occupied by the assembly container in the transverse direction; the transverse direction is the width direction of the browser; the longitudinal direction is the height direction of the browser.
Further: the method for acquiring the browser window parameters comprises the following steps:
monitoring a resize event and a load event of a browser window;
The following variables were obtained when the above event was monitored: window inner width, window inner height;
and acquiring the resolution of the browser in the width direction according to the width of the window, and acquiring the resolution of the browser in the height direction according to the height of the window.
The invention relates to a technology combining code-free design of a dashboard interface at a browser end and dynamic rendering and self-adaptive rendering of webpage, which utilizes a dashboard design tool to complete the design of a dashboard and the definition of dashboard self-adaptive rules, and the front end calculates the rendering parameters of the interface according to the design constraint, rule definition and current interface window data of the dashboard interface and algorithm to achieve the dynamic rendering effect along with the window
By using the method of the invention, a coordinated display effect can be realized on a display device with a special proportion from a mobile terminal to a large screen by using a set of view design, the problem of imbalance of the proportion of an interface component can still be caused under the same scene in the related technology, the problem of interface self-adaption is mostly solved based on a front-end code layer in the related technology, and the problem of interface self-adaption is solved by combining three layers of component metadata, component configuration and front-end self-adaption, so that a better self-adaption effect can be obtained. Compared with a front-end code-based mode, the method has strong flexibility, is easy for a user to configure and adjust, and improves maintainability and expandability of views.
Example 3
As shown in fig. 4, a method for creating an adaptive view based on a grid layout is used to create a view rendered by the method described above; the method comprises the following steps:
s401: establishing a view, and configuring view attributes for the view; the dimensions of the view are in units of a grid;
s402: adding components in the view, enabling the components and the view to form a mapping relation, and configuring component attributes for the components;
s403: setting a component container position and a component container size; the module container size is in units of a grid.
When the component data are stored, the height and the width of the component are not assigned by using pixels as units, but are assigned by adopting the aggregation of grids, the height and the width of the component are recorded in the component attribute and respectively correspond to a plurality of grids, the grids are used as a configurable item-unit cell (pixels of a user configurable unit cell) in the system, a standard square of 1:1 is used as a minimum area unit, the concept of pixel points is replaced, the definition of aspect ratio is realized, and the length and the width are integers because of the aggregation in a calculation mode, so that the method is very beneficial to users to allocate view space; as for the grids, the invention defines the grids as abstract area units, so that the size of the grids and the spacing between the grids can be parameterized, the grids can be enlarged by a large screen, and the grids can be reduced by a small screen.
The view attributes include: theme, resolution, margin, etc.; the view attribute is obtained from an attribute library which is prestored in a relational database;
the component attributes are a visual chart, a text display frame, an icon, an alarm window, a message prompt, a GIS map, a 3D effect and the like; the component attributes are obtained from an attribute library pre-stored in a relational database.
The view design visualization component and the view object form an instantiation mapping relation, the view does not need to be coupled with the display content of the component, the view only accommodates containers of two-dimensional graphs with different sizes, and any reference can be made when the view is designed.
The component library maintains a high expandable type, can evolve along with the progress of front-end technology and the evolution of mainstream style and design specifications, so that the invention has long-term use value and cannot be eliminated due to the replacement of short-term technology.
For the components, the user can define metadata of the components through a front-end list process developed by JavaScript (JS), so that the components exert extremely strong plasticity, such as endowing the components with a background attribute, associating picture data, and the user can add or replace different picture backgrounds, including dynamic pictures, for any component; the component is endowed with a color attribute, so that a masking effect can be added to the component through standard parameters such as sRGB and the like; by giving the icon type attribute to the icon type component, the graphics such as a bar graph, a line graph, a stacking graph, a dashboard, a pie chart and the like can be related to the component, and any type of graph can be displayed to a user and can be switched by the user by making a selection in design.
Example 4
As shown in fig. 4, further on the basis of example 3: the module container positions and module container dimensions are set as follows:
displaying a view and a component container on a front page, receiving the drag of a user on the position of the component container and the scaling of the size of the component container, displaying the simulation of the position of a predicted component container falling point and the size of the component container, receiving the confirmation of the user, adsorbing the component container on the position of the predicted component container falling point and at least one grid matched with the size of the component container, and realizing automatic alignment;
the module container dimensions include: the lateral dimension of the module container, the longitudinal dimension of the module container;
the transverse dimension of the component container corresponds to the number of columns of the grid occupied by the component container in the width direction of the browser, and the longitudinal dimension of the component container corresponds to the number of rows of the grid occupied by the component container in the height direction of the browser.
The grid mapped upon adsorption of the component containers may be used to determine the display position of the component containers of the component, and the corresponding width (transverse) and height (longitudinal) dimensions.
In the embodiment of the invention, the self-adaptive view rendering method and the creation method based on the grid layout can be used for creating and rendering a workshop operation signboard, a management cockpit large screen and a desktop end data analysis view, and can be understood that the method is not limited to the application and can be applied to all application scenes of the conception of the invention.
The foregoing description of the preferred embodiments of the invention is not intended to be limiting, but rather is intended to cover all modifications, equivalents, or alternatives falling within the spirit and principles of the invention.
Claims (10)
1. An adaptive view rendering method based on grid layout is characterized in that: the method comprises the following steps:
s101: obtaining browser window parameters, wherein the browser window parameters are as follows: browser height direction resolution, browser width direction resolution;
s102: calculating the ratio of the resolution in the width direction of the browser to the resolution in the height direction of the browser;
s103: when the ratio falls into a numerical range of a preset threshold, judging that the screen type is a first type, and using a first type rendering mode; the first type rendering mode realizes the self-adaptive arrangement of the component containers based on the adjustment of the grid size;
or when the ratio does not fall into the numerical range of the preset threshold value, judging that the screen type is a second type, and using a second type rendering mode; the second type rendering mode realizes the self-adaptive arrangement of the component containers based on the number of the grids occupied by the component containers.
2. The method of claim 1, wherein:
the first type rendering mode is as follows:
s201: calculating a grid adaptation ratio according to the grid parameters;
s202: adjusting the size of the grille according to the grille adaptation proportion;
s203: adjusting the size of the component container according to the adjusted grid size;
s204: rendering the component elements according to the proportion of the size of the component container after adjustment relative to the size of the component container before adjustment;
the module container size is in units of a grid.
3. The method of claim 2, wherein:
the grid is square, and the grid parameters comprise: grid pixel number, transverse grid number, longitudinal grid number;
the grid pixel number is the pixel number corresponding to the grid side length; the number of the transverse grids is the number of grid columns along the transverse direction of the view;
the number of the longitudinal grids is the number of grid lines along the longitudinal direction of the view;
the mode of calculating the grille adaptation proportion is as follows:
lateral grid adaptation ratio = browser width direction resolution/(grid pixel number x lateral grid number);
vertical grid adaptation ratio = browser height direction resolution/(grid pixel number x vertical grid number);
The view transverse direction is the width direction of the browser; the view longitudinal direction is the browser height direction.
4. The method of claim 2, wherein:
the mode of adjusting the size of the grille according to the grille adaptation proportion is as follows:
firstly, comparing the adaptation proportion of the transverse grating with the adaptation proportion of the longitudinal grating, and adjusting the size of the grating by taking a value with smaller variation as an adjustment proportion;
the mode of adjusting the size of the component container according to the adjusted grille size is as follows:
the size of the component container is adjusted along with the adjustment of the size of the grille occupied by the component container, and if the view has residual space after adjustment, the component container performs melon division according to a preset sequence.
5. The method of claim 1, wherein:
the second type rendering mode includes steps S301 to S305, where the steps S301 to S305 are:
s301: calculating the total grid number accommodated by the browser;
s302: calculating the total estimated area of the assembly, wherein the total estimated area of the assembly is the sum of the grid numbers occupied by all assembly containers;
s303: comparing the total grid number accommodated by the browser with the total estimated area of the assembly;
when the total grid number accommodated by the browser is greater than or equal to the total estimated area of the assembly, step S304 is entered;
When the total number of grids accommodated by the browser is smaller than the total estimated area of the assembly, step S305 is performed;
s304: arranging the component containers by using a space arrangement method to obtain at least one row combination mode, calculating the space utilization rate of each row combination mode, and finishing all row arrangement of the component containers in the view according to the row combination mode with the highest space utilization rate;
in the arrangement of step S304, when all the row arrangements of the component containers in the view are completed by using the row combination mode with the highest space utilization, if there is a component container exceeding the arrangement of the view, step S305 is entered;
s305: sequentially adjusting the sizes of the component containers from high to low according to the adjustment step sizes and the adjustment weights; after each adjustment of the size of the component container corresponding to the component of the weight value of the adjustment, calculating the total estimated area of the component until the total number of grids contained in the browser is greater than or equal to the total estimated area of the component, and entering step S304.
6. The method of claim 5, wherein:
the arrangement mode of the component containers by using the space arrangement method is as follows:
arranging the component containers into a column according to a preset component container arrangement sequence from left to right and from top to bottom, and preferentially combining the component containers with the same height in the column to form rows to obtain at least one row combination mode;
The step length of adjustment is 1-4 grids;
the adjusting weight is as follows: the relative proportion is unlimited; the value range of the relative proportion is 0% -infinity.
7. The method of claim 5, wherein:
the formula of the total estimated area of the calculation assembly is as follows:
；
wherein i is a component sequence number, and i is a non-negative integer;
the number of the longitudinal grids of the assembly is the number of grids occupied by the assembly container in the longitudinal direction; the number of the transverse grids of the assembly is the number of grids occupied by the assembly container in the transverse direction; the transverse direction is the width direction of the browser; the longitudinal direction is the height direction of the browser.
8. The method of claim 1, wherein:
the method for acquiring the browser window parameters comprises the following steps:
monitoring a resize event and a load event of a browser window;
the following variables were obtained when the above event was monitored: window inner width, window inner height;
and acquiring the resolution of the browser in the width direction according to the width of the window, and acquiring the resolution of the browser in the height direction according to the height of the window.
9. A method for creating an adaptive view based on a grid layout, characterized by: for creating an adaptive view rendered by the method of any of claims 1-8; the method comprises the following steps:
S401: establishing a view, and configuring view attributes for the view; the dimensions of the view are in units of a grid;
s402: adding components in the view, enabling the components and the view to form a mapping relation, and configuring component attributes for the components;
s403: setting a component container position and a component container size; the module container size is in units of a grid.
10. The method of claim 9, wherein:
the module container positions and module container dimensions are set as follows:
displaying a view and a component container on a front page, receiving the drag of a user on the position of the component container and the scaling of the size of the component container, displaying the simulation of the position of a predicted component container falling point and the size of the component container, receiving the confirmation of the user, adsorbing the component container on the position of the predicted component container falling point and at least one grid matched with the size of the component container, and realizing automatic alignment;
the module container dimensions include: the lateral dimension of the module container, the longitudinal dimension of the module container;
the transverse dimension of the component container corresponds to the number of columns of the grid occupied by the component container in the width direction of the browser, and the longitudinal dimension of the component container corresponds to the number of rows of the grid occupied by the component container in the height direction of the browser.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311003540.0A CN116719597B (en) | 2023-08-10 | 2023-08-10 | Self-adaptive view rendering method and creation method based on grid layout |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311003540.0A CN116719597B (en) | 2023-08-10 | 2023-08-10 | Self-adaptive view rendering method and creation method based on grid layout |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116719597A true CN116719597A (en) | 2023-09-08 |
| CN116719597B CN116719597B (en) | 2024-01-26 |
Family
ID=87870185
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311003540.0A Active CN116719597B (en) | 2023-08-10 | 2023-08-10 | Self-adaptive view rendering method and creation method based on grid layout |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116719597B (en) |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020078459A1 (en) * | 2000-08-30 | 2002-06-20 | Mckay Brent | Interactive electronic directory service, public information and general content delivery system and method |
| US20020191867A1 (en) * | 2000-08-17 | 2002-12-19 | Hao Le | Image data displaying system and method |
| US20030095135A1 (en) * | 2001-05-02 | 2003-05-22 | Kaasila Sampo J. | Methods, systems, and programming for computer display of images, text, and/or digital content |
| JP2011165203A (en) * | 2011-04-04 | 2011-08-25 | Fujitsu Ltd | Browser program with layout function and data display device |
| CN103970894A (en) * | 2014-05-27 | 2014-08-06 | 合一网络技术(北京)有限公司 | Method and system for displaying interface streaming layout in adaptive adjustment mode |
| CN105740315A (en) * | 2015-12-31 | 2016-07-06 | 焦点科技股份有限公司 | Multi-screen response type webpage layout adjustment method |
| CN110597510A (en) * | 2019-08-09 | 2019-12-20 | 华为技术有限公司 | Dynamic layout method and device for interface |
| CN114365084A (en) * | 2019-08-21 | 2022-04-15 | 阿韦瓦软件有限责任公司 | Responsive layout system and server |
| CN115237522A (en) * | 2022-07-22 | 2022-10-25 | 上海哔哩哔哩科技有限公司 | Page self-adaptive display method and device |
| CN116150515A (en) * | 2021-11-19 | 2023-05-23 | 北京奇元科技有限公司 | Adaptive rendering method and system for resolution DPI, storage medium and computer equipment |
-
2023
- 2023-08-10 CN CN202311003540.0A patent/CN116719597B/en active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020191867A1 (en) * | 2000-08-17 | 2002-12-19 | Hao Le | Image data displaying system and method |
| US20020078459A1 (en) * | 2000-08-30 | 2002-06-20 | Mckay Brent | Interactive electronic directory service, public information and general content delivery system and method |
| US20030095135A1 (en) * | 2001-05-02 | 2003-05-22 | Kaasila Sampo J. | Methods, systems, and programming for computer display of images, text, and/or digital content |
| JP2011165203A (en) * | 2011-04-04 | 2011-08-25 | Fujitsu Ltd | Browser program with layout function and data display device |
| CN103970894A (en) * | 2014-05-27 | 2014-08-06 | 合一网络技术(北京)有限公司 | Method and system for displaying interface streaming layout in adaptive adjustment mode |
| CN105740315A (en) * | 2015-12-31 | 2016-07-06 | 焦点科技股份有限公司 | Multi-screen response type webpage layout adjustment method |
| CN110597510A (en) * | 2019-08-09 | 2019-12-20 | 华为技术有限公司 | Dynamic layout method and device for interface |
| CN114365084A (en) * | 2019-08-21 | 2022-04-15 | 阿韦瓦软件有限责任公司 | Responsive layout system and server |
| CN116150515A (en) * | 2021-11-19 | 2023-05-23 | 北京奇元科技有限公司 | Adaptive rendering method and system for resolution DPI, storage medium and computer equipment |
| CN115237522A (en) * | 2022-07-22 | 2022-10-25 | 上海哔哩哔哩科技有限公司 | Page self-adaptive display method and device |
Non-Patent Citations (1)
| Title |
|---|
| 王楠;封雷;: "基于浏览器的矢量数据可视化系统", 计算机与现代化, no. 01 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116719597B (en) | 2024-01-26 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP7354294B2 (en) | System and method for providing responsive editing and display integrating hierarchical fluid components and dynamic layout | |
| CN104063211B (en) | Layout system for devices with variable display screen size and orientation | |
| US10606925B2 (en) | Responsive grid layouts for graphic design | |
| US10185702B1 (en) | Publisher formatting controls | |
| JP2834329B2 (en) | How to automatically display map symbols | |
| US8160398B1 (en) | Independent resizing of multiple image regions | |
| US9817794B2 (en) | Responsive rendering of data sets | |
| CN105392065A (en) | Method and system for arranging page content of intelligent television | |
| CN106296622B (en) | Automatic layout jigsaw method and device | |
| EP2068251A2 (en) | A method of content adaptation for electronic displays | |
| CN112015509A (en) | Data visualization large screen construction method, electronic device and storage medium | |
| CN114579223A (en) | Interface layout method, electronic equipment and computer readable storage medium | |
| CN116206012A (en) | Element layout method and related equipment | |
| CN111415396A (en) | Image generation method and device and storage medium | |
| CN107391148B (en) | View element saving method and device, electronic equipment and computer storage medium | |
| CN116719597B (en) | Self-adaptive view rendering method and creation method based on grid layout | |
| CN106445276A (en) | Desktop icon processing method and apparatus | |
| CN106535002B (en) | Desktop starter template layout updating method and device | |
| CN106898351B (en) | Control method and device for large screen | |
| CN112734900A (en) | Baking method, baking device, baking equipment and computer-readable storage medium of shadow map | |
| CN111985203A (en) | Document processing method, document processing device and electronic equipment | |
| CN114154095A (en) | Page picture generation method, device, equipment and storage medium | |
| CN104517273A (en) | Image super-resolution processing method and apparatus | |
| CN107330905A (en) | A kind of image processing method, device and storage medium | |
| CN113254000A (en) | Method, device, storage medium and equipment for generating 2D scene based on JSON data |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |