Lab1

1
Lab1 Part III

• CSE 581
• Roger Crawfis

2
To Do

• We have the basic framework, but need to
• Add the ability to open and read an image.
• Generate pseudo-random numbers.
• Add the remaining GUI elements
• Add the rendering algorithm to provide the
  impressionistic effect.

3
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.
• You want the Windows SDK (and the documents).
• Copy the lib files to (MSDEV)\lib, the include
  files to (MSDEV)\include and the dll files to
  your Windows\System32 directory. (already done in
  Caldwell)

4
Set-up the DevIL library

• Add the include files for the library
• include IL/il.h
• include IL/ilut.h
• Initialize the library
• //
• // Initialize the DevIL library
• //
• ilInit()
• ilOriginFunc( IL_ORIGIN_LOWER_LEFT )
• ilEnable( IL_ORIGIN_SET )

5
Add library references

• Open up the properties page for the project,
  select the Linker tab and then the input
  properties.
• Add DevIL.lib, ILU.lib and ILUT.lib to the
  existing opengl32.lib and glu32.lib.
• Open the C/C and then the Preprocessor
  settings. Delete the _UNICODE definition.

6
Opening the Image File

• Once the ShowDialog for OpenFileDialog1 returns,
• String fileName openFileDialog1-gtFileName
• IntPtr charPtr MarshalStringToHGlobalAnsi(file
  Name)
• const ILstring charName (const ILstring)
  charPtr.ToPointer()
• ilLoadImage( charName )
• That strange Marshal command needs a using
  statement
• using namespace SystemRuntimeInteropServices

7
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.
• There are some problems in using this, but good
  enough for now. One simple line added after you
  load the image
• ilutGLBuildMipmaps()

8
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 )

9
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.

10
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.

11
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().

12
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).

13
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.

14
LineWidth control

• What is this difference?
• Go back and look at how you declared each of
  these entities.

15
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.

16
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 trackbars value to
  your min and max values.
• The NumericUpDown will work as is provided you
  set the properties to handle your fixed-point
  numbers.

17
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.

18
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 buttons BackColor to the dialogs Color
  value.

19
Professional Touches

• For the dialogs, we should do two critical
  things
• Initialize the dialogs settings.
• Check to see if it returned properly (the user
  did not hit cancel).

20
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.

21
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-gtShowDialog()
  DialogResultOK )
• //Set the BackColor and update the document.

22
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.

23
Invalidate()

• If you move the number of lines trackBar, and
  update the documents 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-gtglPanel-gtInvalidate(
  )

24
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.

25
A Grader Panel

• More on this later (or not).