217 lines
5.9 KiB
HTML
217 lines
5.9 KiB
HTML
<!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 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>
|