My Method on Paint drastically effects my program GUI's performance

[EARNEST]

Hello everyone,
I would like to ask for your help, guys. For some reasons, if i include the following lines in my paint event handler of my picture box, the GUI acts very weird (as if it cannot "draw" all the controls, some of them are invisible or the program acts as if there is no threading). The reason is because I include those lines of code. But what is the real reason behind it? Is it because Paint event handler tries to re-paint the controls all the time or what?

        void panelGraphDynamic_Paint(object sender, PaintEventArgs e)
        {
            Point yAxis_Start = new Point(5, 8);
            Point yAxis_End = new Point(5, 185);
            Point xAxis_Start = new Point(5, 185);
            Point xAxis_End = new Point(310, 185);
 
            graphDynamic = new My_Graph(
                panelGraphDynamic, 
                yAxis_Start, yAxis_End,
                xAxis_Start, xAxis_End,
                2, 1,
                107);
 
        }
 

        public My_Graph(
            PictureBox panelGraphDynamic, 
            Point pointY_axis_Start, Point pointY_axis_End, 
            Point pointX_axis_Start, Point pointX_axis_End, 
            int axisBrushWidth, int graphBrushWidth,
            int numberOfTrainingPairs)
        {
            panelGraphDynamic.Image = new Bitmap(panelGraphDynamic.Width, panelGraphDynamic.Height);
            Image bmp = panelGraphDynamic.Image;
            this.gfx = Graphics.FromImage(bmp);
            this.solBrushAxis = new SolidBrush(Color.Black);
            this.colorPenBlackAxis = new Pen(this.solBrushAxis, (float)(axisBrushWidth)); //brush
 
            this.pointX_axis_Start = pointX_axis_Start;
            this.pointX_axis_End = pointX_axis_End;
            this.pointY_axis_Start = pointY_axis_Start;
            this.pointY_axis_End = pointY_axis_End;
 
            this.gfx.DrawLine(this.colorPenBlackAxis, this.pointY_axis_Start, this.pointY_axis_End); //Y axis
            this.gfx.DrawLine(this.colorPenBlackAxis, this.pointX_axis_Start, this.pointX_axis_End); //X axis
 
            panelGraphDynamic.Image = bmp;
}
 

Before I used a panel to draw in, but I've realized it is a better and smarter thing to draw on an image that would be put in the picture box later. Also, it would be easier to save my graph as a picturebox(bitmap).
Thanks in advance for the explanation.

[tlhintoq]

Tell ya what... If you zip up the actual Visual Studio project and stick it in my iDisk I'll take a look later today.

http://public.me.com/tlhintoq

[EARNEST]

Done, thanks. It is a new project, only graph implementation. Decided to get my hands dirty with it, going to tackle it until its done, then move on back to my main project.
Kindly check /bytes/ folder

[tlhintoq]

Take a look at the updated project.

May I also suggest that even in your own quick test projects, it doesn't take that long to put a couple labels on the form for the controls, or to give the controls meaningful names?

trackBar1 is not as human-friendly as barStartX

When you start getting into groups of them it is far too easy to forget what is what or not recogonize a problem.

point NewStart = new Point(barStartX.Value, barStartY.Value);
 
// is easier to diagnose than
 
point NewStart = new POint (trackBar1.Value, trackBar4.Value);

[EARNEST]

OK in a moment. I was trying to update mine. What you think of this:

 
        public void DrawAxis()
        {
            if (ShowAxis)
            {
                bmp = new Bitmap(this.Width, this.Height); 
                this.gfx = Graphics.FromImage(bmp);
 
                this.Image = new Bitmap(this.Width, this.Height);
                Console.WriteLine("SIZE: " + this.Size);
                this.BrushForAxis = new SolidBrush(Color.Black);
 
                this.PenForAxis = new Pen(this.BrushForAxis, (float)(2));
                if (Y_Max == 0 || X_Max == 0)
                {
                    Point y2 = new Point(5, this.Height - 10);
                    Point x2 = new Point(this.Width - 10, this.Height - 10);
                    Point y1 = new Point(5, 5);
                    Point x1 = new Point(5, this.Height - 10);
 
                    this.gfx.DrawLine(this.PenForAxis, y1, y2);
                    this.gfx.DrawLine(this.PenForAxis, x1, x2);
                }
                else
                {
                    Point y2 = new Point(5, Y_Max);
                    Point x2 = new Point(X_Max, Y_Max);
                    Point y1 = new Point(5, 5);
                    Point x1 = new Point(5, Y_Max);
 
                    this.gfx.DrawLine(this.PenForAxis, y1, y2);
                    this.gfx.DrawLine(this.PenForAxis, x1, x2);
                }
 
                this.Image = bmp;
            }
 
        }
 

Still working on it :) got excited

[tlhintoq]

Take a look at what I sent you, and see if your updates can be incorporated.
I think there are some things in there you can learn from.

[EARNEST]

Checked. It is a very interesting approach :) Thanks a lot.

I think there are some things in there you can learn from

yes indeed...Keep you updates when I add/change something or anything else.
Thanks for participation

[EARNEST]

Hello again, hope you're doing well.
Wanted to ask, how would I get the parameters of the "parent" control I extended during instantiation of my custom control or somehow automatically, meaning that if for my constructor I include the following lines:

GraphBox()
{
 bmpOfClass = new Bitmap(this.Width, this.Height);
}
 

would set the size based on the one of the picturebox in the designer class, instead of default values 100,50. Should I create a property that would by default call another pseudo-constructor setting width, height and other things, or there are some other better implementations?
Thanks, EARNEST.

[tlhintoq]

That code is making the size dynamically.
When you drag a new GraphBox onto a form, AND SIZE IT - that should be it.

Later when you run the program, and the new graphbox is created that will be 'this' used for 'this.Width' and 'this.Height'

[EARNEST]

Don't know if it was a hidden hint, but thanks.
Did following:

            this.SizeChanged += new EventHandler(GraphBox_SizeChanged);
        }
 
        void GraphBox_SizeChanged(object sender, EventArgs e)
        {
            Console.WriteLine(this.Width);
        }
 

What do you think about it?
---
Update: Also, need to take care about default settings, otherwise I ll get "Object reference not set to an instance of an object. "

[tlhintoq]

That will report it to your console, if that is what you are trying to do.
Is that why you thought it wasn't the right size? Because the console window had old data? You can always put a couple labels on the form to report such data.

[EARNEST]

That will report it to your console, if that is what you are trying to do.
Is that why you thought it wasn't the right size? Because the console window had old data? You can always put a couple labels on the form to report such data.

Not sure if I got you, I always use console output to test if the system does what i want :)) silly old habit, actual code would be

        void GraphBox_SizeChanged(object sender, EventArgs e)
        {
            this.Image = new Bitmap(this.Width, this.Height); //image of the (this)picturebox
            this.bmp = new Bitmap(this.Width, this.Height); //bitmap of the class
            this.gfx = Graphics.FromImage(bmp); //graphics instance   
        }

[tlhintoq]

void GraphBox_SizeChanged(object sender, EventArgs e)
        {
            this.Image = new Bitmap(this.Width, this.Height); //image of the (this)picturebox
            this.bmp = new Bitmap(this.Width, this.Height); //bitmap of the class
            this.gfx = Graphics.FromImage(bmp); //graphics instance   
        }

You make a new image, then a new bmp, then a new Graphics context... and do what with them? What purpose do they serve?

[EARNEST]

there are other methods where those might be used (DrawAxis, DrawGraph etc)

[tlhintoq]

Right... But if you aren't going to use them at that specific point in time, you are just causing a lot of work for nothing.

SizeChanged happens for every pixel you change it, throughout the resizing drag. So you might want to make this happen only on the SizeChangeCompleted event, so it doesn't make 1000 new images for no purpose. Just do it one time at the end of the resize IF you are going to go ahead and complete the process by recalculating the graph.

[EARNEST]

Just do it one time at the end of the resize IF you are going to go ahead and complete the process by recalculating the graph.

Sorry, didn't quite understand what you meant...
First of all, are you saying that SizeChanged event would occur N times, for every changed pixel from 100,50, meaning if the new size is 150,50, it would occur 50 times? If yes, how come when I had console output, it displayed just once?
Also, did'nt get your point:

going to go ahead and complete the process by recalculating the graph.

And finally, should I just add

this.Image = new Bitmap(this.Width, this.Height); //image of the (this)picturebox
            this.bmp = new Bitmap(this.Width, this.Height); //bitmap of the class
            this.gfx = Graphics.FromImage(bmp); //graphics instance   
 

To every method then? I added those lines of code to the SizeChanged event so it will be "there waiting for" any method that possibly would be invoked.

[EARNEST]

Following code:

                this.gfx.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
                this.gfx.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAliasGridFit;
                this.gfx.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear;
 
                gfx.DrawLine(penForScales, 4f, 44f, 60f, 44f);
                gfx.DrawLine(penForScales, 4f, (float)(this.Y_end.Y - (5 * offset * 15)), 60f, (float)(this.Y_end.Y - (5 * offset * 15)));
 

This would be called each item mouseclick event occurs. Somehow, the smoothmode makes the 2nd DrawLine get with each click "fatter", however the first DrawLine does not "change". Cannot understand why..., however, this solved the problem

                gfx.DrawLine(penForScales, 4f, (float)(int)(this.Y_end.Y - (5 * offset * 15)), 60f, (float)(int)(this.Y_end.Y - (5 * offset * 15)));
 
 

[EARNEST]

New implementation of a graph. I will post it later on (or when I am finally finished with it, I shall create a new thread). I think my new implementation is more efficient then before. I draw axis, scales, labels etc in 1 picturebox, then I add 1 more picturebox inside the graphbox(picturebox) in between the axis, so I "forget" about the first parent control, and if i need to repaint or "reset" the actual graph, I ll just deal with it via my 2nd box, without invoking unnecessary methods that would cause a whole graphbox to re-adjsut, re-paint etc. What do you think about it?
However, I have 2 issues I am still trying to solve.
1. What .Image is for? And when should I add this.Image = bmp;? Or should I add it at all, since I still see all the drawing, without that line of code.
2. I would like to save as bitmap everything that is in my graphbox, however, when I request

 this.Image.Save("name.bmp")

, it saves everything, but the 2nd picbox inside of it (parent graphbox control that extends picturebox <- reminder how i implemented, just in case ). Why is that?
Thanks, EARNEST.

[tlhintoq]

You know a PictureBox actually holds two images, right?
A background image and its regular .Image.

It might be less complicated to just use two images instead of two complete PictureBox controls. The background can be whatever you need, and the axis, lines and so on would 'overlay' that by being on the primary .Image (which is the foreground image)

[EARNEST]

Did not know that :) Thanks a lot, I will look into it

[EARNEST]

Hm...it looks a bit weird.

 
        public void DrawGraph_Dynamic(int _yVariable)
        {
 
            if (condition)
            {
                bmp2 = new Bitmap(this.Width, this.Height);
                this.BackgroundImage = new Bitmap(this.Width, this.Height);
                this.gfx2 = Graphics.FromImage(bmp2);
 
                this.count = 1; //reset counter to 1
                this.tempX = this.Y_start.X + count; //temp adjustements
                this.x2 = this.Y_start.X + count; //reset position of X
            }
 
            this.gfx2.DrawLine(penForGraph, tempX, tempY, x2, y2); //actual graph drawing
            this.tempX = x2; //coordinates for smooth graph connections
            this.tempY = y2; //coordinates for smooth graph coonections
            this.BackgroundImage = bmp2;
            this.Image = bmp;
        }
 

1. gfx is for axis, scale and other things, fromimage bmp. when the last thing is drawn on the image, i set this.Image = bmp;
2. Second point, the code looks a bit "weird". Or I am mistaken?
3. Is it the right way I used the background image? gfx2, bmp2 are for graph drawings.
4. If i won't put in the end .BackgrnImage and .Image, the graph would'nt be painted

[EARNEST]

        public void DrawGraph_Dynamic(int _yVariable)
        {
 
            // TAKE INTO ACCOUNT PROPORTIONS
            count++;
            x2 = (float)(this.X_start.X + count);//incrementing X
            y2 = (float)(this.Y_end.Y - _yVariable * offset) - 1; //decreasing value of Y in respect to offset value and errors number(var_Yaxis)
 
            if (tempX == 0 && tempY == 0) //fixes the crazy jump in the beginning
            {
                tempX = x2; //smooth start
                tempY = y2; //smooth start
            }
            if (count >= this.X_end.X - this.X_start.X)
            {
                //NOT GOOD !->
                string bmp_filename = "graph.bmp";
                this.Image.Save(bmp_filename);
                this.BackgroundImage.Save("graph_2.bmp");
                //<-!
                this.bmp_BACKGROUND = new Bitmap(this.Width, this.Height);
                this.BackgroundImage = new Bitmap(this.Width, this.Height);
                this.gfx_BACKGROUND = Graphics.FromImage(bmp_BACKGROUND);
 
                this.count = 1; //reset counter to 1
                this.tempX = this.Y_start.X + count; //temp adjustements
                this.x2 = this.Y_start.X + count; //reset position of X
            }
 
            this.gfx_BACKGROUND.DrawLine(penForGraph, tempX, tempY, x2, y2); //actual graph drawing
            this.tempX = x2; //coordinates for smooth graph connections
            this.tempY = y2; //coordinates for smooth graph coonections
            this.BackgroundImage = bmp_BACKGROUND;
            this.Image = bmp_FOREGROUND;
        }
 

I cannot save as ONE bitmap file with foreground and background images.

[tlhintoq]

I cannot save as ONE bitmap file with foreground and background images.

When you are ready to save, just merge one photo with the other, then save the result.

[EARNEST]

OK, thanks, I ll try to do that.
Also,

1. gfx is for axis, scale and other things, fromimage bmp. when the last thing is drawn on the image, i set this.Image = bmp;

3. Is it the right way I used the background image? gfx2, bmp2 are for graph drawings.
4. If i won't put in the end .BackgrnImage and .Image, the graph would'nt be painted

of previous post, i just left it liek that, since it works, but is it the right way? is it efficient?
---------
Update. Going to bed now, before I go, if there are some other readers here, apart from me and mr/ms tlhintoq :) here is my "draft" merge, going to work on it tomorrow.

  PictureBox tempToMerge_picBox = new PictureBox();
                tempToMerge_picBox.Image = new Bitmap(this.Width, this.Height);
                Image tempToMerge_img = new Bitmap(this.Width, this.Height);
                Graphics tempToMerge_gfx = Graphics.FromImage(tempToMerge_img);
                tempToMerge_gfx.DrawImage(this.Image, new Point(0, 0));
                tempToMerge_gfx.DrawImage(this.BackgroundImage, new Point(0, 0));
                tempToMerge_picBox.Image = tempToMerge_img;
                tempToMerge_picBox.Image.Save("tempToMerge_IMAGE.bmp");
 

[EARNEST]

this.gfx_FOREGROUND.DrawImage(this.BackgroundImage, new Point(0,0)); 

, however, I would need to re-paint the axis, scales, labels etc, when the graph exceeds the X-axis limit, I'd need to reset it and re-paint background, however, in this case, I'd need to "reset" foreground also, since I drew an image on it.

Less lines of code + invoking methods again VS previous method. What do you think?

---
Update:

this.gfx_BACKGROUND.DrawImage(this.Image, new Point(0,0)); 
 
                string bmp_filename = "graph.bmp";
                this.BackgroundImage.Save(bmp_filename);
 

I think this one is even better than 2 of those.

[tlhintoq]

I think I got lost about 3 posts ago. If you are getting results you like, then it's good.

[EARNEST]

Yeah i think it works now. I am done with graphbox. I want to add it to the toolbar, would it be possible without importing the .cs class all the time to any project?

[tlhintoq]

Yep. What I did actually was make a project that holds all my custom tools and classes. It is my own namespace. That way instead of calling
System.IO.File.Delete
I call
tlhintoq.IO.File.Delete (which resets all the attributes before trying to delete)

Set up the project as a DLL library. Build it. Then in your Toolbox pallet make a new tab and 'Choose Items" (both from right-click menu)

[EARNEST]

Ok, thanks a lot. You helped me a lot during this "small project" :)
For now I am set, maybe later on I will try to add more functions or optimized/re-arrange my code.

If anyone is interested in my graphbox control, write it here, and I will upload it ASAP.