Planning ECG in Winforms
I have no previous experience with plotting in winforms, in one form I want to plot an EKG. or lets say the wave is sin or any wavefunction in a specific area, but what I am doing is ecg. the rest of the form will be a normal form with buttons and labels,
can anyone be good enough to go through the tutorial
:)
source to share
You have few options, you can write your own control that will process the data and display it. For more complex plots, this can be a little tricky, but the basics are always the same, setting the ranges for the X and Y values and then just draw a line using GDI going from left to right without pretending anything. As it can get a little complicated for more advanced features, you can use some chart controls, I would read this post or check out codeproject.com.I remember I saw several attempts to write some decent chart controls that are open source. new articles will probably be coded in WPF, but you should also find something older. Edit:
Some links you may find helpful: A lib graph plot whose main purpose is to mimic an ECG or other graph building lib
source to share
You need to create a custom control.
public class MyECGDrawer : Control{}
In it, you override the OnPaint event
protect override OnPaint(PaintEventArgs pe ){}
Then, in the draw function, you draw your graphic the way you want, let's say sin (x)
// refresh background
pe.Graphics.FillRectangle( Brushes.White, 0, 0, Width, Height );
int prevX = -1, prevY = -1;
for(int x = 0; x < Width; x++ )
{
if( prevX >= 0 )
{
pe.Graphics.DrawLine( Pens.Black, prevX, prevY, x, Math.sin(x) );
}
prevX = x;
prevY = Math.sin(x);
}
To force the ECG to redraw, you call the .Invalidate () function on the control. You should be able to drag the control on the form from the designer.
At the end, the class will look like
public class MyECGDrawer: Control {}
In it, you override the OnPaint event
public class MyECGDrawer : Control
{
protect override OnPaint(PaintEventArgs pe )
{
// refresh background
pe.Graphics.FillRectangle( Brushes.White, 0, 0, Width, Height );
int prevX = -1, prevY = -1;
for(int x = 0; x < Width; x++ )
{
if( prevX >= 0 )
pe.Graphics.DrawLine( Pens.Black, prevX, prevY, x, Math.sin(x) );
prevX = x;
prevY = Math.sin(x);
}
}
}
source to share
I wrote the following and tested it. You seem to be doing what you want, but note that this is just a sin (x) plot in a loop with no delay - i.e. The graph for sin (x) flows so fast from the left edge that you can hardly see it. However, you can break any line inside the loop and then loop through the loop with F5 to see how slow it is - presumably your ECG streaming data will only arrive at a certain rate, so this shouldn't be a problem in your implementation.
In the following case, the monitor is a PictureBox in winforms. Everything else is local.
private void drawStream(){
const int scaleX = 40;
const int scaleY = 40;
Point monitorTopLeft = new Point(0, 0);
Point MonitorTopLeftMinus1 = new Point(-1, 0);
int halfX = monitor.Width / 2;
int halfY = monitor.Height / 2;
Size size = new Size(halfX + 20, monitor.Height);
Graphics g = monitor.CreateGraphics();
g.TranslateTransform(halfX, halfY);
g.ScaleTransform(scaleX, scaleY);
g.Clear(Color.Black);
g.ResetClip();
float lastY = (float)Math.Sin(0);
float y = lastY;
Pen p = new Pen(Color.White, 0.01F);
float stepX = 1F / scaleX;
for (float x = 0; x < 10; x += stepX) {
g.CopyFromScreen(monitor.PointToScreen(monitorTopLeft), MonitorTopLeftMinus1, size, CopyPixelOperation.SourceCopy);
y = (float)Math.Sin(x);
g.DrawLine(p, -stepX, lastY, 0, y);
lastY = y;
}
}
Additional information that may be helpful:
- The start in the image window starts in the upper left corner. TranslateTransform allows you to translate (i.e. move) the beginning. In this example, I've translated it to half the width of the image window and half its height.
- The ScaleTransform scales the image - note that it even increases the width of the pen used to draw in Photoshop, so the pen width is set to 0.01.
- CopyFromScreen performs bit by bit. Its origin is relative to the screen, destination is relative to the image, and the size of the move rectangle ignores any transformations (such as the scale and broadcast transforms we added).
- Note that the X coordinates in the DrawLine method are -stepx and 0. All drawing basically happens right on the y-axis (ie x = 0) and then CopyFromScreen moves the drawing part to the left so that it "flows" to the left ...
source to share
If you are not doing this as a learning activity, you might consider looking at the available Microsoft Chart Controls for .NET available.
That being said, I would suggest the following guidelines if you want to make your own.
- Create a custom control to encapsulate the plot rendering rather than rendering directly on the form.
- In your control, expose properties to get / set the data you want to display, and add any other properties you want to control the rendering (zoom, pan, colors, etc.).
- In your control, either override the OnPaint method or create an event handler for the Paint event. These methods will have a PaintEventArgs object passed to them, which contains the Graphics object as a property. The Graphics object methods are used to render points, lines, etc. To the control when it needs to be drawn. Most drawing operations require either a pen (paths / lines) or a brush (filled areas). You can use stock objects for these operations (like Pens.Black or Brushes.Red), or you can create your own (see the documentation). If you create your own objects, be sure to dispose of them after using them (for example, by using a using statement or by calling Dispose).
There are some good books on GDI +. I suggest choosing one if you go deep.
source to share