Lecture 12 input
This presentation is the property of its rightful owner.
Sponsored Links
1 / 21

Lecture 12: Input PowerPoint PPT Presentation


  • 60 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

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


Lecture 12 input

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 channelB. coordinate translationC. the view tree D. double buffering

Z-order is determined by: (choose one best answer)A. the alpha channelB. coordinate translationC. the view treeD. double buffering

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

A screenshot of a GUI for a report should be stored as: (choose one best answer)A. JPGB. GIFC. PNGD. 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 releasedkeydown, keyup

    • mouse movedmousemove

    • button pressed or releasedmousedown, mouseup

6.813/6.831 User Interface Design and Implementation


Translated events

Translated Events

  • Raw events are translated into higher-level eventsjQuery event

    • Clickingclick

    • Double-clickingdblclick

    • Character typedkeypress

    • Entering or exiting mouseenter,an object’s bounding boxmouseleave

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 gainedfocusin,or lostfocusout

  • 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


    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


  • Login