Display an image in real time as it is being created in a loop

Question

In my code, the output is an image each pixel of which is determined using nested loops.

1) How can I force a window to open and show the output image as it is being constructed in the loop? (The window shows up when everything is finished. I don't want this.)

2) How can I have the output be displayed line by line (or even pixel by pixel) as the loop goes on. User must have the sense of getting the output in real-time.

    outImage = new Image<Hsv, Byte>(numberOfColumns, numberOfRows);
    byte[,,] pixelValue = outImage.Data;
        for (int i = 0; i < numberOfRows - 1; i++)
        {
            for (int j = 0; j < numberOfColumns - 1; j++)
            {
                //pixelValue[i, j, k] is determined here using some other functions
                imageBox1.Image = outImage; //too slow and impossible                 
            }
        }

Answer 1

You can display an image pixel by pixel in real time by putting it on a separate thread and using GetPixel and SetPixel. Keep in mind though that these methods are slow and if you are displaying high resolution pictures, it will take a while.

What you'll want to do is create a form with a picture box control on it. Next, create a Bitmap object containing the image you'll want to display. You can do this using a line like this:

Bitmap _bmp = new Bitmap(Image.FromFile(@"C:\MyImage.jpg"));

Next, in your form's shown event, spin off a new task to do the work, so the GUI doesn't lock up:

private void Form1_Shown(object sender, EventArgs e)
{
    Task.Factory.StartNew(ShowImage);
}

This line will spin off a new thread every time the form is displayed. The thread will fork off and call ShowImage(), which should look like this:

private void ShowImage()
{
    Graphics g = pbImage.CreateGraphics();

    for (int x = 0; x < _bmp.Width; x++)
    {
        for (int y = 0; y < _bmp.Height; y++)
        {
            Color c = _bmp.GetPixel(x, y);
            if (pbImage.InvokeRequired)
            {
                var x1 = x;
                var y1 = y;
                pbImage.BeginInvoke((Action) (() =>
                {
                    g.FillRectangle(new SolidBrush(c), x1, y1, 1, 1);
                }));
            }
            else
            {
                g.FillRectangle(new SolidBrush(c), x, y, 1, 1);
            }
            System.Threading.Thread.Sleep(1);
        }
    }
}

If you wanted to speed this up a bit, you could spin up two or more tasks, each task working in parallel (e.g. one thread starts at the beginning, another at the end, another in the middle maybe, etc). Just make sure your threads don't "overlap".

Another way to speed this up is to use pointers instead of GetPixel() and SetPixel(). You'd have to mark your code as unsafe though.

Answer 2

put your code in background Worker => Do Work A separate thread would be initiated

Answer 3

I am not a WinForms expert I am more of a WPF type. But I have an application running a solid 30fps and that is faster than humans can detect. I really do not quite understand what you want to do here. You have to blit each pixel individually but have display in real time? An ImageBox derives from the Windows Forms PictureBox, that won't work I do not think.

You could try moving to WPF, and use a WriteableBitmap for a ImageSource for an Image object or the background of a Canvas Object. A WriteableBitmap will let you access each pixel, but the refresh rate is controlled by WPF and the monitor refresh rate is controlled by the AC current frequency.

Doug