//# Using gestures 
//This example shows how to use the Swipe, Pinch, Rotate, DragSingle, FingerDown, FingerUp, and ClearMulti events generated by the GestureView.
import device;
import ui.TextView as TextView;
import ui.GestureView as GestureView;
//## Class: Application
//Create an Application.
exports = Class(GC.Application, function () {
this.initUI = function () {
// Create a GestureView
var gview = new GestureView({
superview: this.view,
layout: 'box',
backgroundColor: 'blue'
});
// Subscribe to gesture events: Swipe, Pinch, Rotate, DragSingle, FingerDown, FingerUp, ClearMulti
gview.on('Swipe', bind(this, 'swipe'));
gview.on('Pinch', bind(this, 'pinch'));
gview.on('Rotate', bind(this, 'rotate'));
gview.on('DragSingle', bind(this, 'drag'));
gview.on('FingerDown', bind(this, 'fingerDown'));
gview.on('FingerUp', bind(this, 'fingerUp'));
gview.on('ClearMulti', bind(this, 'clearMulti'));
// This view scales, rotates, and moves around
// in response to Pinch, Rotate, and DragSingle events
this.demoView = new TextView({
superview: this.view,
layout: 'box',
width: 100,
height: 100,
x: 100,
y: 200,
centerAnchor: true,
canHandleEvents: false,
blockEvents: true,
backgroundColor: 'red',
text: 'Pinch Me!'
});
// This view logs Swipe events
this.logView = new TextView({
superview: this.view,
layout: 'box',
bottom: 50,
height: 50,
canHandleEvents: false,
blockEvents: true,
backgroundColor: 'green',
text: device.isSimulator ? 'test on device for multitouch' : 'swipe, pinch, rotate, drag'
});
// This view logs FingerUp and FingerDown events
this.fingerCountView = new TextView({
superview: this.view,
layout: 'box',
bottom: 0,
height: 50,
canHandleEvents: false,
blockEvents: true,
backgroundColor: 'yellow',
text: 'Finger count: 0'
});
// These values are updated in response to ClearMulti events
this._currentScale = 1;
this._currentRotation = 0;
};
// update logView in response to Swipe event
this.swipe = function (angle, dir, numberOfFingers) {
this.logView.setText(angle + " " + dir + " " + numberOfFingers);
};
// scale demoView in response to Pinch event
this.pinch = function (d) {
this.demoView.style.scale = d * this._currentScale;
};
// rotate demoView in response to Rotate event
this.rotate = function (r) {
this.demoView.style.r = r + this._currentRotation;
};
// reposition demoView in response to DragSingle event
this.drag = function(dx, dy) {
this.demoView.style.x += dx;
this.demoView.style.y += dy;
};
// update logView in response to FingerDown event
this.fingerDown = function(fingerCount) {
this.fingerCountView.setText('FingerDown. New count: ' + fingerCount);
};
// update logView in response to FingerUp event
this.fingerUp = function(fingerCount) {
this.fingerCountView.setText('FingerUp. New count: ' + fingerCount);
};
// save current scale and rotation in response to ClearMulti event
this.clearMulti = function() {
this._currentScale = this.demoView.style.scale;
this._currentRotation = this.demoView.style.r;
};
});
//The output should look like this screenshot:
//