Timeline ThemeClass

From SIMILE Widgets
Jump to: navigation, search
  1. summary Information and JSDoc



The theme controls the visual appearance of the timeline. The default theme is the ClassicTheme, which can be created with Timeline.ClassicTheme.create(); (or gotten with Timeline.getDefaultTheme()). The theme is set for each timeband separately by setting the theme parameter in Timeline.createBandInfo(params). Here's information on creating new themes.


Offers reasonable defaults and is used as a basis for most if not all timeline examples.

The classic theme has the following properties and sub-properties.


Defaults to 0, which stands for Sunday.


  • false
    Should the Timeline automatically grow itself, as needed when too many events for the available width are painted on the visible part of the Timeline?


  • 500 // mSec


  • null
    Setting a date, eg new Date(Date.UTC(2008,0,17,20,00,00,0)) will prevent the Timeline from being moved to anytime before the date.


  • null
    Use for setting a maximum date. The Timeline will not be able to be moved to anytime after this date.


Controls the Ether for this theme.

The Ether property has the following sub-properties:


Background colors for the bands.

  • #EEE, #DDD, #CCC, #AAA (set via css)


The color for the highlight, can be set to any value that is used in CSS, i.e. color names like "white", "red" as well as RGB values like "#6666cc" or "#66c".

  • "white"


The opacity of the highlight, which is a value between 0 (not visible) to 100 (full opacity).

  • 50


To set the date markers and lines.


  • show: true,
  • opacity: 25
  • color: "#aaa" (set via css)


  • opacity: 30
  • color: "#FFFFE0" (set via css)


  • hAlign: "Bottom"
  • vAlign: "Right"
  • hBottomStyler, hBottomEmphasizedStyler, hTopStyler, hTopEmphasizedStyler, vRightStyler, vRightEmphasizedStyler, vLeftStyler, vLeftEmphasizedStyler. These stylers are used to establish CSS classes for for the ether markers. Each styler is actually a method which has a DOM element as a parameter and sets the class name of this element to:
    • timeline-ether-marker-bottom
    • timeline-ether-marker-bottom-emphasized
    • timeline-ether-marker-top
    • timeline-ether-marker-top-emphasized
    • timeline-ether-marker-right
    • timeline-ether-marker-right-emphasized
    • timeline-ether-marker-left
    • timeline-ether-marker-left-emphasized
  • respectively.


Controls the appearance of events for this theme.

The event property has the following sub-properties:


  • height: 10, //px
    You will need to change the track height if you change the tape height.
  • gap: 2, //px
    Gap between tracks
  • offset: 2, //px
    top margin above ALL the tapes. If your BandInfo is set with property align: "Top", you'll have to set this higher so the event tracks will clear the ether markers.
  • autoWidthMargin: 1.5
    this is only used if autoWidth (see above) is true. The autoWidthMargin setting is used to set how close the bottom of the lowest track is to the edge of the band's div. The units are total track width (tape + label + gap). A min of 0.5 is suggested. Use this setting to move the bottom track's tapes above the axis markers, if needed for your Timeline.


  • offset: 20, // px
  • tickHeight: 6, // px
    The overview painter paints instant events as a vertical tick.
  • height: 2, // px
  • gap: 1 // px
  • autoWidthMargin: 5
    This attribute is only used if autoWidth (see above) is true.


  • height: 4 //px
    For thicker tapes, remember to change track height too.


Controls the appearance of instantaneous events. There are two type of such events, precise and imprecise events. Both types of events can be shown differently using the properties below:

  • icon: Timeline.urlPrefix + "images/dull-blue-circle.png"
    The URL of the icon that is shown for this event. Icon can also be specified per event.
  • iconWidth: 10 //px?
    The width of the icon in pixel.
  • iconHeight: 10 //px?
    The height of the icon in pixel.
  • impreciseOpacity: 20
    The opacity of the tape for imprecise events.
  • color
    set via CSS.
  • impreciseColor:
    set via CSS. The color in which the tape is drawn for imprecise events.


  • impreciseOpacity: 20
    tape opacity for imprecise part of duration events
  • color: "#58A0DC"
    set via CSS.
  • impreciseColor: "#58A0DC"
    set via CSS.


  • backgroundOpacity: 50
    only used in detailed painter
  • offsetFromLine: 3 // px
    left margin amount from icon's right edge
  • backgroundColor: "white"
    set via CSS
  • lineColor: "#58A0DC"
    set via CSS


  • "#FFFF00","#FFC000","#FF0000","#0000FF"
    Use with getEventPainter().setHighlightMatcher. See webapp/examples/examples.js


  • false
    When highlighting an event, also change the event's label background?


The bubble is shown when the user clicks on an event. The following parameters control the bubble:

  • width: The width of the bubble in pixel.
  • maxHeight: The height of the bubble in pixel.
    Maximum height of bubbles. 0 means no max height. Scrollbar will be added for taller bubbles.
  • titleStyler, bodyStyler, imageStyler, wikiStyler, timeStyler: The five stylers are used to determine the CSS class for different parts of the bubble. Each styler is actually a method which has a DOM element as a parameter and sets the class name of this element to "timeline-event-bubble-<styler name>" where "<styler name>" must be replaced by "title", "body", "image", "wiki" and "time" respectively.


The behavior of the mouse-wheel when over a band. Set to one of:

  • scroll -- (default) The mouse-wheel will move the Timeline forward/backward in time. Similar effect as the arrow keys.
  • zoom -- The mouse-wheel will change the scale of the Timeline. An alternative to Hotzones. See MouseWheelScrollingAndZooming
  • default -- mouse wheel controls vertical scrolling (if there is a vertical scrollbar)
Personal tools