React was used to create the complete front-end user interface that acts as Impact Health commercial system for its users. The headband's sensors sends data to the Google Cloud Server API using Heroku which is then retrieved by the website and used for relevant plots and calculations. The video below shows all pages of the website which include the Dashboard, Session Data Plot, Device Settings, Alert Settings, User Profile, and General Information.
The description and function of each page is as follows:
Dashboard: Yearly/Seasonal plots with cumulative peak metrics such as acceleration, pressure, and rotation as well as a cumulative probability of concussion.
Session Data Plot: Plots the current active session and provides plots for linear acceleration, pressure, and rotational acceleration. It also provides metrics for the current session such as peak acceleration, peak pressure, peak rotation, and current probability of concussion. If the threshold for any parameters is reached, an alert will pop up to indicate the user of a high impact.
Device Settings: Allows the user to add another device or headband to their account. This includes another one of their own devices or a teammate's device to keep track of alerts.
Alert Settings: Allows the user to set-up who gets their high impact alerts as well as their phone numbers for contact in order to send an SMS text to their phone.
User Profile: Allows the user to set their user profile characteristics.
General Information: General Information about Impact Health, its goals and mission, summary of concussions in sports, feature of the device, and the team.
The following video shows the website's Session Data Plot page in action when the device is running. It plots linear acceleration, pressure and rotational acceleration. If any of the thresholds are reached, a red alert pop up will be displayed for the user to indicate a high impact situation or a high probability of concussion. It also shows peak metrics of the current active session.
Komentáře