adding a panel to a form.

bimbambumbum

Hey Thanks, Will you let me in on how you manipulate the bitmapdata - that is ...working with the two spectrogram sections? I have the panel shown and can fill-in data. I'm looking and looking and .NET is so huge and hard to get into I think. I guess I can solve this by copying data around in a loop but that doesn't seem elegant! Cheers Tom

modified on Wednesday, September 22, 2010 8:50 PM

Luc Pattyn · modified on Wednesday, September 22, 2010 8:50 PM

In my simple test I plotted a black sine wave on a yellow background; I did not use BitmapData, I kept a Graphics open on the Bitmap, and just did (plot is the double-buffered Panel):

private void AddNewData() {
int w=plot.Width;
int h=plot.Height;
int x=dataCount%w;
bmg.DrawLine(Pens.Yellow, x, 0, x, h);
int y=(int)(h*(0.5+0.45*Math.Sin(dataCount*0.07)));
if (oldy<0) oldy=y;
bmg.DrawLine(Pens.Black, x, oldy, x, y);
oldy=y;
dataCount++;
}

When you need fast access to the individual pixels of one column, you would not use SetPixel; instead enable unsafe code, do LockBits/UnlockBits, use a byte pointer, and advance it by Bitmap.Stride to go to another row. Examples are plenty, Bob Powell (Google!) has good ones. :)

Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles] Nil Volentibus Arduum

Please use <PRE> tags for code snippets, they preserve indentation, and improve readability.

bimbambumbum

Aaah, ok! So you are doing a spectrum-analyzer (frequency vs gain) and not a spectrogram (frequency vs. time vs. gain) - like this one: http://www.youtube.com/watch?v=UcBDSoVs42M[^] Or am I missing something? I have the bitmapdata ready and also the FFT data ready to be injected and then I need to move data around inside the bitmapdata to make the shift of the bitmap. I need to do this the fastest way! for now I will just do it the heavy way using a loop. Would be better though to copy blocks around using a rectangle() suggestions are appriciated! Thx Tom

Luc Pattyn

I wasn't doing any spectrumthingy, I was trying what resembles a curve plotter, or a continuous oscilloscope (one channel), however rather than just line plotting, I used the circular bitmap approach we discussed before (so nothing gets copied by me) and two Graphics.DrawImage(). If the new column needs more than a simple "set entire background"+"set a little foreground line segment", then you probably need to copy in an entire column, hence the LockBits and pointer stuff suggestion. Link.[^] Turning a bitmap-based oscilloscope into something more complex should not affect flickering, as the panel is double-buffered anyway, so what happens on the screen remains the same. BTW: nice movie! :)

Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles] Nil Volentibus Arduum

Please use <PRE> tags for code snippets, they preserve indentation, and improve readability.

bimbambumbum

Hi Luc I'm about to give up on the panel approach and just use the dramimage-method and live with the flickering. Below you can see me panel approach...it does work but it flickers just a much as the drawimage approach. Do you mind taking a look at my code and tell me what I'm doing wrong? I'm not into the terminology of windows programming so I'd appreciate a no-brainer description on how to do this :) My drawing code looks like this:

        g = pe.Graphics;

        int H = myBitmap.Height;
        int W = myBitmap.Width;

        Rectangle rect = new Rectangle(0, 0, W, H);
        myBitmapData = myBitmap.LockBits(rect, System.Drawing.Imaging.ImageLockMode.ReadWrite, myBitmap.PixelFormat);

        // Get the address of the first line.
        IntPtr ptr = myBitmapData.Scan0;

        // Declare an array to hold the bytes of the bitmap.
        int bytes = myBitmapData.Stride \* H;
        byte\[\] rgbValues = new byte\[bytes\];

        // Copy the RGB values into the array.
        System.Runtime.InteropServices.Marshal.Copy(ptr, rgbValues, 0, bytes);

        // Shift the first N-1 columns one pixel to the right
        for (int ii = 0; ii < H; ii++)
            for (int jj = (ii + 1) \* (3 \* W) - 1; jj > (ii \* W \* 3) + 3; jj -= 3)
            {
                rgbValues\[jj\] = rgbValues\[jj-3\];
                rgbValues\[jj-1\] = rgbValues\[jj-4\];
                rgbValues\[jj-2\] = rgbValues\[jj-5\];
            }

        // fill in some random data in the first column
        int offset = W \* 3;
        for (int counter = 0; counter < H; counter += 1)
        {
            rgbValues\[counter \* offset\] = (byte)rnd.Next(255);
            rgbValues\[counter \* offset + 1\] = (byte)rnd.Next(255);
            rgbValues\[counter \* offset + 2\] = (byte)rnd.Next(255);
        }

        // Copy the RGB values back to the bitmap
        System.Runtime.InteropServices.Marshal.Copy(rgbValues, 0, ptr, bytes);

        // Unlock the bits.
        myBitmap.UnlockBits(myBitmapData);
        myPanel.Location = new Point(XREF, YREF);
        myPanel.Width = myBitmap.Width;
        myPanel.Height = myBitmap.Height;
        myPanel.BackgroundImage = myBitmap;
        this.Controls.Add(myPanel);

My panel class (read that double buffering with a panel should be done like this):

public class DoubleBufferPanel : Panel
{

Luc Pattyn

Hi Tom, 1. in your DoubleBufferPanel constructor, all you need is this.DoubleBuffered = true; I think it is equivalent to what you have though. 2. I'm a bit confused by your code:

this.Controls.Add(myPanel);

if that really sits inside the Paint handler you are adding a panel each time, which may result in the Panel being repainted twice, thrice, etc later on, causing unnecessary screen activity, hence flickering. 3. I'm horified by:

myPanel.BackgroundImage = myBitmap;

What you do here is, whenever the system thinks it needs to repaint the panel you also give it a new background image, causing it to need yet another repaint. So it is probably repainting continuously. 4. And finally I'm disappointed by:

// Copy the RGB values into the array

We already established there was absolutely no need to do that. With a circular bitmap, update "the next" column, then paint both halves at the right position. In summary: - create a doublebuffered panel once - add it to your form once - never use the BackgroundImage - have an updateData() method that stores new pixels in one column of the bitmap (I kept a Graphics to do that) - in your Paint handler, have only two statements, both e.Graphics.DrawImage() with the correct parameters. Warning: you cannot keep LockBits open forever as DrawImage would then fail, so if you use LockBits, you must call UnlockBits at the end of the column update, otherwise you can't have it painted. You can keep a Graphics open on the bitmap though. :)

Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles] Nil Volentibus Arduum

Please use <PRE> tags for code snippets, they preserve indentation, and improve readability.

bimbambumbum

Hi Luc Hmmm, maybe I should just realize that I'm not at a sufficient level to pull this off :( 1. I will try your suggestion also! 2. The reason for doing the this.controls.add(myPanel) was because if I instantiated a panel and didn't do this then I never got to see it in the windows form. 3. This was the only way for me to see the bitmap inside the panel. Searched google and didn't find any other options so I thought this was the right way. what is the right way to do it? 4. Yeah, I'm disappointed too. I read your replies again and again and didn't really understand the circular buffer handling scheme... Guess I should have asked for that explicitly. If you have the full code I'd be happy to see it. I'm thinking about going back to OpenGL I think that is easier for me since I once succeeded doing this in that framework. Correction: I DO understand your circular buffer handling in principle (I basically do it that way every day for audio processing at work) but not within a panel in .NET. Thanks for your effort Tom

modified on Saturday, September 25, 2010 11:52 AM

Luc Pattyn · modified on Saturday, September 25, 2010 11:52 AM

OK, here are the most relevant chunks of my experiment, all is in the MainForm class; I'll probably crank out another little article by the end of next week:

// some data members
private Bitmap bmPlot;
private int dataCount;
private BackgroundWorker bgw;
private bool running;
private int oldy=-1;
private Graphics bmg;

// the paint handler
private void plotter(object sender, PaintEventArgs e) {
if (bmPlot!=null) {
Graphics g=e.Graphics;
int w=plot.Width;
int h=plot.Height;
int x=dataCount%w;
g.DrawImage(bmPlot, new Rectangle(0, 0, w-x, h), new Rectangle(x, 0, w-x, h), GraphicsUnit.Pixel);
g.DrawImage(bmPlot, new Rectangle(w-x, 0, x, h), new Rectangle(0, 0, x, h), GraphicsUnit.Pixel);
}
}

// the button that causes things to start plotting
private void btnStart_Click(object sender, EventArgs e) {
log("btnStart_Click");
btnStop.Enabled=true;
btnStart.Enabled=false;
running=true;
dataCount=0;
oldy=-1;
int w=plot.Width;
int h=plot.Height;
bmPlot=new Bitmap(w, h);
bmg=Graphics.FromImage(bmPlot);
bmg.FillRectangle(Brushes.Yellow, 0, 0, w, h);
plot.Refresh();
bgw=new BackgroundWorker();
bgw.DoWork+=worker;
bgw.ProgressChanged+=reporter;
bgw.WorkerReportsProgress=true;
log("starting bgw");
bgw.RunWorkerAsync();
}

and all the code that belongs to the BGW, which takes care of modifying the bitmap content (one column at a time):

private void worker(object sender, object e) {
while (running) {
AddNewData();
bgw.ReportProgress(0);
Thread.Sleep(30);
}
}

private void reporter(object sender, object e) {
log("reporter");
plot.Invalidate();
}

private void AddNewData() {
int w=plot.Width;
int h=plot.Height;
int x=dataCount%plot.Width;
bmg.DrawLine(Pens.Yellow, x, 0, x, h);
int y=(int)(h*(0.5+0.45*Math.Sin(dataCount*0.07)));
if (oldy<0) oldy=y;
bmg.DrawLine(Pens.Black, x, oldy, x, y);
oldy=y;
dataCount++;
}

:)

Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles] Nil Volentibus Arduum

Please use <PRE> tags for code snippets, they preserve indentation, and improve readability.

bimbambumbum

Hi Luc You are a true gentleman..and fast responder too :) Actually your bitmap manipulation looks the same as the code I did initially (presented in the other thread) so I was happy to see some similarity. The threading coding I'm not familar with but I think that I might get where I want if I can just declare and use the panel the same way as you do. You code doesn't show that unfortunately. I'd hate to ask you for more help because I know I've been asking you too much...so if you just send me a notification when you post your article next week (or whenever it is shared) I'd be happy. Added: Hey it looks like that the picturebox should be added to the panel itself ...I thought one could put in a bitmap directly on the panel. Hopefully doing that will solve my flickering problem! Thanks for your help and patience :) Tom

modified on Saturday, September 25, 2010 5:46 PM

Luc Pattyn · modified on Saturday, September 25, 2010 5:46 PM

There is nothing much special about the panel, except it should be a DoubleBufferedPanel. I know of three ways to get it on the Form: 1. make sure that class is already compiled (maybe in a separate DLL) and you can design it in with Visual Designer. This is the official approach. 2. or add a Panel with Visual Designer, close the Form, and edit the form.designer.cs file changing new Panel() into new DoubleBufferedPanel() (not recommended, one isn't supposed to edit a designer file) 3. or add a Panel with Visual Designer, and have it replaced at run-time. That is what I did, like so, in the Form's constructor.

Panel oldPlot=plot;
plot=new DoubleBufferedPanel();
plot.Bounds=oldPlot.Bounds;
Controls.Remove(oldPlot);
Controls.Add(plot);
plot.Paint+=plotter;

The disadvantage is you have to copy all Designer properties/events from the old to the new Panel. The alternative is to leave the Panel, and turn it into a double-buffered one by setting some ControlStyles (the DoubleBuffered property being protected cannot be modified). :)

Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles] Nil Volentibus Arduum

Please use <PRE> tags for code snippets, they preserve indentation, and improve readability.