Some User Interaction

A Demo.
- On a side note, I think things are correct, but there was the last lecture so ...
In general event driven programming works as follows
- ```
while (1) 
   e = getEvent()
   if (e != none)
       DispatchEvent(e)
```
- This is used all over the place.
  - Window systems
  - GUI based programs
- You normally don't get to see this loop, something else handles it for your.
  - A real good indication you are in an event driven world is your program doesn't have a main, or perhaps a main loop.
  - You just set up initialization.
  - And a bunch of "event handlers"
- Like our code in this class
  - Notice we don't ever deal with an exit()
  - or return 0 for you c++ ers.
- In general, the system is responsible for
  - Getting an event.
    - This is usually done by the os and handed to the system
    - Events are placed in a queue
    - And delivered in order.
  - The system is responsible for determining which client gets the event.
    - This is normally based on event "location"
    - But can be overridden in some systems.
    - Clients are usually in a tree, and the event is
      - "Passed" down the tree until something claims it and handles it or
      - "Passed" back up the tree until something takes responsibility for it.
  - Applications generally need to register event handlers
    - These are special functions which are called when a specified event occurs.
    - Generally they do not return a value.
    - But they should be "quick" functions.
- Events
  - There are many different types of events
    - Changes in environment
    - IO
    - Look here for the event reference for DOM
- Events usually have associated attributes
  - These describe the conditions.
  - What key was pressed, where, ....
  - Look here
Event Handlers
- Registering Event Handlers
- The parameter
- Removing Event handlers
- The problem I have.

For devices like mice

They generate lots of data.
The queue can become filled with info the user doesn't want.
So sometimes the data is compressed
Ie, some moves are skipped

He spends some time discussing different input device types.

Generally there are
Pressy things
- Keybords
- Button Boxes,
- Mouse Buttons
- They give you a result of which key was pressed
- You get down, up , down/up
- You can frequently get meta information (Modifier keys)
- Sometimes you get location.
- Think Event occurred.
Spinny things
- Mouse wheel
- Dial box
- Sliders
- You frequently get a percent change
- Sort of a 1 dimensional result.
- This will be either relative or absolute.
Movy things
- Mouse
- Pen
- Trackball
- You get either x,y (and possibly z) change
- Or new x, y (and possibly z) location.
- Sometimes you get x,y, and z rotation
- Two or three dimensional
Or weird things
- A mesh of point locations
- A picture
These are usually abstracted by API/OS/ ...

Events in HTML/Javascript/WebBrowsers

This is somewhat dependent on browser implementation.
- I am testing everything on chrome on linux.
- Mostly it looks like older versions of IE are problematic.

To register an event handler

addEventListener()
Takes a type
- A string
And a function
- Can be inline or an actual function call.
And some options (not important to us)
Adding a callback without parameters
- ```
window.addEventListener("focus",FocusFunc);
	     
```
- This can be removed with removeEventListener

If I want parameters

This is cumbersome.
Use an anonymous function

var tmpCanvas = this;

canvas.addEventListener("focus",
     function( evnt) {
        tmpCanvas.FocusFun(tmpCanvas, evnt)
     }
);

For position events

you are given coordinates relative to the browser.
You need to know where the canvas is

this.x = canvas.offsetLeft;
this.y = canvas.offsetTop;

canvas.addEventListener("click",
     function(evnt) {
        tmpCanvas.ClickFunc(tmpCanvas, evnt);
     }
);

ClickFunc: function (me, evnt) {
  var x = evnt.clientX-me.x;
  var y = evnt.clientY-me.y
  console.log("In mousepress, Real", x, y);
  console.log("\t\t raw", evnt.clientX, evnt.clientY);

  me.ChangeAnimation();
},

Focus in the canvas.
- An object does not receive a keypress event unless it is in focus.
- By default the canvas class does not take "focus".
- You need to enable this
- ```
var canvas = document.createElement('canvas')
    canvas.tabIndex = 0;  //  -1 : no focus, 0: in rotation 1+: priority
    canvas.height = height;
```

Removing a handler

removeEventListener

The event handler must not be an anonymous function

This is part of the specification.
Therefore a nasty trick is needed.
Installing the mouse handler

              case 'M':
                  me.canvas.addEventListener("mousemove",this._Listener);
                  break;
              case 'm':
                  me.canvas.removeEventListener("mousemove",this._Listener);
                  break;

This registers and unregisters a "prehandler" function

    _Listener: function(evnt) {
       if (typeof arguments.callee.me == 'undefined') {
          arguments.callee.me = this;
       }
       if (typeof evnt != "undefined") {
          arguments.callee.me.MouseFunc(arguments.callee.me, evnt);
       }
    },

This function registers the parent on first call as a local static variable.
- So it needs to be called once during initialization phase.
Then it calls the mouse handler on a valid event.

The mouse handler is nothing special

MouseFunc: function(me, evnt) {
   var x = evnt.clientX-me.x;
   var y = evnt.clientY-me.y
   console.log("Mickey Says ",x, y);
},

Unfortunately, _Listener becomes global, so this is only useful with one canvas.