An interface display method and device and a storage medium

Abstract

Embodiments of the present application provide an interface display method and device and a storage medium, relating to the technical field of computers, and capable of realizing dynamic interface layout in a large-screen scenario. The method comprises: obtaining a target correspondence relationship, the target correspondence relationship being used to represent a proportional relationship between a horizontal pixel number of a first display and a horizontal pixel number of a second display, and a proportional relationship between a vertical pixel number of the first display and a vertical pixel number of the second display; the first display being used to display a first interface, the first interface comprising a first control; determining second position information according to the target correspondence relationship and first position information; wherein the first position information is used to indicate a first display region of the first control on the first interface, and the second position information is used to indicate a second display region of a second control on a second interface, the second control being a representation of the first control on the second interface; displaying the second interface on the second display; and displaying the second control in the second display region.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to an interface display method, apparatus and storage medium. Background Technology

[0002] With the continuous development of computer technology, the use of large screens to display information is becoming increasingly widespread in real life.

[0003] Traditional methods of displaying information on large screens require developers to create a target interface specifically for the large screen based on its resolution. This target interface is used to display the information to be shown. Then, the laid-out target interface is displayed on the large screen.

[0004] However, in the traditional way of displaying information on large screens, the target interface is only applicable to a screen with a certain resolution. When the resolution of the large screen changes, developers need to re-layout and develop a new target interface for the changed screen. Therefore, how to achieve dynamic interface layout in large screen scenarios has become a technical problem that urgently needs to be solved in this field. Summary of the Invention

[0005] This application provides an interface display method, device, and storage medium that can realize dynamic interface layout in large-screen scenarios.

[0006] To achieve the above objectives, the embodiments of this application adopt the following technical solutions:

[0007] In a first aspect, embodiments of this application provide an interface display method, the method comprising: obtaining a target correspondence relationship, the target correspondence relationship being used to characterize the ratio of the horizontal pixel count of a first display to the horizontal pixel count of a second display, and the ratio of the vertical pixel count of the first display to the vertical pixel count of the second display; the first display being used to display a first interface, the first interface including a first control; determining second position information based on the target correspondence relationship and first position information; wherein the first position information is used to indicate a first display area of ​​the first control on the first interface, the second position information is used to indicate a second display area of ​​a second control on the second interface, the second control being a manifestation of the first control on the second interface; and displaying a second interface on the second display; wherein the second control is displayed in the second display area.

[0008] Compared to traditional methods of displaying information on large screens, this application determines the second display area of ​​the second control on the second interface based on the target correspondence and the first display area of ​​the first control on the first interface, thereby completing the layout of the second interface. When a display screen with a different resolution is used, the interface display device only needs to re-acquire the target correspondence and rearrange the second interface based on the changed target correspondence, without requiring intervention from developers, thus improving the efficiency of displaying information. This technical solution can be applied to large-screen scenarios, in which case the second display on which the second interface is located can be a large screen.

[0009] In one possible implementation, before obtaining the target correspondence, the method further includes: determining a first value for the side length of the unit grid based on the horizontal and vertical pixel counts of the second display; the unit grid is square, and the side length of the unit grid is divisible by the horizontal and vertical pixel counts of the second display; and meshing the second display based on the first value; wherein the second display area includes at least one unit grid, and a second value for the side length of the unit grid is determined based on the horizontal and vertical pixel counts of the first display; the unit grid is square, and the side length of the unit grid is divisible by the horizontal and vertical pixel counts of the first display; and meshing the first display based on the second value; wherein the first display area includes at least one unit grid; and wherein the target correspondence is specifically used to characterize the ratio of the horizontal unit grid count of the first display to the horizontal unit grid count of the second display, and the ratio of the vertical unit grid count of the first display to the vertical unit grid count of the second display.

[0010] In one possible implementation, the above-mentioned meshing of the second display based on the first value specifically includes: when the first value is less than a side length threshold, increasing the first value to obtain a third value; wherein the third value is greater than or equal to the side length threshold; meshing the second display based on the third value; and / or, when the number of grids is less than a grid number threshold, decreasing the first value to obtain a third value; wherein the third value is greater than or equal to the side length threshold; wherein the number of grids is the number of horizontal grids and / or the number of vertical grids of the second display determined by the first value; meshing the second display based on the third value.

[0011] The interface display method provided in this application provides that, when the second display is gridded, if the first value is less than the side length threshold, the interface display device increases the first value to increase the side length of the unit grid. Since the larger the area of ​​the unit grid, the smaller the adjustable space when adjusting the size of the control, the efficiency of adjusting the size of the control is improved.

[0012] In one possible implementation, when the third value cannot be divided by the number of horizontal pixels of the second display, the free area of ​​the second display is evenly distributed in the two vertical edge areas of the second display; when the third value cannot be divided by the number of vertical pixels of the second display, the free area of ​​the second display is evenly distributed in the two horizontal edge areas of the second display; wherein, the free area is the area on the second display other than the area displaying the second interface.

[0013] In one possible implementation, before displaying the second interface on the second display, the method further includes: determining a second control that has the same function as the first control and whose aspect ratio meets a preset condition; wherein the preset condition is that the difference between the aspect ratio of the control and the aspect ratio of the second display area is within a preset range.

[0014] In the interface display method provided in this application embodiment, the interface display device determines the second control according to the function of the first control and preset conditions. The preset conditions are that the difference between the aspect ratio of the control and the aspect ratio of the second display area is within a preset range. Based on this, the second control displayed on the second display is not obtained by scaling the aspect ratio of the first control non-uniformly. Therefore, it avoids the change in the control structure during the non-uniform scaling process, which would not meet the general imaging requirements.

[0015] In one possible implementation, determining the second control that has the same function as the first control and whose aspect ratio meets the preset conditions includes: determining a set of controls that have the same function as the first control but different appearance and whose aspect ratio meets the preset conditions; and determining the second control from the set of controls.

[0016] In the interface display method provided in this application embodiment, the interface display device determines a set of controls that have the same function as the first control but different appearance, and whose aspect ratio differs from the aspect ratio of the second display area within a preset range. Then, the interface display device determines the second control from this set. Based on this, the second control displayed on the second display is not obtained by non-uniform scaling of the first control, thus avoiding changes in the control structure during non-uniform scaling. Furthermore, the second control can have a different appearance than the first control, thereby improving the scalability of the displayed content.

[0017] Secondly, embodiments of this application provide an interface display device, comprising: an acquisition module, a determination module, and a display module; the acquisition module is used to acquire a target correspondence relationship, which characterizes the ratio of the horizontal pixel count of a first display to the horizontal pixel count of a second display, and the ratio of the vertical pixel count of the first display to the vertical pixel count of the second display; the first display is used to display a first interface, which includes a first control; the determination module is used to determine second position information based on the target correspondence relationship and the first position information; wherein the first position information indicates a first display area of ​​the first control on the first interface, and the second position information indicates a second display area of ​​the second control on the second interface, the second control being a manifestation of the first control on the second interface; the display module is used to display a second interface on the second display; wherein the second control is displayed in the second display area.

[0018] In one possible implementation, the interface display device further includes: an execution module: the determining module is further configured to determine a first value for the side length of the unit grid based on the horizontal and vertical pixel counts of the second display; the unit grid is square, and the side length of the unit grid is divisible by the horizontal and vertical pixel counts of the second display; the execution module is configured to perform gridding on the second display based on the first value; wherein the second display area includes at least one unit grid, and the determining module is further configured to: perform gridding on the second display based on the first value; wherein the second display area includes at least one unit grid, and determine a second value for the side length of the unit grid based on the horizontal and vertical pixel counts of the first display; the unit grid is square, and the side length of the unit grid is divisible by the horizontal and vertical pixel counts of the first display; the execution module is configured to perform gridding on the first display based on the second value; the first display area includes at least one unit grid; wherein the target correspondence is specifically used to characterize the ratio of the horizontal unit grid count of the first display to the horizontal unit grid count of the second display, and the ratio of the vertical unit grid count of the first display to the vertical unit grid count of the second display.

[0019] In one possible implementation, the interface display device further includes: a processing module; the processing module is configured to increase the first value to obtain a third value when the first value is less than a side length threshold; wherein the third value is greater than or equal to the side length threshold; the execution module is configured to perform gridding on the second display based on the third value; the processing module is further configured to decrease the first value to obtain a third value when the number of grids is less than a grid number threshold; wherein the third value is greater than or equal to the side length threshold; wherein the number of grids is the number of horizontal grids and / or the number of vertical grids of the second display determined by the first value; the execution module is configured to perform gridding on the second display based on the third value.

[0020] In one possible implementation, the interface display device further includes a partitioning module; the partitioning module is used to evenly distribute the free area of ​​the second display in the two vertical edge areas of the second display when the third value cannot be divided by the number of horizontal pixels of the second display; the partitioning module is also used to evenly distribute the free area of ​​the second display in the two horizontal edge areas of the second display when the third value cannot be divided by the number of vertical pixels of the second display; wherein, the free area is the area on the second display other than the area displaying the second interface.

[0021] In one possible implementation, the determining module is further configured to determine a second control that has the same function as the first control and whose aspect ratio meets a preset condition; wherein the preset condition is that the difference between the aspect ratio of the control and the aspect ratio of the second display area is within a preset range.

[0022] In one possible implementation, the determining module is further used to determine a set of controls that have the same function as the first control but different appearance and whose aspect ratio meets preset conditions; and to determine the second control from the set of controls.

[0023] Thirdly, embodiments of this application provide an interface display device, including a memory and a processor, wherein the memory is coupled to the processor; the memory is used to store computer program code, wherein the computer program code includes computer instructions; when the computer instructions are executed by the processor, the interface display device performs the method described in the first aspect and any one of its possible implementations.

[0024] Fourthly, embodiments of this application provide a computer-readable storage medium storing computer instructions that, when executed on a computing device, cause the computing device to perform the method described in any one of the first aspects and their possible implementations.

[0025] Fifthly, embodiments of this application provide a computer program product that, when run on a computer, causes the computer to perform the method described in any one of the first aspects and their possible implementations.

[0026] It should be understood that the beneficial effects achieved by the second to fifth aspects of the technical solutions and the corresponding possible implementations of the embodiments of this application can be referred to the above-described technical effects of the first aspect and its corresponding possible implementations, and will not be repeated here. Attached Figure Description

[0027] Figure 1 A schematic diagram of an interface display system provided in an embodiment of this application;

[0028] Figure 2 This is a schematic diagram of the hardware structure of an interface display device provided in an embodiment of this application;

[0029] Figure 3 A flowchart illustrating an interface display method provided in this application embodiment. Figure 1 ;

[0030] Figure 4 A schematic diagram illustrating the correspondence between a first display area and a second display area provided in an embodiment of this application;

[0031] Figure 5 A flowchart illustrating an interface display method provided in this application embodiment. Figure 2 ;

[0032] Figure 6 A flowchart illustrating an interface display method provided in this application embodiment. Figure 3 ;

[0033] Figure 7 A flowchart illustrating an interface display method provided in this application embodiment. Figure 4 ;

[0034] Figure 8 A flowchart illustrating an interface display method provided in this application embodiment. Figure 5 ;

[0035] Figure 9 A flowchart illustrating an interface display method provided in this application embodiment. Figure 6 ;

[0036] Figure 10 This is a schematic diagram illustrating another correspondence between the first display area and the second display area provided in an embodiment of this application;

[0037] Figure 11 This is a schematic diagram of an interface display device provided in an embodiment of this application. Detailed Implementation

[0038] In this article, the term "and / or" is merely a description of the relationship between related objects, indicating that there can be three relationships. For example, A and / or B can represent three situations: A exists alone, A and B exist simultaneously, and B exists alone.

[0039] The terms "first" and "second," etc., used in the specification and claims of this application are used to distinguish different objects, not to describe a specific order of objects. For example, "first display" and "second display," etc., are used to distinguish different displays, not to describe a specific order of displays.

[0040] In the embodiments of this application, the terms "exemplary" or "for example" are used to indicate that something is an example, illustration, or description. Any embodiment or design that is described as "exemplary" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design. Specifically, the use of the terms "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0041] First, some concepts involved in the interface display method and apparatus provided in the embodiments of this application will be explained.

[0042] Controls: Used to develop and build user interfaces (UI), including: windows, text boxes, buttons, drop-down menus and other interface elements.

[0043] The interface display method provided in this application embodiment can be applied to, for example, Figure 1 The interface display system shown includes: server device 101 and large screen display 102.

[0044] In this interface display system, the server device 101 stores the layout information of the first interface, which is used to display on a non-large screen monitor. The server device 101 is used to dynamically lay out the second interface displayed on the large screen monitor 102 according to the layout information of the first interface. For specific implementation methods, please refer to the method section below. The server device 101 can be a desktop computer, laptop, cloud server, or other device with processing capabilities.

[0045] The large screen display 102 is used to display the second interface of the server device 101 layout, wherein the large screen display 102 is a display with display function composed of at least one display.

[0046] For example, Figure 2 This is a hardware schematic diagram of an interface display device provided in an embodiment of this application. Specifically, the interface display device is... Figure 1 The server device 101 includes a processor 201, a memory 202, and a network interface 203.

[0047] The processor 201 includes one or more CPUs. The CPU can be a single-core CPU or a multi-core CPU.

[0048] The memory 202 includes, but is not limited to, RAM, ROM, EPROM, flash memory, or optical memory.

[0049] Optionally, the processor 201 implements the interface display method provided in this application embodiment by reading instructions stored in the memory 202, or the processor 201 implements the interface display method provided in this application embodiment by internally stored instructions. When the processor 201 implements the method in the above embodiments by reading instructions stored in the memory 202, the memory 202 stores instructions for implementing the interface display method provided in this application embodiment.

[0050] Network interface 203 is a wired interface (port), such as FDDI or GE interface. Alternatively, network interface 203 can be a wireless interface. It should be understood that network interface 203 includes multiple physical ports and is used to obtain information such as the resolution of the large-screen display.

[0051] Optionally, the interface display device also includes a bus 204, through which the processor 201, memory 202, and network interface 203 are typically interconnected or interconnected in other ways.

[0052] This application provides an interface display method, which is executed by an interface display device, such as... Figure 3 As shown, the method may include S301-S303.

[0053] S301, The interface display device obtains the target correspondence.

[0054] The aforementioned target correspondence is used to characterize the ratio of the horizontal pixel count of the first display to the horizontal pixel count of the second display, and the ratio of the vertical pixel count of the first display to the vertical pixel count of the second display. The second display can be a large-screen display, which includes at least one display. The first display is a non-large-screen display used to display a first interface, which includes a first control. For example, the first display displays webpage A (i.e., the first interface), and webpage A includes a button (i.e., the first control).

[0055] When the second display comprises multiple displays, the horizontal pixel count of the second display is the sum of the horizontal pixel counts of all displays in the first row of the array of multiple displays, and the vertical pixel count of the second display is the sum of the vertical pixel counts of all displays in the first column of the array of multiple displays. In other words, when the second display comprises N displays, the interface to be displayed is divided into N parts and displayed on N displays respectively. That is, the interfaces displayed by each of the N displays together constitute the interface to be displayed, where N is greater than or equal to 2.

[0056] It should be noted that the method of obtaining the target correspondence can be based on the resolution of the first display and the resolution of the second display, or it can be obtained by other means. The specific embodiments of this application do not limit the above-mentioned method of obtaining the target correspondence.

[0057] It should be understood that the resolution of a display is used to indicate the number of horizontal pixels and the number of vertical pixels on the display.

[0058] S302. The interface display device determines the second position information based on the target correspondence and the first position information.

[0059] The aforementioned first position information is used to indicate the first display area of ​​the first control on the first interface, and the aforementioned second position information is used to indicate the second display area of ​​the second control on the second interface. The second control is the manifestation of the first control on the second interface, that is, the first control and the second control have the same function.

[0060] The relative position of the first display area in the first display is the same as the relative position of the second display area in the second display. For example, if the first display area is located at the center of the first display, then the second display area is also located at the center of the second display area.

[0061] It should be noted that the second interface is the interface on which the first interface is displayed on the second display, and the display area is used to indicate the position of the control and the length and width of the control display area.

[0062] The aforementioned target pair relationship exists between the first display area and the second display area. That is, the ratio of the length of the first display area to the length of the second display area is the same as the ratio of the horizontal pixel count of the first display to the horizontal pixel count of the second display in the target correspondence relationship; the ratio of the width of the first display area to the width of the second display area is the same as the ratio of the vertical pixel count of the first display to the vertical pixel count of the second display in the target correspondence relationship.

[0063] In one implementation, S302 specifically includes: the interface display device determining the position of the second control on the second interface based on the position of the first control on the first interface. Then, the interface display device determines the length of the second display area on the second interface based on the length of the first display area on the first interface and the ratio of the horizontal pixel count of the first display to the horizontal pixel count of the second display. Here, the ratio of the length of the first display area on the first interface to the length of the second display area on the second interface is consistent with the ratio of the horizontal pixel count of the first display to the horizontal pixel count of the second display. Similarly, the width of the second display area on the second interface is determined based on this method, where the ratio of the width of the first display area on the first interface to the width of the second display area on the second interface is consistent with the ratio of the vertical pixel count of the first display to the vertical pixel count of the second display, thereby determining the position information of the second display area on the second interface.

[0064] For example, such as Figure 4 As shown, the target correspondence is as follows: the ratio of the horizontal pixel count of the first display to the horizontal pixel count of the second display is 1:3, or simply: the horizontal ratio is 1:3; the ratio of the vertical pixel count of the first display to the vertical pixel count of the second display is 1:2, or simply: the vertical ratio is 1:2; from Figure 4 As shown in Figure (A), the top-left corner of the display area of ​​the button (i.e., the first button) on the first interface is at coordinates (0,0), and the length and width of the first button are both 1. Based on this, the interface display device also determines the position of the top-left corner of the display area of ​​the button (i.e., the second button) on the second interface at position (0,0). Then, based on the horizontal ratio of 1:3 in the target correspondence and the length of the first button's display area being 1, the interface display device determines the length of the second button's display area to be 3. Similarly, based on the vertical ratio of 1:2 in the target correspondence and the width of the first button's display area being 1, the interface display device determines the width of the second button's display area to be 2, thereby determining the position information of the second button's display area on the second interface. Figure 4 As shown in Figure (B) in the middle.

[0065] In another implementation, S302 further includes: the interface display device determining the position of the second control on the second interface based on the position of the first control on the first interface. Then, the interface display device determines the length of the second display area on the second interface based on the "length of the first display area on the first interface," the "ratio of the horizontal pixels of the first display to the horizontal pixels of the second display," and a "preset length ratio." The sum of the "ratio of the length of the first display area on the first interface to the length of the second display area on the second interface" and the "preset length ratio" equals the "ratio of the horizontal pixels of the first display to the horizontal pixels of the second display." Similarly, the width of the second display area on the second interface is determined based on this method. The sum of the "ratio of the width of the first display area on the first interface to the width of the second display area on the second interface" and the preset width ratio equals the "ratio of the vertical pixels of the first display to the vertical pixels of the second display." Thus, the position information of the second display area is determined on the second interface, where both the preset width ratio and the preset length ratio are positive numbers.

[0066] It should be noted that the specific implementation of S302 in this embodiment is illustrated by the first implementation method described above, and will not be repeated hereafter.

[0067] S303, The interface display device displays the second interface on the second display.

[0068] It should be noted that the second display area on the second interface displays the second control.

[0069] Compared to traditional methods of displaying information on large screens, this application determines the second display area of ​​the second control on the second interface based on the target correspondence and the first display area of ​​the first control on the first interface, thereby completing the layout of the second interface. When a large screen with a different resolution is replaced, the interface display device only needs to re-acquire the target correspondence and rearrange the second interface based on the changed target correspondence, without the need for developer intervention, thus improving the efficiency of displaying information on the interface.

[0070] Optional, combined Figure 3 ,like Figure 5 As shown, the interface display method provided in this application embodiment before S301 also includes: S501-S504.

[0071] S501, The interface display device determines a first value for the side length of the unit grid based on the horizontal and vertical pixel counts of the second display.

[0072] The aforementioned unit grid is square, and the side length of the unit grid is divisible by the number of horizontal and vertical pixels of the second display.

[0073] Specifically, S501 includes: the interface display device determines a cell grid based on the horizontal and vertical pixel counts of the second display, wherein the side length of the cell grid is a common divisor of the horizontal and vertical pixel counts of the second display.

[0074] Optionally, when there are multiple common factors for the horizontal and vertical pixel counts of the second display, the greatest common factor among these multiple common factors is determined as the side length of the cell grid, so as to increase the side length of the cell grid. Since the larger the area of ​​the cell grid, the smaller the adjustable space when adjusting the size of the control, the efficiency of adjusting the size of the control is improved.

[0075] S502, The interface display device performs gridding on the second display based on the first value.

[0076] It should be noted that when the second display is a display composed of multiple displays, these multiple displays need to be gridded, and the grid size of each display is the same.

[0077] When the resolutions of the multiple displays are different, a first value for the side length of the unit grid is determined based on the lowest resolution among the multiple displays, and the multiple displays are meshed based on the first value.

[0078] S503. The interface display device determines a second value for the side length of the unit grid based on the horizontal and vertical pixel counts of the first display.

[0079] It should be noted that the implementation method for determining the second value of the side length of the unit grid is similar to the implementation method for determining the first value in S501. For a detailed description of S503, please refer to the relevant description of S501 above, which will not be repeated here.

[0080] S504. The interface display device performs gridding on the first display based on the second value.

[0081] It should be noted that the above-described method of meshing the first display is similar to the method of meshing the second display in S502. For a detailed description of S504, please refer to the above description of S502. It will not be repeated here.

[0082] It should be noted that the above-mentioned interface display device may execute S501-S502 first and then S503-S504; or it may execute S503-S504 first and then S501-S502. Specifically, this application embodiment does not limit the order in which the interface display device executes S501-S502 and S503-S504.

[0083] It should be noted that when the first display and the second display are meshed, both the second display area and the first display area determined in S302 above include at least one unit grid, and the target correspondence obtained in S301 above is used to characterize the ratio of the number of horizontal unit grids of the first display to the number of horizontal unit grids of the second display, and the ratio of the number of vertical unit grids of the first display to the number of vertical unit grids of the second display.

[0084] One specific implementation of the above S502, combined with Figure 5 ,like Figure 6 As shown, it includes: S502A-S502B.

[0085] S502A: When the first value is less than the side length threshold, the interface display device increases the first value to obtain the third value.

[0086] The third value mentioned above is greater than or equal to the side length threshold. For example, when the first value is 3 pixels and the side length threshold is 4 pixels, the first value is increased to obtain the third value, which is 6 pixels.

[0087] It should be noted that the above S502A is specifically implemented as follows: when the first value is less than the side length threshold, the interface display device increases the side length of the unit grid so that the side length of the increased unit grid is greater than the side length threshold.

[0088] S502B, the interface display device performs gridding on the second display based on the third value.

[0089] The interface display method provided in this application provides that, when the second display is gridded, if the first value is less than the side length threshold, the interface display device increases the first value to increase the side length of the unit grid. Since the larger the area of ​​the unit grid, the smaller the adjustable space when adjusting the size of the control, the efficiency of adjusting the size of the control is improved.

[0090] Another specific implementation of S502 mentioned above, combined with Figure 5 ,like Figure 7 As shown, it includes: S502a-S502b.

[0091] S502a. When the number of grids is less than the grid number threshold, the interface display device reduces the first value to obtain the fourth value.

[0092] The fourth value mentioned above is greater than or equal to the side length threshold; wherein, the number of grids mentioned above is the number of horizontal grids and / or vertical grids of the second display determined by the first value.

[0093] Specifically, S502a includes: the interface display device determining the number of horizontal grids and the number of vertical grids on the second display based on the first value. When the number of horizontal grids is less than a horizontal grid number threshold, and / or the number of vertical grids is less than a vertical grid number threshold, the first value is reduced, that is, the side length of the unit grid is reduced, so that the number of horizontal grids on the second display after the side length reduction is greater than or equal to the horizontal grid number threshold, and the number of vertical grids on the second display after the side length reduction is greater than or equal to the vertical grid number threshold, and ensuring that the side length of the unit grid is always greater than or equal to the side length threshold.

[0094] S502b, the interface display device performs gridding on the second display based on the fourth value.

[0095] It should be noted that the implementation of S502b is similar to that of S502. For a detailed description of S502b, please refer to the relevant description of S502 above. It will not be repeated here.

[0096] Another specific implementation of S502 above combines S502A with S502a-S502b. When the first value is less than the side length threshold, the interface display device increases the first value to obtain a third value. Then, it is determined whether the number of grids is less than the number of grids threshold. When the number of grids is less than the number of grids threshold, the interface display device decreases the third value to obtain a fourth value, wherein the fourth value is greater than the side length threshold. Finally, based on the fourth value, the second display is gridded.

[0097] When only one of the two conditions, either the grid side length is greater than or equal to the side length threshold or the number of grids is greater than or equal to the number of grids threshold, is satisfied, the priority of the grid side length being greater than or equal to the side length threshold is higher than the priority of the number of grids being greater than or equal to the number of grids.

[0098] Optionally, when only one of the two conditions—that the grid side length is greater than or equal to the side length threshold or the number of grids is greater than or equal to the number of grids threshold—can be satisfied, the priority of the grid side length and the number of grids can be determined by manual specification.

[0099] It should be noted that when the interface display device performs gridding on the second display based on the fourth or third value, if the third or fourth value cannot be divided by the number of horizontal pixels of the second display, the interface display device will evenly distribute the free area of ​​the second display on the two vertical edge areas of the second display; if the third or fourth value cannot be divided by the number of vertical pixels of the second display, the interface display device will evenly distribute the free area of ​​the second display on the two horizontal edge areas of the second display, wherein the free area is the area on the second display other than the area displaying the second interface.

[0100] Optional, combined Figure 5 ,like Figure 8 As shown, the interface display method provided in this application embodiment before executing S303 further includes: S801.

[0101] S801, The interface display device determines a second control that has the same function as the first control and whose aspect ratio meets the preset conditions.

[0102] The above preset condition is that the difference between the aspect ratio of the control and the aspect ratio of the second display area is within a preset range.

[0103] Specifically, S801 includes: the interface display device selects all controls with the same function according to the first control, and then selects the control whose aspect ratio is within a preset range from all the controls as the second control.

[0104] The aspect ratio of the first and second display areas, along with the first control, determines the second control. The second control has the same function as the first control but a different style.

[0105] One example, such as Figure 4 As shown in Figures (A) and (B), the first display area is Figure 4 In diagram (A), the area where the button is located has an aspect ratio of 1:1 for the first display area and a aspect ratio of 1:1 for the second display area. Figure 4 In diagram (B), the area containing the button has an aspect ratio of 3:2. The interface display device selects the button with an aspect ratio of 3:2 as the second control because if a button with an aspect ratio of 1:1 is forcibly stretched to become a button with an aspect ratio of 3:2 according to existing technology, the text on the button will be distorted. Figure 10 The "button" controls in Figures (A) and (B) are shown respectively. Figure 10 The "Button" text box in Figure (B) is... Figure 10 The "Button" text box in Figure (A) was forcibly stretched; specifically, it was stretched from a 1:1 aspect ratio text box to a 3:2 aspect ratio text box, thus causing... Figure 10 In Figure (B), the word "button" in the "button" text box is distorted.

[0106] Another example, such as Figure 4 As shown in Figures (C) and (D), the first display area is Figure 4 In Figure (C), the area containing the first pie chart, i.e., the first part of the pie chart is 40%, the second part is 25%, and the third part is 35%, has an aspect ratio of 1:1. The second display area is... Figure 4In Figure (D), the area containing the second pie chart has an aspect ratio of 3:2. The interface display device selects a pie chart with the same function but a different style, such as the second pie chart. In this second pie chart, part 1 is 40%, part 2 is 25%, and part 3 is 35%. The first rectangular area next to the pie chart displays the specific data quantity of part 1, such as 40; the second rectangular area displays the specific data quantity of part 2, such as 25; and the third rectangular area displays the specific data quantity of part 3, such as 35. Although the second pie chart provides more detailed explanations of the quantities in each part compared to the first pie chart, the function of the first and second pie charts remains the same; only their styles differ.

[0107] In the interface display method provided in this application embodiment, the interface display device determines the second control according to the function of the first control and preset conditions. The preset conditions are that the difference between the aspect ratio of the control and the aspect ratio of the second display area is within a preset range. Based on this, the second control displayed on the second display is not obtained by scaling the aspect ratio of the first control non-uniformly. Therefore, changes in the control structure are avoided during non-uniform scaling.

[0108] Optional, combined Figure 5 ,like Figure 9 As shown, the interface display method provided in this application embodiment before executing S303 further includes: S901-S902.

[0109] S901. The interface display device determines a set of controls that have the same function as the first control, but different in appearance, and whose aspect ratio meets the preset conditions.

[0110] The above-mentioned preset condition is that the difference between the aspect ratio of the control and the aspect ratio of the second display area is within a preset range; that is, the difference between the aspect ratio of each control in the above-mentioned control set and the aspect ratio of the second display area is within a preset range, the first control has the same function as each control in the control set, and the first control has a different appearance than each control in the control set.

[0111] For example, assuming the aspect ratio of the first display area is 1:1, the aspect ratio of the second display area is 3:2, and the first control is a line chart of dataset A, then the interface display device will determine the bar charts and pie charts of dataset A, etc., used to represent the attributes of dataset A, as the control set.

[0112] S902, The interface display device determines the second control from the control set.

[0113] The second control mentioned above can be a control specified by the user in the control set, or a control that the interface display device defaults to in the control set.

[0114] For example, based on the above example, the interface display device determines the bar chart specified by the user in the control set as the second control.

[0115] In the interface display method provided in this application embodiment, the interface display device determines a set of controls that have the same function as the first control but different appearance, and whose aspect ratio differs from the aspect ratio of the second display area within a preset range. Then, the interface display device determines the second control from this set. Based on this, the second control displayed on the second display is not obtained by non-uniform scaling of the first control, thus avoiding changes in the control structure during non-uniform scaling. Furthermore, the second control can have a different appearance than the first control, thereby improving the scalability of the displayed content.

[0116] Accordingly, this application provides an interface display device for executing the various steps of the above-described interface display method. This application can divide the interface display device into functional modules based on the above method examples. For example, each function can be divided into its own functional modules, or two or more functions can be integrated into one processing module. The integrated modules can be implemented in hardware or as software functional modules. The module division in this application is illustrative and represents only one logical functional division; other division methods may exist in actual implementation.

[0117] When dividing each function into modules according to its corresponding function. Figure 11 A possible structural schematic diagram of the interface display device involved in the above embodiments is shown. For example... Figure 11 As shown, the interface display device includes: an acquisition module 1101, a determination module 1102, and a display module 1103.

[0118] The acquisition module 1101 is used to acquire the target correspondence, for example, by executing step S301 in the above method embodiment.

[0119] The determining module 1102 is used to determine the second location information based on the target correspondence and the first location information, for example, by executing step S302 in the above method embodiment.

[0120] The display module 1103 is used to display a second interface on a second display, for example, by performing step S303 in the above method embodiment.

[0121] Optionally, the above-mentioned interface display device includes: execution module 1104.

[0122] The aforementioned determining module 1102 is used to determine a first value of the side length of the cell grid based on the horizontal and vertical pixel counts of the second display, for example, by executing step S501 in the above method embodiment.

[0123] The execution module 1104 is used to mesh the second display based on the first value, for example, by executing step S502 in the above method embodiment.

[0124] The aforementioned determining module 1102 is used to determine a second value of the side length of the cell grid based on the horizontal and vertical pixel counts of the first display, for example, by executing step S503 in the above method embodiment.

[0125] The execution module 1104 is used to mesh the first display based on the second value, for example, by executing step S504 in the above method embodiment.

[0126] Optionally, the above-mentioned interface display device includes: a processing module 1105.

[0127] The processing module 1105 is used to increase the first value when the first value is less than the side length threshold to obtain a third value, for example, by executing step S502A in the above method embodiment.

[0128] The execution module 1104 described above is used to mesh the second display based on the third value, for example, by executing step S502B in the above method embodiment.

[0129] Optionally, the above-mentioned interface display device includes: a partitioning module 1106.

[0130] The partitioning module 1106 is used to distribute the free area of ​​the second display evenly in the two vertical edge areas of the second display when the third value cannot be divided by the number of horizontal pixels of the second display; and to distribute the free area of ​​the second display evenly in the two horizontal edge areas of the second display when the third value cannot be divided by the number of vertical pixels of the second display.

[0131] The modules of the above-mentioned interface display device can also be used to perform other actions in the above-mentioned method embodiments. All relevant content of each step involved in the above-mentioned method embodiments can be referred to the functional description of the corresponding functional module, and will not be repeated here.

[0132] Among them, some or all of the steps in the acquisition module 1101, determination module 1102, display module 1103, execution module 1104, processing module 1105, and division module 1106 can be achieved through... Figure 2 The processor 201 executes the code implementation in the memory 202.

[0133] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented using software programs, implementation can be, in whole or in part, in the form of a computer program product. This computer program product includes one or more computer instructions. When these computer instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium accessible to a computer or a data storage device such as a server or data center integrating one or more available media. The available media can be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., digital video discs (DVDs)), or semiconductor media (e.g., solid-state drives (SSDs)).

[0134] Through the above description of the embodiments, those skilled in the art will clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In practical applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. The specific working process of the system, device, and unit described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0135] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces, or indirect coupling or communication connection between apparatuses or units, and may be electrical, mechanical, or other forms.

[0136] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0137] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0138] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as flash memory, portable hard disk, read-only memory, random access memory, magnetic disk, or optical disk.

[0139] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A method for displaying an interface, characterized in that, include: Obtain a target correspondence relationship, which is used to characterize the ratio of the horizontal pixel count of the first display to the horizontal pixel count of the second display, and the ratio of the vertical pixel count of the first display to the vertical pixel count of the second display; the first display is used to display a first interface, which includes a first control; Based on the target correspondence and the first position information, the second position information is determined; wherein, the first position information is used to indicate the first display area of ​​the first control on the first interface, the second position information is used to indicate the second display area of ​​the second control on the second interface, and the second control is the manifestation of the first control on the second interface; The second interface is displayed on the second display; wherein the second control is displayed in the second display area; Before obtaining the target correspondence, the method further includes: Based on the horizontal and vertical pixel counts of the second display, a first value for the side length of the unit grid is determined; the unit grid is square, and the side length of the unit grid is divisible by both the horizontal and vertical pixel counts of the second display. Based on the first value, the second display is gridded; the second display area includes at least one unit grid. A second value for the side length of the unit grid is determined based on the horizontal and vertical pixel counts of the first display; the unit grid is a square, and the side length of the unit grid is divisible by both the horizontal and vertical pixel counts of the first display. Based on the second value, the first display is gridded; the first display area includes at least one unit grid. Specifically, the target correspondence relationship is used to characterize the ratio of the number of horizontal unit grids of the first display to the number of horizontal unit grids of the second display, and the ratio of the number of vertical unit grids of the first display to the number of vertical unit grids of the second display.

2. The method according to claim 1, characterized in that, The step of meshing the second display based on the first value includes: When the first value is less than the side length threshold, the first value is increased to obtain a third value; wherein the third value is greater than or equal to the side length threshold; based on the third value, the second display is meshed; And / or, When the number of grids is less than the grid number threshold, the first value is reduced to obtain a third value; wherein the third value is greater than or equal to the side length threshold; wherein the number of grids is the number of horizontal grids and / or vertical grids of the second display determined by the first value; based on the third value, the second display is gridded.

3. The method according to claim 2, characterized in that, When the third value cannot be divided by the number of horizontal pixels of the second display, the free area of ​​the second display is evenly distributed in the two vertical edge areas of the second display. When the third value cannot be divided by the vertical pixel count of the second display, the free area of ​​the second display is evenly distributed in the two horizontal edge areas of the second display. The free area is the area on the second display other than the area displaying the second interface.

4. The method according to any one of claims 1 to 3, characterized in that, Before displaying the second interface on the second display, the method further includes: A second control is identified that has the same function as the first control and whose aspect ratio meets a preset condition; wherein the preset condition is that the difference between the aspect ratio of the control and the aspect ratio of the second display area is within a preset range.

5. The method according to claim 4, characterized in that, The determination of a second control that has the same function as the first control and whose aspect ratio meets preset conditions includes: Identify a set of controls that have the same function as the first control but different appearance, and whose aspect ratios meet the preset conditions; The second control is determined from the set of controls.

6. An interface display device, characterized in that, include: The module includes an acquisition module, a confirmation module, a display module, and an execution module. The acquisition module is used to acquire the target correspondence relationship, which is used to characterize the ratio of the horizontal pixel count of the first display to the horizontal pixel count of the second display, and the ratio of the vertical pixel count of the first display to the vertical pixel count of the second display. The first display is used to display a first interface, the first interface including a first control; The determining module is used to determine second location information based on the target correspondence and the first location information; wherein, the first location information is used to indicate the first display area of ​​the first control on the first interface, the second location information is used to indicate the second display area of ​​the second control on the second interface, and the second control is the manifestation of the first control on the second interface; The display module is used to display the second interface on the second display; wherein the second control is displayed in the second display area; The determining module is further configured to determine a first value of the side length of the unit grid based on the horizontal and vertical pixel counts of the second display; the unit grid is a square, and the side length of the unit grid is divisible by the horizontal and vertical pixel counts of the second display. The execution module is used to mesh the second display based on the first value; wherein the second display area includes at least one unit grid; The determining module is further configured to determine a second value of the side length of the unit grid based on the horizontal and vertical pixel counts of the first display; the unit grid is a square, and the side length of the unit grid is divisible by the horizontal and vertical pixel counts of the first display. The execution module is further configured to perform gridding on the first display based on the second value; the first display area includes at least one unit grid. Specifically, the target correspondence relationship is used to characterize the ratio of the number of horizontal unit grids of the first display to the number of horizontal unit grids of the second display, and the ratio of the number of vertical unit grids of the first display to the number of vertical unit grids of the second display.

7. The interface display device according to claim 6, characterized in that, The interface display device further includes: a processing module. The processing module is used to increase the first value when the first value is less than the side length threshold to obtain a third value; wherein the third value is greater than or equal to the side length threshold; The execution module is used to mesh the second display based on the third value; And / or, The processing module is further configured to reduce the first value to obtain a third value when the number of grids is less than the grid number threshold; wherein the third value is greater than or equal to the side length threshold; wherein the number of grids is the number of horizontal grids and / or the number of vertical grids of the second display determined by the first value; The execution module is used to mesh the second display based on the third value; The interface display device also includes a partitioning module; The partitioning module is used to evenly distribute the free area of ​​the second display in the two vertical edge areas of the second display when the third value cannot be divided by the number of horizontal pixels of the second display. The division module is also used to distribute the free area of ​​the second display evenly in the two horizontal edge areas of the second display when the third value cannot be divided by the vertical pixel count of the second display. The free area is the area on the second display other than the area displaying the second interface; The determining module is further configured to determine a second control that has the same function as the first control and whose aspect ratio meets a preset condition; wherein, the preset condition is that the difference between the aspect ratio of the control and the aspect ratio of the second display area is within a preset range; The determining module specifically determines a set of controls that have the same function as the first control but different appearance, and whose aspect ratio meets the preset conditions. The determining module is further configured to determine the second control from the control set.

8. An interface display device, characterized in that, The device includes a memory and a processor, the memory being coupled to the processor; the memory is used to store computer program code, the computer program code including computer instructions; when the computer instructions are executed by the processor, the interface display device causes the interface display device to perform the method as described in any one of claims 1 to 5.

9. A computer-readable storage medium, characterized in that, The device stores computer instructions that, when executed on a computing device, cause the computing device to perform the method as described in any one of claims 1 to 5.

Images