Lecture 11: Callbacks CITS 3003 Graphics & Animation Slides: E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012
Objectives Learn to build interactive programs using GLUT callbacks o Mouse o Keyboard o Reshape Introduce menus in GLUT 2
Recap: Input Modes (cont.) Input modes concern how and when input is obtained There are two types of input modes: o Request mode o Event mode 3
Recap: Event Types in event mode input Window event: resize, expose, iconify Mouse event: click one or more buttons Motion event: this refers to the mouse move event (when the cursor is inside the window of the application program) Keyboard: press or release a key Idle: non-event o Define what should be done if no other event is in the event queue 4
Recap: Callbacks We can program to handle event mode input We can define a callback function for each type of event that the graphics system recognizes This user-supplied function is executed when the event occurs GLUT example: glutmousefunc(mymouse) mouse callback function 5
Interaction with the Window System Window : Used to denote a rectangular area of our display. We are concerned only with raster displays. Has height and width Positions are measured in window coordinates In OpenGL, window coordinates are three-dimensional, whereas screen coordinates are two dimensional. Both systems use units measured in pixels for x and y, but window coordinates retain depth information. The term window system is used to refer to the multiwindow environment provided by systems. 6
Window Coordinates Raster Display Systems (0,0) (0,0) Science and Engineering 7
Display Resolution A display may have a specific resolution (e.g. 1280 1024) pixels, but the window that we use can have any size. the frame buffer should have a resolution at least equal to the display size. If we use a window of 300 400 pixels, we can think of it as corresponding to a 300 400 frame buffer, even though it uses only a part of the real frame buffer. 8
Window Creation glutcreatewindow(char *title); Title at the top of the window glutinitdisplaymode(glut_rgb GLUT_DEPTH GLUT_DOUBLE); GLUT_RGB or GLUT_INDEX GLUT_DEPTH : depth buffer for hidden surface removal GLUT_DOUBLE or GLUT_SINGLE glutinitwindowsize(640, 480); 640 width, 480 height glutinitwindowposition(0, 0); Top left corner 9
Using Pointing Device Two types of events are associated with the pointing device: Move Event: It is generated when the mouse is moved with one of the buttons depressed. If the mouse is moved without a button being held down, this event is called a passive move event. After a move event, the position of the mouse is made available to the application program. Mouse Event: It occurs when one of the mouse buttons is either depressed or released. When a button is depressed, the action generates a mouse down event. When it is released, a mouse up event is generated. The information returned includes button that generated the event the state of the button after the event (up or down) the position of the cursor tracking the mouse in window coordinates 10
The mouse callback glutmousefunc(mymouse); void mymouse(glint button, GLint state, GLint x, GLint y) The parameters passed to the function are: button - which mouse button (GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON) caused the event state - state of that button (GLUT_UP, GLUT_DOWN) x, y the mouse click position (in pixels) in the window 11
Positioning The position on the screen window is usually measured in pixels with the origin at the top-left corner When the window is refreshed, it is done from top to bottom OpenGL uses a world coordinate system with the origin at the bottom left corner. Thus, you must invert the y coordinate passed to your callback function by the height of the window i.e., y = h y; h (0,0) w 12
How to obtain the window size To invert the y position we need to know the window height Note that the window height value can change during program execution We can use a global variable to keep track of the window height value The new window height passed to reshape callback? we will look at this in detail soon glutget(glut_window_width) glutget(glut_window_height) 13
Terminating a program In some sample code that we have seen before, we use a keyboard callback function to terminate our program. We can also use the simple mouse callback: void mouse(int btn, int state, int x, int y) { if (btn == GLUT_RIGHT_BUTTON && state == GLUT_DOWN) exit(0); } Note that we ignore the x and y parameters in the example above. 14
Using the mouse position In the next example, we show how to draw a small square at the location of the mouse each time the left mouse button is clicked This example does not use the display callback but since one is required by GLUT we will use the empty display callback function mydisplay(){} 15
Example-1: Drawing squares at clicked location of cursor void mymouse(int btn, int state, int x, int y) { if (btn == GLUT_RIGHT_BUTTON && state == GLUT_DOWN) exit(0); if (btn == GLUT_LEFT_BUTTON && state == GLUT_DOWN) drawsquare(x, y); } void drawsquare(int x, int y) { y = h-y; /* invert y position */ points[i] = vec2(x+size, y+size); points[i+1] = vec2(x-size, y+size); points[i+2] = vec2(x-size, y-size); points[i+3] = vec2(x+size, y-size); i += 4; } h, size, and i are 3 global variables. Note that in the drawsquare function, variable h is a global variable storing the height (in pixels) of the window. 16
Using the motion callback We can draw squares (or anything else) continuously as long as a mouse button is depressed by using the motion callback glutmotionfunc(drawsquare); We can also draw squares without depressing a button using the passive motion callback glutpassivemotionfunc(drawsquare); Exercise: Try changing the previous example by replacing glutmotionfunc by glutpassivemotionfunc 17
Example-2: Drawing a single triangle by specifying the vertices (1,1) (0,0) (-1,-1) sets an internal flag indicating that the display needs to be redrawn. 18
Using the keyboard callback glutkeyboardfunc(mykey); void mykey(unsigned char key, int x, int y) Parameters passed to the mykey callback function are: key the ASCII code of the key depressed x, y - and mouse location at the time the key was pressed Example: void mykey(unsigned char key, int x, int y) { if (key == Q key == q ) exit(0); } 19
Special and Modifier Keys GLUT defines the special keys in glut.h Function key 1: GLUT_KEY_F1 Up arrow key: GLUT_KEY_UP e.g., if (key == GLUT_KEY_F1 Can also check whether one of the modifiers GLUT_ACTIVE_SHIFT GLUT_ACTIVE_CTRL GLUT_ACTIVE_ALT is depressed by glutgetmodifiers() This allows emulation of a three-button mouse with one- or two-button mice 20
Reshaping the window We can reshape and resize the OpenGL display window by pulling the corner of the window What happens to the display? The window in the application must be redrawn There are three possibilities: 1. We can display the whole world but force it to fit in the new window (this can alter the aspect ratio). 2. We can display part of the world. 3. We can display and scale the whole world to fit in the window and keep the aspect ratio. 21
Reshape possiblities Three reshape possibilities Default original reshaped 22
The Reshape callback glutreshapefunc(myreshape); void myreshape(int w, int h) Parameters passed to the function: w, h the width and height of new window (in pixels) What happens when the window is resized: o A redisplay is posted automatically at end of execution of the callback o GLUT has a default reshape callback but you probably want to define your own The reshape callback is a good place to put viewing functions because it is invoked when the window is first opened 23
The Reshape callback (cont.) Suppose that the our original window is 500 (width) x 500 (height) pixels and the clipping volume is: left=-0.2, right=0.2, bottom=-0.2, top=0.2, near=2.0, far=20.0. What does the following reshape callback function do? void reshape(int w, int h) { glviewport(0, 0, w, h); Note that near and far clipping planes should be positive; otherwise the clipping volume would be taken as behind the camera. } //glortho(left,right,bottom,top,near,far) glortho(-0.2*(float)w/(float)h, 0.2*(float)w/(float)h, -0.2, 0.2, 2.0, 20.0); No need to call glutpostredisplay( ) here (see previous slide) glortho: https://www.khronos.org/registry/opengl-refpages/gl2.1/xhtml/glortho.xml 24
The Reshape callback (cont.) Same setting as described on the previous slide. What does the following reshape callback function do? void reshape(int w, int h) { glviewport(0, 0, w, h); if (w > h) glortho(-0.2*(float)w/(float)h, } 0.2*(float)w/(float)h, -0.2, 0.2, 2.0, 20.0); else glortho(-0.2, 0.2, -0.2*(float)h/(float)w, 0.2*(float)h/(float)w, 2.0, 20.0); 25
Idle Callback Invoked when there are no other events. Its default is the null function pointer. Uses: continue to generate graphical primitives through a display function while nothing else is happening to produce an animated display. In main, we specify an idle callback, glutidlefunc(idle); 26
Example: Idle Callback 27
Toolkits and Widgets Most window systems provide a toolkit or library of functions for building user interfaces that use special types of windows called widgets Widget sets include tools such as o Menus o Slidebars o Dials o Input boxes But toolkits tend to be platform dependent GLUT provides a few widgets including menus 28
Menus GLUT supports pop-up menus o A menu can have submenus Three steps for setting up a menu: 1) Define entries for the menu 2) Define action for each menu item o Action carried out if an entry is selected 3) Attach menu to a mouse button 29
Defining a simple menu In the main or init function: a unique ID returned by glut name of the callback function menu_id = glutcreatemenu(mymenu); glutaddmenuentry( clear Screen, 1); gluaddmenuentry( exit, 2); glutattachmenu(glut_right_button); clear screen exit entries that will appear when right button is pressed identifiers 30
Menu actions Example of a simple menu callback function: void mymenu(int id) { if (id == 1) glclear(); if (id == 2) exit(0); } Note when each menu is created, a unique id is returned by glut To add a submenu, use glutaddsubmenu: glutaddsubmenu(char *submenuname, int submenuid) To add a menu entry, use glutaddmenuentry: glutaddmenuentry(char *entryname, int entryid) To attach the current menu, use glutattachmenu. 31
Menu an example // submenu for two light sources int lightmenuid = glutcreatemenu(lightmenu); glutaddmenuentry("move Light 1", 11); glutaddmenuentry("change RGB of Light 1", 12); glutaddmenuentry("move Light 2", 21); glutaddmenuentry("change RGB of Light 2", 22); Put these lines of code in an init function // submenu for camera int cameramenuid = glutcreatemenu(cameramenu); Callback functions // add these submenus to the main menu glutcreatemenu(mainmenu); glutaddsubmenu("light sources", lightmenuid); glutaddsubmenu("camera", cameramenuid); glutattachmenu(glut_right_button); Always create the submenus before the main menu 32
Menu an example // callback function for the light menu void lightmenu(int id) { switch (id) { case 11: // action for moving light 1 case 12: // action for changing RGB of light 1... } } // callback function for the camera menu void cameramenu(int id) {... } 33
Mid-Semester Test When Tuesday 10 April during the lecture 12:00-12:45PM Where In ENCM [G04] i.e. where Tuesday lectures are held What is included Everything from Lecture 1 to Lecture 10 What to bring to the test A pen to write with (no pencils, no books, no notes) See unit website for sample test from 2016 http://teaching.csse.uwa.edu.au/units/cits3003/index.php?fna me=lectures 34
Further Reading Interactive Computer Graphics A Top-Down Approach with Shader-Based OpenGL by Edward Angel and Dave Shreiner, 6 th Ed, 2012 Sec. 2.7 Control Functions Sec. 2.11 Adding Interaction up to Sec 2.11.4 The Idle Callback Sec 2.12 Menus C++ code in the Chapter04 - Chapter09 folders 35