TW201511540A - Apparatus and method of showing progress bar - Google Patents

Abstract

A method of showing a progress bar of, the method includes steps of: receiving a command to drag and drop a slider on the progress bar, wherein the command includes a positional information of the slider on the progress bar after dragging and dropping; defining a first area of the progress bar by getting the positional information; loading a first shielding layer, which is defined by a customized picture, on the first area. At least one end of the slider is covered by the first area so that it would be more clearly to show the information of progress and make a more convenient and intuitive operation. It improves operational efficiency and saves power while using a mobile terminal.

Description

Display method of progress indicator column and related device

The present invention relates to a display method and related apparatus for a progress indicator column, and more particularly to a display method and related apparatus for a progress indicator column of a mobile terminal device.

In mobile terminals such as smart phones or tablets, audio and video files can be played through movies or music players, which brings convenience to users. Especially with the development of wireless communication technology, more and more users can enjoy online. Get audio and video files for easy access to information anytime, anywhere.

When using the mobile terminal to obtain the audio and video files, it is often necessary to use the drag and drop control and the progress display control. The drag and drop control is used to adjust the display of the current playback progress and the new playback progress, and the progress display control is used to display the file through the network line. The progress of the download, or distinguish between different areas on the progress bar.

However, the progress display control generally includes a data buffer area and a data unbuffered area. The drag and drop control generally includes a progress column and a drag and drop slider. Since the progress display control and the drag and drop control are used independently in the prior art, there is no same progress. The column has both a progress display function and a drag and drop function, especially when the color of the drag and drop slider is similar to the color of the progress bar, and the display is not easy to be clearly displayed. The current progress information, the user operation of the drag and drop slider is not intuitive enough, and in the case of low operating efficiency, it is easy to cause an increase in power consumption during the operation of the mobile terminal.

An object of the present invention is to provide a method for implementing a progress indicator column with a buffer mask, so as to solve the problem that the current progress information cannot be clearly displayed in the prior art, thereby making the display of the drag and drop slider more intuitive and improving the operation efficiency. At the same time, it can also reduce the power consumption during the operation of the mobile terminal.

In an embodiment of the present invention, a method for displaying a progress indicator column, the method comprising: receiving a drag and drop instruction of a drag and drop slider on a progress indicator column, where the drag and drop instruction comprises dragging and dropping a slider after moving Position information on the progress indication column; obtaining position information on the progress indication column after the drag and drop slider is moved, defining a range of the first progress indication column area; loading the first progress indication column area by Define the first mask layer that the picture is composed of.

In another implementation of the present invention, a display device for a progress indicator column, the device includes: a first receiving unit, configured to receive a drag and drop instruction of a drag and drop slider on a progress indicator column, the drag and drop instruction includes The position information on the progress indicator column after the drag and drop slider is moved; the obtaining unit is configured to obtain position information on the progress indicator column after the drag and drop slider moves, and define a range of the first progress indicator column area; And a loading unit, configured to load, in the first progress indicator column area, a first mask layer composed of a custom picture.

In an embodiment of the present invention, by receiving a drag and drop instruction of the drag and drop slider on the progress indicator column, the position information on the progress indicator column after the drag and drop slider is moved is obtained, and the range of the first progress indicator column area is defined. And in the The first progress indicator column area loads the first mask layer composed of the custom picture, so that at least one end of the drag and drop slider is covered with a mask layer composed of a custom picture, thereby more clearly displaying the current progress information, so that the user The operation is more convenient and intuitive, and the operation efficiency is improved, and the power consumption during the operation of the mobile terminal can also be saved.

The above and other objects, features and advantages of the present invention will become more <RTIgt;

S101~S103‧‧‧Steps

S201~S205‧‧‧Steps

S301~S305‧‧‧Steps

D‧‧‧ total length

D1‧‧‧distance length

D2‧‧‧distance length

D3‧‧‧Drop radius or half width of the slider

X1‧‧‧ starting position coordinates

X2‧‧‧ Drag and drop slider position coordinates

X3‧‧‧end position coordinates

X2'‧‧‧first position coordinates

X2"‧‧‧second position coordinates

401‧‧‧First receiving unit

402‧‧‧Acquisition unit

403‧‧‧First loading unit

404‧‧‧Determining unit

405‧‧‧Second loading unit

406‧‧‧second receiving unit

407‧‧‧ third loading unit

510‧‧‧radio frequency circuit

520‧‧‧ memory

530‧‧‧Input unit

540‧‧‧Display unit

550‧‧‧ sensor

560‧‧‧Audio circuit

570‧‧‧Wireless Compatibility Certification Module

580‧‧‧ processor

1 is a flow chart showing a display method of a progress indicator column according to a first embodiment of the present invention; FIG. 1a is a schematic diagram of a first progress indicator column area of a progress indicator column according to a first embodiment of the present invention; 2 is a schematic diagram of a display method of a progress indicator column of the second embodiment; FIG. 2a is a schematic diagram of a second progress indicator column area of the progress indicator column of the second embodiment of the present invention; FIG. 3 is a progress of the third embodiment of the present invention; FIG. 3 is a schematic diagram of a progress indicator column of a third embodiment of the present invention; FIG. 4 is a schematic structural diagram of a display device of a progress indicator column according to a fourth embodiment of the present invention; A partial structural diagram of a mobile terminal of a fifth embodiment of the invention.

The above and other technical contents, features and advantages of the present invention will be apparent from the following detailed description of the preferred embodiments. The directional terms mentioned in the following embodiments, such as up, down, left, right, front or back, etc., are only directions referring to the additional drawings. Therefore, the directional terminology used is for the purpose of illustration and not limitation.

The present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It is understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

The progress indication column described in the embodiment of the invention has the functions of drag and drop function and buffering data, and combines the functions of the progress display control and the drag and drop control. It can be used in various software or applications in the computer application that need to adjust the progress. It can also be applied to the application software or program in each mobile terminal. By obtaining the mask layer length and calling the custom image in the mask layer, The current progress of the progress indicator column can be more clearly displayed to improve operational efficiency. The method mainly includes the following steps: receiving a drag and drop instruction of the drag and drop slider on the progress indicator column, where the drag and drop instruction includes position information on the progress indicator column after the drag and drop slider moves; acquiring the drag and drop slider movement Then, the location information on the progress indicator column defines a range of the first progress indicator column area; and the first mask layer composed of a custom picture is loaded in the first progress indicator column area.

Referring to FIG. 1 , a flow of a display method of a progress indicator column according to a first embodiment of the present invention is as follows. In step S101 , a drag and drop instruction of a drag and drop slider on a progress indicator column is received, and the drag and drop instruction is used. Including the progress of the drag and drop slider after moving Location information on the column.

The drag and drop instruction may be a drag and drop operation instruction of the mouse, or may be a touch drag and drop instruction. The drag and drop instruction includes receiving a left click or a touch click command on the drag and drop slider, a long press after the click command, and releasing the left mouse button or leaving the touch after the position change Command to control the screen.

The drag and drop slider is used to display parameter information represented by the current progress indicator column on the progress indicator column, and the parameter information may be volume information, play sound file or video file progress information, etc., specifically, for example, Used to display volume information, the entire length of the progress indicator column represents the maximum value of the volume, and the position of the drag indicator in the progress indicator column as a percentage of the length of the entire progress indicator column, that is, the volume corresponding to the current drag and drop slider, such as the volume The maximum value is a, the current drag and drop slider is located at 45% of the progress indicator column, then the corresponding volume is 45a/100.

The position information on the progress indicator column after the drag and drop slider included in the drag and drop slider is moved, and the position indication information of the drag and drop slider can be represented by the coordinate of the X axis for the progress indication column of the horizontal position setting. For the progress indicator column of the vertical position setting, the position information of the drag and drop slider can be represented by the coordinate of the Y axis, and the progress indication column set for the relatively rare non-horizontal or vertical position can be represented by (x, y) The position information of the slider is dragged and dropped, and the embodiment and the following embodiments are described in the progress indicator column of the common horizontal position, and other methods may be analogized.

In step S102, the position information on the progress indicator column after the drag and drop slider is moved is acquired, and the range of the first progress indicator column area is defined.

Where, get the bit on the progress indicator column after the drag and drop slider moves Set the information and define the range of the first progress indicator column area, that is, the drag indicator will divide the progress indicator column into two parts. The first progress indicator column area can be the drag indicator of the progress indicator column to the progress. This section of the starting position that indicates the column can also be the drag-and-drop slider of the progress indicator column to the end of the progress indicator column.

As shown in FIG. 1a, the total length of the current progress indicator column is D, the starting point position coordinate of the progress indicator column is x1, the position coordinate of the drag and drop slider on the progress indicator column is x2, and the end position coordinate x3. Then the first progress indicator column area may be the area between the coordinate x1 of the starting point position and the position coordinate x2 of the drag and drop slider, the length is d1, or the position coordinate x2 of the position of the drag and drop slider x2 to the end point coordinates x3 This area is composed of d2, and the position of the first progress indication column area can be flexibly set according to the custom picture loaded in step S103.

In step S103, a first mask layer composed of a custom picture is loaded in the first progress indication column area.

A mask layer is loaded in the first progress indication column area acquired by step S102, and the graphic on the mask layer can select a customized picture in the picture library.

Wherein, the customized picture tries to select a picture with different color, contrast or brightness of the picture of the progress indicator column to form a better contrast, and more clearly shows the interval contrast effect of the progress indicator column on both sides of the slider.

In the embodiment of the present invention, by receiving a drag and drop instruction of the drag and drop slider on the progress indicator column, the position information on the progress indicator column after the slider is moved is obtained, and the range of the first progress indicator column area is defined, and the first The progress indicator column area loads the first mask layer composed of a custom picture, so that the drag and drop slide At least one end of the block is covered with a mask layer composed of a custom picture, so that the current progress information is more clearly displayed, so that the user operation is more convenient and intuitive, and the operation efficiency is improved, and the power consumption during the operation of the mobile terminal can also be saved.

Referring to FIG. 2, a flow of a display method of a progress indicator column according to a second embodiment of the present invention is as follows: In step S201, a drag-and-drop instruction of a drag-and-drop slider on a progress indicator column is received, and the drag-and-drop instruction This includes the position information on the progress indicator column after the drag and drop slider is moved and the position information on the progress indicator column before the slider moves.

Different from the first embodiment, the drag and drop instruction further includes position information on the progress indication column before the slider moves.

In step S202, position information on the progress indicator column after the drag and drop slider is moved is acquired, and a range of the first progress indication column area is defined.

In step S203, a first mask layer composed of a custom picture is loaded in the first progress indication column area.

In step S204, the range of the second progress indication column area is defined according to the position information on the progress indication column before the slider moves and the position information on the progress indication column after the slider moves.

Specifically, before the drag and drop slider moves, the initial position information of the drag and drop slider on the progress indicator column is recorded, and after the drag and drop slider moves, the second position where the slider stops is recorded after the movement is recorded. The information, the interval from the first position information to the end of the second position information, is defined as a second progress indication column area.

As shown in FIG. 2a, the position of the starting point of the entire progress indicator column is x1, the first position coordinate x2' of the drag and drop slider before the movement is moved, and the coordinate of the second position information of the drag and drop slider after the movement is x2" Therefore, the second progress indicator column area may be: a coordinate x2' as a starting point and a coordinate x2" as an end point. The interval through which this slide passes.

In step S205, a second mask layer composed of a custom picture is loaded in the second progress indicator column area, and the second mask layer is displayed differently from the first mask layer.

The second progress indicator column area defined by step S204 loads a second mask layer composed of a custom picture, wherein the custom picture can be searched according to a predefined picture library.

The second mask layer is different from the first mask layer and can be displayed in the following two ways: 1. The first mask layer and the second mask layer are located on the same layer of the progress indicator column. Different regions; 2. The first mask layer and the second mask layer have overlapping portions, and the mask layer located in the upper layer has transparency.

In the first implementation manner, the first mask layer and the second mask layer may be in the same plane and occupy different positions respectively. For example, the first mask layer may be located in the upper part of the progress indicator column. The second mask layer is located in the lower half of the progress indicator column. This way, the difference display can be realized.

In the second implementation, two mask layers can be set as two layers, and the mask layer on the upper layer can be set to a certain transparency, such as 50% transparency, so that the underlying mask layer can also be displayed. Its color.

In the case of more mask layers, you can divide the progress indicator column into multiple parts, or set the mask layer to different transparency, and set the transparency of the top layer of the mask layer to the highest, which is convenient for display. .

The embodiment of the present invention is different from the first embodiment in that the position information before the movement of the slider and the position information after the movement are recorded, and the second progress indicator column area located in the sliding section is displayed by the second mask layer. Can be obtained The display of the sliding distance of the progress indicator column makes the display of the current sliding distance more intuitive.

Referring to FIG. 3, a flow of a display method of a progress indicator column according to a third embodiment of the present invention is as follows. In step S301, a drag and drop instruction of a drag and drop slider on a progress indicator column is received, and the drag and drop instruction is performed. The command includes the position information on the progress indicator column after the drag and drop slider is moved.

In step S302, position information on the progress indicator column after the drag and drop slider is moved is acquired, and a range of the first progress indication column area is defined.

The defining the range of the first progress indicator column area may include the following steps: as shown in FIG. 3a, the total length of the progress indication column is D, the coordinate of the starting position of the progress indication column is x1, and the drag and drop slider is moved. The position coordinate is x2, the coordinate of the end position of the progress indication column is x3, the distance between the coordinate x1 to the coordinate x2 is d1, the distance between the coordinate x2 to the coordinate x3 is d2, and the radius or half of the slider is dragged and dropped. The width is d3, then, when d1<D-x3 and d1>d3, the first progress indication column area is an interval of length d1-d3 from the coordinate x1 to the coordinate x2.

When d1>D-d3, the length of the first progress indication column area is D-d3, and when d1<d3, the length of the first progress indication column area is d3, wherein when d1 is equal to D-d3, The first progress indication column area length is d1-d3, or when d1 is equal to d3, the first progress indication column area length is d3.

By setting the slider radius length or the half-width buffer area at both ends of the progress indicator column, the slider can be prevented from moving beyond the progress indicator column, thereby effectively displaying the slider on the progress indicator column to prevent slipping out. Progress indicator column.

The method of obtaining the first progress indication column area in this step can also be applied to the first embodiment and the second embodiment.

In step S303, a first mask layer composed of a custom picture is loaded in the first progress indication column area.

In step S304, data buffer information for the progress indication column is received.

In step S305, a third mask layer composed of a custom picture is loaded on the position coordinate of the length of the corresponding proportion of the progress indicator column according to the ratio value of the data buffer information occupying the overall progress indication column data.

The data buffer information used in the progress indicator column refers to a parameter represented or displayed corresponding to the progress indicator column, for example, for a sound file or a video file that is listened to online, when playing a file, it needs to buffer. In order to display the current buffered progress information, a third mask layer composed of a custom picture is set on the current progress indicator column, and the length of the third mask layer is determined according to the length of the entire progress indicator column and the buffer ratio of the data. That is, the product of the length of the entire progress indicator column and the buffer ratio is the length of the third mask layer.

The third mask layer may also be provided as a picture having transparency for displaying a plurality of mask layers on different levels so that a plurality of mask layers can be simultaneously displayed.

In addition, in the present invention, the custom picture is loaded by a padding mode or a compression mode. Similarly, the image loading mode is also applicable to the first and second embodiments.

In the third embodiment of the present invention, the third mask layer displayed by the custom picture is displayed by the received buffer data, thereby more intelligently displaying the progress of the plurality of data, and improving the convenience of the use of the progress indicator column.

Referring to FIG. 4, a schematic structural diagram of a display device of a progress indicator column according to a fourth embodiment of the present invention is as follows: The display device of the progress indicator column according to the embodiment of the present invention includes: a first receiving unit 401, configured to: Receiving a drag and drop instruction of the drag and drop slider on the progress indicator column, the drag and drop instruction includes position information on the progress indicator column after the drag and drop slider moves; the obtaining unit 402 is configured to acquire the drag and drop slider movement Then, the location information on the progress indicator column defines a range of the first progress indicator column area; the first loading unit 403 is configured to load the first mask layer composed of the custom picture in the first progress indicator column area. In an optional manner of the embodiment of the present invention, the drag and drop instruction further includes location information on the progress indicator column before the slider moves, and the device further includes: a determining unit 404. a second progress indicator column area defined according to the position information on the progress indicator column before the slider is moved and the position information on the progress indicator column after the slider is moved; the second loading unit 405 is used Loading a second mask layer composed of a custom picture in the second progress indicator column area, the second mask layer being displayed differently from the first mask layer. Wherein the first mask layer and the second mask layer are located in two different regions of the same layer of the progress indicator column or the first mask layer and the second mask layer have overlapping portions, and the upper mask layer The cover layer has transparency.

In order to further improve the data information displayed by the device, the device further includes: a second receiving unit 406, configured to receive data buffering information on the progress indicator column; and a third loading unit 407, configured to buffer the information according to the data The overall progress indicates the scale value of the column data, and the third mask layer composed of the custom picture is loaded on the length of the corresponding scale on the progress indicator column.

The obtaining unit 402 is specifically configured to: the total length of the progress indication column is D, and the progress indicator column starts from The coordinate of the point position is x1, the coordinate of the position after the drag and drop slider is moved to x2, the coordinate of the end position of the progress indication column is x3, the distance between the coordinate x2 to the coordinate of the coordinate x1 is d1, and the coordinate between the coordinate x3 and the coordinate x2 The distance of the distance is d2, and the radius or half width of the drag and drop slider is d3. Then, when d1<D-d3 and d1>d3, the first progress indication column area is from the coordinate x1 to the coordinate x2. The length is the interval of d1; when d1>D-d3, the length of the first progress indication column area is D-d3, and when d1<d3, the length of the first progress indication column area is d3.

The above custom images are loaded by padding or compression.

The apparatus corresponding to the methods described in the first, second, and third embodiments in the fourth embodiment of the present invention will not be repeatedly described herein.

Referring to FIG. 5, a partial structural diagram of a mobile terminal related to a mobile terminal according to a fifth embodiment of the present invention is shown. The mobile phone includes: a radio frequency (RF) circuit 510, a memory 520, an input unit 530, a display unit 540, a sensor 550, an audio circuit 560, and a wireless fidelity (WiFi) module 570. Processor 580, and components such as power supply 590. It will be understood by those skilled in the art that the structure of the handset shown in FIG. 5 does not constitute a limitation to the handset, and may include more or less components than those illustrated, or some components may be combined, or different components may be arranged.

The components of the mobile phone are specifically described below with reference to FIG. 5. The radio frequency circuit 510 can be used for receiving and transmitting signals during the transmission or reception of information or during a call. In particular, after receiving the downlink information of the base station, the processor 580 is received. Processing; in addition, the design of the uplink data is sent to the base station. Generally, radio frequency circuits include, but are not limited to, an antenna, at least one amplifier, a transceiver, a coupler, and a low noise amplifier (Low Noise Amplifier, LNA), duplexer, etc. In addition, the radio frequency circuit 510 can also communicate with the network and other devices via wireless communication. The above wireless communication may use any communication standard or protocol, including but not limited to Global System of Mobile communication (GSM), General Packet Radio Service (GPRS), and code division multiplexing (Code Division). Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Long Term Evolution (LTE), e-mail, Short Messaging Service (SMS), and the like.

The memory 520 can be used to store software programs and modules. The processor 580 executes various software applications and data processing of the mobile phone by running software programs and modules stored in the memory 520. The memory 520 may mainly include a pre-stored program area and a data temporary storage area, wherein the pre-stored program area may store an operating system, an application required for at least one function (such as a sound playing function, an image playing function, etc.); The area can store data created according to the use of the mobile phone (such as audio data, telephone address book, etc.). In addition, the memory 520 may include high speed random access memory, and may also include non-volatile memory such as at least one disk memory, flash memory, or other volatile solid state memory.

The input unit 530 can be configured to receive input numeric or character information and to generate key signal inputs related to user settings and function control of the handset 500. Specifically, the input unit 530 may include a touch panel 531 and other input devices 532. The touch panel 531, also referred to as a touch screen, can collect touch operations on or near the user (for example, the user uses any suitable object or accessory such as a finger or a stylus on the touch panel 531 or touches Operation near the panel 531), and driving the corresponding connection according to a preset program Set. Optionally, the touch panel 531 can include two parts: a touch detection device and a touch controller. The touch detection device detects the touch orientation of the user, detects the signal brought by the touch operation, and transmits the signal to the touch controller; the touch controller receives the touch information from the touch detection device, and converts the touch information. The contact coordinates are sent to the processor 580 and can receive commands from the processor 580 and execute them. In addition, the touch panel 531 can be implemented in various types such as resistive, capacitive, infrared, and surface acoustic waves. In addition to the touch panel 531, the input unit 530 may also include other input devices 532. Specifically, other input devices 532 may include, but are not limited to, one or more of a physical keyboard, function keys (such as volume control buttons, switch buttons, etc.), trackballs, mice, joysticks, and the like.

The display unit 540 can be used to display information input by the user or information provided to the user as well as various menus of the mobile phone. The display unit 540 can include a display panel 541. Alternatively, the display panel 541 can be configured in the form of a liquid crystal display (LCD), an organic light-emitting diode (OLED), or the like. Further, the touch panel 531 can cover the display panel 541. When the touch panel 531 detects a touch operation on or near the touch panel 531, the touch panel 531 transmits the touch operation to the processor 580 to determine the type of the touch event. The type of event control provides a corresponding visual output on display panel 541. Although the touch panel 531 and the display panel 541 are used as two independent components to implement the input and input functions of the mobile phone in FIG. 5, in some embodiments, the touch panel 531 and the display panel 541 may be integrated. Realize the input and output functions of the phone.

The handset 500 can also include at least one type of sensor 550, such as a light sensor, motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor and a proximity sensor, wherein the ambient light sensor can adjust the brightness of the display panel 541 according to the brightness of the ambient light, and the proximity sensor The display panel 541 and/or backlight can be turned off when the phone is moved to the ear. As a kind of motion sensor, the accelerometer sensor can detect the acceleration of each direction (usually three axes). When it is stationary, it can detect the magnitude and direction of gravity. It can be used to identify the gesture of the mobile phone (such as screen rotation, related games, Magnetometer attitude calibration), vibration recognition related functions (such as pedometer, tapping), etc.; other sensors such as gyroscopes, barometers, hygrometers, thermometers, infrared sensors, etc., which can be configured on the mobile phone, will not be described here.

Audio circuit 560, speaker 561, and microphone 562 provide audio transfer between the user and the handset. The audio circuit 560 can transmit the converted electrical data of the received audio data to the speaker 561, and convert it into a sound signal output by the speaker 561. On the other hand, the microphone 562 converts the collected sound signal into an electrical signal, and the audio circuit 560 is used by the audio circuit 560. After receiving, it is converted into audio data, and then processed by the audio data output processor 580, sent to the other mobile phone via the radio frequency circuit 510, or outputted to the memory 520 for further processing.

WiFi is a short-range wireless transmission technology, and the mobile phone through the wireless compatibility authentication module 570 can help users to send and receive emails, browse web pages and access streaming media, etc., which provides users with wireless broadband access. Although FIG. 5 shows the wireless compatibility authentication module 570, it can be understood that it does not belong to the essential configuration of the mobile phone 500, and may be omitted as needed within the scope of not changing the essence of the invention.

The processor 580 is a control center of the mobile phone, and connects various parts of the entire mobile phone by using various adapters and lines, by running or executing software programs and/or modules stored in the memory 520, and calling and storing in the memory 520. Data, perform various functions of the mobile phone and process data to monitor the mobile phone as a whole. Processor 580 can include one or more processing units; processing The processor 580 can also integrate an application processor and a modulation and demodulation processor, wherein the application processor mainly processes an operating system, a user interface, an application, etc., and the modulation and demodulation processor mainly processes wireless communication. It will be appreciated that the above described modulation and demodulation processor may also not be integrated into the processor 580.

The handset 500 also includes a power source 590 (such as a battery) that powers the various components. The power source can be logically coupled to the processor 580 through a power management system to manage functions such as charging, discharging, and power management through the power management system.

Although not shown, the mobile phone 500 may further include a photographic lens, a Bluetooth module, and the like, and details are not described herein.

In the embodiment of the present invention, the processor 580 included in the terminal further has the following functions: a method for implementing a progress indication column, comprising: receiving a drag and drop instruction of a drag and drop slider on a progress indicator column, and the drag and drop instruction Include position information on the progress indicator column after the drag and drop slider moves; obtain position information on the progress indicator column after the drag and drop slider moves, and define a range of the first progress indicator column area; Indicates that the column area loads the first mask layer that consists of a custom picture.

It should be noted that the various embodiments in the present specification are described in a progressive manner, and each embodiment focuses on differences from other embodiments, and the same similar parts between the various embodiments may be referred to each other. For the system or device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part.

It should also be noted that, in this context, relational terms such as first and second, etc. are used merely to distinguish one entity or operation from another entity or operation, without necessarily requiring or implying such entities or operations. It There is any such actual relationship or order between them. Furthermore, the term "comprises" or "comprises" or "comprises" or any other variations thereof is intended to encompass a non-exclusive inclusion, such that a process, method, article, or device that comprises a plurality of elements includes not only those elements but also Other elements, or elements that are inherent to such a process, method, item, or device. An element that is defined by the phrase "comprising a ..." does not exclude the presence of additional equivalent elements in the process, method, item, or device that comprises the element.

While the present invention has been described in its preferred embodiments, the present invention is not intended to limit the invention, and the present invention may be modified and modified without departing from the spirit and scope of the invention. The scope of protection is subject to the definition of the scope of the patent application. In addition, any of the objects or advantages or features of the present invention are not required to be achieved by any embodiment or application of the invention. In addition, the abstract sections and headings are only used to assist in the search of patent files and are not intended to limit the scope of the invention.

S101~S103‧‧‧Steps

Claims (18)

A method for displaying a progress indicator column, the method comprising: receiving a drag and drop instruction of a drag and drop slider on a progress indicator column, where the drag and drop instruction includes position information on a progress indicator column after the drag and drop slider moves; The position information on the progress indicator column after the drag and drop slider moves, defines a range of the first progress indicator column area; and loads the first mask layer composed of the custom picture in the first progress indicator column area. The method of claim 1, wherein the drag and drop instruction further includes position information on the progress indicator column before the slider moves. The method of claim 2, after the obtaining the position information on the progress indicator column after the movement of the drag and drop slider and the position information on the progress indicator column before the slider moves, the steps include: a second progress indicator column area determined by the position information on the progress indicator column before the slider is moved and the position information on the progress indicator column after the slider is moved; and the second progress indicator column area is loaded by the custom picture a second mask layer, the second mask layer being displayed differently from the first mask layer. The method of claim 3, wherein the first mask layer and the second mask layer are located in two different regions of the same layer of the progress indicator column. The method of claim 3, wherein the first mask layer and the second mask layer have overlapping portions, and the mask layer in the upper layer has transparency. The method of claim 1, after the loading of the first mask layer composed of the custom picture in the first progress indication column area, comprising: receiving data information for buffering on the progress indication column And loading a third mask layer composed of a custom picture on the length of the corresponding proportion on the progress indicator column according to the ratio of the data information to the entire data. The method of claim 1, wherein the total length of the progress indicator column is D, the coordinate of the starting position of the progress indicator column is x1, and the position coordinate of the drag and drop slider after moving is x2, the progress indicator column The end position coordinates are x3, the distance between coordinates x1 to coordinates x2 is d1, the distance between coordinates x2 to coordinates x3 is d2, and the width of drag and drop slider is d3; where, when d1<D-d3 And when d1>d3, the length of the first progress indication column area is d1-d3; when d1>D-d3, the length of the first progress indication column area is D-x3, when d1<dx3, The first progress indication column area has a length of d3. The method of claim 1, wherein the custom picture is loaded by padding or compression. The method of claim 3, wherein the custom picture is loaded by padding or compression. A display device for a progress indicator column, the device comprising: a first receiving unit, configured to receive a drag and drop instruction of a drag and drop slider on a progress indicator column, wherein the drag and drop instruction includes a progress indicator after the drag and drop slider moves Position information on the column; the obtaining unit is configured to obtain position information on the progress indicator column after the drag and drop slider moves, and define a range of the first progress indicator column area; the first loading unit is configured to be in the A progress indicator column area loads the first mask layer composed of custom pictures. The device of claim 10, wherein the drag and drop instruction further comprises position information on the progress indicator column before the slider moves. The device of claim 11, further comprising: a determining unit, configured to define position information on the progress indicator column before the slider moves and position information on the progress indicator column after the slider moves a second progress indicator indicating a range of the column area; a second loading unit, configured to load, in the second progress indicator column region, a second mask layer composed of a custom picture, the second mask layer and the first mask layer The layer difference is displayed. The device of claim 10, wherein the first mask layer and the second mask layer are located on the same layer of the progress indicator column. Same area. The device of claim 10, wherein the first mask layer and the second mask layer have overlapping portions, and the mask layer at the upper layer has transparency. The device of claim 10, further comprising: a second receiving unit, configured to receive data buffering information on the progress indicator column; and a third loading unit, configured to occupy an overall progress according to the data information A scale value indicating column data is loaded with a third mask layer composed of a custom picture on a length of a corresponding scale on the progress indicator column. The device of claim 10, wherein the total length of the progress indicator column is D, the coordinate of the starting position of the progress indicator column is x1, and the position coordinate of the drag and drop slider after moving is x2, the progress indicator column The coordinates of the end position are x3, the distance between the coordinates x1 and x2 is d1, the distance between coordinates x2 and x3 is d2, and the width of the drag slider is d3. Then, when d1<D -d3 and d1>d3, the length of the first progress indication column is d1-d3; when d1>D-d3, the length of the first progress indication column area is D-d3, when d1<d3 The first progress indication column area has a length of d3. The device of claim 10, wherein the custom picture is loaded by padding or compression. The device of claim 12, wherein the custom picture is loaded by padding or compression.