Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>🛰️ Space IoT Transmission | Stop-and-Wait Protocol in Orbit</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.6; } | |
| } | |
| @keyframes satelliteOrbit { | |
| 0% { transform: rotate(0deg) translateX(150px) rotate(0deg); } | |
| 100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); } | |
| } | |
| .floating { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| .pulse { | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .satellite { | |
| animation: satelliteOrbit 20s linear infinite; | |
| } | |
| .space-bg { | |
| background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e); | |
| } | |
| .transmission-box { | |
| border: 1px solid rgba(255,255,255,0.1); | |
| background: rgba(0,0,0,0.3); | |
| backdrop-filter: blur(10px); | |
| transition: all 0.3s ease; | |
| } | |
| .transmission-box:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 0 20px rgba(100, 149, 237, 0.5); | |
| } | |
| .signal-strength { | |
| width: 100%; | |
| height: 6px; | |
| background: linear-gradient(to right, #ff0000, #ffff00, #00ff00); | |
| position: relative; | |
| } | |
| .signal-indicator { | |
| position: absolute; | |
| width: 2px; | |
| height: 10px; | |
| background: white; | |
| top: -2px; | |
| } | |
| .typing { | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 3px; | |
| animation: typing 1s infinite ease-in-out; | |
| background: #4fd1c5; | |
| } | |
| .typing:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .typing:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes typing { | |
| 0% { transform: translateY(0); opacity: 0.4; } | |
| 50% { transform: translateY(-5px); opacity: 1; } | |
| 100% { transform: translateY(0); opacity: 0.4; } | |
| } | |
| </style> | |
| </head> | |
| <body class="space-bg min-h-screen font-sans text-white"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Animated Background Elements --> | |
| <div class="fixed top-0 left-0 w-full h-full overflow-hidden z-0"> | |
| <div class="absolute top-20 left-1/4 w-2 h-2 bg-white rounded-full opacity-30"></div> | |
| <div class="absolute top-1/3 left-3/4 w-3 h-3 bg-blue-300 rounded-full opacity-40"></div> | |
| <div class="absolute top-2/3 left-1/5 w-1 h-1 bg-white rounded-full opacity-50"></div> | |
| <div class="absolute top-1/4 left-1/2 w-4 h-4 bg-yellow-200 rounded-full opacity-20"></div> | |
| <div class="absolute top-3/4 left-1/3 w-2 h-2 bg-white rounded-full opacity-30"></div> | |
| </div> | |
| <!-- Header --> | |
| <header class="text-center mb-12 relative z-10"> | |
| <div class="inline-block relative"> | |
| <div class="satellite absolute -top-8 -left-8"> | |
| <i class="fas fa-satellite text-blue-300 text-3xl"></i> | |
| </div> | |
| <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> | |
| </div> | |
| <p class="text-xl opacity-80 mb-6">Stop-and-Wait Protocol in Satellite Communications 🛰️</p> | |
| <div class="mt-6"> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex flex-col lg:flex-row gap-8 relative z-10"> | |
| <!-- Theory Section --> | |
| <div class="lg:w-1/2 transmission-box rounded-xl p-6"> | |
| <h2 class="text-3xl font-bold text-blue-300 mb-6 flex items-center"> | |
| <i class="fas fa-rocket mr-3"></i> Space IoT Transmission Theory | |
| </h2> | |
| <div class="space-y-6"> | |
| <div class="transmission-box p-4 rounded-lg"> | |
| <h3 class="text-xl font-semibold text-blue-200 mb-2">Why Stop-and-Wait in Space? 🌌</h3> | |
| <p class="opacity-90"> | |
| In space communications with IoT devices, distances are vast (like 36,000 km for geostationary satellites!) | |
| and signals are weak. Stop-and-Wait provides reliability when every bit counts and latency is already high. | |
| </p> | |
| </div> | |
| <div class="transmission-box p-4 rounded-lg"> | |
| <h3 class="text-xl font-semibold text-purple-200 mb-2">Space Transmission Challenges 🚀</h3> | |
| <ul class="list-disc pl-5 space-y-2 opacity-90"> | |
| <li><span class="font-semibold">High Latency:</span> 250-500ms round-trip times make pipelining inefficient</li> | |
| <li><span class="font-semibold">Signal Loss:</span> Atmospheric interference, solar flares, and cosmic noise</li> | |
| <li><span class="font-semibold">Power Constraints:</span> IoT devices have limited energy for retransmissions</li> | |
| <li><span class="font-semibold">Orbital Mechanics:</span> Satellites move, causing Doppler shifts and connection drops</li> | |
| </ul> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="transmission-box p-4 rounded-lg"> | |
| <h3 class="text-xl font-semibold text-green-300 mb-2">Space IoT Use Cases 🛰️</h3> | |
| <ul class="list-disc pl-5 text-sm opacity-90"> | |
| <li>Environmental monitoring sensors</li> | |
| <li>Precision agriculture telemetry</li> | |
| <li>Maritime tracking beacons</li> | |
| <li>Remote infrastructure monitoring</li> | |
| <li>Disaster early warning systems</li> | |
| </ul> | |
| </div> | |
| <div class="transmission-box p-4 rounded-lg"> | |
| <h3 class="text-xl font-semibold text-yellow-300 mb-2">Protocol Enhancements ⚡</h3> | |
| <ul class="list-disc pl-5 text-sm opacity-90"> | |
| <li>Adaptive timeout values based on orbit position</li> | |
| <li>Forward error correction for error recovery</li> | |
| <li>Compressed headers to save bandwidth</li> | |
| <li>Differential encoding to handle Doppler shifts</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="transmission-box p-4 rounded-lg"> | |
| <h3 class="text-xl font-semibold text-pink-200 mb-2">Real Space Missions Using This 🛸</h3> | |
| <div class="flex items-start mt-4"> | |
| <div class="mr-4 text-4xl opacity-70"> | |
| <i class="fas fa-satellite-dish"></i> | |
| </div> | |
| <div class="opacity-90"> | |
| <p>NASA's CubeSat missions, ESA's IoT demonstrators, and commercial satellite IoT networks | |
| like Swarm Technologies and Lacuna Space use variants of Stop-and-Wait for reliable | |
| communication with power-constrained devices.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Simulation Section --> | |
| <div class="lg:w-1/2"> | |
| <div class="transmission-box rounded-xl p-6 mb-6"> | |
| <h2 class="text-3xl font-bold text-green-300 mb-6 flex items-center"> | |
| <i class="fas fa-satellite-dish mr-3"></i> Space IoT Transmission Simulator | |
| </h2> | |
| <div class="relative mb-8"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-2 floating"> | |
| <i class="fas fa-sensor text-white text-2xl"></i> | |
| </div> | |
| <p class="font-semibold">IoT Device</p> | |
| <p class="text-xs opacity-70">(Ground Station)</p> | |
| </div> | |
| <div class="text-center"> | |
| <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"> | |
| <i class="fas fa-satellite text-white text-3xl"></i> | |
| </div> | |
| <p class="font-semibold">Satellite</p> | |
| <p class="text-xs opacity-70">(Geostationary Orbit)</p> | |
| </div> | |
| </div> | |
| <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-700 z-0"></div> | |
| <div class="relative z-10"> | |
| <div class="signal-strength my-4"> | |
| <div class="signal-indicator" style="left: 20%"></div> | |
| <div class="signal-indicator" style="left: 45%"></div> | |
| <div class="signal-indicator" style="left: 70%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs opacity-80"> | |
| <span>Signal Quality</span> | |
| <span id="signal-quality">Good (SNR: 12dB)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-4 h-64 overflow-y-auto pr-2" id="simulation-area"> | |
| <!-- Initial message --> | |
| <div class="transmission-box p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="text-blue-300 font-semibold">Ground Control</div> | |
| <div class="text-xs opacity-70">System Ready</div> | |
| </div> | |
| <div class="text-sm opacity-90"> | |
| Space IoT transmission simulator initialized. Waiting for commands... | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <div> | |
| <span class="text-sm opacity-80">Transmission Delay:</span> | |
| <select id="delay-select" class="ml-2 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm"> | |
| <option value="500">Low Earth Orbit (500ms)</option> | |
| <option value="1200" selected>Geostationary (1200ms)</option> | |
| <option value="2500">Deep Space (2500ms)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <span class="text-sm opacity-80">Error Rate:</span> | |
| <select id="error-select" class="ml-2 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm"> | |
| <option value="5">Clean (5%)</option> | |
| <option value="15" selected>Moderate (15%)</option> | |
| <option value="30">Noisy (30%)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-3 justify-center mt-4"> | |
| <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"> | |
| <i class="fas fa-play mr-2"></i> Start Transmission | |
| </button> | |
| <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"> | |
| <i class="fas fa-step-forward mr-2"></i> Single Packet | |
| </button> | |
| <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"> | |
| <i class="fas fa-redo mr-2"></i> Reset | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Panel --> | |
| <div class="transmission-box rounded-xl p-6"> | |
| <h3 class="text-xl font-bold text-yellow-300 mb-4 flex items-center"> | |
| <i class="fas fa-chart-line mr-2"></i> Mission Telemetry | |
| </h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center"> | |
| <div class="transmission-box p-3 rounded-lg"> | |
| <p class="text-sm text-blue-300 font-semibold">Packets Sent</p> | |
| <p id="sent-count" class="text-2xl font-bold">0</p> | |
| </div> | |
| <div class="transmission-box p-3 rounded-lg"> | |
| <p class="text-sm text-green-300 font-semibold">ACKs Received</p> | |
| <p id="ack-count" class="text-2xl font-bold">0</p> | |
| </div> | |
| <div class="transmission-box p-3 rounded-lg"> | |
| <p class="text-sm text-yellow-300 font-semibold">Timeouts</p> | |
| <p id="timeout-count" class="text-2xl font-bold">0</p> | |
| </div> | |
| <div class="transmission-box p-3 rounded-lg"> | |
| <p class="text-sm text-red-300 font-semibold">Packet Loss</p> | |
| <p id="loss-count" class="text-2xl font-bold">0</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 gap-4"> | |
| <div class="transmission-box p-3 rounded-lg"> | |
| <p class="text-sm text-purple-300 font-semibold">Round-Trip Time</p> | |
| <p id="rtt-value" class="text-xl font-bold">0 ms</p> | |
| </div> | |
| <div class="transmission-box p-3 rounded-lg"> | |
| <p class="text-sm text-teal-300 font-semibold">Throughput</p> | |
| <p id="throughput-value" class="text-xl font-bold">0 bps</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ Section --> | |
| <div class="mt-12 transmission-box rounded-xl p-6 relative z-10"> | |
| <h2 class="text-3xl font-bold text-orange-300 mb-6 flex items-center"> | |
| <i class="fas fa-question-circle mr-3"></i> Space Comms FAQ | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="border-b border-gray-700 pb-4"> | |
| <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg"> | |
| <span>Why use Stop-and-Wait instead of TCP in space? 🛰️</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 opacity-90 hidden"> | |
| <p>TCP's congestion control and sliding window don't play nice with high latency space links. Stop-and-Wait's simplicity means:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>No complex window size calculations</li> | |
| <li>Lower memory requirements on space hardware</li> | |
| <li>Better handling of intermittent connectivity</li> | |
| <li>Predictable behavior with known latency</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-700 pb-4"> | |
| <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg"> | |
| <span>How do satellites handle Doppler shift? 📡</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 opacity-90 hidden"> | |
| <p>Satellite systems use several techniques:</p> | |
| <div class="grid grid-cols-2 gap-2 mt-2"> | |
| <div class="bg-gray-800 bg-opacity-50 p-2 rounded"> | |
| <p class="font-semibold text-blue-300">Frequency Prediction</p> | |
| <p class="text-xs">Calculates expected shift based on orbit</p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-2 rounded"> | |
| <p class="font-semibold text-purple-300">Automatic Compensation</p> | |
| <p class="text-xs">Ground stations adjust in real-time</p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-2 rounded"> | |
| <p class="font-semibold text-green-300">Wideband Receivers</p> | |
| <p class="text-xs">Can receive across a range of frequencies</p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-2 rounded"> | |
| <p class="font-semibold text-yellow-300">Differential Encoding</p> | |
| <p class="text-xs">Encodes data as changes rather than absolute values</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-700 pb-4"> | |
| <button class="faq-btn flex justify-between items-center w-full text-left font-semibold text-lg"> | |
| <span>What's the future of space IoT? 🚀</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 opacity-90 hidden"> | |
| <div class="flex items-start"> | |
| <div class="mr-4 text-2xl text-yellow-300"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <div> | |
| <p>The next generation includes:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>Mega-constellations of small satellites</li> | |
| <li>Intersatellite laser links</li> | |
| <li>AI-driven adaptive protocols</li> | |
| <li>Quantum key distribution for security</li> | |
| <li>Integration with 5G/6G networks</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-12 text-center opacity-80 relative z-10"> | |
| <p>Made with <i class="fas fa-heart text-red-400"></i> for space communication enthusiasts</p> | |
| <p class="mt-2 text-sm">Ground Control to Major Vikram Kumar Yadav and Major Aditya Singh Gaur... your packets have been successfully received!</p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Simulation variables | |
| let sequenceNumber = 0; | |
| let sentCount = 0; | |
| let ackCount = 0; | |
| let timeoutCount = 0; | |
| let lossCount = 0; | |
| let simulationInterval; | |
| let isSimulating = false; | |
| let lastPacketTime = 0; | |
| let totalRtt = 0; | |
| let packetSize = 128; // bytes | |
| // DOM elements | |
| const simulationArea = document.getElementById('simulation-area'); | |
| const startBtn = document.getElementById('start-btn'); | |
| const stepBtn = document.getElementById('step-btn'); | |
| const resetBtn = document.getElementById('reset-btn'); | |
| const sentCountEl = document.getElementById('sent-count'); | |
| const ackCountEl = document.getElementById('ack-count'); | |
| const timeoutCountEl = document.getElementById('timeout-count'); | |
| const lossCountEl = document.getElementById('loss-count'); | |
| const rttValueEl = document.getElementById('rtt-value'); | |
| const throughputValueEl = document.getElementById('throughput-value'); | |
| const signalQualityEl = document.getElementById('signal-quality'); | |
| const delaySelect = document.getElementById('delay-select'); | |
| const errorSelect = document.getElementById('error-select'); | |
| // Update signal quality display | |
| function updateSignalQuality() { | |
| const errorRate = parseInt(errorSelect.value); | |
| let quality, snr; | |
| if (errorRate <= 5) { | |
| quality = "Excellent"; | |
| snr = "18dB"; | |
| } else if (errorRate <= 15) { | |
| quality = "Good"; | |
| snr = "12dB"; | |
| } else { | |
| quality = "Poor"; | |
| snr = "6dB"; | |
| } | |
| signalQualityEl.textContent = `${quality} (SNR: ${snr})`; | |
| } | |
| // FAQ functionality | |
| const faqBtns = document.querySelectorAll('.faq-btn'); | |
| faqBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const answer = this.nextElementSibling; | |
| const icon = this.querySelector('i'); | |
| answer.classList.toggle('hidden'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| // Simulation functions | |
| function sendPacket() { | |
| const transmissionDelay = parseInt(delaySelect.value); | |
| const errorRate = parseInt(errorSelect.value); | |
| sequenceNumber++; | |
| sentCount++; | |
| sentCountEl.textContent = sentCount; | |
| lastPacketTime = Date.now(); | |
| // Create packet element | |
| const packet = document.createElement('div'); | |
| packet.className = 'transmission-box p-4 rounded-lg mb-2'; | |
| packet.innerHTML = ` | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="text-blue-300 font-semibold">Uplink #${sequenceNumber}</div> | |
| <div class="text-xs opacity-70">${new Date().toLocaleTimeString()}</div> | |
| </div> | |
| <div class="text-sm opacity-90"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-arrow-up text-blue-300 mr-2"></i> | |
| <span>Sensor Data Packet (Seq: ${sequenceNumber % 2})</span> | |
| </div> | |
| <div class="mt-1 text-xs font-mono opacity-80"> | |
| ${generateRandomHex(16)} | |
| </div> | |
| </div> | |
| <div class="mt-2 flex items-center text-xs"> | |
| <span class="typing"></span> | |
| <span class="typing"></span> | |
| <span class="typing"></span> | |
| <span class="ml-2">Transmitting to satellite...</span> | |
| </div> | |
| `; | |
| packet.id = `packet-${sequenceNumber}`; | |
| simulationArea.appendChild(packet); | |
| simulationArea.scrollTop = simulationArea.scrollHeight; | |
| // Randomly decide if packet will be lost | |
| const isLost = Math.random() * 100 < errorRate; | |
| if (isLost) { | |
| lossCount++; | |
| lossCountEl.textContent = lossCount; | |
| setTimeout(() => { | |
| packet.innerHTML += ` | |
| <div class="mt-2 text-sm text-red-300 font-semibold flex items-center"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i> | |
| <span>Packet lost! (Signal attenuation)</span> | |
| </div> | |
| `; | |
| // Timeout after delay period | |
| setTimeout(() => { | |
| packet.innerHTML += ` | |
| <div class="mt-2 text-sm text-yellow-300 font-semibold flex items-center"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>Timeout! Resending packet...</span> | |
| </div> | |
| `; | |
| timeoutCount++; | |
| timeoutCountEl.textContent = timeoutCount; | |
| // Resend the packet | |
| setTimeout(sendPacket, 1000); | |
| }, transmissionDelay); | |
| }, transmissionDelay/2); | |
| } else { | |
| // Packet arrived successfully | |
| setTimeout(() => { | |
| packet.querySelector('.typing').parentElement.innerHTML = ` | |
| <div class="text-sm text-green-300 font-semibold flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>Packet received by satellite</span> | |
| </div> | |
| `; | |
| // Send ACK back | |
| setTimeout(sendAck, transmissionDelay/2); | |
| }, transmissionDelay/2); | |
| } | |
| } | |
| function sendAck() { | |
| const transmissionDelay = parseInt(delaySelect.value); | |
| const errorRate = parseInt(errorSelect.value); | |
| ackCount++; | |
| ackCountEl.textContent = ackCount; | |
| // Calculate RTT | |
| const rtt = Date.now() - lastPacketTime; | |
| totalRtt += rtt; | |
| const avgRtt = totalRtt / ackCount; | |
| rttValueEl.textContent = `${Math.round(avgRtt)} ms`; | |
| // Calculate throughput (simplified) | |
| const throughput = (packetSize * 8 * 1000) / avgRtt; // bits per second | |
| throughputValueEl.textContent = `${Math.round(throughput)} bps`; | |
| // Create ACK element | |
| const ack = document.createElement('div'); | |
| ack.className = 'transmission-box p-4 rounded-lg ml-8'; | |
| ack.innerHTML = ` | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="text-purple-300 font-semibold">Downlink #${sequenceNumber}</div> | |
| <div class="text-xs opacity-70">${new Date().toLocaleTimeString()}</div> | |
| </div> | |
| <div class="text-sm opacity-90"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-arrow-down text-purple-300 mr-2"></i> | |
| <span>ACK (For Seq: ${sequenceNumber % 2})</span> | |
| </div> | |
| <div class="mt-1 text-xs font-mono opacity-80"> | |
| ACK-${sequenceNumber}-${generateRandomHex(4)} | |
| </div> | |
| </div> | |
| <div class="mt-2 flex items-center text-xs"> | |
| <span class="typing"></span> | |
| <span class="typing"></span> | |
| <span class="typing"></span> | |
| <span class="ml-2">Transmitting to ground station...</span> | |
| </div> | |
| `; | |
| ack.id = `ack-${sequenceNumber}`; | |
| simulationArea.appendChild(ack); | |
| simulationArea.scrollTop = simulationArea.scrollHeight; | |
| // Randomly decide if ACK will be lost | |
| const isLost = Math.random() * 100 < errorRate; | |
| if (isLost) { | |
| lossCount++; | |
| lossCountEl.textContent = lossCount; | |
| setTimeout(() => { | |
| ack.innerHTML += ` | |
| <div class="mt-2 text-sm text-red-300 font-semibold flex items-center"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i> | |
| <span>ACK lost! (Solar interference)</span> | |
| </div> | |
| `; | |
| // Timeout after delay period | |
| setTimeout(() => { | |
| ack.innerHTML += ` | |
| <div class="mt-2 text-sm text-yellow-300 font-semibold flex items-center"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>Timeout! Resending packet...</span> | |
| </div> | |
| `; | |
| timeoutCount++; | |
| timeoutCountEl.textContent = timeoutCount; | |
| // Resend the packet | |
| setTimeout(sendPacket, 1000); | |
| }, transmissionDelay); | |
| }, transmissionDelay/2); | |
| } else { | |
| // ACK arrived successfully | |
| setTimeout(() => { | |
| ack.querySelector('.typing').parentElement.innerHTML = ` | |
| <div class="text-sm text-green-300 font-semibold flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>ACK received by ground station</span> | |
| </div> | |
| `; | |
| if (isSimulating) { | |
| // Continue simulation | |
| setTimeout(sendPacket, 1000); | |
| } | |
| }, transmissionDelay/2); | |
| } | |
| } | |
| // Helper function to generate random hex | |
| function generateRandomHex(length) { | |
| let result = ''; | |
| const characters = '0123456789ABCDEF'; | |
| for (let i = 0; i < length; i++) { | |
| result += characters.charAt(Math.floor(Math.random() * characters.length)); | |
| if ((i+1) % 4 === 0 && i !== length-1) result += ' '; | |
| } | |
| return result; | |
| } | |
| // Event listeners | |
| startBtn.addEventListener('click', function() { | |
| if (!isSimulating) { | |
| isSimulating = true; | |
| startBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause Transmission'; | |
| startBtn.classList.remove('bg-green-600'); | |
| startBtn.classList.add('bg-yellow-600', 'hover:bg-yellow-700'); | |
| sendPacket(); | |
| } else { | |
| isSimulating = false; | |
| startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Continue Transmission'; | |
| startBtn.classList.remove('bg-yellow-600'); | |
| startBtn.classList.add('bg-green-600', 'hover:bg-green-700'); | |
| } | |
| }); | |
| stepBtn.addEventListener('click', function() { | |
| if (!isSimulating) { | |
| sendPacket(); | |
| } | |
| }); | |
| resetBtn.addEventListener('click', function() { | |
| // Reset variables | |
| sequenceNumber = 0; | |
| sentCount = 0; | |
| ackCount = 0; | |
| timeoutCount = 0; | |
| lossCount = 0; | |
| isSimulating = false; | |
| totalRtt = 0; | |
| // Reset UI | |
| simulationArea.innerHTML = ` | |
| <div class="transmission-box p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="text-blue-300 font-semibold">Ground Control</div> | |
| <div class="text-xs opacity-70">System Reset</div> | |
| </div> | |
| <div class="text-sm opacity-90"> | |
| Space IoT transmission simulator initialized. Waiting for commands... | |
| </div> | |
| </div> | |
| `; | |
| sentCountEl.textContent = '0'; | |
| ackCountEl.textContent = '0'; | |
| timeoutCountEl.textContent = '0'; | |
| lossCountEl.textContent = '0'; | |
| rttValueEl.textContent = '0 ms'; | |
| throughputValueEl.textContent = '0 bps'; | |
| startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Transmission'; | |
| startBtn.classList.remove('bg-yellow-600'); | |
| startBtn.classList.add('bg-green-600', 'hover:bg-green-700'); | |
| }); | |
| // Update signal quality when error rate changes | |
| errorSelect.addEventListener('change', updateSignalQuality); | |
| // Initial signal quality update | |
| updateSignalQuality(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |