Files
openlayers/master/examples/test_sun.html
Éric Lemoine 5d14b9e2d4 Updated
2013-02-20 10:38:25 +01:00

136 lines
4.3 KiB
HTML

<html>
<head profile="http://www.w3.org/2002/12/namespace">
<link rel="stylesheet" type="text/css" href="../../../../../dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="../../../../../dijit/themes/tundra/tundra.css">
<title>Dojo Sun</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- hosted version -->
<script type="text/javascript" src="http://openlayers.org/api/2.10/OpenLayers.js"></script>
<style type="text/css">
.text {
font-size: .7em;
vertical-align: bottom;
}
.nobr {
white-space: nowrap
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad : true
};
</script>
<script type="text/javascript" src="../../../../../dojo/dojo.js"></script>
<script type="text/javascript">
var sunDemo;
require([ "dojo/ready",
"dojo/_base/connect",
"dojox/geo/openlayers/tests/sun/SunDemo",
"dijit/layout/ContentPane",
"dijit/form/HorizontalSlider",
"dijit/form/HorizontalRuleLabels",
"dijit/form/Textarea",
"dijit/form/CheckBox",
"dijit/Menu",
"dijit/MenuItem",
"dijit/CheckedMenuItem",
"dijit/PopupMenuItem",
"dojo/parser"], function(ready, connect, SunDemo){
ready(function(){
sunDemo = new SunDemo('map');
updateSliders();
// dojo.on(sunDemo, "updateFeatures", dojo.hitch(this, updateText));
dojo.connect(sunDemo, "updateFeatures", this, updateText);
});
function updateSliders(){
var dateSlider = dijit.byId("date");
dateSlider.set("value", sunDemo.getDay());
var bissextile = new Date(sunDemo.sun.getDate().getFullYear(), 2, 0).getDate() == 29;
dateSlider.set("maximum", (bissextile ? 366 : 365));
var timeSlider = dijit.byId("time");
timeSlider.set("value", sunDemo.getHour());
}
function updateText(){
var ta = dijit.byId("textArea");
var s = sunDemo.sun.getDate().toString();
ta.set('value', s);
}
});
</script>
</head>
<body class="tundra">
<table id="theTable" style="width: 100%; height: 100%;">
<tr>
<td colspan="2" style="width: 100%; height: 100%;">
<div id="map" style="background-color: #b5d0d0; height: 100%; width: 100%;">
<div dojoType="dijit.Menu" targetNodeIds="map" style="display: none;">
<div id="tt" dojoType="dijit.CheckedMenuItem"
onClick="sunDemo.showTooltips(dijit.byId('tt').checked)">Tooltips</div>
<div id="grd" dojoType="dijit.CheckedMenuItem"
onClick="sunDemo.showGradients(dijit.byId('grd').checked)">Gradients</div>
<div id="crl" dojoType="dijit.CheckedMenuItem"
onClick="sunDemo.showCircles(dijit.byId('crl').checked)">Circles</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="text" width="5%">Day #</td>
<td>
<div id="date" dojoType="dijit.form.HorizontalSlider"
data-dojo-props='onChange:function(val){sunDemo.setDay(val);}' minimum="0" , maximum="365"
pageIncrement="1" showButtons="true" intermediateChanges="true" discreteValues="365">
<div dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" class="text"
labels="1,50,100,150,200,250,300,365" style="height: 15;"></div>
</div>
</td>
</tr>
<tr>
<td class="text" width="5%">Time</td>
<td>
<div id="time" dojoType="dijit.form.HorizontalSlider" maximum="24" minimum="0"
showButtons="true" intermediateChanges="true"
data-dojo-props='onChange:function(val){sunDemo.setTime(val);}'>
<div dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" class="text"
labels="0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24" style="height: 15;"></div>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<table style="width: 100%;">
<tr>
<td style="width: 100%;"><textarea class="text" id="textArea"
dojoType="dijit.form.Textarea" style="width: 100%;"></textarea>
</td>
<td>
<button class="text" dojoType="dijit.form.Button" onClick='sunDemo.setDate()'>Now</button></td>
<td><span class="nobr"> <input type="checkbox" name="auto" id="auto"
onclick="sunDemo.startTimer(dijit.byId('auto').checked)" dojoType="dijit.form.CheckBox">&nbsp;<label
for="auto">auto</label> </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>