Archive for December, 2007

Updates & Thanksgiving

Published
by
Zz85
on December 31, 2007
in Memories and School
. 0 Comments

As year 2007 comes to a close, just a quick look back and some updates.

I’m having internship, as mentioned before, and so far its a nice, fun and learning experience. The environment at work, feels more like my final project in poly than my industrial attachment I had.

Who whould imagine going on Facebook is my job?

My 1st year 1st semester results released on boxing day. I must say I’ve been satisfied, that my grades is satisfactory, of a very average CAP, that would be a yardstick for my performance keep me, and hopefully to keep me humble and work harder. Now what is left is to reconsider what path to major on, and to decide the modules for next year.

Psalms 47:4 Delight thyself also in the LORD; and he shall give thee the desires of thine heart.

I’ve coded an integration that laid out my blog posts in 2007 on Timeline using MetaWeblogApi last night, but time is running tight so the post on it might just have to wait to the new year. Both using that and K2’s ajax archive navigation makes it easy to recap what have been done this year.

Although it seemed not much is done in the year, time passes faster than that I feel, one single important event is that I’ve stepped through quickly from my army stage into my study stage.

Timeless Belt Of Time: How I Integrated Twitter in Timeline

Published
by
Zz85
on December 30, 2007
in Technology and WebLinks
. 7 Comments

using JSON, PHP, CURL, JS, and of course HTML, and APIs of Simile Timeline and Twitter.

Timeline Twitter Mash up
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

  1. Tutorial on using Timeline
  2. About JSON
  3. Posting to Twitter using PHP and CURL
  4. twitter api
  5. Google’s method of dynamic json data import
  6. a json inspector
  7. Creating timeline from (blog) feeds

Activity & Status Streams

Published
by
Zz85
on December 29, 2007
in Technology and WebLinks
. 0 Comments

Perhaps some keep a journal so they can remember what they have done in the past. Perhaps many nowadays use a blog for that purpose too. Twitter, which appeared in my previous post, a social networking site based mainly on activity streams could now be the synonym for “what am/was/are I/you doing”.

Twitter Ninja

Twitter’s API allows many implementation of getting twitter service, eg. this twitter balloon.

A similar feature exist in Facebook, and is perhaps the more popular among many is to announce their status or what they are doing. Recently I read that the first thing one would do after a relationship break off is to change their status on Facebook. Perhaps you are not that extreme, but might still be guilty of complaining, or showing off via your online messaging nick, status or personal message.

Talking about streams, no one can deny the power of RSS feeds, whether its a blog, twitter, or facebook, they all have them. And my preferred method for reading blogs, and my favorites sites.

And lastly, even Google must have realise the potential of these lifestreaming activities and acquired Twitter’s competitor Jaiku. Even though there are already a couple of Google Services eg. Maps/Earth + Twitter Mashups, it would be interesting to see what Google has in store for all of us (perhaps integrate gcalendars too).

Online Trends

Published
by
Zz85
on December 29, 2007
in Ideas and Technology
. 0 Comments

Some of my random thoughts of how things changes and turn out

  • Library > Google
  • Encyclopedia > Wikipedia
  • Dictionary > Spellcheck
  • Books > e-Books
  • Telephone > Skype
  • BBS > Newgroups, Mailing Lists > Forums
  • Notice Boards > Portals > Blogs > Feeds
  • Yearbook > e-Circles > Friendster > Facebook
  • Maps / Street Directory > Google Earth / Maps
  • Bookmarks > del.icio.us > Digg
  • Icq > Msn > Web messesaging
  • Irc > ShoutBoxes > Twitter

become twitter
cartoon from gapingvoid.com

Visitors Around The World

Published
by
Zz85-nds
on December 23, 2007
in WebLinks
. 0 Comments

Alright, for a little fun with toys here’s a tracker which shows where in the world, my web visitors are from on the world map. If you have noticed too, the wordpress engine, plugins and themes I’m using now are updated.

Here’s the statistics page and map from http://whos.amung.us/.