Display interface generation method and device, equipment and storage medium thereof

Abstract

The embodiment of the invention belongs to the technical field of research and development design, is applied to a U I display interface generation scene, and relates to a display interface generation method, device and equipment and a storage medium thereof.The percentage of each layer of division frame relative to the next layer of division frame is calculated through the hierarchical stacking relation between division frames and the actual size of the division frames; generating a mapping structure corresponding to the reference display interface based on the percentage of each layer of division frame relative to the next layer of division frame, the position information of the division frames and the hierarchical stacking relationship between the division frames; and generating a new display interface on the target front-end page according to the mapping structure and a preset limited document. According to the method, the new display interface is generated on the target front-end page in combination with the document limiting mode, compared with previous generation of the new display interface, the original display interface can be generated to the new display interface without or with only a small number of interface limiting fields, and overall migration and adjustment of the interface under the condition of low consumption are achieved.

Description

Technical Field

[0001] The present application relates to the field of R&D and design technology, and is applied to UI display interface generation scenarios, and in particular to a display interface generation method, device, equipment and storage medium thereof. Background Art

[0002] With the promotion and use of BI tools in various technology and financial companies, self-service interface assembly scenarios have become very frequent. Therefore, various BI tool platforms have launched low-code dashboard production tools to meet the demands of many data analysts to efficiently produce dashboards and realize business data visualization.

[0003] Although the low-code dashboard creation tools of various BI platforms can be used to self-produce exquisite and accurate dashboards, the worst container experience and low efficiency have become the biggest complaints of data analyst users. The assembly process requires learning multiple systems such as absolute layout, dynamic layout, and grid layout at the same time. The operation results are not as expected. It is necessary to read relevant documents in advance or conduct multiple trials and errors to master the skills of using the tools. The assembly process is cumbersome, and when restoring exquisite dashboards, it is impossible to restore them accurately, so it is achieved by unconventional means such as UI image adjustment; the use of flexible and diverse containers is complicated and obscure, and often requires a large number of repeated adjustments; when making common layout changes, sequence adjustments, interface adaptation and other operations on the interface, there are generally operational cumbersomeness, and the quality of the experience that affects the entire system is difficult to control. Therefore, how to design and plan an interface generation method that is simple to operate and has strong adaptability has become an urgent problem to be solved. Summary of the invention

[0004] The purpose of the embodiments of the present application is to propose a display interface generation method, device, equipment and storage medium thereof to solve the problem of how to design and plan an interface generation method that is simple to operate and has strong adaptability.

[0005] In order to solve the above technical problems, the present application embodiment provides a method for generating a display interface, which adopts the following technical solution:

[0006] A method for generating a display interface comprises the following steps:

[0007] Acquire actual size and position information of all division frames in the reference display interface, wherein all division frames include all display frames stacked in layers;

[0008] According to the hierarchical stacking relationship between all the division frames and the actual sizes of all the division frames, calculating the percentage of each layer of division frames compared to the next layer of division frames;

[0009] Generate a mapping structure corresponding to the reference display interface based on the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes, and the hierarchical stacking relationship between all the division boxes;

[0010] A new display interface is generated on the target front-end page according to the mapping structure and the preset limiting document.

[0011] Furthermore, the step of obtaining the actual size and position information of all the division frames in the reference display interface specifically includes:

[0012] Obtaining the DOM document of the reference display interface and the interface size of the reference display interface;

[0013] According to the DOM document and the interface size, the hierarchical stacking relationship between all the division boxes and the actual size and position information of all the division boxes are identified.

[0014] Furthermore, the step of generating a new display interface on the target front-end page according to the mapping structure and the preset limiting document includes:

[0015] Identify whether the content in the restricted document is empty;

[0016] If the content in the limited document is empty, the bottommost division frame in the mapping structure is set as the reference division frame, and the actual size of the reference division frame in the new display interface is set as the page size of the target front-end page;

[0017] Performing reverse calculation according to the actual size of the reference partition frame in the new display interface and the mapping structure;

[0018] According to the reverse calculation result, the actual size and position information of each layer of division box in the new display interface are determined;

[0019] Based on the actual size and position information of each layer of division boxes in the new display interface, a new display interface is generated on the target front-end page.

[0020] Furthermore, after executing the step of identifying whether the content in the limited document is empty, the method further includes:

[0021] If the content in the restricted document is not empty, parsing the content in the restricted document to obtain a parsing result;

[0022] If it is determined through the analysis result that the limited document contains at least one partition box with an actual size in the new display interface, one partition box is randomly selected as a reference partition box;

[0023] Then, judging whether the reference division frame is the bottom-level division frame according to the identification information of the reference division frame;

[0024] If the reference partition frame is the bottom-level partition frame, performing reverse calculation according to the actual size of the reference partition frame in the new display interface and the mapping structure;

[0025] According to the reverse calculation result, the actual size and position information of each layer of division box in the new display interface are determined;

[0026] Based on the actual size and position information of each layer of division boxes in the new display interface, a new display interface is generated on the target front-end page.

[0027] Furthermore, after executing the step of determining whether the reference division frame is a bottom-level division frame based on the identification information of the reference division frame, the method further includes:

[0028] If the reference partition frame is not the bottom-level partition frame, performing reverse calculation according to the actual size of the reference partition frame in the new display interface and the mapping structure;

[0029] According to the inverse calculation result, determining the actual size and position information of all underlying division frames of the reference division frame;

[0030] According to the inverse calculation result, determining the actual size and position information of all upper-layer division frames of the reference division frame;

[0031] Comparing the actual sizes of all bottom-level partition frames of the reference partition frame with the page size of the target front-end page respectively;

[0032] If the actual sizes of all the underlying division boxes of the benchmark division box do not exceed the page size, a new display interface is generated on the target front-end page based on the actual sizes and position information of all the underlying division boxes of the benchmark division box and the actual sizes and position information of all the upper division boxes of the benchmark division box.

[0033] Furthermore, after executing the step of comparing the actual sizes of all bottom-level division frames of the reference division frame with the page size of the target front-end page, the method further includes:

[0034] If the actual size of the underlying division frame of the reference division frame exceeds the page size, distinguishing and marking the underlying division frame that exceeds the page size and the underlying division frame that does not exceed the page size;

[0035] According to the distinguishing marking results, all bottom-level division frames exceeding the page size are screened out, and all bottom-level division frames exceeding the page size are windowed and hidden;

[0036] According to the difference marking results, all the underlying division boxes that do not exceed the page size are filtered out, and based on the actual size and position information of all the underlying division boxes that do not exceed the page size, and the actual size and position information of all the upper division boxes of the benchmark division box, a new display interface is generated on the target front-end page.

[0037] Furthermore, the step of performing reverse calculation according to the actual size of the reference partition frame in the new display interface and the mapping structure includes:

[0038] According to the mapping structure, an actual size of the reference division frame in the reference display interface is parsed;

[0039] Calculating a ratio between an actual size of the reference dividing frame in the reference display interface and an actual size of the reference dividing frame in the new display interface to obtain a ratio calculation result;

[0040] According to the ratio calculation result, all the division frames in the reference display interface are subjected to geometric scaling processing to determine the actual sizes and position information of all the division frames in the new display interface.

[0041] In order to solve the above technical problems, the embodiment of the present application also provides a display interface generation device, which adopts the following technical solution:

[0042] A display interface generating device, comprising:

[0043] A reference display interface information acquisition module, used to acquire actual size and position information of all division frames in the reference display interface, wherein all division frames include all display frames stacked in layers;

[0044] A hierarchical frame percentage calculation module, used to calculate the percentage of each layer of division frames compared to the next layer of division frames according to the hierarchical stacking relationship between all the division frames and the actual sizes of all the division frames;

[0045] An interface mapping structure generating module, configured to generate a mapping structure corresponding to the reference display interface based on the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes, and the hierarchical stacking relationship between all the division boxes;

[0046] A new display interface generation module is used to generate a new display interface on a target front-end page according to the mapping structure and a preset limiting document.

[0047] In order to solve the above technical problems, the embodiment of the present application further provides a computer device, which adopts the following technical solution:

[0048] A computer device includes a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the above-mentioned display interface generation method when executing the computer-readable instructions.

[0049] In order to solve the above technical problems, the embodiment of the present application further provides a computer-readable storage medium, which adopts the following technical solution:

[0050] A computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by a processor, the steps of the display interface generation method as described above are implemented.

[0051] Compared with the prior art, the embodiments of the present application have the following beneficial effects:

[0052] The display interface generation method described in the embodiment of the present application obtains the actual size and position information of all the division boxes in the reference display interface, wherein all the division boxes include all the display frames stacked in layers; according to the hierarchical stacking relationship between all the division boxes and the actual size of all the division boxes, the percentage of each layer of division boxes compared to the next layer of division boxes is calculated; based on the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes and the hierarchical stacking relationship between all the division boxes, a mapping structure corresponding to the reference display interface is generated; according to the mapping structure and the preset limiting document, a new display interface is generated on the target front-end page. The present application generates a new display interface on the target front-end page through the original interface mapping structure in combination with the limiting document method. Compared with the previous generation of a new display interface, no or only a small number of interface restriction fields are required to realize the generation of the original display interface to the new display interface, thereby realizing the overall migration and adjustment of the interface under low consumption. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] In order to more clearly illustrate the scheme in the present application, a brief introduction is given below to the drawings required for use in the description of the embodiments of the present application. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0054] Figure 1 is an exemplary system architecture diagram to which the present application may be applied;

[0055] Figure 2is a flow chart of an embodiment of a method for generating a display interface according to the present application;

[0056] Figure 3 yes Figure 2 A flowchart of a specific embodiment of step 201 is shown;

[0057] Figure 4 yes Figure 2 A flowchart of a specific embodiment of step 204 is shown;

[0058] Figure 5 A flowchart showing another specific embodiment of generating a new display interface on a target front-end page;

[0059] Figure 6 A flowchart showing another specific embodiment of generating a new display interface on a target front-end page;

[0060] Figure 7 A flowchart showing another specific embodiment of generating a new display interface on a target front-end page;

[0061] Figure 8 is a structural schematic diagram of an embodiment of a display interface generating device according to the present application;

[0062] Fig. 9 It is a structural diagram of an embodiment of a computer device according to the present application. DETAILED DESCRIPTION

[0063] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by technicians in the technical field of the present application; the terms used in the specification of the application herein are only for the purpose of describing specific embodiments and are not intended to limit the present application; the terms "including" and "having" and any variations thereof in the specification and claims of the present application and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of the present application or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.

[0064] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0065] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.

[0066] like Figure 1 As shown, the system architecture 100 may include a terminal device 101, a network 102 and a server 103. The terminal device 101 may be a laptop 1011, a tablet computer 1012 or a mobile phone 1013. The network 102 is used to provide a medium for a communication link between the terminal device 101 and the server 103. The network 102 may include various connection types, such as wired, wireless communication links or optical fiber cables.

[0067] The user can use the terminal device 101 to interact with the server 103 through the network 102 to receive or send messages, etc. Various communication client applications can be installed on the terminal device 101, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0068] The terminal device 101 can be various electronic devices with a display screen and supporting web browsing. In addition to the laptop computer 1011, the tablet computer 1012 or the mobile phone 1013, the terminal device 101 can also be an e-book reader, an MP3 player (Moving Picture Experts Group Audio Layer III), an MP4 (Moving Picture Experts Group Audio Layer IV) player, a laptop computer and a desktop computer, etc.

[0069] The server 103 may be a server that provides various services, such as a background server that provides support for a web page displayed on the terminal device 101 .

[0070] It should be noted that the display interface generation method provided in the embodiment of the present application is generally executed by a terminal device, and accordingly, the display interface generation device is generally arranged in the terminal device.

[0071] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0072] Continue to refer Figure 2 , shows a flow chart of an embodiment of a method for generating a display interface according to the present application. The method for generating a display interface comprises the following steps:

[0073] Step 201, obtaining actual size and position information of all division frames in the reference display interface, wherein all division frames include all display frames stacked in layers;

[0074] Specifically, all the hierarchically stacked display frames include an interface background frame, a picture display frame, a text display frame, a search frame, a list layout frame, all data field frames in the list layout frame, and the like.

[0075] In this embodiment, the actual sizes and position information of all the division frames in the reference display interface are obtained so that a new display interface can be subsequently generated according to the actual sizes and position information of all the division frames in the reference display interface.

[0076] Step 202, calculating the percentage of each layer of division boxes compared to the next layer of division boxes according to the hierarchical stacking relationship between all the division boxes and the actual sizes of all the division boxes;

[0077] Specifically, by calculating the percentage of each layer of division boxes compared to the next layer of division boxes, when subsequently generating a new display interface, the percentage of each layer of division boxes compared to the next layer of division boxes can be fully utilized to generate hierarchical boxes.

[0078] Step 203, generating a mapping structure corresponding to the reference display interface based on the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes, and the hierarchical stacking relationship between all the division boxes;

[0079] Specifically, by generating a mapping structure corresponding to the reference display interface including the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes and the hierarchical stacking relationship between all the division boxes, a new display interface can be generated in combination with the mapping structure.

[0080] Step 204: Generate a new display interface on the target front-end page according to the mapping structure and the preset limiting document.

[0081] Specifically, through the preset limiting document, a new display interface can be generated by adding a target frame size to the limiting document and combining the mapping structure, so that the layout of the newly generated display interface can be adjusted based on the original reference display interface.

[0082] In this embodiment, by obtaining the actual size and position information of all the division boxes in the reference display interface, wherein all the division boxes include all the display frames stacked in layers; according to the hierarchical stacking relationship between all the division boxes and the actual size of all the division boxes, the percentage of each layer of division boxes compared to the next layer of division boxes is calculated; based on the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes and the hierarchical stacking relationship between all the division boxes, a mapping structure corresponding to the reference display interface is generated; according to the mapping structure and the preset limiting document, a new display interface is generated on the target front-end page. The present application generates a new display interface on the target front-end page through the original interface mapping structure in combination with the limiting document method. Compared with the previous generation of a new display interface, no or only a small number of interface restriction fields are required to realize the generation of the original display interface to the new display interface, thereby realizing the overall migration and adjustment of the interface under low consumption conditions.

[0083] Continue to refer Figure 3 , in some optional implementations, Figure 3 yes Figure 2 The flowchart of a specific embodiment of step 201 shown includes the following steps:

[0084] Step 301, obtaining the DOM document of the reference display interface and the interface size of the reference display interface;

[0085] Step 302: Identify the hierarchical stacking relationship between all the partition boxes, and the actual size and position information of all the partition boxes according to the DOM document and the interface size.

[0086] Specifically, by parsing the DPM document and combining the interface size, the hierarchical stacking relationship between all the division boxes and the actual size and position information of all the division boxes are identified.

[0087] By acquiring the actual size and position information of all the division boxes in the reference display interface, the hierarchical stacking relationship between all the division boxes is obtained, so as to generate a new display interface according to the actual size and position information of all the division boxes in the reference display interface.

[0088] Continue to refer Figure 4 , in some optional implementations, Figure 4 yes Figure 2 The flowchart of a specific embodiment of step 204 shown includes the following steps:

[0089] Step 401, identifying whether the content in the restricted document is empty;

[0090] Step 402, if the content in the limited document is empty, the bottom-level division frame in the mapping structure is set as the reference division frame, and the actual size of the reference division frame in the new display interface is set as the page size of the target front-end page;

[0091] Step 403, performing reverse calculation according to the actual size of the reference partition frame in the new display interface and the mapping structure;

[0092] Step 404, determining the actual size and position information of each layer of division boxes in the new display interface according to the reverse calculation result;

[0093] Step 405: Generate a new display interface on the target front-end page based on the actual size and position information of each layer of division boxes in the new display interface.

[0094] Specifically, considering that the content in the limited document is empty, all the dividing boxes in the reference display interface are directly mapped to the new display interface. At this time, it is only necessary to set the actual size of the bottom-level dividing box to the actual size in the new display interface, and then perform reverse calculation based on the mapping structure to generate a new display interface on the target front-end page.

[0095] In some optional implementations, continue to refer to Figure 5 After executing the step of identifying whether the content in the restricted document is empty, that is, after step 401, Figure 5 A flowchart of another specific embodiment of generating a new display interface on a target front-end page is shown, including the following steps:

[0096] Step 501, if the content in the restricted document is not empty, then parse the content in the restricted document to obtain a parsing result;

[0097] Step 502: if it is determined through the analysis result that the limited document contains at least one partition box with an actual size in the new display interface, a partition box is randomly selected as a reference partition box;

[0098] Step 503, judging whether the reference division frame is the bottom-level division frame according to the identification information of the reference division frame;

[0099] Step 504: if the reference partition frame is the bottom-level partition frame, reverse calculation is performed according to the actual size of the reference partition frame in the new display interface and the mapping structure;

[0100] Step 505, determining the actual size and position information of each layer of division box in the new display interface according to the reverse calculation result;

[0101] Step 506: Generate a new display interface on the target front-end page based on the actual size and position information of each layer of division boxes in the new display interface.

[0102] Specifically, considering that the selected reference partition box happens to be the bottom partition box, in this case, according to the actual size of the bottom partition box set in the limiting document, combined with the mapping structure, reverse calculation is performed to determine the actual size and position information of each layer of partition boxes in the new display interface, and a new display interface is generated on the target front-end page. The overall migration of the display interface can be achieved based on only a small number of limiting fields, reducing the complexity of interface generation.

[0103] In some optional implementations, continue to refer to Figure 6 After executing the step of determining whether the reference division frame is the bottom-level division frame by using the identification information of the reference division frame, that is, after step 503, Figure 6 A flowchart of another specific embodiment of generating a new display interface on a target front-end page is shown, including the following steps:

[0104] Step 601, if the reference partition frame is not the bottom-level partition frame, reverse calculation is performed according to the actual size of the reference partition frame in the new display interface and the mapping structure;

[0105] Step 602, determining the actual size and position information of all underlying division frames of the reference division frame according to the inverse calculation result;

[0106] Step 603, determining the actual size and position information of all upper-layer division frames of the reference division frame according to the inverse calculation result;

[0107] Step 604, comparing the actual sizes of all bottom-level division frames of the reference division frame with the page size of the target front-end page respectively;

[0108] Step 605: If the actual sizes of all the underlying division boxes of the benchmark division box do not exceed the page size, a new display interface is generated on the target front-end page based on the actual sizes and position information of all the underlying division boxes of the benchmark division box and the actual sizes and position information of all the upper division boxes of the benchmark division box.

[0109] Specifically, considering that the actual size of all the partitioned boxes does not exceed the page size of the target front-end page, a new display interface is directly generated on the target front-end page. This enables the overall migration of the display interface based on only a small number of limited fields, reducing the complexity of interface generation.

[0110] In some optional implementations, continue to refer to Figure 7 After executing the step of comparing the actual sizes of all bottom-level partition frames of the reference partition frame with the page size of the target front-end page, that is, after step 604, Figure 7 A flowchart of another specific embodiment of generating a new display interface on a target front-end page is shown, including the following steps:

[0111] Step 701, if the actual size of the underlying division frame of the reference division frame exceeds the page size, distinguish and mark the underlying division frame that exceeds the page size and the underlying division frame that does not exceed the page size;

[0112] Step 702, based on the distinguishing mark result, filter out all bottom-level division frames that exceed the page size, and perform window-based hiding processing on all bottom-level division frames that exceed the page size;

[0113] Step 703, based on the difference marking results, filter out all the bottom-level division boxes that do not exceed the page size, and generate a new display interface on the target front-end page based on the actual size and position information of all the bottom-level division boxes that do not exceed the page size, and the actual size and position information of all the upper-level division boxes of the benchmark division box.

[0114] Specifically, considering the situation that the actual size of the partition box exceeds the page size of the target front-end page, the partition box that exceeds the page size of the target front-end page is automatically hidden in a windowed manner, and only the partition box that does not exceed the page size is displayed. Accordingly, when the above hidden window is displayed again, it can be popped up and scaled to the preset window size. This not only realizes the overall migration of the display interface based on only a small number of limited fields, reduces the complexity of interface generation, but also realizes the automatic windowing of some partition boxes, which is more intelligent.

[0115] In some optional implementations, the step of performing reverse calculation based on the actual size of the benchmark dividing box in the new display interface and the mapping structure includes: parsing the actual size of the benchmark dividing box in the reference display interface based on the mapping structure; performing a ratio calculation on the actual size of the benchmark dividing box in the reference display interface and the actual size of the benchmark dividing box in the new display interface to obtain a ratio calculation result; and performing geometric scaling processing on all the dividing boxes in the reference display interface based on the ratio calculation result to determine the actual size and position information of all the dividing boxes in the new display interface.

[0116] Specifically, if the reference partition frame is the bottom-most partition frame in the mapping structure in step 402, the actual size of the reference partition frame in the reference display interface is the actual size of the bottom-most partition frame in the mapping structure, and the actual size of the reference partition frame in the new display interface is the page size of the target front-end page;

[0117] Furthermore, if the reference division box is the bottom-level division box in step 504, the actual size of the reference division box in the reference display interface is the actual size of the bottom-level division box in the mapping structure, and the actual size of the reference division box in the new display interface is the actual size of the bottom-level division box in the new display interface defined in the definition document;

[0118] Furthermore, if the benchmark dividing box is the benchmark dividing box in step 601, the actual size of the benchmark dividing box in the reference display interface is the actual size of the corresponding dividing box in the mapping structure, and the actual size of the benchmark dividing box in the new display interface is the actual size of the benchmark dividing box in the new display interface as defined in the limiting document.

[0119] The present application obtains the actual size and position information of all the division boxes in the reference display interface, wherein all the division boxes include all the display frames stacked in layers; calculates the percentage of each layer of division boxes compared to the next layer of division boxes according to the hierarchical stacking relationship between all the division boxes and the actual size of all the division boxes; generates a mapping structure corresponding to the reference display interface based on the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes and the hierarchical stacking relationship between all the division boxes; generates a new display interface on the target front-end page according to the mapping structure and the preset limiting document. The present application generates a new display interface on the target front-end page through the original interface mapping structure in combination with the limiting document method. Compared with the previous generation of the new display interface, no or only a small number of interface restriction fields are required to realize the generation of the original display interface to the new display interface, realizing the overall migration and adjustment of the interface under low consumption.

[0120] The embodiments of the present application can acquire and process relevant data based on artificial intelligence technology. Artificial Intelligence (AI) is the theory, method, technology and application system that uses digital computers or machines controlled by digital computers to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results.

[0121] AI basic technologies generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing technology, operation / interaction systems, mechatronics, etc. AI software technologies mainly include computer vision technology, robotics technology, biometrics technology, speech processing technology, natural language processing technology, and machine learning / deep learning.

[0122] In an embodiment of the present application, by obtaining the actual size and position information of all the division boxes in the reference display interface, wherein all the division boxes include all the display frames stacked in layers; according to the hierarchical stacking relationship between all the division boxes, and the actual size of all the division boxes, the percentage of each layer of division boxes compared to the next layer of division boxes is calculated; based on the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes and the hierarchical stacking relationship between all the division boxes, a mapping structure corresponding to the reference display interface is generated; according to the mapping structure and the preset limiting document, a new display interface is generated on the target front-end page. The present application generates a new display interface on the target front-end page through the original interface mapping structure in combination with the limiting document method. Compared with the previous generation of a new display interface, no or only a small number of interface restriction fields are required to realize the generation of the original display interface to the new display interface, thereby realizing the overall migration and adjustment of the interface under low consumption conditions.

[0123] Further references Figure 8 , as a response to the above Figure 2 In order to realize the method shown in the figure, the present application provides an embodiment of a display interface generation device, and the device embodiment is similar to Figure 2 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

[0124] like Figure 8 As shown, the display interface generation device 800 described in this embodiment includes: a reference display interface information acquisition module 801, a hierarchical frame percentage calculation module 802, an interface mapping structure generation module 803 and a new display interface generation module 804. Among them:

[0125] The reference display interface information acquisition module 801 is used to acquire the actual size and position information of all the division frames in the reference display interface, wherein all the division frames include all the display frames stacked in layers;

[0126] The hierarchical frame percentage calculation module 802 is used to calculate the percentage of each layer of the division frame compared to the next layer of the division frame according to the hierarchical stacking relationship between all the division frames and the actual sizes of all the division frames;

[0127] The interface mapping structure generating module 803 is used to generate a mapping structure corresponding to the reference display interface based on the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes, and the hierarchical stacking relationship between all the division boxes;

[0128] The new display interface generation module 804 is used to generate a new display interface on the target front-end page according to the mapping structure and the preset limiting document.

[0129] The present application obtains the actual size and position information of all the division boxes in the reference display interface, wherein all the division boxes include all the display frames stacked in layers; calculates the percentage of each layer of division boxes compared to the next layer of division boxes according to the hierarchical stacking relationship between all the division boxes and the actual size of all the division boxes; generates a mapping structure corresponding to the reference display interface based on the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes and the hierarchical stacking relationship between all the division boxes; generates a new display interface on the target front-end page according to the mapping structure and the preset limiting document. The present application generates a new display interface on the target front-end page through the original interface mapping structure in combination with the limiting document method. Compared with the previous generation of the new display interface, no or only a small number of interface restriction fields are required to realize the generation of the original display interface to the new display interface, realizing the overall migration and adjustment of the interface under low consumption.

[0130] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through computer-readable instructions, and the computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the aforementioned storage medium can be a non-volatile storage medium such as a disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0131] It should be understood that, although the steps in the flowchart of the accompanying drawings are displayed in sequence as indicated by the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a part of the sub-steps or stages of other steps.

[0132] To solve the above technical problems, the present application also provides a computer device. Fig. 9 , Fig. 9 This is a basic structural block diagram of the computer device in this embodiment.

[0133] The computer device 9 includes a memory 9a, a processor 9b, and a network interface 9c which are interconnected through a system bus. It should be noted that: Fig. 9 Only a computer device 9 having a component memory 9a, a processor 9b, and a network interface 9c is shown, but it should be understood that it is not required to implement all the components shown, and more or fewer components may be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to a microprocessor, an application specific integrated circuit (ASIC), a field-programmable gate array (FPGA), a digital processor (DSP), an embedded device, etc.

[0134] The computer device may be a computing device such as a desktop computer, a notebook, a PDA, a cloud server, etc. The computer device may interact with a user through a keyboard, a mouse, a remote controller, a touch pad, or a voice control device.

[0135] The memory 9a includes at least one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc. In some embodiments, the memory 9a can be an internal storage unit of the computer device 9, such as a hard disk or memory of the computer device 9. In other embodiments, the memory 9a can also be an external storage device of the computer device 9, such as a plug-in hard disk equipped on the computer device 9, a smart memory card (Smart Med i aCard, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. Of course, the memory 9a can also include both the internal storage unit of the computer device 9 and its external storage device. In this embodiment, the memory 9a is generally used to store the operating system and various application software installed on the computer device 9, such as a computer-readable instruction of a display interface generation method, etc. In addition, the memory 9a can also be used to temporarily store various types of data that have been output or are to be output.

[0136] The processor 9b may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chips in some embodiments. The processor 9b is generally used to control the overall operation of the computer device 9. In this embodiment, the processor 9b is used to run the computer-readable instructions stored in the memory 9a or process data, such as running the computer-readable instructions of the display interface generation method.

[0137] The network interface 9c may include a wireless network interface or a wired network interface. The network interface 9c is generally used to establish a communication connection between the computer device 9 and other electronic devices.

[0138] The computer device proposed in this embodiment belongs to the field of research and development design technology and is applied to the UI display interface generation scenario. This application obtains the actual size and position information of all the division boxes in the reference display interface, wherein all the division boxes include all the display frames stacked in layers; according to the hierarchical stacking relationship between all the division boxes and the actual size of all the division boxes, the percentage of each layer of division boxes compared to the next layer of division boxes is calculated; based on the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes and the hierarchical stacking relationship between all the division boxes, a mapping structure corresponding to the reference display interface is generated; according to the mapping structure and the preset limiting document, a new display interface is generated on the target front-end page. This application generates a new display interface on the target front-end page through the original interface mapping structure combined with the limiting document method. Compared with the previous generation of the new display interface, no or only a small number of interface restriction fields are required to realize the generation of the original display interface to the new display interface, realizing the overall migration and adjustment of the interface under low consumption.

[0139] The present application also provides another implementation, namely, providing a computer-readable storage medium, wherein the computer-readable storage medium stores computer-readable instructions, and the computer-readable instructions can be executed by a processor to enable the processor to perform the steps of the display interface generation method as described above.

[0140] The computer-readable storage medium proposed in this embodiment belongs to the field of research and development design technology and is applied to the UI display interface generation scenario. This application obtains the actual size and position information of all the division boxes in the reference display interface, wherein all the division boxes include all the display frames stacked in layers; according to the hierarchical stacking relationship between all the division boxes and the actual size of all the division boxes, the percentage of each layer of division boxes compared to the next layer of division boxes is calculated; based on the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes and the hierarchical stacking relationship between all the division boxes, a mapping structure corresponding to the reference display interface is generated; according to the mapping structure and the preset limiting document, a new display interface is generated on the target front-end page. This application generates a new display interface on the target front-end page through the original interface mapping structure combined with the limiting document method. Compared with the previous generation of the new display interface, no or only a small number of interface restriction fields are required to realize the generation of the original display interface to the new display interface, realizing the overall migration and adjustment of the interface under low consumption.

[0141] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in each embodiment of the present application.

[0142] Obviously, the embodiments described above are only some embodiments of the present application, rather than all embodiments. The preferred embodiments of the present application are given in the accompanying drawings, but they do not limit the patent scope of the present application. The present application can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present application more thorough and comprehensive. Although the present application is described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions recorded in the aforementioned specific implementation methods, or to perform equivalent replacement of some of the technical features therein. Any equivalent structure made using the contents of the specification and drawings of this application, directly or indirectly used in other related technical fields, is similarly within the scope of patent protection of this application.

Claims

1. A method for generating a display interface, characterized in that: The steps include: Acquire actual size and position information of all division frames in the reference display interface, wherein all division frames include all display frames stacked in layers; According to the hierarchical stacking relationship between all the division frames and the actual sizes of all the division frames, calculating the percentage of each layer of division frames compared to the next layer of division frames; Generate a mapping structure corresponding to the reference display interface based on the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes, and the hierarchical stacking relationship between all the division boxes; A new display interface is generated on the target front-end page according to the mapping structure and the preset limiting document.

2. The method for generating a display interface according to claim 1, characterized in that: The step of obtaining the actual size and position information of all the division boxes in the reference display interface specifically includes: Obtaining the DOM document of the reference display interface and the interface size of the reference display interface; According to the DOM document and the interface size, the hierarchical stacking relationship between all the division boxes and the actual size and position information of all the division boxes are identified.

3. The method for generating a display interface according to claim 1, characterized in that: The step of generating a new display interface on the target front-end page according to the mapping structure and the preset limiting document includes: Identify whether the content in the restricted document is empty; If the content in the limited document is empty, the bottommost division frame in the mapping structure is set as the reference division frame, and the actual size of the reference division frame in the new display interface is set as the page size of the target front-end page; Performing reverse calculation according to the actual size of the reference partition frame in the new display interface and the mapping structure; According to the reverse calculation result, the actual size and position information of each layer of division box in the new display interface are determined; Based on the actual size and position information of each layer of division boxes in the new display interface, a new display interface is generated on the target front-end page.

4. The method for generating a display interface according to claim 3, characterized in that: After executing the step of identifying whether the content in the restricted document is empty, the method further includes: If the content in the restricted document is not empty, parsing the content in the restricted document to obtain a parsing result; If it is determined through the analysis result that the limited document contains at least one partition box with an actual size in the new display interface, one partition box is randomly selected as a reference partition box; Then, judging whether the reference division frame is the bottom-level division frame according to the identification information of the reference division frame; If the reference partition frame is the bottom-level partition frame, performing reverse calculation according to the actual size of the reference partition frame in the new display interface and the mapping structure; According to the reverse calculation result, the actual size and position information of each layer of division box in the new display interface are determined; Based on the actual size and position information of each layer of division boxes in the new display interface, a new display interface is generated on the target front-end page.

5. The method for generating a display interface according to claim 4, characterized in that: After executing the step of determining whether the reference division frame is a bottom-level division frame based on the identification information of the reference division frame, the method further includes: If the reference partition frame is not the bottom-level partition frame, performing reverse calculation according to the actual size of the reference partition frame in the new display interface and the mapping structure; According to the inverse calculation result, determining the actual size and position information of all underlying division frames of the reference division frame; According to the inverse calculation result, determining the actual size and position information of all upper-layer division frames of the reference division frame; Comparing the actual sizes of all bottom-level partition frames of the reference partition frame with the page size of the target front-end page respectively; If the actual sizes of all the underlying division boxes of the benchmark division box do not exceed the page size, a new display interface is generated on the target front-end page based on the actual sizes and position information of all the underlying division boxes of the benchmark division box and the actual sizes and position information of all the upper division boxes of the benchmark division box.

6. The method for generating a display interface according to claim 5, characterized in that: After executing the step of comparing the actual sizes of all bottom-level division frames of the reference division frame with the page size of the target front-end page respectively, the method further includes: If the actual size of the underlying division frame of the reference division frame exceeds the page size, distinguishing and marking the underlying division frame that exceeds the page size and the underlying division frame that does not exceed the page size; According to the distinguishing marking results, all bottom-level division frames exceeding the page size are screened out, and all bottom-level division frames exceeding the page size are windowed and hidden; According to the difference marking results, all the underlying division boxes that do not exceed the page size are filtered out, and based on the actual size and position information of all the underlying division boxes that do not exceed the page size, and the actual size and position information of all the upper division boxes of the benchmark division box, a new display interface is generated on the target front-end page.

7. The method for generating a display interface according to any one of claims 3 to 5, characterized in that: The step of performing reverse calculation according to the actual size of the reference partition frame in the new display interface and the mapping structure comprises: According to the mapping structure, an actual size of the reference division frame in the reference display interface is parsed; Calculating a ratio between an actual size of the reference dividing frame in the reference display interface and an actual size of the reference dividing frame in the new display interface to obtain a ratio calculation result; According to the ratio calculation result, all the division frames in the reference display interface are subjected to geometric scaling processing to determine the actual sizes and position information of all the division frames in the new display interface.

8. A display interface generating device, characterized in that: include: A reference display interface information acquisition module, used to acquire actual size and position information of all division frames in the reference display interface, wherein all division frames include all display frames stacked in layers; A hierarchical frame percentage calculation module, used to calculate the percentage of each layer of division frames compared to the next layer of division frames according to the hierarchical stacking relationship between all the division frames and the actual sizes of all the division frames; An interface mapping structure generating module, configured to generate a mapping structure corresponding to the reference display interface based on the percentage of each layer of division boxes compared to the next layer of division boxes, the position information of all the division boxes, and the hierarchical stacking relationship between all the division boxes; A new display interface generation module is used to generate a new display interface on a target front-end page according to the mapping structure and a preset limiting document.

9. A computer device, characterized in that: It comprises a memory and a processor, wherein the memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, the steps of the display interface generation method according to any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by a processor, the steps of the display interface generation method according to any one of claims 1 to 7 are implemented.

Images