Chords-Web#

Overview#

Chords is an open source web application designed for real-time signal visualization, particularly tailored for bio-potential signals like EEG, EMG, ECG and EOG. This tool serves as an advanced alternative to the standard Arduino IDE serial plotter, offering enhanced functionality for students, researchers and hobbyists alike who want to record biopotential data using BioAmp hardware.

chords landing page

chords landing page#

Features#

  • Connection: It is effortlessly compatible with BioAmp Hardware attached to an Arduino-compatible development board running the Chords Arduino firmware, simplifying the setup process and ensuring a smooth and efficient workflow from data acquisition to visualization.

  • Real-time Visualization: Experience smooth real-time visualization of incoming data rendered with WebGL-Plot. The system ensures smooth signal display, helping you monitor the flow without interruptions or lag.

  • Recording: You can record data in CSV format indefinitely or set a timer to stop recording automatically when it expires.

  • Download/Delete: Easily download or delete recorded data with just a few clicks. Manage your data efficiently, allowing for quick access to relevant data or removal of unwanted data to free up storage.

  • Zoom: Zoom-in and zoom-out feature, gives you more control as now you can either zoom in to look at signal or zoom out for an overall view.

  • Theme Toggle: Offers both light and dark themes, enabling you to switch according to your preference for a more comfortable user experience.

  • Pause/Play: Includes options to freeze and resume data display, allowing users to pause the visualization for detailed examination and then continue data monitoring seamlessly.

  • Channel: Supports plotting of up to six channels of data simultaneously in real time where each stream is color-coded differently for easy identification.

  • Disconnect: Terminate the connection to the development board with a simple click. This functionality ensures a hassle-free disconnection process when you’re done with data collection or visualization.

Software Requirements#

  • You have to flash Chords Arduino Firmware to your Arduino board using Arduino IDE.

  • For now the Chords web application is only compatible with Chromium-based browsers. To check your browser compatibility, see Browser Compatibility section of this page.

Hardware Requirements#

To use Chords-Web, you need:

How to Use Chords-Web#

Uploading the Code#

  1. Connect the Arduino board to your laptop using the USB cable.

  2. Copy and paste the Arduino Firmware into the Arduino IDE.

  3. Select your board from Board section in the tools menu.

  4. Choose the correct COM port in the tools menu (the one that disappears when you disconnect the board).

  5. Click on the Upload button to flash your Arduino board.

Now, you are ready to use Chords.

Using the Software#

  1. Click the Connect button to establish a connection with the Arduino and start streaming.

  2. Use the Play/Pause button to control the data stream.

  3. Click the Record button to start recording data into a CSV file.

  4. To save the recorded data, click the Download button.

  5. Click the Delete button to remove recorded data.

  6. Change the mode using the Mode button which is present in the navbar.

  7. Use the Zoom in/out button to adjust the data visualization.

  8. Adjust the number of channels by using the Plus/Minus buttons.

Chords Icons#

Icons

Description
chords Connect

Connect
chords zoom in

Zoom in
chords zoom out

Zoom out
chords pause

Pause
chords resume

Resume
chords record

Record
chords save

Save
chords delete

Delete
chords plus

Increase Channel
chords minus

Decrease Channel
chords light theme

Light Mode
chords dark theme

Dark Mode

Browser Compatibility#

The web application is compatible with the Web Serial API, which is essential for its functionality. Supported browsers include the latest versions of:

  • Google Chrome

  • Microsoft Edge

  • Opera

If the user’s browser does not support the Web Serial API, a message will inform them of the incompatibility, recommending the use of a supported browser.

For more information, refer to MDN Web Docs on the Web Serial API.

Technologies Used#

  • Next.js: A framework built on top of React.js.

  • Web Serial API: API for serial communication with devices.

  • Tailwind CSS: Utility-first CSS framework.

  • Shadcn UI: Reusable and customizable components, built with Radix UI.

  • WebGL Plot: Real-time charting library.

  • IndexedDB API: Browser-based database for storing recorded data.

chords tech stack

chords tech stack#