Error rendering image correction method based on arc-shaped progress bar

Abstract

The application relates to the field of image processing, in particular to an error rendering image correction method based on an arc-shaped progress bar, which comprises the following steps: according to driving information, adopting a preset rendering algorithm to perform pre-rendering on the arc-shaped progress bar to obtain a primary rendering image; obtaining a refresh line on the primary rendering image, marking the intersection point of the refresh line and the outer arc edge of the arc-shaped progress bar as a P1 point, and marking the intersection point of the refresh line and the inner arc edge of the arc-shaped progress bar as a P2 point; obtaining the colors of the positions of the P1 and P2 points, and marking the colors as P1 color and P2 color respectively; if the P1 color and the P2 color are both valid colors, adopting a block comparison method to perform secondary rendering on the arc-shaped progress bar; otherwise, judging whether the P1 color and the P2 color are both invalid colors, if yes, adopting a block analysis method to perform secondary rendering on the arc-shaped progress bar, otherwise, adopting a point position analysis method to perform secondary rendering on the arc-shaped progress bar; and the application effectively avoids the mispositioning phenomenon of the arc-shaped progress bar in a display interface.

Description

Technical Field

[0001] This invention relates to the field of image processing, and more specifically to a method for correcting erroneous rendered images based on an arc-shaped progress bar. Background Technology

[0002] Progress bars are a useful component in UI interfaces, visualizing abstract data and making it easier to understand. Progress bars are generally divided into bar progress bars and circular progress bars (also called arc progress bars). For example, music players and video players often use bar progress bars, while car speedometers and fuel level indicators typically use circular progress bars. The progress bar displays the current state of the corresponding data based on the rendered color. Taking temperature as an example, a temperature progress bar is marked with different temperature values. The current temperature is displayed, and the corresponding temperature value and its preceding portion are rendered in color. Circular progress bars usually rotate around a center point for rendering, but during the rendering process, issues such as branching and misalignment can occur, leading to display errors and an unattractive interface. Summary of the Invention

[0003] To address issues such as misalignment, excessive size, and insufficient size of the edges when rendering progress patterns using curved progress bars, and to improve image display quality, this invention provides a method for correcting erroneous image rendering based on curved progress bars. The method involves a curved progress bar on a car dashboard, composed of multiple blocks of identical size and shape evenly arranged around a central center, with an interval between each pair of adjacent blocks. Each block represents a scale value. The car displays currently collected driving information via the curved progress bar. If the driving information is 0, all blocks are gray; otherwise, a corresponding number of blocks are rendered in color from left to right based on the driving information and displayed on the car dashboard. Within each block, the color of each point includes both invalid and valid colors. When the color of a point is rendered in color, it is considered valid; otherwise, it is invalid. All points within the interval are considered invalid colors.

[0004] The corresponding number of blocks are rendered in color based on the driving information, including the following steps:

[0005] S1. Based on the driving information perceived by the vehicle sensors, a pre-rendering algorithm is used to pre-render the arc-shaped progress bar to obtain the initial rendered image;

[0006] S2. Obtain the refresh line on the initial rendered image, mark the intersection of the refresh line and the outer arc edge of the arc-shaped progress bar as point P1, and mark the intersection of the refresh line and the inner arc edge of the arc-shaped progress bar as point P2; the refresh line is the boundary between the rendered area and the unrendered area in the entire arc-shaped progress bar.

[0007] S3. Obtain the colors of the positions of points P1 and P2, and record them as P1 color and P2 color respectively; if both P1 color and P2 color are valid colors, proceed to step S6; otherwise, proceed to step S4.

[0008] S4. If both P1 and P2 are invalid colors, then use the block analysis method to perform secondary rendering of the arc-shaped progress bar; otherwise, proceed to step S5.

[0009] S5. Use point-to-point analysis to perform secondary rendering of the arc-shaped progress bar;

[0010] S6. Use the block comparison method to perform secondary rendering of the arc-shaped progress bar.

[0011] Furthermore, step S4 employs block analysis to perform secondary rendering of the arc-shaped progress bar, including:

[0012] S41. Obtain the left nearest block of the refresh line, and determine whether points P1 and P2 are on the same side of the left nearest block. If so, display the image according to the initial rendering. If not, calculate the area S of the rendered region of the left nearest block.

[0013] S42. Calculate the complete area of ​​the left nearest block as N, and determine whether the condition S>1 / 2N is satisfied. If yes, then complete the rendering of the unrendered area in the left nearest block, that is, display the left nearest block completely. If not, then cover the rendered area in the left nearest block with grayscale.

[0014] Furthermore, step S5 employs a point-based analysis method to perform secondary rendering of the arc-shaped progress bar, including:

[0015] S51. If the color of P1 is an invalid color and the color of P2 is a valid color, then obtain the rendered area of ​​the block where point P2 is located, and cover the rendered area with grayscale.

[0016] S52. If color P1 is a valid color and color P2 is an invalid color, then obtain the unrendered area of ​​the block where point P1 is located, and perform complete rendering on the unrendered area.

[0017] Furthermore, step S6 employs a block comparison method for secondary rendering of the arc-shaped progress bar, including:

[0018] S61. Determine whether the block where point P1 is located and the block where point P2 is located are the same block. If yes, proceed to step S62; otherwise, proceed to step S65.

[0019] S62. Calculate the distance D1 between points P1 and P2, and then proceed to step S63;

[0020] S63. Move point P1 along the outer arc to the top left vertex of the block where P1 is located. Each time it moves to a new point, check if the color of the current position is invalid. If so, mark the point above that point as point P3. Move point P2 along the inner arc to the bottom left vertex of the block where P2 is located. Each time it moves to a new point, check if the color of the current position is invalid. If so, mark the point above that point as point P4. Calculate the distance D2 between points P3 and P4.

[0021] S64. Calculate P = D1 / D2. If 0.95 ≤ P ≤ 1.05, then display the image as initially rendered; otherwise, use the first K-line refresh method or the second K-line refresh method for processing.

[0022] S65. Calculate the rendered area S1 of the block containing point P1 and the rendered area S2 of the block containing point P2. Let the block area be N. Calculate the display area ratios Q1 = S1 / N and Q2 = S2 / N. If Q1 > Q2, then complete the rendering of the unrendered area of ​​the block containing point P1 and apply grayscale overlay to the rendered area of ​​the block containing point P2. If Q1 ≤ Q2, then apply grayscale overlay to the rendered area of ​​the block containing point P1 and complete the rendering of the unrendered area of ​​the block containing point P2.

[0023] Furthermore, step S64 employs the first K-line refresh method for processing, including:

[0024] Take the maximum value between D1 and D2 and record it as D3. Move point P3 to the right along the outer arc until the moving distance is equal to D3, and record the current point as point P5. Connect points P5, P1 and P2 in sequence to form a new region, and then complete and render the new region.

[0025] Furthermore, step S64 employs the second K-line refresh method for processing, including:

[0026] Take the minimum value between D1 and D2 and record it as D3. Move point P4 to the right along the inner arc until the moving distance is equal to D3, and record the current point as point P5. Connect points P5, P1 and P2 in sequence to form a new area, and cover the new area with grayscale.

[0027] Furthermore, the driving information may be vehicle speed, engine speed, temperature, or air conditioning fan speed, etc.

[0028] Furthermore, the refresh line is the boundary between the rendered area and the unrendered area in the entire arc-shaped progress bar. Obtaining the refresh line on the initial rendered image includes: in the initial rendered image, obtaining the rendered data on the arc-shaped progress bar, and recording the line connecting the center of the arc-shaped progress bar to the 0 mark as the starting line; converting the rendered data into a rotation angle α, and rotating α degrees to the right from the starting line to obtain the refresh line.

[0029] The beneficial effects of this invention are:

[0030] This invention effectively avoids the misalignment of the curved progress bar in the display interface by fine-tuning the edges of the rendered colors, resulting in a display interface with higher pixel density and more delicate image display effects. It can present more realistic and clearer images, improve the pixel density and response speed of the TFT LCD screen, and meet users' needs for high-quality image display. Attached Figure Description

[0031] Figure 1 This is a schematic diagram of the arc-shaped progress bar of the present invention;

[0032] Figure 2 This is a flowchart of the method of the present invention;

[0033] Figure 3 This is a schematic diagram of the block analysis method process according to an embodiment of the present invention;

[0034] Figure 4 This is a schematic diagram of the block full outside and internal missing in the point analysis method process of this invention embodiment;

[0035] Figure 5 This is a schematic diagram of the block's outer missing and inner full coverage in the point analysis method process of this embodiment of the invention;

[0036] Figure 6 This is a schematic diagram illustrating the K-line refresh method filling method according to an embodiment of the present invention;

[0037] Figure 7 This is a schematic diagram illustrating the discarded K-line refresh method in an embodiment of the present invention;

[0038] Figure 8 This is a schematic diagram of the block comparison method in an embodiment of the present invention. Detailed Implementation

[0039] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0040] like Figure 1As shown, the car dashboard (car display screen) uses a TFT (Thin Film Transistor) liquid crystal display screen. An arc-shaped progress bar is set on the dashboard, which is composed of multiple blocks of the same size and shape evenly arranged around the same center, with an interval between each pair of adjacent blocks. Each block represents a scale value. The car displays the currently collected driving information through the arc-shaped progress bar. If the driving information is 0, all blocks are gray (or white); otherwise, the corresponding number of blocks are rendered in color from left to right according to the driving information and displayed on the car dashboard. Within each block, the color of each point includes both invalid and valid colors. When the color of the point is rendered in color (such as a vibrant blue or red), the color of that point is a valid color; otherwise, it is an invalid color. The colors of all points within the interval are recorded as invalid colors.

[0041] Specifically, the driving information is vehicle speed, temperature, or air conditioning fan speed.

[0042] Specifically, the vehicle is equipped with an existing rendering algorithm related to the drawing and rendering of the arc-shaped progress bar, which this invention refers to as a preset rendering algorithm. This invention achieves accurate display of the arc-shaped progress bar by combining it with the preset rendering algorithm.

[0043] Based on the above, the present invention provides a method for correcting erroneous image rendering based on an arc-shaped progress bar, which renders a corresponding number of blocks in color according to driving information, such as... Figure 2 As shown, it includes the following steps:

[0044] S1. Based on the driving information perceived by the vehicle's sensors, a pre-rendered algorithm is used to pre-render the arc-shaped progress bar to obtain the initial rendered image;

[0045] S2. Obtain the initial rendered image; mark the refresh line on the image, and mark the intersection of the refresh line and the outer arc edge of the arc-shaped progress bar as point P1, with its coordinates marked as L1(x1,y1); mark the intersection of the refresh line and the inner arc edge of the arc-shaped progress bar as point P2, with its coordinates marked as L2(x2,y2); the refresh line is the boundary between the rendered area and the unrendered area in the entire arc-shaped progress bar.

[0046] Specifically, obtaining the refresh line on the initial rendered image includes: in the initial rendered image, obtaining the rendered data on the arc-shaped progress bar, and recording the line connecting the center of the arc-shaped progress bar to the 0 mark as the starting line; converting the rendered data into a rotation angle α, and rotating α degrees to the right from the starting line to obtain the refresh line.

[0047] S3. Obtain the colors of the positions of points P1 and P2, and record them as P1 color and P2 color respectively; if both P1 color and P2 color are valid colors, proceed to step S6; otherwise, proceed to step S4.

[0048] S4. If both P1 and P2 are invalid colors, then use the block analysis method to perform secondary rendering of the arc-shaped progress bar; otherwise, proceed to step S5.

[0049] Specifically, step S4 uses block analysis to perform secondary rendering of the arc-shaped progress bar, including:

[0050] S41. Obtain the left nearest block of the refresh line, determine whether point P1 and point P2 are on the same side of the left nearest block. If they are, it means that the UI refresh is correct and the image is displayed according to the initial rendering. If not, it means that the UI refresh is incorrect. Calculate the area S of the rendered region of the left nearest block.

[0051] S42. Calculate the complete area of ​​the left nearest block as N, and determine whether the condition S>1 / 2N is satisfied. If yes, it means that the area of ​​the rendered region of the left nearest block exceeds half of its complete area. Then, complete the rendering of the unrendered region in the left nearest block. If not, then cover the rendered region in the left nearest block with grayscale, that is, discard the rendered region of the left nearest block.

[0052] Specifically, if both P1 and P2 colors on the refresh line are invalid, then the positions of points P1 and P2 have two possibilities: 1) P1 and P2 are on the same side of block M, or 2) P1 and P2 are on opposite sides of block M. This is similar to positions on the same side and diagonally opposite sides of a rectangle. Positions on the same side represent a complete graphic refresh, requiring no UI modifications; the image is displayed as it was initially rendered. Diagonally opposite positions indicate the graphic was divided into two parts during refresh—one rendered and one not. In this case, the size of the rendered portion is considered. If the rendered portion is more than half the original area, the image is used to fill it in; if it's less than half, the rendered area is covered with grayscale. Figure 3 As shown in the diagram, one M block represents a block. The M block containing the refresh line is the leftmost neighboring block of the refresh line. The display area of ​​the M block is the rendered area within the leftmost neighboring block, and the other part is the unrendered area within the leftmost neighboring block. Point P1 is to the left of the left boundary of the leftmost neighboring block, and point P2 is to the right of the right boundary of the leftmost neighboring block. The two points are not on the same side of the leftmost neighboring block. If S > 1 / 2N, then the unrendered area within the leftmost neighboring block is also rendered in color; otherwise, it is discarded. Figure 3 The M block display area is made to appear gray.

[0053] S5. Use point-to-point analysis to perform secondary rendering of the arc-shaped progress bar.

[0054] Specifically, step S5 uses point-to-point analysis to perform secondary rendering of the arc-shaped progress bar, including:

[0055] S51. If the color of P1 is an invalid color and the color of P2 is a valid color, then obtain the rendered area of ​​the block where point P2 is located, and cover the rendered area with grayscale.

[0056] like Figure 4 As shown, in the case of "outer circle complete, inner circle missing", the outer circle where point P1 is located is displayed normally when the UI is displayed, while the inner circle where point P2 is located has an extra part.

[0057] S52. If color P1 is a valid color and color P2 is an invalid color, then obtain the unrendered area of ​​the block where point P1 is located, and perform complete rendering on the unrendered area.

[0058] like Figure 5 As shown, the case of "outer ring missing, inner ring complete" means that when displayed in the UI, the outer ring where point P1 is located is incomplete, while the inner ring where point P2 is located is displayed normally.

[0059] S6. Use the block comparison method to perform secondary rendering of the arc-shaped progress bar.

[0060] Specifically, step S6 uses a block comparison method to perform secondary rendering of the arc-shaped progress bar, including:

[0061] S61. Determine whether the block where point P1 is located and the block where point P2 is located are the same block. If yes, proceed to step S62; otherwise, proceed to step S65.

[0062] S62. Calculate the distance D1 between points P1 and P2, and then proceed to step S63;

[0063] S63. Move point P1 along the outer arc to the top left vertex of the block where P1 is located. Each time it moves to a new point, check if the color of the current position is invalid. If so, mark the point above that point as point P3. Move point P2 along the inner arc to the bottom left vertex of the block where P2 is located. Each time it moves to a new point, check if the color of the current position is invalid. If so, mark the point above that point as point P4. Calculate the distance D2 between points P3 and P4.

[0064] S64. Calculate P = D1 / D2. If 0.95 ≤ P ≤ 1.05, it means that the UI refresh deviation is very small and the image is displayed according to the initial rendering. Otherwise, the first K-line refresh method or the second K-line refresh method is used for processing.

[0065] Specifically, step S64 uses the first K-line refresh method for processing, including:

[0066] Take the maximum value between D1 and D2 and record it as D3. Move point P3 to the right along the outer arc until the moving distance equals D3, and record the current point as P5. Connect points P5, P1, and P2 in sequence to form a new region, and then complete and render the new region, as follows. Figure 6 As shown.

[0067] Specifically, step S64 employs the second K-line refresh method for processing, including:

[0068] Take the minimum value between D1 and D2 and record it as D3. Move point P4 to the right along the inner arc until the moving distance is equal to D3, and record the current point as point P5. Connect points P5, P1, and P2 in sequence to form a new region, and then cover the new region with grayscale, as follows. Figure 7 As shown.

[0069] Different UIs will have some differences in display effects and the solutions they adopt. Finally, the first K-line refresh method or the second K-line refresh method will be selected according to the requirements.

[0070] S65. Calculate the rendered area S1 of the block containing point P1 and the rendered area S2 of the block containing point P2. Let the block area be N. Calculate the display area ratios Q1 = S1 / N and Q2 = S2 / N. If Q1 > Q2, then complete the rendering of the unrendered area of ​​the block containing point P1 and apply grayscale overlay to the rendered area of ​​the block containing point P2. If Q1 ≤ Q2, then apply grayscale overlay to the rendered area of ​​the block containing point P1 and complete the rendering of the unrendered area of ​​the block containing point P2. Figure 8 As shown.

[0071] In this invention, unless otherwise explicitly specified and limited, the terms "installation," "setting," "connection," "fixing," "rotation," etc., should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral part; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; they can refer to the internal connection of two components or the interaction between two components. Unless otherwise explicitly limited, those skilled in the art can understand the specific meaning of the above terms in this invention according to the specific circumstances.

[0072] Although embodiments of the invention have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and alterations can be made to these embodiments without departing from the principles and spirit of the invention, the scope of which is defined by the appended claims and their equivalents.

Claims

1. A method for correcting erroneous rendered images based on an arc-shaped progress bar, characterized in that, An arc-shaped progress bar is set on the car's dashboard, which consists of multiple blocks of the same size and shape evenly arranged around the same center, with an interval between each pair of adjacent blocks. Each block represents a scale value. The car displays the currently collected driving information through the arc-shaped progress bar. If the driving information is 0, all blocks are gray; otherwise, the corresponding number of blocks are rendered in color from left to right according to the driving information and displayed on the car's dashboard. Within each block, the color of each point's location includes both invalid and valid colors. When the color of the point's location is rendered in color, it is a valid color; otherwise, it is an invalid color. The colors of all points within the interval are recorded as invalid colors. The corresponding number of blocks are rendered in color based on the driving information, including the following steps: S1. Based on the driving information perceived by the vehicle sensors, a pre-rendering algorithm is used to pre-render the arc-shaped progress bar to obtain the initial rendered image; S2. Obtain the refresh line on the initial rendered image, mark the intersection of the refresh line and the outer arc edge of the arc progress bar as point P1, and mark the intersection of the refresh line and the inner arc edge of the arc progress bar as point P2; the refresh line is the boundary between the rendered area and the unrendered area in the entire arc progress bar. S3. Obtain the colors of the positions of points P1 and P2, and record them as P1 color and P2 color respectively; if both P1 color and P2 color are valid colors, proceed to step S6; otherwise, proceed to step S4. S4. If both P1 and P2 are invalid colors, then use the block analysis method to perform secondary rendering of the arc-shaped progress bar; otherwise, proceed to step S5. Step S4 uses block analysis to perform secondary rendering of the arc-shaped progress bar, including: S41. Obtain the left nearest block of the refresh line, and determine whether points P1 and P2 are on the same side of the left nearest block. If so, display the image according to the initial rendering. If not, calculate the area S of the rendered region of the left nearest block. S42. Calculate the complete area N' of the left nearest block and determine whether the condition S> N' / 2 is satisfied. If yes, then complete the rendering of the unrendered area in the left nearest block, that is, display the left nearest block completely. If not, then cover the rendered area in the left nearest block with grayscale. S5. Use point-to-point analysis to perform secondary rendering of the arc-shaped progress bar, including: S51. If the color of P1 is an invalid color and the color of P2 is a valid color, then obtain the rendered area of ​​the block where point P2 is located, and cover the rendered area with grayscale. S52. If color P1 is a valid color and color P2 is an invalid color, then obtain the unrendered area of ​​the block where point P1 is located, and perform complete rendering on the unrendered area. S6. Use the block comparison method to perform secondary rendering of the arc-shaped progress bar, including: S61. Determine whether the block where point P1 is located and the block where point P2 is located are the same block. If yes, proceed to step S62; otherwise, proceed to step S65. S62. Calculate the distance D1 between points P1 and P2, and then proceed to step S63; S63. Move point P1 along the outer arc to the top left vertex of the block where P1 is located. Each time it moves to a new point, check if the color of the current position is invalid. If so, mark the point above that point as point P3. Move point P2 along the inner arc to the bottom left vertex of the block where P2 is located. Each time it moves to a new point, check if the color of the current position is invalid. If so, mark the point above that point as point P4. Calculate the distance D2 between points P3 and P4. S64. Calculate P=D1 / D2. If 0.95≤P≤1.05, then display the image as initially rendered; otherwise, use the first K-line refresh method or the second K-line refresh method for processing. S65. Calculate the rendered area S1 of the block containing point P1 and the rendered area S2 of the block containing point P2. Let the block area be N. Calculate the display area ratios Q1 = S1 / N and Q2 = S2 / N. If Q1 > Q2, then complete the rendering of the unrendered area of ​​the block containing point P1 and apply grayscale overlay to the rendered area of ​​the block containing point P2. If Q1 ≤ Q2, then apply grayscale overlay to the rendered area of ​​the block containing point P1 and complete the rendering of the unrendered area of ​​the block containing point P2. Step S64 uses the first candlestick refresh method for processing, including: Take the maximum value between D1 and D2 and record it as D3. Move point P3 to the right along the outer arc until the moving distance is equal to D3. Record the current point as point P5. Connect points P5, P1 and P2 in sequence to form a new region and perform completion rendering on the new region. Step S64 uses the second candlestick refresh method for processing, including: Take the minimum value between D1 and D2 and record it as D3'. Move point P4 to the right along the inner arc until the moving distance is equal to D3', and record the current point as point P5. Connect points P5, P1 and P2 in sequence to form a new region, and cover the new region with grayscale.

2. The method for correcting erroneous rendered images based on an arc-shaped progress bar according to claim 1, characterized in that, The driving information may be vehicle speed, engine speed, temperature, or air conditioning fan speed.

3. The method for correcting erroneous rendered images based on an arc-shaped progress bar according to claim 1, characterized in that, Obtaining the refresh line on the initial rendered image includes: in the initial rendered image, obtaining the rendered data on the arc-shaped progress bar, and recording the line connecting the center of the arc-shaped progress bar to the 0 mark as the starting line; converting the rendered data into a rotation angle α, and obtaining the refresh line by rotating α degrees to the right from the starting line.

Images