Page operation method and device, display equipment and medium
By setting up thumbnail areas and thumbnail components on the touchscreen of ultra-large screen devices, the accuracy and efficiency of swiping operations on ultra-large screen devices have been improved, solving the problems of users having difficulty operating accurately and the cumbersome connection of external devices.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- GUANGZHOU SHIYUAN INNOVATION TECH CO LTD
- Filing Date
- 2024-11-14
- Publication Date
- 2026-05-15
AI Technical Summary
When performing swiping operations on ultra-large screen devices, users find it difficult to operate accurately, and connecting external devices is cumbersome, resulting in low operating efficiency.
On the touchscreen of a large-screen device, a thumbnail area is set up to display the thumbnail component corresponding to the scrollable component. When the user performs a swipe operation in the thumbnail area, the state of the scrollable component on the target page is consistent with that of the thumbnail area. Operation mapping is achieved through event listeners and mapping algorithms.
It improves the accuracy and efficiency of swiping operations on ultra-large screen devices, enabling accurate control without the need for external devices.
Smart Images
Figure CN122044449A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of image display technology, specifically to page operation methods, apparatus, display devices, and media. Background Technology
[0002] In a display device with a touchscreen, various components can be displayed. Users can touch the touchscreen of a large-screen device to trigger various components to perform various functions of the display device.
[0003] However, on ultra-large screen devices, the various components of an application may be distributed across different areas. When users need to operate on different areas of the device, they need to move around frequently, especially when performing swipe operations. Due to the large screen area, it is difficult for users to perform correct swipe operations on ultra-large screen devices. To solve this problem, peripherals can generally be connected to ultra-large screen devices. External devices (such as mice, or connecting the ultra-large screen device to a mobile terminal) can then be used to operate the ultra-large screen device.
[0004] However, in the above solution, other external devices need to be connected before operating the ultra-large screen device, which is a cumbersome connection process and has low operating efficiency. Summary of the Invention
[0005] In view of this, this application provides a page operation method, apparatus, display device and medium, which improves the accuracy of performing swiping operations on ultra-large screen devices. The technical solution is as follows.
[0006] Firstly, a page operation method is provided, applied to a display device having a touchscreen, the method comprising:
[0007] Obtain the target page displayed on the touchscreen, the target page including a swipeable component and a thumbnail area;
[0008] Based on the display information of the swivel component on the target page, only the thumbnail component corresponding to the swivel component is displayed in the thumbnail area;
[0009] In response to the sliding operation of the thumbnail component, the sliding component is slid on the target page so that the display state of the sliding component on the target page is consistent with the display state of the thumbnail component in the thumbnail area.
[0010] In one possible implementation,
[0011] The step of responding to a sliding operation of the thumbnail component by sliding the scrollable component on the target page, such that the display state of the scrollable component on the target page is consistent with the display state of the thumbnail component in the thumbnail area, includes:
[0012] Obtain the first sliding direction and the first sliding distance of the sliding operation;
[0013] Based on the first sliding direction and the first sliding distance of the sliding operation, the second sliding direction and the second sliding distance of the slidable component are determined;
[0014] Based on the second sliding direction and the second sliding distance, the slidable component is slid on the target page so that the slidable component slides the second sliding distance in the second sliding direction.
[0015] In one possible implementation, the slidable component includes a first slidable component and a second slidable component; the first slidable component includes various selection controls; the second slidable component is generated after a target selection control is triggered among the various selection controls;
[0016] The step of displaying only the thumbnail component corresponding to the swivel component in the thumbnail area based on the display information of the swivel component on the target page includes:
[0017] Based on the display information of the first swipe component and the second swipe component on the target page, only the first thumbnail component corresponding to the first swipe component and the second thumbnail component corresponding to the second swipe component are displayed in the thumbnail area;
[0018] The step of responding to a sliding operation of the thumbnail component by sliding the scrollable component on the target page, such that the display state of the scrollable component on the target page is consistent with the display state of the thumbnail component in the thumbnail area, includes:
[0019] Obtain the starting sliding position of the sliding operation;
[0020] When the starting sliding position is located in the area where the first thumbnail component is located, the first swipeable component is swiped on the target page so that the display state of the first swipeable component on the target page is consistent with the display state of the first thumbnail component in the thumbnail area;
[0021] When the starting sliding position is located in the area where the second thumbnail component is located, the second slidable component is slid on the target page so that the display state of the second slidable component on the target page is consistent with the display state of the second thumbnail component in the thumbnail area.
[0022] In one possible implementation, when the initial sliding position is located in the area where the second thumbnail component is located, sliding the second swipeable component on the target page so that the display state of the second swipeable component on the target page is consistent with the display state of the second thumbnail component in the thumbnail area includes:
[0023] When the starting sliding position is located within the area where the second thumbnail component is located, and the third sliding direction of the sliding operation is the same as the preset closing sliding direction of the second slidable component, then the second slidable component and the second thumbnail component are closed.
[0024] In one possible implementation, the method further includes:
[0025] When the second slidable component is closed, the display position of the first slidable component on the target page is moved to the center area of the target page;
[0026] Move the first thumbnail component to the center of the thumbnail area.
[0027] In one possible implementation, the method further includes:
[0028] In response to a sliding operation on the sliding component, the sliding component is slid on the target page according to the target sliding distance and target sliding direction of the sliding operation on the sliding component, so that the sliding component slides the target sliding distance in the target sliding direction.
[0029] In one possible implementation, the method further includes:
[0030] In response to a locking operation on the thumbnail component, the slidable component is set to a locked state so that the slidable component does not respond to any operation other than the unlock operation.
[0031] Secondly, a page operation device is provided, the device being disposed on a display device having a touch screen, the device comprising:
[0032] A page acquisition module is used to acquire the target page displayed on the touch screen, the target page including a swivelable component and a thumbnail area;
[0033] The thumbnail component display module is used to display only the thumbnail component corresponding to the scrollable component in the thumbnail area according to the display information of the scrollable component on the target page;
[0034] A sliding module, in response to the sliding operation of the thumbnail component, slides the sliding component on the target page so that the display state of the sliding component on the target page is consistent with the display state of the thumbnail component in the thumbnail area.
[0035] Thirdly, a display device is provided, the display device including a touch screen, a processor and a memory, the touch screen and the memory being communicatively connected to the processor, the memory storing computer instructions, and the processor executing the above-described page operation method by executing the computer instructions.
[0036] Fourthly, a computer-readable storage medium is provided, on which computer instructions are stored, the computer instructions being used to cause a computer to perform the page operation method described above.
[0037] Fifthly, a computer program product or computer program is provided, the computer program product or computer program including computer instructions stored in a computer-readable storage medium. A processor of a display device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, causing the display device to perform a page operation method.
[0038] The technical solution provided in this application may include the following beneficial effects:
[0039] When a target page is displayed on the touchscreen of a large-screen display device, and the target page includes a swipeable component, the large-screen device will automatically display only the corresponding thumbnail component in the thumbnail area, based on the size of the swipeable component's display area, for user operation. When the large-screen display device receives a user's swipe operation on the thumbnail component, it can swipe the corresponding swipeable component on the target page, thus ensuring that the display state of the swipeable component on the target page is consistent with the display state of the thumbnail component in the thumbnail area. In this solution, the large-screen display device can display the thumbnail component corresponding to the swipeable component in the thumbnail area. When the user performs a swipe operation on the thumbnail component in the thumbnail area, the swipeable component on the target page will also swipe accordingly, and the display state of the swipeable component on the target page is consistent with the display state of the thumbnail component in the thumbnail area. Users can accurately control the swipeable component to slide on the target page by performing swipe operations on the thumbnail component in the thumbnail area, improving the accuracy of swiping operations on large-screen devices. Attached Figure Description
[0040] To more clearly illustrate the technical solutions in the specific embodiments of this application or the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.
[0041] Figure 1 This is a schematic diagram of the structure of an image display system according to an exemplary embodiment.
[0042] Figure 2 This is a flowchart illustrating a page operation method according to an exemplary embodiment.
[0043] Figure 3 A schematic diagram of a sliding component according to an embodiment of this application is shown.
[0044] Figure 4 This is a flowchart illustrating a page operation method according to an exemplary embodiment.
[0045] Figure 5 A thumbnail schematic diagram of a sliding list component according to an embodiment of this application is shown.
[0046] Figure 6 This is a schematic diagram of the structure of a page operation device provided in an embodiment of this application.
[0047] Figure 7 This is a schematic diagram of the structure of a display device provided in an embodiment of this application. Detailed Implementation
[0048] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0049] In the description of the embodiments of this application, the term "correspondence" may indicate that there is a direct or indirect correspondence between two things, or that there is an association between two things, or that there is a relationship of instruction and being instructed, configuration and being configured, etc.
[0050] Figure 1 This is a schematic diagram illustrating the structure of an image display system according to an exemplary embodiment. For example... Figure 1 As shown, the system includes a display device 110.
[0051] Optionally, the display device 110 can be an ultra-large screen display device with a touch screen. Users can perform touch operations on the touch screen, and the display device 110 executes the corresponding function upon receiving the user's touch operation response. For example, the display device displays an application page 111, which displays multiple touchable controls. When the user triggers a touchable control through touch or other operations, the display device can implement the function corresponding to the triggered touchable control.
[0052] Optionally, the display device 110 includes a storage unit and a data processing unit. That is, the display device can be equipped with an independent operating system to process the images stored in the storage unit through the data processing unit and display them on the touch screen. When the user performs a touch operation on the touch screen, the data processing unit responds to the user's touch operation, executes the corresponding function, and displays the execution result on the touch screen.
[0053] Optionally, the display device 110 also has a communication module that can connect to external devices (such as servers) via wired / wireless networks.
[0054] Optionally, the display device 110 can receive the image display signal sent by the server in real time, and display the corresponding image on the touch screen of the display device 110 according to the image display signal.
[0055] When the touch screen receives a user's touch operation, it converts the user's touch operation into a corresponding electrical signal and transmits it to the server through the communication module of the display device 110. The server then executes the corresponding function based on the electrical signal and transmits the execution result back to the display device 110 for display on the touch screen of the display device 110.
[0056] In the aforementioned ultra-large screen devices, the various components of the application may be distributed across different areas of the device. When users need to operate on different areas of the device, they need to move around frequently, especially when performing swipe operations. Due to the large screen area, it is difficult for users to perform correct swipe operations on the ultra-large screen device. To solve this problem, peripheral devices can generally be connected to the ultra-large screen device. By connecting external devices (such as a mouse, or connecting the ultra-large screen device to a mobile terminal), the device can be operated. However, the connection process for external devices is relatively cumbersome and the operation efficiency is low.
[0057] Therefore, this application can perform real-time monitoring of ultra-large screen devices and generate thumbnail components by recognizing list views or other scrollable components on the screen. Users can directly scroll through the thumbnail components, and the system maps these scrolling operations to the original list view components. This reduces the difficulty of operation on large screen devices and the need for frequent movement, thus improving operational efficiency without the need for external devices. Figure 2 This is a flowchart illustrating a page operation method according to an exemplary embodiment. The method is executed by a display device, which may be, for example... Figure 1 The image display system shown includes a display device 110.
[0058] like Figure 2 As shown, the page operation method may include the following steps:
[0059] Step 201: Obtain the target page displayed on the touchscreen.
[0060] The target page includes scrollable components and thumbnail areas.
[0061] The target page is displayed on the touchscreen of the display device.
[0062] Optionally, the target page is a page displayed on a touchscreen. The target page can be used to display specific content. When the user triggers a specific instruction (such as opening the target application), the target page will be displayed on the touchscreen.
[0063] In this embodiment, the target page is typically obtained through a system call, loading specific content or applications required by the user. The target page in this embodiment contains at least one scrollable component. The scrollable component is typically a specific part of the page, such as a scrollable image, a scrollable list view component, or other elements that require user scrolling.
[0064] Optionally, in this embodiment, the slidable component in the screen may be identified through an accessibility service.
[0065] In this embodiment of the application, a thumbnail area is pre-set on the touch screen.
[0066] Since the touchscreen displaying the target page in this embodiment is the screen of an ultra-large screen device, it is very difficult for users to operate on the edges and corners of the ultra-large screen device or perform large-range swipe operations, resulting in a low success rate.
[0067] Therefore, a thumbnail area is pre-set on the touchscreen, allowing users to easily operate the entire screen using thumbnail components within this area. The position of this thumbnail area can be changed according to the application scenario of the ultra-large screen device. For example, if the bottom of the ultra-large screen device is parallel to the ground and the top of the device is higher than a person's height, the thumbnail area can be placed in the middle of the device near the edge, allowing the user to operate the device while in a normal standing posture.
[0068] Step 202: Based on the display information of the scrollable component on the target page, only the thumbnail component corresponding to the scrollable component is displayed in the thumbnail area.
[0069] Optionally, in this embodiment, before displaying the thumbnail of the scrollable component, it is necessary to determine the actual display area size of the scrollable component on the target page. When obtaining the actual display area size of the scrollable component, it is necessary to obtain the component's width, height, and position, which can typically be obtained through system interfaces or application programming interfaces (APIs). In this embodiment, the generated thumbnail is a scaled-down version of the actual scrollable component. The size and position of the thumbnail should be proportional to the original component (i.e., the scrollable component) so that users can directly determine the correspondence between the thumbnail and the original component, and so that operations in the thumbnail area can be accurately mapped to the scrollable component. For example, if the scrollable component occupies 1 / 4 of the target page, the thumbnail should also occupy a corresponding proportion of the area in the thumbnail area.
[0070] In this embodiment of the application, if it is necessary to display the thumbnail component in the thumbnail area, it is first necessary to determine the specific position (i.e., coordinate information) of the scrollable component in the target page. Then, according to the specific position of the scrollable component in the target page, the position of the thumbnail component in the thumbnail area can be determined so that users can directly and visually judge that the thumbnail component and the scrollable component are corresponding components based on the positional relationship between the component and the overall page.
[0071] For example, please refer to Figure 3 The diagram illustrates a sliding component according to an embodiment of this application. Figure 3As shown, in the target page 300 displayed on the touchscreen, an application list page 301 is displayed. Due to the limited display area, the applications in this application list page are not fully displayed. Users can select the desired application by swiping. In this case, the application list page 301 has a swiping function, which means it can be used as a swipeable component in this embodiment. Correspondingly, the touchscreen also has a thumbnail area 303. The thumbnail area 303 can be generated by scaling the target page 300 according to a specified ratio. Similarly, the application list page 301 can also be scaled according to a specified ratio to generate a thumbnail component 304 and displayed within the thumbnail area 303.
[0072] Step 203: In response to the sliding operation of the thumbnail component, slide the scrollable component on the target page so that the display state of the scrollable component on the target page is consistent with the display state of the thumbnail component in the thumbnail area.
[0073] In this embodiment, the thumbnail component is not merely a static thumbnail, but an interactive element. The user's swiping action on the thumbnail component needs to be accurately mapped to the actual swipeable component. Specifically, this can be achieved through event listeners and mapping algorithms. For example, when a user swipes on the thumbnail component, a corresponding swipe event is triggered, and the operation is passed to the actual component according to the proportional relationship.
[0074] The thumbnail component needs to be able to capture user swipe actions, which can be achieved by adding swipe event listeners to the thumbnail component. Since a swipe action includes information about the initial touch point, the swipe path, and the swipe end point, listening to these information on the thumbnail component through event listeners allows the capture of user-triggered swipe actions.
[0075] Since the thumbnail component is a scaled-down version of the swipeable component, the swipe operation needs to be mapped proportionally to the actual component. This means that the swipe operation can be adjusted based on the size and position of the thumbnail and swipeable components by calculating the scaling ratio between them. For example, if the thumbnail component is 1 / 10 the size of the actual component, the swipe operation needs to be scaled up 10 times to correspond to the swipe range of the actual component.
[0076] It should also be noted that in this embodiment, the thumbnail area only displays the thumbnail component corresponding to the slidable component. That is, the thumbnail component in the thumbnail area only responds to the sliding operation, thereby avoiding the influence of other operations on the slidable component and improving the reliability of the function of controlling the slidable component to slide through the thumbnail component.
[0077] In summary, when a target page is displayed on the touchscreen of a large-screen display device, and the target page includes a swipeable component, the large-screen device will automatically display only the corresponding thumbnail component in the thumbnail area, based on the size of the swipeable component's display area, for user operation. When the large-screen display device receives a user's swipe operation on the thumbnail component, it can swipe the corresponding swipeable component on the target page, thus ensuring that the display state of the swipeable component on the target page is consistent with the display state of the thumbnail component in the thumbnail area. In this solution, the large-screen display device can display the thumbnail component corresponding to the swipeable component in the thumbnail area. When the user performs a swipe operation on the thumbnail component in the thumbnail area, the swipeable component on the target page will also swipe accordingly, and the display state of the swipeable component on the target page is consistent with the display state of the thumbnail component in the thumbnail area. Users can accurately control the swipeable component to slide on the target page by performing swipe operations on the thumbnail component in the thumbnail area, improving the accuracy of swiping operations on large-screen devices.
[0078] Figure 4 This is a flowchart illustrating a page manipulation method according to an exemplary embodiment. The method is executed by a computer device, which may be, for example... Figure 1 The image display system shown includes a display device 110. For example... Figure 4 As shown, the page operation method may include the following steps:
[0079] Step 401: Obtain the target page displayed on the touchscreen.
[0080] The target page is displayed on the touchscreen of the display device; the target page includes swiping components; the touchscreen also displays a thumbnail area.
[0081] Step 402: Based on the display information of the scrollable component on the target page, only the thumbnail component corresponding to the scrollable component is displayed in the thumbnail area.
[0082] Optionally, in this embodiment, the thumbnail component in the thumbnail area has a certain size ratio with the scrollable component in the target page. For a certain scrollable component, the size of the scrollable component in the thumbnail area is scaled up or down according to a specified ratio to obtain the size of the corresponding thumbnail component. Optionally, the specified ratio is the size ratio between the touch screen and the thumbnail area.
[0083] In one possible implementation, when the display device determines the position of the display area of the sliding component on the target page based on the coordinate values of the sliding component, the thumbnail component can be displayed in the thumbnail area at the same scale.
[0084] For example, in this embodiment, the screen currently displayed on the touchscreen is the target page, and the size of the target page is the same as the size of the touchscreen. In this case, the display device can scale the screen according to a specified ratio based on the size of the touchscreen to generate a thumbnail area. Optionally, the thumbnail area may have a certain degree of transparency, and its background color may be different from the background color of the target page.
[0085] After determining the size of the thumbnail component in step 402, the coordinate relationship between the thumbnail component and the thumbnail area can be determined according to the coordinate relationship between the display area of the scrollable component and the target page, thereby displaying the thumbnail component in the thumbnail area. Optionally, the thumbnail component can be a solid color module with a background color different from that of the thumbnail area; the shape of the solid color module is consistent with the shape of the display area of the scrollable component.
[0086] Furthermore, when displaying the thumbnail component in the thumbnail area, the display device can also obtain the sliding direction of the slidable component, and display a corresponding sliding arrow on the thumbnail component according to the sliding direction, so as to indicate the direction of the sliding operation that the thumbnail component can respond to.
[0087] Please refer to Figure 3 In the target page 300 displayed on the touchscreen, an application list page 301 is shown. This application list page 301 then has a sliding function, meaning it can serve as a sliding component in this embodiment. Correspondingly, the touchscreen also has a thumbnail area 303. This thumbnail area 303 can be generated by scaling the target page 300 according to a specified ratio. When the display device shows the thumbnail component 303 corresponding to the application list page 301 in the thumbnail area, it can also obtain the sliding direction of the application list page 301 and display a corresponding sliding arrow on the thumbnail component. Figure 3 For example, the application list page 301 can be scrolled up and down, so the thumbnail component 303 can display up and down scrolling arrows to inform the user that the thumbnail component 303 can respond to up and down scrolling operations.
[0088] Step 403: Obtain the first sliding direction and the first sliding distance of the sliding operation.
[0089] Optionally, the display device can add a swipe event listener to the thumbnail component to listen for the user's swipe operation on the thumbnail component. Specifically, the display device can record the starting coordinates of the user's swipe, record a series of coordinate points during the swipe process, and record the ending coordinates of the user's swipe.
[0090] Furthermore, the user's swipe is not necessarily a completely horizontal or a completely vertical swipe. Therefore, the display device can determine the first swipe direction of the operation based on the larger of the horizontal and vertical coordinate changes between the starting and ending coordinates of the swipe.
[0091] Furthermore, since a user's swipe operation may be a relatively long process, the display device can set an operation time threshold. When the user's swipe operation time exceeds this threshold, the trigger coordinates at that threshold are used as the endpoint coordinates to determine the direction of the user's swipe operation over a period of time. Through this scheme, when a user swipes for a long time, the display device can break down the long swipe operation into multiple short swipe operations and determine the direction of each swipe operation. This allows the swipeable component to simulate the user's swipe operation on the thumbnail component according to multiple swipe directions, improving the response speed of the swipeable component to the thumbnail component.
[0092] Step 404: Determine the second sliding direction and the second sliding distance of the slidable component based on the first sliding direction and the first sliding distance of the sliding operation.
[0093] In one possible implementation, the display device obtains a first sliding direction and a first sliding distance for the sliding operation. Since the sliding operation is an operation on a thumbnail component within a thumbnail area, and the actual purpose of the sliding operation is to control the sliding component to slide, the display device needs to convert the first sliding direction and the first sliding distance into a second sliding direction and a second sliding distance for the sliding component.
[0094] Optionally, the second sliding direction is consistent with the first sliding direction; the display device enlarges the first sliding distance according to a specified scaling ratio between the sliding component and the scaling component to obtain the second sliding distance.
[0095] Step 405: Based on the second sliding direction and the second sliding distance, slide the slidable component on the target page so that the slidable component slides the second sliding distance in the second sliding direction.
[0096] In addition to obtaining the sliding direction of the sliding operation, the display device also needs to obtain the first sliding distance of the sliding operation performed on the thumbnail component, and convert it into a second sliding distance for the display area of the sliding component according to a specified ratio. This second sliding distance is the distance that the user expects to slide the sliding component. Therefore, the display device can obtain the operation effect that meets the user's expectations by performing the sliding operation according to the sliding direction of the sliding operation and the second sliding distance.
[0097] In another possible implementation, if the target page includes a first scrollable component and a second scrollable component; the display page of the first scrollable component includes various selection controls, for example, the first scrollable component is a scrollable list view component, which includes multiple triggerable selection controls; the second scrollable component is generated after the target selection control is triggered in each selection control.
[0098] In other words, when a scrollable list view component exists on the target page, a second scrollable component will be displayed on the target page when a user triggers a selection control within it. This second scrollable component can be a scrollable image, a scrollable list view component, or other elements that require user scrolling.
[0099] Correspondingly, the thumbnail area will display only the first thumbnail component related to the first scrollable component and the second thumbnail component related to the second scrollable component, based on the display information of the first scrollable component and the second scrollable component on the target page, respectively.
[0100] When the display device detects a sliding operation, it will obtain the starting position of the sliding operation.
[0101] When the initial sliding position is located in the area where the first thumbnail component is located, the sliding operation is a sliding operation for the first thumbnail component. The first thumbnail component will slide according to the sliding direction and sliding distance of the sliding operation. Correspondingly, the display device will slide the first slidable component on the target page so that the display state of the first slidable component on the target page is consistent with the display state of the first thumbnail component in the thumbnail area.
[0102] When the initial sliding position is located in the area where the second thumbnail component is located, the sliding operation is a sliding operation for the second thumbnail component. The second thumbnail component will slide according to the sliding direction and sliding distance of the sliding operation, and slide the second scrollable component on the target page so that the display state of the second scrollable component on the target page is consistent with the display state of the second thumbnail component in the thumbnail area.
[0103] Optionally, since the second slidable component is generated by triggering the target selection control in the first slidable component, when the starting sliding position of the sliding operation is located in the area where the second thumbnail component is located, and the third sliding direction of the sliding operation is the same as the preset closing sliding direction of the second slidable component, then the second slidable component and the second thumbnail component are closed.
[0104] Please refer to Figure 5 The diagram shows a thumbnail schematic of a sliding list component according to an embodiment of this application. Figure 5As shown, the target page contains two scrollable list components: a first scrollable list component 501 and a second scrollable list component 502. However, their scrolling directions differ. The first scrollable list component 501 can only scroll vertically, and since it is currently at the top, it can only scroll downwards. Therefore, in the thumbnail area 503, a downward scrolling arrow is marked on the corresponding thumbnail of the first scrollable list component. Correspondingly, the second scrollable list component 502 does not require vertical scrolling. However, in existing terminal operating systems, it generally supports swiping left or right to indicate returning to the previous page or closing the current page. In this case, the allowed scrolling direction for the second scrollable list component 502 is rightward, and the display device shows the corresponding rightward scrolling arrow on the thumbnail of the second scrollable list component 502 in the thumbnail area 503.
[0105] The first slidable component is the first slidable list component 501, and the second slidable component is the second slidable list component 502. That is, when there are two corresponding thumbnails (including the first and second thumbnails) in the thumbnail area, the display device will select one of them to respond to the sliding operation. For example, if the sliding operation is performed within the display area of the thumbnail corresponding to the first slidable component (i.e., the first thumbnail), then the first slidable component can be controlled to slide up and down according to the sliding operation.
[0106] If the second slidable component is as follows Figure 5 The second scrollable list component 502 shown has a preset closing scrolling direction of right, and it can only be scrolled to the right. When the second scrollable list component 502 is scrolled to the right, a closing operation is actually performed. Therefore, the second scrollable list component 502 is closed on the target page, and the corresponding thumbnail component (i.e., the second thumbnail component) on the thumbnail area is also closed.
[0107] Furthermore, when the second slidable component is closed, the display position of the first slidable component on the target page is moved to the center area of the target page;
[0108] Move the thumbnail component of the first slidable component to the center of the thumbnail area.
[0109] If the second scrollable list component 502 (i.e., the second scrollable component) is closed, the first scrollable component will be displayed according to a preset cross-sectional display effect, such as being displayed in the center area. At this time, the thumbnail component corresponding to the first scrollable component in the thumbnail area will also change its position accordingly. If the user triggers an operation on a control in the first scrollable component and calls up a new scrollable list component, the first scrollable component and the newly called scrollable list component will be rearranged according to a preset format.
[0110] In one possible implementation, in response to a user's swipe operation on the swipeable component, the swipeable component is swiped on the target page according to the target swipe distance and target swipe direction of the swipe operation on the swipeable component.
[0111] Although the slidable component has a thumbnail component in the thumbnail area, and users can easily swipe the slidable component through the thumbnail component, in some application scenarios (such as teaching scenarios), users may be closer to the display area of the slidable component in order to conduct teaching and explanation through gestures, language, etc. In this case, the display device in this embodiment still allows users to directly swipe the slidable component, avoiding the need for users to repeatedly move to the area corresponding to the thumbnail component to operate, thus improving the convenience of operation.
[0112] In one possible implementation, in response to a user's locking operation on the thumbnail component, the swivel component is set to a locked state so that the swivel component does not respond to any operations other than the unlocking operation.
[0113] When a display device allows sliding operations on both thumbnail and sliding components, it can also set a locking function for the sliding components. For example, by locking the thumbnail (e.g., double-click, long press), the display device can lock the sliding components to prevent accidental touches and incorrect displays.
[0114] Optionally, in this embodiment, the size and position of the thumbnail area can be changed according to the user's trigger operation. That is, the user can control the size of the thumbnail area through zooming operations, and can also freely select the position of the thumbnail area through moving operations.
[0115] Specifically, such as Figure 5 Taking the thumbnail area 503 as an example, when the touch screen receives a user's swipe operation on the thumbnail area, and the starting position of the swipe operation is not within the range of the thumbnail component in the thumbnail area, the large screen device can respond to the swipe operation by moving the thumbnail area in the direction of the swipe operation.
[0116] When the touchscreen receives a user's multi-touch operation on the thumbnail area, the touchscreen determines the sliding direction of the multi-touch operation in real time. If the trajectory of the multi-touch operation is outward expansion, the thumbnail area is enlarged and displayed on the ultra-large screen device; if the trajectory of the multi-touch operation is inward contraction, the thumbnail area is shrunk and displayed on the ultra-large screen device.
[0117] Furthermore, when the touchscreen receives multiple touch operations on the thumbnail area simultaneously within a specified time period, it is determined that the user has performed a multi-point operation on the thumbnail area. At this time, the large-screen device can monitor the movement trajectory of each touch point. If the distance between each touch point increases, it is determined that the trajectory of the multi-point operation is expanding outward; if the distance between each touch point decreases, it is determined that the trajectory of the multi-point operation is contracting inward, thereby performing the corresponding zoom-in or zoom-out operation on the thumbnail area.
[0118] Optionally, when a user-triggered restore operation is received, the large-screen device can restore the size and position of the thumbnail area to the default position. Optionally, the restore operation can be a multi-finger swipe, and the swipe direction is the direction of the default position. Optionally, the user can also perform a long press operation on the thumbnail area, at which time the corresponding trigger control can be displayed on the thumbnail area. When the user's operation on the trigger control is received, the size of the thumbnail area is restored to the default size, and the position of the thumbnail area is restored to the default position.
[0119] In summary, when a target page is displayed on the touchscreen of a large-screen display device, and the target page includes a swipeable component, the large-screen device will automatically display only the corresponding thumbnail component in the thumbnail area, based on the size of the swipeable component's display area, for user operation. When the large-screen display device receives a user's swipe operation on the thumbnail component, it can swipe the corresponding swipeable component on the target page, thus ensuring that the display state of the swipeable component on the target page is consistent with the display state of the thumbnail component in the thumbnail area. In this solution, the large-screen display device can display the thumbnail component corresponding to the swipeable component in the thumbnail area. When the user performs a swipe operation on the thumbnail component in the thumbnail area, the swipeable component on the target page will also swipe accordingly, and the display state of the swipeable component on the target page is consistent with the display state of the thumbnail component in the thumbnail area. Users can accurately control the swipeable component to slide on the target page by performing swipe operations on the thumbnail component in the thumbnail area, improving the accuracy of swiping operations on large-screen devices.
[0120] This application also provides a page operation device for implementing the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can refer to a combination of software and / or hardware that performs a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.
[0121] This application provides a page operation device. Figure 6 This is a schematic diagram of a page operation device provided in an embodiment of this application. The device is disposed on a display device, and the display device has a touch screen. The device includes:
[0122] Page acquisition module 601 is used to acquire the target page displayed on the touch screen, the target page including a swivel component and a thumbnail area;
[0123] The thumbnail component display module 602 is used to display only the thumbnail component corresponding to the scrollable component in the thumbnail area according to the display information of the scrollable component on the target page;
[0124] The sliding module 603 is used to respond to the sliding operation of the thumbnail component by sliding the sliding component on the target page, so that the display state of the sliding component on the target page is consistent with the display state of the thumbnail component in the thumbnail area.
[0125] Further functional descriptions of the above modules and units are the same as those in the corresponding embodiments described above, and will not be repeated here.
[0126] In this embodiment, the page operation device is presented in the form of a functional unit. Here, a unit refers to an ASIC (Application Specific Integrated Circuit) circuit, a processor and memory that execute one or more software or fixed programs, and / or other devices that can provide the above functions.
[0127] This application also provides a display device having the above-described features. Figure 6 The page operation device shown.
[0128] Please see Figure 7 , Figure 7 This is a schematic diagram of the structure of a display device provided in an embodiment of this application, such as... Figure 7As shown, the display device includes a touchscreen, one or more processors 10, a memory 20, and interfaces for connecting the components, including high-speed interfaces and low-speed interfaces. The components communicate with each other via different buses and can be mounted on a common motherboard or otherwise as required. The processors can process instructions executed within the display device, including instructions stored in or on memory to display graphical information from a graphical user page on an external input / output device (such as a display device coupled to the interface). In some alternative implementations, multiple processors and / or multiple buses can be used with multiple memories and multiple memory modules, if desired. Similarly, multiple display devices can be connected, each providing some of the necessary operations (e.g., as a server array, a group of blade servers, or a multiprocessor system). Figure 7 Take a processor 10 as an example.
[0129] Processor 10 may be a central processing unit, a network processor, or a combination thereof. Processor 10 may further include a hardware chip. The hardware chip may be an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or a combination thereof. The programmable logic device may be a complex programmable logic device (CAMP), a field-programmable gate array (FPGA), a general-purpose array logic (GDA), or any combination thereof.
[0130] The memory 20 stores instructions executable by at least one processor 10 to cause the at least one processor 10 to perform the method shown in the above embodiments.
[0131] The memory 20 may include a program storage area and a data storage area. The program storage area may store the operating system and applications required for at least one function; the data storage area may store data created based on the use of the display device. Furthermore, the memory 20 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 alternative embodiments, the memory 20 may optionally include memory remotely located relative to the processor 10, and these remote memories may be connected to the display device via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.
[0132] The memory 20 may include volatile memory, such as random access memory; the memory may also include non-volatile memory, such as flash memory, hard disk or solid-state drive; the memory 20 may also include a combination of the above types of memory.
[0133] The display device also includes a communication interface 30 for communicating with other devices or communication networks.
[0134] This application also provides a computer-readable storage medium. The methods described in this application can be implemented in hardware or firmware, or implemented as recordable on a storage medium, or implemented as computer code downloaded over a network and originally stored on a remote storage medium or a non-transitory machine-readable storage medium and subsequently stored on a local storage medium. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium can also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code. When the software or computer code is accessed and executed by the computer, processor, or hardware, the methods shown in the above embodiments are implemented.
[0135] A portion of this application can be applied as a computer program product, such as computer program instructions, which, when executed by a computer, can invoke or provide the methods and / or technical solutions according to this application through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, installation package files, etc. Correspondingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instructions, or the computer compiling the instructions and then executing the corresponding compiled program, or the computer reading and executing the instructions, or the computer reading and installing the instructions and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.
[0136] Although embodiments of this application have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of this application, and all such modifications and variations fall within the scope defined by the appended claims.
Claims
1. A page operation method, characterized in that, Applied to a display device having a touchscreen, the method includes: Obtain the target page displayed on the touchscreen, the target page including a swipeable component and a thumbnail area; Based on the display information of the swivel component on the target page, only the thumbnail component corresponding to the swivel component is displayed in the thumbnail area; In response to the sliding operation of the thumbnail component, the sliding component is slid on the target page so that the display state of the sliding component on the target page is consistent with the display state of the thumbnail component in the thumbnail area.
2. The method according to claim 1, characterized in that, The step of responding to a sliding operation of the thumbnail component by sliding the scrollable component on the target page, such that the display state of the scrollable component on the target page is consistent with the display state of the thumbnail component in the thumbnail area, includes: Obtain the first sliding direction and the first sliding distance of the sliding operation; Based on the first sliding direction and the first sliding distance of the sliding operation, the second sliding direction and the second sliding distance of the slidable component are determined; Based on the second sliding direction and the second sliding distance, the slidable component is slid on the target page so that the slidable component slides the second sliding distance in the second sliding direction.
3. The method according to claim 1, characterized in that, The slidable component includes a first slidable component and a second slidable component; the first slidable component includes multiple selection controls; the second slidable component is generated after a target selection control is triggered among the multiple selection controls; Based on the display information of the swipeable component on the target page, only the thumbnail component corresponding to the swipeable component is displayed in the thumbnail area, including: Based on the display information of the first swipe component and the second swipe component on the target page, only the first thumbnail component corresponding to the first swipe component and the second thumbnail component corresponding to the second swipe component are displayed in the thumbnail area; The step of responding to a sliding operation of the thumbnail component by sliding the scrollable component on the target page, such that the display state of the scrollable component on the target page is consistent with the display state of the thumbnail component in the thumbnail area, includes: Obtain the starting sliding position of the sliding operation; When the starting sliding position is located in the area where the first thumbnail component is located, the first swipeable component is swiped on the target page so that the display state of the first swipeable component on the target page is consistent with the display state of the first thumbnail component in the thumbnail area; When the starting sliding position is located in the area where the second thumbnail component is located, the second slidable component is slid on the target page so that the display state of the second slidable component on the target page is consistent with the display state of the second thumbnail component in the thumbnail area.
4. The method according to claim 3, characterized in that, When the initial sliding position is located in the area where the second thumbnail component is located, sliding the second swipeable component on the target page so that the display state of the second swipeable component on the target page is consistent with the display state of the second thumbnail component in the thumbnail area includes: When the starting sliding position is located within the area where the second thumbnail component is located, and the third sliding direction of the sliding operation is the same as the preset closing sliding direction of the second slidable component, then the second slidable component and the second thumbnail component are closed.
5. The method according to claim 4, characterized in that, The method further includes: When the second slidable component is closed, the display position of the first slidable component on the target page is moved to the center area of the target page; Move the first thumbnail component to the center of the thumbnail area.
6. The method according to any one of claims 1 to 5, characterized in that, The method further includes: In response to a sliding operation on the sliding component, the sliding component is slid on the target page according to the target sliding distance and target sliding direction of the sliding operation on the sliding component, so that the sliding component slides the target sliding distance in the target sliding direction.
7. The method according to claim 6, characterized in that, The method further includes: In response to a locking operation on the thumbnail component, the slidable component is set to a locked state so that the slidable component does not respond to any operation other than the unlock operation.
8. A page operation device, characterized in that, The device is disposed on a display device, the display device having a touch screen, and the device includes: A page acquisition module is used to acquire the target page displayed on the touch screen, the target page including a swivelable component and a thumbnail area; The thumbnail component display module is used to display only the thumbnail component corresponding to the scrollable component in the thumbnail area according to the display information of the scrollable component on the target page; A sliding module is used to respond to the sliding operation of the thumbnail component by sliding the sliding component on the target page, so that the display state of the sliding component on the target page is consistent with the display state of the thumbnail component in the thumbnail area.
9. A display device, characterized in that, The display device includes a touch screen, a memory, and a processor, wherein the touch screen and the memory are both communicatively connected to the processor. The memory and the processor are interconnected, the memory stores computer instructions, and the processor executes the page operation method of any one of claims 1 to 7 by executing the computer instructions.
10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing the computer to perform the page manipulation method according to any one of claims 1 to 7.