Odynia.org blog – 2008

Looking for iTransit? Check two posts down.

–

Been playing with touches in Safari, specifically trying to track certain gestures.

If you haven’t read it, a good primer on touches/gestures in Mobile Safari can be found here. Its a great starting point.

So now that the its been established as to how to do Drag and Drop and rotating/scaling what about the other one finger gestures that apple employs?

Specifically, I’m trying to replicate the swipe left and right functionality of the photo browser (show previous/next photos), and I’ve been able to do so.

The trick here is to catch the initial touch event, and the ending touch event and work out where our finger has gone. A key thing to remember is that the touches are passed around and updated by reference, so your original copy of the touch will be updated with a new position.

What I’ve ended up with is a small class that watches the touchstart and touchend events on the document level, and when it detects a swipe it fires a gesture:swipe event.

How?

The following is the code that I used, you’ll need Prototype to make this work.

var GestureClass = Class.create
({
    // Fired when a new instance of this object is made
    initialize: function ()
    {
        // listen for start/stop events
        document.observe('touchstart', this.start.bind(this));
        document.observe('touchend', this.end.bind(this));

        // touch storage
        this.gestures = [];

    },
    start: function (e)
    {
        // currently only support one finger on the viewport
        if (e.touches.length == 1)
        {
            var touch = e.touches[0];

            // store the touch for later
            this.gestures[touch.identifier] = Object.clone(touch);
            this.gestures[touch.identifier].date = new Date();
        }
    },

    end: function (e)
    {
        // still only one finger
        if (e.changedTouches.length == 1)
        {
            // get the most recent touch
            var end = e.changedTouches[0];
            end.date = new Date();

            // get the position that we started at
            var start = this.gestures[end.identifier];

            // and the duration of our swipe? number of milliseconds the gesture took
            var duration = end.date.getTime() - start.date.getTime();

            // calculate offsets
            var horizontalMovement = start.clientX - end.clientX;
            var verticalMovement = start.clientY - end.clientY;

            // big enoug to count as a swipe? and quick enough
            var viewport = document.viewport.getDimensions();
            if (Math.abs(horizontalMovement) >= (viewport.width/2) && duration <= 800)
            {
                // this object is passed to the new event under the 'memo' property
                var gesture =
                {
                    start: start,
                    end: end,
                    gesture: 'swipe',
                    direction: (horizontalMovement >= 0 ? 'left' : 'right')
                };

                // Fire the gesture, listen with document.observe('gesture:swipe', <function>);
                document.fire('gesture:swipe', gesture);
            }
        }
    },
});

var Gestures = new GestureClass();

var GestureClass = Class.create

({

// Fired when a new instance of this object is made

initialize: function ()

{

// listen for start/stop events

document.observe('touchstart', this.start.bind(this));

document.observe('touchend', this.end.bind(this));

// touch storage

this.gestures = [];

start: function (e)

{

// currently only support one finger on the viewport

if (e.touches.length == 1)

{

var touch = e.touches[0];

// store the touch for later

this.gestures[touch.identifier] = Object.clone(touch);

this.gestures[touch.identifier].date = new Date();

}

end: function (e)

{

// still only one finger

if (e.changedTouches.length == 1)

{

// get the most recent touch

var end = e.changedTouches[0];

end.date = new Date();

// get the position that we started at

var start = this.gestures[end.identifier];

// and the duration of our swipe? number of milliseconds the gesture took

var duration = end.date.getTime() - start.date.getTime();

// calculate offsets

var horizontalMovement = start.clientX - end.clientX;

var verticalMovement = start.clientY - end.clientY;

// big enoug to count as a swipe? and quick enough

var viewport = document.viewport.getDimensions();

if (Math.abs(horizontalMovement) >= (viewport.width/2) && duration <= 800)

{

// this object is passed to the new event under the 'memo' property

var gesture =

{

start: start,

end: end,

gesture: 'swipe',

direction: (horizontalMovement >= 0 ? 'left' : 'right')

};

// Fire the gesture, listen with document.observe('gesture:swipe', <function>);

document.fire('gesture:swipe', gesture);

}

});

var Gestures = new GestureClass();

Is that documented enough to make sense? Drop me a line in the comments if not and I’ll see what I can do to explain better

You’ll see this gesture used in the new version of iTransit, naturally – and there’s more gestures to come!

Cheers,

-bok

Hi all,

While I’m quietly working on a new version of iTransit (iui is a bit bloated…) you’re invited to continue to check out the current version @ http://iphone.itransit.com.au/.

Presently it is for Melbourne only, other cities are on my medium-range radar.

Here’s whats coming:

Smaller, sleeker, faster!
Favourites
Searching via station/stop name
Bus data
Traffic Information
VLine Train/Bus data
Swipe to view next/previous services
Other cities…
Investigate LocationService (GPS) integration

The current aim for iTransit is to be something that you can whip out on the go to find out info live – as such browsing timetables won’t be a focus.

Comments, suggestions and other feedback is very valued. Feel free to leave a comment below or via the app.

Cheers,
bok

Monthly archives for July, 2008

iPhone + Safari + Gestures

iTransit Features Poll

iTransit

"TrainTracker"

Melbourne Public Transport + Google Maps