How to paint continual lines without repainting the first lines ?

[GuyM]

In my program, the background is a map, and the map has 100 grids on it.. the user inserts coordinates and a number and the program paints a dot in the coordinates provided by the user, if the user inserts another coordinates with the same number provided earlier, the program paints another dot and connects the previous one with the new one.

A few users will insert coordinates so the program will be a bit busy painting all the lines and dots all over again and the screen will flash because of all the map, grids, dots and lines painted all over again.

Is there a way to have a picture box for each line (by line I mean, the "number" that the user inserted the has all the coordinates) ? I tried adding transparent pictureboxes but it's white and not transparent.


Thanks,
Guy.

[GaryTexmo]

I don't know the details about your program too well so I'll throw about some suggestions and you can take them as you please :)

* I believe you can directly control when the panel gets redrawn. You could try only drawing when something changes (ie, a coordinate is placed on it) or the window itself needs to refresh. I know you can directly control how the background gets drawn but I'm not sure how to do it. You can look into it though.

* If your map doesn't scale, rotate, or scroll, why not just use a static bitmap for the grid? Now you're looking at a single paint instead of 100 for the grid lines. Even if you have to scroll/scale there are tricks you can do with an oversized bitmap and sneaky positioning.

* Windows should only redraw automatically when it decides a paint is needed. If you're not animating, just let it go ahead and do it's thing. 100 lines isn't terribly much... you mentioned several users might be involved but it's still drawing on a single client per user, so it shouldn't be a big deal. Windows paint should be able to handle that kind of grid without issue.

* Consider switching to a platform more appropriate to heavy drawing. You can embed an XNA control on a form and my own tests on a machine I bought 4 years ago had me quite happily able to draw 22 000 "objects" (sprites, lines, whatever) per cycle before I started to dip below the refresh rate cap (60 Hz).

[GuyM]

Here's an example:
A user type number 12 and grid 34 so the program paints a point in grid 34 with the number 12 (the program uses a dictionary and stacks to store it), then, the user inserts the number 12 again but now grid 35 so the program paints a dot in 35 and connects it with a line to the previous dot. Lets say that a few more dots and lines are painted and now the user inserts a number with grid zero which means he want to remove the lines and dots of this number, now the program needs to clear the whole screen and paint the remaining lines. So I need a way to paint each number and it's lines seperatly.

[GaryTexmo]

Any of the above suggestions should work... I think the real question here is, are you experiencing a slow down? If you're not, keep going as you are. I wouldn't think painting 100 extra lines for the grid would be overly taxing on GDI+... if it's an issue of flicker you should probably investigate double buffering so you're not watching everything draw.

If it really is slow, and your grid is static (ie, will never change in any way) just draw it as a background image.

Finally, as I mentioned, maybe look into XNA. This would be ideal if you wanted your map to scale, zoom, or perhaps rotate. GDI+ isn't exactly known for its drawing efficiency.

[GuyM]

My map isn't rotating or scaling, it's static, and the grids are too, so I only need to redraw everything when the user inserts a coordinate and a number, but it happens 6-12 times in a minute, I don't want the program to repaint the whole lines and dots because the amount will be very high in some point (about 50 lines) and repainting 50 lines every 5 seconds will be hard. I want a different painting block for each number and its lines, can I create a transparent panel for each one ? Will it work ?

Thanks :)

[GaryTexmo]

Layering controls is actually a lot more expensive than just drawing the line. I'd recommend just having a single panel and doing all your painting on that. I just ran some tests, GDI+ handles that many lines quite easily and I had my repaint running in a 60 fps redraw loop using a timer to invalidate the form.

You should be able to just drop down a single control (panel) as a "canvas", or even draw on your main form itself depending on how you want to organize things.

Here's a rudimentary grid drawing on a form... if you port this code into a project to run it, you'll see that it's quite happy to draw this many lines.

    public partial class Form1 : Form
    {
        private const int FRAMES_PER_SECOND = 60;
        private const int GRID_SPACING = 5;
        private const int MAJOR_LINE_X = 10;
        private const int MAJOR_LINE_Y = 10;
 
 
        private Timer m_timer = new Timer();
 
        public Form1()
        {
            InitializeComponent();
 
            m_timer.Interval = (int)(1000.0 * (1.0 / FRAMES_PER_SECOND));
            m_timer.Tick += new EventHandler(m_timer_Tick);
            this.Width = 640;
            this.Height = 480;
        }
 
        void m_timer_Tick(object sender, EventArgs e)
        {
            this.Invalidate();
        }
 
        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
 
            Color drawColor = Color.DarkGray;
            Graphics g = e.Graphics;
            for (int x = 0; x < Math.Ceiling(this.Width / (double)GRID_SPACING); x++)
            {
                drawColor = (x % MAJOR_LINE_X == 0) ? Color.Black : Color.DarkGray;
                g.DrawLine(new Pen(drawColor), x * GRID_SPACING, this.ClientRectangle.Top, x * GRID_SPACING, this.ClientRectangle.Bottom);
            }
 
            for (int y = 0; y < Math.Ceiling(this.Height / (double)GRID_SPACING); y++)
            {
                drawColor = (y % MAJOR_LINE_Y == 0) ? Color.Black : Color.DarkGray;
                g.DrawLine(new Pen(drawColor), this.ClientRectangle.Left, y * GRID_SPACING, this.ClientRectangle.Right, y * GRID_SPACING);
            }
        }
    }

You could quite easily do something like this in your own code, but perhaps your paint method would look something like..

protected override void OnPaint(PaintEventArgs e)
{
  PaintGrid(e);
  PaintPoints(e);
  PaintConnectorLines(e);
}

[GuyM]

Yes, it looks like the second code you wrote.
I have a drawAll method that draws everything, first the grids, then all tracks (a number is actually a track, so it paints a number and all of his lines and dots and then go to the next number).

So I should set the map image as the form background and paint the grids on the form, and then the painting will be on the transparent panel ?

[GaryTexmo]

Ok, so if you're using code similar to what I wrote, why are you experiencing such poor performance? Feel free to play with it on your side, but I cranked that up so it was drawing at least 500 lines and had no issues at all.

Anyway, you don't need to use a transparent panel, just draw in the correct order. You can use Graphics.DrawImage(...) to draw the background bitmap. There's no reason to draw to more than one control here.

[GaryTexmo]

Oh, duh... in my example I forgot to start the timer haha. Yes, it flickers to hell, but it's 'cause you get to watch it draw constantly.

I'm sorry... ugh, it would help if I gave you useful advice. Let me go take a look at this, I'm pretty sure double buffering is the answer here, I'm just not sure offhand how to do it. Check back here.

[GaryTexmo]

Ahh here we go, I knew it was something simple. Put this in your form's constructor...

SetStyle(ControlStyles.UserPaint, true);
SetStyle(ControlStyles.AllPaintingInWmPaint, true);
SetStyle(ControlStyles.DoubleBuffer, true);

Here's an update to the code I posted, with the timer turned on.

    public partial class Form1 : Form
    {
        private const int FRAMES_PER_SECOND = 60;
        private const int GRID_SPACING = 5;
        private const int MAJOR_LINE_X = 10;
        private const int MAJOR_LINE_Y = 10;
 
        private Timer m_timer = new Timer();
 
        public Form1()
        {
            InitializeComponent();
 
            m_timer.Interval = (int)(1000.0 * (1.0 / FRAMES_PER_SECOND));
            m_timer.Tick += new EventHandler(m_timer_Tick);
            m_timer.Start();
            this.Width = 640;
            this.Height = 480;
 
            SetStyle(ControlStyles.UserPaint, true);
            SetStyle(ControlStyles.AllPaintingInWmPaint, true);
            SetStyle(ControlStyles.DoubleBuffer, true);
        }
 
        void m_timer_Tick(object sender, EventArgs e)
        {
            this.Invalidate();
            Console.WriteLine("Repainted...");
        }
 
        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
 
            Color drawColor = Color.DarkGray;
 
            Graphics g = e.Graphics;
            for (int x = 0; x < Math.Ceiling(this.Width / (double)GRID_SPACING); x++)
            {
                drawColor = (x % MAJOR_LINE_X == 0) ? Color.Black : Color.DarkGray;
                g.DrawLine(new Pen(drawColor), x * GRID_SPACING, this.ClientRectangle.Top, x * GRID_SPACING, this.ClientRectangle.Bottom);
            }
 
            for (int y = 0; y < Math.Ceiling(this.Height / (double)GRID_SPACING); y++)
            {
                drawColor = (y % MAJOR_LINE_Y == 0) ? Color.Black : Color.DarkGray;
                g.DrawLine(new Pen(drawColor), this.ClientRectangle.Left, y * GRID_SPACING, this.ClientRectangle.Right, y * GRID_SPACING);
            }
        }
    }

There we go, no flicker. Sorry about that!