Skip to content

Commit

Permalink
TIMELINE: Added test_example3 which includes tests/demonstrations of …
Browse files Browse the repository at this point in the history 
…using trackNum, classname and other

  event attributes. -- Jorge Correia

git-svn-id: http://simile-widgets.googlecode.com/svn/timeline/trunk@1966 579c892a-5248-0410-a714-2bcf037eb5bf
  • Loading branch information
larrykluger committed Mar 30, 2009
1 parent ebf6e83 commit b127d89
Show file tree
Hide file tree
Showing 3 changed files with 298 additions and 0 deletions.
2 changes: 2 additions & 0 deletions CHANGES.txt
View file
Expand Up @@ -32,6 +32,8 @@ synced with (i.e., indicating the visible offset and extent). -- David H rev 192
t -- title,
c -- classname
-- LarryK rev 1954
* Added test_example3 which includes tests/demonstrations of using trackNum, classname and other
event attributes. -- Jorge Correia rev 1966

Version 2.3.1
* timeline-api.js now uses
Expand Down
Binary file added src/webapp/examples/test_example3/bar.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
296 changes: 296 additions & 0 deletions src/webapp/examples/test_example3/test_example3.html
View file
@@ -0,0 +1,296 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>SIMILE | Timeline | Examples | Test Example 2</title>
<link rel='stylesheet' href='../styles.css' type='text/css' />

<!-- ############################################################################ -->
<!-- @author : Jorge Correia -->
<!-- To use this file on your own system, replace ../../api/timeline-api.js with -->
<!-- http://api.simile-widgets.org/timeline/2.3.1/timeline-api.js -->
<!-- (where 2.3.1 is the current release number.) -->

<!-- Debugging support -->
<!-- To debug Timeline and the Ajax library add
<script> Timeline_ajax_url = "http://api.simile-widgets.org/ajax/2.2.1/simile-ajax-api.js?bundle=false"</script>
and change the bundle=true to bundle=false in the timeline-api line too
-->

<script src="../../api/timeline-api.js?bundle=true" type="text/javascript"></script>
<script src="../examples.js" type="text/javascript"></script>
<script>

var tl;
//in php you can get this 1so8601 date using date("c",$you_date_variable);
var startProj = SimileAjax.DateTime.parseIso8601DateTime("2009-03-10T00:00:00");
var endProj = SimileAjax.DateTime.parseIso8601DateTime("2009-04-30T00:00:00");

var event_data =
{
"dateTimeFormat": "iso8601",
"events":[
{ "start": "2009-03-10T06:00:00+00:00",
"end": "2009-03-31T22:00:00+00:00",
"instant": false,
"title": "1",
"color": "#7FFFD4",
"textColor": "#000000",
"caption": "1",
"trackNum": 1,
"classname": "special_event2 aquamarine",
"description": "bar 1"},

{"start": "2009-03-10T08:00:00+00:00",
"end": "2009-03-17T20:00:00+00:00",
"instant": false,
"title": "1.1",
"color": "#7FFFD4",
"textColor": "#000000",
"trackNum": 2,
"description": "bar 1.1"},

{"start": "2009-03-12T10:00:00+00:00",
"end": "2009-03-13T17:00:00+00:00",
"instant": false,
"title": "1.1.1",
"color": "#7FFFD4",
"textColor": "#000000",
"trackNum": 3,
"description": "bar 1.1.1"},

{"start": "2009-03-14T10:00:00+00:00",
"end": "2009-03-16T17:00:00+00:00",
"instant": false,
"title": "1.1.2",
"color": "#7FFFD4",
"textColor": "#000000",
"trackNum": 4,
"description": "bar 1.1.2"},

{"start": "2009-03-17T10:00:00+00:00",
"end": "2009-03-17T17:00:00+00:00",
"instant": false,
"title": "1.1.3",
"color": "#7FFFD4",
"textColor": "#000000",
"trackNum": 5,
"description": "bar 1.1.3"},

{"start": "2009-03-15T08:00:00+00:00",
"end": "2009-03-18T20:00:00+00:00",
"instant": false,
"title": "1.2",
"color": "#7FFFD4",
"textColor": "#000000",
"trackNum": 6,
"classname": "special_event2",
"description": "bar 1.2"},

{"start": "2009-03-15T10:00:00+00:00",
"end": "2009-03-18T17:00:00+00:00",
"instant": false,
"title": "1.2.1",
"color": "#7FFFD4",
"textColor": "#000000",
"trackNum": 7,
"classname": "backimage",
"description": "bar 1.2.1"},

{"start": "2009-03-16T10:00:00+00:00",
"end": "2009-03-17T17:00:00+00:00",
"instant": false,
"title": "1.2.2",
"color": "#7FFFD4",
"textColor": "#000000",
"trackNum": 8,
"description": "bar 1.2.2"},

{"start": "2009-04-01T06:00:00+00:00",
"end": "2009-04-20T22:00:00+00:00",
"instant": false,
"title": "2",
"color": "#000000",
"textColor": "#000000",
"trackNum": 9,
"description": "bar 2"},

{"start": "2009-03-10T06:00:00+00:00",
"end": "2009-03-12T20:00:00+00:00",
"instant": false,
"title": "3",
"textColor": "#000000",
"trackNum": 10,
"classname": "dashed aquamarine",
"description": "bar 3"},

{"start": "2009-03-11T10:00:00+00:00",
"end": "2009-03-12T17:00:00+00:00",
"instant": false,
"title": "3.1",
"textColor": "#000000",
"trackNum": 11,
"classname": "dotted brown",
"description": "bar 3.1"}
]
};

function onLoad() {
var tl_el = document.getElementById("tl");
var eventSource = new Timeline.DefaultEventSource();
var theme = Timeline.ClassicTheme.create();
theme.autoWidth = false; // Set the Timeline's "width" automatically.
theme.autoWidthMargin=10;
theme.event.bubble.width = 220;
theme.event.bubble.height = 120;

theme.ether.backgroundColors = ["#E6E6E6","#F7F7F7"];

theme.timeline_start = startProj;
theme.timeline_stop = endProj;

theme.event.track.height = "20";
theme.event.tape.height = 10; // px
theme.event.track.height = theme.event.tape.height + 6;

var d = SimileAjax.DateTime.parseIso8601DateTime("2009-03-15T00:00:00");
var bandInfos = [

Timeline.createBandInfo({
layout: 'original',// original, overview, detailed
eventSource: eventSource,
date: d,
width: 350,
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 100,
//trackHeight: 10,
theme :theme

}),
Timeline.createBandInfo({
layout: 'overview',
date: d,
trackHeight: 0.5,
trackGap: 0.2,
eventSource: eventSource,
width: 50,
intervalUnit: Timeline.DateTime.MONTH,
// showEventText: false,
intervalPixels: 200,
theme :theme
})

];

bandInfos[1].highlight = true;
bandInfos[1].syncWith = 0;



bandInfos[1].decorators = [
new Timeline.SpanHighlightDecorator({
startDate: startProj,
endDate: endProj,
inFront: false,
color: "#FFC080",
opacity: 30,
startLabel: "Begin",
endLabel: "End",
theme: theme
})
];


tl = Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL);
// show loading message
tl.showLoadingMessage();

eventSource.loadJSON(event_data, document.location.href);

// dismiss loading message
tl.hideLoadingMessage();

// setup highlight filters
setupFilterHighlightControls(document.getElementById("controls"), tl, [0,1], theme);

}
function centerProjStart() {
tl.getBand(1).setCenterVisibleDate(startProj);
}

function centerProjEnd() {
tl.getBand(1).setCenterVisibleDate(endProj);
}

var resizeTimerID = null;
function onResize() {
if(resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
<style type="text/css">
.special_event2 {}
.tape-dashed, .small-dashed {border-top: dashed 5px ;background-color:transparent;margin-top:3px;}
.tape-dotted, .small-dotted {border-top: dotted 9px ;background-color:transparent;margin-top:3px;}
.tape-special_event2{border:2px outset;margin-top:-2px;}
.tape-backimage{background-image: url("bar.png");}
.clear { clear: both; }
.aquamarine{color: #7FFFD4;}
.brown{color:#A52A2A;}

</style>
</head>
<body onload="onLoad();" onresize="onResize();">
<ul id="path">
<li><a href="/" title="Home">SIMILE Widgets</a></li>
<li><a href="../../" title="Timeline">Timeline</a></li>
<li><a href="../" title="Examples">Examples</a></li>
<li><span>Test: Gantt with TrackNum and CSS override in Bars</span></li>
</ul>

<div id="header">
<h1>Test: Gantt with TrackNum and Classname</h1>
</div>

<div id="content">
<p><b>Demonstrates:</b>
<ul>
<li>Events are not laid out automatically. Instead, they are placed into specific tracks, using event attribute TrackNum.
<li>Event tape styling changed with css controlled by event attribute Classname.
<ul>
<li>More than one class is used to achieve a 3d effect in bar 1
<li>Bar 2 is equal to Bar 1, except in border color
<li>Bar 1.2.2 has more than one color through a transparent png set in the background image. Change png to achieve other patterns
<li>Bar 3 is dashed with classname override to default bar behaviour
<li>Bar 3.1 is dotted using the same trick as Bar 3
</ul>
<li>Events are defined in this file, not in an external file
<li>Implicit call of Load Message
<li>Force different band backGround Colors
<li>Set tape height
<li>Using examples.js to add filtering and highlighting controls. Eg, enter 2 into the filter field or a highlight field.
<li>Links to specific dates. Click in start and end links at the top of timeline
<li>Timeline is bounded with start and stop dates. Note how the Timeline can't be moved before 10 March or after 30 April
</ul>

<p>Timeline version <span id='tl_ver'></span>.</p>
<script>Timeline.writeVersion('tl_ver')</script>

</div>

<div class="controls" id="controls"></div>

<div style="float: left;"><a href="javascript:centerProjStart();">Start</a></div>
<div style="text-align:right;"><a href="javascript:centerProjEnd();">End</a></div>
<div class="clear"> </div>
<div id="tl" class="timeline-default" style="height: 400px; border: 1px solid #aaa;"></div>
<div id="footer">
Copyright &copy; <a href="http://web.mit.edu/">Massachusetts Institute of Technology</a> and Contributors 2006-2009 ~ Some rights reserved
</div>
</body>
</html>

0 comments on commit b127d89

Please sign in to comment.