OpenTK a simple 2d clock design in windows form C# (basic OpenTK-1)

U don’t need to have any prior knowledge in OpenGL or c# graphics to learn OpenTk. Only some basic of window from design is more than enough

For using opentk u need to add two dll in ur visual studio reference they are OpenTK.dll and  OpenTK.Graphics.OpenGL.dll both can be find easily here.

we are not going to use well known gamewindow for OpenTk , As i guess u r familar with windows from design , we r just use a normal windows from. OpenTk provide a very nice control/tool for that u need to add it in ur visual studio toolbox, it name Glcontrol and it can also find here. For that first click toolbox and Choose item then browse and than add the dll for this control . Now u can use it like here

To begin with, create a Form on which you will place your GLControl. Right click in some empty space of the Toolbox, pick “Choose Items…” and browse for OpenTK.GLControl.dll. Make sure you can find the “GLControl” listed in the “.NET Framework Components”, as in the image below.

undefined

Then you can add the GLControl to your form as any .NET control. A GLControl named glControl1 will be added to your Form.

so first add this control and named “glControl1” in ur port and write below code. Also add this method in this control load event, for further details u can go here.

private void glControl1_Resize(object sender, EventArgs e)
 {  int w = glControl1.Width;
 int h = glControl1.Height;
 glControl1.MakeCurrent();
 GL.MatrixMode(MatrixMode.Projection);
 GL.LoadIdentity();
 GL.ClearColor(Color.SkyBlue);
 GL.Ortho(-w / 2, w / 2, -h / 2, h / 2, -1, 1);
 GL.Viewport(0, 0, w, h);
 GL.End();
 glControl1.SwapBuffers();
 }

If we run it we will find a from like below

undefined

So how it done? its easy. first we see

 glControl1.MakeCurrent();

it make all next GL command enable for this control.

GL.MatrixMode(MatrixMode.Projection);
GL.LoadIdentity();

we make that matrixmode in projection and then load the identity, there are four types of mode, for 2d projection is perfect , if u want know more about these mode can see here.

now next command is very much importent to understand for that First we need to be good OpenGL citizen and setup an orthographic projection matrix using GL.Ortho(). We need to call GL.Viewport() also.

GL.Ortho(-w / 2, w / 2, -h / 2, h / 2, -1, 1);

this makes center of the gl box 0,0 for axis x,y . because w is the width and h is the height of the gl box. if u want to  make Bottom-left corner pixel as 0,0 u can write .

  GL.Ortho(0, w, 0, h, -1, 1)
GL.Viewport(0, 0, w, h);

viewport use to select the painting area in the control.

 GL.ClearColor(Color.SkyBlue);

and it makes it blue. for comand disposal, and window buffer we have to write

 GL.End();
 glControl1.SwapBuffers();

Now second part

Advertisements

About kishordgupta

A software developer
This entry was posted in C#, OpenTK, Winform app and tagged , , , , , , . Bookmark the permalink.

4 Responses to OpenTK a simple 2d clock design in windows form C# (basic OpenTK-1)

  1. Peter says:

    Hello!

    I have one problem, maybe you will be able to help me – I cannot add GLControl to my toolbox (I use Visual Studio 2010). I go to “Choose Toolbox Items”, browse OpenTK.GLControl.dll, choose GLControl – but after clicking OK it does not appear in the Toolbox. Do you possibly know why is it happening? Which wersion of VS do you use?

    • kishordgupta says:

      i am using visual studio 2010 i also worked it in visual studio 08.

      after clicking ok it will appear in chooseitem list u have to tick the box beside him to add it in toolbox. hope it help

  2. Jeana Juelfs says:

    Good article. There’s a lot of effective data here, though I did want to let you know something – I am running Ubuntu with the circulating beta of Firefox, and the layout of your blog is kind of flaky for me. I can understand the articles, but the navigation doesn’t function so good.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s