Computer Graphics
with OpenGL 3e
© 2005 Pearson Education
Chapter 11
Interactive methods and
graphical user interface
© 2005 Pearson Education
Graphical User interface
• Graphical User Interface
– Always referred as GUI
• Application in graphics package
– To change the object during execution
• E.g. change the view point of an object in a scene by
pointing
to the display position
– To choose the control-point coordinates for spline
constructions interactively
– Involve extensive interactive graphics
• E.g. display windows, icons, menus
© 2005 Pearson Education
Graphical input data
• Type of data
– E.g. Coordinates positions, attribute values, character-string
specifications, geometric-transformation values.
– Standard organization, classify the functions according to the
type of data to be processed by each function
• Logical classification of input devices
– Logical input device, device used to provide the specified data
– Standard classification
• LOCATOR
• STORKE
• STRING
• VALUATOR
• CHOICE
• PICK
© 2005 Pearson Education
Input devices (1)
• Locator Device
– Positioning the screen cursor at some location in a displayed
scene
– Example of physical device: mouse, trackball, space-ball
• Stroke Device
– To input a sequence of coordinate positions
– Physical device for generating locator input
– translate continuous movement of cursor positioning device,
such
as mouse, into a series of input coordinate values
© 2005 Pearson Education
Input devices (2)
• String Device
– Primary physical device used for string input - keyboard
– Used for picture or graph labeling in computer-graphics
applications
• Valuator device
– To set the scalar value for geometric transformations, viewing
parameters and illumination parameters
– Also used for setting physical parameter such as temperature
– Example of physical device:
a panel of control dials, joystick, tablet
– Other technique for providing valuator input:
Display the graphical representation of sliders, buttons, rotating scales,
and menu on the video monitor
© 2005 Pearson Education
Input devices (3)
• Choice device
– Menus, typically used in graphics programs to select processing
options, parameter Values and object shape
– Cursor positioning device are commonly choice device for a selecting
menu
– Determine a menu item is selected by the cursor position (x,y) :
• For a menu item with vertical and horizontal boundaries
(xmin,xmax,ymin,ymax)
• If the cursor position satisfy the condition
xmin ≤ x ≤ xmax
y min ≤ y ≤ y max
• The menu is selected with the cursor position
© 2005 Pearson Education
Input devices (4)
• Pick device
– To select a part of a scene that is to be transformed or
edited in some way
– Picking can be performed by positioning the screen cursor
and pressing a button or key to record the pixel coordinates
– Example of physical device:
mouse, joystick, keyboard
– Other pick methods include highlighting schemes, selecting
object
by name or a combination of methods
© 2005 Pearson Education
Input devices (5)
• Picking technique
– Coordinate-extent tests do not uniquely identify a pick object
– Approach 1:
Compute the distances from the pick position to individual line
segments
• Calculate the perpendicular distance squared from a pick
position to the line
• For a line segment with endpoints (x1, y1) , (x2, y2),
the perpendicular distance squared from a pick position (x, y) is
d2 =
[∆x( y − y1 ) − ∆y ( x − x1 )]
∆x 2 + ∆y 2
© 2005 Pearson Education
Input devices (6)
• Picking technique
– Approach 2:
Associate a pick window with a selected cursor position
– the pick window is centered on the cursor position
– Example: A pick window with center (x,y), width w and height h
• Highlighting
– other method used to facilitate picking
– successively highlight those objects whose coordinate extent
overlap a pick position (or pick window)
– user could issue accept or reject action after the object is
highlighted
h
(x, y)
w
© 2005 Pearson Education
Input function for graphical data (1)
• Input functions
– Graphics package provide several functions for selecting
devices and data classes
– Allow user to specify options:
• The input interaction mode for the graphics program
and the input devices
• Selection of physical device providing input within a
particular
logical classification
• Selection of the input time and device for a particular set of
data values
© 2005 Pearson Education
Input function for graphical data (2)
• Input modes
– Specify how the program and input device should interact
– Including request mode, sample mode and event mode
• Request mode
the application program initiate data entry
• Sample mode
the application program and input devices operate
independently
• Event mode
the input device initiate data input to the application
program
– Other functions are used to specify physical devices for
the logical data classes
© 2005 Pearson Education
Input function for graphical data (3)
• Echo feedback
– Echo of input data and associated parameters are displayed
within a specified screen area
– Example of echo feedback
The size of the pick window, the type and size of a cursor
• Callback functions
– Device-independent graphics packages include auxiliary library
which can provide a limited set of input functions
– Input procedures can be handled as callback functions
– Specify the actions taken by program when an input event
occurs (e.g. pressing a mouse button)
© 2005 Pearson Education
Interactive picture-construction
techniques (1)
• Interactive construction routine
– Positioning objects
– Applying constraints
– Adjusting the size of objects
– Designing shaped and patterns
• Interactive positioning techniques
– Basic positioning method, choose a coordinate position with
a pointing device that records a screen location
• The nature of selected position depends on the selected
processing option
– Dragging, select an object and drag it to a new location
© 2005 Pearson Education
Interactive picture-construction
techniques (2)
• Applying constraints
– Procedures for altering input coordinate values to obtain
a particular orientation or alignment of an object
– Horizontal and vertical constraint
• Implemented by comparing the input coordinate values
at the two endpoints
• If the difference in the y values of the two-end point is
smaller than the difference in the x values, a horizontal line
is displayed
© 2005 Pearson Education
Interactive picture-construction
techniques (3)
• Grids
– Display a rectangular grid in some part of the screen area
– Input coordinates are rounded to the nearest grid intersection,
with an activated grid constraint
– Example, line drawing using a grid
© 2005 Pearson Education
Interactive picture-construction
techniques (3)
• Grids
– Display a rectangular grid in some part of the screen area
– Input coordinates are rounded to the nearest grid intersection,
with an activated grid constraint
– Example, line drawing using a grid
© 2005 Pearson Education
Interactive picture-construction
techniques (4)
• Rubber-band methods
– Allow the size of objects to be interactively stretched or
contracted
– Example, specify a line segment
© 2005 Pearson Education
Interactive picture-construction
techniques (5)
• Gravity field
– To connect lines at positions between end points that
are not at grid intersections
– Graphics package include a procedure that converts any input
position near a line segment into a position on the line using
a gravity field area around the line
– Example, a gravity field around a line
© 2005 Pearson Education
Virtual-reality environments
• Example
– A typically virtual-reality environment
• Accomplish interactive input with a data glove
• Display computer generated scene through a head-mounted
viewing system as a stereographic projection
© 2005 Pearson Education
OpenGL interactive input-device functions(1)
• GLUT Mouse Functions
– To specify a procedure that is to be called when the mouse
pointer is in a display window and a mouse button is pressed
or released
glutMouseFunc (mouseFcn);
– Mouse callback procedure
void mouseFcn (GLint button, GLint action, GLint xMouse,
GLintyMouse)
– Parameter button denotes one of the three mouse buttons
– Parameter action specify the button action (e.g. pressed)
– Display-window location of the mouse cursor is returned as the
coordinated position (xMouse, yMouse). This location is relative
to the top-left corner of the display-window.
© 2005 Pearson Education
OpenGL interactive input-device functions(2)
• Another GLUT mouse routine
– GLUT mouse motion function
glutMotionFunc (fcnDoSomething);
– The function invoked has two arguments:
Void fcnDoSomething (GLint xMouse, GLint yMouse)
– Where (xMouse, yMouse) is the mouse location in the display
window relative to the top-left corner, when the mouse is moved
with a button pressed.
© 2005 Pearson Education
OpenGL interactive input-device functions(3)
• Example
– Generate line segment using GLUT mouse function
© 2005 Pearson Education
OpenGL interactive input-device functions(4)
#include <GL/glut.h>
GLsizei winWidth = 400, winHeight = 300; // Initial display-window size.
GLint endPtCtr = 0; // Initialize line endpoint counter.
class scrPt {
public:
GLint x, y;
};
void init (void)
{
glClearColor (0.0, 0.0, 1.0, 1.0) // Set display-window color to blue.
glMatrixMode (GL_PROJECTION);
gluOrtho2D (0.0, 200.0, 0.0, 150.0);
}
void displayFcn (void)
{
glClear (GL_COLOR_BUFFER_BIT);
}
void winReshapeFcn (int newWidth, int newHeight)
{
/* Reset viewport and projection parameters */
glViewport (0, 0, newWidth, newHeight);
glMatrixMode (GL_PROJECTION);
glLoadIdentity ( );
gluOrtho2D (0.0, GLdouble (newWidth), 0.0, GLdouble (newHeight));
/* Reset display-window size parameters. */
winWidth = newWidth;
winHeight = newHeight;
}
© 2005 Pearson Education
OpenGL interactive input-device functions(5)
void drawLineSegment (scrPt endPt1, scrPt endPt2)
{
glBegin (GL_LINES);
glVertex2i (endPt1.x, endPt1.y);
glVertex2i (endPt2.x, endPt2.y);
glEnd ( );
}
void polyline (GLint button, GLint action, GLint xMouse, GLint yMouse)
{
static scrPt endPt1, endPt2;
if (ptCtr == 0) {
if (button == GLUT_LEFT_BUTTON && action == GLUT_DOWN) {
endPt1.x = xMouse;
endPt1.y = winHeight - yMouse;
ptCtr = 1;
}
else
if (button == GLUT_RIGHT_BUTTON) // Quit the program.
exit (0);
}
else
if (button == GLUT_LEFT_BUTTON && action == GLUT_DOWN) {
endPt2.x = xMouse;
endPt2.y = winHeight - yMouse;
drawLineSegment (endPt1, endPt2);
endPt1 = endPt2;
}
© 2005 Pearson Education
OpenGL interactive input-device functions(6)
else
if (button == GLUT_RIGHT_BUTTON) // Quit the program.
exit (0);
glFlush ( );
}
void main (int argc, char** argv)
{
glutInit (&argc, argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowPosition (100, 100);
glutInitWindowSize (winWidth, winHeight);
glutCreateWindow ("Draw Interactive Polyline");
init ( );
glutDisplayFunc (displayFcn);
glutReshapeFunc (winReshapeFcn);
glutMouseFunc (polyline);
glutMainLoop ( );
}
© 2005 Pearson Education
OpenGL interactive input-device functions(7)
• GLUT Keyboard Functions
– To specify a procedure that is to be invoked when a key
is pressed.
gluKeyboardFunc (keyFcn);
– The specified procedure has three arguments
void keyFcn (GLubyte key, GLint Xmouse, GLint yMouse)
– Parameter key is assigned a character value or the
corresponding ASCII code.
– The display-window mouse location is returned as position
(xMouse, yMouse)
© 2005 Pearson Education
OpenGL interactive input-device functions(8)
• GLUT Keyboard Functions
– For function keys, arrow keys, and other special-purpose keys
glutSpecialFunc (specialKeyFcn);
– Specified procedure
Void specialKeyFcn (GLint specialKey, GLint xMouse,
GLint yMouse)
– Parameter special Key is used to select the special-purpose keys
• To select a function key, for example
GLUT_KEY_F12
• To select arrow keys, for example
GLUT_KEY_UP
© 2005 Pearson Education
OpenGL interactive input-device functions(9)
• OpenGL Picking Operations
– To use the OpenGL pick features, we need to incorporate
the following procedures into a program.
• Create and display a scene.
• Pick a screen position and, within the mouse callback function,
do the following:
• Set up a pick buffer
• Activate the picking operations (selection mode)
• Initialize and ID name stack for object identifiers
• Save the current viewing and geometric-transformation matrix
• Specify a pick window for the mouse input
• Assign identifiers to objects and reprocess the scene using the
revised view volume
(Pick information is then stored in the pick buffer)
• Restore the original viewing and geometric-transformation matrix
• Determine the number of objects that have been picked, and
return to the normal rendering mode
• Process the pick information
© 2005 Pearson Education
OpenGL interactive input-device functions(10)
• Pick buffer
– A pick-buffer array is set up with the command
glSelectBuffer (pickBuffSize, pickBuffer);
– Each record in the pick buffer contains
• The stack position of the object, which is the number of
identifiers in the name stack up to and including the
position of the picked object.
• The minimum depth of the picked object.
• The maximum depth of the picked object.
• The list of the identifies in the name stack from the first
(button) identifier to the identifier for the picked object.
© 2005 Pearson Education
OpenGL interactive input-device functions(11)
• OpenGL Menu Functions
– To create a pop-up menu
gluCreateMenu (MenuFcn);
– Parameter menuFcn is the name of procedure to be invoked
– Specify the listed options
gluAddMenuEntry (charString, menuItemNumber);
– Example, to create a menu with two options
gluCreateMenu (MenuFcn);
gluAddMenuEntry (“First Menu Item”, 1);
gluAddMenuEntry (“Second Menu Item”, 2);
© 2005 Pearson Education
OpenGL interactive input-device functions(12)
• Creating and managing multiple GLUT menus
– An integer identifier is assigned to menu when it is created
– To return the identifier
menuID = gluCreateMenu (MenuFcn);
– To activate a menu for the current display window
gluSetMenu (menuID);
– To eliminate a menu
gluDestoryMenu (menuID);
– To obtain the identifier for the current menu
currentMenuID = gluGetMenu ();
© 2005 Pearson Education
OpenGL interactive input-device functions(13)
• Creating GLUT submenus
– Example
submenuID = gluCreateMenu (submenuFcn);
gluAddMenuEntry (“First Submenu Item”, 1);
……………
gluCreateMenu (MenuFcn);
gluAddMenuEntry (“First Menu Item”, 1);
…………….
gluAddSubMenu (“Submenu option”, submenuID);
© 2005 Pearson Education
OpenGL interactive input-device functions(14)
• Example Program
– A display function include at the end both the main-menu
function and the sub-menu function
© 2005 Pearson Education
OpenGL interactive input-device functions(15)
#include <GL/glut.h>
GLsizei winWidth = 400, winHeight = 400; // Initial Display-window size.
GLfloat red = 1.0, green = 1.0, blue = 1.0; // Initial triangle color: white.
GLenum fillMode = GL_SMOOTH; // Initial polygon fill: color interpolation.
void init (void)
{
glClearColor (0.6, 0.6, 0.6, 1.0); // Set display-window color to gray.
glMatrixMode (GL_PROJECTION);
gluOrtho2D (0.0, 300.0, 0.0, 300.0);
}
void fillOption (GLint selectedOption)
{
switch (selectedOption) {
case 1: fillMode = GL_FLAT; break; // Flat surface rendering.
case 2: fillMode = GL_SMOOTH; break; // Gouraud rendering.
}
glutPostRedisplay ( );
}
© 2005 Pearson Education
OpenGL interactive input-device functions(16)
void displayTriangle (void)
{
glClear (GL_COLOR_BUFFER_BIT);
glShadeModel (fillMode); // Set fill method for triangle.
glColor3f (red, green, blue); // Set color for first two vertices.
glBegin (GL_TRIANGLES);
glVertex2i (280, 20);
glVertex2i (160, 280);
glColor3f (red, 0.0, 0.0); // Set color of last vertex to red.
glVertex2i (20, 100);
glEnd ( );
glFlush ( );
}
void reshapeFcn (GLint newWidth, GLint newHeight)
{
glViewport (0, 0, newWidth, newHeight);
glMatrixMode (GL_PROJECTION);
glLoadIdentity ( );
gluOrtho2D (0.0, GLfloat (newWidth), 0.0, GLfloat (newHeight));
displayTriangle ( );
glFlush ( );
}
© 2005 Pearson Education
OpenGL interactive input-device functions(17)
void main (int argc, char **argv)
{
glutInit (&argc, argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowPosition (200, 200);
glutInitWindowSize (winWidth, winHeight);
glutCreateWindow ("Menu Example");
init ( );
glutDisplayFunc (displayTriangle);
glutCreateMenu (fillOption); // Create pop-up menu.
glutAddMenuEntry ("Solid-Color Fill", 1);
glutAddMenuEntry ("Color-Interpolation Fill", 2);
/* Select a menu option using the right mouse button. */
glutAttachMenu (GLUT_RIGHT_BUTTON);
glutReshapeFunc (reshapeFcn);
glutMainLoop ( );
}
© 2005 Pearson Education
Designing a graphical user interface (1)
• Consideration of designing a graphical user interface
– The user dialogue
– Windows and icons
– Accommodating multiple skill levels
– Consistency
– Minimizing memorization
– Backup and error handling
– Feedback
© 2005 Pearson Education
Designing a graphical user interface (2)
• The user dialogue
– User’s model, the basis for the design of the dialogue
• Describe the system accomplishment and availability of
operations
• State the type of objects to be displayed and it’s manipulation
• For example, a circuit design program provide electrical or logical
symbols and the positioning operations for adding or deleting
elements within a layout
– Present all information in dialogue in the language of the
application
• Windows and icons
– Provide visual representation for
• Objects to be manipulated
• Actions to be performed
– Provide display-window opreations
• Opening, closing, positioning and resizing
– Type of icons
• Application icons, representing objects
• Control icons / command icons, representing actions
© 2005 Pearson Education
Designing a graphical user interface (3)
• Accommodating multiple skill levels
– Provide several methods for selecting actions
– For less experience users
• Users concentrate on the application instead of on the
details
of interface
• Interface with a few easily understand operations and
detailed
prompting
• Provide help facilities, include one or more tutorial
applications
to introduce the capabilities and use of the system
– For experienced users
• Users concentrate on the speed of application
• Fewer prompts and more input from the keyboard or
within multiple mouse-button clicks
© 2005 Pearson Education
Designing a graphical user interface (4)
• Consistency
– Icon shape presents single meaning rather than different
actions or objects depending on the context
– Placing menus in the same relative positions
– Using the same combination of keyboard keys for action
– Using the same color encoding
• Minimizing memorization
– Operations should be easy to understand and to remember
– Obscure, complicated, inconsistent and abbreviated command
formats lead to confusion and reduction in effective application
– Separate different information to different windows
– Design icons as recognizable shapes that are related to
application objects and actions
© 2005 Pearson Education
Designing a graphical user interface (5)
• Backup and error handling
– Provide a mechanism for undoing a sequence of operations
– Allow users to explore the capabilities of a system
– Good diagnostics and error messages help a user to determine
the cause of error
• Feedback
– For inexperienced user, give some response after entered and
action
– Given feedbacks such as highlighting an object or displaying
an icon or message
– Provide standard symbol designs
• For example, use a cross or a frowning face to indicate
an error
– Clarity, a response should be easily understood, but not
interrupting users
© 2005 Pearson Education
