Sector-ring-shaped progress bar display method and device, electronic equipment and storage medium

Abstract

The embodiment of the invention discloses a sector-ring-shaped progress bar display method and device, electronic equipment and a storage medium, the method comprises the steps that a progress display task is acquired, a progress base map is generated based on the progress display task, and the progress base map comprises a base map area and a progress bar area which are different in color; generating a progress mask based on the progress base map, wherein the color of the progress mask is the same as that of the base map area of the progress base map; and rotating the progress mask to sequentially display the progress bar areas of the progress base map. According to the embodiment of the specification, the progress base map and the progress mask are arranged, then the progress bar is displayed on the progress base map, the progress mask is used for shielding the progress bar, and then the progress bar is displayed by rotating the progress mask, so that the calculation amount required for displaying the progress bar is reduced, and stable realization of other functions is ensured; and the stability of the whole serial port screen system is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and particularly to a method, device, electronic device and storage medium for displaying a fan-shaped progress bar. Background Art

[0002] A serial port screen is a display screen with a serial communication interface, which is usually used in fields such as embedded systems, industrial control, and smart homes. It communicates with a master device (such as a single-chip microcomputer, PLC, industrial control computer, etc.) through a serial port (such as UART, RS232, RS485, etc.), receives instructions and displays corresponding content. The existing serial port screen directly drives a liquid crystal display screen to display a progress bar by using an MCU, that is, directly drives each pixel on the display liquid crystal screen through the MCU, and arranges and combines the values of each pixel in the screen through three color channels of RGB and the positions of each pixel block to display the progress bar. However, directly driving the screen through the MCU will occupy a large amount of I / O (input / output) and computing performance of the MCU, which will affect the implementation of other functions in the MCU, and thus reduce the stability of the serial port screen system. Summary of the Invention

[0003] To solve the problems existing in the prior art, one or more embodiments of this specification describe a method, device, electronic device and storage medium for displaying a fan-shaped progress bar.

[0004] According to a first aspect, a method for displaying a fan-shaped progress bar is provided, and the method includes: Obtain a progress display task, and generate a progress background image based on the progress display task, where the progress background image includes background regions and a progress bar region with different colors; Generate a progress mask based on the progress background image, where the progress mask has the same color as the background region of the progress background image; Rotate the progress mask to sequentially display the progress bar region of the progress background image.

[0005] Preferably, the progress display task includes an end progress, and generating a progress background image based on the progress display task includes: Obtain the radian of the progress bar based on the end progress, and draw the progress bar region on the progress background image based on the radian of the progress bar.

[0006] Preferably, generating a progress mask based on the progress background image includes: Set a progress ratio, and generate the progress mask based on the radian of the progress bar and the progress ratio.

[0007] Preferably, the rotation center of the progress mask is the center of the progress bar area on the progress background map. The progress display task further includes an initial progress. The step of rotating the progress mask to sequentially display the progress bar area of the progress background map includes: Starting from the initial progress, rotate the progress mask sequentially along the extension direction from the initial progress to the end progress.

[0008] Preferably, the method further includes that, based on different progress display tasks, the starting points of the progress bar areas are the same.

[0009] Preferably, the method further includes: establishing a dividing line based on the starting point of the progress bar area and the rotation center of the progress mask, and making the progress mask passing through the dividing line transparent.

[0010] Preferably, the progress background map is circular and the progress mask is fan-shaped.

[0011] According to a second aspect, there is provided a progress bar display device, including: A background map construction module, configured to obtain a progress display task and generate a progress background map based on the progress display task. The progress background map includes a background map area and a progress bar area with different colors; A mask construction module, configured to generate a progress mask based on the progress background map. The progress mask has the same color as the background map area of the progress background map; A progress bar display module, configured to rotate the progress mask to sequentially display the progress bar area of the progress background map.

[0012] According to a third aspect, there is provided an electronic device, including a processor and a memory; The processor is connected to the memory; The memory is used to store executable program code; The processor runs a program corresponding to the executable program code by reading the executable program code stored in the memory, so as to execute the steps of the method provided in the first aspect or any one of the possible implementation manners of the first aspect.

[0013] According to a fourth aspect, there is provided a computer-readable storage medium, on which a computer program is stored. Instructions are stored in the computer-readable storage medium. When the instructions are run on a computer or a processor, the computer or the processor is caused to execute the method provided in the first aspect or any one of the possible implementation manners of the first aspect.

[0014] The beneficial effects of the present invention are: 1. The method and device provided in the embodiments of this specification set a progress background image and a progress mask, then display the progress bar on the progress background image, use the progress mask to block the progress bar, and then rotate the progress mask to display the progress bar, thereby reducing the amount of calculation required for displaying the progress bar, ensuring the stable implementation of other functions, and further improving the stability of the entire serial port screen system. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] To more clearly illustrate the technical solutions in the embodiments of the present application, the accompanying drawings required for the embodiments will be briefly introduced below. Obviously, the accompanying drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings.

[0016] Figure 1 is a flowchart of a method for displaying a fan-shaped progress bar in a specific implementation of this specification; Figure 2 is a structural diagram of a progress bar display device in a specific implementation of this specification; Figure 3 is a structural diagram of an electronic device in a specific implementation of this specification; DETAILED DESCRIPTION OF THE EMBODIMENTS

[0017] The technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of the present application.

[0018] In the following description, the terms "first" and "second" are only for the purpose of description and cannot be construed as indicating or implying relative importance. The following description provides multiple embodiments of the present application. Different embodiments can be replaced or combined. Therefore, the present application can also be considered to include all possible combinations of the same and / or different embodiments described. Thus, if one embodiment includes features A, B, and C, and another embodiment includes features B and D, then the present application should also be considered to include embodiments containing all other possible combinations of A, B, C, and D, even though such an embodiment may not be explicitly described in the following content.

[0019] The following description provides examples and does not limit the scope, applicability, or examples set forth in the claims. Changes can be made to the functions and arrangements of the described elements without departing from the scope of the content of the present application. Each example can appropriately omit, substitute, or add various processes or components. For example, the described method can be executed in a different order than the described order, and various steps can be added, omitted, or combined. In addition, the features described in some examples can be combined into other examples.

[0020] Refer to Figure 1 , Figure 1 which is a schematic flowchart of the fan-shaped progress bar display method provided by an embodiment of the present application. In the embodiment of the present application, the method includes: S101. Obtain a progress display task, and generate a progress background image based on the progress display task. The progress background image includes background regions and a progress bar region with different colors; S102. Generate a progress mask based on the progress background image. The progress mask has the same color as the background region of the progress background image; S103. Rotate the progress mask to sequentially display the progress bar region of the progress background image.

[0021] The execution entity of the present application can be a controller for driving a serial port screen.

[0022] In the embodiment of this specification, the controller obtains a progress display task. The progress display task is to display the execution progress of a certain module communicating with the serial port screen that is being executed or to be executed. The controller generates a progress background image on the serial port screen according to the progress display task. The progress background image includes a background region and a progress bar region. The progress bar region is used to display the progress bar state when the process or thread is completed. The color of the progress bar region is different from that of the background region. Preferably, the background region is black to highlight the progress bar region. Then, the controller generates a progress mask on the serial port screen according to the progress background image. The progress mask has the same color as the background region of the progress background image. The progress mask covers the progress background image to block the progress bar region of the progress background image. Finally, the controller controls the progress mask to rotate, so as to display the blocked progress bar region on the serial port screen to achieve the effect of progress bar display. Compared with the prior art, where each pixel on the liquid crystal screen is directly driven by the MCU to display the progress bar by arranging and combining the values of the three color channels RGB of each pixel and the positions where each pixel block is displayed, in the present application, by setting a progress background image and a progress mask, then displaying the progress bar on the progress background image, using the progress mask to block the progress bar, and then displaying the progress bar by rotating the progress mask, the calculation amount required for displaying the progress bar is reduced, the stable implementation of other functions is ensured, and the stability of the entire serial port screen system is improved.

[0023] In an implementable manner, the progress display task includes an initial progress and an end progress. The generating a progress background image based on the progress display task includes: Obtaining the radian of the progress bar based on the end progress, and drawing the progress bar region on the progress background image based on the radian of the progress bar.

[0024] In the embodiments of this specification, the progress display task includes an initial progress and an end progress. Both the following initial progress and end progress are expressed as percentages. The initial progress is the progress completed by a process or a thread before the execution of the progress display task, and the end progress is the progress completed by the process or the thread when the progress display task ends. The controller calculates the arc degree of the progress bar based on the end progress. Specifically, the arc degree of the progress bar is equal to the product of the end progress and 360°. Then, the progress bar area is drawn on the progress background map according to the arc degree of the progress bar. As an example, when the progress display task is from 0 to 100%, a 360° circular ring (i.e., the progress bar area corresponding to the progress display task from 0 to 100%) will be displayed on the progress background map; when the progress display task is from 0 to 60%, a 216° sector ring (i.e., the progress bar area corresponding to the progress display task from 0 to 60%) will be displayed on the progress background map; when the progress display task is from 30% to 80%, a 288° sector ring (i.e., the progress bar area corresponding to the progress display task from 30% to 80%) will be displayed on the progress background map.

[0025] In one implementable manner, generating the progress mask based on the progress background map includes: Setting a progress ratio, and generating the progress mask based on the arc degree of the progress bar and the progress ratio.

[0026] In the embodiments of this specification, when generating the progress mask, the controller multiplies the progress ratio by the progress background map according to the pre-input progress ratio, calculates the area occupied by each progress mask, generates each progress mask according to the area occupied by each progress mask. The number of progress masks is the ceiling of the ratio of the area of the progress background map to the area of the progress mask, and makes each progress mask be centrally symmetrically arranged with the center of the progress bar area on the progress background map as the symmetry point. As an example, assume that the progress background map is a square, the arc degree of the progress bar area is greater than 270°, and the progress ratio is 25%. Then, 4 square progress masks will be generated, denoted as the first mask, the second mask, the third mask, and the fourth mask. The 4 progress masks are arranged in a square on the progress background map, thereby blocking the progress background map.

[0027] In one implementable manner, the rotation center of the progress mask is the center of the progress bar area on the progress background map. The progress display task further includes an initial progress. Rotating the progress mask to sequentially display the progress bar area of the progress background map includes: Starting from the initial progress, rotating the progress mask in sequence along the extension direction from the initial progress to the end progress.

[0028] In the embodiments of this specification, the rotation center of the progress mask is the center of the progress bar area on the progress background map. When performing the progress display task, the progress mask rotates starting from the position of the initial progress, and the rotation direction is the extension direction from the initial progress to the end progress. When the progress mask rotates, the progress bar area will be gradually revealed, thus achieving the effect of progress display. As an example, as described above, 4 progress masks are arranged in a square on the progress background map. When displaying the progress, first rotate the first mask. When the first mask completely coincides with the second mask, rotate the first mask and the second mask. When the first mask, the second mask, and the third mask coincide, rotate the first mask, the second mask, and the third mask. When the first mask, the second mask, the third mask, and the fourth mask coincide, rotate the first mask, the second mask, the third mask, and the fourth mask.

[0029] In an implementable manner, based on different progress display tasks, the starting points of the progress bar areas are the same.

[0030] In the embodiments of this specification, as described above, different progress display tasks will generate different progress bar areas (i.e., fan rings with different arcs). To improve the user experience of using the serial port screen, the starting points of multiple different progress bar areas are set to be the same on the same progress background map.

[0031] In an implementable manner, based on the starting point of the progress bar area and the rotation center of the progress mask, a dividing line is established, and the progress mask passing through the dividing line is made transparent.

[0032] As described above, the progress mask may block the already displayed progress bar during rotation, resulting in incomplete progress display. To improve the display effect of the progress bar, in the embodiments of this specification, a dividing line is drawn by connecting the progress origin and the rotation center. When the progress mask passes through the dividing line, the part of the progress mask passing through the dividing line is made transparent.

[0033] In an implementable manner, the progress background map is circular and the progress mask is fan-shaped. This enables the progress mask to always be within the area of the progress background map during rotation, thereby improving the display effect of the progress bar.

[0034] The following will Figure 2 be combined with the attached Figure 2 to introduce the progress bar display device provided by the embodiments of this application in detail. It should be noted that the attached Figure 1 shows the progress bar display device for executing the method of the embodiments of this application. For the sake of convenience of description, only the parts related to the embodiments of this application are shown. For the specific technical details not disclosed, please refer to the embodiments shown in Figure 1 of this application.

[0035] Please refer to Figure 2 , Figure 2 which is a schematic structural diagram of the progress bar display device provided by an embodiment of the present application. As Figure 2 shown, the device includes: A base map construction module 201, configured to obtain a progress display task, and generate a progress base map based on the progress display task, where the progress base map includes a base map area and a progress bar area with different colors; A mask construction module 202, configured to generate a progress mask based on the progress base map, where the progress mask has the same color as the base map area of the progress base map; A progress bar display module 203, configured to rotate the progress mask to sequentially display the progress bar area of the progress base map.

[0036] In an implementable manner, the base map construction module 201 is specifically configured to: Obtain the radian of the progress bar based on the end progress, and draw the progress bar area on the progress base map based on the radian of the progress bar.

[0037] In an implementable manner, the mask construction module 202 is specifically configured to: Set a progress ratio, and generate the progress mask based on the radian of the progress bar and the progress ratio.

[0038] In an implementable manner, the progress bar display module 203 is specifically configured to: The rotation center of the progress mask is the center of the progress bar area on the progress base map. The progress display task further includes an initial progress. Starting from the initial progress, the progress mask is rotated sequentially along the extension direction from the initial progress to the end progress.

[0039] In an implementable manner, the base map construction module 201 is specifically configured to: Based on different progress display tasks, the starting points of the progress bar areas are the same.

[0040] In an implementable manner, the progress bar display module 203 is specifically configured to: Establish a dividing line based on the starting point of the progress bar area and the rotation center of the progress mask, and make the progress mask passing through the dividing line transparent.

[0041] In an implementable manner, the base map construction module 201 is specifically configured to: The progress base map is circular, and the progress mask is fan-shaped.

[0042] Those skilled in the art can clearly understand that the technical solutions of the embodiments of the present application can be implemented by means of software and / or hardware. The "units" and "modules" in this specification refer to software and / or hardware that can independently complete or cooperate with other components to complete specific functions, where the hardware can be, for example, a Field-Programmable Gate Array (FPGA), an Integrated Circuit (IC), etc.

[0043] Each processing unit and / or module of the embodiments of the present application can be implemented by an analog circuit that implements the functions described in the embodiments of the present application, or can be implemented by software that executes the functions described in the embodiments of the present application.

[0044] See Figure 3 , which shows a schematic structural diagram of an electronic device related to the embodiments of the present application. This electronic device can be used to implement Figure 1 the method in the shown embodiments. As Figure 3 shown, the electronic device 300 may include: at least one central processing unit 301, at least one network interface 304, a user interface 303, a memory 305, and at least one communication bus 302.

[0045] Among them, the communication bus 302 is used to realize the connection and communication between these components.

[0046] Among them, the user interface 303 may include a display screen (Display), a camera (Camera). Optionally, the user interface 303 may further include a standard wired interface and a wireless interface.

[0047] Among them, the network interface 304 may optionally include a standard wired interface and a wireless interface (such as a WI-FI interface).

[0048] Among them, the central processing unit 301 may include one or more processing cores. The central processing unit 301 connects various parts within the entire electronic device 300 through various interfaces and lines, and executes various functions of the terminal 300 and processes data by running or executing instructions, programs, code sets, or instruction sets stored in the memory 305, and by calling the data stored in the memory 305. Optionally, the central processing unit 301 may be implemented in at least one hardware form of digital signal processing (DSP), field-programmable gate array (FPGA), or programmable logic array (PLA). The central processing unit 301 may integrate a combination of one or several of a central processing unit (CPU), a graphics processing unit (GPU), and a modem, etc. Among them, the CPU mainly processes the operating system, user interface, application programs, etc.; the GPU is responsible for rendering and drawing the content to be displayed on the display screen; the modem is used to process wireless communication. It can be understood that the above-mentioned modem may not be integrated into the central processing unit 301 and may be implemented separately by a chip.

[0049] Among them, the memory 305 may include a random access memory (RAM), and may also include a read-only memory. Optionally, the memory 305 includes a non-transitory computer-readable storage medium. The memory 305 can be used to store instructions, programs, code, code sets, or instruction sets. The memory 305 may include a program storage area and a data storage area. Among them, the program storage area may store instructions for implementing the operating system, instructions for at least one function (such as touch function, sound playback function, image playback function, etc.), instructions for implementing the above-mentioned various method embodiments, etc.; the data storage area may store the data involved in the above-mentioned various method embodiments. Optionally, the memory 305 may further be at least one storage device located far from the aforementioned central processing unit 301. As Figure 3 shown, the memory 305, as a computer storage medium, may include an operating system, a network communication module, a user interface module, and program instructions.

[0050] In Figure 3In the electronic device 300 shown, the user interface 303 is mainly used to provide an interface for the user to input and obtain the data input by the user; and the central processing unit 301 can be used to call the application programs stored in the memory 305 and specifically perform the following operations: S101. Obtain a progress display task, generate a progress background image based on the progress display task, where the progress background image includes background regions and a progress bar region with different colors; S102. Generate a progress mask based on the progress background image, where the progress mask has the same color as the background region of the progress background image; S103. Rotate the progress mask to sequentially display the progress bar region of the progress background image.

[0051] The present application also provides a computer-readable storage medium, on which a computer program is stored. When the program is executed by a processor, the steps of the above method are implemented. Among them, the computer-readable storage medium may include, but is not limited to, any type of disk, including floppy disks, optical disks, DVDs, CD-ROMs, micro drives, and magneto-optical disks, ROMs, RAMs, EPROMs, EEPROMs, DRAMs, VRAMs, flash memory devices, magnetic cards or optical cards, nano-systems (including molecular memory ICs), or any type of medium or device suitable for storing instructions and / or data.

[0052] It should be noted that, for the foregoing method embodiments, for the sake of simple description, they are all expressed as a series of action combinations. However, those skilled in the art should know that the present application is not limited by the described action sequence, because according to the present application, certain steps can be performed in other sequences or simultaneously. Secondly, those skilled in the art should also know that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily essential to the present application.

[0053] In the above embodiments, the descriptions of the various embodiments have their own emphases. For the parts not detailed in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0054] In several embodiments provided by the present application, it should be understood that the disclosed device can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of the units is only a logical function division. In actual implementation, there may be other division methods. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point, the displayed or discussed couplings or direct couplings or communication connections to each other can be through some service interfaces. The indirect couplings or communication connections of the devices or units can be in an electrical or other form.

[0055] The unit described as a separation component may or may not be physically separated. The component shown as a unit may or may not be a physical unit, that is, it may be located in one place or may be distributed over multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0056] In addition, in each embodiment of the present application, the functional units can be integrated in a processing unit, or each unit can exist physically alone, or two or more units can be integrated in one unit. The above-mentioned integrated units can be implemented in the form of hardware or in the form of software functional units.

[0057] If the above-mentioned integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable memory. Based on such an understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art, or all or part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a memory and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in each embodiment of the present application. The aforementioned memory includes: USB flash drives, read-only memories (ROM), random access memories (RAM), mobile hard disks, magnetic disks, or optical disks, etc., which can store program codes.

[0058] Those of ordinary skill in the art can understand that all or part of the steps in the various methods of the above embodiments can be completed by instructing relevant hardware through a program. This program can be stored in a computer-readable memory, and the memory can include: flash drives, read-only memories (ROM), random access memories (RAM), magnetic disks, or optical disks, etc.

[0059] The above are only exemplary embodiments of the present disclosure, and the scope of the present disclosure cannot be limited by this. That is, any equivalent changes and modifications made according to the teachings of the present disclosure still fall within the scope covered by the present disclosure. After considering the specification and practicing the disclosure herein, those skilled in the art will readily think of other implementations of the present disclosure. The present application aims to cover any variations, uses, or adaptive changes of the present disclosure. These variations, uses, or adaptive changes follow the general principles of the present disclosure and include the common general knowledge or conventional technical means in the technical field not recorded in the present disclosure. The specification and the embodiments are only regarded as exemplary, and the scope and spirit of the present disclosure are defined by the claims.

Claims

1. A method for displaying a fan-shaped progress bar, characterized in that, The method includes: Obtaining a progress display task, generating a progress base map based on the progress display task, the progress base map including base map regions and a progress bar region with different colors; Generating a progress mask based on the progress base map, the progress mask having the same color as the base map region of the progress base map; Rotating the progress mask to sequentially display the progress bar region of the progress base map.

2. The method for displaying a fan-shaped progress bar according to claim 1, wherein The progress display task includes an end progress, and generating the progress base map based on the progress display task includes: Obtaining the radian of the progress bar based on the end progress, and drawing the progress bar region on the progress base map based on the radian of the progress bar.

3. A method for displaying a fan-shaped progress bar according to claim 2, wherein Generating the progress mask based on the progress base map includes: Setting a progress ratio, and generating the progress mask based on the radian of the progress bar and the progress ratio.

4. A method for displaying a fan-shaped progress bar according to claim 3, characterized in that, The rotation center of the progress mask is the center of the progress bar region on the progress base map, and the progress display task further includes an initial progress. Rotating the progress mask to sequentially display the progress bar region of the progress base map includes: Using the initial progress as a starting point, sequentially rotating the progress mask along the extension direction from the initial progress to the end progress.

5. A method for displaying a fan-shaped progress bar according to claim 4, characterized in that The method further includes that, based on different progress display tasks, the starting points of the progress bar regions are the same.

6. The method for displaying a fan-shaped progress bar according to claim 5, wherein The method further includes: establishing a dividing line based on the starting point of the progress bar region and the rotation center of the progress mask, and making the progress mask passing through the dividing line transparent.

7. A fan-shaped ring progress bar display method according to claim 1, characterized in that The progress base map is circular, and the progress mask is fan-shaped.

8. A progress bar display device, characterized in that, The device includes: A base map construction module for obtaining a progress display task and generating a progress base map based on the progress display task, the progress base map including base map regions and a progress bar region with different colors; A mask construction module for generating a progress mask based on the progress base map, the progress mask having the same color as the base map region of the progress base map; A progress bar display module for rotating the progress mask to sequentially display the progress bar region of the progress base map.

9. An electronic device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, When the processor executes the computer program, the steps of the method according to any one of claims 1-7 are implemented.

10. A computer-readable storage medium, on which a computer program is stored. Instructions are stored in the computer-readable storage medium. When the instructions run on a computer or a processor, the computer or the processor is caused to execute the steps of the method according to any one of claims 1-7.

Images