1 / 21

Lecture 12: Input

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.

laith-rhodes
Télécharger la présentation

Lecture 12: Input

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 12: Input GR2 out, due Sunday 6.813/6.831 User Interface Design and Implementation

  2. UI Hall of Fame or Shame? 6.813/6.831 User Interface Design and Implementation

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

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

  5. Today’s Topics • Input events • State machines • Event dispatch & propagation 6.813/6.831 User Interface Design and Implementation

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

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

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

  9. 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 <div tabindex=“-1”> to force ability to take focus 6.813/6.831 User Interface Design and Implementation

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

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

  12. Example: With Coalescing 6.813/6.831 User Interface Design and Implementation

  13. Example: Without Coalescing 6.813/6.831 User Interface Design and Implementation

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

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

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

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

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

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

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

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

More Related