diff --git a/software/chords/chords-web/index.rst b/software/chords/chords-web/index.rst index b66d6d2a..ff5d0cf1 100644 --- a/software/chords/chords-web/index.rst +++ b/software/chords/chords-web/index.rst @@ -8,41 +8,31 @@ 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 `_. -.. figure:: media/chords_landing_page.* +.. figure:: ./media/chords_landing_page.* :align: center - :alt: chords landing page + :alt: Chords Landing Page Features ******** - **Connection**: Effortlessly compatible with BioAmp Hardware and automatically detects the ADC of the development board running the Chords application, simplifying the setup process and ensuring a smooth and efficient workflow from data acquisition to visualization. -.. figure:: media/chords_connection.* +.. figure:: ./media/chords_connection.* :align: center - :alt: chords connection + :alt: Chords Connection - **Board Support** : We have support for Arduino UNO R3, R4 and Maker UNO. Chords should now work for other Arduino R3 clones with CH340 USB to UART Chips as well. - **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 signal flow without interruptions or lag. - **Frame Buffer Feature**: View and save up to the last five snapshots of your data. Snapshots are automatically captured per frame and can be navigated using left/right buttons. Adjusting the channel count resets snapshots for the new configuration. Plus, zoom in or out for a closer look! - **Recording**: You can record data in CSV format indefinitely or set a timer to stop recording automatically when it expires. - -.. figure:: media/chords_recording.* - :align: center - :alt: chords recording - - **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. - **Filter**: You can now add filters to biopotential signals like EMG (70 Hz) using muscles icon, ECG (30 Hz) using heart icon, EOG (10 Hz) using eye icon, EEG (45 Hz) using brain icon and master buttons to apply filters to all channels. -.. figure:: media/chords_frame_buffer.* +.. figure:: ./media/chords_filter.* :align: center - :alt: chords frame_buffer + :alt: Chords Filter - **Mode Toggle**: Offers both light and dark modes, enabling you to switch according to your preference for a more comfortable user experience. - -.. figure:: media/chords_mode_toggle.png.* - :align: center - :alt: chords mode_toggle - - **Pause/Play**: Control the data flow on the screen, and use the two additional buttons to move backward and forward through previous and next frames. - **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. @@ -96,122 +86,10 @@ Using the Software Chords Icons ************ -.. list-table:: - :widths: 1 3 - :header-rows: 1 - - * - Icons - - Description - * - .. figure:: media/chords_connect.* - :alt: chords Connect - :align: left - :width: 20px - :height: 20px - - Connect - * - .. figure:: media/chords_zoom_in.* - :alt: chords zoom in - :align: left - :width: 20px - :height: 20px - - Zoom in - * - .. figure:: media/chords_zoom_out.* - :alt: chords zoom out - :align: left - :width: 20px - :height: 20px - - Zoom out - * - .. figure:: media/chords_pause.* - :alt: chords pause - :align: left - :width: 20px - :height: 20px - - Pause - * - .. figure:: media/chords_resume.* - :alt: chords resume - :align: left - :width: 20px - :height: 20px - - Resume - * - .. figure:: media/chords_record.* - :alt: chords record - :align: left - :width: 20px - :height: 20px - - Record - * - .. figure:: media/chords_save.* - :alt: chords save - :align: left - :width: 20px - :height: 20px - - Save - * - .. figure:: media/chords_delete.* - :alt: chords delete - :align: left - :width: 20px - :height: 20px - - Delete - * - .. figure:: media/chords_plus.* - :alt: chords plus - :align: left - :width: 20px - :height: 20px - - Increase Channel - * - .. figure:: media/chords_minus.* - :alt: chords minus - :align: left - :width: 20px - :height: 20px - - Decrease Channel - * - .. figure:: media/chords_light_mode.* - :alt: chords light theme - :align: left - :width: 20px - :height: 20px - - Light Mode - * - .. figure:: media/chords_dark_mode.* - :alt: chords dark theme - :align: left - :width: 20px - :height: 20px - - Dark Mode - * - .. figure:: media/chords_muscle_icon.* - :alt: chords dark theme - :align: left - :width: 20px - :height: 20px - - Chords Muscle Icon - * - .. figure:: media/chords_brain_icon.* - :alt: chords dark theme - :align: left - :width: 20px - :height: 20px - - Chords Brain Icon - * - .. figure:: media/chords_heart.* - :alt: chords dark theme - :align: left - :width: 20px - :height: 20px - - Chords Heart - * - .. figure:: media/chords_eye.* - :alt: chords dark theme - :align: left - :width: 20px - :height: 20px - - Chords Eye - * - .. figure:: media/chords_arrow_left.* - :alt: chords dark theme - :align: left - :width: 20px - :height: 20px - - Previous Arrow - * - .. figure:: media/chords_arrow_forward.* - :alt: chords dark theme - :align: left - :width: 20px - :height: 20px - - Forward Arrow - - +.. figure:: ./media/chords_icons.* + :align: center + :alt: Chords Icons + .. _chords-browsers-compatibility: Browser Compatibility @@ -230,21 +108,99 @@ For more information, refer to MDN Web Docs on the `Web Serial API \ No newline at end of file diff --git a/software/chords/media/chords_tech_stack.png b/software/chords/chords-web/media/chords_tech_stack.png similarity index 100% rename from software/chords/media/chords_tech_stack.png rename to software/chords/chords-web/media/chords_tech_stack.png diff --git a/software/chords/media/chords_tech_stack2.png b/software/chords/chords-web/media/chords_tech_stack2.png similarity index 100% rename from software/chords/media/chords_tech_stack2.png rename to software/chords/chords-web/media/chords_tech_stack2.png diff --git a/software/chords/chords-web/media/chords_webgl_plot.svg b/software/chords/chords-web/media/chords_webgl_plot.svg new file mode 100644 index 00000000..b9d45c0c --- /dev/null +++ b/software/chords/chords-web/media/chords_webgl_plot.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/software/chords/index.rst b/software/chords/index.rst deleted file mode 100644 index 38c28a36..00000000 --- a/software/chords/index.rst +++ /dev/null @@ -1,197 +0,0 @@ -.. _chords: - -Getting Started -################# - -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 `_. - -.. figure:: media/chords_landing_page.* - :align: center - :alt: chords landing page - -Features -******** -- **Connection**: Effortlessly compatible with BioAmp Hardware and automatically detects the ADC of the development board running the Chords application, 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 signal flow without interruptions or lag. -- **Frame Buffer Feature**:View and save up to the last five snapshots of your data. Snapshots are automatically captured per frame and can be navigated using left/right buttons. Adjusting the channel count resets snapshots for the new configuration. Plus, zoom in or out for a closer look! -- **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. -- **Filter**: You can now add filters to biopotential signals like EMG (70 Hz) using muscles icon, ECG (30 Hz) using heart icon, EOG (10 Hz) using eye icon, EEG (45 Hz) using brain icon and master buttons to apply filters to all channels. -- **Mode Toggle**: Offers both light and dark modes, enabling you to switch according to your preference for a more comfortable user experience. -- **Pause/Play**: Control the data flow on the screen, and use the two additional buttons to move backward and forward through previous and next frames. -- **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 install `Chords Arduino Firmware `_ using arduino IDE. -* For now Chords is compatible with chromium based browsers. To ensure compatibility with supported browsers, see :ref:`chords-browsers-compatibility`. - -Hardware Requirements -********************* -To use Chords, you need: - -- Compatible Development Board : Arduino Uno R3, R4 Minima and Maker Uno. -- A USB cable (type depends on board) -- BioAmp Hardware : - - - `BioAmp EXG Pill `_ - - `Muscle BioAmp Biscute `_ - - `Muscle BioAmp Candy `_ - - `Muscle BioAmp Patchy `_ - - `Muscle BioAmp Shield `_ - - -How to Use Chords -******************* - -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 under `Board > Arduino AVR` in the tools menu. -4. Choose the correct COM port in the tools menu (the one that disappears when you disconnect the board). -5. Upload the code and open Chords in your web browser. - - -Using the Software ------------------- - -1. Click the ``Connect`` button to establish a connection with the Arduino and start streaming. -2. Use the ``Zoom in/out`` button to adjust the data visualization. -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. Add ``Filter`` button for EMG, ECG, EOG, and EEG filters with ``muscle``, ``heart``, ``eye``, and ``brain`` icons or master buttons for all channels. -8. Adjust the number of channels by using the ``Plus/Minus`` buttons. - -Chords Icons -************ - -.. list-table:: - :widths: 1 3 - :header-rows: 1 - - * - Icons - - Description - * - .. figure:: media/chords_connect.* - :alt: chords Connect - :align: left - :width: 20px - :height: 20px - - Connect - * - .. figure:: media/chords_zoom_in.* - :alt: chords zoom in - :align: left - :width: 20px - :height: 20px - - Zoom in - * - .. figure:: media/chords_zoom_out.* - :alt: chords zoom out - :align: left - :width: 20px - :height: 20px - - Zoom out - * - .. figure:: media/chords_pause.* - :alt: chords pause - :align: left - :width: 20px - :height: 20px - - Pause - * - .. figure:: media/chords_resume.* - :alt: chords resume - :align: left - :width: 20px - :height: 20px - - Resume - * - .. figure:: media/chords_record.* - :alt: chords record - :align: left - :width: 20px - :height: 20px - - Record - * - .. figure:: media/chords_save.* - :alt: chords save - :align: left - :width: 20px - :height: 20px - - Save - * - .. figure:: media/chords_delete.* - :alt: chords delete - :align: left - :width: 20px - :height: 20px - - Delete - * - .. figure:: media/chords_plus.* - :alt: chords plus - :align: left - :width: 20px - :height: 20px - - Increase Channel - * - .. figure:: media/chords_minus.* - :alt: chords minus - :align: left - :width: 20px - :height: 20px - - Decrease Channel - * - .. figure:: media/chords_light_mode.* - :alt: chords light theme - :align: left - :width: 20px - :height: 20px - - Light Mode - * - .. figure:: media/chords_dark_mode.* - :alt: chords dark theme - :align: left - :width: 20px - :height: 20px - - Dark Mode - - - -.. _chords-browsers-compatibility: - -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. - -.. figure:: media/chords_tech_stack.* - :align: center - :alt: chords tech stack - - - - -In earlier versions of the application, selecting the COM port was necessary each time you connected to your development board. Now imagine connecting your device effortlessly—no repetitive setup required. With the capability of Direct Device Connection, your previously connected devices are now saved in local storage. This means you can start visualising the biopotential signals instantly without the need to reselect the board. - -We have removed repetitive COM port selection process! So any previously connected devices are saved in local storage, allows you to just click on connect button & start visualising biopotential signals instantly. - - - diff --git a/software/chords/media/chords_arrow_forward.png b/software/chords/media/chords_arrow_forward.png deleted file mode 100644 index 2799c0f7..00000000 Binary files a/software/chords/media/chords_arrow_forward.png and /dev/null differ diff --git a/software/chords/media/chords_arrow_left.png b/software/chords/media/chords_arrow_left.png deleted file mode 100644 index 9ff1a9c0..00000000 Binary files a/software/chords/media/chords_arrow_left.png and /dev/null differ diff --git a/software/chords/media/chords_brain_icon.png b/software/chords/media/chords_brain_icon.png deleted file mode 100644 index f4c3e1d0..00000000 Binary files a/software/chords/media/chords_brain_icon.png and /dev/null differ diff --git a/software/chords/media/chords_connect.png b/software/chords/media/chords_connect.png deleted file mode 100644 index c98e9885..00000000 Binary files a/software/chords/media/chords_connect.png and /dev/null differ diff --git a/software/chords/media/chords_dark_mode.png b/software/chords/media/chords_dark_mode.png deleted file mode 100644 index 8965b93a..00000000 Binary files a/software/chords/media/chords_dark_mode.png and /dev/null differ diff --git a/software/chords/media/chords_delete.png b/software/chords/media/chords_delete.png deleted file mode 100644 index 03d8adeb..00000000 Binary files a/software/chords/media/chords_delete.png and /dev/null differ diff --git a/software/chords/media/chords_eye.png b/software/chords/media/chords_eye.png deleted file mode 100644 index 33311d49..00000000 Binary files a/software/chords/media/chords_eye.png and /dev/null differ diff --git a/software/chords/media/chords_frame_buffer.png b/software/chords/media/chords_frame_buffer.png deleted file mode 100644 index 3744400b..00000000 Binary files a/software/chords/media/chords_frame_buffer.png and /dev/null differ diff --git a/software/chords/media/chords_heart.png b/software/chords/media/chords_heart.png deleted file mode 100644 index 841ef9e6..00000000 Binary files a/software/chords/media/chords_heart.png and /dev/null differ diff --git a/software/chords/media/chords_landing_page2.png b/software/chords/media/chords_landing_page2.png deleted file mode 100644 index 0e7c0416..00000000 Binary files a/software/chords/media/chords_landing_page2.png and /dev/null differ diff --git a/software/chords/media/chords_light_mode.png b/software/chords/media/chords_light_mode.png deleted file mode 100644 index 6897fb82..00000000 Binary files a/software/chords/media/chords_light_mode.png and /dev/null differ diff --git a/software/chords/media/chords_minus.png b/software/chords/media/chords_minus.png deleted file mode 100644 index 846e4727..00000000 Binary files a/software/chords/media/chords_minus.png and /dev/null differ diff --git a/software/chords/media/chords_muscle_icon.png b/software/chords/media/chords_muscle_icon.png deleted file mode 100644 index 96f412d5..00000000 Binary files a/software/chords/media/chords_muscle_icon.png and /dev/null differ diff --git a/software/chords/media/chords_pause.jpg b/software/chords/media/chords_pause.jpg deleted file mode 100644 index 8c05113a..00000000 Binary files a/software/chords/media/chords_pause.jpg and /dev/null differ diff --git a/software/chords/media/chords_plus.png b/software/chords/media/chords_plus.png deleted file mode 100644 index 1d5952f9..00000000 Binary files a/software/chords/media/chords_plus.png and /dev/null differ diff --git a/software/chords/media/chords_record.png b/software/chords/media/chords_record.png deleted file mode 100644 index 6b7d0b60..00000000 Binary files a/software/chords/media/chords_record.png and /dev/null differ diff --git a/software/chords/media/chords_resume.png b/software/chords/media/chords_resume.png deleted file mode 100644 index dd35f101..00000000 Binary files a/software/chords/media/chords_resume.png and /dev/null differ diff --git a/software/chords/media/chords_save.png b/software/chords/media/chords_save.png deleted file mode 100644 index a6625be0..00000000 Binary files a/software/chords/media/chords_save.png and /dev/null differ diff --git a/software/chords/media/chords_zoom_in.png b/software/chords/media/chords_zoom_in.png deleted file mode 100644 index 43c6ffb9..00000000 Binary files a/software/chords/media/chords_zoom_in.png and /dev/null differ diff --git a/software/chords/media/chords_zoom_out.png b/software/chords/media/chords_zoom_out.png deleted file mode 100644 index b6261ddd..00000000 Binary files a/software/chords/media/chords_zoom_out.png and /dev/null differ