Layout-adaptive double-buffer curve drawing method

Abstract

The invention discloses a layout-adaptive double-buffer curve drawing method, which belongs to the technical field of computer image processing, and comprises the following steps of: dividing a buffer area into a window title bar area, an upper reserved blank area, a vertical scroll bar area, a horizontal axis area, a longitudinal axis area, a curve area and a legend area; visible graphs are drawn in a mode of setting a cutting area in the area, processing for displaying scales when the maximum and minimum values are the same is added when a longitudinal axis is drawn, point number and time can be switched when a transverse axis is drawn, and processing for displaying the scales on hour is added when the time is displayed on the transverse axis. The data can be drawn into an accurate graph, and the graph is flexibly analyzed.

Description

Technical Field

[0001] The present invention belongs to the technical field of computer image processing, and specifically relates to a double-buffered curve drawing method with layout adaptability. Background Art

[0002] With the development of technology, computer recording and detection have become important links in equipment debugging and operation. During the equipment debugging and operation stages, it is necessary to network and observe the real-time waveforms of key parameters of all equipment on the entire production line, and accurately record the collected data for system-level data and timing analysis to quickly locate faults. In practical applications, the double-buffered drawing technology is often used to draw graphics. The basic idea of double buffering is to first create an off-screen buffer (such as a bitmap) in memory, perform drawing operations on this buffer, and then copy the entire content of the buffer to the screen at one time. This can avoid the flickering problem that occurs when directly drawing on the screen because all complex drawing processes are completed in the background, so that the user sees a complete image. However, for the curves generated by the existing double-buffered curve drawing methods, when performing graphic operations such as zooming in, zooming out, and moving, the graphics will be distorted, resulting in the inability to accurately reflect the actual fluctuations of the parameters.

[0003] After preliminary retrieval, the following publicly disclosed prior arts are found:

[0004] The present invention is a curve drawing method for equipment or software systems (CN101221665A). Specifically, during the process of a device or software system reading external long-term real-time collected signal data, or during the process of reading a large amount of static data, an index tree, a numerical tree, or a coding tree of the data is synchronously established, and they are used to independently implement a method for dynamically or statically and quickly drawing data curves on a display terminal.

[0005] A method and system for quickly drawing curves with a large amount of data in geological exploration (CN106570049B). First, the operations of the client on the drawing interface are converted into read data requests. The timer function is used to filter out read data requests with a short interval time. The filtered read data requests are parsed and processed to extract the information required to read data from the data file, and then data is read from a custom pre-read data cache and the data file, and feature points are extracted from a large number of data points. Finally, drawing is performed according to the received data information. The present invention effectively solves the problem of low drawing efficiency for a large amount of data in the conventional method, greatly improves the friendliness of the user interface, and also improves the work efficiency.

[0006] By comparison, it can be seen that the technical solution of the present application is significantly different from the above prior arts. Summary of the Invention

[0007] Based on the above background art, to solve the disadvantages and deficiencies existing in the prior art, the present application proposes a layout-adaptive double-buffered curve drawing method, which can draw data into accurate graphs and flexibly analyze the graphs to prevent deformation.

[0008] To solve the above technical problems, the present application provides the following technical solutions:

[0009] A layout-adaptive double-buffered curve drawing method, which collects all key parameters of all devices on the entire production line for drawing real-time waveforms. The drawing steps specifically include:

[0010] S1 Create a buffer and divide the buffer into multiple regions;

[0011] S2 Set a window, and draw the corresponding regions one by one according to the set window to complete the window drawing. Then divide the regions within the window, set a clipping area, clip the horizontal axis region according to the clipping area, calculate the scale of the horizontal axis and the maximum range of the vertical scroll bar; clip the vertical axis region and save the region information.

[0012] S3 Draw the vertical axis and the horizontal axis. First, set the left and right boundaries of the rectangle of the current drawing area, draw the background within each drawing area, and then draw the vertical axis and the horizontal axis;

[0013] S4 Draw curves, draw analog quantity curves and digital quantity curves;

[0014] When drawing analog quantity curves, poll all curves associated with the vertical axis within the region;

[0015] When drawing digital quantity curves, first reorder the pixel point array to ensure that the processed pixel point array has monotonically increasing X, no duplicate pixel points, and adjacent points are close;

[0016] S5 Draw a legend; draw the legend after the curves are drawn; then, draw the scroll bar according to the maximum range of the vertical scroll bar determined in S2.

[0017] Moreover, the specific implementation method of S1: Create a background buffer of a CDC object, obtain the device context of the control window, create a memory device context environment background buffer compatible with the specified device according to the window device context, create a bitmap compatible with the specified device environment with the size of the client area of the control according to the context of the window device, select the object in the background buffer as the previously created bitmap, and set the memory bitmap background on the background buffer.

[0018] Moreover, when setting the window in S2, the areas corresponding to all windows are adjusted according to the row number and column number where the set window is located; the relevant information of the windows is saved into a structure array, and all windows in the array are polled. Each window contains at least one graphic area, one horizontal axis area, and one vertical scroll bar area. Each graphic area contains a vertical axis area, a curve area, and a legend area, and each part is drawn window by window.

[0019] Moreover, the specific implementation method for clipping the horizontal axis area in S2:

[0020] When clipping the horizontal axis area, the left and right boundaries of the clipping area are used as the left and right boundaries of the horizontal axis area. Then, the scale of the horizontal axis is calculated. The lower boundary of the window area minus the height of the scale text is the new lower boundary of the window area. And for the right boundary to fully display the text, the right boundary is moved a little to the left. The intersection area of the clipping area and the new window area is used as the new clipping area. In addition, a reasonable scale width should be displayed for the time axis;

[0021] After clipping the horizontal axis, the height of the clipping area is determined, and the height of each graphic area in the window is calculated according to the total number of areas. The calculation formula is:

[0022] Height of each graphic area in the window = (Height of the clipping area + Blank height between areas) ÷ Number of areas - Blank height between areas,

[0023] After determining the height of the graphic area, the maximum range of the vertical scroll bar is also determined. The calculation formula is:

[0024] Maximum range = Height of each graphic area in the window * Number of areas + Blank height between areas * (Number of areas - 1).

[0025] Moreover, the specific implementation method for clipping the vertical axis area in S2: When clipping the vertical axis area, each graphic area may contain multiple vertical axes. Therefore, each vertical axis area within the graphic area needs to be clipped. Calculate the vertical axis area: The upper boundary of each vertical axis area is the upper boundary of the clipping area + Area index × (Area height + Blank height between areas) - Scroll bar position, the lower boundary is the upper boundary + Area height, the left boundary is the right boundary of the previous vertical axis, and the right boundary is directly the left boundary of the clipping area;

[0026] The left and right boundaries need to calculate the width of the vertical axis scale text. When the maximum and minimum values ​​are the same, the scale increment is 0. In order to avoid the scale being displayed as a string of 0s, the scale text must set the default number of decimal places to be retained. The scale text string is polled from back to front. The position of the first non-zero character minus the position of the decimal point is the number of decimal places. After calculating the vertical axis scale, the maximum text width is cut off to get a new clipping area. All vertical axes are processed in a loop. Since the number of vertical axes or scale widths in each area may be different, the left boundaries of the clipping area obtained after clipping the vertical axis in each area are not the same. Therefore, a temporary array is defined to record the left boundary of the clipping area obtained for each area. After all areas are clipped, the largest element in the array is taken as the left boundary of the final clipping area.

[0027] Moreover, the specific implementation method of drawing the vertical axis and the horizontal axis of S3 is:

[0028] When drawing the vertical axis, the current vertical axis area is intersected with the clipping area of ​​the window to which it belongs to obtain the clipping area of ​​the current vertical axis. The vertical axis is drawn from the starting point to the end point at the right edge of the vertical axis area. Then the previously calculated scale texts are drawn one by one, and then the grid lines are drawn. Only the last vertical axis displays the grid.

[0029] When drawing the horizontal axis, draw the horizontal axis from the starting point to the end point at the upper boundary of the horizontal axis area, then draw the previously calculated scale texts one by one, and then draw the grid lines; when drawing the horizontal axis, you can switch between points and time, and add the processing of scale display of whole points when the horizontal axis displays time;

[0030] Drawing the vertical and horizontal axes updates the drawing area rectangle and the vertical axis area, and saves the structure information.

[0031] Moreover, the specific implementation method of drawing the analog quantity curve in S4: Poll all graphic regions. If the intersection of the current region and the clipping region is empty, skip this region; if the current region has an intersection with the clipping region, set this intersection as the clipping region of the curve. Poll all the curves associated with the vertical axis within the region, and only draw the unselected curves. The selected curves are drawn outside the loop. First, obtain the visible data points within the current display range in the data point array generated after obtaining the extraction points through the binary search method. If there are no visible data points, directly return without drawing the curve; otherwise, draw the curve. According to the current horizontal axis range, calculate the starting point and ending point of the corresponding data points. Poll all the data points, convert them into pixel points and then draw lines. Create a temporary pixel point array. Poll all the data points within the horizontal axis range, convert them into pixel points. If it is the same as the previous point, do not process and continue to poll the next data point. If it is different, determine whether the difference between the integer value of the abscissa of the data value and the previous point is greater than the extraction point ratio. If the difference is not greater than the extraction point ratio, it is considered that the data points are continuous, add them to the pixel point array and the temporary array, and continue to poll the next data point; if the difference is greater than the extraction point ratio, it is considered that the data is not continuous. If the temporary array is not empty, use the data in the temporary array to draw a line, clear the temporary array, and then add the converted pixel point of the current point to the pixel point array and the temporary array; if the temporary array is empty, directly add the converted pixel point to the pixel point array and the temporary array, and continue to poll the next data point until all visible data points are processed.

[0032] Moreover, the specific implementation method of drawing the digital quantity curve in S4: To avoid the slanted line display of the digital quantity data waveform, when drawing the digital quantity, at the place where different values appear, add a transitional point (X n , Y n-1 ) to make the waveform display as a square wave;

[0033] Before drawing the curve, first re - sort the pixel point array to ensure that the processed pixel point array has X monotonically increasing, no duplicate pixel points, and adjacent similar points; Poll all pixel points starting from the first pixel point. If it is determined that there are duplicate pixel points, exit the loop, do not add the current point to the pixel point array, and continue to poll the next point; if there are no duplicate pixel points, further determine the position where the current point is added to the pixel point array;

[0034] When drawing a line, starting from the first pixel point, poll the pixel point array that are all valid points after processing. If the X and Y of the current point and the previous point are both different, then draw a line connecting to the position of the Y of the previous point and the X of the current point, that is, (X n , Y n-1 ), and then connect from the previous point to the current point; otherwise, directly connect from the previous point to the current point, continue to poll the next pixel point until all pixel points are polled, and the drawing of the digital quantity curve ends.

[0035] An electronic device, characterized in that the electronic device includes a memory and a processor, the memory stores a computer program, and the processor is configured to call and run the computer program stored in the memory to execute any one of the layout-adaptive double-buffered curve drawing methods.

[0036] A computer-readable storage medium, characterized in that the computer-readable storage medium stores instructions, which, when executed by one or more processors, cause the electronic device to execute any one of the layout-adaptive double-buffered curve drawing methods.

[0037] The advantages and positive effects of the present invention are:

[0038] 1. The present invention adopts a double-buffered drawing method that sets a clipping area and controls repeated refreshing, which can draw graphics efficiently and accurately.

[0039] 2. The multi-window design and adaptive calculation of the horizontal and vertical axis clipping areas adopted by the present invention can optimize the processing interface layout, not only making the display neat, but also meeting the requirement of observing the most curves simultaneously to the greatest extent.

[0040] 3. The optimization of the display of the horizontal and vertical axes in the present invention facilitates users to observe waveforms.

[0041] 4. The optimization of digital quantity drawing in the present invention can prevent users from misinterpreting data anomalies and is helpful for correctly analyzing the operation status of the device.

[0042] 5. The function of adding a mouse wheel scrolling to view the legend in the present invention can facilitate users to view curve information. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] In order to more clearly illustrate the technical solutions of the present invention, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the drawings in the following description are only some embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0044] Figure 1 is the flowchart of drawing graphics of the present invention.

[0045] Figure 2 is the schematic diagram of the division of the drawing area of the present invention.

[0046] Figure 3 is the flowchart of drawing curves of the present invention.

[0047] Figure 4 is the flowchart of drawing digital quantity curves of the present invention.

[0048] Figure 5It is the experimental waveform diagram of the present invention. Detailed implementation manners

[0049] To make the structure and advantages of the present invention clearer, the structure of the present invention will be further described below in conjunction with the accompanying drawings.

[0050] A double-buffered curve drawing method with layout adaptability. Refer to the attached Figure 1 As shown, for the so-called layout adaptability, the buffer is divided into a window title bar area, an upper reserved blank area, a vertical scroll bar area, a horizontal axis area, a vertical axis area, a curve area, and a legend area. The visible graphics are drawn in the area by setting a clipping area. When drawing the vertical axis, the processing of displaying scales when the maximum and minimum values are the same is added. When drawing the horizontal axis, the number of points and time can be switched, and when the horizontal axis displays time, the processing of displaying scale integral points is added. When drawing the curve, the processing of preventing the "⊥" shaped curve from appearing in the digital quantity waveform diagram is added. When drawing the legend, the function of scrolling to view the legend is added.

[0051] The key parameters of all devices on the entire production line are collected in real time for drawing real-time waveforms, which is convenient for network observation. The specific steps for drawing real-time waveforms are as follows:

[0052] Step 1: Create a buffer and set the background.

[0053] Create a CDC object m_BackgroundDC (the background buffer of the double-buffered technology), obtain the DC (context) of the control window, create a memory device context environment DC m_BackgroundDC compatible with the specified device according to the window DC, create a bitmap compatible with the specified device environment and with the size of the client area of the control according to the window DC, and select the object in m_BackgroundDC as the bitmap created before. Set the memory bitmap background on m_BackgroundDC.

[0054] Step 2: Draw all windows and set the clipping area for each window.

[0055] When creating a new window, adjust the areas of all windows according to the set row number and column number of the window. The height of each window in each row is the total height of the window divided by the total number of rows, and the width of each window in each row is the total width of the window divided by the total number of windows in the current row. The window size can also be changed by adjusting the border position. All relevant information of the window is saved in a structure array.

[0056] As Figure 1 shown, poll all windows. As Figure 2 shown, each window may contain at least one graphic area, one horizontal axis area, and one vertical scroll bar area. Each graphic area contains a vertical axis area, a curve area, and a legend area. Draw each part in each window one by one.

[0057] First, determine the area rcWindowRect of the current window. This information has been saved in the window information structure when the window is newly created or changed. Here, directly draw the window title bar with a close button and the window name, as well as the window border according to the area information. Then start to divide each area within the window and set the clipping area m_rcPlottingRect. To avoid the graphics being displayed against the edge, indent the window area rcWindowRect inward a little. And to make the vertical axis scale fully displayed, reserve a little blank area above the clipping area. The other areas within the window are used as the initial value of the clipping area m_rcPlottingRect. The actual size of the graphics may exceed the display space size, so add a vertical scroll bar so that the complete graphics can be viewed. The position is on the far right within the window. Clip the vertical scroll bar area to get the new m_rcPlottingRect, and the other areas are used for drawing. For aesthetic reasons, set the background color of the saved picture to be the same as the background color of the interface display.

[0058] Step 3. Clip the horizontal axis area.

[0059] When clipping the horizontal axis area, the left and right boundaries of the clipping area are used as the left and right boundaries of the horizontal axis area. Then calculate the scale of the horizontal axis. Subtract the height of the scale text from the lower boundary of the window area rcWindowRect to get the new lower boundary of the window area. And for the right boundary, move it a little to the left to make the text fully displayed. The intersection area of the clipping area m_rcPlottingRect and the new rcWindowRect is used as the new clipping area. After clipping the horizontal axis, the height of the clipping area is determined. So calculate the height of each graphic area in the window according to the total number of areas. The calculation formula is "the height of each graphic area in the window = (the height of the clipping area + the blank height between areas) ÷ the number of areas - the blank height between areas". After the height is determined, the maximum range of the vertical scroll bar is also determined accordingly. The calculation formula is "the maximum range = the height of each graphic area in the window * the number of areas + the blank height between areas * (the number of areas - 1)".

[0060] In addition, to make the time axis display a reasonable scale width and try to display the whole hour time, corresponding optimization processing is needed.

[0061] Step 3.1. Calculate the scale width.

[0062] The default scale width pixel value = 60. Divide the pixel width of the horizontal axis by the default width and round down to get the number of scales. According to the number of scales, calculate the X difference between two scales. Convert the X difference into a time difference according to the sampling frequency, and round the time difference to the nearest integer value. The conversion rule is shown in Table 1.

[0063] Table 1

[0064]

[0065]

[0066] If the time difference <= 500 ms, since milliseconds need to be displayed, the scale interval should first be appropriately enlarged (> 100 ms, multiply by 1.2; < 100 ms, multiply by 1.5). Then, take the common logarithm (base 10) of the time difference, round down, and then calculate the power of 10, which is called the interval unit. The conversion rules are shown in Table 2.

[0067] Table 2

[0068] Range to which time difference belongs Updated time difference (1 times the interval unit, 2 times the interval unit) 2 times the interval unit (2 times the interval unit, 5 times the interval unit) 5 times the interval unit (5 times the interval unit, 10 times the interval unit) 10 times the interval unit

[0069] Set the number of decimal places: when the time difference >= 1 s, milliseconds are not displayed and the decimal point shows 0 digits; when the time difference < 1 s, milliseconds are displayed and the number of decimal places = round up (3 - log10(time difference in ms)).

[0070] Step 3.2: Find an integral time as the reference.

[0071] Consider the whole hour before the start time as the reference time. Starting from the reference time, with the scale increment as the step size, find the first value greater than the minimum value of the horizontal axis range, which is the first scale.

[0072] Step 4: Clip the vertical axis area and save the area information.

[0073] When clipping the vertical axis area, each graph area may contain multiple vertical axes, so each vertical axis area within the graph area needs to be clipped. Calculate the vertical axis area. The upper boundary of each vertical axis area is the upper boundary of the clipping area + the area index × (area height + blank height between areas) - scroll bar position, the lower boundary is the upper boundary + area height, the left boundary is the right boundary of the previous vertical axis, and the right boundary is directly the left boundary of the clipping area. Actually, only the values of the upper and lower boundaries are obtained at this time, and the left and right boundaries need to calculate the width of the vertical axis scale text. When the maximum value and the minimum value are the same, the scale increment is 0. To avoid the scale being displayed as a string of 0s, the default number of decimal places to be retained for the scale text needs to be set. Poll the scale text string from back to front, and the position of the first non-zero character minus the position of the decimal point is the number of decimal places. After calculating the vertical axis scale, cut off the maximum width of the text to obtain a new clipping area, and process all vertical axes in a loop. Since the number of vertical axes or the scale width in each area may be different, resulting in unequal left boundaries of the clipping areas obtained after clipping the vertical axes in each area, a temporary array m_arAxisRightMargin[] is defined to record the left boundaries of the clipping areas obtained for each area. After all areas are clipped, take the largest element in the array elements as the left boundary of the final clipping area.

[0074] Step 5: Draw the vertical and horizontal axes.

[0075] Poll all areas in the window. First, set the left and right borders of the current drawing area rectangle to be the left and right borders of the area after cutting off the top, bottom, and right areas, while the upper and lower borders are consistent with the upper and lower borders of the first vertical axis area in the area. Draw the background in each drawing area. Only the part of the drawing area within the clipping area needs to be drawn, and the background must be drawn first, otherwise it will block the scale grid. Poll all vertical axes in each area. Because the vertical axis area is calculated separately for each area, and only one area is consistent with the final left border of the clipping area, other areas need to translate the vertical axis area to the final left border of the clipping area. The distance the vertical axis area is translated to the right is the left border of the clipping area minus the right border of the current vertical axis area, that is, m_PlottingRect.left-m_arAxisRightMargin[i] (i is the order of the vertical axis areas from left to right starting from 0). When drawing the vertical axis, the current vertical axis area is intersected with the clipping area of ​​the window to which it belongs to obtain the clipping area of ​​the current vertical axis. The vertical axis is drawn at the right boundary of the vertical axis area from the starting point to the end point, and then the scale text calculated previously is drawn one by one, and then the grid lines are drawn. Since the area may contain multiple vertical axes, it will be messy to display the grid graphics if all of them are displayed, so only the last vertical axis displays the grid. When drawing the horizontal axis, the horizontal axis is drawn at the upper boundary of the horizontal axis area from the starting point to the end point, and then the scale text calculated previously is drawn one by one, and then the grid lines are drawn. Because the drawing area rectangle and the vertical axis area are updated, the structure information must be saved.

[0076] Step 6: Draw the analog quantity curve.

[0077] Poll all graphic areas. If the intersection of the current area and the clipping area is empty, skip this area. If the current area and the clipping area have an intersection, set this intersection as the clipping area of ​​the curve. Poll all curves associated with all vertical axes in the area. Only draw unselected curves. The selected curves are drawn outside the loop. First, use the binary search method to obtain the visible data points in the current display range in the data point array generated after picking points. If there are no visible data points, return directly without drawing the curve. Otherwise, draw the curve. According to the current horizontal axis range, calculate the starting point and end point of the corresponding data point, poll all data points to convert them into pixels and then draw the line. Figure 3As shown, create a temporary pixel point array, poll all data points within the horizontal axis range, convert them into pixel points. If the pixel point is the same as the previous one, do not process and continue to poll the next data point. If it is different, determine whether the difference between the integer part of the abscissa value of the data value and the previous point is greater than the decimation ratio. If the difference is not greater than the decimation ratio, the data point is considered continuous and added to the pixel point array and the temporary array, and continue to poll the next data point. If the difference is greater than the decimation ratio, the data is considered discontinuous. If the temporary array is not empty, use the data in the temporary array to draw a line, clear the temporary array, and then add the converted pixel point of the current point to the pixel point array and the temporary array; if the temporary array is empty, directly add the converted pixel point to the pixel point array and the temporary array, and continue to poll the next data point until all visible data points are processed.

[0078] Step 7: Draw the digital quantity curve.

[0079] To avoid showing diagonal lines in the digital quantity data waveform, when drawing the digital quantity, add a transitional point (X n , Y n-1 ) at the place where different values appear to make the waveform show as a square wave, where n is the data point order. However, after modifying the decimation algorithm, there are two Y values corresponding to the same X, namely Y min and Y max , and when drawing the line, the points are connected in the order in the pixel array, so a "⊥" shaped waveform will appear. Before drawing the curve, reorder the pixel point array first to ensure that the processed pixel point array has monotonically increasing X, no duplicate pixel points, and adjacent points are close. For example Figure 4As shown, 0 points are regarded as valid points, and the number of valid points nPointsCount is declared to be 1. Starting from the first pixel point, all pixel points are polled. i is the loop variable. If the X value of the current point pPoints[i] is the same as that of the last valid point pPoints[nPointsCount - 1], it may be a duplicate pixel point, and it is necessary to poll the previous valid points to check for duplicate pixel points. Poll all points before the last valid point. k is the loop variable. If pPoints[k] is the same as pPoints[i], it is a duplicate pixel point, and the loop is exited. The current point pPoints[i] is not added to the pixel point array, and the next point is polled. If there are no duplicate pixel points, the position where the current point pPoints[i] is added to the pixel point array is further determined. If the X value and Y value of the last valid point and the previous valid point are both different, and the X value of the current point pPoints[i] is the same as the X value of the last valid point, that is, the first two points are in a diagonal position, and the current point is in a corner position, then the order of the current point and the last valid point is swapped. Otherwise, the current point is directly assigned to pPoints[nPointsCount], and then the number of valid points nPointsCount is incremented by 1, and the next pixel point is polled until all pixel points are polled. When drawing a line, first move to the 0th point, and start polling the pixel point array where all points are valid after processing from the 1st point. If the X and Y of the current point and the previous point are both different, then draw a line to the position where the Y of the previous point and the X of the current point are located, that is (X n ,Y n-1 ), and then connect from the previous point to the current point; otherwise, directly connect from the previous point to the current point. Continue polling the next pixel point until all pixel points are polled, and the digital quantity curve drawing ends.

[0080] Step 8: Draw a legend.

[0081] The legend can be used to mark the curve name, select a curve, delete a curve, and change the curve position. To prevent the legend from being blocked by the waveform graph, when polling the graphic area within the polling window, the legend is drawn after the curves are drawn. First, set the legend area. The legend docks at the upper left corner of its affiliated graphic area. The upper boundary of the legend area is the upper boundary of the current graphic area, and the left boundary is the left boundary of the window clipping area. The width and height are calculated based on the width and height of all legend texts. Poll all the curves within the polling area, calculate the maximum value among the widths and heights of all curve name texts as the width and height of a single legend. Thus, the right boundary of the legend area is the left boundary plus the maximum width, and the lower boundary is the maximum height multiplied by the number of legends plus the upper boundary. However, the lower boundary cannot exceed the lower boundary of the graphic area to which the legend belongs. If it exceeds, it needs to be set to the lower boundary of the graphic area. When drawing the legend, if there is no intersection between the legend area and the window clipping area, it is not drawn. When there are many legends, they may exceed the display range of the graphic area. Therefore, when the mouse scrolls the wheel within the legend area, the hidden legends can be viewed. Divide the height of the current graphic area by the height of each legend to obtain the number of legends that can be displayed in the current graphic area. If this value is 0, the legend is not drawn. The sequence value m_nFirstDrawNum of the first displayed legend is defaulted to 0, and the maximum is the total number of legends minus the number of legends that can be displayed. Set the intersection of the legend area and the window clipping area as the clipping area for legend drawing. The position rectBitmap of the first legend within the current graphic area is the left and upper boundaries of the legend area, and the width and height are the width and height of the legend. Poll all the curves within the current graphic area. If the curve index is less than m_nFirstDrawNum, it is not drawn, and the next curve is polled continuously. Otherwise, the legend text is output. If the current curve is the selected curve, the text background color is set. If multiple curves are associated with one vertical axis, except for the first curve, the subsequent curves are linked to the legend of the previous curve by drawing an "L"-shaped broken line. rectBitmap is moved downward by the height of one legend. If the upper boundary of rectBitmap has exceeded the lower boundary of the current graphic area, the loop is exited. Otherwise, the next curve is polled continuously. When the mouse scrolls the wheel within the legend area, if it scrolls down once, m_nFirstDrawNum is added by the scroll step. If the sum exceeds the range, it is set to the maximum value. If it scrolls up once, m_nFirstDrawNum is subtracted by the scroll step. If the difference is less than 0, it is set to 0.

[0082] Step 9: Draw the vertical scroll bar.

[0083] Poll all windows. The left boundary of the vertical scroll bar area is the right boundary of the window clipping area, the upper boundary is the upper boundary of the window clipping area, the width is the common width, and the height is the same as the height of the window clipping area. Update the scroll bar properties according to the maximum range of the vertical scroll bar determined in Step 3.

[0084] The entire drawing process is completed, and the drawing test results are as Figure 5 shown. To avoid repeatedly calling the drawing function during operation, the redrawing of the graph is controlled by a flag bit and the number of repeated refreshes. The graph is redrawn only when the flag bit is TRUE and the number is greater than 1.

[0085] This application also provides an electronic device, which may include: at least one processor and at least one memory.

[0086] Among them, the processor may include one or more processing cores. The processor uses various interfaces and lines to connect various parts within the entire server. By running or executing instructions, programs, code sets, or instruction sets stored in the memory, and by calling data stored in the memory, it executes various functions of the server and processes data.

[0087] Optionally, the processor 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 processor 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 modem may not be integrated into the processor and may be implemented separately by a single chip.

[0088] Among them, the memory may include a Random Access Memory (RAM), or may also include a Read-Only Memory. Optionally, the memory includes a non-transitory computer-readable storage medium. The memory can be used to store instructions, programs, codes, code sets or instruction sets. The memory may include a program storage area and a data storage area. Among them, the program storage area can 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 method embodiments, etc.; the data storage area can store the data involved in the above-mentioned method embodiments. Optionally, the memory may also be at least one storage device located far from the aforementioned processor. As a computer storage medium, the memory may include an operating system, a network communication module, a user interface module, and an application program.

[0089] The present application also provides a computer-readable storage medium storing instructions. When executed by one or more processors, it causes an electronic device to execute the method as described in one or more of the above embodiments.

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

[0091] If the 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 the technical solution, can be embodied in the form of a software product. The computer software product is stored in a memory and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method according to each embodiment of the present application. And the aforementioned memory includes: various media such as USB flash drives, mobile hard disks, magnetic disks, or optical discs that can store program codes.

[0092] The above are only the embodiments of the present invention and are not intended to limit the present invention. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present invention shall be included in the protection scope of the present invention.

Claims

1. A double-buffered curve drawing method with layout self-adaptation, characterized in that, Collect key parameters of all devices on the entire production line for drawing real-time waveforms. The specific drawing steps include: S1 Create a buffer and divide the buffer into multiple regions; S2 Set a window. Draw the corresponding region one by one according to the set window to complete the window drawing. Then divide each region within the window, set the clipping area, clip the horizontal axis area according to the clipping area, calculate the scale of the horizontal axis and the maximum range of the vertical scroll bar; clip the vertical axis area and save the area information; S3 Draw the vertical axis and the horizontal axis. First, set the left and right boundaries of the rectangle of the current drawing area, draw the background within each drawing area, and then draw the vertical axis and the horizontal axis; S4 Draw curves, including analog curves and digital curves; When drawing an analog curve, poll all curves associated with the vertical axis within the region; When drawing a digital curve, first reorder the pixel point array to ensure that the processed pixel point array X is monotonically increasing, has no duplicate pixel points, and adjacent points are close; S5 Draw a legend; draw the legend after the curves are drawn; then, draw the scroll bar according to the maximum range of the vertical scroll bar determined in S2.

2. The double-buffered curve drawing method with layout adaptability according to claim 1, wherein The specific implementation method of S1: Create a background buffer of the CDC object, obtain the device context of the control window, create a memory device context environment background buffer compatible with the specified device according to the window device context, create a bitmap compatible with the specified device environment with the size of the client area of the control according to the context of the window device, select the object in the background buffer as the previously created bitmap, and set the background of the memory bitmap on the background buffer.

3. The layout self-adaptive double-buffer curve drawing method according to claim 1, wherein When setting the window in S2, adjust the regions corresponding to all windows according to the row number and column number of the set window; save the relevant information of the window to the structure array, poll all windows in the array. Each window contains at least one graphic area, one horizontal axis area, and one vertical scroll bar area. Each graphic area contains a vertical axis area, a curve area, and a legend area, and draw each part for each window one by one.

4. The layout self-adaptive double-buffered curve drawing method according to claim 1, wherein The specific implementation method of clipping the horizontal axis area in S2: When clipping the horizontal axis area, the left and right boundaries of the clipping area are used as the left and right boundaries of the horizontal axis area, and then calculate the scale of the horizontal axis. The lower boundary of the window area minus the height of the scale text is the new lower boundary of the window area, and the right boundary is moved a little to the left to make the text fully displayed. The intersection area of the clipping area and the new window area is used as the new clipping area. In addition, a reasonable scale width should be displayed on the time axis; After clipping the horizontal axis, the height of the clipping area is determined, and the height of each graphic area of the window is calculated according to the total number of regions. The calculation formula is: Height of each graphic area within the window = (height of the clipping area + blank height between regions) ÷ number of regions - blank height between regions, After the height of the graphic area is determined, the maximum range of the vertical scroll bar is also determined. The calculation formula is: Maximum range = height of each graphic area within the window * number of regions + blank height between regions * (number of regions - 1).

5. The layout self-adaptive double-buffered curve drawing method according to claim 1, characterized in that The specific implementation method of clipping the vertical axis area in S2 is as follows: when clipping the vertical axis area, each graphic area may contain multiple vertical axes, so each vertical axis area in the graphic area needs to be clipped, and the vertical axis area is calculated: the upper boundary of each vertical axis area is the upper boundary of the clipping area + the area index × (area height + the blank height between areas) - the scroll bar position, the lower boundary is the upper boundary + the area height, the left boundary is the right boundary of the previous vertical axis, and the right boundary is directly the left boundary of the clipping area; The left and right boundaries need to calculate the width of the vertical axis scale text. When the maximum and minimum values ​​are the same, the scale increment is 0. In order to avoid the scale being displayed as a string of 0s, the scale text must set the default number of decimal places to be retained. The scale text string is polled from back to front. The position of the first non-zero character minus the position of the decimal point is the number of decimal places. After calculating the vertical axis scale, the maximum text width is cut off to get a new clipping area. All vertical axes are processed in a loop. Since the number of vertical axes or scale widths in each area may be different, the left boundaries of the clipping area obtained after clipping the vertical axis in each area are not the same. Therefore, a temporary array is defined to record the left boundary of the clipping area obtained for each area. After all areas are clipped, the largest element in the array is taken as the left boundary of the final clipping area.

6. The layout self-adaptive double-buffered curve drawing method according to claim 1, wherein, The specific implementation method of drawing the vertical axis and horizontal axis in S3 is as follows: When drawing the vertical axis, the current vertical axis area is intersected with the clipping area of ​​the window to which it belongs to obtain the clipping area of ​​the current vertical axis. The vertical axis is drawn from the starting point to the end point at the right edge of the vertical axis area. Then the previously calculated scale texts are drawn one by one, and then the grid lines are drawn. Only the last vertical axis displays the grid. When drawing the horizontal axis, draw the horizontal axis from the starting point to the end point at the upper boundary of the horizontal axis area, then draw the previously calculated scale texts one by one, and then draw the grid lines; when drawing the horizontal axis, you can switch between points and time, and add the processing of scale display of whole points when the horizontal axis displays time; Drawing the vertical and horizontal axes updates the drawing area rectangle and the vertical axis area, and saves the structure information.

7. The layout self-adaptive double-buffered curve drawing method according to claim 1, characterized in that The specific implementation method of drawing the analog curve in S4: Poll all graphic regions. If the intersection of the current region and the clipping region is empty, skip this region; if the current region and the clipping region have an intersection, set this intersection as the clipping region of the curve. Poll all the curves associated with the vertical axis within the region and only draw the unselected curves. The selected curves are drawn outside the loop. First, obtain the visible data points within the current display range in the data point array generated after picking points through the binary search method. If there are no visible data points, directly return without drawing the curve; otherwise, draw the curve. According to the current horizontal axis range, calculate the starting point and ending point of the corresponding data points. Poll all the data points, convert them into pixel points and then draw lines. Create a temporary pixel point array. Poll all the data points within the horizontal axis range, convert them into pixel points. If it is the same as the previous point, do not process and continue to poll the next data point. If it is different, determine whether the difference between the integer value of the abscissa of the data value and the previous point is greater than the picking point ratio. If the difference is not greater than the picking point ratio, it is considered that the data points are continuous and added to the pixel point array and the temporary array, and continue to poll the next data point; if the difference is greater than the picking point ratio, it is considered that the data is not continuous. If the temporary array is not empty, use the data in the temporary array to draw lines, clear the temporary array, and then add the pixel point obtained by converting the current point to the pixel point array and the temporary array. If the temporary array is empty, directly add the converted pixel point to the pixel point array and the temporary array, and continue to poll the next data point until all visible data points are processed.

8. The layout self-adaptive double-buffered curve drawing method according to claim 1, characterized in that, The specific implementation method of drawing the digital quantity curve in S4: To avoid the slanted line display of the digital quantity data waveform, when drawing the digital quantity, a transitional point (X n , Y n-1 ) is added at the position where different values appear to make the waveform display as a square wave; Before drawing the curve, first reorder the pixel point array to ensure that the processed pixel point array X is monotonically increasing, has no duplicate pixel points, and adjacent points are close; Poll all the pixel points starting from the first pixel point. If it is determined that there are duplicate pixel points, exit the loop, do not add the current point to the pixel point array, and continue to poll the next point; if there are no duplicate pixel points, further determine the position where the current point is added to the pixel point array. When drawing a line, starting from the first pixel point, poll the pixel point array where all processed points are valid points. If both the X and Y coordinates of the current point are different from those of the previous point, then draw a line to the position where the Y coordinate of the previous point and the X coordinate of the current point are located, that is, (X n ,Y n-1 ), and then connect from the previous point to the current point; otherwise, directly connect from the previous point to the current point, continue to poll the next pixel point until all pixel points are polled, and the digital quantity curve drawing ends.

9. An electronic device, characterized in that, The electronic device includes a memory and a processor. The memory stores a computer program, and the processor is used to call and run the computer program stored in the memory to execute the layout adaptive double-buffered curve drawing method according to any one of claims 1 to 8.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores instructions, which when executed by one or more processors, cause the electronic device to execute the layout adaptive double-buffered curve drawing method according to any one of claims 1 to 8.

Images