34
1 05/18/22 13:55 UML Interaction with Graphics System Change Image React to Change Graphics System User Input Device Display

110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

Embed Size (px)

Citation preview

Page 1: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

104/21/23 10:41

UML

Interaction with Graphics System

ChangeImage

Reactto

Change

Graphics System User

InputDevice

Display

Page 2: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

204/21/23 10:41

UML

Computer GraphicsConceptual Model

ApplicationModel

ApplicationProgram Graphics

System

OutputDevices

InputDevices

API

Function Callsor Protocol

Data

Page 3: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

304/21/23 10:41

UML

Physical vs. Logical Input Devices

PhysicalDevice

Application Program

Software Driver

Logical Device

Mouse, KeyboardTrackball, etc.

Page 4: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

404/21/23 10:41

UML

What is it?

Page 5: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

504/21/23 10:41

UML

Logical Input Devices

0 String- Provides ASCII strings to user program- Usually implemented as physical keyboard

0 Locator- Inputs position in defined coordinate system- Absolute vs. relative- Direct vs. indirect

0 Choice- Choice among a discrete number of options- Implemented by menus or control button widget

0 Valuator (or Dial)- Provides analog input to user program- Bounded vs. unbounded- Often implemented as slidebar widget

Page 6: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

604/21/23 10:41

UML

Logical Input Devices, contd.

0 Pick - Returns identifier of an object to user program- Can be implemented by locator and choice

0 Stroke- Returns an array of locations- Can be implemented by locator and choice

Page 7: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

704/21/23 10:41

UML

Measure vs. Trigger

0 The measure of a device is the value returned to the user program.- String device: ASCII string- Locator: Location coordinates- Choice: Identifier of option chosen- etc.

0 Trigger of a device is a physical signal that the user can use to signal the computer that the measure is available.- String device (keyboard): Return key- Locator (mouse): mouse button(s)

Page 8: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

804/21/23 10:41

UML

Request Mode Input

TriggerProcess

MeasureProcess Program

Trigger

Request

Measure

1. Program requests measure of a device and blocks.2. Measure process maintains current measure.3. Trigger process signals measure process to return measure.

request_locator(device_id, &measure);

Page 9: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

904/21/23 10:41

UML

Sample Mode Input

MeasureProcess Program

Request

Measure

1. Program requests measure of a device and blocks.2. Measure process immediately returns current measure.

sample_locator(device_id, &measure);

Page 10: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

1004/21/23 10:41

UML

Event Mode Input

EventQueue Program

Await

Event

TriggerProcess

MeasureProcess

Trigger Event:Device & Measure

Events

Page 11: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

1104/21/23 10:41

UML

Event Driven Interaction-Blocking

Initialize, including generating the initial image;Activate input devices in event mode;do {

wait for user-triggered event on any device;switch (which device caused event)

{case DEVICE_1: collect DEVICE_1 measure, process, respond;case DEVICE_2: collect DEVICE_2 measure, process, respond;

...}

}while (user does not request exit);

Page 12: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

1204/21/23 10:41

UML

Event Driven Interaction-NonBlocking

Initialize, including generating the initial image;Activate input devices in event mode;do {

if (there is an event on the event queue)switch (which device caused event)

{case DEVICE_1: collect DEVICE_1 data, process, respond;case DEVICE_2: collect DEVICE_2 data, process, respond;

...}

Do background processing;}

while (user does not request exit);

Page 13: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

1304/21/23 10:41

UML

GL Library Organization

Window OS

Application

GL GLU GLUT

Page 14: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

1404/21/23 10:41

UML

CallFunction n

GLUT Event Processing

Eventin

Queue

Pop EventFrom Queue

CallFunction n

Switch onEvent Type

CallFunction n

Call IdleFunction

No

Yes

CallFunction nCall

Function nCallFunction n

Page 15: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

1504/21/23 10:41

UML

Callbacks

Event A

Event B

Event C

Event D

Event E

Event F

No Event Idle function( )

m1, m2 function_A(m1, m2)

function_B( )

function_C( )

Event Type “Registered” Function

NB: Function parameters must match measures contained in associated event.

Page 16: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

1604/21/23 10:41

UML

Display Event

Trigger: GLUT determines that the window needs to be redisplayed. A display event is generated when the windowis first drawn.

Callback function form:

void display();

Registration:

glutDisplayFunc(display);

A display callback function must be registered for each window.

Page 17: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

1704/21/23 10:41

UML

GLUT Mouse Event

Trigger: Any mouse button is depressed or released.

Callback function form:

void mouse_callback_func(int button, int state, int x, int y);

Registration:

glutMouseFunc(mouse_callback_function);

Page 18: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

1804/21/23 10:41

UML

GLUT Defined Mouse Constants

GLUT_LEFT_BUTTONGLUT_MIDDLE_BUTTONGLUT_RIGHT_BUTTON

GLUT_UPGLUT_DOWN

Systems with only one mouse button can only generatea GLUT_LEFT_BUTTON callback.

Page 19: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

1904/21/23 10:41

UML

GLUT Reshape Event

Trigger: Active window is resized

Callback function form:

void reshape_func(GLsizei w, GLsizei h);

Registration:

glutReshapeFunc(reshape_func);

Page 20: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

2004/21/23 10:41

UML

GLUT Move Event

Trigger: The mouse is moved while one or more mousebuttons are pressed.

Callback function form:

void motion_func(int x, int y);

Registration:

glutMotionFunc(motion_func);

Page 21: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

2104/21/23 10:41

UML

GLUT Keyboard Event

Trigger: Any key is depressed.

Callback function form:

void keyboard_function(unsigned char key, int x, int y);

Registration:

glutKeyboardFunc(keyboard_function);

Page 22: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

2204/21/23 10:41

UML

Other Defined Events in GLUT

glutPassiveMotionFuncglutVisibilityFuncglutEntryFuncglutSpecialFuncglutSpaceballMotionFuncglutSpaceballRotateFuncglutSpaceballButtonFuncglutButtonBoxFuncglutDialsFuncglutTabletMotionFuncglutTabletButtonFuncglutMenuStatusFunc

Page 23: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

2304/21/23 10:41

UML

Example: Simple Square Drawing Program

0 Open a window.0 Clear it to black.0 Draw a box at location of the mouse each time the left button

is clicked. Color of box should be randomly selected from RGB space.

0 Clear window when resized.0 Quit when right button is clicked.

Page 24: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

2404/21/23 10:41

UML

Square Program Source CodeSlide 1

/* This program illustrates the use of the glut library forinterfacing with a Window System */

/* The program opens a window, clears it to black,then draws a box at the location of the mouse each time theleft button is clicked. The right button exits the program

The program also reacts correctly when the window ismoved or resized by clearing the new window to black*/

#include <GL/gl.h>#include <GL/glut.h>

/* globals */

GLsizei wh = 500, ww = 500; /* initial window size */GLfloat size = 3.0; /* half side length of square */

Page 25: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

2504/21/23 10:41

UML

Square Program Source CodeSlide 2

void drawSquare(int x, int y){

y=wh-y; glColor3ub( (char) random()%256, (char) random()%256, (char) random()%256); glBegin(GL_POLYGON); glVertex2f(x+size, y+size);

glVertex2f(x-size, y+size); glVertex2f(x-size, y-size); glVertex2f(x+size, y-size); glEnd(); glFlush();

}

Page 26: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

2604/21/23 10:41

UML

Square Program Source CodeSlide 3

void myReshape(GLsizei w, GLsizei h){

/* adjust clipping box */

glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(0.0, (GLdouble)w, 0.0, (GLdouble)h, -1.0, 1.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity();

/* adjust viewport and clear */

glViewport(0,0,w,h); glClearColor (0.0, 0.0, 0.0, 0.0); glClear(GL_COLOR_BUFFER_BIT); glFlush();

/* set global size for use by drawing routine */

ww = w; wh = h; }

Page 27: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

2704/21/23 10:41

UML

Square Program Source CodeSlide 4

void myinit(void){

glViewport(0,0,ww,wh);

/* Pick 2D clipping window to match size of screen window This choice avoids having to scale object coordinateseach time window is resized */

glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(0.0, (GLdouble) ww , 0.0, (GLdouble) wh , -1.0, 1.0);

/* set clear color to black and clear window */

glClearColor (0.0, 0.0, 0.0, 0.0); glClear(GL_COLOR_BUFFER_BIT); glFlush();

/* callback routine for reshape event */

glutReshapeFunc(myReshape);

}

Page 28: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

2804/21/23 10:41

UML

Square Program Source CodeSlide 5

void mouse(int btn, int state, int x, int y){ if(btn==GLUT_RIGHT_BUTTON&state==GLUT_DOWN) exit();}

int main(int argc, char** argv){

glutInit(&argc,argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutCreateWindow("square");

myinit (); glutReshapeFunc (myReshape); glutMouseFunc (mouse); glutMotionFunc(drawSquare);

glutMainLoop();

}

Page 29: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

2904/21/23 10:41

UML

Output of “Square” Program

Page 30: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

3004/21/23 10:41

UML

Implementing Choice:Menus in GLUT

0 Four steps:- Create menu: glutCreateMenu(menu);- Define menu entries: glutAddMenuEntry- Attach menu to a mouse button: gluAttachMenu- Define callback function: void menu(int id);

Page 31: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

3104/21/23 10:41

UML

Creating a Menu in GLUT

int glutCreateMenu(void (*func)(int value));

Creates a new pop-up menu.

Returns a unique integer identifier for the menu.

Takes as argument a pointer to a single callback functionthat takes an integer argument. The integer argument of the callback is mapped to the menu choice.

Sets the current menu to the newly created menu.

Menu IdentifierCallback Function

Choice

Page 32: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

3204/21/23 10:41

UML

Associating a Menu with a Mouse Key

void glutAttachMenu(int button);

Associates the selected button with the current menu.

button is selected from the GLUT defined button constants:

GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON

Page 33: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

3304/21/23 10:41

UML

Adding Entries to the Menu

void glutAddMenuEntry(char *name, int value);

String to appearin menu entry.

Value to be passedto callback function.

Adds a menu entry to the bottom of the current menu.

Page 34: 110/6/2015 03:21 UML Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

3404/21/23 10:41

UML

Building a Sub-menu

void glutAddSubMenu(char *name, int menu);

ASCII string to display in the menuitem from which to cascade sub-menu.

Identifier of menu to cascadefrom this sub-menu item.