Lab1 – Part III

CSE 581

Roger Crawfis

To Do

• We have the basic framework, but need to:

1. Add the ability to open and read an image.

2. Generate pseudo-random numbers.

3. Add the remaining GUI elements

4. Add the rendering algorithm to provide the impressionistic effect.

Reading Images

• To read an image, we will use the DevIL library (http://openil.sourceforge.net/).

• Download the DevIL libraries from the links on the course web site.

Set-up the DevIL library

• Add the reference for the Tao library:– Tao.DevIl– Initialize the library

//// Initialize the DevIL library//ilInit();ilOriginFunc( IL_ORIGIN_LOWER_LEFT );ilEnable( IL_ORIGIN_SET );

Creating a Texture Map

• The Ilut library has an advanced feature that will automatically scale an image, build mip-maps (whatever those are), and then create the OpenGL texture maps.

• Once the ShowDialog for OpenFileDialog1 returns,– Ilut.ilutGLLoadImage(_fileName);

Using the Texture

• We will go over texture mapping in more detail later in the class, for now, you simply need to turn it on (enable it) and set the texture coordinates for each vertex you draw.

• Initialization: glEnable(GL_TEXTURE_2D);

• Texture Coordinates – use the vertex positions:glTexCoord2d( x, y );

glVertex2d( x, y );

…

Random Numbers

• Go back to the rendering method, DrawLines.

• Type in Random( and then examine the Intellisense (tooltips) listing of the possible constructor choices. Add a close paren and a semi-colon.

• Now, click or or move the insert caret over to the Random string and hit the F1 key.

Getting Help in VS Studio

• The F1 key brings up context sensitive help (help that is cognizant or sensitive to the current insertion point or window).

• In this case, it should bring up the member methods of the .NET class Random. Browse thru these methods.

• At the bottom, click on the Random Class hyperlink.• Read thru the Remarks section.• Under Requirements, note the namespace that

Random is included in.

Random

• What may not be obvious from the documentation is that the Random class does not represent a random number, but a random number generator.

• You will want to create an instance of Random and then call the NextDouble() method when you need a random number (or more precisely, the next number in the psuedo-random sequence of numbers).

• Go back to the help on Random and look at the description for NextDouble().

2D Viewport Mapping

• Recall, that when we implemented the Resize event, we set-up a mapping that would go from zero to one in both the x and the y direction on the screen.

• Thus, the lower-left corner of our panel is at coordinate (0,0) and the upper-right corner is at (1,1).

More GUI elements

• Add another TrackBar or NumericUpDown control for the line thickness or point size.

• Well, this should be the same process as when we added the number of lines GUI element right?

• Not quite. There is a fundamental difference between our data elements, and the GUI needs to either reflect this or take care of it.

LineWidth control

• What is this difference?

• Go back and look at how you declared each of these entities.

Handling Numeric types

• Number of primitives was an integer, and has a simpler representation and presentation to the user.

• The line thickness is a floating point value.• NumericUpDown control has a properties

for Number of Decimal places. This allows for a fixed point representation, which is good enough.

Floating-point TrackBar

• Since the TrackBar does not display a value, you should really think of it as a percentage from min to max.

• You can use a TrackBar for the lineWidth by providing a mapping from the trackbar’s value to your min and max values.

• The NumericUpDown will work as is provided you set the properties to handle your fixed-point numbers.

Color Selection

• Adding the color picker is very easy, provided you like the built in color dialog.

• Drag a ColorDialog control from the toolbox onto your form.

• Like the OpenFileDialog, this will create an instance, but the control will not be visible.

• One dialog will suffice for determining the two colors we need for the lab.

Color Selection

• Add two more buttons to you GUI design and set their properties.

• Add the click event to each of these (double-click in the Form designer) and in the callback code, Show() the colorDialog and then set the button’s BackColor to the dialog’s Color value.

Professional Touches

• For the dialog’s, we should do two critical things:

1. Initialize the dialog’s settings.

2. Check to see if it returned properly (the user did not hit cancel).

Dialog Initialization

• For the colorDialog, we should probably set the initial color to the current color.

• If colorButton1 is clicked, set the value of Color in the dialog to the colorButton1.BackColor.

• For the OpenFileDialog, you could fill in a recent history, but this seems to be handled automatically, as well as remembering the last directory.

Checking for OK vs. Cancel

• The dialog returns a value of type DialogResult. This needs to be checked for a value of OK, like this:if( colorDialog1->ShowDialog() == DialogResult::OK )

{

//Set the BackColor and update the document.

}

Build and Run

• The button color should change appropriately.

• The basic GUI is finished!!!

• Now, add the logic to update the document and hence the rendering.

Invalidate()

• If you move the number of lines trackBar, and update the document’s value for this, you may not notice any change in your rendering.

• Upon resize of bringing the window back and forward, it will update and change.

• We need to invalidate the view whenever we wish to see a change.

• This is done by calling:this. simpleOpenGlControl1.Invalidate()

Adding the README

• For the README panel, just drag a Rich Text Box over to the panel and dock it to FILL.

• Copy and paste your Readme.txt file into here before you submit.

A Grader Panel

• More on this later (or not).