-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
262 lines (249 loc) · 11.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Earth</title>
<link href="../stylesheets/style.css" rel="stylesheet" type="text/css"/>
<link href="../stylesheets/video-js.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../lib/modernizr-1.6.js"></script>
<style type="text/css">
.transparent-ui {
opacity: .6;
}
.container {
z-index: 0;
}
#earth-info-label {
position: absolute;
width: 240px;
font: 1.1em monospace;
clear: both;
padding: 8px;
overflow: hidden;
background: blue;
color: white;
z-index: 2;
margin: 0 auto;
border: 1px solid;
text-align: left;
-webkit-box-shadow: #444 5px 5px 2px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
}
</style>
</head>
<div id="container">
<div id="header-inner">
<h1 id="title"><a href="http://scenejs.org">SceneJS</a> : Earth</h1>
<div id="simulation-controls">
</div>
</div>
<div id="content">
<div id="webglCanvasContainer">
<ul class="hlist">
<li>
<form id="choose-look-at">
<fieldset>
<legend>Look at</legend>
<label><input type="radio" name="look-at" value="orbit"> Orbit</input></label>
<label><input type="radio" name="look-at" value="earth" checked> Earth</input></label>
<label><input type="radio" name="look-at" value="surface" disabled> Surface</input></label>
</fieldset>
</form>
</li>
<li>
<form id="choose-month">
<fieldset>
<legend>Choose month</legend>
<label><input type="radio" name="month" value="jun" checked> Jun 21</input></label>
<label><input type="radio" name="month" value="sep"> Sep 21</input></label>
<label><input type="radio" name="month" value="dec"> Dec 21</input></label>
<label><input type="radio" name="month" value="mar"> Mar 21</input></label>
</fieldset>
</form>
</li>
<li>
<form id="show-me">
<fieldset>
<legend>Show me</legend>
<label><input id="orbital_path" type="checkbox" value="false" /> Orbital path</label>
<label><input id="earth_rotation" type="checkbox" value="false" /> Earth rotation</label>
<label><input id="circle-orbital-path" type="checkbox" value="selected" /> Circular orbital path</label>
<label><input id="orbital-grid" type="checkbox"/> Orbital grid: </label>
</fieldset>
</form>
</li>
</ul>
</ul>
<canvas id="theCanvas" width="1030" height="700">
<p>This example requires a browser that supports the
<a href="http://learningwebgl.com/cookbook/index.php/WebGL:_Frequently_Asked_Questions">WebGL</a><canvas> feature.
</p>
</canvas>
<ul class="hlist">
<li>
<form id="choose-earth-surface">
<fieldset>
<legend>Earth surface</legend>
<label><input type="radio" name="earth-surface" value="terrain" checked> Terrain</input></label>
<label><input type="radio" name="earth-surface" value="temperature"> Temperature</input></label>
<label id="temperature-color-mapx">
<img src="images/color-map-minus30-to-30-400px.png" alt="color map for temperature"/>
</label>
</fieldset>
</form>
</li>
</ul>
</div>
<div id="info">
<h2>Earth</h2>
<p>
The visualization starts with the Earth in it's June 21 orbital orientation ... summer in the northern hemisphere.
Click the mouse to to rotate your view around Earth. The orbital path indicator is not working correctly when your point-of-view is near the Earth.
You can select four different times of year and display either a terrain map or a map of monthly mean temperatures.
</p>
<h2>Getting a WebGL-enabled browser</h2>
<div id="getting-webgl">
<p>
You need a <a href='http://learningwebgl.com/blog/?p=11'>WebGL-enabled</a> browser to explore this visualization.
Beta releases of <a href="http://www.google.com/landing/chrome/beta/">Chrome</a> for Mac OS X and Windows
and the <a href="http://nightly.webkit.org/">WebKit nightly</a> beta release for Mac OS X appear to work best.
</p>
</div>
<h2>Credits</h2>
<p>
Earth texture from <a href="http://www.esa.int/esaEO/SEMGSY2IU7E_index_1.html">the European Space Agency/Envisat</a>.<br/>
</p>
<p>
The Milky Way galaxy texture from <a href="http://www.gigagalaxyzoom.org/image_milkyway.html">Gigagalaxy Zoom: Milky Way Panorama</a>, by ESO/S. Brunier.<br/>
</p>
<p>
Temperature map images adapted from the <a href="http://www.esrl.noaa.gov/psd/cgi-bin/DataAccess.pl?DB_dataset=CDC+Derived+NCEP+Reanalysis+Products+Surface+Level&DB_variable=Air+Temperature&DB_statistic=Mean&DB_tid=27959&DB_did=39&DB_vid=1041">CDC Derived NCEP Reanalysis Products Surface Level Data</a> produced by the
<a href="http://www.esrl.noaa.gov/psd/">Physical Science Division</a> at <a href="http://www.esrl.noaa.gov/">NOAA's Earth System Research Laboratory</a>.
</p>
<p>
The Earth's city lights image was adapted from the <a href="http://visibleearth.nasa.gov/view_rec.php?id=1438">Earth's City Lights</a> section on NASA's <a href="http://visibleearth.nasa.gov">Visible Earth</a> project.
</p>
<p>
Outline image of continents adapted from <a href="http://www.giss.nasa.gov/tools/panoply/overlays/Earth_MWDB1.gif">Earth_MWDB1</a> gif image produced by the <a href="http://www.giss.nasa.gov/tools/panoply/overlays/">Panoply Data Viewer Project</a> at National Aeronautics and Space Administration's <a href="http://www.giss.nasa.gov/">
Goddard Institute for Space Studies</a>.
</p>
<h2>Source Code</h2>
<p>Some of the JavaScript source code:</p>
<ul>
<li><a target="_other" href="solar-system.js">solar-system.js</a></li>
<li><a target="_other" href="earth.js">earth.js</a></li>
<li><a target="_other" href="sun.js">sun.js</a></li>
</ul>
<p>
View the rest of the code on <a href="https://github.com/stepheneb/seasons">github</a>.
</p>
</div>
<div id="log">
<h3>SceneJS Log</h3>
<div id="theLoggingDiv"></div>
</div>
</div>
</div>
<div id="earth-info-label" class="transparent-ui">
Earth
</div>
<script type="text/javascript">
function myRequire(src, callback){
if (src.constructor == Array) {
var libraries = src;
} else {
var libraries = [src];
}
var script = document.createElement("script")
script.type = "text/javascript";
// IE
script.onreadystatechange = function () {
if (script.readyState === 'loaded' || script.readyState == 'complete') {
script.onreadystatechange = null;
libraries.shift();
if (libraries.length > 0) {
myRequire(libraries)
}
if (callback) {
callback();
}
}
}
// Not IE
script.onload = function () {
libraries.shift();
if (libraries.length > 0) {
myRequire(libraries)
}
if (callback) {
callback();
}
}
script.src = libraries[0];
document.getElementsByTagName("head")[0].appendChild(script);
};
window.onload=function() {
var webGLEnabled = Modernizr.webgl;
// webGLEnabled = false;
if (webGLEnabled){
myRequire([
"../lib/sprintf.js",
"../lib/scenejs-0.8.0/scenejs.js",
"javascript/solar-system-data.js",
"javascript/sky-sphere.js",
"javascript/earth-axis.js",
"javascript/earth-sphere.js",
"javascript/sun.js",
"javascript/earth.js",
"javascript/earth-orbit.js",
"javascript/jpl-earth-ephemerides.js",
"javascript/orbit-grid.js",
"javascript/earth-sun-line.js",
"javascript/latitude-line.js",
"javascript/solar-system.js"
]);
} else {
var content = document.getElementById('content');
var canvasContainer = document.getElementById('webglCanvasContainer');
var controls = document.getElementById('simulation-controls');
controls.style['display']='none';
var header = document.getElementById('header-inner');
var getting_webgl = document.getElementById('getting-webgl').cloneNode(true);
header.appendChild(getting_webgl);
var notice = document.createElement('p');
notice.innerHTML = "<em>Play a video of the Earth visualization with an <a href=\"http://videojs.com\">HTML5 Video Player</a> because this browser doesn't support WebGL.</em>";
notice.className = "videoplayernotice";
content.insertBefore(notice, canvasContainer);
myRequire("../lib/videojs/video.js", function () {
var currentPath = location.href.replace(/index\.html$/, '');
var earthVideoStr="";
earthVideoStr += "<div class=\"video-js-box\">";
earthVideoStr += "<video id=\"earth-video\" class=\"video-js\" width=\"1030\" height=\"700\" controls=\"controls\" ";
earthVideoStr += "preload=\"auto\" poster=\"images\/earth-frame1-mixed.jpg\">";
earthVideoStr += "<source src=\"videos\/earth3.mp4\" type='video\/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"' \/>";
earthVideoStr += "<source src=\"videos\/earth3.webm\" type='video\/webm; codecs=\"vp8, vorbis\"' \/>";
earthVideoStr += "<source src=\"videos\/earth3.ogv\" type='video\/ogg; codecs=\"theora, vorbis\"' \/>";
earthVideoStr += "<object id=\"flash_fallback_1\" class=\"vjs-flash-fallback\" width=\"1030\" height=\"700\" type=\"application\/x-shockwave-flash\"";
earthVideoStr += "data=\"http:\/\/releases.flowplayer.org\/swf\/flowplayer-3.2.1.swf\">";
earthVideoStr += "<param name=\"movie\" value=\"http:\/\/releases.flowplayer.org\/swf\/flowplayer-3.2.1.swf\" \/>";
earthVideoStr += "<param name=\"allowfullscreen\" value=\"true\" \/>";
earthVideoStr += "<param name=\"flashvars\" value='config={\"playlist\":[\"" + currentPath + "/images/earth-frame1-mixed.jpg\", "
earthVideoStr += "{\"url\": \"" + currentPath + "videos\/earth3.flv\",\"autoPlay\":false,\"loop\":false,\"autoBuffering\":true}]}' \/>";
earthVideoStr += "<img src=\"" + currentPath + "images/earth-frame1-mixed.jpg\" width=\"1030\" height=\"700\" alt=\"Poster Image\"";
earthVideoStr += "title=\"No video playback capabilities.\" \/>";
earthVideoStr += "<\/object>";
earthVideoStr += "<\/video>";
earthVideoStr += "<p class=\"vjs-no-video\"><\/p>";
earthVideoStr += "<\/div>";
earthVideoStr += "";
canvasContainer.innerHTML = earthVideoStr;
VideoJS.setupAllWhenReady();
});
};
}
</script>
</body>
</html>