improved features and added chards in tech section for better underst…

…anding

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 <https://docs.upsidedownlabs.tech/hardware/index.html>`_.
 
-.. 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 <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.
-
-.. 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 <https://deve
 
 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.
-
 
+.. 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: 50px
+            :height: 50px
+            :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: 50px
+            :height: 50px
+            :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: 50px
+            :height: 50px
+            :align: center
+
+         **IndexedDB API**  
+         Local database for web applications.
+
+
+.. figure:: ./media/chords_tech_stack.*
+    :align: center
+    :alt: Chords Tech Stack