Lecture 5: Interaction 1 Principles of Interactive Graphics CMSCD2012 Dr David England, Room 711,...

JMU Lecture 5: Interaction 1

Principles of Interactive Graphics CMSCD2012

Dr David England, Room 711, ex 2271 [email protected]

http://java.cms.livjm.ac.uk/homepage/staff/cmsdengl/Teaching/cmscd2012/ Web page includes: announcements, handouts, web links,

reading hints, frequently asked questions


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


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 ….


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


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


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 ...


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


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


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


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 ...


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 Save Save


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


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


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


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.


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

Lecture 5: Interaction 1 Principles of Interactive Graphics CMSCD2012 Dr David England, Room 711,...

Documents

Transcript of Lecture 5: Interaction 1 Principles of Interactive Graphics CMSCD2012 Dr David England, Room 711,...