Multidirectional sliding method, terminal device, and computer readable storage medium

By real-time detection and identification of the sliding direction of the display window, the LVGL library is used to achieve multi-directional sliding in UI scenarios, solving the problem that the LVGL sliding effect can only be two-way, and improving user interaction experience and system adaptability.

WO2025139466A1PCT designated stage expired Publication Date: 2025-07-03SHENZHEN ZOLON TECH CO LTD
View PDF 6 Cites 0 Cited by

Patent Information

Application Number
PCT/CN2024/132783
Authority / Receiving Office
WO · WO
Patent Type
Applications
Current Assignee / Owner
Priority Date
2023-12-25
Filing Date
2024-11-18
Publication Date
2025-07-03

AI Technical Summary

Technical Problem

In the prior art, there is a problem of lag when using gestures to transform UI scenes. Especially when hardware capabilities are limited, the sliding effect of LVGL can only achieve bidirectional sliding, and cannot meet the needs of three-way and four-way sliding.

Method used

By real-time detection and identification of the display window on the screen, the sliding direction of the target window is obtained, and the sliding direction in the vertical direction is obtained when it is recognized as an intersection object, the window controls multi-directional sliding effect is achieved using the LVGL library.

Benefits of technology

In the UI scene, a silky multi-directional sliding effect is achieved, which improves the user interaction experience, avoids the lag caused by gesture operations, and enhances the flexibility and adaptability of the system.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN2024132783_03072025_PF_FP_ABST
    Figure CN2024132783_03072025_PF_FP_ABST
Patent Text Reader

Abstract

The present application is applicable to the technical field of human-computer interaction, and provides a multidirectional sliding method, a terminal device, and a computer readable storage medium. The method comprises: acquiring a first sliding direction corresponding to a target window; if the target window is an intersection object, acquiring a second sliding direction on the basis of the first sliding direction, wherein the second sliding direction is perpendicular to the first sliding direction; and controlling the target window to move in the first sliding direction or the second sliding direction. According to the method, a multidirectional sliding effect can be achieved in a UI scenario, and the UI interaction experience can be improved.
Need to check novelty before this filing date? Find Prior Art

Description

Multi-directional 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 202311799542.5, and invention name “Multi-directional sliding method, terminal device and computer-readable storage medium”, the entire 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 multi-directional sliding method, a terminal device, and a computer-readable storage medium. Background Art

[0003] UI scene changes in products like POS devices are often implemented using gestures. However, gesture detection takes time, which can cause some lag in the page during the transition. This is particularly noticeable on limited hardware. Using swipe gestures in the open-source Light Versatile Graphics Library (LVGL) instead of gestures for UI scene changes can significantly improve the user experience.

[0004] When using the sliding effect provided by LVGL, only two-way sliding is generally possible, such as vertical sliding or horizontal sliding, but not three-way and four-way sliding. This means that some scene changes can only be made using gestures, which can cause lag. Summary of the Invention

[0005] The embodiments of the present application provide a sliding method, apparatus, terminal device, and computer-readable storage medium, which can smoothly achieve a multi-directional 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 sliding method, comprising:

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

[0008] Obtaining a first sliding direction corresponding to the target window;

[0009] If the target window is an intersection object, obtaining a second sliding direction according to the first sliding direction, wherein the second sliding direction is perpendicular to the first sliding direction;

[0010] The target window is controlled to move along the first sliding direction or the second sliding direction.

[0011] In an embodiment of the present application, when LVGL is used to implement human-computer interaction, the display windows on the current screen are detected and identified in real time, and the target window therein is determined, and the first sliding direction corresponding to the target window is obtained, which may be a horizontal or vertical movement direction. If the target window is identified as an intersection object, the system will perform additional steps. For the intersection object, the system will obtain a second sliding direction, which is perpendicular to the first sliding direction. Finally, according to one of the first sliding direction or the second sliding direction, the target window is controlled to move on the screen. In other words, LVGL is used to identify the intersection object, and LVGL can be used to slide in different directions at the intersection object position. Therefore, through the above method, a multi-directional sliding effect can be smoothly achieved in the UI scene, which is conducive to improving the UI interaction experience.

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

[0013] Obtaining the relative coordinates of the target window on the screen;

[0014] If the relative coordinates of the target window on the screen are equal to the coordinates of the center of the screen, then determining that the target window is the intersection object;

[0015] If the relative coordinates of the intersection object are not equal to the coordinates of the center of the screen, it is determined that the first window is not the intersection object.

[0016] In an embodiment of the present application, by obtaining relative coordinates, the system can perceive the specific position of the target window on the screen, which helps to operate the window more accurately and determine whether the target window is an intersection object, which may trigger different operations or decision paths, increase the flexibility of the system, and determine whether the target window is in the center of the screen. It can be used to identify the window that the user is paying attention to, thereby improving the user experience.

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

[0018] Create multiple sliding chains;

[0019] A third sliding direction corresponding to each sliding chain is set respectively.

[0020] In an embodiment of the present application, multiple sliding chains are created through an interface or command, each chain being associated with a specific window or operation. For each sliding chain, the user can set a third sliding direction, which may involve specifying an angle or direction vector. Creating multiple sliding chains allows the user to define different sliding operations, making the system more diverse. Different sliding chains may correspond to different application scenarios or window operations, increasing the adaptability and flexibility of the system. By setting an independent third sliding direction for each chain, the system can perform different operations more finely, helping to improve operational efficiency.

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

[0022] creating a first window according to the size of the screen;

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

[0024] The sliding chain is generated according to at least two of the second windows.

[0025] In an embodiment of the present application, by creating a first 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 second windows is larger than the size of the first 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.

[0026] In a possible implementation manner of the first aspect, generating the sliding chain according to at least two second windows includes:

[0027] For each of the second windows, creating 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;

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

[0029] In an embodiment of the present application, creating a third window enables the system to have a deeper level of window management capabilities and adapt to more complex task requirements. By generating a sliding chain, users can easily switch between windows at different levels, improving multi-tasking efficiency. The system's ability to automatically generate and manage windows and sliding chains makes it more dynamically adaptable and flexibly adjusts the window layout according to user operations and needs. Through the generation of sliding chains, users can quickly switch and operate windows through intuitive sliding operations, increasing the system's ease of use.

[0030] In a possible implementation of the first aspect, respectively setting the third sliding direction corresponding to each sliding chain includes:

[0031] Setting a fourth sliding direction of the first window;

[0032] setting a fifth sliding direction of the second window according to the fourth sliding direction, wherein the fourth sliding direction is perpendicular to the fifth sliding direction;

[0033] A sixth sliding direction of the third window is set according to the fifth sliding direction, wherein the fifth sliding direction is perpendicular to the sixth sliding direction.

[0034] In an embodiment of the present application, by setting different sliding directions for different windows, users can perform operations in multiple dimensions, thereby improving the diversity of operations. The sliding directions of each window and its corresponding sub-window are set to sliding directions perpendicular to each other. Multiple intersection objects can be generated through the above method to achieve the LVGL multi-directional sliding effect.

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

[0036] At least one intersection object is set for each of the sliding chains.

[0037] In an embodiment of the present application, users can set at least one intersection object for each sliding chain through the system interface or command mode, defining its position and characteristics. Each sliding chain is associated with at least one intersection object, and users can specify that a specific operation or switch to the corresponding window be triggered when sliding to a specific intersection. When the user slides the window, the system needs to determine whether the current position has reached a certain intersection object. If so, it performs the relevant operation. By setting at least one intersection object for the sliding chain, the system can achieve higher-level task navigation and window management, providing users with a more flexible and intelligent window operation experience.

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

[0039] If the target window is not an intersection object, the target window is controlled to move along the first sliding direction.

[0040] In this embodiment of the present application, non-intersection objects can be slid, but it is very likely that the object will be slid to a blank object. In fact, this object does not exist. LVGL may have created it for alignment or other reasons. From an application processing perspective, sliding to a non-existent object is undesirable, so the direction of non-intersection objects needs to be restricted. Through the above method, the accuracy of the sliding method can be improved, sliding to blank objects can be avoided, and the user experience can be improved.

[0041] 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 sliding method as described in any one of the above-mentioned first aspects is implemented.

[0042] 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 sliding method as described in any one of the above-mentioned first aspects is implemented.

[0043] In a fourth aspect, an embodiment of the present application provides a computer program product, which, when executed on a terminal device, enables the terminal device to execute the sliding method described in any one of the above-mentioned first aspects.

[0044] 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

[0045] 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.

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

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

[0048] FIG3 is a schematic diagram of a process for creating a sliding chain provided in an embodiment of the present application.

[0049] FIG4 is a flow chart of the sliding method provided in an embodiment of the present application.

[0050] FIG5 is a schematic structural diagram of the sliding method provided in an embodiment of the present application.

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

[0052] 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.

[0053] 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.

[0054] 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.

[0055] 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.

[0056] 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.

[0057] 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.

[0058] UI scene changes in products like POS (Point of Sale) are often implemented using gestures. However, gesture detection takes time, which can cause some lag in the page 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.

[0059] When using the sliding effects provided by LVGL, for example, in a music player application, there are two main interfaces: a music list interface and a specific music content interface. Through LVGL or similar libraries, we can only implement vertical or horizontal sliding. For example, users can vertically or slide through the entire music list. 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 in the interface. Therefore, when using the sliding effects provided by LVGL, it is generally only possible to achieve two-way sliding, vertical sliding or horizontal sliding, but not three-way and four-way sliding. This means that some scene changes can only be achieved using gestures, which can cause lag.

[0060] Based on the problems arising from the above-mentioned related technologies, an embodiment of the present application provides a sliding method. In the embodiment of the present application, when LVGL is used to implement human-computer interaction, the display window on the current screen is detected and identified in real time, and the target window therein is determined, and the first sliding direction corresponding to the target window is obtained, which may be a horizontal or vertical movement direction. If the target window is identified as an intersection object, the system will perform additional steps. For the intersection object, the system will obtain a second sliding direction, which is perpendicular to the first sliding direction. Finally, according to one of the first sliding direction or the second sliding direction, the target window is controlled to move on the screen. In other words, LVGL is used to identify the intersection object, and LVGL can be implemented to slide in different directions at the intersection object position. Therefore, through the above method, a multi-directional sliding effect can be smoothly achieved in the UI scene, which is conducive to improving the UI interaction experience.

[0061] 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 commercial and non-commercial projects, and allowing source code to be modified to meet specific needs.

[0062] Before discussing the multi-directional 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 multiple sliding chains.

[0064] In the embodiments of the present application, a slide chain is a user interface element that is typically used to select a range of values ​​using a slide gesture or other input method. In LVGL, a slide chain can be a group of UI elements connected to each other by gestures. These elements can be sliders, lists, or other components that support sliding.

[0065] The steps for creating a sliding chain using the LVGL library are as follows: Create a sliding chain object: In LVGL, you can create a sliding chain object by calling the corresponding function. This includes setting the sliding chain's parent container, position, size, and other properties; Configure sliding chain properties: Set the sliding chain's properties, such as the minimum value, maximum value, initial value, and scale. These properties determine the range of values ​​represented by the sliding chain and the sliding chain's initial state; Add event callback functions: To respond to user interactions, you can add event callback functions. In this way, when the user interacts with the sliding chain, the system will call the corresponding callback function, allowing developers to perform customized operations when the sliding chain value changes; Display the sliding chain: Add the sliding chain to the display to ensure that it is visible in the user interface; Process user input: In the event callback function, developers can obtain user input, such as the current value of the sliding chain, for appropriate processing.

[0066] For example, see Figure 2, which is a schematic diagram of a sliding chain provided by an embodiment of the present application. As shown in Figure 2, four objects (for example) are first created: Object 1, Object 2, Object 3, and Object 4. These four objects form a vertical sliding chain. Within each object, four sub-objects are created to form another four sliding chains.

[0067] By following these steps, you can implement multiple slide chains in an embedded system, allowing users to select specific values ​​using slide gestures or other input methods. Slide chains are often used in scenarios such as adjusting settings and volume control, providing an intuitive and easy-to-use user interaction method.

[0068] In one embodiment, referring to FIG3 , which is a flow chart of creating a sliding chain provided by an embodiment of the present application, as shown in FIG3 , the process of creating each sliding chain in step S101 includes:

[0069] S201: Create a first window according to the size of the screen.

[0070] 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.

[0071] When creating a sliding chain, you first need to create the first window in LVGL based on the screen size. One implementation method is to: Initialize LVGL: Before starting any interface creation, you need to initialize the LVGL library. This includes calling the initialization function to set LVGL's basic parameters and configuration; Create a screen object: Using LVGL functions, create an object representing the entire screen (the first window). This is typically a window object, and you can set its size and position to match the actual screen size; Configure window properties: Set window properties such as background color and border style. These properties can be adjusted according to design requirements.

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

[0073] In an embodiment of the present application, the first 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 first window. Each sub-window can have a different size and position to suit the overall design. 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 second window is created in the first window. The second window can cover the selected sub-window to form a new layout, and a sliding chain object is added to the second window using LVGL functions. Configure the properties of the sliding chain, such as minimum value, maximum value, initial value, etc. In order to respond to the user's interaction with the sliding chain, an event callback function can be added to the sliding chain object. In this way, custom operations can be performed when the value of the sliding chain changes. Since the second window is a child window of the first window, the first window can be the parent object of the second window.

[0074] 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.

[0075] S203: Generate the sliding chain according to at least two of the second windows.

[0076] In an embodiment of the present application, a sliding chain object is created in each second 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 second 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 second window.

[0077] Exemplarily, R as shown in FIG2 is equivalent to the first window, wherein object 1, object 2, object 3, and object 4 (four objects are given in the example) are equivalent to four second windows, and the four second windows can generate a sliding chain.

[0078] Following these steps, a sliding chain is successfully generated in at least two second windows. Users can then interact with these windows through the sliding chain, 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.

[0079] In one embodiment, step S303 includes:

[0080] For each second window, at least two sub-windows of the second window are created 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; and a sliding chain is generated based on the at least two third windows.

[0081] In an embodiment of the present application, multiple child windows, namely third windows, are created in each second window. The creation method is the same as the process of creating the second window in the above embodiment. In this process, the second window is equivalent to the parent object of the third window, which is equivalent to multi-layer nesting.

[0082] For example, as shown in FIG2 , object 1-1, object 1-2, object 1-3, and object 1-4 are the third windows of object 1 (the second window); object 2-1, object 2-2, object 2-3, and object 2-4 are the third windows of object 2 (the second window); and so on.

[0083] In the above method, creating a third window enables the system to have a deeper level of window management capabilities and adapt to more complex task requirements. By generating a sliding chain, users can easily switch between windows at different levels to improve multi-tasking efficiency. The system's ability to automatically generate and manage windows and sliding chains makes it more dynamically adaptable and flexibly adjusts the window layout according to user operations and needs. Through the generation of sliding chains, users can quickly switch and operate windows through intuitive sliding operations, increasing the system's usability.

[0084] S102, respectively setting a third sliding direction corresponding to each sliding chain.

[0085] In an embodiment of the present application, first, the specific scope of action of each sliding chain in each window is determined. This includes determining the range of values ​​controlled by the sliding chain and the scope of influence of the sliding chain; considering the layout and arrangement of each window. Understand the position of the sliding chain in the layout to determine its sliding direction. For example, if the sliding chain is located in a vertically arranged area, it may be more appropriate to set a vertical sliding direction. Consider the user's habits and expectations. Typically, a vertical sliding chain is used to control vertical parameters, while a horizontal sliding chain is used to control horizontal parameters. This helps make the user interface more intuitive and easy to understand. Use the functions of the LVGL library to set the corresponding sliding direction for each sliding chain. You can choose horizontal, vertical, or other customized directions to meet the needs of the application. For example, if the sliding chain is used to adjust the volume, you may choose the vertical direction to simulate the up and down adjustment of the volume. If the sliding chain is used to adjust the brightness, you may choose the horizontal direction to simulate the left and right adjustment of the brightness.

[0086] In the above method, multiple sliding chains are created through the interface or command method. Each chain is associated with a specific window or operation. For each sliding chain, the user can set a third sliding direction, which may involve specifying an angle or direction vector. Creating multiple sliding chains allows users to define different sliding operations, making the system more diverse. Different sliding chains may correspond to different application scenarios or window operations, increasing the system's adaptability and flexibility. By setting an independent third sliding direction for each chain, the system can perform different operations more precisely, helping to improve operational efficiency.

[0087] In one embodiment, step S102 includes:

[0088] Set the fourth sliding direction of the first window; set the fifth sliding direction of the second window according to the fourth sliding direction, wherein the fourth sliding direction is perpendicular to the fifth sliding direction; set the sixth sliding direction of the third window according to the fifth sliding direction, wherein the fifth sliding direction is perpendicular to the sixth sliding direction.

[0089] In the embodiments of this application, to achieve LVGL three-way and four-way sliding effects, it is necessary to restrict the sliding direction of each sliding chain. Generally, the direction of a sliding chain is vertical or horizontal. To enable multi-directional sliding of objects in a sliding chain, it is necessary to achieve it in a position that can slide both horizontally and vertically. Therefore, the direction of each sliding chain can be restricted so that its sliding directions are perpendicular to each other, thus achieving LVGL three-way and four-way sliding effects.

[0090] One way to implement a restricted sliding chain is to set the first window's arrangement direction to horizontal (horizontally sliding). Then, set the second window's arrangement direction to the opposite direction of its parent (the first window), vertical (vertically sliding). Since the second window's sliding direction is vertical and it is the parent of the third window, set the third window's arrangement direction to horizontal (horizontally sliding). These windows can be nested in multiple layers depending on business needs.

[0091] Another way to implement a limited sliding chain is to set the first window's arrangement direction to vertical (vertical sliding). Then, set the second window's arrangement direction to the opposite direction of its parent (the first window), that is, horizontal (horizontal sliding). Since the second window's sliding direction is horizontal and it is the parent of the third window, set the third window's arrangement direction to vertical (vertical sliding). These windows can be nested in multiple layers depending on business needs.

[0092] In the above method, by setting different sliding directions for different windows, users can operate in multiple dimensions, thereby improving the diversity of operations. The sliding directions of each window and its corresponding sub-window are set to sliding directions perpendicular to each other. Through the above method, multiple intersection objects can be generated to achieve the LVGL multi-directional sliding effect.

[0093] In one embodiment, the method further comprises:

[0094] At least one intersection object is set for each of the sliding chains.

[0095] In an embodiment of the present application, for each pair of mutually perpendicular sliding chains, at least one vertical intersection object is set, and the created vertical intersection objects are added to the corresponding sliding chains using the functions of the LVGL library. Ensure that they are correctly associated with the sliding chains, and for each vertical intersection object, configure its properties to reflect its role in the interface. You can set properties such as text, icon, color, and add an event callback function for each vertical intersection object. Ensure that when the user interacts with the intersection object, the corresponding operation is performed to maintain the association between the sliding chains. For example, if there are two vertical sliding chains, one for adjusting the vertical parameters and the other for adjusting the horizontal parameters, a button can be added at their intersection to indicate that the vertical and horizontal parameters are adjusted at the same time. This button is the vertical intersection object.

[0096] For example, as shown in FIG2 , the third window object 1-2, object 2-3, object 3-1, object 4-1, etc. can be set as intersection objects, and the rest are non-intersection objects.

[0097] In this method, users can set at least one intersection object for each sliding chain through the system interface or command, defining its location and characteristics. Each sliding chain is associated with at least one intersection object, and users can specify that a specific action or switch to the corresponding window be triggered when sliding to a specific intersection. When the user slides the window, the system needs to determine whether the current position has reached a certain intersection object and, if so, perform the relevant action. By setting at least one intersection object for a sliding chain, the system can achieve higher-level task navigation and window management, providing users with a more flexible and intelligent window operation experience.

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

[0099] S301, monitoring the display window on the current screen to obtain a target window.

[0100] In an embodiment of the present application, a refresh monitoring event is added to the intersection object of 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 status of the elements or objects associated therewith. When the value of the sliding chain changes, a refresh monitoring event can be triggered to update the display of the elements associated therewith or perform corresponding operations. A refresh monitoring event is set for the intersection object of each sliding chain. This can be achieved by registering a callback function for each intersection object to ensure that the corresponding refresh operation is triggered when the target window changes.

[0101] In the refresh monitoring event callback function, the LVGL-provided functions are used to obtain the currently displayed window on the screen and identify the displayed window. This window is either the window the user is currently interacting with or a window with a specific identifier. After identifying the displayed window, the function checks whether the currently displayed window is the target window. If so, the corresponding refresh operation is performed.

[0102] S302: Obtain a first sliding direction corresponding to the target window.

[0103] In an embodiment of the present application, first, the direction of the sliding chain currently used 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 first 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.

[0104] S303: If the target window is an intersection object, obtain a second sliding direction according to the first sliding direction, wherein the second sliding direction is perpendicular to the first sliding direction.

[0105] In an embodiment of the present application, during a sliding event, whether an intersection object has been slid onto is detected in real time, that is, whether the currently displayed target window is the intersection object is determined. This can be achieved using the position information or status provided by the LVGL interface. Based on the detected position information of the intersection object, it is determined whether the intersection object has been slid onto. If the intersection object is detected to be on the sliding chain, an operation of releasing the sliding restriction is executed; otherwise, an operation of enabling the sliding restriction is executed. The operation of releasing the sliding restriction is to obtain a second sliding direction based on the first direction of the target window.

[0106] For example, if the target window is an intersection object and the direction of its sliding chain is horizontal sliding (first sliding direction), and the parent object of the target window is vertical sliding, then the sliding restriction of the parent object on the intersection object is released to obtain the second sliding direction (sliding direction of the parent object).

[0107] S304: Control the target window to move along the first sliding direction or the second sliding direction.

[0108] In an embodiment of the present application, when the target window is an intersection object, the three-way and four-way sliding effects of LVGL can be implemented. LVGL provides callback functions for handling sliding events. These callback functions need to be registered for the target window so that it can be notified when sliding occurs. The sliding event callback function is implemented in the corresponding code. Through this callback function, the sliding direction information can be obtained and the corresponding operation can be performed as needed. If the user slides in the horizontal direction, the function can be called to move the target window horizontally. If the user slides in the vertical direction, the function can be called to move the target window vertically. In the sliding event callback function, the logic of window movement is executed according to the sliding direction. This may involve adjusting the coordinates or offset of the window, etc.

[0109] In one implementation, as shown in the example Figure 2 above, if the current target window is object 1-2 (intersection object), the sliding direction of the sliding chain in which it is located is horizontal. When the restriction of its parent object on the intersection object 1-2 is released, it can slide horizontally and vertically. Since the sliding chain in which the intersection object 1-2 is located is horizontally sliding and is the first sliding chain in the vertical direction, it can be seen from the figure that it can slide left and right in the horizontal direction, as well as downward in the vertical direction, thus realizing the three-way sliding effect of LVGL.

[0110] In another implementation, as shown in the example Figure 2 above, if the current target window is object 2-3 (intersection object), the sliding direction of the sliding chain in which it is located is horizontal. When the restriction of its parent object on the intersection object 2-3 is released, it can slide horizontally and vertically. Since the sliding chain in which the intersection object 2-3 is located is horizontal sliding, it can be seen from the figure that it can slide left or right in the horizontal direction, and slide downward or upward in the vertical direction, thus realizing the four-way sliding effect of LVGL.

[0111] In the above method, when LVGL is used to implement human-computer interaction, the display windows on the current screen are detected and identified in real time, and the target window therein is determined, and the first sliding direction corresponding to the target window is obtained, which may be a horizontal or vertical movement direction. If the target window is identified as an intersection object, the system will perform additional steps. For the intersection object, the system will obtain a second sliding direction, which is perpendicular to the first sliding direction. Finally, according to one of the first sliding direction or the second sliding direction, the target window is controlled to move on the screen. In other words, LVGL is used to identify the intersection object, and LVGL can be used to slide in different directions at the intersection object position. Therefore, through the above method, a multi-directional sliding effect can be achieved smoothly in the UI scene, which is conducive to improving the UI interaction experience.

[0112] In one embodiment, the method further comprises:

[0113] Obtain the relative coordinates of the target window on the screen; if the relative coordinates of the target window on the screen are equal to the coordinates of the center of the screen, determine that the target window is the intersection object; if the relative coordinates of the intersection object are not equal to the coordinates of the center of the screen, determine that the first window is not the intersection object.

[0114] In the embodiment of the present application, a refresh monitoring event is added to the intersection object of each sliding chain. When the object is refreshed, the event will be continuously triggered. The callback processing is as follows:

[0115] Get the relative coordinate a of the object. Assume that the screen is w*h, then the coordinate of the center of the screen is (w / 2, h / 2). Determine whether the coordinate of a is equal to the coordinate of the center of the screen. If they are equal, it means that the object has been slid onto. If it has slid onto the intersection object, call the LVGL interface to release the sliding restriction of the sliding chain where its parent object is located. If it has not slid onto the intersection object, enable the sliding restriction of the sliding chain where its parent object is located.

[0116] In the above method, by obtaining relative coordinates, the system can perceive the specific position of the target window on the screen, which helps to operate the window more accurately and determine whether the target window is an intersection object, which may trigger different operations or decision paths, increase the flexibility of the system, and determine whether the target window is in the center of the screen. It can be used to identify the window that the user is paying attention to, thereby improving the user experience.

[0117] In one embodiment, the method further comprises:

[0118] If the target window is not an intersection object, the target window is controlled to move along the first sliding direction.

[0119] In an embodiment of the present application, when the target window is not an "intersection object", it may mean that the target window is not an object with an intersection or intersection function. In this case, the system can focus on the first direction of the sliding according to the user's sliding operation, and adjust the position of the target window when the user slides along that direction. Specifically, if the direction in which the user starts sliding is the first sliding direction defined by the system, the system will interpret the operation and perform the corresponding movement. This involves detecting the direction of the user's gesture, calculating the distance the target window should move along that direction, and adjusting the target window to the new position.

[0120] In the above method, non-intersection objects can be slid, but there's a high probability that the object will be slid to a blank object. This object doesn't actually exist; LVGL may have created it for alignment or other reasons. From an application processing perspective, sliding to a non-existent object is undesirable, so the direction of non-intersection objects needs to be restricted. This method improves the accuracy of the sliding method, avoids sliding to blank objects, and enhances the user experience.

[0121] Figure 5 is a schematic diagram of the structure of the sliding method provided in the embodiment of the present application. As shown in Figure 6, the steps of using LVGL to achieve three-way and four-way sliding effects are as follows:

[0122] S501: Monitor the display window.

[0123] In this application, after creating multiple mutually perpendicular sliding chains, the window can be slid in the UI scene of the POS product, the display window on the monitoring screen can be monitored, and the target window can be obtained.

[0124] S502: Determine whether the target window is an intersection object.

[0125] In this application, it is first necessary to obtain the current sliding target window and determine whether the target window is an intersection object. If so, step S503 is executed, otherwise step S506 is executed.

[0126] S503: Allow the target window to slide in multiple directions.

[0127] In this application, if the currently sliding window is determined to be an intersection object, it is allowed to slide in different directions at the current position. For example, if the current sliding direction is vertical, it is allowed to slide in the horizontal direction. If the current sliding direction is horizontal (sliding to the left or sliding to the right), it is allowed to slide in the vertical direction (sliding up or sliding down). Therefore, the LVGL three-way and four-way sliding effects can be achieved.

[0128] S504: Determine whether the target window slides to another sliding chain.

[0129] In this application, when the target window is an intersection object and performs multi-directional sliding, it is determined whether the target window slides to a sliding chain different from the current sliding chain. If so, step S505 is executed, and if not, step S507 is executed.

[0130] S505: The target window jumps to another sliding chain.

[0131] In the present application, when it is determined that the target window slides to another sliding chain, the object is directly jumped to the corresponding sliding chain.

[0132] S506: prohibiting the target window from sliding in multiple directions.

[0133] In this application, if it is determined that the current target window is not an intersection object, the target window is prohibited from moving in a direction inconsistent with the sliding direction of the sliding chain, that is, it can only slide along the position of the current sliding chain and cannot slide in multiple directions.

[0134] S507: The target window slides within the corresponding sliding chain.

[0135] In this application, if the target window is not an intersection object, the target window can only slide along the sliding direction of the sliding chain to which it belongs. If the sliding chain to which it belongs is horizontal, the target window can only slide left or right in the horizontal direction.

[0136] Note that the specific implementation may vary depending on the UI framework or library used. In LVGL, you can register a slide event callback function to capture the user's slide operation, and then handle the corresponding movement logic in the callback function. This method allows different operations to be performed based on the slide direction, achieving the effect of controlling the target window to move along the first slide direction.

[0137] S508: End.

[0138] 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.

[0139] 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.

[0140] FIG6 is a schematic diagram of the structure of a terminal device provided in an embodiment of the present application. As shown in FIG6 , the terminal device 6 in this embodiment includes: at least one processor 60 (only one is shown in FIG6 ), a memory 61, and a computer program 62 stored in the memory 31 and executable on the at least one processor 60. When the processor 60 executes the computer program 62, the steps of any of the above-described sliding method embodiments are implemented.

[0141] 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 FIG6 is merely an example of a terminal device 6 and does not limit the terminal device 6. 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.

[0142] The processor 60 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.

[0143] In some embodiments, the memory 61 may be an internal storage unit of the terminal device 6, such as a hard disk or memory of the terminal device 6. In other embodiments, the memory 61 may also be an external storage device of the terminal device 3, 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 6. Furthermore, the memory 61 may also include both an internal storage unit of the terminal device 6 and an external storage device. The memory 61 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 61 may also be used to temporarily store data that has been output or is about to be output.

[0144] 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.

[0145] 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.

[0146] 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.

[0147] 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.

[0148] 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.

[0149] 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.

[0150] 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.

[0151] 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 multi-directional sliding method, characterized in that, The method includes: Monitoring the display window on the current screen to obtain a target window; Obtaining a first sliding direction corresponding to the target window; If the target window is an intersection object, obtaining a second sliding direction according to the first sliding direction, where the second sliding direction is perpendicular to the first sliding direction; Controlling the target window to move along the first sliding direction or the second sliding direction.

2. The multi-directional sliding method according to claim 1, wherein The method further includes: Obtaining the relative coordinates of the target window on the screen; If the relative coordinates of the target window on the screen are equal to the coordinates of the center of the screen, determining that the target window is the intersection object; If the relative coordinates of the intersection object are not equal to the coordinates of the center of the screen, determining that the first window is not the intersection object.

3. The multi-directional sliding method according to claim 1, characterized in that The method further includes: Creating multiple sliding chains; Respectively setting a third sliding direction corresponding to each sliding chain.

4. The multi-directional sliding method according to claim 3, characterized in that, The method further includes: Creating a first window according to the size of the screen; Creating at least 2 sub-windows of the first window to obtain a second window, where the sum of the sizes of at least 2 second windows is greater than the size of the first window; Generating the sliding chain according to at least 2 second windows.

5. The multi-directional sliding method according to claim 4, wherein The generating the sliding chain according to at least 2 second windows includes: For each second window, creating at least 2 sub-windows of the second window to obtain a third window, where the sum of the sizes of at least 2 third windows is greater than the size of the second window; Generating one sliding chain according to at least 2 third windows.

6. The multi-directional sliding method according to claim 3, characterized in that, The respectively setting a third sliding direction corresponding to each sliding chain includes: Setting a fourth sliding direction of the first window; Setting a fifth sliding direction of the second window according to the fourth sliding direction, where the fourth sliding direction is perpendicular to the fifth sliding direction; Setting a sixth sliding direction of the third window according to the fifth sliding direction, where the fifth sliding direction is perpendicular to the sixth sliding direction.

7. The multi-directional sliding method according to claim 3, characterized in that The method further includes: Setting at least one intersection object for each sliding chain.

8. The multi-directional sliding method according to claim 1, characterized in that, The method further includes: If the target window is not an intersection object, controlling the target window to move along the first sliding direction.

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, the method described in any one of claims 1 to 8 is implemented.

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

Citation Information

Patent Citations

  • Arranging method and device for controls

    CN103365526A

  • LVGL-based user interface switching method and device

    CN113325975A

  • Movement control method and device for sliding strip with scales and electronic equipment

    CN113961128A

  • Graphical user interface system

    CN115280269A

  • Multidirectional sliding method, terminal equipment and computer readable storage medium

    CN117762299A