visual-timeline
v0.0.3
Published
A visual organizer that arranges image clusters on a timeline
Downloads
6
Maintainers
phalanstereReadme
VisualTimeline
The basic idea of this package is to organize visual data on a timeline. To this purpose the vis timeline library was used, as well as the cluster painter module that dislays time clustered images.
##Demo
You can find a demo here
##Browser Integration
Download the *.zip file. Copy the the css and lib folder into your home directory.
Then create an index file. A minimal version looks like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VisualTimeline</title>
<link rel="stylesheet" href="css/clusterPainter.css">
<link rel="stylesheet" href="css/visualTimeline.css">
<link href="css/vis.min.css" rel="stylesheet" type="text/css" />
<script src="lib/vis.min.js"></script>
<script src="lib/bundle.min.js"></script>
<div id="scenery"></div>
<div id = "timeline_trigger"></div>
<div id="visualization"></div>
</body>
</html>
This version does not allow any configuration of the *.js object. However, it has the advantage that you are ready to use it without further ado. The only thing you have to do is to copy all your images into an images folder and then write:
node node_modules/cluster-painter/create_cluster.jsThis demands that you have node.js installed.
If you want to improve the styling, you are free to do so.
##npm version
For simplicities sake - there are so many dependencies involved - the libary was conceived as an npm module that can be installed easily, via:
npm install visual-timelineBut soon there will be a conventional *.js libary added that works with a singe minified file.
However, to get a decent display, there are tow style sheet files to be added:
<link rel="stylesheet" href="node_modules/cluster-painter/css/clusterPainter.css">
<link rel="stylesheet" href="node_modules/visual-timeline/css/visualTimeline.css">
In order to incorporate your images into the project, copy all your files in the images folder and run the following command:
node node_modules/cluster-painter/create_cluster.js
To get the library running, create the following mininal framework
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VisualTimeline</title>
<link rel="stylesheet" href="node_modules/cluster-painter/css/clusterPainter.css">
<link rel="stylesheet" href="node_modules/visual-timeline/css/visualTimeline.css">
<link href="node_modules/vis/dist/vis.min.css" rel="stylesheet" type="text/css" />
<script src="bundle.js"></script>
<div id="scenery"></div>
<div id = "timeline_trigger"></div>
<div id="visualization"></div>
</body>
</html>Then add an index.js file and define your object:
var vis = require('./lib/vis.min.js');
var util = require("util");
var $ = require('jquery');
var VisualTimebar = require('./node_modules/visual-timeline/lib/VisualTimebar.js');
var ClusterPainter = require("cluster-painter");
$( document ).ready(function() {
"use strict";
var bar, params, cluster;
cluster = new ClusterPainter({
source: "cluster.json",
css_class: "standard",
div: "scenery",
type: "default"
});
params = {
directories: ["images1"],
clusterPainter: cluster
};
bar = new VisualTimebar.Bar(params);
});
This code snippet creates the cluster painter area and links the image clusters to the timeline. Last thing you have to do is to browserify your project:
browserify -t browserify-css index.js > bundle.jsThast's it!
This README is a preliminary version that will be improved soon.