How to control a timeline from within Exhibit

From SIMILE Widgets
Revision as of 02:45, 3 November 2015 by Tullyhansen (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Controlling A Timeline Within An Exhibit

Adding a timeline to an Exhibit is easy, but controlling that timeline and making it look like you want it to requires some coding that novices may find confusing. This document contains some sample code that will hopefully demonstrate the process of controlling the timeline. This code was the result of help given by a Simile team member and has been pasted here in the hopes that it will help someone avoid some of the confusion that comes with getting an Exhibit project to work. The final result of these lines of code can be seen at the Music Composer Research Exhibit.

This document assumes that you already have an Exhibit up and running and want to make the timeline portion more appealing and easy to understand. Once you have your timeline up and running you can customize it in different ways. In order to take control of the timeline you must first insert the statement:

ex:configuration="timelineConfig"

inside of your timeline div statement. This is an example of a completed timeline div that will add a timeline tab to your Exhibit:

div ex:role="exhibit-view" class="bold"
      ex:viewClass="Exhibit.TimelineView"
      ex:start=".BirthYear"
      ex:end=".DeathYear"
      ex:bubbleWidth="500"
      ex:bubbleHeight="300"
      ex:label="View As Timeline"
      ex:topBandIntervalPixels="70"
      ex:bottomBandIntervalPixels="80"
      ex:marker=".Era"
      ex:configuration="timelineConfig"

After you have told Exhibit to look for the configuration in timelineConfig you must create a script in the body of the HTML file. The script pasted below controls two main things. First, it controls the size and behavior of the two timeline bars:

   <script>
    var timelineConfig = {
        timelineConstructor: function (div, eventSource) {   
            div.style.height="400px";
            var theme = Timeline.ClassicTheme.create();
            theme.event.label.width = 200; // px
            theme.event.bubble.width = 600;
            theme.event.bubble.height = 400;
            
            var date = "Fri Nov 22 1963 13:00:00 GMT-0600"
            var bandInfos = [
                Timeline.createBandInfo({
                    width:          "75%", 
                    intervalUnit: Timeline.DateTime.DECADE,
                    intervalPixels: 60,
                    eventSource:    eventSource,
                    date:           date,
                    theme:          theme
                }),
                Timeline.createBandInfo({
                    width:          "25%", 
                    intervalUnit: Timeline.DateTime.CENTURY,
                    intervalPixels: 80,
                    eventSource:    eventSource,
                    date:           date, 
                    showEventText:  false,
                    theme:          theme,
                    trackHeight: 0.5,
                    trackGap: 0.2
                })
            ];

Second, it allows you to place colored bands inside of your timeline to make certain date ranges stand out:

            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;
            bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
            
            for (var i = 0; i < bandInfos.length; i++) {
                bandInfos[i].decorators = [
                    new Timeline.SpanHighlightDecorator({
                        startDate:  new Date(476, 0, 1),
                        endDate:    new Date(1300, 0, 1),
                        startLabel: "",
                        endLabel:   "",
                        color:      "#BF655F",
                        opacity:    25,
                        theme:      theme
                    }),
                     new Timeline.SpanHighlightDecorator({
                        startDate:  new Date(1300, 0, 1),
                        endDate:    new Date(1600, 0, 1),
                        startLabel: "",
                        endLabel:   "",
                        color:      "#FFD83D",
                        opacity:    25,
                        theme:      theme
                    }),
                    new Timeline.SpanHighlightDecorator({
                        startDate:  new Date(1600, 0, 1),
                        endDate:    new Date(1750, 0, 1),
                        startLabel: "",
                        endLabel:   "",
                        color:      "#BF955F",
                        opacity:    25,
                        theme:      theme
                    }),
                    new Timeline.SpanHighlightDecorator({
                        startDate:  new Date(1750, 0, 1),
                        endDate:    new Date(1825, 0, 1),
                        startLabel: "",
                        endLabel:   "",
                        color:      "#FF9000",
                        opacity:    25,
                        theme:      theme
                    }),
                    new Timeline.SpanHighlightDecorator({
                        startDate:  new Date(1825, 0, 1),
                        endDate:    new Date(1900, 0, 1),
                        startLabel: "",
                        endLabel:   "",
                        color:      "#A97838",
                        opacity:    25,
                        theme:      theme
                    }),
                    new Timeline.SpanHighlightDecorator({
                        startDate:  new Date(1900, 0, 1),
                        endDate:    new Date(2008, 0, 1),
                        startLabel: "",
                        endLabel:   "",
                        color:      "#5D7CBA",
                        opacity:    25,
                        theme:      theme
                    })
                ];
            }
            tl = Timeline.create(div, bandInfos, Timeline.HORIZONTAL);
            return tl;
        }
    }
    </script>
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox