CN112148160B - Floating window display method and device, electronic equipment and computer readable storage medium - Google Patents
Floating window display method and device, electronic equipment and computer readable storage medium Download PDFInfo
- Publication number
- CN112148160B CN112148160B CN202010889433.2A CN202010889433A CN112148160B CN 112148160 B CN112148160 B CN 112148160B CN 202010889433 A CN202010889433 A CN 202010889433A CN 112148160 B CN112148160 B CN 112148160B
- Authority
- CN
- China
- Prior art keywords
- display
- area
- floating window
- page
- display page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
Abstract
The application discloses a floating window display method and device, electronic equipment and a computer readable storage medium, and relates to the technical field of computers, in particular to the technical field of multitasking. The specific implementation scheme is as follows: and responding to the operation on the display page, determining a browsing area from the visible area of the display page, determining a target display area of the floating window according to the browsing area, and displaying the floating window in the target display area of the display page. The display area and the display size of the floating window used for displaying the video are adjusted intelligently, so that the display area of the display page and the display area of the picture-in-picture do not overlap, the parallel browsing of multiple contents is realized, the device is more intelligent, and the efficiency is improved.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to the field of multitasking technologies, and further relates to a floating window display method and apparatus, an electronic device, and a computer-readable storage medium.
Background
With the development of mobile device technology, multitasking becomes possible, and the mode of multitasking is more and more favored by users due to high efficiency.
The picture-in-picture mode is a multitasking mode, and is capable of displaying an application interface of a first application program and simultaneously displaying an application interface of a second application program. The use of the pip mode will continue to increase in mobile devices, and since the display screen is the only resource in the mobile device and the display screen is small in size, the pip mode makes the screens conflict with each other when used, which affects the parallel use of multiple applications.
Disclosure of Invention
The application provides a floating window display method and device, electronic equipment and a computer-readable storage medium for avoiding conflict between a page and floating window display.
According to an aspect of the present application, there is provided a floating window display method applied in a mobile terminal, including:
responding to the operation of a display page, and determining a browsing area from a visible area of the display page;
determining a target display area of the floating window according to the browsing area;
and displaying the floating window in the target display area of the display page.
According to another aspect of the present application, there is provided a floating window display device applied in a mobile terminal, including:
the device comprises a first determining module, a second determining module and a display module, wherein the first determining module is used for responding to the operation of a display page and determining a browsing area from a visible area of the display page;
the second determining module is used for determining a target display area of the floating window according to the browsing area;
and the display module is used for displaying the floating window in the target display area of the display page.
According to another aspect of the present application, there is provided an electronic apparatus, including:
at least one processor; and
a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the floating window display method of the first aspect.
According to another aspect of the present application, there is provided a non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the floating window display method of the first aspect.
It should be understood that the statements in this section do not necessarily identify key or critical features of the embodiments of the present application, nor do they limit the scope of the present application. Other features of the present application will become apparent from the following description.
Drawings
The drawings are included to provide a better understanding of the present solution and are not intended to limit the present application. Wherein:
fig. 1 is a schematic flowchart of a floating window display method according to an embodiment of the present disclosure;
fig. 2 is a schematic flowchart of another floating window display method according to an embodiment of the present application;
FIG. 3 is one of the floating window display diagrams of the present application;
fig. 4 is a schematic flowchart of another floating window display method according to an embodiment of the present application;
FIG. 5 is a second illustration of a floating window display according to the present application;
fig. 6 is a schematic flowchart of another floating window display method according to an embodiment of the present application;
FIG. 7 is a third illustration of a floating window display according to the present application;
FIG. 8 is a flowchart illustrating another floating window displaying method according to an embodiment of the present disclosure;
FIG. 9 is a fourth illustration of the floating window display of the present application;
FIG. 10 is a flowchart illustrating another floating window displaying method according to an embodiment of the present application;
FIG. 11 is a fifth illustration of a floating window display according to the present application;
FIG. 12 is a sixth illustration of a floating window display according to the present application;
fig. 13 is a schematic structural diagram of a floating window display device according to an embodiment of the present application
Fig. 14 is a block diagram of an electronic device according to a floating-window display method of an embodiment of the present application.
Detailed Description
The following description of the exemplary embodiments of the present application, taken in conjunction with the accompanying drawings, includes various details of the embodiments of the application for the understanding of the same, which are to be considered exemplary only. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present application. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
A floating window display method, apparatus, electronic device, and computer-readable storage medium according to embodiments of the present application are described below with reference to the accompanying drawings.
Fig. 1 is a schematic flow chart of a floating window display method according to an embodiment of the present disclosure.
As shown in fig. 1, the method comprises the steps of:
The execution main body of the embodiment of the application is a floating window display device, and the device can be configured in any mobile equipment, wherein the mobile equipment can be a smart phone, a smart watch, an intelligent portable device and the like.
In one embodiment of the application, in response to an operation on a displayed page, wherein the operation is a sliding operation on a scroll bar of the displayed page, a browsing area is determined from a visual area of a currently displayed page based on a position to which the scroll bar slides.
In another embodiment of the application, an operation on the displayed page is responded, wherein the operation is a sliding operation on the page, for example, a user slides in a displayed page area needing to be viewed according to a set sliding operation, so as to determine an area currently browsed by the user from a visible area of the displayed page.
And 102, determining a target display area of the floating window according to the browsing area.
The floating window is a display window of another application program different from the application program of the currently displayed page, for example, a display window of an application program for displaying a video, or a display window of an application program for displaying the content of another page. The display size and display position of the floating window can be changed as required.
In the embodiment of the application, after the current browsing page area of the user is determined, the target display area for displaying the floating window is determined from the visual area of the display page according to the determined browsing area.
It should be noted that the browsing area and the target display area of the floating window are not overlapped with each other, and therefore parallel execution of the currently browsed page area and the floating window display is never realized.
And 103, displaying the floating window in the target display area of the display page.
In the application, after the target display area of the floating window is determined, the target display area is displayed, wherein the target display area and the determined browsing area are not overlapped, the floating window and the multimedia content are displayed in parallel through intelligent adjustment of the display position and the display size of the floating window, the intelligentization is realized, and the adjustment efficiency of the floating window is improved.
In the floating window display method of the embodiment of the application, a browsing area is determined from a visual area of a display page in response to an operation on the display page, a target display area of a floating window is determined according to the browsing area, and the floating window is displayed in the target display area of the display page. The display area and the display size of the floating window used for displaying the video are adjusted intelligently, so that the display area of the display page and the display area of the picture-in-picture do not overlap, the parallel browsing of multiple contents is realized, the device is more intelligent, and the efficiency is improved.
Based on the above embodiments, the embodiments of the present application illustrate how to determine the browsing area of the user in the display portion of the current page in response to the operation on the displayed page. The following is illustrated by two examples.
In a scenario, fig. 2 is a schematic flowchart of another floating window display method according to an embodiment of the present application, and as shown in fig. 2, the method includes the following steps:
In this embodiment, the scroll bar of the display page is monitored, and when it is monitored that the scroll bar slides to the top of the display page, it is considered that the area to be browsed by the user currently is the top area of the display page.
As shown in fig. 3, 1 indicates a top area of the page, and the top area and a bottom area in the following steps may be set based on the requirement of an actual scene and the screen size of the mobile device, which is not limited in this embodiment.
As shown in fig. 3, it is determined that the area to be currently browsed by the user is the top area of the display page, i.e., the area indicated by 1 in fig. 3, and then it is determined that the target display area of the floating window of the video is the bottom area of the displayed portion of the display page, i.e., the area indicated by 2 in fig. 3.
It should be understood that the displayed page is usually long and cannot be displayed in the content of one screen displayed on the display screen, so that the currently displayed page portion in the display screen of the mobile terminal is referred to as the currently visible area in the displayed page. The portion of the page displayed to be displayed changes as the scroll bar moves.
And step 203, displaying the floating window in the target display area of the display page.
According to the floating window display method, the operation of the user for sliding the scroll bar is responded, the area browsed by the user is determined to be the top area, the target display area of the floating window is automatically determined to be the bottom area of the visible area in the display page, the floating window is displayed in the target display area, so that the multimedia content in the display page cannot conflict with the floating window during display, parallel display is achieved, and due to the fact that the position and the display size of the floating window are automatically adjusted, compared with the situation that the content browsed by the user is shielded by the floating window in picture, the floating window needs to be manually adjusted by the user, and adjustment efficiency is improved.
In another scenario, fig. 4 is a schematic flowchart of another floating window display method according to an embodiment of the present application, and as shown in fig. 4, the method includes the following steps:
As shown in fig. 5, the reference numeral 3 denotes a bottom area of the page, which may be set based on the requirement of an actual scene and the screen size of the mobile device, and is not limited in this embodiment.
As shown in fig. 5, it is determined that the area to be currently browsed by the user is the bottom area of the display page, i.e., the area indicated by 3 in fig. 5, and then it is determined that the target display area of the floating window of the video is the top area of the visible area in the display page, i.e., the area indicated by 4 in fig. 5.
The explanations in step 201 and step 202 are also applicable to steps 401 and 402 of this embodiment, and the principle is the same, which is not described herein again.
And step 404, displaying the floating window in the target display area of the display page.
According to the floating window display method, the operation of the user for sliding the scroll bar is responded, the area browsed by the user is determined to be the bottom area, the target display area of the floating window is automatically determined to be the top area of the visual area in the display page, the floating window is displayed in the target display area, so that the multimedia content in the display page cannot conflict with the floating window during display, parallel display is achieved, and due to the fact that the position and the display size of the floating window are automatically adjusted, compared with the situation that the content browsed by the user is shielded by the floating window in picture, the floating window needs to be manually adjusted by the user, and adjustment efficiency is improved.
In practical applications, if multimedia content may be displayed in the target display area, the display size of the floating window needs to be reduced according to the display size of the multimedia content in the target display area, so that the display and browsing areas of the floating window can be displayed in parallel without interference. In a scenario, when the size of the multimedia content displayed in the target display area is large, the display size of the multimedia content is substantially the same as the display area size of the display screen, and even if the floating window is reduced, the multimedia content is still shielded, so that the floating window needs to be temporarily hidden and displayed, and after the multimedia content is determined to be displayed completely, the hidden floating window is controlled to resume displaying. Based on the foregoing embodiments, this embodiment provides another floating window display method, and fig. 6 is a schematic flowchart of another floating window display method according to the embodiments of the present application, and as shown in fig. 6, the method includes the following steps:
In this embodiment, if it is determined that the multimedia content is displayed in the target display area according to the area occupied by the multimedia content, it is indicated that there is an overlapping area between the target display area of the floating window and the area occupied by the multimedia content, and further, a display size of the overlapping area is determined, that is, a display size of the multimedia content in the target display area is determined.
In this embodiment, after determining the display size of the multimedia content in the target display area, the ratio of the multimedia content in the visible area of the display page is further determined, where the larger the ratio, the larger the area of the display of the multimedia content in the display screen is, as shown in fig. 7B and C, the ratio of the multimedia content indicated by 6 and 8 in the visible area of the display page is different, and the ratio of the multimedia content indicated by 8 in the visible area of the display page is larger.
Specifically, when the occupation ratio of the multimedia content in the visible area of the display page is greater than a threshold, for example, the threshold is 0.9, it indicates that the multimedia content is displayed in a full screen, and the occlusion of the browsing area cannot be avoided by reducing the display size of the floating window, so that the floating window needs to be temporarily hidden, as shown in fig. 7C, and the occlusion of the multimedia content is avoided by adjusting the display position of the floating window.
And 606, reducing the display size of the floating window according to the display size of the multimedia content in the target display area, and displaying the floating window with the reduced size in the target display area. The multimedia content is a picture or a video.
In this embodiment, according to the display size of the multimedia content, the display size of the floating window is reduced, so that there is no overlap between the target display area corresponding to the floating window after the size reduction and the area occupied by the multimedia content, that is, the display size of the floating window is further intelligently reduced, so that the multimedia content and the floating window with a larger occupied size can be displayed in parallel, as shown in a diagram B in fig. 7.
The method for displaying the floating window with the reduced size in the target display area can be realized by the following embodiments:
in an implementation manner of this embodiment, after the display size of the floating window is reduced, the position information of the upper and lower boundaries of the target display area is determined, and the floating window with the reduced size is displayed at a position in the target display area, which is far from the multimedia area, as shown in fig. 7.
In another implementation manner of this embodiment, after the display size of the floating window is reduced, the size of the target display area for displaying the floating window needs to be reduced to obtain the reduced target display area, so that when the floating window with the reduced size is displayed in the target display area with the corresponding reduced size, the floating window and the multimedia content can be displayed in parallel, and there is no display interference between them.
In the floating window display method of the embodiment, the multimedia content and the occupied area contained in the page are determined by extracting the features of the page, the display size of the multimedia content in the target display area is determined, and the display size of the floating window is reduced according to the display size of the multimedia content, so that the target display area corresponding to the floating window with the reduced size and the occupied area of the multimedia content are not overlapped, that is, the multimedia content and the floating window with larger occupied size can be displayed in parallel by intelligently reducing the display size of the floating window. And when the multimedia content is large in size and needs to be displayed in a full screen mode, the floating window is temporarily hidden, and automatic response is carried out after the preset time is reached, or the floating window is restored to be displayed based on sliding trigger operation of a user, so that the requirements under different scenes are met.
Based on the foregoing embodiments, this embodiment provides another floating window display method, and fig. 8 is a schematic flowchart of another floating window display method according to the embodiments of the present application, and as shown in fig. 8, the method includes the following steps:
In this embodiment, in response to a sliding operation on a scroll bar for displaying a page, the scroll bar may be located at the top end, the bottom end, or a position other than the top end and the bottom end of the displayed page.
In this embodiment, it is determined that the scroll bar of the display page is located at the top end or the bottom end of the display page, which indicates that the browsing area of the user is the bottom end or the top end of the visible area of the display page.
Specifically, reference may be made to the explanation in the embodiments of fig. 2 and fig. 4, which are not described herein again.
And step 803, determining a target display area of the floating window according to the browsing area.
And step 804, displaying the floating window in the target display area of the display page.
The steps 801 to 803 may refer to the explanations in the above embodiments, and are not described herein again.
In the embodiment, if the scroll bars of the display page are not positioned at the top end and the bottom end of the display page, the eye movement track of human eyes is obtained according to the eyeball behavior of a captured person, so that the fixation point of the human eyes is determined, the browsing area is determined according to the fixation point of the human eyes, the current browsing area of a user is accurately determined, and the position and/or the size of the floating window is/are automatically adjusted according to the browsing area of the user. For convenience of description, the browsing area is divided into a top area, a middle area and a bottom area according to a visible area of the page.
In step 806, if the browsing area is located in the middle of the visible area in the display page, the top area or the bottom area of the visible area in the display page is used as the target display area.
In this embodiment, when the browsing area is located in the middle of the visible area in the display page, the bottom area of the visible area in the display page is taken as an example of the target display area.
As shown in fig. 9, where a indicates a floating window, in the left drawing, the area where the floating window a is located is the bottom area of the visible area in the display page, and in the right drawing, the area where the floating window a is located is the top area of the visible area in the display page.
In step 807, the proportion of the display area of the floating window in the visible area of the display page is determined.
In this embodiment, the display area of the floating window is compared with the area corresponding to the size of the visible area of the display page, and the proportion of the display area of the floating window in the visible area of the display page is determined, that is, the larger the proportion of the display area of the floating window in the visible area of the display page is, the larger the area of the visible area of the display page blocked by the floating window is.
And 808, if the occupation ratio is determined to be larger than the first occupation ratio, reducing the display size of the floating window to a second occupation ratio of the visible area according to the size of the browsing area.
Wherein the second ratio is less than the first ratio.
In this embodiment, if it is determined that the proportion of the display area of the floating window in the display page in the visible area is greater than the first proportion, for example, the first proportion is one half, it indicates that a partial area in the middle of the visible area in the display page is blocked by the floating window, that is, when the floating window is located at the topmost end or the lowest end of the visible area of the display page, the partial area in the middle is still blocked, and the middle area of the visible area of the display page cannot be displayed in parallel while the floating window is displayed, as shown in fig. 9, a portion between dotted lines in the figure is a position blocked by the floating window, that is, a whole or partial area in the middle. Therefore, it is necessary to reduce the display size of the floating window, specifically, to determine the difference between the display area of the floating window and the viewing area according to the sizes of the display area of the floating window and the viewing area, and to reduce the display size of the floating window to the second ratio of the visible area, such as the size of the area indicated by b in the rightmost diagram in fig. 9, according to the difference.
And step 809, displaying the floating window with the reduced size in the target display area of the display page.
Furthermore, the floating window with the reduced size is displayed in the target display area of the display page, so that the middle area of the displayed page browsed by a user and the reduced floating window are not shielded when being displayed, the parallel display of the page and the picture-in-picture is realized through automatic adjustment, the intellectualization is realized, and the display efficiency is improved.
According to the floating window display method, when the browsing area is located in the middle of the visible area in the display page, the top area or the bottom area of the visible area in the display page is used as the target display area, the proportion of the display area of the floating window in the visible area in the display page is determined, when the proportion is larger than the first proportion, partial shielding can exist in the middle of the displayed page, the display size of the floating window is intelligently reduced to the second proportion, so that the shielding does not exist in the middle area of the displayed page browsed by a user and the reduced floating window during display, parallel display of the page and picture-in-picture is achieved through automatic adjustment, the intelligence is achieved, and the display efficiency is improved.
In practical application, a user is usually used to view the mobile device in a vertical screen mode, and when the user switches from the vertical screen direction to the horizontal screen direction, because the display scales of the display page and the floating window are changed, the floating window needs to be adjusted after the screen direction is switched, so that the display of the floating window does not affect the display of the page. Therefore, based on the foregoing embodiments, the present embodiment provides another floating window display method, and fig. 10 is a schematic flow chart of the floating window display method according to the embodiment of the present application, as shown in fig. 10, the step 103 includes the following steps:
And step 902, if the display proportion of the floating window and the display proportion of the browsing area both accord with the display proportion of the display screen in the transverse screen direction, hiding the floating window to the edge of the display screen.
As shown in fig. 11, after the display screen is switched from the vertical screen to the horizontal screen, if the display ratio of the floating window is the same as the display ratio in the horizontal screen direction, for example, 16:9, the floating window displays substantially full screen, that is, the floating window blocks all the display page, and if it is detected that the display ratio of the browsing area of the display page is also the same as the display ratio in the horizontal screen direction, it indicates that the visible area in the display screen is the browsing area, that is, even if the display size of the floating window is reduced, the browsing area is still blocked, the floating window is temporarily hidden to the edge of the display screen, so as to prevent the floating window from blocking the browsing area in the display page due to the change of the display ratio after the direction of the display screen is switched.
As shown in fig. 12, after the display screen is switched from the vertical screen to the horizontal screen, if the display ratio of the browsing area conforms to the display ratio of the display screen in the vertical screen direction, that is, after the display screen is switched from the vertical screen to the horizontal screen, the display ratio of the browsing area does not change, that is, blank areas exist on both the left side and the right side in the horizontal screen direction, one of the blank areas is used as a setting area, the size of the floating window is reduced to the setting area according to the size of the setting area, and the reduced floating window is displayed in the setting area, so that after the screen direction is switched, parallel display of the display page and the floating window is realized, and display requirements under different scenes are met.
In order to realize the above embodiment, the present application further provides a floating window display device.
Fig. 13 is a schematic structural diagram of a floating window display device according to an embodiment of the present application.
As shown in fig. 13, the apparatus includes: a first determining module 1201, a second determining module 1202 and a display module 1203.
A first determining module 1201, configured to determine, in response to an operation on a display page, a browsing area from a visible area of the display page;
a second determining module 1202, configured to determine a target display area of the floating window according to the browsing area;
a display module 1203, configured to display the floating window in the target display area of the display page.
Further, in a possible implementation manner of the embodiment of the present application, the apparatus includes:
the reducing module is used for reducing the display size of the floating window according to the display size of the multimedia content in the target display area if the multimedia content is displayed in the target display area;
and the display module is used for displaying the floating window with the reduced size in the target display area of the display page.
In a possible implementation manner of the embodiment of the present application, the scaling module includes:
and the extraction unit is used for extracting features of the display page.
And the identification unit is used for identifying the multimedia content and the occupied area contained in the display page according to the characteristics.
And the processing unit is used for reducing the display size of the floating window according to the display size of the multimedia content in the target display area if the multimedia content is determined to be displayed in the target display area according to the area occupied by the multimedia content and the occupation ratio of the multimedia content in the visible area of the display page is less than or equal to a threshold value.
In a possible implementation manner of the embodiment of the present application, the apparatus further includes:
and the hiding unit is used for hiding the floating window to the edge of the display screen if the multimedia content is displayed in the target display area according to the area occupied by the multimedia content and the occupation ratio of the multimedia content in the visible area of the display page is greater than a threshold value.
In a possible implementation manner of the embodiment of the present application, the first determining module 1201 is specifically configured to:
and monitoring that the scroll bar of the display page slides to the top end of the display page, and determining that the browsing area is the top area of the display page.
Thus, the second determining module 1202 is specifically configured to:
and taking the bottom area of the visible area in the display page as the target display area.
In a possible implementation manner of the embodiment of the present application, the first determining module 1201 is specifically configured to:
and monitoring that the scroll bar of the display page slides to the bottom end of the display page, and determining that the browsing area is the bottom area of the display page.
Thus, the second determining module 1202 is specifically configured to:
and taking the top area of the visible area in the display page as the target display area.
In a possible implementation manner of the embodiment of the present application, the apparatus further includes:
and a third determining module, configured to determine the browsing area according to the eye movement trajectory if the display page does not have a scroll bar, or the scroll bar of the display page is not located at the top end and the bottom end of the display page.
In a possible implementation manner of the embodiment of the present application, the apparatus further includes:
a fourth determining module, configured to determine, if the browsing area is located in a middle of a visible area in the display page, that an area outside the middle is a target display area of the floating window; determining the proportion of the display area of the floating window in the visible area of the display page;
the reducing module is configured to reduce the display size of the floating window to a second ratio of the visible area according to the size of the browsing area if it is determined that the ratio is greater than or equal to the first ratio; the second duty ratio is less than the first duty ratio.
The display module is configured to display the reduced size floating window in the target display area of the display page.
In a possible implementation manner of the embodiment of the present application, the apparatus further includes:
the switching module is used for responding to the switching operation of switching the display screen from the vertical screen to the horizontal screen and switching the display direction of the display screen from the vertical screen to the horizontal screen;
the hiding module is used for hiding the floating window to the edge of the display screen if the display proportion of the floating window and the display proportion of the browsing area both accord with the display proportion of the display screen in the transverse screen direction;
and the processing module is used for determining a set area of the display screen, which does not display the display page, if the display proportion of the browsing area accords with the display proportion of the display screen in the vertical screen direction, reducing the display size of the floating window according to the set area, and displaying the floating window in the set area.
It should be noted that the foregoing explanation of the embodiment of the floating window display method is also applicable to the floating window display device of the present embodiment, and the principle is the same, and is not repeated here.
In the floating window display device in the embodiment of the application, a browsing area is determined from a visual area of a display page in response to an operation on the display page, a target display area of a floating window is determined according to the browsing area, and the floating window is displayed in the target display area of the display page. The display area and the display size of the floating window used for displaying the video are adjusted intelligently, so that the display area of the display page and the display area of the picture-in-picture do not overlap, the parallel browsing of multiple contents is realized, the device is more intelligent, and the efficiency is improved.
In order to implement the foregoing embodiments, an embodiment of the present application provides an electronic device, including:
at least one processor; and
a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the floating window display method of the foregoing method embodiments.
In order to implement the foregoing embodiments, the present application provides a non-transitory computer-readable storage medium storing computer instructions, where the computer instructions are configured to cause the computer to execute the floating window display method described in the foregoing method embodiments.
According to an embodiment of the present application, an electronic device and a readable storage medium are also provided.
Fig. 14 is a block diagram of an electronic device according to the method of the floating window display method according to the embodiment of the present application. Electronic devices are intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not meant to limit implementations of the present application that are described and/or claimed herein.
As shown in fig. 14, the electronic apparatus includes: one or more processors 1401, a memory 1402, and interfaces for connecting the various components, including a high-speed interface and a low-speed interface. The various components are interconnected using different buses and may be mounted on a common motherboard or in other manners as desired. The processor may process instructions for execution within the electronic device, including instructions stored in or on the memory to display graphical information of a GUI on an external input/output apparatus (such as a display device coupled to the interface). In other embodiments, multiple processors and/or multiple buses may be used, along with multiple memories and multiple memories, as desired. Also, multiple electronic devices may be connected, with each device providing portions of the necessary operations (e.g., as a server array, a group of blade servers, or a multi-processor system). Fig. 14 illustrates an example of a processor 1401.
The memory 1402, which is a non-transitory computer readable storage medium, may be used to store non-transitory software programs, non-transitory computer executable programs, and modules, such as program instructions/modules corresponding to the methods of the floating window display method in the embodiments of the present application (e.g., the first determining module 1201, the second determining module 1202, and the display module 1203 shown in fig. 13). The processor 1401 executes various functional applications of the server and data processing, i.e., a method of implementing the floating window display method in the above-described method embodiments, by running non-transitory software programs, instructions, and modules stored in the memory 1402.
The memory 1402 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application program required for at least one function; the storage data area may store data created according to use of the electronic device of the floating window display method, and the like. Further, the memory 1402 may include high-speed random access memory, and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid state storage device. In some embodiments, the memory 1402 may optionally include memory remotely located from the processor 1401, and these remote memories may be connected to the electronic device of the floating window display method through a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
The electronic device of the method of the floating window display method may further include: an input device 1403 and an output device 1404. The processor 1401, the memory 1402, the input device 1403, and the output device 1404 may be connected by a bus or other means, as exemplified by the bus connection in fig. 14.
The input device 1403 may receive input numeric or character information and generate key signal inputs related to user settings and function control of the electronic apparatus of the floating-window display method, such as an input device like a touch screen, a keypad, a mouse, a track pad, a touch pad, a pointing stick, one or more mouse buttons, a track ball, a joystick, etc. The output devices 1404 may include a display device, auxiliary lighting devices (e.g., LEDs), and tactile feedback devices (e.g., vibrating motors), among others. The display device may include, but is not limited to, a Liquid Crystal Display (LCD), a Light Emitting Diode (LED) display, and a plasma display. In some implementations, the display device can be a touch screen.
Various implementations of the systems and techniques described here can be realized in digital electronic circuitry, integrated circuitry, application specific ASICs (application specific integrated circuits), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs that are executable and/or interpretable on a programmable system including at least one programmable processor, which may be special or general purpose, receiving data and instructions from, and transmitting data and instructions to, a storage system, at least one input device, and at least one output device.
These computer programs (also known as programs, software applications, or code) include machine instructions for a programmable processor, and may be implemented using high-level procedural and/or object-oriented programming languages, and/or assembly/machine languages. As used herein, the terms "machine-readable medium" and "computer-readable medium" refer to any computer program product, apparatus, and/or device (e.g., magnetic discs, optical disks, memory, Programmable Logic Devices (PLDs)) used to provide machine instructions and/or data to a programmable processor, including a machine-readable medium that receives machine instructions as a machine-readable signal. The term "machine-readable signal" refers to any signal used to provide machine instructions and/or data to a programmable processor.
To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and a pointing device (e.g., a mouse or a trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic, speech, or tactile input.
The systems and techniques described here can be implemented in a computing system that includes a back-end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back-end, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), Wide Area Networks (WANs), and the Internet.
The computer system may include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server can be a cloud server, also called a cloud computing server or a cloud host, and is a host product in a cloud computing service system, so that the defects of high management difficulty and weak service expansibility in the traditional physical host and VPS service are overcome.
According to the technical scheme of the embodiment of the application, the operation of the display page is responded, the browsing area is determined from the visual area of the display page, the target display area of the floating window is determined according to the browsing area, and the floating window is displayed in the target display area of the display page. The floating window display method and device are used for displaying the display area and the display size of the floating window of the video through intelligent adjustment, so that the display area of the display page and the display area of the picture-in-picture are not overlapped, the multi-content parallel browsing is achieved, the device is more intelligent, and the efficiency is improved.
It should be understood that various forms of the flows shown above may be used, with steps reordered, added, or deleted. For example, the steps described in the present application may be executed in parallel, sequentially, or in different orders, and the present invention is not limited thereto as long as the desired results of the technical solutions disclosed in the present application can be achieved.
The above-described embodiments should not be construed as limiting the scope of the present application. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may be made in accordance with design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present application shall be included in the protection scope of the present application.
Claims (18)
1. A floating window display method is applied to a mobile terminal and comprises the following steps:
responding to the operation of a display page, and determining a browsing area from a visible area of the display page;
determining a target display area of the floating window according to the browsing area;
displaying the floating window in the target display area of the display page, wherein the target display area and the browsing area are not overlapped with each other;
wherein, after the floating window is displayed in the target display area of the display page, the method further comprises:
switching the display direction of the display screen from the vertical screen to the horizontal screen in response to a switching operation of switching the display screen from the vertical screen to the horizontal screen;
if the display proportion of the floating window and the display proportion of the browsing area both accord with the display proportion of the display screen in the transverse screen direction, hiding the floating window to the edge of the display screen;
if the display proportion of the browsing area accords with the display proportion of the display screen in the vertical screen direction, determining a set area of the display screen, in which the display page is not displayed, reducing the display size of the floating window according to the set area, and displaying the floating window in the set area.
2. The floating-window display method of claim 1, wherein the displaying the floating window within the target display area of the display page, after comprising:
if the multimedia content is displayed in the target display area, reducing the display size of the floating window according to the display size of the multimedia content in the target display area;
and displaying the floating window with the reduced size in the target display area of the display page.
3. The floating window display method according to claim 2, wherein if the multimedia content is displayed in the target display area, reducing the display size of the floating window according to the display size of the multimedia content in the target display area comprises:
extracting features from the display page;
according to the characteristics, identifying multimedia content and occupied areas contained in the display page;
if the multimedia content is displayed in the target display area according to the area occupied by the multimedia content and the ratio of the multimedia content in the visible area of the display page is smaller than or equal to a threshold value, reducing the display size of the floating window according to the display size of the multimedia content in the target display area.
4. The floating-window display method of claim 3, wherein the identifying the multimedia content and the occupied area contained in the display page according to the characteristics comprises:
and if the multimedia content is displayed in the target display area according to the area occupied by the multimedia content and the occupation ratio of the multimedia content in the visible area of the display page is larger than a threshold value, hiding the floating window to the edge of the display screen.
5. The floating-window display method of claim 1, wherein determining a browsing area from a viewable area of the display page in response to the operation on the display page comprises:
monitoring that a scroll bar of the display page slides to the top end of the display page, and determining that the browsing area is the top area of the display page;
the determining the target display area of the floating window according to the browsing area comprises:
and taking the bottom area of the visible area in the display page as the target display area.
6. The floating-window display method of claim 1, wherein determining a browsing area from a viewable area of the display page in response to the operation on the display page comprises:
monitoring that a scroll bar of the display page slides to the bottom end of the display page, and determining that the browsing area is the bottom area of the display page;
the determining the target display area of the floating window according to the browsing area comprises:
and taking the top area of the visible area in the display page as the target display area.
7. The floating-window display method of claim 5 or 6, the method further comprising:
and if the scroll bars of the display page are not positioned at the top end and the bottom end of the display page, determining the browsing area according to the eye movement track.
8. The floating-window display method according to claim 7, wherein after determining the browsing area according to the eye movement trajectory, further comprising:
if the browsing area is located in the middle of a visible area in the display page, determining that an area outside the middle is a target display area of the floating window;
determining the proportion of the display area of the floating window in the visible area of the display page;
if the proportion is determined to be larger than or equal to the first proportion, reducing the display size of the floating window to a second proportion of the visual area according to the size of the browsing area; the second ratio is less than the first ratio;
and displaying the floating window with the reduced size in the target display area of the display page.
9. A floating window display device is applied to a mobile terminal and comprises:
the device comprises a first determining module, a second determining module and a display module, wherein the first determining module is used for responding to the operation of a display page and determining a browsing area from a visible area of the display page;
the second determining module is used for determining a target display area of the floating window according to the browsing area;
the display module is used for displaying the floating window in the target display area of the display page, wherein the target display area and the browsing area are not overlapped with each other;
the switching module is used for responding to the switching operation of switching the display screen from the vertical screen to the horizontal screen and switching the display direction of the display screen from the vertical screen to the horizontal screen;
the hiding module is used for hiding the floating window to the edge of the display screen if the display proportion of the floating window and the display proportion of the browsing area both accord with the display proportion of the display screen in the transverse screen direction;
and the processing module is used for determining a set area in which the display page is not displayed in the display screen if the display scale of the browsing area accords with the display scale of the display screen in the vertical screen direction, reducing the display size of the floating window according to the set area, and displaying the floating window in the set area.
10. The floating-window display device of claim 9, wherein the device comprises:
the reducing module is used for reducing the display size of the floating window according to the display size of the multimedia content in the target display area if the multimedia content is displayed in the target display area;
and the display module is used for displaying the floating window with the reduced size in the target display area of the display page.
11. The floating window display device of claim 10, the zoom-out module comprising:
the extraction unit is used for extracting features of the display page;
the identification unit is used for identifying the multimedia content and the occupied area contained in the display page according to the characteristics;
and the processing unit is used for reducing the display size of the floating window according to the display size of the multimedia content in the target display area if the multimedia content is determined to be displayed in the target display area according to the area occupied by the multimedia content and the occupation ratio of the multimedia content in the visible area of the display page is less than or equal to a threshold value.
12. The floating window display device of claim 11, wherein the zoom-out module further comprises:
and the hiding unit is used for hiding the floating window to the edge of the display screen if the multimedia content is displayed in the target display area according to the area occupied by the multimedia content and the occupation ratio of the multimedia content in the visible area of the display page is greater than a threshold value.
13. The floating-window display device according to claim 9, wherein the first determining module is specifically configured to:
monitoring that a scroll bar of the display page slides to the top end of the display page, and determining that the browsing area is the top area of the display page;
the second determining module is specifically configured to:
and taking the bottom area of the visible area in the display page as the target display area.
14. The floating-window display device according to claim 9, wherein the first determining module is specifically configured to:
monitoring that a scroll bar of the display page slides to the bottom end of the display page, and determining that the browsing area is the bottom area of the display page;
the second determining module is specifically configured to:
and taking the top area of the visible area in the display page as the target display area.
15. The floating window display device of claim 13 or 14, further comprising:
and the third determining module is used for determining the browsing area according to the eye movement track if the scroll bar of the display page is not positioned at the top end and the bottom end of the display page.
16. The floating-window display device of claim 15, wherein the device further comprises:
a fourth determining module, configured to determine, if the browsing area is located in a middle of a visible area in the display page, that an area outside the middle is a target display area of the floating window; determining the proportion of the display area of the floating window in the visible area of the display page;
the reducing module is used for reducing the display size of the floating window to a second proportion of the visual area according to the size of the browsing area if the proportion is determined to be larger than or equal to a first proportion; the second ratio is less than the first ratio;
and the display module is used for displaying the floating window with the reduced size in the target display area of the display page.
17. An electronic device, comprising:
at least one processor; and
a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the floating window display method of any one of claims 1-8.
18. A non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the floating window display method of any one of claims 1-8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010889433.2A CN112148160B (en) | 2020-08-28 | 2020-08-28 | Floating window display method and device, electronic equipment and computer readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010889433.2A CN112148160B (en) | 2020-08-28 | 2020-08-28 | Floating window display method and device, electronic equipment and computer readable storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112148160A CN112148160A (en) | 2020-12-29 |
| CN112148160B true CN112148160B (en) | 2022-08-05 |
Family
ID=73890769
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010889433.2A Active CN112148160B (en) | 2020-08-28 | 2020-08-28 | Floating window display method and device, electronic equipment and computer readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112148160B (en) |
Families Citing this family (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113434214B (en) * | 2021-06-28 | 2023-08-25 | 拉扎斯网络科技（上海）有限公司 | Method and device for displaying components in page |
| CN113468452B (en) * | 2021-09-03 | 2021-11-16 | 成都国星宇航科技有限公司 | Remote sensing data visual interface interaction method and device and electronic equipment |
| CN114217889B (en) * | 2021-11-11 | 2023-08-11 | 北京百度网讯科技有限公司 | Display method, device, equipment and storage medium |
| CN115033333B (en) * | 2022-07-19 | 2022-12-16 | 荣耀终端有限公司 | Suspended window display method, electronic equipment and storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106165320A (en) * | 2014-03-13 | 2016-11-23 | 谷歌公司 | PIP video is chatted |
| CN111045573A (en) * | 2018-10-15 | 2020-04-21 | 阿里巴巴集团控股有限公司 | Method and device for displaying floating window page and equipment/terminal/server |
| CN111176506A (en) * | 2019-12-25 | 2020-05-19 | 华为技术有限公司 | Screen display method and electronic equipment |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107291356B (en) * | 2017-08-03 | 2020-05-01 | 北京达佳互联信息技术有限公司 | File transmission display control method and device and corresponding terminal |
-
2020
- 2020-08-28 CN CN202010889433.2A patent/CN112148160B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106165320A (en) * | 2014-03-13 | 2016-11-23 | 谷歌公司 | PIP video is chatted |
| CN111045573A (en) * | 2018-10-15 | 2020-04-21 | 阿里巴巴集团控股有限公司 | Method and device for displaying floating window page and equipment/terminal/server |
| CN111176506A (en) * | 2019-12-25 | 2020-05-19 | 华为技术有限公司 | Screen display method and electronic equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112148160A (en) | 2020-12-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112148160B (en) | Floating window display method and device, electronic equipment and computer readable storage medium | |
| CN106156066B (en) | Page switching method, device and client | |
| US11175823B2 (en) | Method and apparatus for controlling terminal device using gesture control function, and non-transitory computer-readable storage medium | |
| CN107807764B (en) | Page display method and client | |
| CN111949169B (en) | Application interface display method and device | |
| CN105677265A (en) | Display method and terminal | |
| CN110659246B (en) | Container-based file mounting method and device and electronic equipment | |
| JP7246487B2 (en) | Method, apparatus, electronics, storage medium and computer program for extracting hotspot segments in video | |
| CN111754407A (en) | Layout method, device and equipment for image display and storage medium | |
| CN112162800B (en) | Page display method, page display device, electronic equipment and computer readable storage medium | |
| CN111770384A (en) | Video switching method and device, electronic equipment and storage medium | |
| CN111246305A (en) | Video preview method, device, equipment and storage medium | |
| CN112000272B (en) | Keyboard panel layout adjusting method and device, electronic equipment and storage medium | |
| CN114168793A (en) | Anchor display method, device, equipment and storage medium | |
| EP3805985A1 (en) | Method and apparatus for recognizing target object, electronic device and storage medium | |
| CN112286612A (en) | Information display method and device and electronic equipment | |
| CN104991695A (en) | Information processing method and electronic equipment | |
| CN104216624A (en) | Display method and electronic device | |
| CN111882483B (en) | Video rendering method and device | |
| CN111611476B (en) | Thematic page display method and device | |
| CN111008305B (en) | Visual search method and device and electronic equipment | |
| CN113495620A (en) | Interactive mode switching method and device, electronic equipment and storage medium | |
| CN113495621A (en) | Interactive mode switching method and device, electronic equipment and storage medium | |
| CN113655926B (en) | Display control method, device, equipment and storage medium | |
| CN111782113B (en) | Display method, display device and computer-readable storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |