TIMELINE: integrating iphone gestures to scroll timeline

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Browse the example from an iPhone or iTouch

What is the expected output? What do you see instead?
Gestures don't affect the timeline. e.g. you can't scroll it.

What version of the product are you using? On what browser and what
operating system?

iphone 2.x. Safari

Please provide any additional information below.

Original issue reported on code.google.com by jasonj02...@gmail.com on 30 Apr 2009 at 3:26

[GoogleCodeExporter]

Yup, I agree, it'd be a nice feature.

Original comment by larryklu...@gmail.com on 18 May 2009 at 5:23

• Changed title: TIMELINE: integrating iphone gestures to scroll timeline
• Added labels: Project-Timeline, Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

This would be particularly nice to see fixed so you can use it on an iPad - 
otherwise
simile actually looks very nice on the iPad.  I was intending to use Simile for 
an
internal project but it not working on iPads is minor dealbreaker.

Zooming a lot still has things look very sharp because the text gets 
antialiased at
whatever size.

Original comment by ian.gold...@gmail.com on 3 Jun 2010 at 3:12

[GoogleCodeExporter]

It would be really handy to be able to show the timeline on the ipad/iphone and 
scroll back and forth.

Original comment by sgmccl...@gmail.com on 21 Jun 2010 at 5:10

[GoogleCodeExporter]

I''m working with healthcare professionals and being able to use the iPad would 
be a big plus for Exhibit. 

Original comment by tak...@gmail.com on 18 Jul 2010 at 5:16

[GoogleCodeExporter]

This indeed would be great, also for Android. Could you briefly point the 
specific changes needed or to some documentation, so we can also try to help 
adding this feature ?

Original comment by blueca...@gmail.com on 3 Aug 2010 at 2:38

[GoogleCodeExporter]

I also would like to see this feature.  The Timeline widget lends is based upon 
scrolling.  It would be amazing to have gestures and be able to utilize this on 
touch devices!

Original comment by joed...@gmail.com on 31 Aug 2010 at 9:42

[GoogleCodeExporter]

I just tried scrolling timeline example with my iPhone 4 and it didn't work 
either. It would be very nice if I can control this from iOS devices!

Original comment by toshi....@gmail.com on 15 Sep 2010 at 1:39

[GoogleCodeExporter]

any estimate on this?

Original comment by mike.law...@theice.com on 20 Nov 2010 at 7:07

[GoogleCodeExporter]

You can add this to the timeline-bundle.js to enable ios dragging.  I have only 
done very rudimentary testing of this code.

SimileAjax.DOM.registerEventWithObject(this._div,"touchmove",this,"_onTouchMove"
);

Timeline._Band.prototype._onTouchMove=function(D,A,E){
    if(A.touches.length == 1){
        A.preventDefault();
        var touch = A.changedTouches[0];
        var C=touch.clientX-this._dragX;
        var B=touch.clientY-this._dragY;
        this._dragX=touch.clientX;
        this._dragY=touch.clientY;
        this._moveEther(this._timeline.isHorizontal()?C:B);
        this._positionHighlight();
    }
};

Original comment by mattrcam...@gmail.com on 30 Nov 2010 at 4:04

[GoogleCodeExporter]

the above does start the drag but if you drag on teh right of the timeline for 
about an inch and them move tot he left side and try to drag it again it jumps 
back to its original position.

I wonder if it need a onTouchEnd ... i tried (mirroring the onMouseUp with no 
luck.

SimileAjax.DOM.registerEventWithObject(this._div,"touchend",this,"_onTouchEnd");

Timeline._Band.prototype._onTouchEnd=function(){this._dragging=false;
this._keyboardInput.focus();
};

Has anyone figured this out??

Original comment by chadsmit...@gmail.com on 29 Dec 2010 at 11:42

[GoogleCodeExporter]

So here is some code to get a bit closer 95% there:

(Still doesnt work on the lower band, and if you try to drag there it breaks 
the top dragging)

SimileAjax.DOM.registerEventWithObject(this._div,"touchmove",this,"_onTouchMove"
);
SimileAjax.DOM.registerEventWithObject(this._div,"touchend",this,"_onTouchEnd");

Timeline._Band.prototype._onTouchMove=function(D,A,E){
    if(A.touches.length == 1){
        A.preventDefault();
        var touch = A.changedTouches[0];
        var C=touch.clientX-this._dragX;
        var B=touch.clientY-this._dragY;
        this._dragX=touch.clientX;
        this._dragY=touch.clientY;
        this._moveEther(this._timeline.isHorizontal()?C:B);
        this._positionHighlight();
        this._changing=true;
        this._fireOnScroll();
        this._setSyncWithBandDate();
    } 
};

Timeline._Band.prototype._onTouchEnd=function(){
    this._changing=false;
};

Original comment by chadsmit...@gmail.com on 29 Dec 2010 at 11:52

[GoogleCodeExporter]

This is a big issue for us.  We're working on building educational content for 
the iPad and having Timeline functionality would be key!  Thanks!!

Original comment by hjgilb...@gmail.com on 23 Feb 2011 at 2:54

[GoogleCodeExporter]

any update ?

Original comment by find...@gmail.com on 9 Apr 2011 at 10:22

[GoogleCodeExporter]

i think i got it working...donno about that double band problem..i tested it on 
a single band using the local example at 
http://code.google.com/p/simile-widgets/downloads/detail?name=timeline_local_exa
mple_1.0.zip&can=2&q=

i added a touchstart listner and replicated the mousedown method for it, here 
is the code, to be added to timeline-bundle.js(dont forget to point to this 
file by setting bundle=true and pointing to a local url rather that the online 
MIT one, your html file where you include the timeline-api.js file should look 
something like:
<script src="PATH_TO_FILE_ON_YOUR_MACHINE/timeline-api.js?bundle=true" 
type="text/javascript"></script>

):

SimileAjax.DOM.registerEventWithObject(this._div,"touchstart",this,"_onTouchStar
t");
SimileAjax.DOM.registerEventWithObject(this._div,"touchmove",this,"_onTouchMove"
);

Timeline._Band.prototype._onTouchStart=function(D,A,E)
{
    if(A.touches.length == 1)
    {
    var touch = A.changedTouches[0];
    this._dragX=touch.clientX;
    this._dragY=touch.clientY;
    }
}

Timeline._Band.prototype._onTouchMove=function(D,A,E)
{
    if(A.touches.length == 1)
    {
    A.preventDefault();
        var touch = A.changedTouches[0];
    var C=touch.clientX-this._dragX;
        var B=touch.clientY-this._dragY;
        this._dragX=touch.clientX;
        this._dragY=touch.clientY;
        this._moveEther(this._timeline.isHorizontal()?C:B);
    this._positionHighlight();
    this._fireOnScroll();
    this._setSyncWithBandDate();
    } 
};

Original comment by find...@gmail.com on 10 Apr 2011 at 6:24

[GoogleCodeExporter]

It runs the code above? I need to run the linetime in ipad and iphone and 
doesnt work? please help, any suggestion, any update?

Original comment by nancy.ib...@gmail.com on 27 Jun 2011 at 11:51

[GoogleCodeExporter]

here is the modified local_example: 
http://lcc.gatech.edu/~kagarwal9/local_example/
try opening it on an iPad/iPhone and scroll

The code is attached, which follows the above steps to enable scroll on iOS 
devices.

The two files to see are:
1. index.html which is at the root and should have the following line:
<script src="PATH_TO_FILE_ON_YOUR_MACHINE/timeline-api.js?bundle=true" 
type="text/javascript"></script>

2.timeline-bundle.js, which is at \local_example\timeline\webapp\api which 
should have the code, you can just use the file in the attached file and 
replace your timeline-bundle.js with it:

SimileAjax.DOM.registerEventWithObject(this._div,"touchstart",this,"_onTouchStar
t");
SimileAjax.DOM.registerEventWithObject(this._div,"touchmove",this,"_onTouchMove"
);

Timeline._Band.prototype._onTouchStart=function(D,A,E)
{
    if(A.touches.length == 1)
    {
    var touch = A.changedTouches[0];
    this._dragX=touch.clientX;
    this._dragY=touch.clientY;
    }
}

Timeline._Band.prototype._onTouchMove=function(D,A,E)
{
    if(A.touches.length == 1)
    {
    A.preventDefault();
        var touch = A.changedTouches[0];
    var C=touch.clientX-this._dragX;
        var B=touch.clientY-this._dragY;
        this._dragX=touch.clientX;
        this._dragY=touch.clientY;
        this._moveEther(this._timeline.isHorizontal()?C:B);
    this._positionHighlight();
    this._fireOnScroll();
    this._setSyncWithBandDate();
    } 
};

Original comment by find...@gmail.com on 28 Jun 2011 at 1:29

Attachments:

• local_example.zip

[GoogleCodeExporter]

I just tried the above code and it works perfectly.  Thanks!

Original comment by davecrum...@gmail.com on 28 Jun 2011 at 9:09

[GoogleCodeExporter]

Thanks for your help, now works great

Original comment by nancy.ib...@gmail.com on 28 Jun 2011 at 9:23

[GoogleCodeExporter]

also, you might notice the keyboard coming in when you tap on a timeline event, 
to stop that from happening just find the following line in timeline-bundle.js 
and comment it:
BEFORE:  this._keyboardInput.focus();
AFTER: //this._keyboardInput.focus();

i have fixed the above example url with this.

Original comment by find...@gmail.com on 28 Jun 2011 at 11:19

[GoogleCodeExporter]

The above fix (commenting out keyboard focus) works as well.  Thanks!

Original comment by davecrum...@gmail.com on 29 Jun 2011 at 1:29

[GoogleCodeExporter]

Has someone a fix for Timeplot, too?

Original comment by henrik.genssen@gmail.com on 31 Dec 2011 at 3:34

[GoogleCodeExporter]

did anyone find this problem.
when I use iphone and touch the circle spotm it does not come up the bubble 
but ask you to input text with keyboard come up!

Original comment by rebuil...@gmail.com on 18 Apr 2012 at 2:17

[GoogleCodeExporter]

Comment 19 solved my problem that keyboard coming up the moment I tap an event 
or circle. Thanks.

Original comment by tengy...@gmail.com on 30 Apr 2012 at 8:12

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

have you ever try to combine this solution with combination of the timeline 
with the timemap? for example with that one 
http://gmaps-samples.googlecode.com/svn/trunk/timemap/google_events.html?

because i do not know how to apply the code which fix the the problem when i 
try it in a touch screen.

Original comment by pylou...@gmail.com on 25 Oct 2012 at 11:48

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I did something like this, works in Android for mua, don't know about ios. I 
used this in conjunction with jquery mobile. For the row of individual days, 
only swipe (not long dragging) worked.

    SimileAjax.DOM.registerEventWithObject(this._div,"touchmove",this,"_onTouchMove");
SimileAjax.DOM.registerEventWithObject(this._div,"touchend",this,"_onTouchEnd");
SimileAjax.DOM.registerEventWithObject(this._div,"touchstart",this,"_onTouchStar
t");

    Timeline._Band.prototype._onTouchStart=function(D,A,E)
    {
        if(A.touches.length == 1)
        {
            var touch = A.changedTouches[0];
            this._dragX=touch.clientX;
            this._dragY=touch.clientY;
            this._dragging=true;
        }
    }

    Timeline._Band.prototype._onTouchMove=function(D,A,E)
    {
        if(A.touches.length == 1)
        {
            A.preventDefault();
            A.stopPropagation(); 
            A.stopImmediatePropagation();         
            var touch = A.changedTouches[0];
            var C=touch.clientX-this._dragX;
            var B=touch.clientY-this._dragY;
            this._dragX=touch.clientX;
            this._dragY=touch.clientY;
            this._moveEther(this._timeline.isHorizontal()?C:B);
            this._positionHighlight();
            this._fireOnScroll();
            this._setSyncWithBandDate();
        } 
    };

    Timeline._Band.prototype._onTouchEnd=function(){
            this._dragging=false;
    };

Original comment by danielo...@gmail.com on 21 Oct 2014 at 12:29