Infinite sliding method, terminal device, and computer-readable storage medium

Abstract

The present application is appliable to the technical field of human-machine interaction, and provides an infinite sliding method, a terminal device, and a computer-readable storage medium. The method comprises: monitoring a display window of a current screen, and obtaining a target window; if the window type of the target window is a first type, controlling the target window to slide to a first window, wherein the first type indicates that the target window is a display window located at the head or at the tail in a sliding chain corresponding to the target window, the first window is a jump window in the sliding chain corresponding to the target window, and the sliding chain is a window queue comprising a plurality of display windows. By means of the method, an infinite sliding effect can be achieved in UI scenarios, thereby improving the UI interaction experience.

Description

Circular sliding method, terminal device and computer-readable storage medium

[0001] This application claims priority to the Chinese patent application filed with the China Patent Office on December 25, 2023, with application number 202311804188.0, and invention name “Circular sliding method, terminal device and computer-readable storage medium”, all contents of which are incorporated by reference into this application. Technical Field

[0002] The present application belongs to the field of human-computer interaction technology, and in particular relates to a cyclic sliding method, a terminal device, and a computer-readable storage medium. Background Art

[0003] Most current POS products use gestures to change UI scenes. However, gesture detection takes time, which can cause page lag during the transition. This is particularly noticeable on limited hardware. Using LVGL's sliding functionality instead of gestures for UI scene changes can significantly improve the user experience.

[0004] When using the sliding effect provided by LVGL, generally only two-way sliding is supported. However, the application business requires circular sliding. The existing method cannot achieve the circular sliding effect in POS products. Summary of the Invention

[0005] The embodiments of the present application provide a circular sliding method, a terminal device, and a computer-readable storage medium, which can achieve a circular sliding effect in a UI scene, thereby improving the UI interaction experience.

[0006] In a first aspect, an embodiment of the present application provides a cyclic sliding method, comprising:

[0007] Monitor the display window of the current screen and get the target window;

[0008] If the window type of the target window is the first type, the target window is controlled to slide to the first window, wherein the first type indicates that the target window is a display window at the head or a display window at the tail in the sliding chain corresponding to the target window, and the first window is a jump window in the sliding chain corresponding to the target window, and the sliding chain is a window queue including multiple display windows.

[0009] In an embodiment of the present application, when human-computer interaction is implemented using LVGL, the display windows on the current screen are detected and identified in real time, and the target window therein is determined. Based on the characteristics of the target window, such as its position in the sliding chain, it is determined whether its window type is the first type. The first type may indicate that the target window is located at the head or tail of the sliding chain. If the window type of the target window is the first type, the corresponding control operation is performed to slide the target window to the first window position in the sliding chain, where the first window is the corresponding window other than the head and tail windows in the sliding chain. In other words, LVGL is used to identify the window type of the target window, and when the target window is of the first type, LVGL's circular sliding can be implemented. Therefore, through the above method, the circular sliding effect can be smoothly implemented in the UI scene, which is beneficial to improving the UI interaction experience.

[0010] In a possible implementation of the first aspect, the method further includes:

[0011] Obtaining the sliding direction of the target window;

[0012] According to the sliding direction of the target window, obtaining a slidable area corresponding to the target window from the sliding chain corresponding to the target window;

[0013] The window type of the target window is determined according to the slidable area corresponding to the target window.

[0014] In an embodiment of the present application, the current sliding direction of the target window is obtained through the functions provided by LVGL or other related libraries, which may be horizontal or vertical. According to the obtained sliding direction, the corresponding sliding area is found from the sliding chain where the target window is located. Different sliding directions may correspond to different sliding areas. The type of the target window is determined by using the information of the obtained sliding area, such as position, size, etc. This may involve determining whether the window is at the head or tail of the sliding chain. The above method makes the system more intelligent by dynamically obtaining the sliding direction and related information, better meets the user's needs for window operations, and improves the system's adaptability and user experience.

[0015] In a possible implementation of the first aspect, the method further includes:

[0016] Obtaining the sequence number of the target window in the sliding chain;

[0017] The slidable area corresponding to the target window is obtained according to the arrangement sequence number.

[0018] In an embodiment of the present application, the functionality provided by LVGL or other related libraries is utilized to obtain the target window's permutation number within the sliding chain. This permutation number typically represents the target window's relative position within the sliding chain. Using this permutation number, the target window is located within the sliding chain and its corresponding slidable area information, including its position and size, is retrieved. This method obtains information about the sliding area to further determine the target window's window type. This system enables more intelligent and adaptive window management, improving user experience and operational efficiency.

[0019] In a possible implementation of the first aspect, determining the window type of the target window according to the slidable area corresponding to the target window includes:

[0020] The window type corresponding to the minimum value and the maximum value of the slidable area corresponding to the target window is determined as the first type.

[0021] In an embodiment of the present application, by comparing the minimum and maximum values ​​of the slidable area corresponding to the target window, the system can determine whether the window type is the first type. This usually involves analyzing position information. The minimum and maximum values ​​of the slidable area provide extreme information about the position of the window in the sliding chain. By analyzing this information, the system can accurately determine the window type. The first type window may have special meaning or function in the user interface. The system can perform special processing based on its type to improve the intelligence of the system. After determining the window type, the system can respond to user operations more intelligently, improving the user experience and the usability of the overall system.

[0022] In a possible implementation of the first aspect, the method further includes:

[0023] Creating a second window according to the screen size of the target window;

[0024] creating at least two sub-windows of the second window to obtain a third window, wherein a sum of sizes of at least two of the third windows is greater than a size of the second window;

[0025] A sliding chain is generated according to at least two of the third windows.

[0026] In an embodiment of the present application, by creating a second window and multiple sub-windows, the user can handle multiple tasks at the same time, improve work efficiency, and ensure that the sum of the sizes of at least two third windows is larger than the size of the second window, which helps to maximize the use of screen space. The generation of a sliding chain may enable the user to easily switch tasks through sliding gestures or other methods, thereby improving the user experience.

[0027] In a possible implementation manner of the first aspect, after generating a sliding chain according to at least two third windows, the method further includes:

[0028] Setting a first sliding direction of the second window;

[0029] Setting a first arrangement direction of the second window according to the first sliding direction, wherein the first arrangement direction is the same as the first sliding direction;

[0030] The third windows are arranged according to the first arrangement direction.

[0031] In an embodiment of the present application, utilizing the functionality provided by LVGL or other related libraries, the system can set a first sliding direction for the second window, which may be horizontal or vertical, and then set a first arrangement direction for the second window based on the first sliding direction, wherein the first arrangement direction is the same as the first sliding direction. Finally, the child objects of the second window (the third window) are arranged according to the arrangement mode (the first arrangement mode) of their parent object (the second window). By setting the arrangement direction between windows to achieve the LVGL circular sliding effect, the user experience can be improved, making the interface operation smoother and more intuitive.

[0032] In a possible implementation of the first aspect, the method further includes:

[0033] Setting the sliding step of the sliding chain to a display window;

[0034] The sliding chain is slid according to the sliding step length.

[0035] In this embodiment of the present application, the step length of the sliding chain is set to the size of a display window, that is, each movement is a distance of the entire window size. After the step length is set, the system can slide the sliding chain according to the step length to display the next or previous complete window content. Setting the step length of the sliding chain to the size of a display window can improve the user's visual continuity and integrity, and optimize the user experience.

[0036] In a possible implementation of the first aspect, the first-type window includes a fourth window and a fifth window, and the method further includes:

[0037] A fourth window and a fifth window are added at the beginning and end of the sliding chain respectively, wherein the fourth window is a replica window of the last display window of the sliding chain, and the fifth window is a replica object of the first display window of the sliding chain, wherein the replica window is the same window with the same data as the last display window of the sliding chain or the first display window of the sliding chain.

[0038] In an embodiment of the present application, by adding the fourth and fifth windows, the sliding chain forms a loop, allowing the user to slide infinitely to form a more coherent browsing experience. The fourth window is a replica of the last display window, and the fifth window is a replica of the first display window, maintaining the consistency of the window data and ensuring that the content the user sees during the sliding process is the same. The setting of the circular chain allows the user to easily switch between the beginning and the end of the sliding chain, improving the convenience of navigation. When the user slides to the end of the sliding chain, it can automatically switch to the first window, forming a circular display, which reduces the need for the user to manually slide to the beginning.

[0039] In a second aspect, an embodiment of the present application provides a terminal device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the cyclic sliding method as described in any one of the above-mentioned first aspects is implemented.

[0040] In a third aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the cyclic sliding method as described in any one of the above-mentioned first aspects is implemented.

[0041] In a fourth aspect, an embodiment of the present application provides a computer program product. When the computer program product is run on a terminal device, the terminal device executes the cyclic sliding method described in any one of the above-mentioned first aspects.

[0042] It can be understood that the beneficial effects of the second to fourth aspects mentioned above can be found in the relevant description of the first aspect mentioned above, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for use in the embodiments or descriptions of the prior art. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0044] FIG1 is a schematic diagram of a process for creating a sliding chain according to an embodiment of the present application.

[0045] FIG2 is a schematic diagram of a sliding chain provided in an embodiment of the present application.

[0046] FIG3 is a flow chart of the cyclic sliding method provided in an embodiment of the present application.

[0047] FIG4 is an example diagram of the cyclic sliding method provided in an embodiment of the present application.

[0048] FIG5 is a schematic diagram of a flow chart of determining a window type provided by an embodiment of the present application.

[0049] FIG6 is a schematic structural diagram of the cyclic sliding method provided in an embodiment of the present application.

[0050] FIG7 is a schematic diagram of the structure of the terminal device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0051] In the following description, specific details such as specific system structures and techniques are provided for purposes of illustration rather than limitation to facilitate a thorough understanding of the embodiments of the present application. However, it will be apparent to those skilled in the art that the present application may be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to avoid obscuring the description of the present application with unnecessary detail.

[0052] It should be understood that when used in the present specification and the appended claims, the term "comprising" indicates the presence of described features, integers, steps, operations, elements and / or components, but does not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or collections thereof.

[0053] It will also be understood that the term "and / or" used in this specification and the appended claims refers to and includes any and all possible combinations of one or more of the associated listed items.

[0054] As used in this specification and the appended claims, the term "if" can be interpreted as "when" or "upon" or "in response to determining" or "in response to detecting," depending on the context. Similarly, the phrase "if it is determined" or "if [described condition or event] is detected" can be interpreted as meaning "upon determination" or "in response to determining" or "upon detection of [described condition or event]" or "in response to detecting [described condition or event]," depending on the context.

[0055] In addition, in the description of the present application specification and the appended claims, the terms "first", "second", "third", etc. are only used to distinguish the descriptions and cannot be understood as indicating or implying relative importance.

[0056] References to "one embodiment" or "some embodiments" in this specification mean that a particular feature, structure, or characteristic described in conjunction with the embodiment is included in one or more embodiments of the present application. Thus, phrases such as "in one embodiment," "in some embodiments," "in other embodiments," and "in yet other embodiments" appearing in various places in this specification do not necessarily refer to the same embodiment, but rather mean "one or more but not all embodiments," unless otherwise specifically emphasized.

[0057] Most current POS products use gestures to change UI scenes. However, gesture detection takes time, which can cause page lag during the transition. This is particularly noticeable on limited hardware. Using LVGL's sliding functionality instead of gestures for UI scene changes can significantly improve the user experience.

[0058] When using the sliding effects provided by LVGL, users can browse the entire music list vertically or by sliding. When selecting a song in the music list, they can enter the music content interface and slide horizontally to display detailed information, lyrics, etc. of the selected song. Therefore, when using the sliding effects provided by LVGL, it can generally only achieve two-way sliding. Vertical or horizontal sliding generally only supports two-way sliding. However, the business application requires circular sliding, and existing methods cannot achieve this circular sliding effect in POS products.

[0059] Based on the problems in the above-mentioned related technologies, the embodiment of the present application provides a cyclic sliding method. In the embodiment of the present application,

[0060] LVGL is an open-source embedded graphics library specifically designed for embedded systems. It provides rich graphical user interface (GUI) functionality for developing user interfaces on embedded devices. Its key features include: Lightweight: LVGL is compact and memory-efficient, making it suitable for resource-constrained embedded systems. Flexibility: LVGL supports a variety of display and input devices, including LCDs, touchscreens, mice, and keyboards. This flexibility makes it suitable for a wide range of embedded platforms. Cross-platform: LVGL is a cross-platform graphics library that supports multiple operating systems and embedded systems, allowing developers to share and reuse code across different platforms. Rich graphical elements: LVGL provides a rich set of graphical elements, such as buttons, labels, text boxes, and icons, enabling developers to easily create a variety of user interfaces. Animation support: LVGL supports animation effects, enhancing the interactivity and appeal of user interfaces. Themes and styles: LVGL allows developers to define and customize interface themes and styles to meet specific design requirements. Open source: LVGL is released under the MIT License, making it free for use in both commercial and non-commercial projects, and the source code can be modified to meet specific needs.

[0061] In implementing cyclic sliding methods based on the LVGL framework, a slide chain typically plays a role in defining and managing sliding actions. LVGL is an open-source GUI library for embedded graphical interfaces (GUIs). It provides a series of components and functions, including the slide component. A slide chain can be understood as a series of operations or events associated with the slide component. Specifically, a slide chain is used to capture and handle sliding-related events, such as when a user starts sliding, is in the middle of sliding, and ends sliding. Through a slide chain, actions can be defined to be executed when these events occur. A slide chain is typically associated with a value, such as the current value of a slider. During the sliding process, a slide chain can be responsible for updating the associated value to reflect the user's actions. A slide chain may also involve interface refresh operations to ensure timely feedback on the sliding operation in the graphical interface, such as real-time updating of the slider position or displaying the current value. Certain nodes in the slide chain may be associated with other events or functions, such as triggering a function or interface transition at a specific value. In the LVGL framework, by configuring and defining these slide chains, developers can flexibly implement various sliding interactions to meet the needs of specific application scenarios. This configurability and flexibility are one of the advantages of the LVGL framework in embedded GUI development.

[0062] Before discussing the cyclic sliding method based on the LVGL framework provided by this application, it is necessary to first discuss the preparation work of the solution. Referring to FIG1 , it is a flow chart of creating a sliding chain provided by an embodiment of this application. As shown in FIG1 , the process of creating a sliding chain is as follows:

[0063] S101: Create a second window according to the screen size of the target window.

[0064] In the embodiment of the present application, in GUI design, a window is an independent visual area used to display the content of an application. A window is one of the basic components of a user interface. It can contain various controls and elements, such as text, buttons, images, etc., for interaction with the user.

[0065] When creating a sliding chain, you first need to create a second window in LVGL based on the screen size. One way to do this is to: Initialize LVGL: Before creating any interface, you need to initialize the LVGL library. This includes calling initialization functions to set basic LVGL parameters and configurations; creating a root object: Using LVGL functions, create a root object that will host other objects. This root object is the same size as the entire screen, typically a window object, and its size and position can be set to match the actual screen size; and configuring window properties: Setting window attributes such as background color and border style. These attributes can be adjusted according to design requirements.

[0066] S102: Create at least two sub-windows of the second window to obtain a third window, wherein the sum of sizes of at least two of the third windows is greater than the size of the second window.

[0067] In an embodiment of the present application, the second window created above is the main window of the entire interface and can accommodate other sub-windows and controls. Using LVGL functions, at least two sub-windows are created in the second window. Each sub-window can have a different size and position to adapt to the overall design, and at least two sub-windows are selected to ensure that the sum of their sizes is greater than the size of the first window. This can be achieved by reasonably setting the size and position of the sub-windows. Using the calculated size information, a third window is created in the second window. The second window can cover the selected sub-window to form a new layout, and the slid object (third window) is added to the second window using LVGL functions. In order to respond to the user's interaction with the sliding chain, an event callback function can be added to the sliding chain. In this way, custom operations can be performed when the slid object changes. Since the third window is a child window of the second window, the second window can be the parent object of the third window.

[0068] By following these steps, you can create an interface in an embedded system that includes multiple sub-windows and slider chains. This interface structure can provide a richer user experience, allowing users to interact in different sub-windows.

[0069] S103: Generate a sliding chain based on at least two of the third windows.

[0070] In an embodiment of the present application, a sliding chain object is created in each third window that requires a sliding chain using the corresponding functions of the LVGL library. This typically includes specifying the position, size, and style of the sliding chain, and setting corresponding properties for each sliding chain object, such as minimum value, maximum value, initial value, scale, etc. These properties determine the behavior and appearance of the sliding chain, and for each sliding chain in the third window, determine their specific scope of action in the interface. This includes determining the numerical range controlled by the sliding chain and the scope of influence of the sliding chain, and adding an event callback function to each sliding chain object so that corresponding operations are performed when the value of the sliding chain changes. This can include updating other elements on the interface, triggering specific events, etc., to ensure that after configuring and setting the sliding chain properties, the display is refreshed to ensure that the sliding chain is correctly rendered in the third window.

[0071] For example, see FIG2 , which is a schematic diagram of a sliding chain provided by an embodiment of the present application. As shown in FIG2 , R corresponds to the second window (parent object). In the second window, four objects are created, namely, Object 1, Object 2, Object 3, and Object 4 (four objects are given in this example), which are equivalent to four third windows. Four third windows can generate a sliding chain.

[0072] By following these steps, you can successfully create a sliding chain in at least two third windows. Users can then interact with the sliding chain in these windows, selecting specific values ​​or triggering related actions. This design provides a more flexible interface and is suitable for scenarios where users need to adjust parameters or make selections.

[0073] In one embodiment, after step S103, the method further includes:

[0074] Setting a first sliding direction of the second window;

[0075] Setting a first arrangement direction of the second window according to the first sliding direction, wherein the first arrangement direction is the same as the first sliding direction;

[0076] The third windows are arranged according to the first arrangement direction.

[0077] In an embodiment of the present application, in order to achieve the LVGL circular sliding effect, it is necessary to restrict the sliding direction of each sliding chain. The first sliding direction and the first arrangement direction of the parent object, that is, the second window, need to be set to the same, otherwise sliding cannot be achieved. After setting the sliding direction and arrangement direction of the second window, the child object (the third window) in the second window will be arranged according to the arrangement of its parent object (the second window), that is, the arrangement of the third window is consistent with the sliding direction of the second window.

[0078] One way to limit the sliding chain is to set the arrangement direction of the second window to horizontal (horizontal sliding). Then, the child objects (third windows) in the second window will be arranged according to the arrangement direction of their parent object (second window). However, the sliding direction of the third window can be any sliding direction.

[0079] Another way to limit the sliding of a sliding chain is to set the second window's arrangement direction to vertical (vertical sliding). The child objects (the third window) within the second window will be arranged according to the arrangement direction of their parent object (the second window). However, the sliding direction of the third window can be arbitrary. This can be nested multiple levels deep, depending on business needs.

[0080] In the above method, by setting the sliding direction of the window and ensuring that the sliding direction of the second window is consistent with the arrangement direction, the user can create a circular sliding effect when sliding between different windows. This helps improve the overall user experience.

[0081] In one implementation, the method further includes:

[0082] Setting the sliding step of the sliding chain to a display window;

[0083] The sliding chain is slid according to the sliding step length.

[0084] In an embodiment of the present application, LVGL supports setting the unit of sliding distance. When no anchor object is set for sliding, the unit of sliding is pixel, and a larger sliding amplitude will slide more pixels, and vice versa. At this time, LVGL will not care how the objects in the sliding list are displayed. When an anchor object is set for sliding, the unit of sliding is object, and a larger sliding amplitude will slide more objects, and vice versa. At this time, LVGL will care about the display of the object (corner alignment display, center display, etc. can be set). "Sliding step size of 1 object (display window)" refers to the sliding of the anchor object, and no matter what the sliding amplitude is, only one object is always slid. Since the effect achieved by the scheme is a senseless jump, if this condition is not set and multiple objects or pixels are slid at will, once the monitoring conditions of the head and tail objects are met, the jump is triggered, which will cause very bad effects. In addition, the resources, algorithms and complexity required to implement cyclic sliding of multiple objects or pixels are far more complicated than this method.

[0085] When the sliding step size is set to the size of a display window, each swipe by the user switches a full display window, rather than sliding pixel by pixel. This means that when the user swipes to the end of the sliding chain, the next swipe returns them to the beginning of the chain, achieving a circular sliding effect. This design is very useful for applications that require cyclic browsing of content, such as image browsers and carousel ads. Users can swipe through content continuously without worrying about the starting or ending position of the sliding chain, providing a more continuous and smooth user experience.

[0086] In the above method, the sliding step size of the sliding chain is set to the size of a display window in order to realize the circular sliding of the window, so that the user can realize the function of seamless circular browsing in the content of the sliding chain.

[0087] In one embodiment, the first type of window includes a fourth window and a fifth window, and the method further includes:

[0088] A fourth window and a fifth window are added at the beginning and end of the sliding chain respectively, wherein the fourth window is a replica window of the last display window of the sliding chain, and the fifth window is a replica object of the first display window of the sliding chain, wherein the replica window is the same window with the same data as the last display window of the sliding chain or the first display window of the sliding chain.

[0089] In an embodiment of the present application, based on the original sub-object (third window), new objects are added to the head and tail, where the head object (fourth window) is a replica of the last sub-object, and the tail object (fifth window) is a replica of the first sub-object. As shown in the following example Figure 3, object 1 is the first sub-object and object 3 is the last sub-object. The concepts of the first sub-object and the last sub-object only exist when the code is constructed, and replication also requires developers to know which object to replicate from the beginning. Once the circular sliding begins, there is no distinction between the first and the last. Similarly, when the number of objects in the list that are circularly slid decreases, object replication must also start again. Secondly, monitoring events are added to the head and tail objects. Once the slide reaches the head object, it is considered that the slide has reached the last sub-object, and the UI quickly jumps to the last sub-object. Since the head object is a replica of the last sub-object, there is no change in the UI, but in fact it has jumped to the last sub-object. The same applies to the sliding of the tail object.

[0090] When creating child objects (the third window) within a parent object (the second window), for example, if 26 objects are created, corresponding to 26 letters, then 28 objects are actually required. X objects actually require X+2 objects. Among these X+2 objects, the business objects are located in [2, X+1], meaning that objects from 2nd to X+1st are the objects that the business needs to display. The first object is a replica of object 1, and the last (i.e., X+2nd) object is a replica of object 2. Replica object 1 replicates the X+1th object, and replica object 2 replicates the second object.

[0091] One implementation method for adding replica objects (replica windows) at the beginning and end of a sliding chain is as follows: If the business object is clear, such as the 26 letters above, where the first letter is known to be a or A and the last letter is known to be z or Z, their content is clear, or in other words, the business content is clear. Replica object 1 can then directly replicate the letter z or Z (or other clear content) when it is created, and replica object 2 can pre-replicate the letter a or A (or other clear content) when it is created.

[0092] Another way to implement replica objects at the beginning and end of a sliding chain is to create an object that is not clear about the business object. For example, if you want to display a music list, the content of the last song in the music library is not clear at program creation and requires reading the file to know. In this case, the replica object is first created as an empty object but not replicated. After all objects are created, replica object 1 replicates the last business object, and replica object 2 replicates the first business object. As for how to replicate, the method of generating objects is essentially the same, only the data of the objects is different. The essence of replication is to generate identical objects with the same data.

[0093] It's important to note that if a sub-object copied by a forked object changes, such as if a music list deletes a forked object, the forked object needs to be re-forged. For example, if the first song is deleted from the music list, the second song will replace it and become the new first song. Since the old first song copied by forked object 2 has been deleted, it needs to re-forge the new first song to ensure correct display.

[0094] In the above method, by adding replica windows at the beginning and end of the sliding chain, users can cyclically slide between the two ends of the sliding chain, seamlessly switching between adjacent windows and improving the overall sliding experience. Adding replica windows maintains the continuity of window content, avoiding the abrupt or interrupted feeling when users switch between the two ends of the sliding chain. The replica windows contain the same data, ensuring the consistency of content when users switch between the beginning and end of the sliding chain, allowing users to perceive the seamless connection of data during the cyclic sliding process. This design provides users with a more coherent and smooth cyclic sliding experience while maintaining content consistency, enhancing user perception and satisfaction with the application interface.

[0095] In one embodiment, referring to FIG3 , which is a flow chart of a cyclic sliding method provided by an embodiment of the present application, as shown in FIG3 , by way of example and not limitation, the method includes:

[0096] S201, monitoring the display window of the current screen to obtain a target window.

[0097] In an embodiment of the present application, a refresh monitoring event is added to each sliding chain, and the conditions for triggering the refresh monitoring event are defined. A refresh monitoring event refers to an event triggered under specific conditions, and its purpose is to update or refresh the state of the element or object associated with it. When the object of the sliding chain changes, a refresh monitoring event can be triggered to update the display of the element associated with it or perform corresponding operations. In other words, a monitoring event is set for the second window. Once the object in the window slides, the monitoring event will be triggered, and the second window will determine which object (display window) is currently sliding to, and then perform the corresponding operation.

[0098] In the callback function for the refresh monitoring event, the window currently displayed on the screen is obtained through the functions provided by LVGL, and the display window is identified. This display window is the window with which the user is interacting, or the window with a specific identifier. After identifying the display window, check whether the currently displayed window is the target window. If so, perform the corresponding refresh operation. For example, once the head and tail objects are refreshed, the relative coordinates of the head and tail objects can be determined to determine whether the slide has been placed on the head and tail objects. For example, if the screen is 10x10 and the head and tail objects are the same size as the screen, then:

[0099] ① The coordinate (0,0) indicates that the object is in the center of the screen and is being displayed.

[0100] ②(-10,0) indicates that the object is no longer displayed, but is on the left side of the screen. From ① to ②, we know the user has swiped right. Monitoring the head and tail objects is to determine whether they have been swiped to the head and tail objects, so that we can jump to them later.

[0101] S202. If the window type of the target window is the first type, control the target window to slide to the first window, wherein the first type indicates that the target window is a display window at the head or the tail in the sliding chain corresponding to the target window, the first window is a jump window corresponding to the target window, and the sliding chain is a window queue including multiple display windows.

[0102] In the embodiment of the present application, the type of the target window is set to the first type, which means that the operation is executed when the target window is the first display window or the last display window in the sliding chain. The so-called first type is to limit the conditions of the operation. When the target window is the first or last window (replica window), the target window is controlled to slide to the first window. The above-mentioned first window is the window to jump when the target window is the first or last window, so that the circular sliding of the window can be realized.

[0103] For example, see Figure 4, which is an example diagram of the circular sliding method provided by the embodiment of this application. As shown in Figure 4, the head and tail objects are added to the original sliding chain. As shown in the above figure, the head and tail (head and tail) objects are added before and after the four objects (only for example), and monitoring events are added for the head and tail objects. After sliding to the head and tail objects, the monitoring event is triggered, and the UI slides directly to the replica object. When object 1 slides to the head object, the UI actually slides to object 3; when object 3 slides to the tail object, the UI actually slides to object 1.

[0104] In the above method, LVGL is used to identify the window type of the target window. When the target window is of the first type, LVGL circular sliding can be implemented. Therefore, through the above method, the circular sliding effect can be smoothly implemented in the UI scene, which is conducive to improving the UI interaction experience.

[0105] In one embodiment, FIG5 is a flow chart of determining a window type according to an embodiment of the present application. As shown in FIG5 , the method further includes:

[0106] S301: Obtain the sliding direction of the target window.

[0107] In an embodiment of the present application, first, the direction of the sliding chain where the current target window is located is determined. The sliding chain can be horizontal (from left to right or from right to left) or vertical (from top to bottom or from bottom to top). Then, the sliding direction of the target window is determined according to the direction of the sliding chain. The sliding direction of the target window is consistent with the direction of the sliding chain.

[0108] S302: Acquire a slidable area corresponding to the target window from a sliding chain corresponding to the target window according to the sliding direction of the target window.

[0109] In an embodiment of the present application, if the target window slides horizontally, then the remaining slidable area on the left side corresponding to the target window is obtained; if it slides vertically, then the remaining slidable area on the top side corresponding to the target window is obtained.

[0110] In one embodiment, step S302 includes:

[0111] Obtaining the sequence number of the target window in the sliding chain;

[0112] The slidable area corresponding to the target window is obtained according to the arrangement sequence number.

[0113] In an embodiment of the present application, relevant functions or properties of LVGL are used to obtain the position information of the target window in the sliding chain, that is, its arrangement number. The obtained arrangement number is used to find the sliding area corresponding to the target window in the sliding chain through the corresponding functions or methods of LVGL. The obtained sliding area is operated, and the functions provided by LVGL can be used to perform sliding or other related operations.

[0114] One way to obtain the target window's corresponding scrollable area is to obtain the container's scrolling direction. If the scrolling is horizontal, then the remaining scrollable area on the left side of the container is obtained. Since all objects are the same size as the screen, let the screen be w × n, the remaining scrollable area be remains, the number of scrollable objects be s, and the total number of objects in the container be cnt. Then, determine whether remains%s = 0. Remains%s represents the modulus, i.e., whether remains divides s. In terms of scrolling, if it does, the scrolling has stopped and must have slid the distance of a window, allowing for some judgment and action. If it does not, the scrolling is still ongoing and action should not be taken. If it = 0, then the remaining scrollable area on the left is w × N (N∈[0,cnt-1]) pixels, meaning that the scrolling process consumed at least w pixels (meaning that one object was actually scrolled). Therefore, s = remains÷w, and the currently scrolled object is the s+1th object. For example, in Figure 5, let w×n=10×10, the object currently slid to is the head object, and the number of all objects is 6. According to LVGL, we can know that the current arrangement sequence is the first object, then the sliding area on its left is remains=0, and the number of objects that can be slid on the left is s=remains÷w=0, and the object currently slid to is the s+1=1th object.

[0115] One way to obtain the sliding area corresponding to the target window is to obtain the sliding direction of the container. If it is a vertical sliding, then obtain the remaining sliding area above the container. The remaining sliding area above is h×N (N∈[0,cnt-1]) pixels, s=remains÷h. The method of obtaining the remaining sliding area is similar to that in the horizontal direction mentioned above, and will not be repeated again.

[0116] In this method, the target window's position within the sliding chain is retrieved using functionality provided by LVGL or other related libraries. This position typically represents the target window's relative position within the sliding chain. Using this position, the target window is located within the sliding chain and its corresponding sliding area information, including its position and size, is retrieved. This method obtains sliding area information to further determine the target window's window type, enabling more intelligent and adaptive window management, improving user experience and operational efficiency.

[0117] Step S303: Determine the window type of the target window according to the slidable area corresponding to the target window.

[0118] In an embodiment of the present application, first, the information of the slidable area corresponding to the target window is calculated through the relevant functions or properties of LVGL, and the obtained slidable area is analyzed, including but not limited to its position, size, and other related properties. Based on the characteristics of the slidable area, the type of the target window is determined. For example, if the sliding chain slides horizontally and slides to the second object, and the slidable area on its left is the pixel size corresponding to one object, it can be determined that the window type is not the first type.

[0119] In the above method, by dynamically acquiring the sliding direction and related information, the system is made more intelligent, better meeting the user's needs for window operations, and improving the system's adaptability and user experience.

[0120] In one embodiment, step S303 includes:

[0121] The window type corresponding to the minimum value and the maximum value of the slidable area corresponding to the target window is determined as the first type.

[0122] In an embodiment of the present application, the relevant functions or properties of LVGL are used to obtain the information of the slidable area corresponding to the target window, and the minimum and maximum values ​​​​of the slidable area information obtained are obtained. This may be a numerical value about the position or other metrics. The minimum and maximum values ​​​​are used to determine the type of the target window. For example, if the minimum value corresponds to the head position of the sliding chain and the maximum value corresponds to the tail position of the sliding chain, it can be determined that the window type is the first type. Once the window type is determined, the corresponding operation or behavior can be associated. For example, slide the first type window to the head or tail of the sliding chain (from the corresponding replica object).

[0123] For example, as shown in Figure 4 in the above example, if the current display windows are the head object, object 1, object 2, and tail object, respectively, when the corresponding windows are displayed, the sliding areas on the left are 0, w×1, w×2, and w×5, respectively. By comparison, it can be seen that when the display windows are the head object and the tail object, the corresponding sliding areas are the minimum value and the maximum value, respectively. That is, the window type corresponding to the minimum value and the maximum value of the sliding area corresponding to the target window can be determined as the first type window.

[0124] In the above method, by comparing the minimum and maximum values ​​of the sliding area corresponding to the target window, the system can determine whether the window type is the first type. The system can perform special processing based on its type to improve the intelligence of the system. After determining the window type, the system can respond to user operations more intelligently, improving user experience and overall system usability.

[0125] Figure 6 is a schematic diagram of the structure of the cyclic sliding method provided by an embodiment of the present application. As shown in Figure 6, the steps of implementing the cyclic sliding effect using LVGL are as follows:

[0126] S601: Determine the current display object.

[0127] In this application, the sliding direction of the sliding chain is first determined. If the sliding direction of the sliding chain is horizontally sliding to the right, LVGL is used to obtain the business object being displayed in the sliding chain. As shown in Figure 7, the window currently displayed by the target window is business object 1.

[0128] S602: Slide a display window.

[0129] In this application, the prerequisite for realizing LVGL circular sliding is that the step size is set to a display window. When sliding a display window to the right, because the display window and the screen are the same size, sliding a display window horizontally is equivalent to sliding w pixels. The display object of the current window is replica object 1. Since there is no object to the left of replica object 1, the sliding area on the left remians = 0, the sliding object s = remains ÷ w = 0, and the object displayed is the s+1 = 1st object.

[0130] S603: Slide to the business object corresponding to the replica object.

[0131] In this application, when the current display object of the display window is a replica object, it is necessary to control the display window to slide to the business object corresponding to the replica object. As shown in Figure 7, the current display object is replica object 1, and replica object 1 is a replica of the last sub-object (business object 3) of the sliding chain. Since s=0, it is necessary to slide to the right by w×(cnt-2)=3w pixels (as can be seen from the figure, cnt=5), that is, 3 objects, so it slides from replica object 1 to business object 3.

[0132] S604: Circularly display the sliding object.

[0133] Since replica object 1 is a replica of business object 3, the jump will not actually cause a screen flash, and the circular sliding is achieved almost seamlessly, that is, the circular sliding from replica object 1 to business object 1 is completed, and the target display object is business object 3. The same is true for replica object 2.

[0134] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0135] Those skilled in the art can clearly understand that, for the convenience and brevity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In actual applications, the above-mentioned functions can be distributed and completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated into one processing unit, or each unit can exist physically alone, or two or more units can be integrated into one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0136] Figure 7 is a schematic diagram of the structure of a terminal device provided in an embodiment of the present application. As shown in Figure 7, the terminal device 7 of this embodiment includes: at least one processor 70 (only one is shown in Figure 7), a memory 71, and a computer program 72 stored in the memory 71 and executable on the at least one processor 70. When the processor 70 executes the computer program 72, it implements the steps of any of the above-mentioned cyclic sliding method embodiments.

[0137] The terminal device may be a computing device such as a desktop computer, laptop, PDA, or cloud server. The terminal device may include, but is not limited to, a processor and memory. Those skilled in the art will appreciate that FIG7 is merely an example of a terminal device 7 and does not limit the terminal device 7. The terminal device may include more or fewer components than shown, or a combination of certain components, or different components. For example, the terminal device may also include input / output devices, network access devices, etc.

[0138] The processor 70 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. A general-purpose processor may be a microprocessor or any conventional processor.

[0139] In some embodiments, the memory 71 may be an internal storage unit of the terminal device 7, such as a hard disk or memory of the terminal device 7. In other embodiments, the memory 71 may also be an external storage device of the terminal device 7, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the terminal device 7. Furthermore, the memory 71 may also include both an internal storage unit of the terminal device 7 and an external storage device. The memory 71 is used to store an operating system, application programs, a boot loader, data, and other programs, such as the program code of the computer program. The memory 71 may also be used to temporarily store data that has been output or is about to be output.

[0140] An embodiment of the present application further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps in the above-mentioned various method embodiments can be implemented.

[0141] An embodiment of the present application provides a computer program product. When the computer program product is run on a terminal device, the terminal device can implement the steps in the above-mentioned method embodiments when executing the computer program product.

[0142] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, which can be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and when the computer program is executed by the processor, it can implement the steps of the above-mentioned various method embodiments. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may at least include: any entity or device that can carry the computer program code to the device / terminal device, a recording medium, a computer memory, a read-only memory (ROM), a random access memory (RAM), an electric carrier signal, a telecommunication signal and a software distribution medium. For example, a USB flash drive, a mobile hard disk, a magnetic disk or an optical disk. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electric carrier signals and telecommunication signals.

[0143] In the above embodiments, the description of each embodiment has its own focus. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant description of other embodiments.

[0144] Those skilled in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0145] In the embodiments provided in this application, it should be understood that the disclosed devices / terminal equipment and methods can be implemented in other ways. For example, the device / terminal equipment embodiments described above are merely illustrative. For example, the division of the modules or units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

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

[0147] The above-described embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present application, and should all be included in the scope of protection of the present application.

Claims

1. A cyclic sliding method, characterized in that, The method includes: Monitoring the display window of the current screen to obtain a target window; If the window type of the target window is the first type, controlling the target window to slide to a first window, where the first type indicates that the target window is the display window at the head or the tail of the sliding chain corresponding to the target window, and the first window is the jump window in the sliding chain corresponding to the target window, and the sliding chain is a window queue containing multiple display windows.

2. The cyclic sliding method according to claim 1, wherein The method further includes: Obtaining the sliding direction of the target window; According to the sliding direction of the target window, obtaining the slidable area corresponding to the target window from the sliding chain corresponding to the target window; Determining the window type of the target window according to the slidable area corresponding to the target window.

3. The cyclic sliding method according to claim 2, wherein The obtaining the slidable area corresponding to the target window from the sliding chain corresponding to the target window includes: Obtaining the arrangement serial number of the target window in the sliding chain; Obtaining the slidable area corresponding to the target window according to the arrangement serial number.

4. The cyclic sliding method according to claim 2, characterized in that The determining the window type of the target window according to the slidable area corresponding to the target window includes: Determining the window types corresponding to the minimum value and the maximum value of the slidable area corresponding to the target window as the first type.

5. The cyclic sliding method according to claim 1, wherein The method further includes: Creating a second window according to the screen size where the target window is located; Creating at least two sub-windows of the second window to obtain a third window, where the sum of the sizes of at least two of the third windows is greater than the size of the second window; Generating a sliding chain according to at least two of the third windows.

6. The cyclic sliding method according to claim 5, characterized in that After generating the sliding chain according to at least two of the third windows, the method further includes: Setting a first sliding direction of the second window; Determining a first arrangement direction of the second window according to the first sliding direction, where the first arrangement direction is the same as the first sliding direction; Arranging the third windows according to the first arrangement direction.

7. The cyclic sliding method according to claim 6, characterized in that, The method further includes: Setting the sliding step of the sliding chain as one display window; Sliding the sliding chain according to the sliding step.

8. The cyclic sliding method according to claim 1, characterized in that, The windows of the first type include a fourth window and a fifth window, and the method further includes: Adding a fourth window and a fifth window to the head and the tail of the sliding chain respectively, where the fourth window is a replicated window of the last display window of the sliding chain, and the fifth window is a replicated object of the first display window of the sliding chain, and the replicated window is the same window with the same data as the last display window or the first display window of the sliding chain.

9. A terminal device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the method according to any one of claims 1 to 8.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the method according to any one of claims 1 to 8.

Images