C # Curve control curve drawing real-time curve multi-curve control development

Prepare

This article will use a nuget exposed components to achieve the display of the curve, including a variety of display patterns and configurations to meet a variety of different scenarios, so that the rapid development of the system for everyone.

You can download the installation in the NuGet Manager in Visual Studio, or you can enter the following instructions directly in the NuGet console to install:

Install-package hslcommunication

NuGet Installation Tutorial Http://www.cnblogs.com/dathlin/p/7705014.html

QQ Group of Technical Support: 592132877 (the component version update details will be released in the group in the first time)

If you are in the process of using the control of any questions, or found a bug, or feature suggestions, etc. can be added to the QQ group above for discussion. Article updated: January 24, 2018 18:25:50

The following plan supports:

• The plan supports the display of the x-axis text information, but the specific logical implementation is still to be confirmed, how to better display
• Plan to support dynamic display of data values while moving the mouse over data

Summary

The curve control is one of the many controls in the component, so why write a blog separately, just because the curve control is much more complex than the other controls, not a few properties, the following is an enumeration of the characteristics of this curve control:

• Provides convenient API calls to display the content of the curve information without the need for complex configuration
• Some information of the curve interface can be freely customized, such as the color of the axis, whether the dashed line is displayed, etc.
• The height of the size of the adaptive, no matter how you adjust the size of the control, always friendly to display
• Data stretch fill and pixel fill are supported in two modes, depending on the following code
• Multi-curve support, support to display multiple curve information at the same time, each curve can be independent of the specified color, line width and so on.
• Support for two reference systems, meaning that a control allows 2 different data spans to be displayed, each curve can show multiple curves

Description of other controls address: http://www.cnblogs.com/dathlin/p/8150516.html

Complete API description for the component: http://www.cnblogs.com/dathlin/p/7703805.html

To use a component's control, in addition to using NuGet to install the component, you also need to drag the component's DLL file (found in the packages of your project) to the toolbar if you are referencing local, just drag and drop it locally:

After the drag is finished, the effect is as follows:

1. Single curve use

After dragging the control to the window interface, now the interface below, you can arbitrarily stretch the size, adjust to a dashed line to look at the more clear moment stop:

We see the data span of the left and right axis is 0-100, now we have a demand, in hand, there are 300 0-200 of the data need to be displayed, then set the left-right vertical axis of the data span

Next, you can write the displayed code, and the data is random:

        private void Userbutton1_click (object sender, EventArgs e)        {            float[] data = new float[300];            for (int i = 0; i < data. Length; i++)            {                Data[i] = random. Next (201);            }            Usercurve1.setleftcurve ("A", data, Color.dodgerblue);        }

The results appear as follows:

See, quite simple and convenient, if you think the current data is too dense, want to loose a bit, want the data stretched full X axis, no problem, because the current default mode is pixel mode, so switch to stretch mode.

Then run to see the effect:

Next we are going to update the curve "A", we assume that your data array has been updated, it is possible to update only one data, it is possible to update all, when the data is updated when the color is specified, because the specified color is not used.

        private void Userbutton3_click (object sender, EventArgs e)        {            //Assume that your data array has been updated            float[] data = new float[300 ];            for (int i = 0; i < data. Length; i++)            {                Data[i] = random. Next (201);            }            A has been assigned a color before, subsequent data updates do not need to be re-specified, specified also invalid            //If you need to reset the color, or line width, you need to Removecurve, and then re-create the curve information            Usercurve1.setleftcurve ("A", data);        }

From the above data update we found that as long as the data is updated, the data display is constantly called, then we can display real-time data, and the only trouble is that we need to maintain our own data array. So the current method is only suitable for static data display

2. Single-curve real-time data

This is usually the case when we need to display some real-time data, that is to say, every 1 seconds (just a chestnut) there is a new data collection, which is then added to the curve, and the curve is shifted.

2.1 Pixel point mode (please confirm Isabscissastrech is false):

We first explain the default mode, the so-called pixel mode refers to the horizontal axis, a pixel point to display a data, if you have a horizontal axis pixel length of 1000, then you can display 1000 data, of course, in real-time display, you do not need to tube so much, you just have to be responsible for regular to plug in the data.

The first step is to initialize first: increase the curve information of the specified name first, curve color, curve width, etc.

        private void Userbutton4_click (object sender, EventArgs e)        {            //Here data passed in the array length is empty and cannot be passed null            Usercurve1.setleftcurve ("B", new float[] {}, Color.tomato);        }

We write a button, start the timer, and go to the new data to simulate the data we read from other devices:

        private void Userbutton5_click (object sender, EventArgs e)        {            Timer timer = new timer ();            Timer. Interval = +;            Timer. Tick + = (sender1, e1) =            {                usercurve1.addcurvedata ("B", random. Next (201);            };            Timer. Start ();        }

such as the above two button information, you must first click on the button 4 for curve initialization, button 5 Click to have the effect. Eventually you will see that the curves are refreshed every 100ms, with new data incrementing continuously.

When the number of curves is more than the currently visible points, the curve will automatically move to the left, immediately after you stretch the entire control, it can still work normally, the data points can be displayed automatically updated, in memory cache 2048 data points to support the effect of the stretch conversion.

Of course, it also supports updating multiple data at once, although this is rare, but it is important to note that the data for one update must be less than 2048.

Usercurve1.addcurvedata ("B", new float[] {random. Next (201), Random. Next (201), Random. Next (50, 201)});

2.2 Stretch mode (make sure Isabscissastrech is true):

Stretching mode means that no matter how many points you have in your data array, you force the entire horizontal axis to be stretched, with just 2 data, or 1000 data, we can look at this preliminary effect first.

        private void Userbutton4_click (object sender, EventArgs e)        {            //Here data passed in the array length is empty and cannot be passed null            Usercurve1.setleftcurve ("B", new float[] {}, Color.tomato);        }        private void Userbutton5_click (object sender, EventArgs e)        {            Timer timer = new timer ();            Timer. Interval = +;            Timer. Tick + = (sender1, e1) =            {                usercurve1.addcurvedata ("B", random. Next (201);            };            Timer. Start ();        }

As you can see, in addition to modifying the properties below, it is possible to test, I randomly intercept an interface:

You can see all the curve information and move it to the left. But there is still a problem, so move on to the left. Then the curve will become more and more dense. What to do, there is always a limit, then the code is modified to the following:

        private void Userbutton4_click (object sender, EventArgs e)        {            //Here data passed in the array length is empty and cannot be passed null            Usercurve1.setleftcurve ("B", new float[] {}, Color.tomato, 500); Specifies an upper limit of 500 data, which is only valid for Stretch mode        }        private void Userbutton5_click (object sender, EventArgs e)        {            Timer timer = New Timer ();            Timer. Interval = +;            Timer. Tick + = (sender1, e1) =            {                usercurve1.addcurvedata ("B", random. Next (201);            };            Timer. Start ();        }

Let's look at the curve of the stretch mode:

Would you try stretching the controls again? Stretching mode means that no matter how large or small your control is, you specify 500 points, which is 500 points, even if your control stretches, it's still 500 points, just not that dense.

As for adding multiple data at a time is consistent with the above pixel-point pattern.

2.3 Mode Differences and selection

Pixel mode, casually looking at the data is relatively dense, but the advantage is high resolution display, can display more data.

Stretch mode does not increase the amount of data displayed while the control is stretched, but it can control the degree of density.

Each has pros and cons, it is recommended to first use the pixel mode, see how the effect, the general data changes are slowly, so the curve will not be like the test data as random string. If the data is in a bad string, then use stretch mode.

3. Multi-curve use

Multi-curve and single-curve mode is very similar, nothing more than a few curves, each operation of the curve, the new data are exactly the same, only the multi-curve mode is unified, or all the pixel mode, or all of the stretching mode, all the characteristics and the previous two are similar.

To illustrate the use, for example, you have multiple devices (2 or more), each with a temperature information, and now a direct comparison of real-time data, it is of course best to put three curves together display.

We name three curves for "A", "B", "C" and then assume that all data is between 100-200, data A is 160-180 random, data B is 150-170 random, data C is 155-165 random

It is easy to test here and uses the pixel-point mode . Code is consistent in stretch mode

The initialization button and the start Timer button code are as follows:

        private void Userbutton4_click (object sender, EventArgs e)        {            usercurve1.setleftcurve ("A", new float[] {}, Colo R.tomato);            Usercurve1.setleftcurve ("B", new float[] {}, color.dodgerblue);            Usercurve1.setleftcurve ("C", new float[] {}, Color.limegreen);        }        private void Userbutton5_click (object sender, EventArgs e)        {            Timer timer = new timer ();            Timer. Interval = +;            Timer.  Tick + = (sender1, e1) =            {                usercurve1.addcurvedata (                    new string[] {"A", "B", "C"},                    new float[] { Random. Next (181), Random. Next (171), Random. Next (155, 165)});            Timer. Start ();        }

In the new data code, here used a command to add three of data, of course you can also write three instructions, respectively, add, Note that will cause the interface to refresh three times! So not recommended.

The interface is as follows:

3. Dual-coordinate use

Let's look at a fairly complex usage scenario, assuming we have a device that needs to monitor 4 curves, 2 temperatures, 2 pressures, a temperature range of 0-200, and a pressure range of 0-5 MPa, which is also achievable if you want to display in a control. Adjust the left and right coordinate ranges first.

The pixel mode is still used here, and we will then write the code that initializes the code and adds the data:

private void Userbutton4_click (object sender, EventArgs e) {usercurve1.setleftcurve ("A", new float[]            {}, Color.tomato);        Temperature 1 Usercurve1.setleftcurve ("B", new float[] {}, Color.dodgerblue);         Temperature 2 Usercurve1.setleftcurve ("C", new float[] {}, Color.limegreen);            Pressure 1 Usercurve1.setleftcurve ("D", new float[] {}, color.purple); Pressure 2} private void Userbutton5_click (object sender, EventArgs e) {Timer timer = new            Timer (); Timer.            Interval = 100; Timer. Tick + = (sender1, e1) = {Usercurve1.addcurvedata (new string[] {"A", "B", "C", "D"}, new float[] {random. Next (181), Random. Next (171), (float) random. Nextdouble () * 3.5f, (float) random.            Nextdouble () * 1f});            }; Timer.        Start (); }

Effects such as:

4. Background color Adjustment

I modified the background for dark black, the instant there is the effect of black technology. Of course, the color of the line can be adjusted a little better

4. Concluding remarks

Thanks for reading.

C # Curve control curve drawing real-time curve multi-curve control development