Live waveform plot

Question

Im trying to think of a good design to plot a real-time waveform in .Net. Every x millseconds a sample gets added, and when the waveform is at the end of the page, it resets to the beginning and starts overwriting the existing waveform (like in ECG heartrate monitors).

In the past I did this in a very simple way: just draw a pixel for each sample at a fixed interval. While this worked okay, I soon got into trouble when I tried to add any kind of background, for example: a grid. When a sample/pixel overlaps the grid, it gets complicated to clear it on the second pass, since you cannot just overwrite it with a white pixel.

Maybe it would be easier to use WPF insteads of Winforms for this, since I could just make the waveform an element, and the background should automaticly preserved/redrawn when I move the element.

How would you solve this?

Answer 1

You might put your curve into a PathGeometry (or StreamGeometry) in the Data property of a Path control.

<Canvas>
    <Path Stroke="Black" StrokeThickness="3">
        <Path.Data>
            <PathGeometry>
                <PathFigure x:Name="figure" IsClosed="False">
                    <PathFigure.Segments>
                        <PolyLineSegment x:Name="polyline"/>
                    </PathFigure.Segments>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Canvas>

Update the PathGeometry in code-behind:

figure.StartPoint = ...;
polyline.Points.RemoveAt(...);
polyline.Points.Add(...);