forked from Welko/vis2-19s
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (122 loc) · 5.37 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Satellite Tracker by Lucas and Dominik</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div id="overlay">
<div id="overlay-right" class="overlay-panel">
<div id="credits-link" class="panel">Credits
<div id="credits-panel">
<h1>Real-Time Interactive Satellite Tracker</h1>
<p>
This application was a student project by Lucas da Cunha Melo and Dominik Scholz for the
<a href="https://www.cg.tuwien.ac.at/courses/Visualisierung2/">Visualization 2</a> lecture at the <a href="https://www.tuwien.at/">TU Wien</a> in the summer term of 2019.
<br/><br/>
It is inspired by the work in <a href="http://stuffin.space/">stuffin.space</a> but uses
<a href="https://threejs.org/">Threejs</a> instead of raw WebGL calls. The satellite orbits were calculates using
<a href="https://github.com/shashwatak/satellite-js">satellite.js</a> and for the orbit body calculation
<a href="http://cosinekitty.com/astronomy.js">astronomy.js</a> was used.
<br/><br/>
We want to thank all those library creators for the amazing work they've built. We want to further credit NASA
for the <a href="https://de.wikipedia.org/wiki/Datei:Nasa_land_ocean_ice_8192.jpg">texture of earth</a> and
ESO/S. Brunier for the <a href="https://www.eso.org/public/images/eso0932a/">milky way panorama</a>.
</p>
</div>
</div>
<div id="selection-box" class="panel">
<div class="panel-header">
Colors
<div class="panel-header-controls">
<select id="color-select">
<option value="type" selected>Type</option>
<option value="altitude">Altitude</option>
<option value="distance">Distance</option>
</select>
</div>
</div>
<table id="color-info-table">
</table>
</div>
<div class="panel">
<div class="panel-header">Details</div>
<div id="satellite-info-box" class="scroll-panel"></div>
</div>
</div>
<div id="overlay-left" class="overlay-panel">
<div class="panel">Satellite Tracker by Lucas and Dominik</div>
<div class="panel">
<div class="panel-header">
Options <button id="options-collapse" class="collapse">▼</button>
</div>
<table id="options-table" class="hidden">
<tr><td><input type="checkbox" id="cb-show-unselected-satellites">Show unselected satellites</input></td></tr>
<tr><td><input type="checkbox" id="cb-show-planets">Show planets</input></td></tr>
<tr><td><input type="checkbox" id="cb-show-grids">Show grids</input></td></tr>
<tr><td><input type="checkbox" id="cb-show-axes">Show axes</input></td></tr>
<!--<tr><td><input type="checkbox" id="cb-texture-earth">Texture earth</input></td></tr>-->
</table>
</div>
<div class="panel">
<div class="panel-header">
Selection
<div class="panel-header-controls">
<button id="button-clear-selection" class="menu-button">Clear</button>
<button id="button-add-all-selection" class="menu-button">Select all</button>
</div>
</div>
<table id="selection-table">
<tr><td>Count</td><td id="satellites-count">0</td></tr>
</table>
</div>
<div class="panel">
<div class="panel-header">
Search
<div class="panel-header-controls"><input id="search" type="text"/></div>
</div>
<table>
<tr><td><input id="checkbox-search-only-selected" type="checkbox" checked>Search only selected</td></tr>
<tr id="search-results-row"><td>Results</td><td id="search-results">0</td></tr>
<tr id="search-showing-row"><td>Showing</td><td id="search-showing">0</td></tr>
</table>
<table id="search-table" class="scroll-panel"></table>
</div>
</div>
<div id="overlay-bottom">
<!-- <button id="pause-button"><span class="icon pause-icon paused"></span></button> -->
<!-- <button id="stop-button"><span class="icon stop-icon"></span></button> -->
<button id="now-button" class="menu-button">Now</button>
<div id="timeline">
<input type="range" min="-10080" max="10080" value="0" class="slider" id="timeinput"/>
</div>
</div>
</div>
<div id="satellite-nameplate"></div>
<div id="canvas"></div>
<!-- three js dependencies -->
<script src="libs/three.min.js"></script>
<script src="libs/BufferGeometryUtils.js"></script>
<script src="libs/OrbitControls.js"></script>
<!-- satellite js -->
<script src="libs/satellite.js"></script>
<!-- astronomy js -->
<script src="libs/astronomy.js"></script>
<!-- shaders -->
<script src="shaders/satellite_vert.glsl.js"></script>
<script src="shaders/satellite_frag.glsl.js"></script>
<script src="shaders/sky_vert.glsl.js"></script>
<script src="shaders/sky_frag.glsl.js"></script>
<!-- general code -->
<script src="scripts/color.js"></script>
<script src="scripts/satellite-selector.js"></script>
<script src="scripts/earth.js"></script>
<script src="scripts/satellites.js"></script>
<script src="scripts/satellites-ui.js"></script>
<script src="scripts/scene-objects.js"></script>
<script src="scripts/searcher.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>