You are correct. Use tl.getBand(0).setCenterVisibleDate() to move the timeline
to a specific date.
You need to pass in a javascript date object to setCenterVisibleDate().
For example, to have buttons that jump the timeline by one year +/- you could
use:
<input type="button" id="backInTime" value="Go back in time by one year">
<input type="button" id="forwardInTime" value="Go forward in time by one year">
SimileAjax.DateTime has .incrementByInterval(). Let's add
.decrementByInterval():
SimileAjax.DateTime.decrementByInterval = function(date, intervalUnit,
timeZone) {
timeZone = (typeof timeZone == 'undefined') ? 0 : timeZone;
var timeShift = timeZone *
SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.HOUR];
var date2 = new Date(date.getTime() + timeShift);
switch(intervalUnit) {
case SimileAjax.DateTime.MILLISECOND:
date2.setTime(date2.getTime() - 1)
break;
case SimileAjax.DateTime.SECOND:
date2.setTime(date2.getTime() - 1000);
break;
case SimileAjax.DateTime.MINUTE:
date2.setTime(date2.getTime() -
SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.MINUTE]);
break;
case SimileAjax.DateTime.HOUR:
date2.setTime(date2.getTime() -
SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.HOUR]);
break;
case SimileAjax.DateTime.DAY:
date2.setUTCDate(date2.getUTCDate() - 1);
break;
case SimileAjax.DateTime.WEEK:
date2.setUTCDate(date2.getUTCDate() - 7);
break;
case SimileAjax.DateTime.MONTH:
date2.setUTCMonth(date2.getUTCMonth() - 1);
break;
case SimileAjax.DateTime.YEAR:
date2.setUTCFullYear(date2.getUTCFullYear() - 1);
break;
case SimileAjax.DateTime.DECADE:
date2.setUTCFullYear(date2.getUTCFullYear() - 10);
break;
case SimileAjax.DateTime.CENTURY:
date2.setUTCFullYear(date2.getUTCFullYear() - 100);
break;
case SimileAjax.DateTime.MILLENNIUM:
date2.setUTCFullYear(date2.getUTCFullYear() - 1000);
break;
}
date.setTime(date2.getTime() - timeShift);
};
Then bind handlers to your buttons (with jQuery):
$(document).ready(function() {
$("#backInTime").click(function() {
var currentTime = tl.getBand(0).getCenterVisibleDate();
SimileAjax.DateTime.decrementByInterval(currentTime,SimileAjax.DateTime.YEAR);
tl.getBand(0).setCenterVisibleDate(currentTime);
});
$("#forwardInTime").click(function() {
var currentTime = tl.getBand(0).getCenterVisibleDate();
SimileAjax.DateTime.incrementByInterval(currentTime,SimileAjax.DateTime.YEAR);
tl.getBand(0).setCenterVisibleDate(currentTime);
});
});
Now each button click will move the timeline forward or backward by one year.
If you want the scrolling effect, use tl.getBand(0).scrollToCenter(newDate)
Likewise, you can easily add buttons to jump the timeline to specific dates or
relative dates (e.g. jump back to Monday, or go to the start of the month). See
SimileAjax.DateTime.roundDownToInterval()
There is a function to shift a band by a specific number of pixels
(Timeline._Band.prototype._moveEther) but because Timeline allows pixels to
represent different amounts of time, it is much more preferable to use the date
based functions (setCenterVisibleDate, setMinVisibleDate, setMaxVisibleDate)
instead and let Timeline do the work of figuring out exactly how many pixels
are needed to shift the band.
--Mike
On Sep 7, 2012, at 10:22 AM, Maurizio Liberato wrote:
> I'd like to add two arrows (HTML <a> tags) to move the timeline by one year
> back or forth in a smooth way like when you drag it, I was playing with this
> function but not sure what I'm doing really:
>
> tl.getBand(0).setCenterVisibleDate();
>
> What should go inside the .setCenterVisibleDate() as parameter to drag the
> timeline to a date?
> Is there something like .dragToCenterVisibleDate(pixels) adding a positive
> or negative value as pixels to move the timeline?
>
> Thanks in advance
>
>
--
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en.
