<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<title>Timeline Demo</title>
|
<style type="text/css">
|
@import url("../../ThirdParty/dojo-release-1.10.4/dijit/themes/claro/claro.css");
|
@import url("../../Source/Widgets/Animation/Animation.css");
|
@import url("../../Source/Widgets/Animation/lighter.css");
|
@import url("../../Source/Widgets/Timeline/Timeline.css");
|
@import url("../../Source/Widgets/Timeline/lighter.css");
|
|
body {
|
background: #000;
|
color: #c0cccc;
|
font-family: "Open Sans", "Trebuchet MS", Sans-Serif;
|
font-size: 15px;
|
-webkit-transition: background-color, color;
|
-webkit-transition-duration: 1s;
|
-moz-transition: background-color, color;
|
-moz-transition-duration: 1s;
|
transition: background-color, color;
|
transition-duration: 1s;
|
}
|
|
body.cesium-lighter {
|
background: #fff;
|
color: #000;
|
}
|
|
.startStopBlock {
|
overflow: hidden; /* causes it to contain floating children. */
|
}
|
|
.dateTimeBlock {
|
display: block;
|
float: left;
|
margin-right: 10px;
|
border: solid 1px #888;
|
border-radius: 25px;
|
color: #000;
|
background: #444;
|
}
|
.cesium-lighter .dateTimeBlock {
|
background: #fff;
|
}
|
|
.info {
|
display: block;
|
float: left;
|
margin-right: 10px;
|
font-family: Monospace;
|
}
|
|
.timeSel {
|
padding: 10px 20px;
|
color: #c0cccc;
|
}
|
.cesium-lighter .timeSel {
|
color: #000;
|
}
|
|
.dateTimeBlock .dijitCalendarContainer {
|
margin: 5px auto 15px auto;
|
}
|
|
#timelineAndAnimation {
|
display: block;
|
clear: both;
|
position: relative;
|
top: 0;
|
left: 0;
|
width: 90%;
|
height: 132px;
|
margin: 20px auto 0;
|
border-bottom: 1px solid #888;
|
}
|
|
.myAnimation {
|
display: block;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 169px;
|
height: 111px;
|
-webkit-transition: none;
|
-webkit-transition-duration: 0;
|
-moz-transition: none;
|
-moz-transition-duration: 0;
|
transition: none;
|
transition-duration: 0;
|
}
|
|
.myTimeline {
|
display: block;
|
position: absolute;
|
bottom: -1px;
|
left: 169px;
|
right: 0;
|
height: 59px;
|
overflow: hidden;
|
}
|
|
.usage {
|
display: block;
|
float: right;
|
width: 250px;
|
padding: 7px;
|
border: solid 1px #aaa;
|
border-radius: 5px;
|
margin: 10px 15px;
|
}
|
|
.usage h2 {
|
margin: 0 0 5px;
|
padding: 0;
|
border-bottom: solid 1px #aaa;
|
text-align: center;
|
}
|
|
.action {
|
font-family: monospace;
|
text-align: right;
|
white-space: nowrap;
|
padding-right: 5px;
|
}
|
|
table {
|
border: none;
|
border-collapse: collapse;
|
}
|
|
tr {
|
border-top: solid 1px #ddd;
|
}
|
|
.themeSelector {
|
display: block;
|
float: right;
|
}
|
|
#endBeforeStart {
|
display: none;
|
font-weight: bold;
|
color: #f00;
|
}
|
</style>
|
<script
|
type="text/javascript"
|
src="../../Build/CesiumUnminified/Cesium.js"
|
></script>
|
<script
|
data-dojo-config="async: 1, tlmSiblingOfDojo: 0"
|
src="../../ThirdParty/dojo-release-1.10.4/dojo/dojo.js"
|
></script>
|
<script type="text/javascript" src="boot.js"></script>
|
</head>
|
<body class="claro cesium-lighter">
|
<div class="usage">
|
<h2>Usage</h2>
|
<p>
|
The following mouse actions are available on the time bar itself, inside
|
the area with the tic marks and time labels. All dragging is horizontal,
|
not vertical.
|
</p>
|
<table>
|
<tr>
|
<td class="action">Left-click</td>
|
<td>Jump to time</td>
|
</tr>
|
<tr>
|
<td class="action">Left-drag</td>
|
<td>Scroll through time</td>
|
</tr>
|
<tr>
|
<td class="action">Right-drag</td>
|
<td>Zoom</td>
|
</tr>
|
<tr>
|
<td class="action">Wheel-spin</td>
|
<td>Zoom</td>
|
</tr>
|
<tr>
|
<td class="action">Middle-drag</td>
|
<td>Pan, only after zooming in.</td>
|
</tr>
|
</table>
|
</div>
|
<div
|
data-dojo-type="dijit.form.ComboButton"
|
data-dojo-props='iconClass:"dijitIconSample", optionsTitle:"select theme"'
|
id="themeSelector"
|
class="themeSelector"
|
>
|
<span>Theme: Lighter</span>
|
<div data-dojo-type="dijit.Menu" id="themeMenu" style="display: none">
|
<div id="themeLighter" data-dojo-type="dijit.MenuItem">Lighter</div>
|
<div id="themeDarker" data-dojo-type="dijit.MenuItem">Darker</div>
|
</div>
|
</div>
|
<h1>Timeline Demo</h1>
|
<p>
|
This is a simple demo of the Cesium Timeline widget. Select a start and
|
end date below to set the start and end dates of the timeline. You can
|
click on the time bar at the top to jump to the time at that location. You
|
can also click and drag the mouse back and forth to change time
|
dynamically. The current time is shown at the bottom. You can also use the
|
mouse wheel to zoom in and out, dynamically adjusting the visible time
|
span.
|
</p>
|
<p>
|
The colored bars show the ability for us to specify important intervals of
|
time. Eventually these bars will gain additional functionality, such as
|
click notification and pop-up menus.
|
</p>
|
<div class="startStopBlock">
|
<div class="dateTimeBlock">
|
<div class="timeSel">
|
Start time:
|
<input
|
type="text"
|
id="startTimeSel"
|
data-dojo-type="dijit.form.TimeTextBox"
|
/>
|
</div>
|
<div id="startCal" data-dojo-type="dijit.Calendar"></div>
|
</div>
|
<div class="dateTimeBlock">
|
<div class="timeSel">
|
End time:
|
<input
|
type="text"
|
id="endTimeSel"
|
data-dojo-type="dijit.form.TimeTextBox"
|
/>
|
</div>
|
<div id="endCal" data-dojo-type="dijit.Calendar"></div>
|
</div>
|
<div class="info">
|
<p>Visible Timespan: <span id="formatted">(none)</span></p>
|
<p id="endBeforeStart">ERROR: Start time must come before end time.</p>
|
</div>
|
</div>
|
|
<div id="timelineAndAnimation">
|
<div id="time1" class="myTimeline"></div>
|
<div id="animationWidget" class="myAnimation"></div>
|
</div>
|
|
<p class="info">Tick position: <span id="mousePos"></span></p>
|
</body>
|
</html>
|
