PhotonVision · GrahamSH-LLK · Aug 18, 2024 · Aug 18, 2024 · Aug 19, 2024 · Aug 19, 2024
@@ -0,0 +1,9 @@
+build/*
+.DS_Store
+.vscode/*
+.idea/*
+source/_build
+source/docs/_build
+
+venv/*
+.venv/*
@@ -0,0 +1,9 @@
+# PhotonVision ReadTheDocs
+
+[![Documentation Status](https://readthedocs.org/projects/photonvision-docs/badge/?version=latest)](https://docs.photonvision.org/en/latest/?badge=latest)
+
+PhotonVision is a free open-source vision processing software for FRC teams.
+
+This repository is the source code for our ReadTheDocs documentation, which can be found [here](https://docs.photonvision.org).
+
+[Contribution and formatting guidelines for this project](https://docs.photonvision.org/en/latest/docs/contributing/photonvision-docs/index.html)
@@ -1,9 +1,20 @@
-build/*
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
 .DS_Store
-.vscode/*
-.idea/*
-source/_build
-source/docs/_build
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-venv/*
-.venv/*
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
@@ -1,9 +1,41 @@
-# PhotonVision ReadTheDocs
+# Website
 
-[![Documentation Status](https://readthedocs.org/projects/photonvision-docs/badge/?version=latest)](https://docs.photonvision.org/en/latest/?badge=latest)
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
 
-PhotonVision is a free open-source vision processing software for FRC teams.
+### Installation
 
-This repository is the source code for our ReadTheDocs documentation, which can be found [here](https://docs.photonvision.org).
+```
+$ yarn
+```
 
-[Contribution and formatting guidelines for this project](https://docs.photonvision.org/en/latest/docs/contributing/photonvision-docs/index.html)
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};
@@ -0,0 +1,12 @@
+---
+slug: first-blog-post
+title: First Blog Post
+authors: [slorber, yangshun]
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet...
+
+<!-- truncate -->
+
+...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
@@ -0,0 +1,44 @@
+---
+slug: long-blog-post
+title: Long Blog Post
+authors: yangshun
+tags: [hello, docusaurus]
+---
+
+This is the summary of a very long blog post,
+
+Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
+
+<!-- truncate -->
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
@@ -0,0 +1,24 @@
+---
+slug: mdx-blog-post
+title: MDX Blog Post
+authors: [slorber]
+tags: [docusaurus]
+---
+
+Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
+
+:::tip
+
+Use the power of React to create interactive blog posts.
+
+:::
+
+{/* truncate */}
+
+For example, use JSX to create an interactive button:
+
+```js
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+```
+
+<button onClick={() => alert('button clicked!')}>Click me!</button>
@@ -0,0 +1,29 @@
+---
+slug: welcome
+title: Welcome
+authors: [slorber, yangshun]
+tags: [facebook, hello, docusaurus]
+---
+
+[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
+
+Here are a few tips you might find useful.
+
+<!-- truncate -->
+
+Simply add Markdown files (or folders) to the `blog` directory.
+
+Regular blog authors can be added to `authors.yml`.
+
+The blog post date can be extracted from filenames, such as:
+
+- `2019-05-30-welcome.md`
+- `2019-05-30-welcome/index.md`
+
+A blog post folder can be convenient to co-locate blog post images:
+
+![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
+
+The blog supports tags as well!
+
+**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
@@ -0,0 +1,23 @@
+yangshun:
+  name: Yangshun Tay
+  title: Front End Engineer @ Facebook
+  url: https://github.com/yangshun
+  image_url: https://github.com/yangshun.png
+  page: true
+  socials:
+    x: yangshunz
+    github: yangshun
+
+slorber:
+  name: Sébastien Lorber
+  title: Docusaurus maintainer
+  url: https://sebastienlorber.com
+  image_url: https://github.com/slorber.png
+  page:
+    # customize the url of the author page at /blog/authors/<permalink>
+    permalink: '/all-sebastien-lorber-articles'
+  socials:
+    x: sebastienlorber
+    linkedin: sebastienlorber
+    github: slorber
+    newsletter: https://thisweekinreact.com
@@ -0,0 +1,19 @@
+facebook:
+  label: Facebook
+  permalink: /facebook
+  description: Facebook tag description
+
+hello:
+  label: Hello
+  permalink: /hello
+  description: Hello tag description
+
+docusaurus:
+  label: Docusaurus
+  permalink: /docusaurus
+  description: Docusaurus tag description
+
+hola:
+  label: Hola
+  permalink: /hola
+  description: Hola tag description
@@ -0,0 +1,46 @@
+# Filesystem Directory
+
+PhotonVision stores and loads settings in the `photonvision_config` directory, in the same folder as the PhotonVision JAR is stored. On the Pi image as well as the Gloworm, this is in the `/opt/photonvision` directory. The contents of this directory can be exported as a zip archive from the settings page of the interface, under "export settings". This export will contain everything detailed below. These settings can later be uploaded using "import settings", to restore configurations from previous backups.
+
+## Directory Structure
+
+The directory structure is outlined below.
+
+<img src={require('./images/configDir.png').default} alt="Config directory structure" width="600"/>
+
+
+- calibImgs
+  - Images saved from the last run of the calibration routine
+- cameras
+  - Contains a subfolder for each camera. This folder contains the following files:
+    - pipelines folder, which contains a `json` file for each user-created pipeline.
+    - config.json, which contains all camera-specific configuration. This includes FOV, pitch, current pipeline index, and calibration data
+    - drivermode.json, which contains settings for the driver mode pipeline
+- imgSaves
+  - Contains images saved with the input/output save commands.
+- logs
+  - Contains timestamped logs in the format `photonvision-YYYY-MM-D_HH-MM-SS.log`. Note that on Pi or Gloworm these timestamps will likely be significantly behind the real time.
+- hardwareSettings.json
+  - Contains hardware settings. Currently this includes only the LED brightness.
+- networkSettings.json
+  - Contains network settings, including team number (or remote network tables address), static/dynamic settings, and hostname.
+
+## Importing and Exporting Settings
+
+The entire settings directory can be exported as a ZIP archive from the settings page.
+
+<video width="85%" controls>
+    <source src={require("@site/docs/assets/import-export-settings.mp4").default} type="video/mp4"></source>
+    Your browser does not support the video tag.
+</video>
+
+A variety of files can be imported back into PhotonVision:
+
+- ZIP Archive (`.zip`)
+  - Useful for restoring a full configuration from a different PhotonVision instance.
+- Single Config File
+  - Currently-supported Files
+    - `hardwareConfig.json`
+    - `hardwareSettings.json`
+    - `networkSettings.json`
+  - Useful for simple hardware or network configuration tasks without overwriting all settings.
@@ -2,13 +2,13 @@
 
 ## About
 
-:::{warning}
+:::warning
 PhotonVision interfaces with PhotonLib, our vendor dependency, using NetworkTables. If you are running PhotonVision on a robot (ie. with a RoboRIO), you should **turn the NetworkTables server switch (in the settings tab) off** in order to get PhotonLib to work. Also ensure that you set your team number. The NetworkTables server should only be enabled if you know what you're doing!
 :::
 
 ## API
 
-:::{warning}
+:::warning
 NetworkTables is not a supported setup/viable option when using PhotonVision as we only send one target at a time (this is problematic when using AprilTags, which will return data from multiple tags at once). We recommend using PhotonLib.
 :::
 
@@ -51,7 +51,7 @@ Images are returned as part of the .zip package from the "Export" operation in t
 | `inputSaveImgCmd`  | `boolean` | Triggers saving the current input image to file.  |
 | `outputSaveImgCmd` | `boolean` | Triggers saving the current output image to file. |
 
-:::{warning}
+:::warning
 If you manage to make calls to these commands faster than 500ms (between calls), additional photos will not be captured.
 :::
 
@@ -63,8 +63,8 @@ These entries are global, meaning that they should be called on the main `photon
 | --------- | ----- | -------------------------------------------------------- |
 | `ledMode` | `int` | Sets the LED Mode (-1: default, 0: off, 1: on, 2: blink) |
 
-:::{warning}
-Setting the LED mode to -1 (default) when `multiple` cameras are connected may result in unexpected behavior. {ref}`This is a known limitation of PhotonVision. <docs/troubleshooting/common-errors:LED Control>`
+:::warning
+Setting the LED mode to -1 (default) when `multiple` cameras are connected may result in unexpected behavior. \{ref}`This is a known limitation of PhotonVision. <docs/troubleshooting/common-errors:LED Control>`
 
 Single camera operation should work without issue.
 :::
@@ -4,20 +4,15 @@
 
 Before you get started tracking AprilTags, ensure that you have followed the previous sections on installation, wiring and networking. Next, open the Web UI, go to the top right card, and switch to the "AprilTag" or "Aruco" type. You should see a screen similar to the one below.
 
-```{image} images/apriltag.png
-:align: center
-```
+<img src={require("./images/apriltag.png").default} align="center"/>
 
-You are now able to detect and track AprilTags in 2D (yaw, pitch, roll, etc.). In order to get 3D data from your AprilTags, please see {ref}`here. <docs/apriltag-pipelines/3D-tracking:3D Tracking>`
+You are now able to detect and track AprilTags in 2D (yaw, pitch, roll, etc.). In order to get 3D data from your AprilTags, please see \{ref}`here. <docs/apriltag-pipelines/3D-tracking:3D Tracking>`
 
 ## Tuning AprilTags
 
 AprilTag pipelines come with reasonable defaults to get you up and running with tracking. However, in order to optimize your performance and accuracy, you must tune your AprilTag pipeline using the settings below. Note that the settings below are different between the AprilTag and Aruco detectors but the concepts are the same.
 
-```{image} images/apriltag-tune.png
-:align: center
-:scale: 45 %
-```
+<img src={require("./images/apriltag-tune.png").default} align="center" scale="45%"/>
 
 ### Target Family
 

@@ -1,6 +1,6 @@
 # 3D Tracking
 
-3D AprilTag tracking will allow you to track the real-world position and rotation of a tag relative to the camera's image sensor. This is useful for robot pose estimation and other applications like autonomous scoring. In order to use 3D tracking, you must first {ref}`calibrate your camera <docs/calibration/calibration:Calibrating Your Camera>`. Once you have, you need to enable 3D mode in the UI and you will now be able to get 3D pose information from the tag! For information on getting and using this information in your code, see {ref}`the programming reference. <docs/programming/index:Programming Reference>`.
+3D AprilTag tracking will allow you to track the real-world position and rotation of a tag relative to the camera's image sensor. This is useful for robot pose estimation and other applications like autonomous scoring. In order to use 3D tracking, you must first \{ref}`calibrate your camera <docs/calibration/calibration:Calibrating Your Camera>`. Once you have, you need to enable 3D mode in the UI and you will now be able to get 3D pose information from the tag! For information on getting and using this information in your code, see \{ref}`the programming reference. <docs/programming/index:Programming Reference>`.
 
 ## Ambiguity
 
@@ -9,5 +9,5 @@ Translating from 2D to 3D using data from the calibration and the four tag corne
 There are a few steps you can take to resolve/mitigate this issue:
 
 1. Mount cameras at oblique angles so it is less likely that the tag will be seen straight on.
-2. Use the {ref}`MultiTag system <docs/apriltag-pipelines/multitag:MultiTag Localization>` in order to combine the corners from multiple tags to get a more accurate and unambiguous pose.
+2. Use the \{ref}`MultiTag system <docs/apriltag-pipelines/multitag:MultiTag Localization>` in order to combine the corners from multiple tags to get a more accurate and unambiguous pose.
 3. Reject all tag poses where the ambiguity ratio (available via PhotonLib) is greater than 0.2.
@@ -1,14 +1,11 @@
 # About Apriltags
 
-```{image} images/pv-apriltag.png
-:align: center
-:scale: 20 %
-```
+<img src={require('./images/pv-apriltag.png').default} align="center" scale="20%"/>
 
 AprilTags are a common type of visual fiducial marker. Visual fiducial markers are artificial landmarks added to a scene to allow "localization" (finding your current position) via images. In simpler terms, tags mark known points of reference that you can use to find your current location. They are similar to QR codes in which they encode information, however, they hold only a single number. By placing AprilTags in known locations around the field and detecting them using PhotonVision, you can easily get full field localization / pose estimation. Alternatively, you can use AprilTags the same way you used retroreflective tape, simply using them to turn to goal without any pose estimation.
 
 A more technical explanation can be found in the [WPILib documentation](https://docs.wpilib.org/en/latest/docs/software/vision-processing/apriltag/apriltag-intro.html).
 
-:::{note}
+:::note
 You can get FIRST's [official PDF of the targets used in 2024 here](https://firstfrc.blob.core.windows.net/frc2024/FieldAssets/Apriltag_Images_and_User_Guide.pdf).
 :::