HomeGroupsTalkZeitgeist

User:Legallypuzzled/timeline

From WikiThing

Jump to: navigation, search

Contents

Timeline Projects

LibraryThing Timeline (Alpha)

LibraryThing has a simple proof-of-concept timeline, which is a "pet project" of LT employee conceptDawg. conceptDawg has noted that the timeline "isn't really supported anymore (not that it was ever really supported in the first place)". So if your LT-provided timeline stops working, you may create your own (see below).

The URL to see your own timeline is http://www.librarything.com/lttl/ . You can also add two parameters:

  • view=USERNAME which allows you to view another user's timeline
  • tlmode=x (where x=0 or 1)
  • tlmode=0 shows dates based on start/finish in the record, or, if none, date purchased
  • tlmode=1 shows entry date into LT

So a full timeline showing entry dates for timspalding's library would be http://www.librarything.com/lttl/index.php?view=timspalding&tlmode=1

The URL parameters have been taken from notes on LT user Noisy's page.


Do-It-Yourself Implementations

The LibraryThing timeline is based on MIT's SIMILE timeline widget. Using the same widget, you can create a timeline with your own data. See, for example, legallypuzzled's timeline.

Steps to Create a Timeline

1. Make sure you have somewhere on the Internet you can post these files. Check with your ISP to see if it offers free web hosting as part of your subscription, as you will need access to JavaScript, which some web hosts do not offer. (One free option may be DropPages, which works with your Dropbox account.)

2. Use a text editor to create the following three files.

timeline.htm

<html>
  <head>
    <title>title of your timeline goes here</title>
    <script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
	<script src="timelinetheme.js" type="text/javascript"></script>
	<script>
	
	Timeline.GregorianDateLabeller.prototype.labelPrecise = function(date) {
	return Timeline.DateTime.removeTimeZoneOffset(
			date, 
			this._timeZone //+ (new Date().getTimezoneOffset() / 60)
		).toUTCString().replace(/\d\d:\d\d:\d\d \w\w\w/, '');

};

	
		  var tl;
function onLoad() {
  var eventSource = new Timeline.DefaultEventSource();
  
  var theme = Timeline.LibThing.create();
      theme.event.bubble.width = 250;
      theme.event.bubble.height = 125;

  
  var bandInfos = [
    Timeline.createBandInfo({
		eventSource:    eventSource,
        date:           Date(),
        width:          "60%", 
        intervalUnit:   Timeline.DateTime.DAY, 
        intervalPixels: 100,
		theme:			theme
    }),
    Timeline.createBandInfo({
		showEventText:  false,
		eventSource:    eventSource,
        date:           Date(),
        width:          "40%", 
        intervalUnit:   Timeline.DateTime.MONTH, 
        intervalPixels: 200,
		theme:			theme
    })
  ];
  
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
  
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  tl.loadJSON("readingtimeline.js", function(json, url) {
                eventSource.loadJSON(json, url);
            });
}


var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}
	</script>
  </head>
  
  <body onload="onLoad();" onresize="onResize();">

  
  <div id="my-timeline" style="height: 250px; border: 1px solid #aaa"></div>
  
  
  </body>
</html>


timelinetheme.js

/*==================================================
 *  Classic Theme
 *==================================================
 */

Timeline.LibThing = Timeline.ClassicTheme;

Timeline.LibThing._Impl = function() {
    this.firstDayOfWeek = 0; // Sunday
    
    this.ether = {
        backgroundColors: [
            "#EEE",
            "#DDD",
            "#CCC",
            "#AAA"
        ],
        highlightColor:     "white",
        highlightOpacity:   50,
        interval: {
            line: {
                show:       true,
                color:      "#aaa",
                opacity:    25
            },
            weekend: {
                color:      "#FFFFE0",
                opacity:    30
            },
            marker: {
                hAlign:     "Bottom",
                hBottomStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-bottom";
                },
                hBottomEmphasizedStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-bottom-emphasized";
                },
                hTopStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-top";
                },
                hTopEmphasizedStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-top-emphasized";
                },
                    
                vAlign:     "Right",
                vRightStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-right";
                },
                vRightEmphasizedStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-right-emphasized";
                },
                vLeftStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-left";
                },
                vLeftEmphasizedStyler:function(elmt) {
                    elmt.className = "timeline-ether-marker-left-emphasized";
                }
            }
        }
    };
    
    this.event = {
        track: {
            offset:         0.5, // em
            height:         1.5, // em
            gap:            0.5  // em
        },
        instant: {
            icon:           Timeline.urlPrefix + "images/dull-blue-circle.png",
            lineColor:      "#58A0DC",
            impreciseColor: "#58A0DC",
            impreciseOpacity: 20,
            showLineForNoText: true
        },
        duration: {
            color:          "#58A0DC",
            opacity:        100,
            impreciseColor: "#58A0DC",
            impreciseOpacity: 20
        },
        label: {
            insideColor:    "white",
            outsideColor:   "black",
            width:          200 // px
        },
        highlightColors: [
            "#FFFF00",
            "#FFC000",
            "#FF0000",
            "#0000FF"
        ],
        bubble: {
            width:          250, // px
            height:         125, // px
            titleStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-title";
            },
            bodyStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-body";
            },
            imageStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-image";
            },
            timeStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-time";
            }
        }
    };
};

readingtimeline.js

{
'dateTimeFormat': 'iso8601',
'wikiURL': '',
'wikiSection': '50 Book Challenge',

'events' : [
			
	{'start': '2008-05-04',
        'end': '2008-05-05T22:00',
        'title': 'The Lion, The Witch, and the Wardrobe',
        'description': 'The Lion, The Witch, and the Wardrobe by C. S. Lewis',
	'link': 'http://www.librarything.com/work/1827335/',
	'image': 'http://images.amazon.com/images/P/0066238501.01._SX140_SCLZZZZZZZ_.jpg'
        },
			
	{'start': '2008-05-06',
        'end': '2008-05-07T22:00',
        'title': 'Prince Caspian',
        'description': 'Prince Caspian by C. S. Lewis',
	'link': 'http://www.librarything.com/work/1827335/',
	'image': 'http://images.amazon.com/images/P/0066238501.01._SX140_SCLZZZZZZZ_.jpg'
        },
		
	{'start': '2008-05-11',
        'end': '2008-05-14T22:00',
        'title': 'Voyage of the Dawn Treader',
        'description': 'Voyage of the Dawn Treader by C. S. Lewis',
	'link': 'http://www.librarything.com/work/1827335/',
	'image': 'http://images.amazon.com/images/P/0066238501.01._SX140_SCLZZZZZZZ_.jpg'
        },
		
	{'start': '2008-05-18',
        'end': '2008-05-19T20:00',
        'title': 'The Silver Chair',
        'description': 'The Silver Chair by C. S. Lewis',
	'link': 'http://www.librarything.com/work/1827335/',
	'image': 'http://images.amazon.com/images/P/0066238501.01._SX140_SCLZZZZZZZ_.jpg'
        },
		
	{'start': '2008-05-22',
        'end': '2008-05-23T20:00',
        'title': 'The Horse and His Boy',
        'description': 'The Horse and His Boy by C. S. Lewis',
	'link': 'http://www.librarything.com/work/1827335/',
	'image': 'http://images.amazon.com/images/P/0066238501.01._SX140_SCLZZZZZZZ_.jpg'
        },
		
	{'start': '2008-05-25',
        'end': '2008-05-27T20:00',
        'title': 'The Magician\'s Nephew',
        'description': 'The Magician\'s Nephew by C. S. Lewis',
	'link': 'http://www.librarything.com/work/1827335/',
	'image': 'http://images.amazon.com/images/P/0066238501.01._SX140_SCLZZZZZZZ_.jpg'
        },
		
	{'start': '2008-05-29',
        'end': '2008-05-30T20:00',
        'title': 'The Last Battle',
        'description': 'The Last Battle by C. S. Lewis',
	'link': 'http://www.librarything.com/work/1827335/',
	'image': 'http://images.amazon.com/images/P/0066238501.01._SX140_SCLZZZZZZZ_.jpg'
        }
]
}

3. Upload those three files to your web site, and then load timeline.htm in a browser. You should see your timeline.

Modifying the Timeline

Obviously, the file most likely to be modified is readingtimeline.js, which is your data in JSON format. (Timeline also accepts XML data as well.)

Each event element can have various attributes:

  • start - put at least the date, and optionally the time in 24-hour format (if no time specified, Timeline assumes 00:00)
  • latestStart - if you don't remember the exact starting date you can use this attribute
  • end - again, put at least the date. I generally use 20:00 as an ending time so the timeline stripe doesn't bump up against the next book.
  • earliestEnd - similar to lastestStart
  • title - the text title that will go on top of or next to the timeline stripe
  • description - the text inside the bubble (warning: apostrophes must be escaped (\'); other formatting may be necessary)
  • image - the URL to an image that will be displayed inside the bubble
  • link - the bubble's title text (and image, if available) will link to this URL
  • icon - can optionally have an icon appear next to the title
  • color - color of the timeline stripe (useful for differentiating, say, owned from unowned books, or fiction vs non-fiction)
  • textColor - color of the text on the timeline stripe


Notice carefully: the last element attribute and the last event do NOT have commas after them.


If the JSON format isn't something you want to learn, the tutorial linked below shows a way to get the same results with Google Spreadsheets.

More Information

For more information about MIT's Timeline project, see the following web sites:

You are using the new servers! | About | Privacy/Terms | Help/FAQs | Blog | Store | APIs | TinyCat | Legacy Libraries | Early Reviewers | Common Knowledge | 114,368,717 books! | Top bar: Always visible