Simple example - lets add decorators to the Life of Monet example
(http://simile-widgets.org/timeline/examples/monet/monet.html)
Make a json file with the dates for your decorators (wars.json):
[{"title":"Crimean War",start:"1853",end:"1856"},
{"title":"Algerian War",start:"1830",end:"1847"},
{"title":"Franco-Prussian War",start:"1870",end:"1871"}]
Decorators are specified as part of the bandInfos, but no reason we can't add
them after the fact. Let's add a method to _Band:
Timeline._Band.prototype.addDecorator = function(decorator) {
this._decorators.push(decorator);
decorator.initialize(this,this._timeline);
decorator.paint();
}
(Don't modify the Timeline source code to do this, instead load this function
as part of your own code, either as a .js script or as a <script> element in
your HTML).
Now we can add decorators to our Bands anytime we like.
tl.loadJSON("wars.json", function(json) {
var len = json.length;
var band = tl.getBand(1);
while (len--) {
var span = json[len];
var deco = new Timeline.SpanHighlightDecorator({
startDate : span.start,
endDate : span.end,
startLabel : span.title
});
band.addDecorator(deco);
}
});
--Mike
On Mar 20, 2012, at 3:39 PM, Steve Pai wrote:
> Thanks for clearing that up Michael. Re-reading the JFK example makes a lot
> more sense now.
>
> Do you have any examples I can reference? So if I understand correctly,
> within the timeline script I would have something like:
>
> Timeline.SpanHighlightDecorator({
> startDate: startDate ,
> endDate: endDate
> });
>
> Do I then use loadJSON to specify the source file? Sorry, this is all still
> very new to me.
>
> Steve
--
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.
