Re: Issue 278 in simile-widgets: TIMELINE: integrating iphone gestures to scroll timeline

[codesite...@google.com]

Comment #2 on issue 278 by ian.goldsmith: TIMELINE: integrating iphone
gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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.

[codesite...@google.com]

Comment #3 on issue 278 by sgmcclain: TIMELINE: integrating iphone gestures

to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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

[codesite...@google.com]

Comment #4 on issue 278 by takmad: TIMELINE: integrating iphone gestures to
scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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

[codesite...@google.com]

Comment #5 on issue 278 by bluecacao: TIMELINE: integrating iphone gestures

to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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 ?

[codesite...@google.com]

Comment #6 on issue 278 by joedanz: TIMELINE: integrating iphone gestures

to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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!

[codesite...@google.com]

Comment #7 on issue 278 by toshi.2.u: TIMELINE: integrating iphone gestures

to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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!

[codesite...@google.com]

Comment #8 on issue 278 by m...@systemsplanet.com: TIMELINE: integrating

iphone gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

any estimate on this?

[codesite...@google.com]

Comment #9 on issue 278 by mattrcampbell: TIMELINE: integrating iphone

gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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();
}
};

[codesite...@google.com]

Comment #10 on issue 278 by chadsmith76: TIMELINE: integrating iphone

gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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??

[codesite...@google.com]

Comment #11 on issue 278 by chadsmith76: TIMELINE: integrating iphone

gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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;
};

[codesite...@google.com]

Comment #12 on issue 278 by hjgilb...@gmail.com: TIMELINE: integrating

iphone gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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!!

[codesite...@google.com]

Comment #13 on issue 278 by find...@gmail.com: TIMELINE: integrating iphone

gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

any update ?

[codesite...@google.com]

Comment #14 on issue 278 by find...@gmail.com: TIMELINE: integrating iphone

gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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_example_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,"_onTouchStart");

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();
}
};

[codesite...@google.com]

Comment #15 on issue 278 by nancy.ib...@gmail.com: TIMELINE: integrating

iphone gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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

[codesite...@google.com]

Comment #16 on issue 278 by find...@gmail.com: TIMELINE: integrating iphone

gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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,"_onTouchStart");
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();
}
};

Attachments:
local_example.zip 548 KB

[codesite...@google.com]

Comment #17 on issue 278 by davecrum...@gmail.com: TIMELINE: integrating

iphone gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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

[codesite...@google.com]

Comment #18 on issue 278 by nancy.ib...@gmail.com: TIMELINE: integrating

iphone gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

Thanks for your help, now works great

[codesite...@google.com]

Comment #19 on issue 278 by find...@gmail.com: TIMELINE: integrating iphone

gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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.

[codesite...@google.com]

Comment #20 on issue 278 by davecrum...@gmail.com: TIMELINE: integrating

iphone gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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

[codesite...@google.com]

Comment #21 on issue 278 by henrik....@gmail.com: TIMELINE: integrating

iphone gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

Has someone a fix for Timeplot, too?

[codesite...@google.com]

Comment #22 on issue 278 by rebuil...@gmail.com: TIMELINE: integrating

iphone gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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!

[codesite...@google.com]

Comment #23 on issue 278 by tengy...@gmail.com: TIMELINE: integrating

iphone gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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

[codesite...@google.com]

Comment #24 on issue 278 by pylou...@gmail.com: TIMELINE: integrating

iphone gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

does this code runs in a simple touchable screen ? or it is only for
iphone/ipad devices?

[codesite...@google.com]

Comment #25 on issue 278 by pylou...@gmail.com: TIMELINE: integrating

iphone gestures to scroll timeline
http://code.google.com/p/simile-widgets/issues/detail?id=278

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.

[codesite...@google.com]

Comment #26 on issue 278 by danielo...@gmail.com: TIMELINE: integrating

iphone gestures to scroll timeline

https://code.google.com/p/simile-widgets/issues/detail?id=278

I did something like this, works in Android for mua, don't know about ios.
I used this in conjunction with jquery mobile.

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

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

SimileAjax.DOM.registerEventWithObject(this._div,"touchstart",this,"_onTouchStart");

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;
};

--
You received this message because this project is configured to send all
issue notifications to this address.
You may adjust your notification preferences at:
https://code.google.com/hosting/settings

[codesite...@google.com]

Comment #27 on issue 278 by danielo...@gmail.com: TIMELINE: integrating

iphone gestures to scroll timeline
https://code.google.com/p/simile-widgets/issues/detail?id=278

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.