RTSA UI 

This project was developed for a company called Consilia Brno Inc. The name of this project, RTSA UI, stands for Real-time Spectral Analysis User Interface, which accurately describes the nature of the final product that we were supposed to deliver.

Main workflow

A dedicated measuring device sends the results of spectral analysis in an appropriate form to the web user interface together with the necessary metadata. Communication between the UI and the device takes place via a proprietary protocol based on WebSockets and the JSON serialization format. The web user interface renders incoming data into line charts in real time.

Development

This application was developed using TypeScript and the following libraries:

• React (componentization and rendering UI)

• Konva (graph rendering on Canvas)

• hammer.js (touch control)

• Recoil (state management)

• Kefir (reactive propagation of data from API through UI)

• react-hook-form (form monitoring and validation)

The main focus was on the user being able to display and manipulate a visualized signal in real time as efficiently as possible. By manipulation we mean zooming in and out, scrolling, and requesting changes of the frequency range from the measuring device. The application was developed for both desktop and mobile devices, where the user can intuitively manipulate the chart by touch and gestures.

Process point of view

Considering we were developing the very first version of the application, we needed to make sure that we were going in the right direction. We achieved that by working in an agile way where we delivered increments of the product on a weekly basis and demonstrated them to the client. After the demo, the client could give us feedback as well as request changes or new features. Together we managed to deliver the final product, including all newly introduced changes and features, in accordance with the initial vision.