Interactive Input Methods and Graphical User Interfaces

Module 3

Interactive Input Methods and Graphical

User Interfaces

4-1
Overview
• In order to be able to interact with the graphical image
input methods are required.
• These can be used to just change the location and
orientation of the camera, or to change specific settings of
the rendering itself.
• Different devices are more suitable for changing some
settings then others.
• In this chapter we will specify different types of these
devices and discuss their advantages.
Graphical Input Data
• A standard organization for input procedures in a graphics package is
to classify the functions according to the type of data that is to be
processed by each function.
• This scheme allows any physical device, such as a keyboard or a
mouse, to input any data class, although most input devices can
handle some data types better than others
Input methods
• When input functions are classified according to data type,
any device that is used to provide the specified data is
referred to as a logical input device for that datatype.
• Input methods can be classified using the following
categories:
• Locator - A device for specifying one coordinate position.
• Stroke - A device for specifying a set of coordinate positions.
• String - A device for specifying text input.
• Valuator - A device for specifying a scalar value.
• Choice - A device for selecting a menu option.
• Pick - A device for selecting a component of a picture.
Input methods
Locator
• A device that allows the user to specify one coordinate
position.
• Different methods can be used, such as a
• Mouse cursor, where a location is chosen by clicking a button, or
• A cursor that is moved using different keys on the keyboard.
• Touch screens can also be used as locators; the user specifies the
location by inducing force onto the desired coordinate on the
screen.
Input methods
Stroke
• A device that allows the user to specify a set of coordinate
positions.
• The positions can be specified, for example, by dragging the
mouse across the screen while a mouse button is kept
pressed.
• On release, a second coordinate can be used to define a
rectangular area using the first coordinate in addition.
Input methods
String
• A device that allows the user to specify text input.
• A text input widget in combination with the keyboard is used
to input the text.
• Also, virtual keyboards displayed on the screen where the
characters can be picked using the mouse can be used if
keyboards are not available to the application.
Input methods
Valuator
• A device that allows the user to specify a scalar value.
• Similar to string inputs, numeric values can be specified using the
keyboard.
• Often, up-down-arrows are added to increase or decrease the
current value.
• Any keyboard with a set of numeric keys can be used as a
valuator device.
• Cursor positioning, using a mouse, joystick, spaceball, or other
device, can be used to select a value on one of these valuators.
Input methods
Choice
• A device that allows the user to specify a menu option.
• Typical choice devices are menus or radio buttons which
provide various options the user can choose from.
• Commonly used choice devices for selecting a menu option
are cursor-positioning devices such as a mouse, trackball,
keyboard, touch panel, or button box.
• Once another option is picked, the previous one gets cleared.
Input methods
Pick
• A device that allows the user to specify a component of a picture.
• Similar to locator devices, a coordinate is specified using the mouse
or other cursor input devices and then back-projected into the
scene to determine the selected 3-D object.
• It is often useful to allow a certain “error tolerance” so that an
object is picked even though the user did not exactly onto the
object but close enough next to it.
• Also, highlighting objects within the scene can be used to traverse
through a list of objects that fulfill the proximity criterion.
Input methods
Pick (continued)
• Certain applications do not allow the use of mouse or
keyboard.
• In particular, 3-D environments, where the user roams freely
within the scene, mouse or keyboard would unnecessarily
bind the user to a certain location.
• Other input methods are required in these cases, such as a
wireless gamepad or a 3-D stylus, that is tracked to identify
its 3-D location.
Input methods
Pick (continued)
Input methods
Pick (continued) – 3D Stylus
Input Functions for Graphical Data
• Graphics packages that use the logical classification for input devices
provide several functions for selecting devices and data classes.
• These functions allow a user to specify the following options:
• The input interaction mode for the graphics program and the input devices.
Either the program or the devices can initiate data entry, or both can operate
simultaneously.
• Selection of a physical device that is to provide input within a particular
logical classification
• Selection of the input time and device for a particular set of data values

4-14
 Input Functions for Graphical Data
Input Modes
• Some input functions in an interactive graphics system are used to specify how
the program and input devices should interact.
• A program could request input at a particular time in the processing (request
mode), or
• An input device could independently provide updated input (sample mode), or
• The device could independently store all collected data (event mode).

4-15
 Input Functions for Graphical Data
Request Mode
• In request mode, the application program initiates data entry.
• When input values are requested, processing is suspended until the required
values are received.
• This input mode corresponds to the typical input operation in a general
programming language.
• The program and the input devices operate alternately.
• Devices are put into a wait state until an input request is made; then the
program waits until the data are delivered.

4-16
 Input Functions for Graphical Data
Sample Mode
• In sample mode, the application program and input devices operate
independently.
• Input devices may be operating at the same time that the program is
processing other data.
• New values obtained from the input devices replace previously input
data values.
• When the program requires new data, it samples the current values
that have been stored from the device input. Ex; Flight Simulator ,
Computer Games

4-17
 Input Functions for Graphical Data
Event Mode
• In event mode, the input devices initiate data input to the application
program.
• The program and the input devices again operate concurrently, but now
the input devices deliver data to an input queue, also called an event
queue.
• All input data is saved.
• When the program requires new data, it goes to the data queue.
• Typically, any number of devices can be operating at the same time in
sample and event modes.
• But only one device at a time can deliver input in request mode
4-18
 Input Functions for Graphical Data
Echo Feedback
• Requests can usually be made in an interactive input program for an echo
of input data and associated parameters.
• When an echo of the input data is requested, it is displayed within a
specified screen area.
• Echo feedback can include, for example, the size of the pick window, the
minimum pick distance, the type and size of a cursor

4-19
 Input Functions for Graphical Data
Callback Functions
• For device-independent graphics packages, a limited set of input
functions can be provided in an auxiliary library. Input procedures can
then be handled as callback functions that interact with the system
software.
• These functions specify what actions are to be taken by a program when
an input event occurs.
• Typical input events are moving a mouse, pressing a mouse button, or
pressing a key on the keyboard.

4-20
Interactive Picture-Construction Techniques

• A variety of interactive methods are often incorporated into

a graphics package as aids in the construction of pictures.
• Routines can be provided for positioning objects, applying
constraints, adjusting the sizes of objects, and designing
shapes and patterns.

4-21
Interactive Picture-Construction Techniques
• Basic Positioning Methods
• We can interactively choose a coordinate position with a pointing
device that records a screen location
• The coordinate location could be an endpoint position for a new line
segment, or it could be used to position some object
• Dragging
• Another interactive positioning technique is to select an object and
drag it to a new location.
• Using a mouse, for instance, we position the cursor at the object
position, press a mouse button, move the cursor to a new position,
and release the button.
4-22
 Interactive Picture-Construction Techniques
Constraints
• Any procedure for altering input coordinate values to obtain a particular
orientation or alignment of an object is called a constraint.
• For example, an input line segment can be constrained to be horizontal or vertical,
as illustrated in the Figure below.
• To implement this type of constraint, we compare the input coordinate values at
the two endpoints.
• If the difference in the y values of the two endpoints is smaller than the difference
in the x values, a horizontal line is displayed. Otherwise, a vertical line is drawn.
• The horizontal-vertical constraint is useful, for instance, in forming network
layouts

4-23
Interactive Picture-Construction Techniques
Grids
• Another kind of constraint is a rectangular grid displayed
in some part of the screen area.
• With an activated grid constraint, input coordinates are
rounded to the nearest grid intersection.
• Figure llustrates line drawing using a grid.
• Each of the cursor positions in this example is shifted to
the nearest grid intersection point, and a line is drawn
between these two grid positions.

4-24
Interactive Picture-Construction Techniques
Rubber-Band Methods
• Line segments and other basic shapes can be constructed and
positioned using rubber-band methods that allow the sizes of objects
to be interactively stretched or contracted.
• Figure demonstrates a rubber-band method for interactively
specifying a line segment.
• Using a mouse, we construct a rubber-band line while pressing a
mouse key. When the mouse key is released, the line display is
completed.

4-25
Interactive Picture-Construction Techniques
Rubber-Band Methods -Example

4-26
 Interactive Picture-Construction Techniques
Interactive Painting and Drawing Methods
• Options for sketching, drawing, and painting come in a variety of forms.
• Straight lines, polygons, and circles can be generated with methods
discussed in the previous sections.
• Curve-drawing options can be provided using standard curve shapes, such
as circular arcs and splines, or with freehand sketching procedures.
• Line widths, line styles, and other attribute options are also commonly
found in painting and drawing packages.
• Various brush styles, brush patterns, color combinations, object shapes,
and surface texture patterns are also available on many systems,
particularly those designed as artists’ workstations.

4-27
OpenGL Interactive Input-Device Functions
• Interactive device input in an OpenGL program is handled with
routines in the OpenGL Utility Toolkit (GLUT), because these routines
need to interface with a window system.
• In GLUT, we have functions to accept input from standard devices,
such as a mouse or a keyboard, as well as from tablets, space balls,
button boxes, and dials.
• For each device, we specify a procedure (the call back function) that is
to be invoked when an input event from that device occurs.
• These GLUT commands are placed in the main procedure along with
the other GLUT statements.

4-28
OpenGL Interactive Input-Device Functions
GLUT Mouse Functions:
• We use the following function to specify (“register”) 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);
• This mouse callback procedure, which we named mouseFcn, has four
arguments:
void mouseFcn (GLint button, GLint action, GLint xMouse, GLint yMouse)

4-29
 OpenGL Interactive Input-Device Functions
void mouseFcn (GLint button, GLint action, GLint xMouse, GLint yMouse)

• Parameter button is assigned a GLUT symbolic constant that denotes one

of the three mouse buttons, and parameter action is assigned a symbolic
constant that specifies which button action we want to use to trigger the
mouse activation event.
• Allowable values for button are GLUT LEFT BUTTON, GLUT MIDDLE
BUTTON, and GLUT RIGHT BUTTON.
• Parameter action can be assigned either GLUT DOWN or GLUT UP,
depending on whether we want to initiate an action when we press a
mouse button or when we release it.

4-30
 Contd..,
• When procedure mouseFcn is invoked, the display-window location of
the mouse cursor is returned as the coordinate position (xMouse,
yMouse).
• This location is relative to the top-left corner of the display window
Example

void mousePtPlot (GLint button, GLint action, GLint xMouse, GLint yMouse)
{
if (button == GLUT_LEFT_BUTTON && action == GLUT_DOWN)
plotPoint (xMouse, winHeight - yMouse);
glFlush ( );
}

4-31
OpenGL Interactive Input-Device Functions
GLUT Keyboard Functions
• With keyboard input, we use the following function to specify a
procedure that is to be invoked when a key is pressed:
glutKeyboardFunc (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.

4-32
 OpenGL Interactive Input-Device Functions
GLUT Tablet Functions
• Usually, tablet activation occurs only when the mouse cursor is in the display
window.
• A button event for tablet input is then recorded with
glutTabletButtonFunc (tabletFcn);
• The arguments for the invoked function are similar to those for a mouse:
void tabletFcn (GLint tabletButton, GLint action, GLint xTablet, GLint yTablet)

4-33
OpenGL Menu Functions
• In addition to the input-device routines, GLUT contains various
functions for adding simple pop-up menus to programs.
• With these functions, we can set up and access a variety of menus
and associated submenus.
• The GLUT menu commands are placed in procedure main along with
the other GLUT functions.
• Creating a GLUT Menu
• Creating and Managing Multiple GLUT Menus
• Creating GLUT Submenus
• Modifying GLUT Menus

4-34
 OpenGL Menu Functions
Creating a GLUT Menu
• A pop-up menu is created with the statement
glutCreateMenu(menuFcn);
where parameter menuFcn is the name of a procedure that is to be
invoked when a menu entry is selected.
• This procedure has one argument, which is the integer value corresponding
to the position of a selected option.
void menuFcn (GLint menuItemNumber).
• The integer value passed to parameter menuItemNumber is then used by
menuFcn to perform an operation.
• When a menu is created, it is associated with the current display window.

4-35
 OpenGL Menu Functions- Creating a GLUT Menu
• Once we have designated the menu function that is to be invoked when a menu
item is selected, we must specify the options that are to be listed in the menu.
• We do this with a series of statements that list the name and position for each
option.
• These statements have the general form
glutAddMenuEntry (charString, menuItemNumber);
• Parameter charString specifies text that is to be displayed in the menu, and
parameter menuItemNumber gives the location for that entry in the menu.
• For example, the following statements create a menu with two options:
glutCreateMenu (menuFcn);
glutAddMenuEntry ("First Menu Item", 1);
glutAddMenuEntry ("Second Menu Item", 2); 4-36
OpenGL Menu Functions- Creating a GLUT Menu

• Next, we must specify a mouse button that is to be used to select a

menu option.
• This is accomplished with
glutAttachMenu (button);
where parameter button is assigned one of the three GLUT symbolic
constants referencing the left, middle, or right mouse button.

4-37
 Pop-up Menu
#include <GL/glut.h>
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);
}

21-Jun-24 38
Dr. Josephine Prem Kumar, Prof.-CSE www.cambridge.edu.in
 Pop-up Menu
void fillOption(GLint selectedOption)
{
switch (selectedOption) {
case 1: fillMode = GL_FLAT; break; // Flat surface rendering.
case 2: fillMode = GL_SMOOTH; break; // Gouraud rendering.
}
glutPostRedisplay();
}

21-Jun-24 39
Dr. Josephine Prem Kumar, Prof.-CSE www.cambridge.edu.in
 Pop-up Menu
void displayTriangle(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glShadeModel(fillMode); // Set fill method for triangle.
glBegin(GL_TRIANGLES);
glColor3f(1.0,0.0,0.0);// Set colour of first vertex to red
glVertex2i(280, 20);
glColor3f(0.0,1.0,0.0);// Set colour of second vertex to green
glVertex2i(160, 280);
glColor3f(0.0,0.0,1.0);// Set colour of third vertex to blue
glVertex2i(20, 100);
glEnd();
glFlush();
}
21-Jun-24 40
Dr. Josephine Prem Kumar, Prof.-CSE www.cambridge.edu.in
 Pop-up Menu
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);
glutMainLoop();
}

21-Jun-24 41
Dr. Josephine Prem Kumar, Prof.-CSE www.cambridge.edu.in
 Submenu

21-Jun-24 42
Dr. Josephine Prem Kumar, Prof.-CSE www.cambridge.edu.in
 OpenGL Menu Functions- Creating a GLUT Submenus
• A submenu can be associated with a menu by first creating the submenu using
glutCreateMenu, along with a list of suboptions, and then listing the submenu as an
additional option in the main menu.
• We can add the submenu to the option list in a main menu (or other submenu) using a
sequence of statements such as
submenuID = glutCreateMenu (submenuFcn);
glutAddMenuEntry ("First Submenu Item", 1);
.
.
.
glutCreateMenu (menuFcn);
glutAddMenuEntry ("First Menu Item", 1);
.
.
.
glutAddSubMenu ("Submenu Option", submenuID);
The glutAddSubMenu function can also be used to add the submenu to the current
menu.
 4 Interactive Input Methods and Graphical User Interfaces

4.6 User Interfaces

Example

4-44
 Submenu
#include <GL/glut.h>
GLfloat red = 1.0, green = 1.0, blue = 1.0; // Initial color values.
GLenum renderingMode = GL_SMOOTH; // Initial fill method.

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);
}

21-Jun-24 45
Dr. Josephine Prem Kumar, Prof.-CSE www.cambridge.edu.in
 Submenu

void mainMenu(GLint renderingOption)

{
switch (renderingOption) {
case 1: renderingMode = GL_FLAT; break;
case 2: renderingMode = GL_SMOOTH; break;
}
glutPostRedisplay();
}

21-Jun-24 46
Dr. Josephine Prem Kumar, Prof.-CSE www.cambridge.edu.in
 Submenu
/* Set color values according to the submenu option selected. */
void colorSubMenu(GLint colorOption)
{
switch (colorOption) {
case 1:
red = 0.0; green = 0.0; blue = 1.0;
break;
case 2:
red = 0.0; green = 1.0; blue = 0.0;
break;
case 3:
red = 1.0; green = 1.0; blue = 1.0;
}
glutPostRedisplay();
}
21-Jun-24 47
Dr. Josephine Prem Kumar, Prof.-CSE www.cambridge.edu.in
 Submenu
void displayTriangle(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glShadeModel(renderingMode); // 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(1.0, 0.0, 0.0); // Set color of last vertex to red.
glVertex2i(20, 100);
glEnd();
glFlush();
}
21-Jun-24 48
Dr. Josephine Prem Kumar, Prof.-CSE www.cambridge.edu.in
 Submenu
void main(int argc, char** argv)
{
GLint subMenu; // Identifier for submenu.
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowPosition(200, 200);
glutInitWindowSize(500,500);
glutCreateWindow("Submenu Example");
init();
glutDisplayFunc(displayTriangle);

21-Jun-24 49
Dr. Josephine Prem Kumar, Prof.-CSE www.cambridge.edu.in
 Submenu
subMenu = glutCreateMenu(colorSubMenu);
glutAddMenuEntry("Blue", 1);
glutAddMenuEntry("Green", 2);
glutAddMenuEntry("White", 3);
glutCreateMenu(mainMenu); // Create main pop-up menu.
glutAddMenuEntry("Solid-Color Fill", 1);
glutAddMenuEntry("Color-Interpolation Fill", 2);
glutAddSubMenu("Color", subMenu);
/* Select menu option using right mouse button. */
glutAttachMenu(GLUT_RIGHT_BUTTON);
glutMainLoop();
}
21-Jun-24 50
Dr. Josephine Prem Kumar, Prof.-CSE www.cambridge.edu.in
OpenGL Menu Functions- Creating and Managing Multiple
GLUT Menus

• When a menu is created, it is associated with the current display

window.
• We can create multiple menus for a single display window, and we
can create different menus for different windows.
• As each menu is created, it is assigned an integer identifier, starting
with the value 1 for the first menu created.
• The integer identifier for a menu is returned by the glutCreateMenu
routine, and we can record this value with a statement such as
menuID = glutCreateMenu (menuFcn);

4-51
OpenGL Menu Functions- Creating and Managing Multiple
GLUT Menus
• A newly created menu becomes the current menu for the current
display window. To activate a menu for the current display window,
we use the statement
glutSetMenu (menuID);
• This menu then becomes the current menu, which will pop up in the
display window when the mouse button that has been attached to
that menu is pressed.
• We eliminate a menu with the command
glutDestroyMenu (menuID);

4-52
OpenGL Menu Functions- Creating and Managing Multiple
GLUT Menus
• If the designated menu is the current menu for a display window,
then that window has no menu assigned as the current menu, even
though other menus may exist.
• The following function is used to obtain the identifier for the current
menu in the current display window:
currentMenuID = glutGetMenu ( );
• A value of 0 is returned if no menus exist for this display window or if
the previous current menu was eliminated with the glutDestroyMenu
function.

4-53