Ground Station UI
The ground control system UI for the CUInSpace rocket.
Overview
The Ground Station UI presents an innovative approach to monitoring telemetry data. Designed specifically for CUInSpace's telemetry backend, this React application seamlessly integrates with a Python ground station via web sockets. With a clean and intuitive interface, users can easily track live data related to rocket launches, making it an essential tool for both students and aerospace enthusiasts.
This application not only showcases real-time data but also enhances user experience with dynamic visual components. The combination of modern web technology and telemetry functionalities makes the Ground Station UI a noteworthy solution for those involved in aerospace operations.
Features
- Dynamic Scatter Plots: Visualize altitude and IMU data over time, offering insightful analytics at a glance.
- Live Gauges: Display current readings of temperature, pressure, and humidity, essential for real-time environmental monitoring.
- Command Palette: Enhance usability with an intuitive command palette that simplifies interaction within the launch console.
- 2D Satellite Imagery Map: Track the rocket's location on a straightforward 2D map, allowing for easy navigation and monitoring (Coming soon).
- 3D Satellite Imagery Map: An upcoming feature that will provide an immersive view of the rocket's location and altitude, elevating the tracking experience.
- Easy Installation: Deploy quickly with a comprehensive setup process, utilizing modern technologies like Node or Bun.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- rocket
Rocket is a lightweight static site generator that emphasizes simplicity and performance. It avoids unnecessary tools and frontend frameworks, defaults to zero JavaScript, and offers automatic code splitting and filesystem-based routing for fast development.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- cmdk
cmdk is a fast, composable command menu component for React. It provides the foundation for building command palettes, search interfaces, and keyboard-navigable menus similar to those found in applications like VS Code, Linear, and Raycast.
- Dashboard
A dashboard style website template is a pre-designed layout that features a user interface resembling a control panel or dashboard. It typically includes charts, graphs, tables, and other data visualization tools that allow users to monitor and analyze data in real-time.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.