Skip to content

[Assignment] Satellite Telemetry Dashboard #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
urvitas25486-cmyk wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[Assignment] Satellite Telemetry Dashboard #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 173 additions & 0 deletions urvitas-assignment/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Satellite Telemetry Dashboard - SAST CubeSat</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh; padding: 20px;
}
.container { max-width: 1200px; margin: 0 auto; }
header { text-align: center; color: white; margin-bottom: 30px; }
header h1 { font-size: 2.5rem; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
header p { font-size: 1.1rem; opacity: 0.9; }
.dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.chart-card {
background: white; border-radius: 10px; padding: 20px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.chart-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); }
.chart-card h2 { color: #333; margin-bottom: 15px; font-size: 1.3rem; }
.chart-wrapper { position: relative; height: 300px; }
.data-table-container {
grid-column: 1 / -1; background: white; border-radius: 10px;
padding: 20px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.data-table-container h2 { color: #333; margin-bottom: 15px; font-size: 1.3rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e0e0e0; }
th { background-color: #667eea; color: white; font-weight: 600; }
tr:hover { background-color: #f5f5f5; }
@media (max-width: 768px) {
.dashboard { grid-template-columns: 1fr; }
header h1 { font-size: 1.8rem; }
.chart-wrapper { height: 250px; }
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Satellite Telemetry Dashboard</h1>
<p>SAST CubeSat - Real-time Data Visualization</p>
</header>

<div class="dashboard">
<div class="chart-card">
<h2>Temperature vs Time</h2>
<div class="chart-wrapper">
<canvas id="temperatureChart"></canvas>
</div>
</div>

<div class="chart-card">
<h2>Voltage vs Time</h2>
<div class="chart-wrapper">
<canvas id="voltageChart"></canvas>
</div>
</div>

<div class="data-table-container">
<h2>Telemetry Data Table</h2>
<table>
<thead>
<tr>
<th>Timestamp</th>
<th>Temperature (C)</th>
<th>Voltage (V)</th>
</tr>
</thead>
<tbody id="dataTableBody"></tbody>
</table>
</div>
</div>
</div>

<script>
const telemetryData = [
{ "time": "10:00", "temp": 23, "voltage": 3.7 },
{ "time": "10:10", "temp": 24, "voltage": 3.6 },
{ "time": "10:20", "temp": 25, "voltage": 3.6 },
{ "time": "10:30", "temp": 24.5, "voltage": 3.5 },
{ "time": "10:40", "temp": 26, "voltage": 3.7 },
{ "time": "10:50", "temp": 27, "voltage": 3.4 },
{ "time": "11:00", "temp": 28, "voltage": 3.3 },
{ "time": "11:10", "temp": 27.5, "voltage": 3.5 }
];

const times = telemetryData.map(d => d.time);
const temps = telemetryData.map(d => d.temp);
const voltages = telemetryData.map(d => d.voltage);

const tempCtx = document.getElementById('temperatureChart').getContext('2d');
new Chart(tempCtx, {
type: 'line',
data: {
labels: times,
datasets: [{
label: 'Temperature (C)',
data: temps,
borderColor: '#ff6b6b',
backgroundColor: 'rgba(255, 107, 107, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.4,
pointBackgroundColor: '#ff6b6b',
pointBorderColor: '#fff',
pointBorderWidth: 2,
pointRadius: 5,
pointHoverRadius: 7
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: true, labels: { usePointStyle: true, padding: 15, font: { size: 12 } } }
},
scales: {
y: { beginAtZero: false, ticks: { font: { size: 11 } } },
x: { ticks: { font: { size: 11 } } }
}
}
});

const voltageCtx = document.getElementById('voltageChart').getContext('2d');
new Chart(voltageCtx, {
type: 'line',
data: {
labels: times,
datasets: [{
label: 'Voltage (V)',
data: voltages,
borderColor: '#4ecdc4',
backgroundColor: 'rgba(78, 205, 196, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.4,
pointBackgroundColor: '#4ecdc4',
pointBorderColor: '#fff',
pointBorderWidth: 2,
pointRadius: 5,
pointHoverRadius: 7
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: true, labels: { usePointStyle: true, padding: 15, font: { size: 12 } } }
},
scales: {
y: { beginAtZero: false, ticks: { font: { size: 11 } } },
x: { ticks: { font: { size: 11 } } }
}
}
});

const tableBody = document.getElementById('dataTableBody');
telemetryData.forEach(data => {
const row = tableBody.insertRow();
row.insertCell(0).textContent = data.time;
row.insertCell(1).textContent = data.temp.toFixed(1);
row.insertCell(2).textContent = data.voltage.toFixed(1);
});
</script>
</body>
</html>