Giter VIP home page Giter VIP logo

ground-station-ui's Introduction

Ground Station UI

CUInSpace

License: MIT

Visualizes real-time telemetry data from the CUInSpace rocket. Telemetry data is parsed by the Python backend and sent over websocket as JSON to the frontend.

Dashboard Preview

Dashboard Preview (outdated image but it looks similar)

Overview

The dashboard visualizes data on different charts using Apache ECharts. Temperature, pressure, velocity and altitude are displayed among other indicators. Flight time is tracked using the mission timer component.

The UI fundamentally makes use of a websocket connection to the Python backend, which sends telemetry data in real-time as it receives it from the rocket transmission chip. This data is sent in JSON format, where it is unpacked and displayed in chart components.

Please see websocket.json for an example of incoming data.

The dashboard also has capacity to replay recorded mission data for simulation and analysis purposes. A control panel with stop, start and replay commands is available using the key command Shift + C. Various other keyboard commands are being implemented to allow for direct communication with the rocket's telemetry chip.

Control Panel

The dashboard attempts re-connection to the websocket automatically, and displays that there has been a connection issue in the dashboard header. A set of historical data from each telemetry category is kept in local storage in order to maintain a static display of the most recently received data when connection becomes unstable.

Technologies

  • HTML
  • CSS
  • ReactJS
  • NodeJS
  • Python (backend)

Libraries

Installation

https://github.com/CarletonURocketry/ground-station Install ground-station-ui with npm

  git clone https://github.com/CarletonURocketry/ground-station-ui.git
  cd ground-station-ui
  npm install
  npm run start

ground-station is required to visualize replays

Documentation

Please visit the repository's wiki to view the documentation for this project.

Contribution

To contribute to this project, please view the contribution guidelines on the repository's wiki.

Contributors

  • Matteo Golin
  • Hamnah Qureshi
  • Grant Achuzia
  • Ryan Diep
  • Eshan Betrabet

ground-station-ui's People

Contributors

gachuzia avatar hamnahq avatar linguini1 avatar ryan-diep avatar wildildee avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

ground-station-ui's Issues

Remove clr_storage button from UI

Problem

The clear storage button was used as a debug tool to clear the local storage. It is really ugly and should not be exposed to end users.

Solution

Remove it.

Add flashing display for anomalies

If an altitude/pressure, etc. measurement is beyond the acceptable range for our test conditions, there should be some kind of warning indication on the graphs as well as on the main page.

Ideally, a graph will have some sort of red/warning colour for the text or display when measurements are bad that is easy to notice.

A CSS class should be created for the dashboard panels to make the edges glow red when one or more measurements are anomalous.

Clear local storage

Ideally, should be a button somewhere that calls the clear_telemetry function for debugging. Will be removed on production build.

Currently, local storage does not get cleared on reload (and it won't during the final product either, because if the connection gets interrupted, we don't want to lose historical data).

This is not a problem for production because live sensor data will more or less pick up where it left off. Right now, when the websocket restarts, it returns to it's initial data values and starts incrementing again. This is not good for testing because it means the charts will not appear to update until we wait a sufficient amount of time to catch up with where we last left off. Clearing local storage will fix this.

Display coordinates on an offline map

We currently have a map page which is updated with the live GPS location of our rocket, but it requires an internet connection. If we could host our own map tiling server, that would be optimal.

Click and drag reordering of dashboard panels

Currently the location of all graph panels on our dashboard are set in stone. It would be better if they could be reordered through a click-and-drag interface so that each individual user of the dashboard can prioritize the information they want to see.

A few considerations:

  • The panel widths are dynamic right now. If click-and-drag is implemented, it should have a sensible minimum width (or perhaps a width based on the style of the graph; i.e. time series graphs are longer)
  • The panel being reordered should have some kind of visual indicator that it is being reordered (like a slightly transparent rendering of the panel which follows the cursor while it's dragged)
  • The graph should continue to update whilst being dragged.

Jittery graphs

The graphs currently being used for the dashboard are from the Apache eCharts library. These graphs are not optimized to keep up with the speed at which telemetry data is provided (especially noticeable when playing missions back at more than 1x speed).

As a solution, a new chart library was suggested by @SippinOnJuiceBox, which has been optimized for fast data changes. You can find it here.

It would be good to transition all current graphs to this format.

Automatic documentation generation

This project is written in JavaScript (and already has docstrings written using JavaDoc style). There should be a GitHub workflow which automatically generates a static documentation website using JavaDoc and deploys it to this repository's GitHub pages.

Create issue templates

There should be issue templates for new members to format their issues & also a guideline for PR templates.

Include dropdown of available COM ports

Problem

The telemetry server on the ground-station repo is able to provide a list of available COM ports in its websocket JSON data. This is necessary for starting the server connection to the ground station board using the websocket commend serial rn2483_radio connect <COMx>.

Proposed solution

Currently, the UI does not have a way to send this initial connection command. A list of available COM ports should be added so that when a user selects one, it sends the websocket command for connecting to the serial port. After this command, the selection menu could disappear until brought up again (should user be able to bring it up, should it only be brought up initially, should it be brought up every time connection is severed with the telemetry server?).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.