Hugging Face's logo

Spaces:
gaur3009
/
Space_stop_and_wait
Running

App Files Community
gaur3009 commited on
Commit
351a68f
·
verified ·
1 Parent(s): edbda90

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +697 -19
index.html CHANGED
@@ -1,19 +1,697 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>🛰️ Space IoT Transmission | Stop-and-Wait Protocol in Orbit</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-10px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+ @keyframes pulse {
16
+ 0% { opacity: 0.6; }
17
+ 50% { opacity: 1; }
18
+ 100% { opacity: 0.6; }
19
+ }
20
+ @keyframes satelliteOrbit {
21
+ 0% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
22
+ 100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
23
+ }
24
+ .floating {
25
+ animation: float 4s ease-in-out infinite;
26
+ }
27
+ .pulse {
28
+ animation: pulse 2s ease-in-out infinite;
29
+ }
30
+ .satellite {
31
+ animation: satelliteOrbit 20s linear infinite;
32
+ }
33
+ .space-bg {
34
+ background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
35
+ }
36
+ .transmission-box {
37
+ border: 1px solid rgba(255,255,255,0.1);
38
+ background: rgba(0,0,0,0.3);
39
+ backdrop-filter: blur(10px);
40
+ transition: all 0.3s ease;
41
+ }
42
+ .transmission-box:hover {
43
+ transform: scale(1.02);
44
+ box-shadow: 0 0 20px rgba(100, 149, 237, 0.5);
45
+ }
46
+ .signal-strength {
47
+ width: 100%;
48
+ height: 6px;
49
+ background: linear-gradient(to right, #ff0000, #ffff00, #00ff00);
50
+ position: relative;
51
+ }
52
+ .signal-indicator {
53
+ position: absolute;
54
+ width: 2px;
55
+ height: 10px;
56
+ background: white;
57
+ top: -2px;
58
+ }
59
+ .typing {
60
+ width: 5px;
61
+ height: 5px;
62
+ border-radius: 50%;
63
+ display: inline-block;
64
+ margin-right: 3px;
65
+ animation: typing 1s infinite ease-in-out;
66
+ background: #4fd1c5;
67
+ }
68
+ .typing:nth-child(1) {
69
+ animation-delay: 0s;
70
+ }
71
+ .typing:nth-child(2) {
72
+ animation-delay: 0.2s;
73
+ }
74
+ .typing:nth-child(3) {
75
+ animation-delay: 0.4s;
76
+ }
77
+ @keyframes typing {
78
+ 0% { transform: translateY(0); opacity: 0.4; }
79
+ 50% { transform: translateY(-5px); opacity: 1; }
80
+ 100% { transform: translateY(0); opacity: 0.4; }
81
+ }
82
+ </style>
83
+ </head>
84
+ <body class="space-bg min-h-screen font-sans text-white">
85
+ <div class="container mx-auto px-4 py-8">
86
+ <!-- Animated Background Elements -->
87
+ <div class="fixed top-0 left-0 w-full h-full overflow-hidden z-0">
88
+ <div class="absolute top-20 left-1/4 w-2 h-2 bg-white rounded-full opacity-30"></div>
89
+ <div class="absolute top-1/3 left-3/4 w-3 h-3 bg-blue-300 rounded-full opacity-40"></div>
90
+ <div class="absolute top-2/3 left-1/5 w-1 h-1 bg-white rounded-full opacity-50"></div>
91
+ <div class="absolute top-1/4 left-1/2 w-4 h-4 bg-yellow-200 rounded-full opacity-20"></div>
92
+ <div class="absolute top-3/4 left-1/3 w-2 h-2 bg-white rounded-full opacity-30"></div>
93
+ </div>
94
+
95
+ <!-- Header -->
96
+ <header class="text-center mb-12 relative z-10">
97
+ <div class="inline-block relative">
98
+ <div class="satellite absolute -top-8 -left-8">
99
+ <i class="fas fa-satellite text-blue-300 text-3xl"></i>
100
+ </div>
101
+ <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-300 to-purple-300 inline-block">SPACE IoT TRANSMISSION</h1>
102
+ </div>
103
+ <p class="text-xl opacity-80 mb-6">Stop-and-Wait Protocol in Satellite Communications 🛰️</p>
104
+ <div class="mt-6">
105
+ <span class="inline-block bg-blue-500 bg-opacity-30 text-blue-300 px-4 py-2 rounded-full text-sm font-semibold mr-2 mb-2 border border-blue-400 border-opacity-50">#SpaceComms</span>
106
+ <span class="inline-block bg-purple-500 bg-opacity-30 text-purple-300 px-4 py-2 rounded-full text-sm font-semibold mr-2 mb-2 border border-purple-400 border-opacity-50">#ReliableInSpace</span>
107
+ <span class="inline-block bg-teal-500 bg-opacity-30 text-teal-300 px-4 py-2 rounded-full text-sm font-semibold mr-2 mb-2 border border-teal-400 border-opacity-50">#IoTFromOrbit</span>
108
+ </div>
109
+ </header>
110
+
111
+ <!-- Main Content -->
112
+ <div class="flex flex-col lg:flex-row gap-8 relative z-10">
113
+ <!-- Theory Section -->
114
+ <div class="lg:w-1/2 transmission-box rounded-xl p-6">
115
+ <h2 class="text-3xl font-bold text-blue-300 mb-6 flex items-center">
116
+ <i class="fas fa-rocket mr-3"></i> Space IoT Transmission Theory
117
+ </h2>
118
+
119
+ <div class="space-y-6">
120
+ <div class="transmission-box p-4 rounded-lg">
121
+ <h3 class="text-xl font-semibold text-blue-200 mb-2">Why Stop-and-Wait in Space? 🌌</h3>
122
+ <p class="opacity-90">
123
+ In space communications with IoT devices, distances are vast (like 36,000 km for geostationary satellites!)
124
+ and signals are weak. Stop-and-Wait provides reliability when every bit counts and latency is already high.
125
+ </p>
126
+ </div>
127
+
128
+ <div class="transmission-box p-4 rounded-lg">
129
+ <h3 class="text-xl font-semibold text-purple-200 mb-2">Space Transmission Challenges 🚀</h3>
130
+ <ul class="list-disc pl-5 space-y-2 opacity-90">
131
+ <li><span class="font-semibold">High Latency:</span> 250-500ms round-trip times make pipelining inefficient</li>
132
+ <li><span class="font-semibold">Signal Loss:</span> Atmospheric interference, solar flares, and cosmic noise</li>
133
+ <li><span class="font-semibold">Power Constraints:</span> IoT devices have limited energy for retransmissions</li>
134
+ <li><span class="font-semibold">Orbital Mechanics:</span> Satellites move, causing Doppler shifts and connection drops</li>
135
+ </ul>
136
+ </div>
137
+
138
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
139
+ <div class="transmission-box p-4 rounded-lg">
140
+ <h3 class="text-xl font-semibold text-green-300 mb-2">Space IoT Use Cases 🛰️</h3>
141
+ <ul class="list-disc pl-5 text-sm opacity-90">
142
+ <li>Environmental monitoring sensors</li>
143
+ <li>Precision agriculture telemetry</li>
144
+ <li>Maritime tracking beacons</li>
145
+ <li>Remote infrastructure monitoring</li>
146
+ <li>Disaster early warning systems</li>
147
+ </ul>
148
+ </div>
149
+ <div class="transmission-box p-4 rounded-lg">
150
+ <h3 class="text-xl font-semibold text-yellow-300 mb-2">Protocol Enhancements ⚡</h3>
151
+ <ul class="list-disc pl-5 text-sm opacity-90">
152
+ <li>Adaptive timeout values based on orbit position</li>
153
+ <li>Forward error correction for error recovery</li>
154
+ <li>Compressed headers to save bandwidth</li>
155
+ <li>Differential encoding to handle Doppler shifts</li>
156
+ </ul>
157
+ </div>
158
+ </div>
159
+
160
+ <div class="transmission-box p-4 rounded-lg">
161
+ <h3 class="text-xl font-semibold text-pink-200 mb-2">Real Space Missions Using This 🛸</h3>
162
+ <div class="flex items-start mt-4">
163
+ <div class="mr-4 text-4xl opacity-70">
164
+ <i class="fas fa-satellite-dish"></i>
165
+ </div>
166
+ <div class="opacity-90">
167
+ <p>NASA's CubeSat missions, ESA's IoT demonstrators, and commercial satellite IoT networks
168
+ like Swarm Technologies and Lacuna Space use variants of Stop-and-Wait for reliable
169
+ communication with power-constrained devices.</p>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Simulation Section -->
177
+ <div class="lg:w-1/2">
178
+ <div class="transmission-box rounded-xl p-6 mb-6">
179
+ <h2 class="text-3xl font-bold text-green-300 mb-6 flex items-center">
180
+ <i class="fas fa-satellite-dish mr-3"></i> Space IoT Transmission Simulator
181
+ </h2>
182
+
183
+ <div class="relative mb-8">
184
+ <div class="flex justify-between items-center mb-2">
185
+ <div class="text-center">
186
+ <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-2 floating">
187
+ <i class="fas fa-sensor text-white text-2xl"></i>
188
+ </div>
189
+ <p class="font-semibold">IoT Device</p>
190
+ <p class="text-xs opacity-70">(Ground Station)</p>
191
+ </div>
192
+ <div class="text-center">
193
+ <div class="w-20 h-20 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-2 floating" style="animation-delay: 0.5s">
194
+ <i class="fas fa-satellite text-white text-3xl"></i>
195
+ </div>
196
+ <p class="font-semibold">Satellite</p>
197
+ <p class="text-xs opacity-70">(Geostationary Orbit)</p>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-700 z-0"></div>
202
+
203
+ <div class="relative z-10">
204
+ <div class="signal-strength my-4">
205
+ <div class="signal-indicator" style="left: 20%"></div>
206
+ <div class="signal-indicator" style="left: 45%"></div>
207
+ <div class="signal-indicator" style="left: 70%"></div>
208
+ </div>
209
+ <div class="flex justify-between text-xs opacity-80">
210
+ <span>Signal Quality</span>
211
+ <span id="signal-quality">Good (SNR: 12dB)</span>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <div class="space-y-4 h-64 overflow-y-auto pr-2" id="simulation-area">
217
+ <!-- Initial message -->
218
+ <div class="transmission-box p-4 rounded-lg">
219
+ <div class="flex justify-between items-center mb-1">
220
+ <div class="text-blue-300 font-semibold">Ground Control</div>
221
+ <div class="text-xs opacity-70">System Ready</div>
222
+ </div>
223
+ <div class="text-sm opacity-90">
224
+ Space IoT transmission simulator initialized. Waiting for commands...
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <div class="mt-6">
230
+ <div class="flex justify-between items-center mb-3">
231
+ <div>
232
+ <span class="text-sm opacity-80">Transmission Delay:</span>
233
+ <select id="delay-select" class="ml-2 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm">
234
+ <option value="500">Low Earth Orbit (500ms)</option>
235
+ <option value="1200" selected>Geostationary (1200ms)</option>
236
+ <option value="2500">Deep Space (2500ms)</option>
237
+ </select>
238
+ </div>
239
+ <div>
240
+ <span class="text-sm opacity-80">Error Rate:</span>
241
+ <select id="error-select" class="ml-2 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm">
242
+ <option value="5">Clean (5%)</option>
243
+ <option value="15" selected>Moderate (15%)</option>
244
+ <option value="30">Noisy (30%)</option>
245
+ </select>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="flex flex-wrap gap-3 justify-center mt-4">
250
+ <button id="start-btn" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-full font-bold transition flex items-center border border-green-400">
251
+ <i class="fas fa-play mr-2"></i> Start Transmission
252
+ </button>
253
+ <button id="step-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-bold transition flex items-center border border-blue-400">
254
+ <i class="fas fa-step-forward mr-2"></i> Single Packet
255
+ </button>
256
+ <button id="reset-btn" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-full font-bold transition flex items-center border border-gray-400">
257
+ <i class="fas fa-redo mr-2"></i> Reset
258
+ </button>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Stats Panel -->
264
+ <div class="transmission-box rounded-xl p-6">
265
+ <h3 class="text-xl font-bold text-yellow-300 mb-4 flex items-center">
266
+ <i class="fas fa-chart-line mr-2"></i> Mission Telemetry
267
+ </h3>
268
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
269
+ <div class="transmission-box p-3 rounded-lg">
270
+ <p class="text-sm text-blue-300 font-semibold">Packets Sent</p>
271
+ <p id="sent-count" class="text-2xl font-bold">0</p>
272
+ </div>
273
+ <div class="transmission-box p-3 rounded-lg">
274
+ <p class="text-sm text-green-300 font-semibold">ACKs Received</p>
275
+ <p id="ack-count" class="text-2xl font-bold">0</p>
276
+ </div>
277
+ <div class="transmission-box p-3 rounded-lg">
278
+ <p class="text-sm text-yellow-300 font-semibold">Timeouts</p>
279
+ <p id="timeout-count" class="text-2xl font-bold">0</p>
280
+ </div>
281
+ <div class="transmission-box p-3 rounded-lg">
282
+ <p class="text-sm text-red-300 font-semibold">Packet Loss</p>
283
+ <p id="loss-count" class="text-2xl font-bold">0</p>
284
+ </div>
285
+ </div>
286
+
287
+ <div class="mt-4 grid grid-cols-2 gap-4">
288
+ <div class="transmission-box p-3 rounded-lg">
289
+ <p class="text-sm text-purple-300 font-semibold">Round-Trip Time</p>
290
+ <p id="rtt-value" class="text-xl font-bold">0 ms</p>
291
+ </div>
292
+ <div class="transmission-box p-3 rounded-lg">
293
+ <p class="text-sm text-teal-300 font-semibold">Throughput</p>
294
+ <p id="throughput-value" class="text-xl font-bold">0 bps</p>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- FAQ Section -->
302
+ <div class="mt-12 transmission-box rounded-xl p-6 relative z-10">
303
+ <h2 class="text-3xl font-bold text-orange-300 mb-6 flex items-center">
304
+ <i class="fas fa-question-circle mr-3"></i> Space Comms FAQ
305
+ </h2>
306
+
307
+ <div class="space-y-4">
308
+ <div class="border-b border-gray-700 pb-4">
309
+ <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg">
310
+ <span>Why use Stop-and-Wait instead of TCP in space? 🛰️</span>
311
+ <i class="fas fa-chevron-down transition-transform"></i>
312
+ </button>
313
+ <div class="faq-answer mt-2 opacity-90 hidden">
314
+ <p>TCP's congestion control and sliding window don't play nice with high latency space links. Stop-and-Wait's simplicity means:</p>
315
+ <ul class="list-disc pl-5 mt-2 space-y-1">
316
+ <li>No complex window size calculations</li>
317
+ <li>Lower memory requirements on space hardware</li>
318
+ <li>Better handling of intermittent connectivity</li>
319
+ <li>Predictable behavior with known latency</li>
320
+ </ul>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="border-b border-gray-700 pb-4">
325
+ <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg">
326
+ <span>How do satellites handle Doppler shift? 📡</span>
327
+ <i class="fas fa-chevron-down transition-transform"></i>
328
+ </button>
329
+ <div class="faq-answer mt-2 opacity-90 hidden">
330
+ <p>Satellite systems use several techniques:</p>
331
+ <div class="grid grid-cols-2 gap-2 mt-2">
332
+ <div class="bg-gray-800 bg-opacity-50 p-2 rounded">
333
+ <p class="font-semibold text-blue-300">Frequency Prediction</p>
334
+ <p class="text-xs">Calculates expected shift based on orbit</p>
335
+ </div>
336
+ <div class="bg-gray-800 bg-opacity-50 p-2 rounded">
337
+ <p class="font-semibold text-purple-300">Automatic Compensation</p>
338
+ <p class="text-xs">Ground stations adjust in real-time</p>
339
+ </div>
340
+ <div class="bg-gray-800 bg-opacity-50 p-2 rounded">
341
+ <p class="font-semibold text-green-300">Wideband Receivers</p>
342
+ <p class="text-xs">Can receive across a range of frequencies</p>
343
+ </div>
344
+ <div class="bg-gray-800 bg-opacity-50 p-2 rounded">
345
+ <p class="font-semibold text-yellow-300">Differential Encoding</p>
346
+ <p class="text-xs">Encodes data as changes rather than absolute values</p>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <div class="border-b border-gray-700 pb-4">
353
+ <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg">
354
+ <span>What's the future of space IoT? 🚀</span>
355
+ <i class="fas fa-chevron-down transition-transform"></i>
356
+ </button>
357
+ <div class="faq-answer mt-2 opacity-90 hidden">
358
+ <div class="flex items-start">
359
+ <div class="mr-4 text-2xl text-yellow-300">
360
+ <i class="fas fa-star"></i>
361
+ </div>
362
+ <div>
363
+ <p>The next generation includes:</p>
364
+ <ul class="list-disc pl-5 mt-2 space-y-1">
365
+ <li>Mega-constellations of small satellites</li>
366
+ <li>Intersatellite laser links</li>
367
+ <li>AI-driven adaptive protocols</li>
368
+ <li>Quantum key distribution for security</li>
369
+ <li>Integration with 5G/6G networks</li>
370
+ </ul>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- Footer -->
379
+ <footer class="mt-12 text-center opacity-80 relative z-10">
380
+ <p>Made with <i class="fas fa-heart text-red-400"></i> for space communication enthusiasts</p>
381
+ <p class="mt-2 text-sm">Ground Control to Major Tom... your packets have been successfully received!</p>
382
+ </footer>
383
+ </div>
384
+
385
+ <script>
386
+ document.addEventListener('DOMContentLoaded', function() {
387
+ // Simulation variables
388
+ let sequenceNumber = 0;
389
+ let sentCount = 0;
390
+ let ackCount = 0;
391
+ let timeoutCount = 0;
392
+ let lossCount = 0;
393
+ let simulationInterval;
394
+ let isSimulating = false;
395
+ let lastPacketTime = 0;
396
+ let totalRtt = 0;
397
+ let packetSize = 128; // bytes
398
+
399
+ // DOM elements
400
+ const simulationArea = document.getElementById('simulation-area');
401
+ const startBtn = document.getElementById('start-btn');
402
+ const stepBtn = document.getElementById('step-btn');
403
+ const resetBtn = document.getElementById('reset-btn');
404
+ const sentCountEl = document.getElementById('sent-count');
405
+ const ackCountEl = document.getElementById('ack-count');
406
+ const timeoutCountEl = document.getElementById('timeout-count');
407
+ const lossCountEl = document.getElementById('loss-count');
408
+ const rttValueEl = document.getElementById('rtt-value');
409
+ const throughputValueEl = document.getElementById('throughput-value');
410
+ const signalQualityEl = document.getElementById('signal-quality');
411
+ const delaySelect = document.getElementById('delay-select');
412
+ const errorSelect = document.getElementById('error-select');
413
+
414
+ // Update signal quality display
415
+ function updateSignalQuality() {
416
+ const errorRate = parseInt(errorSelect.value);
417
+ let quality, snr;
418
+
419
+ if (errorRate <= 5) {
420
+ quality = "Excellent";
421
+ snr = "18dB";
422
+ } else if (errorRate <= 15) {
423
+ quality = "Good";
424
+ snr = "12dB";
425
+ } else {
426
+ quality = "Poor";
427
+ snr = "6dB";
428
+ }
429
+
430
+ signalQualityEl.textContent = `${quality} (SNR: ${snr})`;
431
+ }
432
+
433
+ // FAQ functionality
434
+ const faqBtns = document.querySelectorAll('.faq-btn');
435
+ faqBtns.forEach(btn => {
436
+ btn.addEventListener('click', function() {
437
+ const answer = this.nextElementSibling;
438
+ const icon = this.querySelector('i');
439
+
440
+ answer.classList.toggle('hidden');
441
+ icon.classList.toggle('rotate-180');
442
+ });
443
+ });
444
+
445
+ // Simulation functions
446
+ function sendPacket() {
447
+ const transmissionDelay = parseInt(delaySelect.value);
448
+ const errorRate = parseInt(errorSelect.value);
449
+
450
+ sequenceNumber++;
451
+ sentCount++;
452
+ sentCountEl.textContent = sentCount;
453
+ lastPacketTime = Date.now();
454
+
455
+ // Create packet element
456
+ const packet = document.createElement('div');
457
+ packet.className = 'transmission-box p-4 rounded-lg mb-2';
458
+ packet.innerHTML = `
459
+ <div class="flex justify-between items-center mb-1">
460
+ <div class="text-blue-300 font-semibold">Uplink #${sequenceNumber}</div>
461
+ <div class="text-xs opacity-70">${new Date().toLocaleTimeString()}</div>
462
+ </div>
463
+ <div class="text-sm opacity-90">
464
+ <div class="flex items-center">
465
+ <i class="fas fa-arrow-up text-blue-300 mr-2"></i>
466
+ <span>Sensor Data Packet (Seq: ${sequenceNumber % 2})</span>
467
+ </div>
468
+ <div class="mt-1 text-xs font-mono opacity-80">
469
+ ${generateRandomHex(16)}
470
+ </div>
471
+ </div>
472
+ <div class="mt-2 flex items-center text-xs">
473
+ <span class="typing"></span>
474
+ <span class="typing"></span>
475
+ <span class="typing"></span>
476
+ <span class="ml-2">Transmitting to satellite...</span>
477
+ </div>
478
+ `;
479
+ packet.id = `packet-${sequenceNumber}`;
480
+ simulationArea.appendChild(packet);
481
+ simulationArea.scrollTop = simulationArea.scrollHeight;
482
+
483
+ // Randomly decide if packet will be lost
484
+ const isLost = Math.random() * 100 < errorRate;
485
+
486
+ if (isLost) {
487
+ lossCount++;
488
+ lossCountEl.textContent = lossCount;
489
+
490
+ setTimeout(() => {
491
+ packet.innerHTML += `
492
+ <div class="mt-2 text-sm text-red-300 font-semibold flex items-center">
493
+ <i class="fas fa-exclamation-triangle mr-2"></i>
494
+ <span>Packet lost! (Signal attenuation)</span>
495
+ </div>
496
+ `;
497
+
498
+ // Timeout after delay period
499
+ setTimeout(() => {
500
+ packet.innerHTML += `
501
+ <div class="mt-2 text-sm text-yellow-300 font-semibold flex items-center">
502
+ <i class="fas fa-clock mr-2"></i>
503
+ <span>Timeout! Resending packet...</span>
504
+ </div>
505
+ `;
506
+ timeoutCount++;
507
+ timeoutCountEl.textContent = timeoutCount;
508
+
509
+ // Resend the packet
510
+ setTimeout(sendPacket, 1000);
511
+ }, transmissionDelay);
512
+ }, transmissionDelay/2);
513
+ } else {
514
+ // Packet arrived successfully
515
+ setTimeout(() => {
516
+ packet.querySelector('.typing').parentElement.innerHTML = `
517
+ <div class="text-sm text-green-300 font-semibold flex items-center">
518
+ <i class="fas fa-check-circle mr-2"></i>
519
+ <span>Packet received by satellite</span>
520
+ </div>
521
+ `;
522
+
523
+ // Send ACK back
524
+ setTimeout(sendAck, transmissionDelay/2);
525
+ }, transmissionDelay/2);
526
+ }
527
+ }
528
+
529
+ function sendAck() {
530
+ const transmissionDelay = parseInt(delaySelect.value);
531
+ const errorRate = parseInt(errorSelect.value);
532
+
533
+ ackCount++;
534
+ ackCountEl.textContent = ackCount;
535
+
536
+ // Calculate RTT
537
+ const rtt = Date.now() - lastPacketTime;
538
+ totalRtt += rtt;
539
+ const avgRtt = totalRtt / ackCount;
540
+ rttValueEl.textContent = `${Math.round(avgRtt)} ms`;
541
+
542
+ // Calculate throughput (simplified)
543
+ const throughput = (packetSize * 8 * 1000) / avgRtt; // bits per second
544
+ throughputValueEl.textContent = `${Math.round(throughput)} bps`;
545
+
546
+ // Create ACK element
547
+ const ack = document.createElement('div');
548
+ ack.className = 'transmission-box p-4 rounded-lg ml-8';
549
+ ack.innerHTML = `
550
+ <div class="flex justify-between items-center mb-1">
551
+ <div class="text-purple-300 font-semibold">Downlink #${sequenceNumber}</div>
552
+ <div class="text-xs opacity-70">${new Date().toLocaleTimeString()}</div>
553
+ </div>
554
+ <div class="text-sm opacity-90">
555
+ <div class="flex items-center">
556
+ <i class="fas fa-arrow-down text-purple-300 mr-2"></i>
557
+ <span>ACK (For Seq: ${sequenceNumber % 2})</span>
558
+ </div>
559
+ <div class="mt-1 text-xs font-mono opacity-80">
560
+ ACK-${sequenceNumber}-${generateRandomHex(4)}
561
+ </div>
562
+ </div>
563
+ <div class="mt-2 flex items-center text-xs">
564
+ <span class="typing"></span>
565
+ <span class="typing"></span>
566
+ <span class="typing"></span>
567
+ <span class="ml-2">Transmitting to ground station...</span>
568
+ </div>
569
+ `;
570
+ ack.id = `ack-${sequenceNumber}`;
571
+ simulationArea.appendChild(ack);
572
+ simulationArea.scrollTop = simulationArea.scrollHeight;
573
+
574
+ // Randomly decide if ACK will be lost
575
+ const isLost = Math.random() * 100 < errorRate;
576
+
577
+ if (isLost) {
578
+ lossCount++;
579
+ lossCountEl.textContent = lossCount;
580
+
581
+ setTimeout(() => {
582
+ ack.innerHTML += `
583
+ <div class="mt-2 text-sm text-red-300 font-semibold flex items-center">
584
+ <i class="fas fa-exclamation-triangle mr-2"></i>
585
+ <span>ACK lost! (Solar interference)</span>
586
+ </div>
587
+ `;
588
+
589
+ // Timeout after delay period
590
+ setTimeout(() => {
591
+ ack.innerHTML += `
592
+ <div class="mt-2 text-sm text-yellow-300 font-semibold flex items-center">
593
+ <i class="fas fa-clock mr-2"></i>
594
+ <span>Timeout! Resending packet...</span>
595
+ </div>
596
+ `;
597
+ timeoutCount++;
598
+ timeoutCountEl.textContent = timeoutCount;
599
+
600
+ // Resend the packet
601
+ setTimeout(sendPacket, 1000);
602
+ }, transmissionDelay);
603
+ }, transmissionDelay/2);
604
+ } else {
605
+ // ACK arrived successfully
606
+ setTimeout(() => {
607
+ ack.querySelector('.typing').parentElement.innerHTML = `
608
+ <div class="text-sm text-green-300 font-semibold flex items-center">
609
+ <i class="fas fa-check-circle mr-2"></i>
610
+ <span>ACK received by ground station</span>
611
+ </div>
612
+ `;
613
+
614
+ if (isSimulating) {
615
+ // Continue simulation
616
+ setTimeout(sendPacket, 1000);
617
+ }
618
+ }, transmissionDelay/2);
619
+ }
620
+ }
621
+
622
+ // Helper function to generate random hex
623
+ function generateRandomHex(length) {
624
+ let result = '';
625
+ const characters = '0123456789ABCDEF';
626
+ for (let i = 0; i < length; i++) {
627
+ result += characters.charAt(Math.floor(Math.random() * characters.length));
628
+ if ((i+1) % 4 === 0 && i !== length-1) result += ' ';
629
+ }
630
+ return result;
631
+ }
632
+
633
+ // Event listeners
634
+ startBtn.addEventListener('click', function() {
635
+ if (!isSimulating) {
636
+ isSimulating = true;
637
+ startBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause Transmission';
638
+ startBtn.classList.remove('bg-green-600');
639
+ startBtn.classList.add('bg-yellow-600', 'hover:bg-yellow-700');
640
+ sendPacket();
641
+ } else {
642
+ isSimulating = false;
643
+ startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Continue Transmission';
644
+ startBtn.classList.remove('bg-yellow-600');
645
+ startBtn.classList.add('bg-green-600', 'hover:bg-green-700');
646
+ }
647
+ });
648
+
649
+ stepBtn.addEventListener('click', function() {
650
+ if (!isSimulating) {
651
+ sendPacket();
652
+ }
653
+ });
654
+
655
+ resetBtn.addEventListener('click', function() {
656
+ // Reset variables
657
+ sequenceNumber = 0;
658
+ sentCount = 0;
659
+ ackCount = 0;
660
+ timeoutCount = 0;
661
+ lossCount = 0;
662
+ isSimulating = false;
663
+ totalRtt = 0;
664
+
665
+ // Reset UI
666
+ simulationArea.innerHTML = `
667
+ <div class="transmission-box p-4 rounded-lg">
668
+ <div class="flex justify-between items-center mb-1">
669
+ <div class="text-blue-300 font-semibold">Ground Control</div>
670
+ <div class="text-xs opacity-70">System Reset</div>
671
+ </div>
672
+ <div class="text-sm opacity-90">
673
+ Space IoT transmission simulator initialized. Waiting for commands...
674
+ </div>
675
+ </div>
676
+ `;
677
+ sentCountEl.textContent = '0';
678
+ ackCountEl.textContent = '0';
679
+ timeoutCountEl.textContent = '0';
680
+ lossCountEl.textContent = '0';
681
+ rttValueEl.textContent = '0 ms';
682
+ throughputValueEl.textContent = '0 bps';
683
+
684
+ startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Transmission';
685
+ startBtn.classList.remove('bg-yellow-600');
686
+ startBtn.classList.add('bg-green-600', 'hover:bg-green-700');
687
+ });
688
+
689
+ // Update signal quality when error rate changes
690
+ errorSelect.addEventListener('change', updateSignalQuality);
691
+
692
+ // Initial signal quality update
693
+ updateSignalQuality();
694
+ });
695
+ </script>
696
+ </body>
697
+ </html>