View source for Simile timeline notes

{{stub}}
{{old}}

SIMILE timelines ([http://www.simile-widgets.org/timeline/ site] / [http://simile-widgets.org/timeline/docs/ docs] / [http://simile-widgets.org/wiki/Timeline wiki]) 



==Concepts==
A '''Timeline''' object has:
* '''Band''' objects: {{comment|(one or more, optionally synchronized)}}
** an associated event source (JSON data)
** an '''Ether''', mapping between time data and pixel offsets to show them at
** an '''ether painter''' that paints the background {{comment|(and related features, like range highlights)}}
** an '''event painter''' that shows each event
** '''decorators''': zero or more, further decorate the band
Some things can take some themed styling.

Date labellers do the job of formatting dates (the most common is basic Gregorian formatting). 



The ''ether'' keeps track of what dates are in view, so you can ask it what date corresponds to a pixel position. Functionality like that is also exposed on the band object, though, as are detail bubbles, 


You can have bands listen to separate event sources, or to the same one (which is fairly common, to show the same thing at different resolutions). Data loading is done on the evert source object, though you may want to wrap that once you settled on your timeline/band details, for simpler scripting.

==Usage==
You construct a ''Timeline'' object, which takes:
* a DIV to create it in {{comment|(a DOM reference, e.g. using a getElementById)}}
* an orientation {{comment|(HORIZONTAL or VERTICAL)}}
* a specification of each bands' format, which includes things like:
** a marking interval (year, week, )
** how many pixels should be used by each such interval
** the percentage width of the band in the available space
** an eventsource (probably)
** visual details like gap, whether to always paint the title, 


===XML format===
The root is a <tt>&lt;data></tt> element, with:  
* <tt>&lt;event></tt> children
** with attributes (described below)
** If you want to add a description, add an text node under it.

* some optional attributes
** <tt>date-time-format</tt>, (possible values? iso8601? default? more?)
** <tt>wiki-url</tt>, <tt>wiki-section</tt> help create links to discuss timeline items



Events have attributes:
* a <tt>title</tt>

* a <tt>start</tt>, and
* an <tt>end</tt> if it the event describes a period instead of a point in time

* a <tt>latestStart</tt> and/or <tt>earliestEnd</tt> if the start or end point isn't exactly known (and this described as periods)

* <tt>isduration</tt>

* <tt>image</tt>
* <tt>link</tt>
* <tt>icon</tt>
(see http://simile.mit.edu/timeline/examples/dinosaurs/dinosaurs2.html for examples of the use of these three)


* <tt>color</tt>
* <tt>textColor</tt>



See also:
* Example: http://simile.mit.edu/timeline/docs/example2.xml
* Parsing code: http://simile.mit.edu/timeline/api/scripts/sources.js

* http://simile.mit.edu/wiki/How_to_Create_Timelines for an example


[[Category:Webdev]]