-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdown.html
313 lines (274 loc) · 14.3 KB
/
down.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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
<!DOCTYPE html>
<!-- This is a starting page that showcases sattelites above the picked location. -->
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=.5, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes"/>
<title>WorldWind Example</title>
<link href="downStyle.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<!-- Include the Web WorldWind library. -->
<script src="https://files.worldwind.arc.nasa.gov/artifactory/web/0.9.0/worldwind.min.js"></script>
<script src="https://slowe.github.io/stuquery/js/stuquery.min.js"></script>
<script src="https://rawgit.com/slowe/VirtualSky/gh-pages/virtualsky.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="misc/popup.js"></script>
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p id="modal-text">Some text in the Modal..</p>
</div>
</div>
<!--div for planetarium-->
<div id="planetarium-div"></div>
<div id="memo">
<div id="red-part">
<div id="red"></div>
<p>(Locked) Click the satellite to unlock!</p>
</div>
<div id="green-part">
<div id="green"></div>
<p>(Unlocked) Click to see it from above!</p>
</div>
</div>
<!-- div for world window-->
<div id="wwd-div">
<p id="intro-msg">First click on your location to see the sky and available satellites!</p>
<canvas id="wwd-canvas">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<script>
var planetarium;
var locationPicked = false;
S(document).ready(function(){
setTimeout(function(){
openPopup("<h1>Welcome to WeSat!</h1><h3>With WeSat you have the ability to see all the artificial satellites hovering above in real time. Get outside, observe them in the night sky and unlock the amazing privillege to view the earth through their \"eyes\".</h3><p>Unlock as many as you can and expand your collection!</p>");
},1000); // 1 sec
});
function satisUnlocked(sat, id) {
result=false;
$.ajax({
data: {satellite_id: sat,
user_id: id},
url: '../queries/is_unlocked.php',
method: 'GET', // or GET
async: false,
success: function(msg) {
//var response = JSON.parse(msg);
//console.log("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
console.log(msg);
if (msg=="1") {
result= true;
}
}
});
return result;
}
// Register an event listener to be called when the page is loaded.
window.addEventListener("load", eventWindowLoaded, false);
// Create a WorldWindow for the canvas.
var wwd = new WorldWind.WorldWindow("wwd-canvas");
// Define the event listener to initialize Web WorldWind.
function eventWindowLoaded() {
// Add some image layers to the WorldWindow's globe.
wwd.addLayer(new WorldWind.BMNGOneImageLayer());
wwd.addLayer(new WorldWind.BMNGLandsatLayer());
// Add a compass, a coordinates display and some view controls to the WorldWindow.
wwd.addLayer(new WorldWind.CompassLayer());
wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));
// Navigator configurations
wwd.navigator.tilt = 60;
wwd.navigator.range = 5000000;
}
// The common gesture-handling function.
var handleClick = function (recognizer) {
// Obtain the event location.
var x = recognizer.clientX,
y = recognizer.clientY;
// Perform the pick. Must first convert from window coordinates to canvas coordinates, which are
// relative to the upper left corner of the canvas rather than the upper left corner of the page.
var pickList = wwd.pick(wwd.canvasCoordinates(x, y));
// If only one thing is picked and it is the terrain, tell the WorldWindow to go to the picked location.
if (pickList.objects.length === 1 && pickList.objects[0].isTerrain) {
var position = pickList.objects[0].position;
if (locationPicked)
wwd.goTo(new WorldWind.Location(position.latitude, position.longitude));
else { // open the planetarium at picked location
locationPicked = true;
// Array to store the id's of the above sattelites
var aboveID = [];
/* // create the url for the request
var url = "https://www.n2yo.com/rest/v1/satellite/above/" + position.latitude + "/" + position.longitude +
"/0/90/1/&apiKey=FR2XVF-WR3JRJ-Z9UGV4-4KBZ";
// Requeset sattelites above picked location.
// ΤO-DO :: Check that this request generates correctly the sattelites
var requestAbove = {
"async": false,
"crossDomain": true,
"url": url,
"method": "GET"
}
$.ajax(requestAbove).done(function (response) {
console.log(response.info.transactionscount);
// fill the arrray with all the ID's of above sattelites
var i;
for (i=0; i<response.above.length; i++) {
aboveID[i] = response.above[i].satid;
console.log(response.above[i].satname);
console.log(response.above[i].satlat);
console.log(response.above[i].satlng);
console.log(i);
console.log("-----");
}
}); */
$.ajax({
data: {cmd:"above",
obs_lat:position.latitude,
obs_lng:position.longitude,
obs_alt:"0",
search_radius:"90",
cat_id:"1"},
url: '../handle_api_requests.php',
method: 'POST', // or GET
async: false,
success: function(msg) {
var response = JSON.parse(msg);
//console.log("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
console.log(response);
console.log(response.info.transactionscount);
// fill the arrray with all the ID's of above sattelites
var i;
for (i=0; i<response.above.length; i++) {
aboveID[i] = response.above[i].satid;
console.log(response.above[i].satname);
console.log(response.above[i].satlat);
console.log(response.above[i].satlng);
console.log(i);
console.log("-----");
}
}
});
// fill these arrays with the sattelite coordinates to place them on the planetarium
var ra = [];
var dec = [];
var name = [];
// fill these arrays to pass coordinates to the gyroscope
var az = [];
var alt = [];
// make a new request for every object ID you have to find its ra/dec coordinates
for (var j=0; j<aboveID.length; j++) {
/* // create the request url
var requestUrl = "https://www.n2yo.com/rest/v1/satellite/positions/"
+aboveID[j] + "/" + position.latitude + "/" + position.longitude + "/0/2/&apiKey=FR2XVF-WR3JRJ-Z9UGV4-4KBZ";
var requestCoords = {
"async": false,
"crossDomain": true,
"url": requestUrl,
"method": "GET"
}
$.ajax(requestCoords).done(function (response) {
ra[j] = response.positions[0].ra;
dec[j] = response.positions[0].dec;
name[j] = response.info.satname;
az[j] = response.positions[0].azimuth;
alt[j] = response.positions[0].elevation;
}); */
$.ajax({
data: {cmd:"positions",
id:aboveID[j],
obs_lat:position.latitude,
obs_lng:position.longitude,
obs_alt:"2",
sec:"1"},
url: '../handle_api_requests.php',
method: 'POST', // or GET
async: false,
success: function(msg) {
var response = JSON.parse(msg);
//console.log("BBBBBBBBBBBBBBB");
console.log(response);
ra[j] = response.positions[0].ra;
dec[j] = response.positions[0].dec;
name[j] = response.info.satname;
az[j] = response.positions[0].azimuth;
alt[j] = response.positions[0].elevation;
}
});
}
// draw the planetarium
planetarium = S.virtualsky({
id: 'planetarium-div',
projection: 'stereo',
latitude: position.latitude,
longitude: position.longitude,
clock:new Date()
});
// add the sattelites to the planetarium
for (var s=0; s<aboveID.length; s++) {
// if satellite is unlocked the url redirects to the second page
var myURL;
var myColor;
// TO-DO ::
// insert condition isUnlocked(aboveID[s]) here
if (satisUnlocked(aboveID[s], 1)) { // Math.random()>0.5)
myColor = 'rgb(0,250,0)';
// Create the URL. Encode satellite ID for the next page to draw him. Also apend nearby sattelites that above detected.
// Encoded parameter num is the number of neighboring satelites that are passed. The recepient page will use this number to store the
// neighboring sattelite ID's and plot them.
// Every neighboring sattelite is appended with a parameter id + <number of sattelites added so far>.
// To change it back to before just replace the for loop with "id=AoveId[s]"
myURL = "up.html?num=" + encodeURIComponent(aboveID.length - 1) + "&id=" + encodeURIComponent(aboveID[s]);
var count=0;
for (var k=0; k<aboveID.length; k++) {
//append all neighboring satelites
if (k!=s) {
myURL += "&id" + count + "=" + encodeURIComponent(aboveID[k]);
count++;
}
}
/* console.log("URL IS : " + myURL);
console.log('-----'); */
}
else {
myColor = 'rgb(250,0,0)';
// pass to the gyroscope az, alt, id, and observer coordinates
// TO-DO:: The ui is overloaded by api calls. better give the gyroscope only the id to avoid using extra arrays az and alt. We'll see that.
myURL ="gyro.html?id=" + encodeURIComponent(aboveID[s]) +"&sat_name="+ encodeURIComponent((name[s]).replace(/\s/g, '')) + "&az=" + encodeURIComponent(az[s]) + "&alt=" + encodeURIComponent(alt[s])
+ "&lat=" + encodeURIComponent(position.latitude) + "&long=" + encodeURIComponent(position.longitude);
console.log(encodeURIComponent(aboveID[s]) + " " + encodeURIComponent(az[s]) + " " + encodeURIComponent(alt[s]) + " " +
encodeURIComponent(position.latitude) + " " + encodeURIComponent(position.longitude));
}
planetarium.addPointer({
'ra':ra[s],
'dec':dec[s],
'label':name[s],
'img':'https://media.wired.com/photos/5b52582f59269e342890a45a/1:1/w_1800,h_1800,c_limit/Satellite_FHM56J.jpg',
'url':myURL,
'credit':name[s],
'colour':myColor
})
}
// change z-index of planetarium to make it visible
var div = document.getElementById('planetarium-div');
div.style["z-index"]="2";
var wwddiv = document.getElementById('wwd-div');
wwddiv.style["visibility"]="hidden";
var memo = document.getElementById('memo');
memo.style["z-index"]="3";
}
}
};
// Listen for mouse clicks.
var clickRecognizer = new WorldWind.ClickRecognizer(wwd, handleClick);
// Listen for taps on mobile devices.
var tapRecognizer = new WorldWind.TapRecognizer(wwd, handleClick);
</script>
</body>
</html>