Update tab reference docs

Mechanical-Advantage · Sep 22, 2024 · edd3a61 · edd3a61
1 parent d9a0d0f
commit edd3a61
Show file tree

Hide file tree

Showing 57 changed files with 412 additions and 304 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@ AdvantageScope includes the following tools:
 
 Feedback, feature requests, and bug reports are welcome on the [issues page](https://github.com/Mechanical-Advantage/AdvantageScope/issues). For non-public inquires, please send a message to [email protected].
 
-![Example screenshot](/docs/resources/screenshot-light.png)
+![Example screenshot](/docsSite/docs/img/screenshot-light.png)
 
 ## Installation
 

diff --git a/docsSite/docs/getting-started/connect-live.md b/docsSite/docs/getting-started/connect-live.md
@@ -2,7 +2,7 @@
 sidebar_position: 3
 ---
 
-import PrefsImage from './img/prefs.png';
+import PrefsImage from '../img/prefs.png';
 import Image1 from './img/open-live-1.png';
 
 # Connecting to Live Sources

diff --git a/docsSite/docs/getting-started/img/keyboard-1.png b/docsSite/docs/getting-started/img/keyboard-1.png
diff --git a/docsSite/docs/getting-started/img/keyboard-2.png b/docsSite/docs/getting-started/img/keyboard-2.png
diff --git a/docsSite/docs/getting-started/img/navigation-1.png b/docsSite/docs/getting-started/img/navigation-1.png
diff --git a/docsSite/docs/getting-started/img/open-file-1.png b/docsSite/docs/getting-started/img/open-file-1.png
diff --git a/docsSite/docs/getting-started/img/open-file-2.png b/docsSite/docs/getting-started/img/open-file-2.png
diff --git a/docsSite/docs/getting-started/img/open-live-1.png b/docsSite/docs/getting-started/img/open-live-1.png
diff --git a/docsSite/docs/getting-started/img/prefs.png b/docsSite/docs/getting-started/img/prefs.png
diff --git a/docsSite/docs/getting-started/manage-files.md b/docsSite/docs/getting-started/manage-files.md
@@ -2,7 +2,7 @@
 sidebar_position: 2
 ---
 
-import PrefsImage from './img/prefs.png';
+import PrefsImage from '../img/prefs.png';
 import Image2 from './img/open-file-2.png';
 
 # Managing Log Files

diff --git a/docsSite/docs/img/prefs.png b/docsSite/docs/img/prefs.png
diff --git a/docsSite/docs/img/screenshot-light.png b/docsSite/docs/img/screenshot-light.png
diff --git a/docsSite/docs/index.mdx → docsSite/docs/index.md b/docsSite/docs/index.mdx → docsSite/docs/index.md
diff --git a/docsSite/docs/tab-reference/3d-field.md b/docsSite/docs/tab-reference/3d-field.md
diff --git a/docsSite/docs/tab-reference/_category_.json b/docsSite/docs/tab-reference/_category_.json
@@ -4,6 +4,6 @@
   "collapsed": false,
   "link": {
     "type": "generated-index",
-    "description": "AdvantageScope supports many ways to view and analyze data, organized into tabs. The type of visualization is selectable for each new tab opened, and multiple tabs of a given type can be open at once. Tabs can be named for ease of organization and can \"pop out\" to separate windows for simultaneous, synchronized data viewing."
+    "description": "AdvantageScope supports many ways to view and analyze data, organized into tabs. The type of visualization is selectable for each new tab opened, and multiple tabs of a given type can be open at once. Tabs can be named for ease of organization and can pop-out to separate windows for simultaneous, synchronized data viewing."
   }
 }
diff --git a/docsSite/docs/tab-reference/img/3d-field-1.png b/docsSite/docs/tab-reference/img/3d-field-1.png
diff --git a/docsSite/docs/tab-reference/img/3d-field-2.png b/docsSite/docs/tab-reference/img/3d-field-2.png
diff --git a/docsSite/docs/tab-reference/img/3d-field-3.png b/docsSite/docs/tab-reference/img/3d-field-3.png
diff --git a/docsSite/docs/tab-reference/img/3d-field-4.png b/docsSite/docs/tab-reference/img/3d-field-4.png
diff --git a/docsSite/docs/tab-reference/img/3d-field-5.png b/docsSite/docs/tab-reference/img/3d-field-5.png
diff --git a/docsSite/docs/tab-reference/img/3d-field-6.png b/docsSite/docs/tab-reference/img/3d-field-6.png
diff --git a/docsSite/docs/tab-reference/img/3d-field-7.png b/docsSite/docs/tab-reference/img/3d-field-7.png
diff --git a/docsSite/docs/tab-reference/img/3d-field-8.png b/docsSite/docs/tab-reference/img/3d-field-8.png
diff --git a/docsSite/docs/tab-reference/img/3d-field-9.png b/docsSite/docs/tab-reference/img/3d-field-9.png
diff --git a/docsSite/docs/tab-reference/img/console-1.png b/docsSite/docs/tab-reference/img/console-1.png
diff --git a/docsSite/docs/tab-reference/img/joysticks-1.png b/docsSite/docs/tab-reference/img/joysticks-1.png
diff --git a/docsSite/docs/tab-reference/img/joysticks-2.png b/docsSite/docs/tab-reference/img/joysticks-2.png
diff --git a/docsSite/docs/tab-reference/img/line-graph-1.png b/docsSite/docs/tab-reference/img/line-graph-1.png
diff --git a/docsSite/docs/tab-reference/img/line-graph-2.png b/docsSite/docs/tab-reference/img/line-graph-2.png
diff --git a/docsSite/docs/tab-reference/img/line-graph-3.png b/docsSite/docs/tab-reference/img/line-graph-3.png
diff --git a/docsSite/docs/tab-reference/img/mechanism-1.png b/docsSite/docs/tab-reference/img/mechanism-1.png
diff --git a/docsSite/docs/tab-reference/img/metadata-1.png b/docsSite/docs/tab-reference/img/metadata-1.png
diff --git a/docsSite/docs/tab-reference/img/odometry-1.png b/docsSite/docs/tab-reference/img/odometry-1.png
diff --git a/docsSite/docs/tab-reference/img/odometry-2.png b/docsSite/docs/tab-reference/img/odometry-2.png
diff --git a/docsSite/docs/tab-reference/img/points-1.png b/docsSite/docs/tab-reference/img/points-1.png
diff --git a/docsSite/docs/tab-reference/img/statistics-1.png b/docsSite/docs/tab-reference/img/statistics-1.png
diff --git a/docsSite/docs/tab-reference/img/swerve-1.png b/docsSite/docs/tab-reference/img/swerve-1.png
diff --git a/docsSite/docs/tab-reference/img/swerve-2.png b/docsSite/docs/tab-reference/img/swerve-2.png
diff --git a/docsSite/docs/tab-reference/img/table-1.png b/docsSite/docs/tab-reference/img/table-1.png
diff --git a/docsSite/docs/tab-reference/img/table-2.png b/docsSite/docs/tab-reference/img/table-2.png
diff --git a/docsSite/docs/tab-reference/img/table-3.png b/docsSite/docs/tab-reference/img/table-3.png
diff --git a/docsSite/docs/tab-reference/img/timeline.png b/docsSite/docs/tab-reference/img/timeline.png
diff --git a/docsSite/docs/tab-reference/img/video-1.png b/docsSite/docs/tab-reference/img/video-1.png
diff --git a/docsSite/docs/tab-reference/img/video-2.png b/docsSite/docs/tab-reference/img/video-2.png
diff --git a/docsSite/docs/tab-reference/img/video-3.png b/docsSite/docs/tab-reference/img/video-3.png
diff --git a/docsSite/docs/tab-reference/img/video-4.png b/docsSite/docs/tab-reference/img/video-4.png
diff --git a/docsSite/docs/tab-reference/img/video-5.png b/docsSite/docs/tab-reference/img/video-5.png
diff --git a/docsSite/docs/tab-reference/joysticks.md b/docsSite/docs/tab-reference/joysticks.md
@@ -4,18 +4,29 @@ sidebar_position: 8
 
 # 🎮 Joysticks
 
-The joysticks tab shows the state of up to three connected controllers. The video below shows an example layout, with two Xbox controller and a generic joystick. Each button highlights when it is being pressed. The timeline shows when the robot is enabled and can be used to navigate through the log data.
-
-> Note: To view the joystick visualization alongside other tabs, click the "Add Window" icon just below the navigation/playback controls. To hide the controls at the bottom of the window, click the eye icon.
+The joysticks tab shows the state of up to six connected controllers. The image below shows an example layout, with two Xbox controller and a generic joystick. Each button highlights when it is pressed, and the states of joysticks and other axes are displayed.
 
 ![Overview of joystick tab](./img/joysticks-1.png)
 
-## Configuration
+<details>
+<summary>Timeline Controls</summary>
+
+The timeline is used to control playback and visualization. Clicking on the timeline selects a time, and right-clicking deselects it. The selected time is synchronized across all tabs, making it easy to quickly find this location in other views.
+
+The green sections of the timeline indicate when the robot is autonomous, and the blue sections indicate when the robot is teleoperated.
+
+To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again.
+
+![Timeline](./img/timeline.png)
+
+</details>
 
-Select the joysticks IDs and types in the table at the bottom of the tab. Joystick IDs range from 0 to 5, and match the IDs in the Driver Station and WPILib. More information about joysticks can be found in the [WPILib documentation](https://docs.wpilib.org/en/stable/docs/software/basic-programming/joystick.html).
+## Control Pane
 
-AdvantageScope includes a set of common joysticks, including a "Generic Joystick" with all buttons, axes, and POVs in a grid format (seen above). To add a custom joystick, see [Custom Assets](../more-features/custom-assets.md). An example of a custom joystick is shown below (the overrides on 6328's operator console).
+Select the joystickstypes in the table at the bottom of the tab. Joystick IDs range from 0 to 5, and match the IDs in the Driver Station and WPILib. More information about joysticks can be found in the [WPILib documentation](https://docs.wpilib.org/en/stable/docs/software/basic-programming/joystick.html).
 
-> Note: The source fields are automatically selected from the log data. WPILib logs (with [joystick logging enabled](https://docs.wpilib.org/en/stable/docs/software/telemetry/datalog.html#logging-joystick-data)), AdvantageKit logs, and AdvantageKit streaming are supported. **Joystick data is NOT available via an NT4 connection with stock WPILib.**
+AdvantageScope includes a set of common joysticks, including a "Generic Joystick" with all buttons, axes, and POVs in a grid format (seen above). To add a custom joystick, see [Custom Assets](../more-features/custom-assets.md).
 
-![Custom joystick](./img/joysticks-2.png)
+:::warning
+**Joystick data is NOT available via a NetworkTables connection with stock WPILib.** WPILib log files (with [joystick logging enabled](https://docs.wpilib.org/en/stable/docs/software/telemetry/datalog.html#logging-joystick-data)), AdvantageKit logs, and AdvantageKit streaming are supported.
+:::
diff --git a/docsSite/docs/tab-reference/line-graph.md b/docsSite/docs/tab-reference/line-graph.md
@@ -2,28 +2,53 @@
 sidebar_position: 1
 ---
 
+import Image2 from './img/line-graph-2.png';
+import Image3 from './img/line-graph-3.png';
+
 # 📉 Line Graph
 
-The line graph is the default view in AdvantageScope. It supports both continuous (numerical) and discrete fields. To get started, drag a field to one of the three legends. Delete a field using the "X" button or hide it temporarily by clicking the colored circle. To remove all fields, click the three dots near the axis title and then "Clear All".
+The line graph is the default view in AdvantageScope. It supports both continuous (numerical) and discrete fields.
 
-To zoom, place the cursor over the main graph and scroll up or down. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the graph. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again.
+![Line graph demo](./img/line-graph-1.png)
 
-Clicking on the graph selects a time, and right-clicking deselects it. The value of each field at that time is displayed in the legend. The selected timestamp and delta between the selected and hovered times are also displayed as an overlay on the graph.
+## Viewer Pane
 
-> Note: The selected time is synchronized across all tabs, making it easy to quickly find this location in other views. Hovering the cursor over a time on the line graph also displays it in the pop-up windows.
+To zoom, place the cursor over the main graph and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the graph. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again.
 
-![Line graph demo](./img/line-graph-1.png)
+Clicking on the graph selects a time, and right-clicking deselects it. The value of each field at that time is displayed in the legend. The selected time is synchronized across all tabs, making it easy to quickly find this location in other views.
+
+:::tip
+The delta between the selected and hovered times is displayed as an overlay on the graph, making it easy to measure time ranges.
+:::
+
+## Control Pane
+
+To get started, drag a field to one of the three sections (left, right, or discrete). Delete a field using the X button, or hide it temporarily by clicking the eye icon or double-clicking the field name. To remove all fields, click the three dots near the axis title and then `Clear All`. Fields can be rearranged in the list by clicking and dragging.
+
+:::info
+The color and line style of each field can be customized by clicking the colored icon or right-clicking on the field name.
+:::
+
+### Adjusting Axes
+
+By default, each axis adjusts its range based on the visible data. To disable auto-ranging and lock the range to its current min and max, click the three dots near the axis title and then `Lock Axis`. To manually adjust the range, choose `Edit Range...` and enter the desired values.
+
+<img src={Image2} alt="Editing axis range" height="250" />
 
-## Adjusting Axes
+### Unit Conversion
 
-By default, each axis adjusts its range based on the visible data. To disable auto-ranging and lock the range to its current min and max, click the three dots near the axis title and then "Lock Axis". To manually adjust the range, choose "Edit Range..." and enter the desired values.
+To adjust the units for an axis, click the three dots near the axis title and then `Unit Conversion...`. Select the type of unit and the required conversion. Each value is also multiplied by the "Extra Factor", allowing for custom conversions (like gear ratios, angular to linear conversions, or other units not provided by AdvantageScope). The factor can also be entered using a mathematical expression such as `1.5*pi`.
 
-![Editing axis range](./img/line-graph-2.png)
+:::tip
+To quickly enable or disable unit conversion, click the three dots near the axis title and choose `Recent Presets` or `Reset Units`.
+:::
 
-## Unit Conversion
+<img src={Image3} alt="Editing unit conversion" height="250" />
 
-To adjust the units for an axis, click the three dots near the axis title and then "Unit Conversion...". Select the type of unit and the required conversion. Each value is also multiplied by the "Extra Factor", allowing for custom conversions (like gear ratios, angular to linear conversions, or other units not provided by AdvantageScope).
+### Integration & Differentiation
 
-> Note: The "Extra Factor" accepts mathematical expressions such as "(50/14)\*(17/27)\*(45/15)" or "1.5\*pi". This often useful when expressing gear ratios or custom units.
+Values can be automatically integrated or differentiated by AdvantageScope. Click the three dots near the axis title and then select `Differentiate` or `Integrate`.
 
-![Editing unit conversion](./img/line-graph-3.png)
+:::info
+Derivates are calcaulated using the [finite difference](https://en.wikipedia.org/wiki/Finite_difference) of adjacent samples. Integrals are calculated using [trapezoidal integration](https://en.wikipedia.org/wiki/Trapezoidal_rule).
+:::
diff --git a/docsSite/docs/tab-reference/mechanism.md b/docsSite/docs/tab-reference/mechanism.md
@@ -2,30 +2,53 @@
 sidebar_position: 10
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # ⚙️ Mechanism
 
 The mechanism tab displays a a jointed mechanism created with one or more [Mechanism2d](https://docs.wpilib.org/en/stable/docs/software/dashboards/glass/mech2d-widget.html) objects.
 
-> Note: To view the mechanism visualization alongside other tabs, click the "Add Window" icon just below the navigation/playback controls. To hide the controls at the bottom of the window, click the eye icon.
-
 ![Overview of mechanism tab](./img/mechanism-1.png)
 
+<details>
+<summary>Timeline Controls</summary>
+
+The timeline is used to control playback and visualization. Clicking on the timeline selects a time, and right-clicking deselects it. The selected time is synchronized across all tabs, making it easy to quickly find this location in other views.
+
+The green sections of the timeline indicate when the robot is autonomous, and the blue sections indicate when the robot is teleoperated.
+
+To zoom, place the cursor over the timeline and scroll up or down. A range can also be selecting by clicking and dragging while holding `Shift`. Move left and right by scrolling horizontally (on supported devices), or by clicking and dragging on the timeline. When connected live, scrolling to the left unlocks from the current time, and scrolling all the way to the right locks to the current time again.
+
+![Timeline](./img/timeline.png)
+
+</details>
+
+## Adding Mechanisms
+
+To get started, drag a `Mechanism2d` to the control pane. Delete a mechanism using the X button, or hide it temporarily by clicking the eye icon or double-clicking the field name. To remove all mechanisms, click the trash can near the axis title and then `Clear All`. Mechanisms can be rearranged in the list by clicking and dragging.
+
 ## Publishing Data
 
+<Tabs>
+<TabItem value="wpilib" label="WPILib" default>
+
 To publish mechanism data using WPILib, send a `Mechanism2d` object to NetworkTables (shown below). If data logging is enabled, the mechanisms can also be viewed based the generated WPILOG file.
 
 ```java
 Mechanism2d mechanism = new Mechanism2d(3, 3);
 SmartDashboard.putData("MyMechanism", mechanism);
 ```
 
+</TabItem>
+<TabItem value="advantagekit" label="AdvantageKit">
+
 To publish mechanism data using AdvantageKit, record a `Mechanism2d` as an output field (shown below). Note that this call only records the current state of the `Mechanism2d`, so it must be called every loop cycle after the object is updated.
 
 ```java
 Mechanism2d mechanism = new Mechanism2d(3, 3);
 Logger.getInstance().recordOutput("MyMechanism", mechanism);
 ```
 
-## Configuration
-
-To selected a mechanism, drag it to one of the labeled boxes. To remove a mechanism, right-click the box. Up to three mechanisms can be displayed simultaneously. For example, the setpoints and measured states can be logged separately and merged in AdvantageScope to allow for greater flexibility in visualization.
+</TabItem>
+</Tabs>
diff --git a/docsSite/docs/tab-reference/metadata.md b/docsSite/docs/tab-reference/metadata.md
@@ -2,13 +2,21 @@
 sidebar_position: 12
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # 🔍 Metadata
 
 The metadata tab shows values published to the hidden "/Metadata" table or through AdvantageKit. The metadata keys are displayed to the left, and the columns separate data from different sources (e.g. real and replay when using AdvantageKit).
 
 ![Overview of metadata tab](./img/metadata-1.png)
 
-The example code below shows how to log metadata using WPILib. The values must be logged to the "/Metadata" table as strings.
+The example code below shows how to log metadata using Java.
+
+<Tabs>
+<TabItem value="wpilib" label="WPILib" default>
+
+In WPILib, the values must be logged to the "/Metadata" table as strings.
 
 ```java
 // NetworkTables (also saved to DataLog by default)
@@ -21,8 +29,14 @@ StringLogEntry entry = new StringLogEntry(DataLogManager.getLog(), "/Metadata/My
 entry.append("MyValue");
 ```
 
-To save metadata using AdvantageKit, call the method below before starting the logger. Metadata is stored separately when running in real and replay for easy comparison.
+</TabItem>
+<TabItem value="advantagekit" label="AdvantageKit">
+
+In AdvantageKit, call the method below before starting the logger. Metadata is stored separately when running in real and replay for easy comparison.
 
 ```java
 Logger.getInstance().recordMetadata("MyKey", "MyValue");
 ```
+
+</TabItem>
+</Tabs>