Lecture 5: Interaction 1  Principles of Interactive Graphics  CMSCD2012  Dr David England, Room 711,  ex 2271   Web page includes: announcements, handouts, web links, reading hints, frequently asked questions

Lecture 5: Interaction 2 Today’s Lecture: Interaction  Review of Tutorial: Transforms - check out the solutions sheet on L:\cd2012\Tutorial 3 Solution or web page  Coursework 1: Any questions, ask me in the Lab  Compilation under Borland C++ ? Check the web links on the module web page to see if you are having #include or linking problems  Today: Handling Interaction events

Lecture 5: Interaction 3 Handling Interaction Events  Most computer graphics courses will teach you more than you ever wanted to know about graphics output  … but … most graphics applications are useless without a good appreciation of handling user input  This will become more apparent in CMSCD3001 User interface design  There is a standard event handling model that all graphics and windows programs use ….

Lecture 5: Interaction 4 Event Handling Model  In Lecture 1 we said:  Every interactive graphics program has the same model  Initialise the application data and graphics environment  Create the contents of the display  Paint the contents of the display on a window  Set-up functions to handle input events  Start an infinite loop to handle input events  This is event-driven programming  We will look at this model in more detail

Lecture 5: Interaction 5 General Event Handling Model  A Graphics Program registers certain functions as event handling functions  The Program then goes into an infinite loop waiting for events  When an event arrives a notification system decides how it should be handled  The event structure is then passed to the function that was registered for that event  The function exits and returns control to the main loop

Lecture 5: Interaction 6 Callback functions  The basic mechanism for handling input events is to register callback functions to handle specific events.  These events could be  Window events: moving, hiding or resizing a window  input device events: mouse, keyboard, tracker etc  timer events that are generated by a clock in the application  So far we have seen functions to handle window events...

Lecture 5: Interaction 7 Window Event Functions  glutDisplayFunc(display) reacts to events from the Window system to draw (or re-draw) the contents of the window  For example, in MS Windows if the window has been  Minimised/Maximised  Hidden/Shown relative to other windows  glutReshapeFunc(reshape) reacts to events when the Window is resized  The callback function (e.g. reshape) takes as arguments the new width and height of the window  Every window system has similar functions to handle these events

Lecture 5: Interaction 8 Input Device Events  Similarly every windows systems has handlers for dealing with device-specific input events  The main devices always supported are keyboard and mouse  OpenGL has functions for registering other functions as handlers for input device events, e.g.  glutKeyboardFunc(keys) registered the function keys to handle keyboard events  The keys function takes as parameters the ASCII code of the keyboard character and the x,y position of the mouse  See input_events.cpp example

Lecture 5: Interaction 9 Mouse input  Similarly the function glutMouseFunc(mouse) would register mouse() to handle mouse button events  See the mouse() function in example code  The function receives the index of the button that was pressed and the state of the button, plus x,y coordinates, e.g.  GLUT_LEFT_BUTTON, GLUT_RIGHT_BUTTON  GLUT_UP, GLUT_DOWN  The handler function then performs some graphics or application function in response to the event

Lecture 5: Interaction 10 Mouse input...  Windows systems also support event handlers for mouse motion, e.g. (1) glutMotionFunc(motion) (2) glutPassiveMotionFunc(passive)  (1) Registers motion() to handle moving the mouse with a button pressed  (2) Registers passive() to handle moving the mouse with a button released  By managing the input state - knowing which button was pressed last, its x,y coordinates etc. - we can support the behaviour of most user interface objects...

Lecture 5: Interaction 11 User Interface State Examples  A Simple graphics button  Press mouse button with cursor over button  Change appearance of button  Release mouse button with cursor still over button  Perform button action or  Release mouse button with cursor NOT over button  Cancel button action and restore appearance of button Save

Lecture 5: Interaction 12 User Interface State Examples  Question: Given the previous example how could you model the state of other components and operations such as:  The parts of a scrollbar (includes motion events)?  A pop-up menu? (See example bitfont.cpp)  Drawing a line, circle, polyline or rectangle in a drawing program?  The important programming point is to maintain the appropriate state until the operation is completed or cancelled

Lecture 5: Interaction 13 User Interface State...  Producers of graphics and user interface toolkits usually refer to the unique look and feel of their systems  User interface state defines the feel part of the user interface  A scrollbar might look and behave differently between, say, MS Windows, Apple MacOS and UNIX X Windows.  A package like Java Swing tries to incorporate different look and feel libraries to mimic the appearance and behaviour of the host windows environment

Lecture 5: Interaction 14 Timer Generated Events  While the main event loop is running the program can only respond to external events.  If we want something to happen between events we have to register handlers to run either  When the program is idle  Or in response to timer generated events  glutIdleFunc() will register a function to run whenever the program is not handling other events  However, this function should return quickly or the program may be unable to respond to other events

Lecture 5: Interaction 15 Timer Generated Events...  We can register a function to be called every few milliseconds by glutTimerFunc  Again see the example code where myTimer() draws a box containing the time in seconds since the program started.

Lecture 5: Interaction 16 Summary  We have looked at how graphics programs handle events generated by windows systems, input events and timers  We have seen how we can register functions to handle these events  We saw how we can define the user interface state to control how the system responds to events  The is no official tutorial - but you should look at the example code input_events.cpp and consider how you would implement the user interface states in slide 12  Coursework 2 will be a small interactive drawing program