GitHub - hyperstudio/repertoire-chronos: Repertoire Chronos Timeline

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 47 Commits
javascripts		javascripts
.gitignore		.gitignore
README		README
TODO		TODO
index.html		index.html
json.php		json.php

Repository files navigation

Repertoire Chronos
---------------------------------------------------------

The Repertoire Chronos Timeline was designed and built by Brett Barros ([email protected]) and Dave Della Costa ([email protected]) of MIT's HyperStudio (http://hyperstudio.mit.edu/) with help and architecture suggestions from Christopher York ([email protected]).  While still in early beta, with many planned features still outstanding, Chronos provides these features now:

-A vertical, real-time adjustable view of datetime events in timeline format.
-JSON data format input.
-Easily "CSS-tweakable" visual elements.
-jQuery integration and installation as a jQuery plug-in.
 

Requirements:
---------------------------------------------------------

-jQuery >= 1.4.x  (http://jquery.com/)
-jQuery UI >= 1.8.x  (http://jqueryui.com/)
-jQuery 'UI lightness' (http://jqueryui.com/themeroller/ --click on "Gallery" on the left and select UI Lightness)



Using Repertoire Chronos:
---------------------------------------------------------

You will need to have included the necessary jQuery files:
-jquery.js
-jquery-ui.js
-ui-lightness/jquery-ui.css

As for Repertoire Chronos, include these two files:
 -javascripts/chronos/jquery.chronos.js
 -javascripts/chronos/timeline.css


So, for example, your html header may include the following lines:

<script src="javascripts/jquery.js"></script>
<script src="javascripts/jquery-ui.js"></script>
<script src="javascripts/chronos/jquery.chronos.js"></script>

<link media="all" type="text/css" href="javascripts/chronos/timeline.css" rel="Stylesheet" charset="utf-8" />
<link media="all" type="text/css" href="javascripts/ui-lightness/jquery-ui.css" rel="Stylesheet" charset="utf-8" />


After that, you need to set up the necessary HTML "scaffolding:"

...

</head>

<body>

<div id="my_chronos"></div>

</body>
</html>


And then, add the jQuery configuration:

  <script>

  $(document).ready(
    function() {
      $('#chronos').chronos({
        url:        'http://slebinos.mit.edu/dev/repertoire-chronos/',
        js_path:    'javascripts/',
        data_url:   'http://spreadsheets.google.com/feeds/list/tXTRNT-JFvyfpFoybaHhltw/1/public/basic?alt=json',
        data_start: 'feed.entry',
        date_name:  'content.$t.start',
        id_name:    'content.$t.eventid',
        title_name: 'title.$t'
      });
    }
  );

  </script>


Configuration
---------------------------------------------------------

At the present time a very limited set of values is available for setting, basically only the bare minimum necessary for functioning (this will most certainly be changing very soon...many more features will be exposed for configuration).  The configuration represents primarily url and path information so Chronos can find the necessary source files and display correctly, and data configuration so Chronos knows how to read your data.

url:         this should be the full url to the root of your application.

js_path:     the relative path to your javascript directory, assumed to be under the application path (see 'url' above).

data_url:    this is the URL for your JSON feed.

data_start, date_name, id_name, title_name:  these four fields represent the default required fields for your JSON feed.  Chronos expects to see a JSON feed formatted with the name given in 'data_start,' containing multiple instances of objects having the properties named in the variables "date_name," "id_name,"  and "title_name."  Specifics below:

date_name:   the date of the event.  Chronos uses datejs's parse functionality to import dates--see here: http://code.google.com/p/datejs/wiki/APIDocumentation#parse
id_name:     an arbitrary value currently used for generating unique CSS ids.
title_name:  the title of the event.

If these four (data_start, date_name, id_name, title_name) values are not present, these default names are assumed to exist in your JSON data feed:  events, start, id, title.


For example, if your JSON was structured like so:

{
  "events": [
    {
      "id": 3735,
      "title": "Negotiations on the Treaty of Versailles",
      "start": "1919-01-18T00:00:00-04:00"
    },
    {
      "id": 4172,
      "title": "This is an evenet FAKE",
      "start": "1957-01-20T00:00:00-04:00"
    },
    {
      "id": 3736,
      "title": "Algiers Accord is signed",
      "start": "1975-03-06T00:00:00-04:00"
    }
  ],
}

data_start would be 'events,'
date_name would be 'start,'
id_name would be 'id,'
and title_name would be 'title.'

But, in this case, you could leave all of these values out--these names are the defaults.



External libraries packaged with this package:
---------------------------------------------------------

-Hyperstudio's Repertoire AJAX toolkit widgets: all that is used is the directory /public/javascripts/rep.widgets.
-Datejs: http://code.google.com/p/datejs/source/checkout : using Revision #191, 2008-05-12 (MIT LICENSE).  The development of this package seems to have slowed drastically, but it is not entirely dead, and still seems to be the best one out there.  Will revisit at a later point but now included in source.