lecture 12 input
Download
Skip this Video
Download Presentation
Lecture 12: Input

Loading in 2 Seconds...

play fullscreen
1 / 21

Lecture 12: Input - PowerPoint PPT Presentation


  • 74 Views
  • Uploaded on

Lecture 12: Input. GR2 out, due Sunday. UI Hall of Fame or Shame?. Nanoquiz. closed book, closed notes submit before time is up (paper or web) we’ll show a timer for the last 20 seconds. 10. 12. 13. 14. 15. 11. 17. 18. 19. 20. 16. 1. 3. 4. 5. 6. 2. 8.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Lecture 12: Input' - laith-rhodes


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
lecture 12 input

Lecture 12: Input

GR2 out, due Sunday

6.813/6.831 User Interface Design and Implementation

ui hall of fame or shame
UI Hall of Fame or Shame?

6.813/6.831 User Interface Design and Implementation

nanoquiz

Nanoquiz

closed book, closed notes

submit before time is up (paper or web)

we’ll show a timer for the last 20 seconds

6.813/6.831 User Interface Design and Implementation

slide4
10

12

13

14

15

11

17

18

19

20

16

1

3

4

5

6

2

8

9

0

7

Antialiasing is implemented with: (choose one best answer) A. the alpha channel B. coordinate translation C. the view tree D. double buffering

Z-order is determined by: (choose one best answer) A. the alpha channel B. coordinate translation C. the view tree D. double buffering

Double buffering is designed to prevent: (choose one best answer) A. unnecessary drawing B. antialiasing C. JPG compression artifacts D. flickering caused by incomplete drawing

A screenshot of a GUI for a report should be stored as: (choose one best answer) A. JPG B. GIF C. PNG D. BMP

6.813/6.831 User Interface Design and Implementation

today s topics
Today’s Topics
  • Input events
  • State machines
  • Event dispatch & propagation

6.813/6.831 User Interface Design and Implementation

raw input events
Raw Input Events
  • The usual input hardware has state:
    • ~100 keys on the keyboard (down or up)
    • (x,y) mouse cursor position on the screen
    • one, two, or three mouse buttons (down or up)
  • A “raw” input event occurs when this state changes

jQuery event

    • key pressed or released keydown, keyup
    • mouse moved mousemove
    • button pressed or released mousedown, mouseup

6.813/6.831 User Interface Design and Implementation

translated events
Translated Events
  • Raw events are translated into higher-level eventsjQuery event
    • Clicking click
    • Double-clicking dblclick
    • Character typed keypress
    • Entering or exiting mouseenter,an object’s bounding box mouseleave

6.813/6.831 User Interface Design and Implementation

state machines translate events
State Machines Translate Events

mousemove < threshold

mousedown

Idle

Ready

Dragging

mousemove > threshold

mouseup / click

mouseup

click

Idle

Ready

click / dblclick

timeout

6.813/6.831 User Interface Design and Implementation

keyboard focus
Keyboard Focus
    • An object in the view tree has the keyboard focus

jQuery event

    • Keyboard focus gained focusin,or lost focusout
  • Changing keyboard focus
    • by user input event: e.g. mouse down, Tab
    • programmatically by a method call
  • Not all HTML elements can have keyboard focus by default

to force ability to take focus

6.813/6.831 User Interface Design and Implementation

properties of an input event
Properties of an Input Event
  • Mouse position (X,Y)
  • Mouse button state
  • Modifier key state (Ctrl, Shift, Alt, Meta)
  • Timestamp
    • Why is timestamp important?
  • Keyboard key, character, or mouse button that changed
    • jQuery event.which overloads this for mouse events and key events

6.813/6.831 User Interface Design and Implementation

event queue
Event Queue
  • Events are stored in a queue
    • User input tends to be bursty
    • Queue saves application from hard real time constraints (i.e., having to finish handling each event before next one might occur)
  • Mouse moves are coalesced into a single event in queue
    • If application can’t keep up, then sketched lines have very few points

6.813/6.831 User Interface Design and Implementation

example with coalescing
Example: With Coalescing

6.813/6.831 User Interface Design and Implementation

example without coalescing
Example: Without Coalescing

6.813/6.831 User Interface Design and Implementation

event loop
Event Loop
  • While application is running
    • Block until an event is ready
    • Get event from queue
    • Translate raw event into higher-level events
      • Generates double-clicks, characters, focus, enter/exit, etc.
      • Translated events are put into the queue
    • Dispatch event to target component
  • Who provides the event loop?
    • High-level GUI toolkits do it internally (Java Swing, VB, C#, HTML)
    • Low-level toolkits require application to do it (MS Win, Palm, Java SWT)

6.813/6.831 User Interface Design and Implementation

event dispatch propagation
Event Dispatch & Propagation
  • Dispatch: choose target component for event
    • Key event: component with keyboard focus
    • Mouse event: component under mouse (hit testing)
      • Mouse capture: any component can grab mouse temporarily so that it receives all mouse events (e.g. for drag & drop)
  • Propagation: event bubbles up hierarchy
    • If target component doesn’t handle event, the event passes up to its parent, and so on up the tree
  • Consumption: event stops propagating
    • May be automatic (because some component finally handles it) or manual (keeps going unless explicitly stopped)

6.813/6.831 User Interface Design and Implementation

hit testing and event propagation
A

B

C

Hit Testing and Event Propagation

Window

Node A

Edge A-C

Circle A

Label A

6.813/6.831 User Interface Design and Implementation

javascript event models
Javascript Event Models
  • Events propagate in different directions on different browsers
    • Netscape 4: downwards from root to target
    • Internet Explorer: upwards from target to root
    • W3C standardized by combining them: first downwards (“capturing”), then upwards (“bubbling”)
      • Firefox, Opera, Safari

6.813/6.831 User Interface Design and Implementation

multitouch dispatch iphone
Multitouch Dispatch (iPhone)
  • Multitouch input events have more than one (x,y) point (fingers on screen)
    • Touch-down event dispatches to the component containing it (which also captures future touch-moves and touch-up for that finger)
    • Touch events carry information about all fingers currently touching
    • A component can turn on “exclusive touch” to receive all touch-down events even if they fall outside it

6.813/6.831 User Interface Design and Implementation

designing a controller
Designing a Controller
  • A controller is a finite state machine
  • Example: push button

Armed

down

mouse enter

Idle

Hover

up

(invoke)

leave

enter

mouse leave

Disarmed

up

6.813/6.831 User Interface Design and Implementation

another finite state machine
Another Finite State Machine

Idle

Mouse move (over illegal target)

Dragging

Can’t Drop

Mouse down

Mouse up(do the drop)

Mouse move(over legal target)

Escape keypress

(cancel drop)

Mouse up,

Escape keypress(cancel drop)

6.813/6.831 User Interface Design and Implementation

summary
Summary
  • Input events are raw and translated
  • Events are dispatched to a target view and propagated up (or down then up) the view hierarchy
  • State machines are a useful pattern for thinking about input

6.813/6.831 User Interface Design and Implementation

ad