Page last modified 06:22, 17 Sep 2010 by varosi

MindTouch Community Portal > App Catalog > Simile Timeline

Was this page helpful?

Simile Timeline

1. Installation
2. Contribution

This is a simple template for showing Simile's Timeline widget:

/***

   USAGE: SimileTimeline() template is showing a time line of customizable events

   PARAMETERS:

   events : [{ start?, end?, title?, desc? }] - map list with time events description

   (http://code.google.com/p/simile-widg...e_EventSources)

   scale1? : days, weeks, months, years

   height? : int - height of timeline in pixels

***/

let events = $0 ?? $events;

let scale1 = $1 ?? $scale1;

let scale1Text = scale1 ? {days: "DAY", weeks: "WEEK", months: "MONTH", years: "YEAR"}[scale1] : "WEEK";

let height = $2 ?? $height ?? 150;

var res = "<data>";

var i = 0;

foreach( var event in events ) {

   let startStr = event["start"] && (String.length(event["start"]) > 0) ? " start=\""..event[ "start" ].."\"" : " ";

   let endStr = event["end"] && (String.length(event["end"]) > 0) ? " end=\""..event[ "end" ].."\"" : " ";

   var titleFix = event[ "title" ];

   if (titleFix && string.length(titleFix)>0) {

   let titleFix = string.replace(titleFix,"\"","*");

   let titleFix = string.replace(titleFix,"<","*");

   let titleFix = string.replace(titleFix,">","*");

   let titleFix = string.replace(titleFix,"&"," and ");

   let titleFix = string.replace(titleFix,"\'","");

   }

   var descFix = event["desc"];

   if (descFix && string.length( descFix )>0) {

   let descFix = string.replace(descFix,"<","\"");

   let descFix = string.replace(descFix,">","\"");

   let descFix = string.replace(descFix,"&"," and ");

   let descFix = string.escape( descFix );

   }

   let titleStr = event["title"] && (String.length(event["title"]) > 0) ? " title=\""..titleFix.."\"" : " ";

   let descStr = event["desc"] && (String.length(event["desc"]) > 0) ? descFix : "";

   let res ..= "<event"..startStr..endStr..titleStr..">"..descStr.."</event>";

}

let res ..= "</data>";

let xmlData = web.xml( res );

<html>

<head>

<script type="text/javascript" src="http://www.simile-widgets.org/timeli...js?bundle=true">

</script> <script type="text/javascript">"

//BEGIN: Event handler helper method

var addEvent = (function( window, document ) {

   if ( document.addEventListener ) {

   return function( elem, type, cb ) {

   if ( (elem && !elem.length) || elem === window ) {

   elem.addEventListener(type, cb, false );

   }

   else if ( elem && elem.length ) {

   var len = elem.length;

   for ( var i = 0; i < len; i++ ) {

   addEvent( elem[i], type, cb );

   }

   }

   };

   }

   else if ( document.attachEvent ) {

   return function ( elem, type, cb ) {

   if ( (elem && !elem.length) || elem === window ) {

   elem.attachEvent( 'on' + type, function() { return cb.call(elem, window.event) } );

   }

   else if ( elem.length ) {

   var len = elem.length;

   for ( var i = 0; i < len; i++ ) {

   addEvent( elem[i], type, cb );

   }

   }

   };

   }

})( this, document );

//END: Event handler helper method

   var tl=null;

   var resizeTimerID;

   function loadTimeline() { var d = Timeline.DateTime.parseGregorianDateTime('1870');

   var eventSource = new Timeline.DefaultEventSource(0);

   var bandInfos = [

   Timeline.createBandInfo({

   width: '70%',

   intervalUnit: Timeline.DateTime."..scale1Text..",

   intervalPixels: 200,

   eventSource: eventSource }),

   Timeline.createBandInfo({

   overview: true,

   width: '30%',

   intervalUnit: Timeline.DateTime.YEAR,

   intervalPixels: 200,

   eventSource: eventSource }) ];

   bandInfos[1].syncWith = 0;

   bandInfos[1].highlight = true;

   tl = Timeline.create(document.getElementById('my-timeline'), bandInfos, Timeline.HORIZONTAL); txt = '"..xml.text(xmlData, _, _, true).."';

   if (window.DOMParser) {

   parser=new DOMParser();

   xmlDoc=parser.parseFromString(txt,'text/xml');

   } else { // Internet Explorer

   xmlDoc=new ActiveXObject('Microsoft.XMLDOM');

   xmlDoc.async='false';

   xmlDoc.loadXML(txt);

   }

   eventSource.loadXML(xmlDoc,'"..page.uri.."');

   }

   function resizeTimeline() {

   if (resizeTimerID == null) {

   resizeTimerID = window.setTimeout(function() {

   resizeTimerID = null;

   if (tl!=null) { tl.layout(); }

   }, 500);

   } }

   addEvent( window, 'load', function() {

   loadTimeline();

   });

   addEvent( window, 'resize', function() {

   resizeTimeline();

   });

"</script>

</head> <body>

   <div id="my-timeline" style=("height: "..height.."px; border: 1px solid #aaa")/>

</body>

</html>

Note: Sorry that I'm using a quotation instead of Formatting block. But there is a bug and I cannot Paste in FCK Editor correctly the code. So you have to paste that code in a DekiScript block.

Parameters

Name	Type	Description
events	[{start, end?, title?, desc?}]	List of events to be visualized
scale1	String	days, weeks, monts, years - resolution of upper time bar
height	int	Height of timeline in pixels

Installation

1. Copy upper template text;

2. Create new Template;

3. Name it "SimileTimeline";

4. Select DekiScript style;

5. Paste the text inside;

6. Save it and you are ready.

Example of using it:

{{ SimileTimeline( [{start: "July 1 2010", title: "Summer is comming"}, {start: "September 1 2010", end: "November 30 2010", title: "Authumn"}] ) }}

Contribution

You are free to extend it. Simile has a lot of features to be added.

You could find more info at: http://www.simile-widgets.org/timeline/

Was this page helpful?: Yes No
Tag page
What links here

Files 1

Attach file or image

File	Version	Size	Modified
Timeline-sample.jpg v1 32.62 kB 00:19, 11 Jun 2010

Images 1
Timeline-sample.jpg

Viewing 4 of 4 comments: view all

SimLoop says:

Varosi,
This part of your instructions are confusing "(Copy this with until upper line. Latest empty box should be copied too. It is a <div> where the timeline is placed.)" can you elaborate a little. Not sure what to do?

Posted 18:25, 15 Jun 2010

varosi says:

Now I fixed that. So you don't need that. Just copy this code and paste it into a DekiScript block.

Posted 05:26, 18 Aug 2010

varosi says:

Now this widget is working in Deki 10. I had some JQuery problems. They still persist anyway, but the widget is working.

Posted 06:22, 17 Sep 2010

jluopajarvi says:

If you copy the template text above, then it copies the URL link wrong way. At least I had to copy it separately. After that the template worked ok. Thank you very much :)

Posted 11:09, 19 Sep 2010

Viewing 4 of 4 comments: view all

You must login to post a comment.

MindTouch Social Knowledge Base

Simile Timeline

Table of contents

Installation

Contribution

Files 1

Table of contents

Login or Join Community

Simile Timeline

Table of contents

Installation

Contribution

Files 1

Table of contents