May 27, 2009
A timeline contains one or more Bands, which can be panned infinitely by dragging with the mouse pointer, using the mouse scroll-wheel or the keyboard’s arrow buttons. A band can be configured to synchronize with another band such that panning one band also scrolls the other. Creating your own Timeline See Getting started Implementation Details A timeline is implemented as a div element that contains inner div elements as its bands. The band div’s are cropped and positioned relative to the timeline div. A band div itself contains several inner elements that implements various parts of the band. For example, the two timelines above show labels for days, weeks, months, and years. The bands also have different background colors, and the weekly band of the second timeline has weekend markings. All of these visual elements are “painted” by adding HTML elements to the band div’s at the appropriate positions. As a band is panned, its div is shifted horizontally or vertically, carrying all of its visual elements along. When either end of the band div approaches the visible (non-cropped) area, the band div is re-centered, its coordinate origin is changed, and then its various visual elements are re-“painted” relative to the new coordinate origin. All of this “paging” is done as seamlessly as possible so that the user experiences smooth, ”’infinite”’ panning. A band is responsible for supporting panning as well as coordinating its various sub-components: an ether, whose sole responsibility is mapping between pixel coordinates and dates/times; an ether painter, which paints date/time labels and the background of the band as well as the highlight (the lighter part of the lower band in the first timeline above); zero or more decorators, which further decorate the background of the band; and an event painter, which paints the events. The band also takes an event source which provides events to be displayed in that band. Different bands can have different event sources. This flexibility allows for ”’timeline mashups”’, as exemplified here. Various sub-components that do painting take a theme, which stores default visual and behavioral settings. (via Timeline_Basics - simile-widgets - An introduction to Timeline - Google Code)

A timeline contains one or more Bands, which can be panned infinitely by dragging with the mouse pointer, using the mouse scroll-wheel or the keyboard’s arrow buttons. A band can be configured to synchronize with another band such that panning one band also scrolls the other.

Creating your own Timeline

See Getting started

Implementation Details

A timeline is implemented as a div element that contains inner div elements as its bands. The band div’s are cropped and positioned relative to the timeline div.

A band div itself contains several inner elements that implements various parts of the band. For example, the two timelines above show labels for days, weeks, months, and years. The bands also have different background colors, and the weekly band of the second timeline has weekend markings. All of these visual elements are “painted” by adding HTML elements to the band div’s at the appropriate positions.

As a band is panned, its div is shifted horizontally or vertically, carrying all of its visual elements along. When either end of the band div approaches the visible (non-cropped) area, the band div is re-centered, its coordinate origin is changed, and then its various visual elements are re-“painted” relative to the new coordinate origin. All of this “paging” is done as seamlessly as possible so that the user experiences smooth, ”’infinite”’ panning.

A band is responsible for supporting panning as well as coordinating its various sub-components:

  • an ether, whose sole responsibility is mapping between pixel coordinates and dates/times;
  • an ether painter, which paints date/time labels and the background of the band as well as the highlight (the lighter part of the lower band in the first timeline above);
  • zero or more decorators, which further decorate the background of the band; and
  • an event painter, which paints the events.

The band also takes an event source which provides events to be displayed in that band. Different bands can have different event sources. This flexibility allows for ”’timeline mashups”’, as exemplified here. Various sub-components that do painting take a theme, which stores default visual and behavioral settings.

(via Timeline_Basics - simile-widgets - An introduction to Timeline - Google Code)

Comments
blog comments powered by Disqus