Merge pull request #56 from Ritika8081/main

Updated Chords web documentation

software/chords/chords-web/index.rst

@@ -1,162 +1,86 @@
 .. _chords:
 
 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 <https://docs.upsidedownlabs.tech/hardware/index.html>`_.
+Chords-Web 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 <https://docs.upsidedownlabs.tech/hardware/index.html>`_.
 
-.. figure:: ../media/chords_landing_page.*
+.. figure:: ./media/chords_landing_page.*
     :align: center
-    :alt: chords landing page
-
-    chords landing page
-
+    :alt: Chords-Web Landing Page
 
 Features
 ********
+- **Connection**: Effortlessly compatible with BioAmp Hardware and automatically detects the development board running the Chords-Web Arduino Firmware, simplifying the setup process and ensuring a smooth and efficient workflow from data acquisition to visualization.
+
+.. figure:: ./media/chords_connection.*
+    :align: center
+    :alt: Chords-Web Connection
 
-- **Connection**: It is effortlessly compatible with BioAmp Hardware attached to an Arduino-compatible development board running the `Chords Arduino firmware <https://github.com/upsidedownlabs/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 <https://github.com/danchitnis/webgl-plot>`_. The system ensures smooth signal display, helping you monitor the flow without interruptions or lag.
+- **Board Support** : You can check out `Compatible Development Board <https://github.com/upsidedownlabs/Chords-Arduino-Firmware>`_.
+- **Real-time Visualization**: Experience smooth real-time visualization of incoming data rendered with `WebGL-Plot <https://github.com/danchitnis/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.
+- **Download/Delete**: You can manage recorded files more efficiently with a popover menu to download or delete individual files stored in IndexedDB. Additionally, buttons to download all files as a ZIP or delete them in one click.
 - **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.
+- **Filter**: You can easily enhance biopotential signal quality with intuitive filter controls. select the muscle icon to apply a 70 Hz high-pass filter for EMG signals, improving their clarity. For ECG signals, click the heart icon to activate a 30 Hz low-pass filter for accurate heart rhythm visualization. The eye icon applies a 10 Hz low-pass filter to EOG signals, reducing high-frequency noise, while the brain icon enables a 45 Hz low-pass filter to enhance EEG signal analysis. Use the master button to apply these filters across all channels.
+
+.. figure:: ./media/chords_filter.*
+    :align: center
+    :alt: Chords-Web Filter
+
+- **Channel**: Supports plotting of multiple 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 <https://github.com/upsidedownlabs/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 :ref:`chords-browsers-compatibility` section of this page.
+* You have to flash `Chords-Web Arduino Firmware <https://github.com/upsidedownlabs/Chords-Arduino-Firmware>`_ to your development board using Arduino IDE.
+* For now Chords-Web is compatible with chromium based browsers. To ensure compatibility with supported browsers, see :ref:`chords-browsers-compatibility`.
 
 Hardware Requirements
 *********************
 
-To use Chords-Web, you need:
-
-- Compatible Development Board : Arduino Uno R3 And R4 Minima
+- `Compatible Development Board <https://github.com/upsidedownlabs/Chords-Arduino-Firmware>`_
 - A USB cable (type depends on board)
-- BioAmp Hardware : 
-
-  - `BioAmp EXG Pill <https://docs.upsidedownlabs.tech/hardware/bioamp/bioamp-exg-pill/index.html>`_
-  - `Muscle BioAmp Biscute <https://docs.upsidedownlabs.tech/hardware/bioamp/muscle-bioamp-biscute/index.html>`_
-  - `Muscle BioAmp Candy <https://docs.upsidedownlabs.tech/hardware/bioamp/muscle-bioamp-candy/index.html>`_
-  - `Muscle BioAmp Patchy <https://docs.upsidedownlabs.tech/hardware/bioamp/muscle-bioamp-patchy/index.html>`_
-  - `Muscle BioAmp Shield <https://docs.upsidedownlabs.tech/hardware/bioamp/muscle-bioamp-shield/index.html>`_
+- :ref:`BioAmp Hardware <upsidedownlabs_hardware_home>`
 
 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  <https://github.com/upsidedownlabs/Chords-Arduino-Firmware>`_ into the Arduino IDE.
-3. Select your board from `Board` section in the tools menu.
+2. Copy and paste the `Arduino Firmware  <https://github.com/upsidedownlabs/Chords-Arduino-Firmware>`_  for your board into the Arduino IDE.
+3. Select your board under `Tools > Board`.
 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.
+5. Upload the code and open Chords-Web in your web browser.
 
-Now, you are ready to use `Chords <https://chords.upsidedownlabs.tech/stream>`_.
 
 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.
+2. Use the ``ZoomIn/ZoomOut`` button to adjust the data visualization.
+3. Use the ``Play/Pause`` button to control the data stream. Navigate the last five snapshots with the ``Left/Right`` buttons in the Frame Buffer feature.
+4. Click the ``Record`` button to start recording data into a CSV file.
+5. To save the recorded data, click the ``Download`` button.
+6. Click the ``Delete`` button to remove recorded data.
+7. Click ``Filter`` button for EMG, ECG, EOG and EEG filters with ``muscle``, ``heart``, ``eye`` and ``brain`` icons or master buttons for all channels. You can apply 50Hz or 60Hz filter to individual or all channel.
 8. Adjust the number of channels by using the ``Plus/Minus`` buttons.
 
-Chords Icons
+Chords-Web 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_icons.*
+    :align: center
+    :alt: Chords-Web Icons
+
 .. _chords-browsers-compatibility:
 
 Browser Compatibility
@@ -172,18 +96,102 @@ If the user's browser does not support the Web Serial API, a message will inform
 
 For more information, refer to MDN Web Docs on the `Web Serial API <https://developer.mozilla.org/en-US/docs/Web/API/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.*
+.. only:: html
+
+   .. grid:: 2 2 2 2
+      :margin: 4 4 0 0
+      :gutter: 2
+
+      .. grid-item-card:: 
+         :text-align: center
+         :link: https://nextjs.org/
+         :link-type: url
+
+         .. image:: https://upload.wikimedia.org/wikipedia/commons/8/8e/Nextjs-logo.svg
+            :alt: Next.js Logo
+            :width: 50px
+            :height: 50px
+            :align: center
+
+         **Next.js**  
+         A React framework for building web apps.
+
+      .. grid-item-card:: 
+         :text-align: center
+         :link: https://developer.mozilla.org/en-US/docs/Web/API/Serial
+         :link-type: url
+
+         .. image:: media/chords_serialdevice.*
+            :alt: Web Serial API
+            :width: 40px
+            :height: 40px
+            :align: center
+
+         **Web Serial API**  
+         For communication with hardware devices.
+
+      .. grid-item-card:: 
+         :text-align: center
+         :link: https://tailwindcss.com/
+         :link-type: url
+
+         .. image:: ./media/chords_tailwindcss.*
+            :alt: Tailwind CSS Logo
+            :width: 50px
+            :height: 50px
+            :align: center
+
+         **Tailwind CSS**  
+         A utility-first CSS framework.
+
+      .. grid-item-card:: 
+         :text-align: center
+         :link: https://ui.shadcn.com/
+         :link-type: url
+
+         .. image:: ./media/chords_shadcn.*
+            :alt: Shadcn UI Logo
+            :width: 40px
+            :height: 40px
+            :align: center
+
+         **Shadcn UI**  
+         Advanced UI components for React.
+
+      .. grid-item-card:: 
+         :text-align: center
+         :link: https://github.com/danchitnis/webgl-plot
+         :link-type: url
+
+         .. image:: ./media/chords_webgl_plot.*
+            :alt: WebGL Plot Logo
+            :width: 50px
+            :height: 50px
+            :align: center
+
+         **WebGL Plot**  
+         Real-time plotting with WebGL.
+
+      .. grid-item-card:: 
+         :text-align: center
+         :link: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
+         :link-type: url
+
+         .. image:: ./media/chords_Indexeddbdark.*
+            :alt: IndexedDB API Logo
+            :width: 40px
+            :height: 40px
+            :align: center
+
+         **IndexedDB API**  
+         Local database for web applications.
+
+
+.. figure:: ./media/chords_tech_stack.*
     :align: center
-    :alt: chords tech stack
+    :alt: Chords-Web Tech Stack
 
-    chords tech stack