Principles of Interactive Graphics

1

• Principles of Interactive Graphics
• CMSCD2012
• Dr David England, Room 711,
• ex 2271 d.england_at_livjm.ac.uk
• http//java.cms.livjm.ac.uk/homepage/staff/cmsdeng
  l/Teaching/cmscd2012/
• Web page includes announcements, handouts, web
  links, reading hints, frequently asked questions

2
Todays 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

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 .

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

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

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

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

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

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

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

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

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

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

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.

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