Getting Started

This tutorial covers programming with GeForMTjs, the JavaScript implementation of GeForMT.

Syntax

The syntax used with the JavaScript implementation of GeForMT follows the EBNF grammar and consists of:

API

GeForMT.init(gestures,settings)

Initialization of the framework.

GeForMT.addGesture(gesture)

Adding of a gesture definition

GeForMT.removeGesture(identifier)

Remove a gesture with a given unique identifier

GeForMT.addRecognitionStartedEventListener(function)

Registers an event listener, that is called when gesture recognition starts

GeForMT.addRecognizedCandidatesEventListener(function)

Registers an event listener that is called when part of a gesture has been recognized. The event reports the identifiers of all gesture candidates.

GeForMT.addRecognitionFailedEventListener(function)

Registers an event listener that is called when no gesture has been recognized after user input is complete.

GeForMT.setFeedback(bool)

Activates or deactivates standard visual feedback

Global Properties (settings for object model)

var settings = {
	feedback: true,         // Visual feedback (default true)
	preventDefault: false,  // Prevents standard behavious of 
				// browsers for gestural input
				// (default true)
	contiguityInterval: 800 // Time allowed between sequentially 
				// performed gesture paths in
				// milliseconds (default 1000)
}

Gesture definition (gesture in the object model)

var gesture = {
	identifier: "dragObjects",	// Unique identifier
	expr: "1F(MOVE(.objects))",	// GeForMT expression
	online: true,			// Online/offline recognition
					// (default false)
	handler: function(e){		// Event listener for
					// GestureRecognizedEvent
		... 
		}
}

GestureRecognizedEvent Interface

e.identifier

Unique identifier of a gesture

e.expr

GeForMT expression of the recognized gesture

e.pathes

Paths of the gesture represented as coordinate lists. Supplies a list of gesture sequences, which are in turn a list of template objects representing exactly one path of a finger, expressed by a list of coordinates (points).

Example: 2F(LINE)

var lineIndexFinger = e.pathes[0][0].points;
var lineSecondFinger = e.pathes[0][1].points

Example: 1F(LINE);1F(LINE)

var firstLine = e.pathes[0][0].points;
var nextLine= e.pathes[1][0].points

e.events

All TouchEvents, which represent the gesture input. Supplies a list of gesture sequences, in which all of the recorded TouchEvent objects are contained. Their specification is taken from the TouchEvent interface of W3C (see http://www.w3.org/TR/touch-events/).

Example: 2F(LINE)

var touchstartEvent = e.events[0][0];

Example: 1F(LINE);1F(LINE)

var touchstartEventFirstLine = e.events[0][0];
var touchstartEventNextLine = e.events[1][0];

e.currentEvent

Current TouchEvent object of the gesture input. See W3C TouchEvent Interface: http://www.w3.org/TR/touch-events/.

e.duration

Duration of gesture input in milliseconds

e.getBoundingBox()

Representation of the rectangular bounding box of the input. Supplies an object with the attributes top, right, bottom, and left.

e.getMidPoint()

Supplies the center of the gesture as (x,y) coordinate.

Basic Example for Circle Gesture

<head>
  <script type="text/javascript" src="GeForMT.min.js"></script>
  <script type="text/javascript">
    window.onload = function() {
      var settings = {
        feedback: true
      }
      var gestures = {
        circle: {
          expr: "1F(CIRCLE)",
          handler: function(e) {
            // Kreisgeste erkannt
          }
        }
      }
      GeForMT.init(gestures,settings);
      GeForMT.addRecognitionFailedEventListener(function(){
        // z.B. Hilfe aufrufen
      });
    };
  </script>
</head>