-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgss.html
207 lines (189 loc) · 9.31 KB
/
gss.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
<!DOCTYPE HTML>
<!--
Spectral by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Ground Station Software</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="landing is-preload">
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1><a href="index.html">Aryaman Dwivedi</a></h1>
<nav id="nav">
<ul>
<li class="special">
<a href="#menu" class="menuToggle"><span>Menu</span></a>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="index.html#one-point-five">Projects</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
<!-- Main -->
<section id="banner">
<div class="inner">
<h2>Ground Station Software</h2>
</div>
<a href="#content" class="more scrolly">Learn More</a>
</section>
<article id="main">
<!-- <header>
<h2>Ground Station Software</h2>
<a href="#content" class="more scrolly">Learn More</a>
</header> -->
<section id="content" class="wrapper style5">
<div class="inner">
<h3>Purpose</h3>
<p>
When I initially joined the telemetry team, I discovered that we were relying on a Commercial Off-The-Shelf (COTS)
solution for real-time flight data monitoring. Recognizing the potential for greater value,
I advocated for the development of a custom software solution. By leveraging my expertise in web development,
we were able to build a custom software application that not only enabled real-time data monitoring
but also allowed us to leverage information from additional sensors in our avionics stack. This customization provided us
with a unique advantage, offering a tailored and comprehensive view of the data, leading to enhanced
insights.
</p>
<p>
Hence, Ground Station Software was born.
</p>
<center>
<video autoplay muted loop>
<source src="images/gss-irec-2023.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
</center>
<hr />
<h3>Technology</h3>
<h4>
Front-end Development
</h4>
<p>
Based on my past experiences and after considering the available options,
it became evident that developing a Node.js-based solution was the most suitable choice.
Node.js, with its extensive library ecosystem, provided the ideal platform to leverage a wide
range of powerful tools and functionalities.
</p>
<p>
For the front-end, I used Electron.js, a framework for building cross-platform desktop applications with web technologies.
Using Electron allowed me to leverage my existing knowledge of web development, which made the development process much more efficient.
Electron also allowed me to use TypeScript, a superset of JavaScript that adds static typing to the language.
The main advantage for using this framework, was its ability to run on multiple platforms, including Windows, macOS, and Linux.
In addition, we laid the foundation for allowing GSS to run on a web server, which would allow us to access the software from anywhere,
including mobile devices and tablets.
</p>
<p>
In an era of numerous advanced frameworks for user interface and design, I made a deliberate choice to adopt a
more traditional approach using HTML and CSS. By utilizing these foundational technologies, I ensured a solid
and reliable foundation for the interface. To strike a balance between customization and efficiency, I
incorporated Bootstrap and custom SASS. This combination allowed us to achieve maximum flexibility and tailor
the interface to our specific needs, while also leveraging existing solutions and avoiding unnecessary reinvention
of the wheel. The result was a visually appealing and highly intuitive interface that effectively met our requirements.
</p>
<p>
In the COTS solution, while location data acquisition was present, it had its limitations.
To enhance the map functionality, I integrated Leaflet.js, an open-source JavaScript library
known for its user-friendly and interactive mapping capabilities. Leveraging the power of Leaflet.js,
I was able to create a dynamic and visually appealing map interface that allowed users to explore and
interact with location data seamlessly. This addition greatly enhanced the overall recovery process of our rocket and
provided a more comprehensive visualization of the transmitted location data.
</p>
<center>
<video style="width:75vmin;" autoplay muted loop>
<source src="images/gps-demo.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
</center>
<hr />
<h4>
Rocket Avionics Software
</h4>
<p>
Ground Station Software is primarily a web application, but to make it work,
we also needed to make some additions to the telemetry side of the rocket, which is in C++. This included
making our own packet structure to hold the vital information about our rocket such as sensor data,
battery voltage, and FSM state. We also added the ability to receive commands from the ground station,
such as changing the radio frequency or the call sign of the operator.
</p>
</div>
</section>
</article>
<!-- Footer -->
<footer id="footer">
<ul class="icons">
<li><a href="https://www.github.com/ary-dz" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://www.linkedin.com/in/ary-dz" class="icon brands fa-linkedin"><span class="label">LinkedIn</span></a></li>
<!-- <li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li> -->
<li><a href="mailto:dwivedi6@illinois.edu" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
</ul>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
<style>
body.is-mobile.landing #banner,
body.is-mobile.landing .wrapper.style4 {
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/gss-banner.jpg");
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/gss-banner.jpg");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/gss-banner.jpg");
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/gss-banner.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body.landing #page-wrapper {
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/gss-banner.jpg");
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/gss-banner.jpg");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/gss-banner.jpg");
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/gss-banner.jpg");
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 0;
}
#main > header {
padding: 12em 0 10em 0 ;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/gss-banner.jpg");
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/gss-banner.jpg");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/gss-banner.jpg");
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/gss-banner.jpg");
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
video {
/* position: absolute; */
/* z-index: -1; */
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>