SIMILE TimeLineと戯れる

SIMILE Timeline

今更ながらSIMILE TimeLineを使ってみた。
以前デモ画面見たとき、
「ｶｯｸｲｲ！　時系列情報を表示するのに使いたい」
でも試す時間まるでﾅｯｼﾝｸﾞでした。

今は時間がﾓﾘﾓﾘあるので
試してみた。

操作方法

  • バンド上でマウスドラッグで線表を移動できる。
  • バンド上でマウスホイールを回しても線表を移動できる。
  • イベントをクリックすると、詳細が表示される。
  • イベントの無い部分の線表をダブルクリックすると、クリックした場所に表示の中心が移動する。

Getting startedの概要

Getting Startedの概要は以下の通り。

  1. APIを読込む。
  2. ﾀｲﾑﾗｲﾝを表示するdiv要素にidを振る。
  3. body要素のonLoadイベントにバンド情報を初期化し、ﾀｲﾑﾗｲﾝを生成するfunctionを登録する。
  4. body要素のonResizeイベントに再描画するfunctionを登録する。
  5. 上記までの手順だけで年表っぽいのが表示される。感動
  6. イベントを初期化し、データ(XML or JSON)を読込むと出来上がり。
  7. バンド情報の引数に"overview:true"を追加するとﾀｲﾄﾙを非表示できる。

バンド情報の初期化

Timeline.createBandInfo(引数)
引数はオブジェクト型で渡す。

例)

Timeline.createBandInfo({

    overview:       true,                       //イベントのtitle表示を省略

    eventSource:    eventSource,                //イベントソース(後述)

    date:           "Jun 28 2006 00:00:00 GMT", //初期表示時の中心

    width:          "70%",                      //縦幅

    intervalUnit:   Timeline.DateTime.MONTH,    //表示するスケール

    intervalPixels: 100                         //間隔

});
尚、バンド情報はﾀｲﾑﾗｲﾝ生成時の引数として配列で渡すため、


bandInfos = [

    Timeline.createBandInfo({ options...}),

    Timeline.createBandInfo({ options...}),

    Timeline.createBandInfo({ options...})

];
こんな感じで作る。

複数のバンドを表示する際にシンクロさせるには
二つ目以降のバンドオブジェクトに以下の設定を追加する。



   bandInfos[1].syncWith = 0;     //シンクロさせるバンド番号

   bandInfos[1].highlight = true; //一致する線票部分をハイライトする

それ以外にも引数とか沢山あるので詳しくはこちら


ﾀｲﾑﾗｲﾝの生成

tl = Timeline.create(引数);
引数は要素,バンド情報。
要素はgetElementByIdで取得。
バンド情報は前述を参照してｸﾗﾊｲ。
返り値はﾀｲﾑﾗｲﾝオブジェクト。

例)



tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);


イベント情報の読み込み



eventSource.loadXML(xml, url)   //XML

eventSource.loadJSON(json, url) //JSON
で読込める。
urlはイベントで使用する画像ファイルのパスを指定する。

イベント情報を通信で取得する場合は



Timeline.loadXML("XMLのURL",callback)

Timeline.loadJSON("JSONのURL",callback)
が用意されているので


Timeline.loadXML("example1.xml", function(xml, url) { eventSource.loadXML(xml, url); })
こんな感じで読込む。
尚、callbackの第二引数の"url"はxmlのパスが返ってくる(のかな？未確認)
ｵｲﾗはjQueryの$.ajaxでﾄｯﾃｷﾃﾏｽからTimeline.loadXMLは使ってない。

用意するイベントデータは簡単な例(JSON形式)だと



{

  events : [

    {

      start : "Jun 28 2006 00:00:00 GMT",

      end   : "Jun 29 2006 00:00:00 GMT",

      title : "表示されるイベント名",

      description : "イベント名クリック時に表示される詳細"

    },

    {

      start : "Jun 28 2006 00:00:00 GMT",

      title : "ｽﾝｽﾝ",

      description : "そろそろﾂｶﾚﾃｷﾀ"

    }

  ]

}
endを省略するとイベントは丸い点で表示される　こんな感じ→●
startとendが指定されるとテープみたいのが表示される。
テープの色とか文字色とか丸い点の画像とか変えられる。（ﾀ｡｡ﾀﾉｼｲ！ﾀﾉｼｽｷﾞﾙ！
詳しくはこちら


再描画する方法



tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);

...

tl.layout();   //再描画
サイズ変更したときしか必要性はﾅｲかも。。。


その他、気づいた点

  • timelineの親要素のスタイルをdisplay:none;にすると動作しない。(かなり嵌った。。)
  • Getting StartedではbodyのonLoad時に初期化していたが、そうじゃなくてもいいっぽい。
  • イベント読み込み後に違うイベントを同じ要素に再度読み込める。
  • APIを動的にロードする方法と自サーバに配置する方法がある。動的に読込む方が用意が要らないので楽。ただし重い感じもする。