Method, device and medium for dynamically selecting time range based on timeline interaction

Abstract

This application relates to the field of front-end development technology, and provides a method, apparatus, and medium for dynamically selecting a time range based on timeline interaction. The method includes: creating a view component and a view container; performing an initialization loading operation on the view component to obtain the width of the timeline; calculating the time length represented by each pixel based on the width of the timeline and the time range of the timeline; determining the width occupied by the slider on the timeline using the time length represented by the slider and the time length represented by each pixel; controlling the slider to move on the timeline during displacement in response to an operation that triggers slider movement; determining the time corresponding to the left side of the slider based on the start time of the timeline and the current position of the slider; and determining the time corresponding to the right side of the slider based on the time corresponding to the left side of the slider and the width occupied by the slider on the timeline. This application's embodiments solve the problem of inconvenient time range selection using a time range selector.

Description

Technical Field

[0001] This application relates to the field of front-end development technology, and in particular to a method, apparatus and medium for dynamically selecting a time range based on timeline interaction. Background Technology

[0002] With the development of information technology, data visualization has provided great convenience for businesses. In order to facilitate targeted analysis or querying of data, B-end business platforms, which are business-to-business (B2B) business platforms designed specifically for business communication, cooperation and transactions between enterprises, usually provide a time range selector in the UI framework to select the time range of data to be viewed. This time range selector usually allows users to select the start and end times in an interactive way, or quickly select commonly used time periods through shortcut buttons, so as to filter or query time periods.

[0003] However, when using existing time range selectors to select a time range, in certain scenarios, users may need to perform multiple steps or inputs to complete the selection. This can also lead to limitations in input format and range, or the availability of only a limited number of preset time range options, failing to meet users' needs for convenient time selection. Therefore, existing technologies suffer from inconvenience. Summary of the Invention

[0004] In view of this, embodiments of this application provide a method, apparatus and medium for dynamically selecting a time range based on time axis interaction, so as to solve the problem that the selection of time range is not convenient enough in the prior art.

[0005] A first aspect of this application provides a method for dynamically selecting a time range based on timeline interaction, comprising: creating a view component and a view container, the view container being used to encapsulate components of a time selector, the components including a timeline and a slider; performing an initialization loading operation on the view component, obtaining the width of the timeline, and calculating the time length represented by each pixel based on the width of the timeline and the time range of the timeline; determining the width occupied by the slider on the timeline using the time length represented by the slider and the time length represented by each pixel; setting the initial position of the slider according to the current time, recording the initial position of the slider in response to an operation that triggers slider movement, and controlling the slider to move on the timeline during the displacement process; determining the current position of the slider after the slider displacement ends, determining the time corresponding to the left side of the slider based on the start time of the timeline and the current position of the slider, and determining the time corresponding to the right side of the slider based on the time corresponding to the left side of the slider and the width occupied by the slider on the timeline.

[0006] A second aspect of this application provides an apparatus for dynamically selecting a time range based on timeline interaction, comprising: a creation module configured to create a view component and a view container, the view container being used to encapsulate components of a time selector, the components including a timeline and a slider; a calculation module configured to perform an initialization loading operation on the view component, obtain the width of the timeline, and calculate the time length represented by each pixel based on the width of the timeline and the time range of the timeline; a first determination module configured to determine the width occupied by the slider on the timeline using the time length represented by the slider and the time length represented by each pixel; a control module configured to set the initial position of the slider according to the current time, record the initial position of the slider in response to an operation that triggers slider movement, and control the slider to move on the timeline during the displacement process; and a second determination module configured to determine the current position of the slider after the slider displacement ends, determine the time corresponding to the left side of the slider based on the start time of the timeline and the current position of the slider, and determine the time corresponding to the right side of the slider based on the time corresponding to the left side of the slider and the width occupied by the slider on the timeline.

[0007] A third aspect of this application provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the above-described method.

[0008] A fourth aspect of this application provides a medium storing a computer program that, when executed by a processor, implements the steps of the above-described method.

[0009] The above-described technical solutions adopted in the embodiments of this application can achieve the following beneficial effects:

[0010] By creating a view component and a view container to encapsulate the timeline and slider, and after initializing and loading the view component, the width of the timeline is obtained. Based on the width and time range of the timeline, the time length represented by each pixel is calculated, facilitating the subsequent calculation of pixel distances between positions. Using the time length represented by the slider and the time length represented by each pixel, the width occupied by the slider on the timeline is determined. The initial position of the slider is set according to the current time, and in response to a triggering operation to move the slider, it is controlled to remain moving on the timeline. After the slider finishes moving, its current position is determined, and the time corresponding to the slider's current position is updated based on the slider's current position and the start time of the timeline. By pre-configuring the time range represented by the timeline and the time length represented by the slider, and then moving the slider through corresponding operations, any time range on the timeline can be selected, and the slider position can be switched at any time to select different time ranges. This facilitates viewing data information within the corresponding time range. Furthermore, controlling the slider to remain on the timeline while sliding makes selecting a time range by moving the slider more intuitive and convenient. Attached Figure Description

[0011] To more clearly illustrate the technical solutions in the embodiments of this application, the drawings used in the description of the implementation or prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0012] Figure 1 This is a flowchart illustrating a method for dynamically selecting a time range based on time axis interaction, as provided in an embodiment of this application.

[0013] Figure 2 This is an example diagram of a method for dynamically selecting a time range based on time axis interaction, provided in an embodiment of this application;

[0014] Figure 3 This is an example diagram of another method for dynamically selecting a time range based on time axis interaction provided in an embodiment of this application;

[0015] Figure 4 This is a schematic diagram of the structure of a method and apparatus for dynamically selecting a time range based on time axis interaction, provided in an embodiment of this application.

[0016] Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0017] In the following description, specific details such as particular system architectures and techniques are set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application may also be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods have been omitted so as not to obscure the description of this application with unnecessary detail.

[0018] The terms "first," "second," etc., used in the specification and claims of this application are used to distinguish similar objects and not to describe a specific order or sequence. It should be understood that such use of data can be interchanged where appropriate so that embodiments of this application can be implemented in orders other than those illustrated or described herein, and the objects distinguished by "first," "second," etc., are generally of the same class and the number of objects is not limited; for example, a first object can be one or more. Furthermore, in the specification and claims, "and / or" indicates at least one of the connected objects, and the character " / " generally indicates that the preceding and following objects are in an "or" relationship.

[0019] Furthermore, it should be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0020] The following describes in detail, with reference to the accompanying drawings, a method and apparatus for dynamically selecting a time range based on time axis interaction according to embodiments of this application.

[0021] Figure 1 This is a flowchart illustrating a method for dynamically selecting a time range based on time axis interaction, as provided in an embodiment of this application. Figure 1 The method for dynamically selecting a time range based on timeline interaction can be executed by an application installed on the terminal. For example... Figure 1 As shown, this method for dynamically selecting a time range based on timeline interaction includes:

[0022] S101, Create the view component and the view container. The view container is used to encapsulate the components of the time selector, including the timeline and the slider.

[0023] Specifically, a view container is created to encapsulate the timeline and slider, which is used to manage the components of the time selector and handle specific elements and related logic.

[0024] S102, perform initialization loading operation on the view component, obtain the width of the time axis, and calculate the time length represented by each pixel based on the width of the time axis and the time range of the time axis.

[0025] Specifically, when initializing and loading a view component, a side effect operation can be performed to obtain the width of the timeline. After obtaining the width of the timeline, the time length represented by each pixel is calculated by dividing the time length of the timeline by the width of the timeline.

[0026] The length of the time axis is obtained by the time range of the time axis. For example, if the time range of the time axis is from midnight to midnight on a certain day, then the length of the time axis is 24 hours.

[0027] S103, using the time length represented by the slider and the time length represented by each pixel, determine the width occupied by the slider on the time axis.

[0028] Specifically, the width of the slider can be calculated by dividing the time length represented by the slider by the time length represented by each pixel.

[0029] S104: Set the initial position of the slider according to the current time, record the initial position of the slider in response to the operation that triggers the slider to move, and control the slider to move on the time axis during the displacement process.

[0030] Specifically, the operation that triggers the slider movement can be clicking on a position on the timeline or dragging the slider along the timeline; there are no restrictions here.

[0031] S105, after the slider displacement ends, determine the current position of the slider. Based on the start time of the time axis and the current position of the slider, determine the time corresponding to the left side of the slider. Based on the time corresponding to the left side of the slider and the width occupied by the slider on the time axis, determine the time corresponding to the right side of the slider.

[0032] According to the technical solution provided in the embodiments of this application, by creating a view component and a view container to encapsulate the timeline and slider, after initializing and loading the view component, the width of the timeline is obtained. Based on the width of the timeline and the time range of the timeline, the time length represented by each pixel is calculated, which facilitates the subsequent calculation of the pixel distance between each position. Using the time length represented by the slider and the time length represented by each pixel, the width occupied by the slider on the timeline is determined. The initial position of the slider is set according to the current time, and in response to the operation of triggering the slider movement, the slider is controlled to keep moving on the timeline. When the slider movement ends, the current position of the slider is determined, and the time corresponding to the current position of the slider is updated according to the current position of the slider and the start time of the timeline. In this way, by pre-configuring the time range represented by the timeline and the time length represented by the slider, and then moving the slider through the corresponding operation, any time range on the timeline can be selected and switched at any time, thereby viewing the data information of the corresponding time range. Furthermore, the slider is controlled to only slide on the timeline when sliding, making the selection of the time range more intuitive and convenient.

[0033] In some embodiments, setting the initial position of the slider according to the current time includes:

[0034] Calculate the difference between the current time and the start time of the time axis; if the difference is greater than or equal to the time length represented by the slider, calculate the pixel distance between the right side of the slider and the initial end of the time axis by dividing the difference by the time length represented by each pixel; if the difference is less than the time length represented by the slider, control the pixel distance between the left side of the slider and the initial end of the time axis to be zero.

[0035] Specifically, first create a view component and a view container. After performing the initial loading operation on the view component, configure the width of the timeline and the time range of the timeline. By dividing the time length represented by the timeline by the width of the timeline, you can get the time length represented by each pixel. The time length represented by each pixel is the time length corresponding to 1px.

[0036] Then, obtain the current time and calculate the difference between the current time and the start time of the time axis, which is the time interval between the current time and the start time. For example, if the current time is 03:00 and the start time is 00:00 on the same day, then the time interval between the current time and the start time is 3 hours (in the examples of this application, 24 hours of a certain day are used as the time length represented by the time axis, and 2 hours are used to represent the time length of the slider, but no limitation is made).

[0037] Furthermore, by dividing this time length by the time length represented by each pixel, the calculated value is the pixel distance between the right side of the slider and the initial end of the time axis. The initial position of the slider is then controlled based on the calculated pixel distance between the right side of the slider and the initial end of the time axis. In other words, the right side of the slider is aligned with the initial time position. For example, if the current time is 11:00, then the initial selected time range of the slider is 09:00-11:00.

[0038] Furthermore, if the time length between the current time and the start time of the time axis is less than the time length represented by the slider, then the pixel distance between the left side of the slider and the initial end of the time axis is zero. In other words, in this case, the left side of the slider is aligned with the initial end of the time axis. As an example, if the current time is 01:00, then the time selected by the initial position of the slider is 00:00-02:00.

[0039] Pixel distance refers to the distance between two points on the screen, measured in pixels.

[0040] Furthermore, the components in this embodiment can be developed based on the JavaScript Vue.js framework. As an example, before creating the view components, you can first create a file named timeRule.vue, then create a div element and other child elements, and use some directives, times, and attributes to implement interactive functions. You can define a div element with the class name timeRule using the following code:

[0041] <div class＝"timerule"ref＝"timerulewidth”@mousemove.self＝"mousemove"@mouseleave＝"isshowtips＝false"@click.self＝"$event＝>clickTime($event)">

[0042] <div v-if＝"isshowtips"class＝"mousetips"ref＝"mousetips"> {{nowTime}}

[0043] <div class＝"sider"ref＝"sider"@mouseenter.stop＝"siderenter"@mousedown.stop＝"move”@mouseleave＝"isshowtimerange＝false">

[0044] <div class＝"left circle"@mousedown.stop＝"">

[0045] <div class＝"right circle"@mousedown.stop＝"">

[0046] <div class＝"timerangebox mousetips"v-if＝"isshowtimerange"ref＝"timerangebox"> {{timeRange}}

[0047]

[0048]

[0049] In this example, <div class＝"timerule"> ... It serves as the container for the entire timeline component, containing subsequent timeline elements and related event handling. During view component initialization, the width of the `timeRuleWidth` element, which represents the width of the timeline, is first obtained. To avoid affecting the component's usability, the element's width is not set directly; instead, it is determined through the wrapper layer or a pop-up window allows the user to input the required timeline width. Then, based on the timeline width and the time range it represents, the duration represented by each pixel can be calculated.

[0050] After obtaining the current time and calculating the distance between the current time and the start time of the timeline, the offset of the left side of the slider is directly set using `this.$refs.sider.style.left` in Vue, which is the distance between the left side of the slider and the initial time of the timeline, so that the slider is positioned at the current time.

[0051] Furthermore, <div class＝"left circle"@mousedown.stop＝""><divclass="right circle"@mousedown.stop="">These two elements are the left and right drag points of the slider. Users can drag them to change the time range represented by the slider. In other words, after the initial position of the slider is determined, the length of time represented by the slider is not fixed. It can be adjusted by dragging the two ends of the slider. This also increases the space for users to select the time range. When different lengths of time range need to be selected, there is no need to re-enter or reload the view component.

[0052] According to the method of the above embodiment, the initial position of the slider can be determined by calculating the pixel distance between the initial time and the initial end of the time axis. If the distance between the initial time and the initial end of the time axis is greater than the width of the slider, the right side of the slider is aligned with the current time. If the distance is less than the width of the slider, the left side of the slider is aligned with the initial time of the time axis. This determines the initial position of the slider. After determining the initial position of the slider, the width of the slider can be adjusted by dragging the two ends of the slider, thereby adjusting the length of time to be selected. This increases the flexibility of time range selection.

[0053] In some embodiments, controlling the slider to move along the time axis during displacement includes:

[0054] When the slider moves to the left, if the pixel distance the slider moves is greater than the pixel distance between the initial position of the slider on the left and the initial end of the time axis, then the left side of the slider is aligned with the initial end of the time axis; when the slider moves to the right, if the pixel distance the slider moves is greater than the pixel distance between the initial position of the slider on the right and the end of the time axis, then the right side of the slider is aligned with the end of the time axis; at the same time, the vertical offset of the control block is zero during the slider displacement.

[0055] Specifically, to keep the slider moving along the time axis, we can obtain its initial position and its current position. By analyzing the direction and distance of movement, we can limit the slider's movement to the left or right to prevent it from exceeding either end of the time axis. In other words, if the slider moves to the right, the distance it moves cannot exceed the distance between its initial right position and the right end of the time axis. If the distance it moves exceeds the distance between the right side of its initial position and the right side of the time axis, then the right side of the slider must eventually align with the right end of the time axis. Similarly, if the slider moves to the left, the distance it moves cannot exceed the distance between its left side and the left end of the time axis.

[0056] Furthermore, as an example, during the control of slider movement, the `move` method in the `@mousedown.stop="move"` directive is used to prevent mouse (i.e., indicator) press events from bubbling. The `.stop` event modifier can be used to prevent this event bubbling. In the `move` method, the initial offset of the slider from the left end of the time axis is first obtained, and then compared with the left offset after the slide ends. When the slider's offset from the left end of the time axis is less than zero after the slide ends, it means the slider has slid off the time axis and onto the left side. In other words, the distance the slider moves to the left exceeds the pixel distance between the initial position of the slider's left side and the initial end of the time axis. At this point, the left offset of the slider needs to be forcibly set to zero, thus aligning the left side of the slider with the initial end of the time axis. Similarly, when the distance between the left side of the slider and the left end of the time axis is greater than the difference between the width of the time axis and the width of the slider after the slide ends, it means the distance the slider moves to the right exceeds the pixel distance between the initial position of the slider's right side and the end of the time axis. Therefore, the distance between the left side of the slider and the left end of the time axis is forcibly set to equal the difference between the width of the time axis and the width of the slider, thus aligning the right side of the slider with the end of the time axis.

[0057] In addition, to keep the slider moving on the time axis, the slider's vertical offset needs to be kept constant at zero.

[0058] According to the method provided in the above embodiments, the vertical offset of the slider is always zero during the movement of the slider. The distance moved to the left is not greater than the distance between the initial position of the slider and the initial end of the time axis, and the distance moved to the right is not greater than the distance between the initial position of the slider and the end of the time axis. In this way, the slider is controlled to move on the time axis.

[0059] In some embodiments, determining the current position of the slider after the slider displacement has ended includes:

[0060] In response to a click event on the timeline, obtain the click position of the indicator and align one side of the slider with the click position; if the pixel distance between the click position and the initial end of the timeline is less than the width of the slider, align the left side of the slider with the click position; if the pixel distance between the click position and the initial end of the timeline is greater than or equal to the width of the slider, align the right side of the slider with the click position.

[0061] Specifically, if a time range is selected by clicking the timeline using the indicator, if the distance between the clicked position and the initial end of the timeline is less than the width of the slider, the left side of the slider will be aligned with the clicked position; if it is greater than or equal to the width of the slider, the right side of the slider will be aligned with the clicked position. For example, when the indicator is clicked at 11:00, the right side of the slider is at 11:00 and the left side of the slider is at 09:00, so the selected time range is 09:00-11:00; when the indicator is clicked at 01:00, the selected time range is 00:00-02:00.

[0062] Furthermore, as an example, in the click event of the timeline, the directive `@click.self = "$event => clickTime($event)"` can be used to call the `clickTime` method when the click event occurs. The current indicator position is obtained through the event object `$event`. It is then determined whether the distance between the current position and the initial end of the timeline is greater than the width of the slider. If the distance between the current position of the indicator and the initial end of the timeline is greater than or equal to the width of the slider, the click position of the indicator is aligned with the right side of the slider. If the distance between the current position of the indicator and the initial end of the timeline is less than the width of the slider, the click position of the indicator is aligned with the left side of the slider.

[0063] The indicator can be a mouse, or it can be a touch feedback when not using a mouse; there are no restrictions here.

[0064] According to the solution provided in the above embodiments, the position of the slider can be updated by clicking, and the position of the slider can be controlled according to the position of the indicator click, which makes the selection of the time range more intuitive and convenient.

[0065] In some embodiments, the time corresponding to the left side of the slider is determined based on the start time of the timeline and the current position of the slider, and the time corresponding to the right side of the slider is determined based on the time corresponding to the left side of the slider and the width occupied by the slider on the timeline, including:

[0066] The time corresponding to the left side of the slider is calculated by multiplying the pixel distance between the left side of the slider and the initial end of the time axis by the time length represented by each pixel, and then adding the starting time of the time axis; the time corresponding to the right side of the slider is calculated by adding the time corresponding to the left side of the slider to the time length represented by the slider.

[0067] Specifically, after determining the current position of the slider, the pixel distance between the left side of the slider and the initial end of the time axis is multiplied by the time length represented by each pixel, and then the starting time of the time axis is added to calculate the time corresponding to the left side of the slider. The time corresponding to the left side of the slider is added to the time length represented by the slider to obtain the time corresponding to the right side of the slider. In this way, the time range represented by the current position of the slider can be updated.

[0068] Wherein, the time corresponding to the left side of the slider = the start time of the time axis + the distance between the left side of the slider and the initial end of the time axis multiplied by the time length represented by each pixel.

[0069] The time corresponding to the right side of the slider = the event corresponding to the left side of the slider + the time length represented by the slider.

[0070] In some embodiments, after performing an initial loading operation on the view component, the method further includes:

[0071] When the indicator moves onto the slider, a first bubble is displayed above the slider, which shows the time range represented by the slider's current position; when the indicator moves onto the time axis, a second bubble is displayed at the indicator's current position, which shows the time corresponding to the indicator's current position.

[0072] Specifically, taking a mouse as an example, when the mouse moves onto the slider, a first bubble is displayed above the slider, which encloses the time range represented by the slider. When the mouse moves onto the timeline, a second bubble is displayed above the timeline, which encloses the time corresponding to the current mouse position.

[0073] The widths of the first and second bubbles can change according to the corresponding time numbers. After obtaining the width of the first bubble, the distance between the left side of the slider and the left end of the time axis can be calculated by subtracting the width of the first bubble from the width of the slider and dividing by 2. This controls the first bubble to be directly above the slider.

[0074] Furthermore, as an example, the `siderEnter` method in the `@mouseenter.stop="siderEnter"` directive can be used to display the first bubble when the mouse moves over the slider; as another example, the `mousemove` method in `@mousemove.self="mousemove"` can be used to display the time corresponding to the current mouse position and show the second bubble when the mouse moves over the timeline. The `.self` modifier only triggers the click event when the element to which the click event is bound is the same as the currently clicked element. In addition, no specific restrictions are placed on the colors of the first and second bubbles.

[0075] The following is combined Figure 2 The first bubble in the embodiment of this application will be described as follows: Figure 2 As shown:

[0076] When the slider is on the timeline and the selected time is 08:15-10:15, placing the indicator anywhere on the slider will display the selected time range, 08:15-10:15, in a bubble above the slider.

[0077] The following is combined Figure 3 The second bubble in the embodiment of this application will be described as follows: Figure 3 As shown:

[0078] When the indicator is at 14:35 on the timeline, 14:35 will be displayed above the timeline as a bubble. This time represents 14:35 on August 26, 2023. If you click the slider at this time, it will move to the clicked position of the indicator. The specific position has been explained above and will not be repeated here.

[0079] According to the method of the above embodiments, the time range represented by the slider and the time represented by the current position of the indicator can be calculated by the position of the slider, the start time of the time axis and the position of the indicator, and the time range or time can be displayed. The time at the corresponding position can be seen by the movement of the indicator on the slider or the time axis. In this way, users can intuitively select the time range they need to view and meet the need to switch between different time ranges at any time.

[0080] In some embodiments, displaying a first bubble above the slider includes:

[0081] The pixel distances between the sides of the first bubble and the sides of the slider are calculated based on half the difference between the width of the slider and the width of the first bubble, and the first bubble is controlled to be located directly above the slider.

[0082] A second bubble is displayed at the current position of the indicator, including:

[0083] The time corresponding to the current position of the indicator is calculated by multiplying the pixel distance between the current position of the indicator and the initial end of the time axis by the time length represented by each pixel, and adding the start time of the time axis.

[0084] Specifically, if the indicator is located on the slider, the width of the first bubble can be subtracted from the width of the slider and then divided by two. The resulting value is then limited to the distance from the left side of the bubble to the initial end of the time axis. This allows the first bubble to be positioned directly above the midpoint of the slider, but no such restriction is applied here.

[0085] The width of the bubble can be determined based on the specific time data.

[0086] Furthermore, if the indicator is located on the timeline, the distance between the current position of the indicator and the initial end of the timeline can be multiplied by the time length represented by each pixel to obtain the time length represented between the current position of the indicator and the initial end of the timeline. Adding the starting time of the timeline, the time corresponding to the current position of the indicator can be calculated. Then, the time corresponding to the current position is displayed as a bubble directly above the timeline. However, there are no specific restrictions on the position of the bubble, meaning that the bubble can also be located directly below the timeline.

[0087] According to the method of the above embodiments, moving the indicator on the time axis allows you to directly view the corresponding time, and moving the indicator to the slider allows you to view the time range selected by the slider. This makes it more intuitive when you need to change the time range selected by the slider, and increases the convenience of using the dynamic selection of time range function.

[0088] All of the above-mentioned optional technical solutions can be combined in any way to form the optional embodiments of this application, and will not be described in detail here.

[0089] The following are embodiments of the apparatus described in this application, which can be used to execute the embodiments of the method described in this application. For details not disclosed in the apparatus embodiments of this application, please refer to the embodiments of the method described in this application.

[0090] Figure 4 This is a schematic diagram of a device for dynamically selecting a time range based on time axis interaction, provided in an embodiment of this application. Figure 4 As shown, the device for dynamically selecting a time range based on time axis interaction includes:

[0091] Module 401 is created and configured to create view components and view containers. The view containers are used to encapsulate the components of the time selector, which include the timeline and slider.

[0092] The calculation module 402 is configured to perform an initial loading operation on the view component, obtain the width of the time axis, and calculate the time length represented by each pixel based on the width of the time axis and the time range of the time axis.

[0093] The first determining module 403 is configured to determine the width occupied by the slider on the time axis using the time length represented by the slider and the time length represented by each pixel.

[0094] The control module 404 is configured to set the initial position of the slider according to the current time, record the initial position of the slider in response to the operation of triggering the slider to move, and control the slider to move on the time axis during the displacement process;

[0095] The second determining module 405 is configured to determine the current position of the slider after the slider displacement ends, determine the time corresponding to the left side of the slider based on the start time of the time axis and the current position of the slider, and determine the time corresponding to the right side of the slider based on the time corresponding to the left side of the slider and the width occupied by the slider on the time axis.

[0096] In some embodiments, the control module 404 is specifically used to calculate the difference between the current time and the start time of the time axis; if the difference is greater than or equal to the time length represented by the slider, the pixel distance between the left side of the slider and the initial end of the time axis is calculated by dividing the difference by the time length represented by each pixel; if the difference is less than the time length represented by the slider, the pixel distance between the left side of the slider and the initial end of the time axis is controlled to be zero.

[0097] In some embodiments, the control module 404 is specifically configured to, when the slider moves to the left, if the pixel distance the slider moves is greater than the pixel distance between the initial position of the left side of the slider and the initial end of the time axis, then control the left side of the slider to align with the initial end of the time axis; when the slider moves to the right, if the pixel distance the slider moves is greater than the pixel distance between the initial position of the right side of the slider and the end of the time axis, then control the right side of the slider to align with the end of the time axis; and simultaneously, during the slider displacement process, control the vertical offset of the slider to be zero.

[0098] In some embodiments, the second determining module 405 is specifically used to, in response to a click event on the timeline, obtain the click position of the indicator, align one side of the slider with the click position; if the pixel distance between the click position and the initial end of the timeline is less than the width of the slider, then align the left side of the slider with the click position; if the pixel distance between the click position and the initial end of the timeline is greater than or equal to the width of the slider, then align the right side of the slider with the click position.

[0099] In some embodiments, the second determining module 405 is specifically used to calculate the time corresponding to the left side of the slider by multiplying the pixel distance between the left side of the slider and the initial end of the time axis by the time length represented by each pixel, and adding the start time of the time axis; and to calculate the time corresponding to the right side of the slider by adding the time corresponding to the left side of the slider to the time length represented by the slider.

[0100] In some embodiments, the calculation module 402 is specifically configured to display a first bubble above the slider when the indicator moves onto the slider, the first bubble being used to display the time range represented by the current position of the slider; and to display a second bubble at the current position of the indicator when the indicator moves onto the time axis, the second bubble being used to display the time corresponding to the current position of the indicator.

[0101] In some embodiments, the calculation module 402 is specifically used to calculate the pixel distance between the two sides of the first bubble and the two sides of the slider based on half of the difference between the width of the slider and the width of the first bubble, and control the first bubble to be located directly above the slider; displaying the second bubble at the current position of the indicator includes: multiplying the pixel distance between the current position of the indicator and the initial end of the time axis by the time length represented by each pixel, and adding the start time of the time axis to calculate the time corresponding to the current position of the indicator.

[0102] It should be understood that the sequence number of each step in the above embodiments does not imply 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.

[0103] Figure 5 This is a schematic diagram of the electronic device 5 provided in an embodiment of this application. Figure 5 As shown, the electronic device 5 of this embodiment includes: a processor 501, a memory 502, and a computer program 503 stored in the memory 502 and executable on the processor 501. When the processor 501 executes the computer program 503, it implements the steps in the various method embodiments described above. Alternatively, when the processor 501 executes the computer program 503, it implements the functions of each module / unit in the various device embodiments described above.

[0104] Electronic device 5 can be a desktop computer, laptop, handheld computer, cloud server, or other electronic device. Electronic device 5 may include, but is not limited to, processor 501 and memory 502. Those skilled in the art will understand that... Figure 5 This is merely an example of electronic device 5 and does not constitute a limitation on electronic device 5. It may include more or fewer components than shown, or different components.

[0105] The processor 501 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc.

[0106] The memory 502 can be an internal storage unit of the electronic device 5, such as a hard disk or RAM of the electronic device 5. The memory 502 can also be an external storage device of the electronic device 5, such as a plug-in hard disk, Smart Media Card (SMC), Secure Digital (SD) card, Flash Card, etc., equipped on the electronic device 5. The memory 502 can also include both internal and external storage units of the electronic device 5. The memory 502 is used to store computer programs and other programs and data required by the electronic device.

[0107] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is merely an example. In practical applications, the above functions can be assigned to 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 embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0108] If integrated modules / units are implemented as software functional units and sold or used as independent products, they can be stored in a medium. Based on this understanding, all or part of the processes in the methods of the above embodiments can also be implemented by a computer program instructing related hardware. The computer program can be stored in a medium, and when executed by a processor, it can implement the steps of the various method embodiments described above. The computer program may include computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. The medium may include: any entity or device capable of carrying computer program code, recording media, USB flash drives, portable hard drives, magnetic disks, optical disks, computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signals, telecommunication signals, and software distribution media, etc.

[0109] The above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application, and should all be included within the protection scope of this application.

Claims

1. A method for dynamically selecting a time range based on timeline interaction, characterized in that, include: Create a view component and a view container, the view container being used to encapsulate the components of the time selector, including the timeline and the slider; Perform an initial loading operation on the view component, obtain the width of the time axis, and calculate the time length represented by each pixel based on the width of the time axis and the time range of the time axis. The width of the slider on the time axis is determined by using the time length represented by the slider and the time length represented by each pixel. The initial position of the slider is set according to the current time. In response to the operation that triggers the slider to move, the initial position of the slider is recorded, and the slider is controlled to move on the time axis during the displacement process. After the slider displacement is completed, the current position of the slider is determined. Based on the start time of the time axis and the current position of the slider, the time corresponding to the left side of the slider is determined. Based on the time corresponding to the left side of the slider and the width occupied by the slider on the time axis, the time corresponding to the right side of the slider is determined.

2. The method according to claim 1, characterized in that, Setting the initial position of the slider according to the current time includes: Calculate the difference between the current time and the start time of the time axis; If the difference is greater than or equal to the time length represented by the slider, then the pixel distance between the right side of the slider and the initial end of the time axis is calculated by dividing the difference by the time length represented by each pixel. If the difference is less than the time length represented by the slider, then the pixel distance between the left side of the slider and the initial end of the time axis is controlled to be zero.

3. The method according to claim 1, characterized in that, The step of controlling the slider to move along the time axis during displacement includes: When the slider moves to the left, if the pixel distance the slider moves is greater than the pixel distance between the initial position of the left side of the slider and the initial end of the time axis, then the left side of the slider is aligned with the initial end of the time axis. When the slider moves to the right, if the pixel distance the slider moves is greater than the pixel distance between the initial position of the right side of the slider and the end of the time axis, then the right side of the slider is aligned with the end of the time axis. Meanwhile, during the slider displacement process, the vertical offset of the slider is controlled to be zero.

4. The method of claim 1, wherein, Determining the current position of the slider after the slider displacement is completed includes: In response to a click event on the timeline, the click position of the indicator is obtained, and one side of the slider is aligned with the click position; If the pixel distance between the clicked position and the initial end of the time axis is less than the width of the slider, then align the left side of the slider with the clicked position; If the pixel distance between the clicked position and the initial end of the time axis is greater than or equal to the width of the slider, then the right side of the slider is aligned with the clicked position.

5. The method of claim 1, wherein, The step of determining the time corresponding to the left side of the slider based on the start time of the timeline and the current position of the slider, and determining the time corresponding to the right side of the slider based on the time corresponding to the left side of the slider and the width occupied by the slider on the timeline, includes: The time corresponding to the left side of the slider is calculated by multiplying the pixel distance between the left side of the slider and the initial end of the time axis by the time length represented by each pixel, and adding the start time of the time axis. The time corresponding to the right side of the slider is calculated by adding the time length represented by the slider to the time corresponding to the left side of the slider.

6. The method of claim 1, wherein, After performing the initialization loading operation on the view component, the method further includes: When the indicator moves onto the slider, a first bubble is displayed above the slider, the first bubble being used to show the time range represented by the current position of the slider; When the indicator moves onto the timeline, a second bubble is displayed at the indicator's current position, and the second bubble is used to show the time corresponding to the indicator's current position.

7. The method of claim 6, wherein, The display of the first bubble above the slider includes: The pixel distances between the sides of the first bubble and the sides of the slider are calculated based on half the difference between the width of the slider and the width of the first bubble, and the first bubble is controlled to be located directly above the slider. Displaying a second bubble at the current position of the indicator includes: The time corresponding to the current position of the indicator is calculated by multiplying the pixel distance between the current position of the indicator and the initial end of the time axis by the time length represented by each pixel, and adding the start time of the time axis.

8. A device for dynamically selecting a time range based on time axis interaction, characterized in that, include: A creation module is configured to create view components and a view container, the view container being used to encapsulate the components of a time selector, including a timeline and a slider. The calculation module is configured to perform an initialization loading operation on the view component, obtain the width of the time axis, and calculate the time length represented by each pixel based on the width of the time axis and the time range of the time axis. The first determining module is configured to determine the width occupied by the slider on the time axis using the time length represented by the slider and the time length represented by each pixel. The control module is configured to set the initial position of the slider according to the current time, record the initial position of the slider in response to the operation of triggering the slider to move, and control the slider to move on the time axis during the displacement process; The second determining module is configured to determine the current position of the slider after the slider displacement ends, determine the time corresponding to the left side of the slider based on the start time of the time axis and the current position of the slider, and determine the time corresponding to the right side of the slider based on the time corresponding to the left side of the slider and the width occupied by the slider on the time axis.

9. An electronic 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 steps of the method as described in any one of claims 1 to 7.

10. A medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method as described in any one of claims 1 to 7.

Images