Arc-shaped progress bar generation method and device, arc-shaped progress bar display method and device, electronic equipment and storage medium

Abstract

The invention relates to the technical field of electronic equipment, and discloses an arc-shaped progress bar generation and display method and device, electronic equipment and a storage medium, and the method comprises the steps: obtaining a target parameter of the electronic equipment at a current moment; determining a ratio of the target parameter to a preset value; if the ratio is smaller than 100%, the angle value is determined; segmenting a first circular ring slice in a preset first picture to obtain a target circular ring slice; setting other areas except the target circular ring slice in the first picture to be in a transparent state to obtain an updated first picture; dividing a second circular ring slice in a preset second picture into a target area; setting other areas except the target area in the second picture to be in a transparent state to obtain an updated second picture; and displaying the updated first picture and the updated second picture so as to display an arc-shaped progress bar which is formed by the target circular ring slice and the target area and is used for indicating the target parameter. According to the method, the progress bar can be displayed in the electronic equipment with less storage space.

Description

Technical Field

[0001] Embodiments of the present application relate to the technical field of electronic devices, and particularly to a method, device, electronic device and storage medium for generating and displaying an arc progress bar. Background Art

[0002] In today's intelligent electronic devices, the user interface generally includes an element of a progress bar. For example, the remaining battery power of the electronic device is displayed through the progress bar. Currently, in order to display progress bars with different progress, multiple progress bar pictures representing different progress can be stored in the electronic device in advance. The multiple progress bar pictures correspond to multiple progress one by one. When the electronic device needs to display a progress bar of a certain progress, the progress bar picture corresponding to the progress is selected from the multiple progress bar pictures and displayed. Since this method requires storing multiple progress bar pictures in the electronic device, this method is not applicable to electronic devices with less storage space. Summary of the Invention

[0003] In view of the above problems, embodiments of the present application provide a method, device, electronic device and storage medium for generating and displaying an arc progress bar, which are used to solve the problem that the progress bar cannot be displayed on an electronic device with less storage space in the prior art.

[0004] According to one aspect of the embodiments of the present application, a method for generating and displaying an arc progress bar is provided, which is applied to an electronic device. The method includes: obtaining a target parameter of the electronic device at the current moment; determining a ratio of the target parameter to a preset value, where the target parameter is less than or equal to the preset value; if the ratio is less than 100%, determining an angle value, where a ratio of the angle value to a preset angle value is equal to the ratio of the target parameter to the preset value, and the preset angle value is less than 360°; slicing a first circular ring slice in a first picture set in advance to obtain a target circular ring slice, where a central angle of the first circular ring slice is the preset angle value, both ends of the first circular ring slice are arcs, and a central angle of the target circular ring slice is the angle value; setting other areas in the first picture except the target circular ring slice to a transparent state to obtain an updated first picture; dividing a target area from a second circular ring slice in a second picture set in advance, where the first circular ring slice is the same as the second circular ring slice and they overlap, the shape of the target area is a circle, a diameter of the circle is a ring width of the target circular ring slice, and the diameter of the circle coincides with a cut position of the target circular ring slice; setting other areas in the second picture except the target area to a transparent state to obtain an updated second picture; displaying the updated first picture and the updated second picture to display an arc progress bar formed by the target circular ring slice and the target area, where the arc progress bar is used to indicate the target parameter.

[0005] In an alternative manner, the first picture and the second picture are preset through the following steps: in response to receiving a first request for creating a picture control, create a first picture control at a target position on the display interface of the electronic device, and display the first picture through the first picture control, where the first request includes coordinate information of the target position and the first picture; in response to receiving a second request for creating a picture control, create a second picture control at the target position on the display interface, and display the second picture through the second picture control, where the second request includes coordinate information of the target position and the second picture.

[0006] In an alternative manner, the inner arc and the outer arc in the first circular ring slice respectively belong to the arcs of the inner circle and the outer circle; setting the other regions in the first picture except the target circular ring slice to a transparent state includes: setting the regions within the inner circle in the first picture to a transparent state; setting the regions outside the outer circle in the first picture to a transparent state; setting the other regions outside the sector formed by the outer arc of the target circular ring slice and the center of the first circular ring slice in the first picture to a transparent state.

[0007] In an alternative manner, setting the regions within the inner circle in the first picture to a transparent state includes: setting the regions within the inner circle to a transparent state through an inner circle mask; setting the regions outside the outer circle in the first picture to a transparent state includes: setting the regions outside the outer circle to a transparent state through an outer circle mask; setting the other regions outside the sector formed by the outer arc of the target circular ring slice and the center of the first circular ring slice in the first picture to a transparent state includes: setting the other regions outside the sector to a transparent state through an angle mask.

[0008] In an alternative manner, setting the area within the inner circle to a transparent state through the inner circle mask includes: In the coordinate system established with the reference point in the first picture as the origin, determining the difference between the abscissa of the center of the inner circle and the radius of the inner circle to obtain the abscissa of the first vertex of the first square, and determining the difference between the ordinate of the center of the inner circle and the radius of the inner circle to obtain the ordinate of the first vertex; In the coordinate system, determining the sum of the abscissa of the center of the circle and the radius of the inner circle to obtain the abscissa of the second vertex of the first square, and determining the sum of the ordinate of the center of the circle and the radius of the inner circle to obtain the ordinate of the second vertex, where the first vertex and the second vertex are two opposite vertices of the first square; Determining the position of the first square according to the coordinates of the first vertex and the coordinates of the second vertex; Setting the area within the inscribed circle of the first square in the first picture to a transparent state through the inner circle mask; Setting the area outside the outer circle to a transparent state through the outer circle mask includes: In the coordinate system, determining the difference between the abscissa of the center of the circle and the radius of the outer circle to obtain the abscissa of the third vertex of the second square, and determining the difference between the ordinate of the center of the circle and the radius of the outer circle to obtain the ordinate of the third vertex; In the coordinate system, determining the sum of the abscissa of the center of the circle and the radius of the outer circle to obtain the abscissa of the fourth vertex of the second square, and determining the sum of the ordinate of the center of the circle and the radius of the outer circle to obtain the ordinate of the fourth vertex, where the third vertex and the fourth vertex are two opposite vertices of the second square; Determining the position of the second square according to the coordinates of the third vertex and the coordinates of the fourth vertex; Setting the area outside the inscribed circle of the second square in the first picture to a transparent state through the outer circle mask; Setting the other areas outside the sector to a transparent state through the angle mask includes: Determining the starting angle and the ending angle of the target circular ring slice; Setting the areas corresponding to the angles that do not belong to the range between the starting angle and the ending angle to a transparent state through the angle mask.

[0009] In an alternative manner, the color of the first circular ring slice is a gradient color.

[0010] In an alternative manner, the target parameter is the current remaining battery power of the electronic device, and the preset value is the battery capacity of the electronic device; or, the target parameter is the sound intensity of the audio currently being played by the player of the electronic device, and the preset value is the maximum sound intensity that the player can reach when playing audio.

[0011] According to another aspect of the embodiments of the present application, there is provided an arc progress bar generation and display device, which is applied to an electronic device and includes: an acquisition module for acquiring a target parameter of the electronic device at the current moment; a ratio determination module for determining a ratio of the target parameter to a preset value, where the target parameter is less than or equal to the preset value; an angle value determination module for determining an angle value if the ratio is less than 100%, where a ratio of the angle value to a preset angle value is equal to the ratio of the target parameter to the preset value, and the preset angle value is less than 360°; a slicing module for slicing a first ring slice in a pre-set first picture to obtain a target ring slice, where a central angle of the first ring slice is the preset angle value, both ends of the first ring slice are arcs, and a central angle of the target ring slice is the angle value; a first setting module for setting other areas in the first picture except the target ring slice to a transparent state to obtain an updated first picture; a division module for dividing a target area from a second ring slice in a pre-set second picture, where the first ring slice is the same as the second ring slice and they overlap, the shape of the target area is a circle, a diameter of the circle is a ring width of the target ring slice, and the diameter of the circle coincides with a cut position of the target ring slice; a second setting module for setting other areas in the second picture except the target area to a transparent state to obtain an updated second picture; a display module for displaying the updated first picture and the updated second picture to display an arc progress bar formed by the target ring slice and the target area, where the arc progress bar is used to indicate the target parameter.

[0012] According to another aspect of the embodiments of the present application, there is provided an electronic device, including a memory, a processor, and a computer program stored on the memory, where the processor executes the computer program to implement the arc progress bar generation and display method as described above.

[0013] According to still another aspect of the embodiments of the present application, there is provided a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the arc progress bar generation and display method as described above is implemented.

[0014] In the embodiments of the present application, a first picture and a second picture are pre-set. The ring slices in the first picture and the second picture are the same and they overlap. The ring slice is a part of the ring. By using the ring slice to represent 100% progress instead of using the ring to represent 100% progress, the sizes of the first picture and the second picture can be effectively reduced, thereby reducing the requirement for the storage space of the electronic device.

[0015] Moreover, after obtaining the target parameter of the electronic device at the current moment and determining the ratio of the target parameter to the preset value, that is, the progress bar ratio corresponding to the target parameter at the current moment, the circular ring slice in the first picture is sliced to obtain a target circular ring slice that matches the current progress. Since the cut position is flat when slicing the circular ring slice in the first picture, in order to make both ends of the finally displayed progress bar be smooth arcs to improve the visual effect, in the embodiments of the present application, a circular target area is divided from the circular ring slice in the second picture, and the diameter of the target area coincides with the cut position in the first picture. The other areas outside the target circular ring slice in the first picture and the other areas outside the target area in the second picture are both adjusted to be transparent, so as to obtain an updated first picture and an updated second picture. Therefore, when finally displaying the updated first picture and the updated second picture, a curved progress bar with smooth arcs at both ends can be displayed.

[0016] Furthermore, in the embodiments of the present application, when the colors of the circular ring slices in the first picture and the second picture belong to gradient colors, by the above method, the gradient effect of the colors will not be damaged, making the finally displayed curved progress bar not only beautiful, but also have a natural color transition, improving the user experience.

[0017] The above description is only an overview of the technical solutions of the embodiments of the present application. In order to be able to understand the technical means of the embodiments of the present application more clearly, it can be implemented according to the content of the specification. And in order to make the above and other purposes, features and advantages of the embodiments of the present application more obvious and understandable, the following specifically gives the specific implementation manners of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] The drawings are only used to illustrate the embodiments and are not considered as a limitation to the present application. And throughout the drawings, the same reference numerals are used to represent the same components. In the drawings:

[0019] Figure 1 A schematic diagram of the circular ring slice provided by the present application is shown;

[0020] Figure 2 A schematic flowchart of the method for generating and displaying a curved progress bar provided by the embodiments of the present application is shown;

[0021] Figure 3 A schematic structural diagram of the device for generating and displaying a curved progress bar provided by the embodiments of the present application is shown;

[0022] Figure 4 A schematic structural diagram of the electronic device provided by the embodiments of the present application is shown. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0023] Exemplary embodiments of the present application will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present application are shown in the drawings, it should be understood that the present application can be implemented in various forms and should not be limited by the embodiments set forth herein.

[0024] In order for an electronic device with less storage space to display a progress bar, a progress bar image representing 100% progress can be stored in the electronic device in advance. When it is necessary to display a progress bar representing 100% progress, the stored progress bar image can be directly displayed. When it is necessary to display a progress bar with less than 100% progress, the stored progress bar image is processed so that the progress bar in the processed image can represent the progress to be displayed, and then the processed image is displayed. For example, if a complete circle represents 100% progress, when it is necessary to display 50% progress, the stored progress bar image is cropped so that only half of the circle remains, and the cropped image is displayed. Thus, 50% progress can be represented by displaying the half circle in the cropped image.

[0025] However, if a complete circle represents 100% progress, then an image including a complete circle needs to be stored in the electronic device, and the size of the image is still relatively large, which places certain requirements on the storage space of the electronic device. Moreover, if only an arc is used to display the progress bar, the visual clarity and information transmission effects are poor. For example, in the case where the color saturation of the display interface of the electronic device is low or the size of the display interface is small, the user cannot accurately identify the position of the end of the arc, and there may be a situation where the current progress cannot be accurately identified based on the arc.

[0026] Based on the above considerations, in order to be able to display a progress bar on an electronic device with less storage space and ensure that the user can relatively accurately identify the current progress through the progress bar, a circular ring slice can be used to represent 100% progress. The circular ring slice is a part of the circular ring, and both ends of the circular ring slice are smooth arcs. When it is necessary to display a progress bar with less than 100% progress, the circular ring slice is divided to obtain a progress bar corresponding to the current progress, and the obtained progress bar after division is displayed.

[0027] Figure 1 shows a schematic diagram of the circular ring slice provided by the present application. As Figure 1As shown, the circular ring slice is the shaded area in the figure, which belongs to the slice of the circular ring formed by the dashed line. In the figure, the first area 10 includes a circular ring formed by the dashed line. If this circular ring represents 100% progress, at least a picture with the same size as the first area 10 needs to be stored in the electronic device. However, if the circular ring slice represents 100% progress, only a picture with the same size as the second area 11 needs to be stored in the electronic device. Since the size of the second area 11 is smaller than that of the first area 10, compared with the way of using the circular ring to represent 100% progress, the size of the picture stored in the electronic device in the former way is smaller, thus reducing the requirement for the storage space of the storage device.

[0028] As Figure 1 shown, when using the circular ring slice in the second area 11 to represent 100% progress, in order to improve the visual effect, the two ends of the circular ring slice can be set as smooth arcs. However, when a progress bar less than 100% progress needs to be displayed, after the circular ring slice is split, the incision position is flat, and the two ends of the obtained circular ring slice are no longer smooth arcs. If the directly displayed split circular ring slice is shown, it will reduce the user's visual experience.

[0029] Based on this, the present application proposes a method for generating and displaying an arc-shaped progress bar. The first picture and the second picture are pre-stored in the electronic device. Among them, the first picture and the second picture include the same circular ring slice. By splitting the circular ring slice in the first picture to obtain a target circular ring slice for representing the current progress, and setting the other areas in the first picture except the target circular ring slice to be transparent to obtain an updated first picture, a circular target area is divided from the circular ring slice in the second picture, and the diameter of the circle is the ring width of the target circular ring slice, and the diameter of the circle coincides with the incision position of the target circular ring slice. Then, the other areas in the second picture except the target area are set to be transparent to obtain an updated second picture. Finally, the updated first picture and the updated second picture are displayed, and the arc-shaped progress bar for indicating the current progress composed of the target circular ring slice and the target area can be displayed. When splitting the circular ring slice in the first picture to obtain the target circular ring slice, the incision position is relatively flat. In the present application, a circle is divided from the circular ring slice in the second picture, and the diameter of the circle coincides with the incision position of the circular ring slice in the first picture. Thus, when the updated first picture and the updated second picture are displayed, both ends of the circular ring slice for representing the current progress are smooth arcs, avoiding the visual effect of the relatively flat incision position caused by splitting the circular ring slice in the first picture, thereby improving the overall aesthetics of the displayed progress bar and the user's visual experience.

[0030] Figure 2The figure shows a schematic flowchart of the method for generating and displaying an arc progress bar provided by an embodiment of the present application. This method is executed by an electronic device, which can be a terminal device including one or more processors, such as a smart phone, a smart bracelet, a tablet computer, a portable electronic device, or other electronic devices with a display screen. The processor may be a central processing unit (CPU), or an application specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present invention, which is not limited herein. One or more processors included in the electronic device may be of the same type of processor, such as one or more CPUs; or may be of different types of processors, such as one or more CPUs and one or more ASICs, which is not limited herein. As Figure 2 shown, the method includes the following steps:

[0031] Step 101: Obtain the target parameter of the electronic device at the current moment.

[0032] Among them, the target parameter may be the remaining power of the electronic device at present or the sound intensity of the audio currently played by the player of the electronic device, etc. If the target parameter is the remaining power of the battery of the electronic device at the current moment, then the remaining power of the battery of the electronic device at the current moment is obtained in this step. If the target parameter is the sound intensity of the audio currently played by the player of the electronic device, then the volume of the electronic device at the current moment is obtained in this step.

[0033] Step 102: Determine the ratio of the target parameter to the preset value.

[0034] Among them, if the target parameter is the remaining power of the electronic device at present, the preset value is the battery capacity of the electronic device. If the target parameter is the sound intensity of the audio currently played by the player of the electronic device, the preset value is the maximum sound intensity that can be achieved when the player plays the audio. Since the target parameter is less than or equal to the preset value, this ratio is less than or equal to 100%.

[0035] Step 103: Determine whether this ratio is less than 100%. If not, go to step 104; if so, go to step 105.

[0036] Step 104: Display the pre-set first picture.

[0037] Among them, the first picture is pre-set through the following steps: In response to receiving the first request for creating a picture control, create a first picture control at the target position on the display interface of the electronic device, and display the first picture through the first picture control. Among them, the first request includes the coordinate information of the target position and the first picture.

[0038] The lightweight and versatile graphics library LVGL (Light and Versatile Graphics Library) is an open-source embedded graphics library designed specifically for embedded systems, which can provide rich graphical interface elements and components. In the embodiments of this application, taking LVGL as an example, when a user creates an image control at a certain position on the display interface and provides a first image to be displayed through the image control, it is equivalent to the user sending a first request to the electronic device. This position is the target position. In response to receiving the first request, the electronic device creates a first image control and displays the first image through the first image control. Among them, the first image includes a first circular ring slice representing 100% progress, and both ends of the first circular ring slice are smooth arcs. The first circular ring slice in the embodiments of this application can refer to Figure 1 the circular ring slice of the shaded area in the second region 11 in

[0039] Since the ratio determined in step 103 is 100%, in this step, by displaying the first image, the circular ring slice representing 100% progress in the first image is used to indicate the target parameter obtained in step 101.

[0040] To improve the visual effect, in the embodiments of this application, preferably, the color of the first circular ring slice included in the first image is a gradient color. Moreover, other regions in the first image except the first circular ring slice are in a transparent state, or the color of other regions in the first image except the first circular ring slice is the same as the background color of the display interface of the electronic device.

[0041] Step 105: Determine the angle value.

[0042] Since the ratio determined in step 103 is less than 100% and the first image cannot be directly displayed to represent the current progress, the first image needs to be processed before display. First, determine an angle value. The ratio of the angle value determined in this step to the preset angle value is equal to the ratio of the target parameter to the preset value. The preset angle value is the central angle of the first circular ring slice in the first image, and as can be seen from the foregoing, this preset angle value is less than 360°. In this step, the angle value can be determined according to the ratio determined in step 102 and the preset angle value. The angle value determined in this step is the central angle corresponding to the circular ring slice progress bar to be displayed currently.

[0043] Step 106: Cut the first circular ring slice in the pre-set first image to obtain a target circular ring slice.

[0044] Among them, the central angle of the target circular ring slice is the angle value determined in step 105. Since the progress to be currently displayed is less than 100%, it is necessary to divide the first circular ring slice representing 100% progress in the first picture to obtain the target circular ring slice corresponding to the current progress.

[0045] Step 107: Set other areas in the first picture except the target circular ring slice to a transparent state to obtain the updated first picture.

[0046] Specifically, in this step, it can be implemented through the following steps a1 to a3.

[0047] Step a1: Set the area within the inner circle in the first picture to a transparent state.

[0048] Among them, the inner arc and the outer arc in the first circular ring slice belong to the arcs of the inner circle and the outer circle respectively. As Figure 1 shown, the inner circle is a circle with the center at point O and a radius of R1; the outer circle is a circle with the center at point O and a radius of R2. In this step, the transparency of the area within the inner circle in the first picture can be adjusted to achieve the purpose of setting the area within the inner circle to a transparent state.

[0049] To improve efficiency, the area within the inner circle can be set to a transparent state through the inner circle mask. Specifically, it can be implemented through the following steps a11 to a14.

[0050] Step a11: In the coordinate system established with the reference point in the first picture as the origin, determine the difference between the abscissa of the center of the inner circle and the radius of the inner circle to obtain the abscissa of the first vertex of the first square, and determine the difference between the ordinate of the center of the inner circle and the radius of the inner circle to obtain the ordinate of the first vertex.

[0051] Among them, as Figure 1 shown, taking the first picture as the second area 11 as an example, in the coordinate system established with the upper left corner point P in the first picture as the reference point and with point P as the origin, the positive direction of the horizontal axis in this coordinate system is the horizontal right direction, the positive direction of the vertical axis is the vertical downward direction, the coordinates of point O are (Xo, Yo), and the first vertex is Figure 1 the point A in, then the coordinates of point A are (Xo - R1, Yo - R1).

[0052] Step a12: In the coordinate system, determine the sum of the abscissa of the center of the circle and the radius of the inner circle to obtain the abscissa of the second vertex of the first square, and determine the sum of the ordinate of the center of the circle and the radius of the inner circle to obtain the ordinate of the second vertex, where the first vertex and the second vertex are two opposite vertices of the first square.

[0053] Among them, the second vertex is Figure 1For point B in it, the coordinates of point B are (Xo + R1, Yo + R1).

[0054] Step a13: Determine the position of the first square according to the coordinates of the first vertex and the second vertex.

[0055] Among them, after determining the coordinates of point A and point B respectively through the above steps a11 and a12, the position of the first square with opposite vertices being point A and point B can be determined.

[0056] Step a14: Set the area within the inscribed circle of the first square in the first picture to a transparent state through the inner circle mask.

[0057] Taking LVGL as an example, a circular mask control can be initialized first to cover the area within the inscribed circle of the first square in the first picture. Specifically, in the drawing event LV_ENENT_DRAW_AMIN_BEGIN, by calling the mask circular function and providing the coordinates of point A and point B to the mask circular function, with the shape parameter given as a circle, the inner circle mask control can be drawn, and thus the area within the inscribed circle of the first square in the first picture can be set to a transparent state through the inner circle mask.

[0058] Step a2: Set the area outside the outer circle in the first picture to a transparent state.

[0059] In this step, the area outside the outer circle in the first picture can be set to a transparent state by adjusting the transparency of the area outside the outer circle. In this step, to improve efficiency, the area outside the outer circle can be set to a transparent state through the outer circle mask. Specifically, it can be achieved through the following steps a21 to a24.

[0060] Step a21: In the coordinate system established with point P as the origin, determine the difference between the abscissa of the center of the circle and the radius of the outer circle to obtain the abscissa of the third vertex of the second square, and determine the difference between the ordinate of the center of the circle and the radius of the outer circle to obtain the ordinate of the third vertex.

[0061] Among them, as Figure 1 shown, in the coordinate system established with point P as the origin, the third vertex is Figure 1 For point C in it, the coordinates of point C are (Xo - R2, Yo - R2).

[0062] Step a22: In the coordinate system, determine the sum of the abscissa of the center of the circle and the radius of the outer circle to obtain the abscissa of the fourth vertex of the second square, and determine the sum of the ordinate of the center of the circle and the radius of the outer circle to obtain the ordinate of the fourth vertex, where the third vertex and the fourth vertex are two opposite vertices of the second square.

[0063] Among them, the fourth vertex is Figure 1 the point D in Figure 1 , and the coordinates of the point D are (Xo + R2, Yo + R2). Step a23: Determine the position of the second square according to the coordinates of the third vertex and the fourth vertex

[0064] Among them, after determining the coordinates of point C and point D respectively through the above steps a21 and a22, the position of the first square with the opposite vertices being point C and point D can be determined.

[0065] Step a24: Set the area outside the inscribed circle of the second square in the first picture to be transparent through the outer mask.

[0066] Taking LVGL as an example, a circular mask control can be initialized first to cover the area outside the inscribed circle of the second square in the first picture. Specifically, in the drawing event LV_ENENT_DRAW_AMIN_BEGIN, by calling the mask circular function and providing the coordinates of point C and point D to the mask circular function, and giving the shape parameter as a circle, the outer circular mask control can be drawn, and thus the area outside the inscribed circle of the second square in the first picture can be set to be transparent through the outer mask.

[0067] Step a3: Set the areas other than the sector formed by the outer arc of the target ring slice and the center of the first ring slice in the first picture to be transparent.

[0068] As Figure 1 shown, for example, the first ring slice is divided by the straight line OF to obtain the target ring slice. The target ring slice is the ring slice between the straight line OE and the straight line OF. The ring slice between the straight line OF and the straight line OG does not belong to the target ring slice. Therefore, in this step, the area within the sector OFG region in the first picture needs to be set to be transparent.

[0069] In this step, to improve efficiency, the areas other than the sector can be set to be transparent through the angle mask. Specifically, it can be achieved through the following steps a31 to a32.

[0070] Step a31: Determine the starting angle and ending angle of the target ring slice.

[0071] Among them, as Figure 1 shown, taking the target ring slice as the ring slice between the straight line OE and the straight line OF as an example, then point E and point F can be regarded as the starting point and the ending point of the target ring slice. Then the angle HOE (the angle passed from point H, rotating clockwise to point E) is the starting angle θ1, and the angle HOF (the angle passed from point H, rotating clockwise to point F) is the ending angle θ2.

[0072] Step a32: Set the area corresponding to the angles outside the starting angle and the ending angle to be transparent through an angle mask.

[0073] Among them, the angle EOF is the central angle of the target circular ring slice. In this step, the area in the first picture that does not belong to the interior of the angle EOF is set to be transparent through the angle mask, that is, the area in the first picture that belongs to the interior of the angle FOG is set to be transparent.

[0074] Step 108: Divide the target area from the second circular ring slice in the pre-set second picture.

[0075] Among them, the second picture is pre-set through the following steps: In response to receiving a second request to create a picture control, create a second picture control at the target position on the display interface, and display the second picture through the second picture control. Among them, the second request includes the coordinate information of the target position and the second picture. The method of pre-setting the second picture is the same as the method of pre-setting the first picture. Therefore, for the specific method of pre-setting the second picture, reference can be made to the specific method of pre-setting the first picture mentioned in the foregoing step 104, which will not be elaborated here.

[0076] Among them, the first circular ring slice is the same as the second circular ring slice and they overlap. The shape of the target area is a circle, the diameter of this circle is the ring width of the target circular ring slice, and the diameter of this circle coincides with the cut position of the target circular ring slice.

[0077] As Figure 1 shown, taking the circular ring slice between the straight line OE and the straight line OF of the target circular ring slice as an example, in this step, specifically, since the first circular ring slice is the same as the second circular ring slice and they overlap, the cut position formed by dividing the first circular ring slice in step 106 is used as the position of the diameter of the circle in this step, that is, the diameter of this circle and the straight line OF are the same straight line, and the ring width of the target circular ring slice is used as the diameter of the circle to divide the second circular ring slice to obtain a target area in the shape of a circle. Figure 1 In, the circle with the center O1 is the position of the target area corresponding in the first picture. Since the first circular ring slice in the first picture is the same as the circular ring slice in the second picture and they overlap, the position of the target area in the second picture is the same as the position of the target area corresponding in the first picture.

[0078] Step 109: Set the other areas in the second picture except the target area to be transparent to obtain an updated second picture.

[0079] The distance d between point O1 and point O in the vertical direction is d = sin(θ2 - 180°) * R1, and the distance d' between point O1 and point O in the horizontal direction is d' = cos(θ2 - 180°) * R1. Therefore, Xo' = Xo - d, Yo' = Yo - d', that is, the coordinates of the center O1 are (Xo - d, Yo - d'). According to the center coordinates of the circle with center O1 and the diameter W of this circle, where W = R2 - R1, the vertex coordinates of the third square with the inscribed circle being circle O1 can be determined. Among them, in the coordinate system established with point P as the origin, the upper left vertex coordinates of the third square are (Xo' - W / 2, Yo' - W / 2), and the lower right vertex coordinates of the third square are (Xo' + W / 2, Yo' + W / 2). Taking LVGL as an example, in order to set the other regions in the second picture except the target region (i.e., circle O1) to a transparent state, a circular mask control can be initialized first to cover the regions outside the inscribed circle of the third square in the second picture. Specifically, in the drawing event LV_ENENT_DRAW_AMIN_BEGIN, by calling the mask circular function and providing the upper left vertex coordinates and lower right vertex coordinates of the third square to this mask circular function, and setting the shape parameter to a circle, the outer circle mask control can be drawn, and thus the regions outside the inscribed circle of the third square in the second picture can be set to a transparent state by the outer circle mask.

[0080] Step 110: Display the updated first picture and the updated second picture to display the arc progress bar composed of the target ring slice and the target region, and the arc progress bar is used to indicate the target parameter.

[0081] Among them, in the updated first picture, except for the target ring slice, other regions are in a transparent state, and in the updated second picture, except for the target region, other regions are in a transparent state. Therefore, in this step, by displaying the updated first picture and the updated second picture, the arc progress bar composed of the target ring slice and the target region used to indicate the target parameter can be displayed.

[0082] In the embodiment of the present application, the first picture and the second picture are preset. The ring slices in the first picture and the second picture are the same and overlap, and the 100% progress is represented by the ring slice instead of the ring, which can effectively reduce the sizes of the first picture and the second picture, thereby reducing the storage space requirements for the electronic device.

[0083] Moreover, after obtaining the target parameter of the electronic device at the current moment and determining the ratio of the target parameter to the preset value, that is, the progress bar ratio corresponding to the target parameter at the current moment, the target ring slice matching the current progress is obtained by splitting the ring slice in the first picture. Since the cut position is flat when splitting the ring slice in the first picture, in order to make both ends of the finally displayed progress bar be smooth arcs to improve the visual effect, in the embodiment of the present application, a circular target area is divided from the ring slice in the second picture, and the diameter of the target area coincides with the cut position in the first picture, and other areas outside the target ring slice in the first picture and other areas outside the target area in the second picture are in a transparent state, so as to obtain the updated first picture and the updated second picture. Therefore, when finally displaying the updated first picture and the updated second picture, a curved progress bar with smooth arcs at both ends can be displayed.

[0084] Further, in the embodiment of the present application, when the colors of the ring slices in the first picture and the second picture belong to gradient colors, by the above method, the gradient effect of the colors will not be damaged, so that the finally displayed curved progress bar is not only beautiful, but also has a natural color transition, improving the user experience.

[0085] Figure 3 shows a schematic structural diagram of the curved progress bar generation and display device provided by the embodiment of the present application. As Figure 3 shown, the curved progress bar generation and display device 200 includes: an acquisition module 201, a ratio determination module 202, an angle value determination module 203, a splitting module 204, a first setting module 205, a dividing module 206, a second setting module 207, and a display module 208.

[0086] The acquisition module 201 is used to acquire the target parameters of the electronic device at the current moment. The ratio determination module 202 is used to determine the ratio of the target parameter to the preset value, where the target parameter is less than or equal to the preset value. The angle value determination module 203 is used to determine the angle value if the ratio is less than 100%, where the ratio of the angle value to the preset angle value is equal to the ratio of the target parameter to the preset value, and the preset angle value is less than 360°. The slicing module 204 is used to slice the first circular ring slice in the pre-set first picture to obtain the target circular ring slice, where the central angle of the first circular ring slice is the preset angle value, both ends of the first circular ring slice are arcs, and the central angle of the target circular ring slice is the angle value. The first setting module 205 is used to set other areas in the first picture except the target circular ring slice to a transparent state to obtain the updated first picture. The division module 206 is used to divide the target area from the second circular ring slice in the pre-set second picture, where the first circular ring slice is the same as the second circular ring slice and they overlap, the shape of the target area is a circle, the diameter of the circle is the ring width of the target circular ring slice, and the diameter of the circle coincides with the cut position of the target circular ring slice. The second setting module 207 is used to set other areas in the second picture except the target area to a transparent state to obtain the updated second picture. The display module 208 is used to display the updated first picture and the updated second picture to display the arc progress bar composed of the target circular ring slice and the target area, and the arc progress bar is used to indicate the target parameter.

[0087] The arc progress bar generation and display device 200 provided in this embodiment is used to execute the technical solution of the arc progress bar generation and display method in the foregoing method embodiment. The implementation principle and technical effects are similar and will not be elaborated here.

[0088] It should be noted that the arc progress bar generation and display device 200 provided in this embodiment further includes other modules for executing the respective steps of the above arc progress bar generation and display method embodiment, which will not be elaborated here one by one.

[0089] Figure 4 The structural schematic diagram of the electronic device provided by the embodiment of the present application is shown. The specific implementation of the electronic device in the specific embodiment of the present application is not limited.

[0090] As Figure 4 shown, the electronic device 300 may include: a processor 302 and a memory 304.

[0091] Among them, the memory 304 is used to store the computer program 306. The memory 304 may include high-speed RAM memory, and may also include non-volatile memory, such as at least one disk memory. The computer program 306 may include computer-executable instructions.

[0092] The processor 302 is used to execute the computer program 306 to implement the above-mentioned embodiment of the method for generating and displaying the arc progress bar.

[0093] The processor 302 may be a central processing unit CPU, or a specific integrated circuit ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement the embodiments of the present application. One or more processors included in the electronic device 300 may be of the same type of processor, such as one or more CPUs; or may be of different types of processors, such as one or more CPUs and one or more ASICs.

[0094] The embodiments of the present application provide a computer-readable storage medium, and the storage medium stores a computer program, which when executed by a processor, implements the above-mentioned embodiment of the method for generating and displaying the arc progress bar.

[0095] The embodiments of the present application provide a computer program, which can be executed by a processor to implement the above-mentioned embodiment of the method for generating and displaying the arc progress bar.

[0096] The embodiments of the present application provide a computer program product, and the computer program product includes a computer program, which when executed by a processor, implements the above-mentioned embodiment of the method for generating and displaying the arc progress bar.

[0097] In several embodiments provided by the present application, if any function is implemented in the form of a software functional module / unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on such an understanding, all or part of the technical solution of the present application can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for causing a computer device (which may be an electronic device such as a personal computer, a server, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present application. The foregoing storage medium includes: various media such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disc that can store computer program code.

[0098] The algorithms or displays provided herein are not inherently related to any particular computer, virtual system, or other device. A variety of general-purpose systems can also be used in conjunction with the teachings based herein. Based on the above description, the structure required to construct such systems will be apparent. Additionally, the embodiments of the present application are not directed to any particular programming language. It should be understood that the content of the present application described herein can be implemented using a variety of programming languages, and the description of a particular language above is for the purpose of disclosing the best mode of the present application.

[0099] It should be noted that the above embodiments illustrate the present application rather than limit the present application, and those skilled in the art can design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in the claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The present application can be implemented by means of hardware including several different elements and by means of a suitably programmed computer. In a claim listing several devices, several units or modules of these devices can be embodied by the same item of hardware. The use of the words first, second, and third, etc. does not denote any order. These words can be interpreted as names. The steps in the above embodiments, unless otherwise specified, should not be construed as limiting the order of execution.

[0100] The above-described embodiments merely represent several implementation manners of the present application, and their descriptions are relatively specific and detailed, but should not be construed as limiting the patent scope of the present application. It should be pointed out that for those of ordinary skill in the art, without departing from the concept of the present application, several modifications and improvements can still be made, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the appended claims.

Claims

1. A method for generating and displaying an arc progress bar, which is applied to an electronic device, characterized in that The method includes: Obtaining a target parameter of the electronic device at the current moment; Determining a ratio of the target parameter to a preset value, where the target parameter is less than or equal to the preset value; If the ratio is less than 100%, determining an angle value, where a ratio of the angle value to a preset angle value is equal to the ratio of the target parameter to the preset value, and the preset angle value is less than 360°; Cutting a first circular ring slice in a first picture preset to obtain a target circular ring slice, where a central angle of the first circular ring slice is the preset angle value, both ends of the first circular ring slice are arcs, and a central angle of the target circular ring slice is the angle value; Setting other areas in the first picture except the target circular ring slice to a transparent state to obtain an updated first picture; Dividing a target area from a second circular ring slice in a second picture preset, where the first circular ring slice is the same as and overlaps with the second circular ring slice, a shape of the target area is a circle, a diameter of the circle is a ring width of the target circular ring slice, and the diameter of the circle coincides with a cut position of the target circular ring slice; Setting other areas in the second picture except the target area to a transparent state to obtain an updated second picture; Displaying the updated first picture and the updated second picture to display an arc-shaped progress bar formed by the target circular ring slice and the target area, where the arc-shaped progress bar is used to indicate the target parameter.

2. The method according to claim 1, wherein The first picture and the second picture are preset through the following steps: In response to receiving a first request for creating a picture control, creating a first picture control at a target position on a display interface of the electronic device, and displaying the first picture through the first picture control, where the first request includes coordinate information of the target position and the first picture; In response to receiving a second request for creating a picture control, creating a second picture control at the target position on the display interface, and displaying the second picture through the second picture control, where the second request includes coordinate information of the target position and the second picture.

3. The method according to claim 1, wherein Inner and outer arcs in the first circular ring slice respectively belong to arcs of an inner circle and an outer circle; The setting other areas in the first picture except the target circular ring slice to a transparent state includes: Setting an area inside the inner circle in the first picture to a transparent state; Setting an area outside the outer circle in the first picture to a transparent state; Setting other areas outside a sector formed by an outer arc of the target circular ring slice and the center of the first circular ring slice in the first picture to a transparent state.

4. The method according to claim 3, wherein The setting an area inside the inner circle in the first picture to a transparent state includes: Setting the area inside the inner circle to a transparent state through an inner circle mask; The setting an area outside the outer circle in the first picture to a transparent state includes: Setting the area outside the outer circle to a transparent state through an outer circle mask; Setting other regions outside the sector formed by the outer arc of the target circular slice and the center of the first circular slice in the first picture to a transparent state includes: Setting other regions outside the sector to a transparent state through an angle mask.

5. The method according to claim 4, characterized in that Setting the region inside the inner circle to a transparent state through an inner circle mask includes: In a coordinate system established with a reference point in the first picture as the origin, determining the difference between the abscissa of the center of the inner circle and the radius of the inner circle to obtain the abscissa of the first vertex of the first square, and determining the difference between the ordinate of the center of the inner circle and the radius of the inner circle to obtain the ordinate of the first vertex; In the coordinate system, determining the sum of the abscissa of the center of the circle and the radius of the inner circle to obtain the abscissa of the second vertex of the first square, and determining the sum of the ordinate of the center of the circle and the radius of the inner circle to obtain the ordinate of the second vertex, where the first vertex and the second vertex are two opposite vertices of the first square; Determining the position of the first square according to the coordinates of the first vertex and the coordinates of the second vertex; Setting the region inside the inscribed circle of the first square in the first picture to a transparent state through the inner circle mask; Setting the region outside the outer circle to a transparent state through an outer circle mask includes: In the coordinate system, determining the difference between the abscissa of the center of the circle and the radius of the outer circle to obtain the abscissa of the third vertex of the second square, and determining the difference between the ordinate of the center of the circle and the radius of the outer circle to obtain the ordinate of the third vertex; In the coordinate system, determining the sum of the abscissa of the center of the circle and the radius of the outer circle to obtain the abscissa of the fourth vertex of the second square, and determining the sum of the ordinate of the center of the circle and the radius of the outer circle to obtain the ordinate of the fourth vertex, where the third vertex and the fourth vertex are two opposite vertices of the second square; Determining the position of the second square according to the coordinates of the third vertex and the coordinates of the fourth vertex; Setting the region outside the inscribed circle of the second square in the first picture to a transparent state through the outer circle mask; Setting other regions outside the sector to a transparent state through an angle mask includes: Determining the starting angle and the ending angle of the target circular slice; Setting the region corresponding to the angle that does not belong to the angle between the starting angle and the ending angle to a transparent state through the angle mask.

6. The method according to claim 1, characterized in that, The color of the first circular slice is a gradient color.

7. The method according to claim 1, characterized in that The target parameter is the current remaining power of the electronic device, and the preset value is the battery capacity of the electronic device; or, The target parameter is the sound intensity of the audio currently played by the player of the electronic device, and the preset value is the maximum sound intensity that can be achieved when the player plays the audio.

8. An arc progress bar generation and display device, applied to an electronic device, characterized in that, The device includes: An acquisition module for acquiring the target parameter of the electronic device at the current moment; A ratio determination module, configured to determine a ratio of the target parameter to a preset value, where the target parameter is less than or equal to the preset value; An angle value determination module, configured to determine an angle value if the ratio is less than 100%, where a ratio of the angle value to a preset angle value is equal to the ratio of the target parameter to the preset value, and the preset angle value is less than 360°; A slicing module, configured to slice a first circular ring slice in a preset first picture to obtain a target circular ring slice, where a central angle of the first circular ring slice is the preset angle value, both ends of the first circular ring slice are arcs, and a central angle of the target circular ring slice is the angle value; A first setting module, configured to set other areas in the first picture except the target circular ring slice to a transparent state to obtain an updated first picture; A dividing module, configured to divide a target area from a second circular ring slice in a preset second picture, where the first circular ring slice is the same as and overlaps with the second circular ring slice, a shape of the target area is a circle, a diameter of the circle is a ring width of the target circular ring slice, and the diameter of the circle coincides with a cut position of the target circular ring slice; A second setting module, configured to set other areas in the second picture except the target area to a transparent state to obtain an updated second picture; A display module, configured to display the updated first picture and the updated second picture to display an arc-shaped progress bar formed by the target circular ring slice and the target area, where the arc-shaped progress bar is used to indicate the target parameter.

9. An electronic device, comprising a memory, a processor, and a computer program stored on the memory, characterized in that, The processor executes the computer program to implement the arc-shaped progress bar generation and display method according to any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the arc-shaped progress bar generation and display method according to any one of claims 1 to 7.

Images