using JSON, PHP, CURL, JS, and of course HTML, and APIs of Simile Timeline and Twitter.
Looks a little like a seismograph?
My first little personal project in this year was dealing with time, used by myself and view daily by my colleges in TAD. Later in the year, I brainstormed several other ideas that I hope to implement as a web 2.0 application. I stumbled on the Simile Timeline project earlier, thought it was a good idea, but never tried it until today. But it was also the fun using Twitter that sparked the interest to use Timeline and to integrate them.
However, given the large interest in twitter and mash ups, I would have expected someone else to have done before. Still there are handful of resources with the knowledge required to hack the pieces together. So let me outline what I did.
1. Prepare a php script to call Twitter’s API to retrieve Twitter posts using CURL. To do as little coding as possible, I decided to use JSON format (over XML), pass it self as an object into the (html) client’s javascript method.
2. The javascript method would iterate each of twitter’s data then generate the events in Timeline’s format.
3. Initialize and run Timeline’s API to render.
twitter.php The server side script.
<?php /* 29 Dec 2007, http://zz85.is-a-geek.com/ */ // Edit your twitter's username and password $username = 'USERNAME'; $password = 'PASSWORD'; // The twitter API address //$url = 'http://twitter.com/account/archive.json'; // Each archive API call could return 80 statuses, // but there seem to be an error on Twitter's side so I'll use // the User timeline call which returns only the last 20 posts. $url = 'http://twitter.com/statuses/user_timeline.json'; $curl_handle = curl_init(); curl_setopt($curl_handle, CURLOPT_URL, "$url"); curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2); curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password"); $buffer = curl_exec($curl_handle); curl_close($curl_handle); echo "timeline_data($buffer);"; // timeline_data is the javascript method to be execute ?>
time.html The Client side html
<html> <head> <title>Timeline API and Twitter API Integration</title> <link rel='stylesheet' href='http://simile.mit.edu/timeline/docs/styles.css' type='text/css' /> <script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script> <script> var tl; var eventSource = new Timeline.DefaultEventSource(); function onLoad() { var scriptTag = document.createElement('script'); scriptTag.src = "http://CHANGEME_DOMAIN/twitter.php"; // Change to URL of your php script document.body.appendChild(scriptTag); // Runs the contents from the URL being called as javascript } function createTimeline() { var bandInfos = [ Timeline.createBandInfo({ width: "65%", timeZone: 8, // I have to adjust the time as I live in GMT +8 eventSource: eventSource, intervalUnit: Timeline.DateTime.HOUR, intervalPixels: 80 }), Timeline.createBandInfo({ showEventText: false, eventSource: eventSource, width: "20%", intervalUnit: Timeline.DateTime.DAY, intervalPixels: 70 }), Timeline.createBandInfo({ width: "15%", showEventText: false, intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 100 }), ]; // sync bands bandInfos[1].syncWith = 0; bandInfos[1].highlight = true; bandInfos[2].syncWith = 1; bandInfos[2].highlight = true; tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); //tl.loadJSON("cubism.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); } } function timeline_data(tjson) { // method called after response of twitter.php is exectured for (entries in tjson) { var dateEvent = new Date(tjson[entries]["created_at"]); var urlbase = 'http://twitter.com/' ; var evt = new Timeline.DefaultEventSource.Event( dateEvent, //start dateEvent, //end dateEvent, //latestStart dateEvent, //earliestEnd true, //instant tjson[entries]["text"], //text '<a href="'+ urlbase + tjson[entries]["user"]["name"] + '/">' + '<img src="' + tjson[entries]["user"]["profile_image_url"] + '" />' + tjson[entries]["user"]["name"] +'</a>' + ' ' + tjson[entries]["text"] + '<br /><a href="' + urlbase + 'statuses/' +tjson[entries]["id"]+'">Source:</a>'+ tjson[entries]["source"] + '' //description ); eventSource.add(evt); } createTimeline(); } </script> </head> <body onload="onLoad();" onresize="onResize();"> <h2>Zz85 Integration Test of Timeline API with Twitter API</h2> <div id="my-timeline" style="height:450px; border: 1px solid #aaa"></div> <br />version 1 by <a href="http://zz85.is-a-geek.com/">http://zz85.is-a-geek.com/</a> </body> </html>
Well, I hope this would work for you, or at least help you to do something better. At least if you managed to do what I did, you would be able to visualise what you were doing on the dynamic scrollable timeline. Of course, the timeline javascript library issnt perfect, and I wish there were features like: adding events by clicking on the timeline, dragging the duration, zooming in&out and dragging the events around. Anyway I have some ideas, that I’m likely not to do it, but its implementable.
- Integrate Photos eg. Flickr/Fackbook + Blogs + MAps + …
- Integrate Calendars (eg. Google Calendars)…
- Automatic Widening/Narrowing
- Import and usage of own database with metadata
- Layered Rows for Different events.
- Integrate with other time applications like countdown counter
- Integrate ToDo List
Have timeless fun! Drop me a note if you manage to do something satisfying after reading this article, or if you have some other cool ideas too =)
Further Readings
Recent Comments