Bump LL image to fix NetworkManager (#780)

Actually calls VisionModule::setPipeline when changing pipelines (needed to change video modes)

.clang-format

@@ -0,0 +1,167 @@
+---
+Language:        Cpp
+BasedOnStyle:  Google
+AccessModifierOffset: -1
+AlignAfterOpenBracket: Align
+AlignConsecutiveMacros: false
+AlignConsecutiveAssignments: false
+AlignConsecutiveDeclarations: false
+AlignEscapedNewlines: Left
+AlignOperands:   true
+AlignTrailingComments: true
+AllowAllArgumentsOnNextLine: true
+AllowAllConstructorInitializersOnNextLine: true
+AllowAllParametersOfDeclarationOnNextLine: true
+AllowShortBlocksOnASingleLine: Never
+AllowShortCaseLabelsOnASingleLine: false
+AllowShortFunctionsOnASingleLine: All
+AllowShortLambdasOnASingleLine: All
+AllowShortIfStatementsOnASingleLine: WithoutElse
+AllowShortLoopsOnASingleLine: true
+AlwaysBreakAfterDefinitionReturnType: None
+AlwaysBreakAfterReturnType: None
+AlwaysBreakBeforeMultilineStrings: true
+AlwaysBreakTemplateDeclarations: Yes
+BinPackArguments: true
+BinPackParameters: true
+BraceWrapping:
+  AfterCaseLabel:  false
+  AfterClass:      false
+  AfterControlStatement: false
+  AfterEnum:       false
+  AfterFunction:   false
+  AfterNamespace:  false
+  AfterObjCDeclaration: false
+  AfterStruct:     false
+  AfterUnion:      false
+  AfterExternBlock: false
+  BeforeCatch:     false
+  BeforeElse:      false
+  IndentBraces:    false
+  SplitEmptyFunction: true
+  SplitEmptyRecord: true
+  SplitEmptyNamespace: true
+BreakBeforeBinaryOperators: None
+BreakBeforeBraces: Attach
+BreakBeforeInheritanceComma: false
+BreakInheritanceList: BeforeColon
+BreakBeforeTernaryOperators: true
+BreakConstructorInitializersBeforeComma: false
+BreakConstructorInitializers: BeforeColon
+BreakAfterJavaFieldAnnotations: false
+BreakStringLiterals: true
+ColumnLimit:     80
+CommentPragmas:  '^ IWYU pragma:'
+CompactNamespaces: false
+ConstructorInitializerAllOnOneLineOrOnePerLine: true
+ConstructorInitializerIndentWidth: 4
+ContinuationIndentWidth: 4
+Cpp11BracedListStyle: true
+DeriveLineEnding: false
+DerivePointerAlignment: false
+DisableFormat:   false
+ExperimentalAutoDetectBinPacking: false
+FixNamespaceComments: true
+ForEachMacros:
+  - foreach
+  - Q_FOREACH
+  - BOOST_FOREACH
+IncludeBlocks:   Regroup
+IncludeCategories:
+  - Regex:           '^<ext/.*\.h>'
+    Priority:        2
+    SortPriority:    0
+  - Regex:           '^<.*\.h>'
+    Priority:        1
+    SortPriority:    0
+  - Regex:           '^<.*'
+    Priority:        2
+    SortPriority:    0
+  - Regex:           '.*'
+    Priority:        3
+    SortPriority:    0
+IncludeIsMainRegex: '([-_](test|unittest))?$'
+IncludeIsMainSourceRegex: ''
+IndentCaseLabels: true
+IndentGotoLabels: true
+IndentPPDirectives: None
+IndentWidth:     2
+IndentWrappedFunctionNames: false
+JavaScriptQuotes: Leave
+JavaScriptWrapImports: true
+KeepEmptyLinesAtTheStartOfBlocks: false
+MacroBlockBegin: ''
+MacroBlockEnd:   ''
+MaxEmptyLinesToKeep: 1
+NamespaceIndentation: None
+ObjCBinPackProtocolList: Never
+ObjCBlockIndentWidth: 2
+ObjCSpaceAfterProperty: false
+ObjCSpaceBeforeProtocolList: true
+PenaltyBreakAssignment: 2
+PenaltyBreakBeforeFirstCallParameter: 1
+PenaltyBreakComment: 300
+PenaltyBreakFirstLessLess: 120
+PenaltyBreakString: 1000
+PenaltyBreakTemplateDeclaration: 10
+PenaltyExcessCharacter: 1000000
+PenaltyReturnTypeOnItsOwnLine: 200
+PointerAlignment: Left
+RawStringFormats:
+  - Language:        Cpp
+    Delimiters:
+      - cc
+      - CC
+      - cpp
+      - Cpp
+      - CPP
+      - 'c++'
+      - 'C++'
+    CanonicalDelimiter: ''
+    BasedOnStyle:    google
+  - Language:        TextProto
+    Delimiters:
+      - pb
+      - PB
+      - proto
+      - PROTO
+    EnclosingFunctions:
+      - EqualsProto
+      - EquivToProto
+      - PARSE_PARTIAL_TEXT_PROTO
+      - PARSE_TEST_PROTO
+      - PARSE_TEXT_PROTO
+      - ParseTextOrDie
+      - ParseTextProtoOrDie
+    CanonicalDelimiter: ''
+    BasedOnStyle:    google
+ReflowComments:  true
+SortIncludes:    false
+SortUsingDeclarations: true
+SpaceAfterCStyleCast: false
+SpaceAfterLogicalNot: false
+SpaceAfterTemplateKeyword: true
+SpaceBeforeAssignmentOperators: true
+SpaceBeforeCpp11BracedList: false
+SpaceBeforeCtorInitializerColon: true
+SpaceBeforeInheritanceColon: true
+SpaceBeforeParens: ControlStatements
+SpaceBeforeRangeBasedForLoopColon: true
+SpaceInEmptyBlock: false
+SpaceInEmptyParentheses: false
+SpacesBeforeTrailingComments: 2
+SpacesInAngles:  false
+SpacesInConditionalStatement: false
+SpacesInContainerLiterals: true
+SpacesInCStyleCastParentheses: false
+SpacesInParentheses: false
+SpacesInSquareBrackets: false
+SpaceBeforeSquareBrackets: false
+Standard:        Auto
+StatementMacros:
+  - Q_UNUSED
+  - QT_REQUIRE_VERSION
+TabWidth:        8
+UseCRLF:         false
+UseTab:          Never
+...

.github/CODEOWNERS

@@ -1,3 +1,2 @@
 # These owners will be the default owners for everything in the repo.
 *	@PhotonVision/program-devs
-

.github/workflows/main.yml

@@ -14,7 +14,7 @@ on:
 
 jobs:
   # This job builds the client (web view).
-  build-client:
+  photonclient-build:
 
     # Let all steps run within the photon-client dir.
     defaults:
@@ -22,26 +22,22 @@ jobs:
         working-directory: photon-client
 
     # The type of runner that the job will run on.
-    runs-on: ubuntu-latest
-
-    # Grab the docker container.
-    container:
-      image: docker://node:10
+    runs-on: ubuntu-22.04
 
     steps:
     # Checkout code.
-    - uses: actions/checkout@v1
-    
+    - uses: actions/checkout@v3
+
     # Setup Node.js
     - name: Setup Node.js
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3
       with:
-        node-version: 10
+        node-version: 16
 
     # Run npm
-    - run: |
-        npm ci
-        npm run build --if-present
+    - run: npm update -g npm
+    - run: npm ci
+    - run: npm run build --if-present
 
     # Upload client artifact.
     - uses: actions/upload-artifact@master
@@ -49,68 +45,123 @@ jobs:
         name: built-client
         path: photon-client/dist/
 
-  build-server:
-    # Let all steps run within the photon-server dir.
-    defaults:
-      run:
-        working-directory: photon-server
-
-    # The type of runner that the job will run on.
-    runs-on: ubuntu-latest
+  photon-build-examples:
+    runs-on: ubuntu-22.04
+    name: "Build Examples"
 
     steps:
       # Checkout code.
       - name: Checkout code
-        uses: actions/checkout@v1
-        
-      # Install Java 11.
-      - name: Install Java 11
-        uses: actions/setup-java@v1
+        uses: actions/checkout@v3
         with:
-          java-version: 11
+          fetch-depth: 0
 
-      # Run Gradle build.
+      # Fetch tags.
+      - name: Fetch tags
+        run: git fetch --tags --force
+
+      # Install Java 17.
+      - name: Install Java 17
+        uses: actions/setup-java@v3
+        with:
+          java-version: 17
+          distribution: temurin
+
+      # Need to publish to maven local first, so that C++ sim can pick it up
+      # Still haven't figure out how to make the vendordep file be copied before trying to build examples
+      - name: Publish photonlib to maven local
+        run: |
+          chmod +x gradlew
+          ./gradlew publishtomavenlocal -x check
+
+      - name: Build Java examples
+        working-directory: photonlib-java-examples
+        run: |
+          chmod +x gradlew
+          ./gradlew copyPhotonlib -x check
+          ./gradlew buildAllExamples -x check --max-workers 2
+
+      - name: Build C++ examples
+        working-directory: photonlib-cpp-examples
+        run: |
+          chmod +x gradlew
+          ./gradlew copyPhotonlib -x check
+          ./gradlew buildAllExamples -x check --max-workers 2
+
+  photon-build-all:
+    # The type of runner that the job will run on.
+    runs-on: ubuntu-22.04
+
+    steps:
+      # Checkout code.
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      # Fetch tags.
+      - name: Fetch tags
+        run: git fetch --tags --force
+
+      # Install Java 17.
+      - name: Install Java 17
+        uses: actions/setup-java@v3
+        with:
+          java-version: 17
+          distribution: temurin
+
+      # Run only build tasks, no checks??
       - name: Gradle Build
         run: |
           chmod +x gradlew
-          ./gradlew build -x check
+          ./gradlew photon-server:build photon-lib:build -x check --max-workers 2
+
+      # Run Gradle Tests.
+      - name: Gradle Tests
+        run: ./gradlew testHeadless -i --max-workers 1 --stacktrace
+
+      # Generate Coverage Report.
+      - name: Gradle Coverage
+        run: ./gradlew jacocoTestReport --max-workers 1
 
-      # Run Tests Generate Coverage Report.
-      - name: Gradle Test and Coverage
-        run: ./gradlew jacocoTestReport
-      
       # Publish Coverage Report.
-      - name: Publish Coverage Report
-        uses: codecov/codecov-action@v1
+      - name: Publish Server Coverage Report
+        uses: codecov/codecov-action@v3
         with:
           file: ./photon-server/build/reports/jacoco/test/jacocoTestReport.xml
 
-  build-offline-docs:
-    runs-on: ubuntu-latest
+      - name: Publish Core Coverage Report
+        uses: codecov/codecov-action@v3
+        with:
+          file: ./photon-core/build/reports/jacoco/test/jacocoTestReport.xml
+
+  photonserver-build-offline-docs:
+    runs-on: ubuntu-22.04
 
     steps:
       # Checkout docs.
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           repository: 'PhotonVision/photonvision-docs.git'
           ref: master
 
       # Install Python.
-      - uses: actions/setup-python@v2
+      - uses: actions/setup-python@v4
         with:
-          python-version: '3.6'
-        
+          python-version: '3.9'
+
       - name: Install dependencies
         run: |
           python -m pip install --upgrade pip
           pip install sphinx sphinx_rtd_theme sphinx-tabs sphinxext-opengraph doc8
           pip install -r requirements.txt
-          
-      - name: Check the docs
-        run: |
-          make linkcheck
-          make lint
-          
+
+      # Don't check the docs. If a PR was merged to the docs repo, it ought to pass CI. No need to re-check here.
+      # - name: Check the docs
+      #   run: |
+      #     make linkcheck
+      #     make lint
+
       - name: Build the docs
         run: |
           make html
@@ -121,102 +172,286 @@ jobs:
           name: built-docs
           path: build/html
 
-  build-package:
-    needs: [build-client, build-server, build-offline-docs]
-
-    # Let all steps run within the photon-server dir.
-    defaults:
-      run:
-        working-directory: photon-server
-
+  photonserver-check-lint:
     # The type of runner that the job will run on.
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
 
     steps:
       # Checkout code.
-      - uses: actions/checkout@v1
-      
-      # Install Java 11.
-      - uses: actions/setup-java@v1
+      - uses: actions/checkout@v3
         with:
-          java-version: 11
+          fetch-depth: 0
 
-      # Clear any existing web resources.
-      - run: |
-          rm -rf src/main/resources/web/*
-          mkdir -p src/main/resources/web/docs
-
-      # Download client artifact to resources folder.
-      - uses: actions/download-artifact@v2
+      # Install Java 17.
+      - uses: actions/setup-java@v3
         with:
-          name: built-client
-          path: photon-server/src/main/resources/web/
+          java-version: 17
+          distribution: temurin
 
-      # Download docs artifact to resources folder.
-      - uses: actions/download-artifact@v2
-        with:
-          name: built-docs
-          path: photon-server/src/main/resources/web/docs     
-
-
-      # Print folder contents.
-      - run: ls
-        working-directory: photon-server/src/main/resources/web/
-
-      # Build fat jar.
-      - run: |
-          chmod +x gradlew
-          ./gradlew shadowJar
-        working-directory: photon-server
-
-      # Upload final fat jar as artifact.
-      - uses: actions/upload-artifact@master
-        with:
-          name: jar
-          path: photon-server/build/libs
-    
-      - uses: eine/tip@master
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          tag: 'Dev'
-          rm: true
-          files: |
-            photon-server/build/libs/*.jar
-        if: github.event_name == 'push'
-
-  check-lint:
-    # Let all steps run within the photon-server dir.
-    defaults:
-      run:
-        working-directory: photon-server
-
-    # The type of runner that the job will run on.
-    runs-on: ubuntu-latest
-    
-    steps:
-      # Checkout code.
-      - uses: actions/checkout@v1
-
-      # Install Java 11.
-      - uses: actions/setup-java@v1
-        with:
-          java-version: 11
-      
       # Check server code with Spotless.
       - run: |
           chmod +x gradlew
           ./gradlew spotlessCheck
 
-  release:
-    if: startsWith(github.ref, 'refs/tags/v')
-    needs: [build-package]
-    runs-on: ubuntu-latest
+  #  Building photonlib
+  photonlib-build-host:
+    env:
+      MACOSX_DEPLOYMENT_TARGET: 10.14
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - os: windows-2022
+            artifact-name: Win64
+          - os: macos-11
+            artifact-name: macOS
+          - os: ubuntu-22.04
+            artifact-name: Linux
+
+    runs-on: ${{ matrix.os }}
+    name: "Photonlib - Build Host - ${{ matrix.artifact-name }}"
     steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-java@v3
+        with:
+          java-version: 17
+          distribution: temurin
+      - run: git fetch --tags --force
+      - run: |
+          chmod +x gradlew
+          ./gradlew photon-lib:build --max-workers 1
+      - run: ./gradlew photon-lib:publish photon-targeting:publish
+        name: Publish
+        env:
+          ARTIFACTORY_API_KEY: ${{ secrets.ARTIFACTORY_API_KEY }}
+        if: github.event_name == 'push'
+
+  photonlib-build-docker:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - container: wpilib/roborio-cross-ubuntu:2023-22.04
+            artifact-name: Athena
+          - container: wpilib/raspbian-cross-ubuntu:bullseye-22.04
+            artifact-name: Raspbian
+          - container: wpilib/aarch64-cross-ubuntu:bullseye-22.04
+            artifact-name: Aarch64
+
+    runs-on: ubuntu-22.04
+    container: ${{ matrix.container }}
+    name: "Photonlib - Build Docker - ${{ matrix.artifact-name }}"
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Config Git
+        run: |
+          git config --global --add safe.directory /__w/photonvision/photonvision
+      - name: Build PhotonLib
+        run: |
+          chmod +x gradlew
+          ./gradlew photon-lib:build --max-workers 1
+      - name: Publish
+        run: |
+          chmod +x gradlew
+          ./gradlew photon-lib:publish
+        env:
+          ARTIFACTORY_API_KEY: ${{ secrets.ARTIFACTORY_API_KEY }}
+        if: github.event_name == 'push'
+
+  photonlib-wpiformat:
+    name: "wpiformat"
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - name: Fetch all history and metadata
+        run: |
+          git fetch --prune --unshallow
+          git checkout -b pr
+          git branch -f master origin/master
+      - name: Set up Python 3.8
+        uses: actions/setup-python@v4
+        with:
+          python-version: 3.8
+      - name: Install clang-format
+        run: |
+          sudo sh -c "echo 'deb http://archive.ubuntu.com/ubuntu/ $(lsb_release -cs)-proposed restricted main multiverse universe' >> /etc/apt/sources.list.d/proposed-repositories.list"
+          sudo apt-get update -q
+          sudo apt-get install -y clang-format-12
+      - name: Install wpiformat
+        run: pip3 install wpiformat
+      - name: Run
+        run: wpiformat -clang 12
+      - name: Check Output
+        run: git --no-pager diff --exit-code HEAD
+      - name: Generate diff
+        run: git diff HEAD > wpiformat-fixes.patch
+        if: ${{ failure() }}
+      - uses: actions/upload-artifact@v3
+        with:
+          name: wpiformat fixes
+          path: wpiformat-fixes.patch
+        if: ${{ failure() }}
+
+  photon-build-package:
+    needs: [photonclient-build, photon-build-all, photonserver-build-offline-docs]
+
+    strategy:
+        fail-fast: false
+        matrix:
+          include:
+            - os: windows-latest
+              artifact-name: Win64
+              architecture: x64
+              arch-override: none
+            - os: macos-latest
+              artifact-name: macOS
+              architecture: x64
+              arch-override: none
+            - os: ubuntu-latest
+              artifact-name: Linux
+              architecture: x64
+              arch-override: none
+            - os: macos-latest
+              artifact-name: macOSArm
+              architecture: x64
+              arch-override: macarm64
+            - os: ubuntu-latest
+              artifact-name: LinuxArm32
+              architecture: x64
+              arch-override: linuxarm32
+            - os: ubuntu-latest
+              artifact-name: LinuxArm64
+              architecture: x64
+              arch-override: linuxarm64
+
+    # The type of runner that the job will run on.
+    runs-on: ${{ matrix.os }}
+    name: "Build fat JAR - ${{ matrix.artifact-name }}"
+
+    steps:
+      # Checkout code.
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      # Install Java 17.
+      - uses: actions/setup-java@v3
+        with:
+          java-version: 17
+          distribution: temurin
+
+      # Clear any existing web resources.
+      - run: |
+          rm -rf photon-server/src/main/resources/web/*
+          mkdir -p photon-server/src/main/resources/web/docs
+        if: ${{ (matrix.os) != 'windows-latest' }}
+      - run: |
+          del photon-server\src\main\resources\web\*.*
+          mkdir photon-server\src\main\resources\web\docs
+        if: ${{ (matrix.os) == 'windows-latest' }}
+
+      # Download client artifact to resources folder.
+      - uses: actions/download-artifact@v3
+        with:
+          name: built-client
+          path: photon-server/src/main/resources/web/
+
+      # Download docs artifact to resources folder.
+      - uses: actions/download-artifact@v3
+        with:
+          name: built-docs
+          path: photon-server/src/main/resources/web/docs
+
+      # Build fat jar for both pi and everything
+      - run: |
+          chmod +x gradlew
+          ./gradlew photon-server:shadowJar --max-workers 2 -PArchOverride=${{ matrix.arch-override }}
+        if: ${{ (matrix.arch-override != 'none') }}
+      - run: |
+          chmod +x gradlew
+          ./gradlew photon-server:shadowJar --max-workers 2
+        if: ${{ (matrix.arch-override == 'none') }}
+
+      # Upload final fat jar as artifact.
+      - uses: actions/upload-artifact@v3
+        with:
+          name: jar-${{ matrix.artifact-name }}
+          path: photon-server/build/libs
+
+
+  photon-image-generator:
+    needs: [photon-build-package]
+    if: ${{ github.event_name != 'pull_request' }}
+    strategy:
+        fail-fast: false
+        matrix:
+          include:
+            - os: ubuntu-latest
+              artifact-name: LinuxArm64
+              image_suffix: RaspberryPi
+              image_url: https://api.github.com/repos/photonvision/photon-pi-gen/releases/tags/v2023.1.1_arm64
+            - os: ubuntu-latest
+              artifact-name: LinuxArm64
+              image_suffix: limelight
+              image_url: https://api.github.com/repos/photonvision/photon-pi-gen/releases/tags/v2023.2.2_limelight-arm64
+
+    runs-on: ${{ matrix.os }}
+    name: "Build image - ${{ matrix.image_url }}"
+
+    steps:
+      # Checkout code.
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
       - uses: actions/download-artifact@v2
         with:
-          name: jar
+          name: jar-${{ matrix.artifact-name }}
+
+      - name: Generate image
+        run: |
+          chmod +x scripts/generatePiImage.sh
+          ./scripts/generatePiImage.sh ${{ matrix.image_url }} ${{ matrix.image_suffix }}
+
+      - uses: actions/upload-artifact@v3
+        name: Upload image
+        with:
+          name: image-${{ matrix.image_suffix }}
+          path: photonvision*.xz
+
+
+  photon-release:
+    needs: [photon-build-package, photon-image-generator]
+    runs-on: ubuntu-22.04
+    steps:
+      # Download literally every single artifact. This also downloads client and docs,
+      # but the filtering below won't pick these up (I hope)
+      - uses: actions/download-artifact@v2
+
+      - run: find
+
+      # Push to dev release
+      - uses: pyTooling/Actions/releaser@r0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          tag: 'Dev'
+          rm: true
+          files: |
+            **/*.xz
+            **/*.jar
+        if: github.event_name == 'push'
+
+      # Upload all jars and xz archives
       - uses: softprops/action-gh-release@v1
         with:
-          files: '**/*'
+          files: |
+            **/*.xz
+            **/*.jar
+        if: startsWith(github.ref, 'refs/tags/v')
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -30,6 +30,7 @@ backend/settings/
 *.nar
 *.ear
 *.zip
+*.xz
 *.tar.gz
 *.rar
 
@@ -104,17 +105,25 @@ fabric.properties
 # Android studio 3.1+ serialized cache file
 .idea/caches/build_file_checksums.ser
 
-
-photon-server/.gradle
-photon-server/target
-photon-server/src/main/java/META-INF
-photon-server/.settings
-photon-server/.classpath
-photon-server/.project
-photon-server/settings
-photon-server/dependency-reduced-pom.xml
+# Temporary build files
+**/.gradle
+**/target
+**/src/main/java/META-INF
+**/.settings
+**/.classpath
+**/.project
+**/settings
+**/dependency-reduced-pom.xml
 # photon-server/photon-vision.iml
 
+# compile_commands
+compile_commands.json
+
+# clang configuration and clangd cache
+.clang
+.clangd/
+.cache/
+
 New client/photon-client/*
 
 *.prefs
@@ -126,3 +135,21 @@ photon-server/photon-vision
 photon-server/src/main/resources/web
 photon-server/src/main/java/org/photonvision/PhotonVersion.java
 photon-server/src/main/generated/native/include/org_photonvision_raspi_PicamJNI.h
+*.bin
+.gradle
+.gradle/*
+photonvision_config
+build/spotlessJava
+build/*
+build
+photon-lib/src/main/java/org/photonvision/PhotonVersion.java
+/photonlib-java-examples/bin/
+photon-lib/src/generate/native/include/PhotonVersion.h
+.gitattributes
+lib/*
+photon-server/lib/libapriltag.so
+photon-server/bin/main/nativelibraries/apriltag/*
+photon-server/src/main/resources/nativelibraries/apriltag/*
+
+photonlib-java-examples/*/vendordeps/*
+photonlib-cpp-examples/*/vendordeps/*

.styleguide

@@ -0,0 +1,30 @@
+cppHeaderFileInclude {
+  \.h$
+  \.hpp$
+  \.inc$
+  \.inl$
+}
+
+cppSrcFileInclude {
+  \.cpp$
+}
+
+modifiableFileExclude {
+  \.jpg$
+  \.jpeg$
+  \.png$
+  \.gif$
+  \.so$
+  \.dll$
+}
+
+includeProject {
+  ^photonLib/
+}
+
+includeOtherLibs {
+  ^frc/
+  ^networktables/
+  ^units/
+  ^wpi/
+}

.styleguide-license

@@ -14,4 +14,3 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-

LICENSE_MathUtils_orthogonalizeRotationMatrix.txt

@@ -0,0 +1,23 @@
+Copyright (c) 2022 Photon Vision. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+   * Redistributions of source code must retain the above copyright
+     notice, this list of conditions and the following disclaimer.
+   * Redistributions in binary form must reproduce the above copyright
+     notice, this list of conditions and the following disclaimer in the
+     documentation and/or other materials provided with the distribution.
+   * Neither the name of FIRST, WPILib, nor the names of other WPILib
+     contributors may be used to endorse or promote products derived from
+     this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY FIRST AND OTHER WPILIB CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY NONINFRINGEMENT AND FITNESS FOR A PARTICULAR
+PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL FIRST OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -6,18 +6,59 @@ PhotonVision is the free, fast, and easy-to-use computer vision solution for the
 
 A copy of the latest Raspberry Pi image is available [here](https://github.com/PhotonVision/photon-pi-gen/releases). A copy of the latest standalone JAR is available [here](https://github.com/PhotonVision/photonvision/releases). If you are a Gloworm user you can find the latest Gloworm image [here](https://github.com/gloworm-vision/pi-gen/releases).
 
-If you are interested in contributing code or documentation to the project, please [read our getting started page for contributors](https://docs.photonvision.org/en/latest/docs/other/contributing/index.html) and **[join the Discord](https://discord.gg/wYxTwym) to introduce yourself!** We hope to provide a welcoming community to anyone who is interested in helping.
+If you are interested in contributing code or documentation to the project, please [read our getting started page for contributors](https://docs.photonvision.org/en/latest/docs/contributing/index.html) and **[join the Discord](https://discord.gg/wYxTwym) to introduce yourself!** We hope to provide a welcoming community to anyone who is interested in helping.
 
 ## Authors
 
-A list of contributors is available in our documentation on ReadTheDocs.
+<a href="https://github.com/PhotonVision/photonvision/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=PhotonVision/photonvision" />
+</a>
+
+## Gradle Arguments
+
+Note that these are case sensitive!
+
+* `-PArchOverride=foobar`: builds for a target system other than your current architecture. Valid overrides are winx32, winx64,
+macx64, macarm64, linuxx64, linuxarm64, linuxarm32, and linuxathena.
+- `-PtgtIp`: deploys (builds and copies the JAR) to the coprocessor at the specified IP
+- `-Pprofile`: enables JVM profiling
+
+## Building
+
+Gradle is used for all C++ and Java code, and NPM is used for the web UI. Instructions to compile PhotonVision yourself can be found [in our docs](https://docs.photonvision.org/en/latest/docs/contributing/photonvision/build-instructions.html?highlight=npm%20install#compiling-instructions).
+
+You can run one of the many built in examples straight from the command line, too! They contain a fully featured robot project, and some include simulation support. The projects can be found inside the `photonlib-java-examples` and `photonlib-cpp-examples` subdirectories, respectively. The projects currently available include:
+
+- photonlib-java-examples:
+  - aimandrange:simulateJava
+  - aimattarget:simulateJava
+  - getinrange:simulateJava
+  - simaimandrange:simulateJava
+  - simposeest:simulateJava
+- photonlib-cpp-examples:
+  - aimandrange:simulateNative
+  - getinrange:simulateNative
+
+To run them, use the commands listed below. Photonlib must first be published to your local maven repository, then the `copyPhotonlib` task will copy the generated vendordep json file into each example. After that, the simulateJava/simulateNative task can be used like a normal robot project. Robot simulation with attached debugger is technically possible by using simulateExternalJava and modifying the launch script it exports, though unsupported.
+
+```
+~/photonvision$ ./gradlew publishToMavenLocal
+
+~/photonvision$ cd photonlib-java-examples
+~/photonvision/photonlib-java-examples$ ./gradlew copyPhotonlib
+~/photonvision/photonlib-java-examples$ ./gradlew <example-name>:simulateJava
+
+~/photonvision$ cd photonlib-cpp-examples
+~/photonvision/photonlib-cpp-examples$ ./gradlew copyPhotonlib
+~/photonvision/photonlib-cpp-examples$ ./gradlew <example-name>:simulateNative
+```
 
 
 ## Acknowledgments
 PhotonVision was forked from [Chameleon Vision](https://github.com/Chameleon-Vision/chameleon-vision/). Thank you to everyone who worked on the original project.
 
 
-* [WPILib](https://github.com/wpilibsuite) - Specifically [cscore](https://github.com/wpilibsuite/allwpilib/tree/master/cscore), [CameraServer](https://github.com/wpilibsuite/allwpilib/tree/master/cameraserver), [NTCore](https://github.com/wpilibsuite/allwpilib/tree/master/ntcore), and [OpenCV](https://github.com/wpilibsuite/thirdparty-opencv). 
+* [WPILib](https://github.com/wpilibsuite) - Specifically [cscore](https://github.com/wpilibsuite/allwpilib/tree/master/cscore), [CameraServer](https://github.com/wpilibsuite/allwpilib/tree/master/cameraserver), [NTCore](https://github.com/wpilibsuite/allwpilib/tree/master/ntcore), and [OpenCV](https://github.com/wpilibsuite/thirdparty-opencv).
 
 * [Apache Commons](https://commons.apache.org/) - Specifically [Commons Math](https://commons.apache.org/proper/commons-math/), and [Commons Lang](https://commons.apache.org/proper/commons-lang/)
 
@@ -27,5 +68,11 @@ PhotonVision was forked from [Chameleon Vision](https://github.com/Chameleon-Vis
 
 * [FasterXML](https://github.com/FasterXML) - Specifically [jackson](https://github.com/FasterXML/jackson)
 
-## License  
+## License
 PhotonVision is licensed under the [GNU General Public License](https://www.gnu.org/licenses/gpl-3.0.html)
+
+## Meeting Notes
+Our meeting notes can be found in the wiki section of this repository.
+
+* [2020 Meeting Notes](https://github.com/PhotonVision/photonvision/wiki/2020-Meeting-Notes)
+* [2021 Meeting Notes](https://github.com/PhotonVision/photonvision/wiki/2021-Meeting-Notes)

build.gradle

@@ -0,0 +1,62 @@
+plugins {
+    id "com.diffplug.spotless" version "6.1.2"
+    id "com.github.johnrengelman.shadow" version "7.1.2"
+    id "com.github.node-gradle.node" version "3.1.1" apply false
+    id "edu.wpi.first.GradleJni" version "1.0.0"
+    id "edu.wpi.first.GradleVsCode" version "1.1.0"
+    id "edu.wpi.first.NativeUtils" version "2023.11.1" apply false
+    id "edu.wpi.first.wpilib.repositories.WPILibRepositoriesPlugin" version "2020.2"
+    id "org.hidetake.ssh" version "2.10.1"
+    id 'edu.wpi.first.WpilibTools' version '1.0.0'
+}
+
+import org.gradle.api.internal.artifacts.dependencies.DefaultExternalModuleDependency;
+
+allprojects {
+    repositories {
+        mavenCentral()
+        mavenLocal()
+        maven { url = "https://maven.photonvision.org/repository/internal/" }
+    }
+    wpilibRepositories.addAllReleaseRepositories(it)
+    wpilibRepositories.addAllDevelopmentRepositories(it)
+}
+
+// Configure the version number.
+apply from: "versioningHelper.gradle"
+
+ext {
+    wpilibVersion = "2023.2.1"
+    opencvVersion = "4.6.0-4"
+    joglVersion = "2.4.0-rc-20200307"
+    pubVersion = versionString
+    isDev = pubVersion.startsWith("dev")
+
+    // A list, for legacy reasons, with only the current platform contained
+    String nativeName = wpilibTools.platformMapper.currentPlatform.platformName;
+    if (nativeName == "linuxx64") nativeName = "linuxx86-64";
+    if (nativeName == "winx64") nativeName = "windowsx86-64";
+    if (nativeName == "macx64") nativeName = "osxx86-64";
+    if (nativeName == "macarm64") nativeName = "osxarm64";
+    jniPlatform = nativeName
+    println("Building for platform " + jniPlatform)
+}
+
+wpilibTools.deps.wpilibVersion = wpilibVersion
+
+spotless {
+    java {
+        toggleOffOn()
+        googleJavaFormat()
+        indentWithTabs(2)
+        indentWithSpaces(4)
+        removeUnusedImports()
+        trimTrailingWhitespace()
+        endWithNewline()
+    }
+    java {
+        target "**/*.java"
+        targetExclude("photon-core/src/main/java/org/photonvision/PhotonVersion.java")
+        targetExclude("photon-lib/src/main/java/org/photonvision/PhotonVersion.java")
+    }
+}

codecov.yml

@@ -2,4 +2,4 @@ coverage:
   # Turning off commit status to prevent failed checks if coverage decreases
   status:
     project: no
-    patch: no 
+    patch: no

gradle.properties

@@ -0,0 +1,8 @@
+# The --add-exports flags work around a bug with spotless and JDK 17
+# https://github.com/diffplug/spotless/issues/834
+org.gradle.jvmargs= \
+  --add-exports jdk.compiler/com.sun.tools.javac.api=ALL-UNNAMED \
+  --add-exports jdk.compiler/com.sun.tools.javac.file=ALL-UNNAMED \
+  --add-exports jdk.compiler/com.sun.tools.javac.parser=ALL-UNNAMED \
+  --add-exports jdk.compiler/com.sun.tools.javac.tree=ALL-UNNAMED \
+  --add-exports jdk.compiler/com.sun.tools.javac.util=ALL-UNNAMED

gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.0-bin.zip
-distributionSha256Sum=5a3578b9f0bb162f5e08cf119f447dfb8fa950cedebb4d2a977e912a11a74b91
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

gradlew

@@ -0,0 +1,190 @@
+#!/bin/sh
+
+#
+# Copyright <20> 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
+
+APP_NAME="Gradle"
+APP_BASE_NAME=${0##*/}
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+# Collect all arguments for the java command;
+#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
+#     shell script including quotes and variable substitutions, so put them in
+#     double quotes to make sure that they get re-expanded; and
+#   * put everything else in single quotes, so that it's not re-expanded.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

gradlew.bat

@@ -29,6 +29,9 @@ if "%DIRNAME%" == "" set DIRNAME=.
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
 @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
 
@@ -37,7 +40,7 @@ if defined JAVA_HOME goto findJavaFromJavaHome
 
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto init
+if "%ERRORLEVEL%" == "0" goto execute
 
 echo.
 echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
@@ -51,7 +54,7 @@ goto fail
 set JAVA_HOME=%JAVA_HOME:"=%
 set JAVA_EXE=%JAVA_HOME%/bin/java.exe
 
-if exist "%JAVA_EXE%" goto init
+if exist "%JAVA_EXE%" goto execute
 
 echo.
 echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
@@ -61,28 +64,14 @@ echo location of your Java installation.
 
 goto fail
 
-:init
-@rem Get command-line arguments, handling Windows variants
-
-if not "%OS%" == "Windows_NT" goto win9xME_args
-
-:win9xME_args
-@rem Slurp the command line arguments.
-set CMD_LINE_ARGS=
-set _SKIP=2
-
-:win9xME_args_slurp
-if "x%~1" == "x" goto execute
-
-set CMD_LINE_ARGS=%*
-
 :execute
 @rem Setup the command line
 
 set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
+
 @rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
 
 :end
 @rem End local scope for the variables with windows NT shell

photon-client/package.json

@@ -13,11 +13,13 @@
     "axios": "^0.19.2",
     "core-js": "^2.6.11",
     "downloadjs": "^1.4.7",
+    "jspdf": "^2.4.0",
     "material-design-icons-iconfont": "^5.0.1",
     "msgpack5": "^4.2.1",
+    "three-full": "^28.0.2",
     "vue": "^2.6.12",
     "vue-axios": "^2.1.5",
-    "vue-native-websocket": "git+https://github.com/PhotonVision/vue-native-websocket.git#7a32791",
+    "vue-native-websocket": "git+https://git@github.com/PhotonVision/vue-native-websocket.git#5189f29",
     "vue-router": "^3.4.3",
     "vuetify": "^2.3.10",
     "vuex": "^3.5.1"

photon-client/public/index.html

@@ -17,4 +17,4 @@
     <!-- built files will be auto injected -->
 </body>
 
-</html>
+</html>

photon-client/public/thinclient.html

@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>ThinClient</title>
+
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        .imgbox {
+            display: grid;
+            height: 100%;
+            width: 100%;
+        }
+        .center-fit {
+
+            width: 90vw;
+            margin: auto;
+        }
+    </style>
+
+</head>
+
+<body>
+    <hr>
+        <div class="imgbox">
+            <img id="streamImg" class="center-fit" src=''>
+        </div>
+    <hr>
+
+    <form id="frm1">
+        Host <input type="text" id="host" value="photonvision.local"><br>
+        Port <input type="text" id="port" value="1181"><br>
+    </form>
+
+    <button>Start Stream</button>
+
+    <script type="module">
+        class WebsocketVideoStream{
+
+            constructor(drawDiv, streamPort, host) {
+
+                this.drawDiv = drawDiv;
+                this.image = document.getElementById(this.drawDiv);
+                this.streamPort = streamPort;
+                this.newStreamPortReq = null;
+                this.serverAddr = "ws://" + host + "/websocket_cameras";
+                this.dispNoStream();
+                this.ws_connect();
+                this.imgData = null;
+                this.imgDataTime = -1;
+                this.imgObjURL = null;
+                this.frameRxCount = 0;
+
+                //Display state machine
+                this.DSM_DISCONNECTED = "DISCONNECTED";
+                this.DSM_WAIT_FOR_VALID_PORT = "WAIT_FOR_VALID_PORT";
+                this.DSM_SUBSCRIBE = "SUBSCRIBE";
+                this.DSM_WAIT_FOR_FIRST_FRAME = "WAIT_FOR_FIRST_FRAME";
+                this.DSM_SHOWING = "SHOWING";
+                this.DSM_RESTART_UNSUBSCRIBE = "UNSUBSCRIBE";
+                this.DSM_RESTART_WAIT = "WAIT_BEFORE_SUBSCRIBE";
+
+                this.dsm_cur_state = this.DSM_DISCONNECTED;
+                this.dsm_prev_state = this.DSM_DISCONNECTED;
+                this.dsm_restart_start_time = window.performance.now();
+
+                requestAnimationFrame(()=>this.animationLoop());
+            }
+
+            dispImageData(){
+                //From https://stackoverflow.com/questions/67507616/set-image-src-from-image-blob/67507685#67507685
+                if(this.imgObjURL != null){
+                    URL.revokeObjectURL(this.imgObjURL)
+                }
+                this.imgObjURL = URL.createObjectURL(this.imgData);
+
+                //Update the image with the new mimetype and image
+                this.image.src = this.imgObjURL;
+            }
+
+            dispNoStream() {
+                this.image.src = "loading.gif";
+            }
+
+            animationLoop(){
+                // Update time metrics
+                var now = window.performance.now();
+                var timeInState  = now - this.dsm_restart_start_time;
+
+                // Save previous state
+                this.dsm_prev_state = this.dsm_cur_state;
+
+                // Evaluate state transitions
+                if(this.serverConnectionActive == false){
+                    //Any state - if the server connection goes false, always transition to disconnected
+                    this.dsm_cur_state = this.DSM_DISCONNECTED;
+                } else {
+                    //Conditional transitions
+                    switch(this.dsm_cur_state) {
+                        case this.DSM_DISCONNECTED:
+                            //Immediately transition to waiting for the first frame
+                            this.dsm_cur_state = this.DSM_WAIT_FOR_VALID_PORT;
+                            break;
+                        case this.DSM_WAIT_FOR_VALID_PORT:
+                            // Wait until the user has configured a valid port
+                            if(this.streamPort > 0){
+                                this.dsm_cur_state = this.DSM_SUBSCRIBE;
+                            } else {
+                                this.dsm_cur_state = this.DSM_WAIT_FOR_VALID_PORT;
+                            }
+                            break;
+                        case this.DSM_SUBSCRIBE:
+                            // Immediately transition after subscriptions is sent
+                            this.dsm_cur_state = this.DSM_WAIT_FOR_FIRST_FRAME;
+                            break;
+                        case this.DSM_WAIT_FOR_FIRST_FRAME:
+                            if(this.imgData != null){
+                                //we got some image data, start showing it
+                                this.dsm_cur_state = this.DSM_SHOWING;
+                            } else if (this.newStreamPortReq != null){
+                                //Stream port requested changed, unsubscribe and restart
+                                this.dsm_cur_state = this.DSM_RESTART_UNSUBSCRIBE;
+                            } else {
+                                this.dsm_cur_state = this.DSM_WAIT_FOR_FIRST_FRAME;
+                            }
+                            break;
+                        case this.DSM_SHOWING:
+                            if((now - this.imgDataTime) > 2500){
+                                //timeout, begin the restart sequence
+                                this.dsm_cur_state = this.DSM_RESTART_UNSUBSCRIBE;
+                            } else if (this.newStreamPortReq != null){
+                                //Stream port requested changed, unsubscribe and restart
+                                this.dsm_cur_state = this.DSM_RESTART_UNSUBSCRIBE;
+                            }  else {
+                                //stay in this state.
+                                this.dsm_cur_state = this.DSM_SHOWING;
+                            }
+                            break;
+                        case this.DSM_RESTART_UNSUBSCRIBE:
+                            //Only should spend one loop in Unsubscribe, immediately transition
+                            this.dsm_cur_state = this.DSM_RESTART_WAIT;
+                            break;
+                        case this.DSM_RESTART_WAIT:
+                            if (timeInState > 250) {
+                                //we've waited long enough, go to try to re-subscribe
+                                this.dsm_cur_state = this.DSM_WAIT_FOR_VALID_PORT;
+                            } else {
+                                //stay in this state.
+                                this.dsm_cur_state = this.DSM_RESTART_WAIT;
+                            }
+                            break;
+                        default:
+                            // Shouldn't get here, default back to init
+                            this.dsm_cur_state = this.DSM_DISCONNECTED;
+                    }
+                }
+
+                //take current-state or state-transition actions
+
+                if(this.dsm_cur_state != this.dsm_prev_state){
+                    //Any state transition
+                    console.log("State Change: " + this.dsm_prev_state + " -> " + this.dsm_cur_state);
+                }
+
+                if(this.dsm_cur_state == this.DSM_SHOWING){
+                    // Currently in SHOWING
+                    this.dispImageData();
+                }
+
+                if(this.dsm_cur_state != this.DSM_SHOWING && this.dsm_prev_state == this.DSM_SHOWING ){
+                    //Any transition out of showing - no stream
+                    this.dispNoStream();
+                }
+
+                if(this.dsm_cur_state == this.DSM_RESTART_UNSUBSCRIBE){
+                    // Currently in UNSUBSCRIBE, do the unsubscribe actions
+                    this.stopStream();
+                    this.dsm_restart_start_time = now;
+                }
+
+                if(this.dsm_cur_state == this.DSM_SUBSCRIBE){
+                    // Currently in SUBSCRIBE, do the subscribe actions
+                    this.startStream();
+                    this.dsm_restart_start_time = now;
+                }
+
+                if(this.dsm_cur_state == this.DSM_WAIT_FOR_VALID_PORT){
+                    // Currently waiting for a vaild port to be requested
+                    if(this.newStreamPortReq != null){
+                        this.streamPort = this.newStreamPortReq;
+                        this.newStreamPortReq = null;
+                    }
+                }
+
+                requestAnimationFrame(()=>this.animationLoop());
+            }
+
+            startStream() {
+                console.log("Subscribing to port " + this.streamPort);
+                this.imgData = null;
+                this.ws.send(JSON.stringify({"cmd": "subscribe", "port":this.streamPort}));
+            }
+
+            stopStream() {
+                console.log("Unsubscribing");
+                this.ws.send(JSON.stringify({"cmd": "unsubscribe"}));
+                this.imgData = null;
+            }
+
+            setPort(streamPort){
+                console.log("Port set to " + streamPort);
+                this.newStreamPortReq = streamPort;
+            }
+
+            ws_onOpen() {
+                // Set the flag allowing general server communication
+                this.serverConnectionActive = true;
+                console.log("Connected!");
+            }
+
+            ws_onClose(e) {
+                //Clear flags to stop server communication
+                this.ws = null;
+                this.serverConnectionActive = false;
+
+                console.log('Camera Socket is closed. Reconnect will be attempted in 0.5 second.', e.reason);
+                setTimeout(this.ws_connect.bind(this), 500);
+
+                if(!e.wasClean){
+                    console.error('Socket encountered error!');
+                }
+
+            }
+
+            ws_onError(e){
+                e; //prevent unused failure
+                this.ws.close();
+            }
+
+            ws_onMessage(e){
+                if(typeof e.data === 'string'){
+                    //string data from host
+                    //TODO - anything to recieve info here? Maybe "avaialble streams?"
+                } else {
+                    if(e.data.size > 0){
+                        //binary data - a frame
+                        this.imgData = e.data;
+                        this.imgDataTime = window.performance.now();
+                        this.frameRxCount++;
+                    } else {
+                        //TODO - server is sending empty frames?
+                    }
+
+                }
+
+            }
+
+            ws_connect() {
+                this.serverConnectionActive = false;
+                this.ws = new WebSocket(this.serverAddr);
+                this.ws.binaryType = "blob";
+                this.ws.onopen = this.ws_onOpen.bind(this);
+                this.ws.onmessage = this.ws_onMessage.bind(this);
+                this.ws.onclose = this.ws_onClose.bind(this);
+                this.ws.onerror = this.ws_onError.bind(this);
+                console.log("Connecting to server " + this.serverAddr);
+            }
+
+            ws_close(){
+                this.ws.close();
+            }
+
+        }
+
+        var stream = null;
+
+        function streamStartRequest() {
+            var host = document.getElementById("host").value + ":5800";
+            var port = document.getElementById("port").value;
+            if(stream == null){
+                stream = new WebsocketVideoStream("streamImg",port,host);
+            } else {
+                stream.setPort(port);
+            }
+
+        }
+
+        // Attach listener
+        document.querySelector('button').addEventListener('click', streamStartRequest);
+
+        // Deal with URLParams, validating inputs
+        const queryString = window.location.search;
+        const urlParams = new URLSearchParams(queryString);
+        const port_in = urlParams.get('port')
+        const host_in = urlParams.get('host')
+        if(port_in != ""){
+            document.getElementById("port").value = port_in;
+        }
+
+        if(host_in != ""){
+            document.getElementById("host").value = host_in;
+        }
+
+        if(port_in != "" && host_in != ""){
+            streamStartRequest(); //we got valid inputs, auto-start the stream
+        }
+
+
+    </script>
+
+</body>
+
+
+</html>

photon-client/src/App.vue

@@ -1,35 +1,17 @@
 <template>
   <v-app>
     <!-- Although most of the app runs with the "light" theme, the navigation drawer needs to have white text and icons so it uses the dark theme-->
-    <v-navigation-drawer
-      dark
-      app
-      permanent
-      :mini-variant="compact"
-      color="primary"
-    >
+    <v-navigation-drawer dark app permanent :mini-variant="compact" color="primary">
       <v-list>
         <!-- List item for the heading; note that there are some tricks in setting padding and image width make things look right -->
         <v-list-item :class="compact ? 'pr-0 pl-0' : ''">
           <v-list-item-icon class="mr-0">
-            <img
-              v-if="!compact"
-              class="logo"
-              src="./assets/logoLarge.png"
-            >
-            <img
-              v-else
-              class="logo"
-              src="./assets/logoSmall.png"
-            >
+            <img v-if="!compact" class="logo" src="./assets/logoLarge.png">
+            <img v-else class="logo" src="./assets/logoSmall.png">
           </v-list-item-icon>
         </v-list-item>
 
-        <v-list-item
-          link
-          to="dashboard"
-          @click="rollbackPipelineIndex()"
-        >
+        <v-list-item link to="dashboard" @click="rollbackPipelineIndex()">
           <v-list-item-icon>
             <v-icon>mdi-view-dashboard</v-icon>
           </v-list-item-icon>
@@ -37,12 +19,7 @@
             <v-list-item-title>Dashboard</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
-        <v-list-item
-          ref="camerasTabOpener"
-          link
-          to="cameras"
-          @click="switchToDriverMode()"
-        >
+        <v-list-item ref="camerasTabOpener" link to="cameras" @click="switchToDriverMode()">
           <v-list-item-icon>
             <v-icon>mdi-camera</v-icon>
           </v-list-item-icon>
@@ -50,11 +27,7 @@
             <v-list-item-title>Cameras</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
-        <v-list-item
-          link
-          to="settings"
-          @click="switchToSettingsTab()"
-        >
+        <v-list-item link to="settings" @click="switchToSettingsTab()">
           <v-list-item-icon>
             <v-icon>mdi-settings</v-icon>
           </v-list-item-icon>
@@ -62,10 +35,7 @@
             <v-list-item-title>Settings</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
-        <v-list-item
-          link
-          to="docs"
-        >
+        <v-list-item link to="docs">
           <v-list-item-icon>
             <v-icon>mdi-bookshelf</v-icon>
           </v-list-item-icon>
@@ -73,11 +43,7 @@
             <v-list-item-title>Documentation</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
-        <v-list-item
-          v-if="this.$vuetify.breakpoint.mdAndUp"
-          link
-          @click.stop="toggleCompactMode"
-        >
+        <v-list-item v-if="this.$vuetify.breakpoint.mdAndUp" link @click.stop="toggleCompactMode">
           <v-list-item-icon>
             <v-icon v-if="compact">
               mdi-chevron-right
@@ -87,36 +53,59 @@
             </v-icon>
           </v-list-item-icon>
           <v-list-item-content>
-            <v-list-item-title>Advanced Mode</v-list-item-title>
+            <v-list-item-title>Compact Mode</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
 
-        <v-list-item style="position: absolute; bottom: 0; left: 0;">
-          <v-list-item-icon>
-            <v-icon v-if="$store.state.backendConnected">
-              mdi-wifi
-            </v-icon>
-            <v-icon
-              v-else
-              class="pulse"
-              style="border-radius: 100%;"
-            >
-              mdi-wifi-off
-            </v-icon>
-          </v-list-item-icon>
-          <v-list-item-content>
-            <v-list-item-title>
-              {{ $store.state.backendConnected ? "Connected" : "Trying to connect..." }}
-            </v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
+        <div style="position: absolute; bottom: 0; left: 0;">
+          <v-list-item>
+            <v-list-item-icon>
+              <v-icon v-if="$store.state.settings.networkSettings.runNTServer">
+                mdi-server
+              </v-icon>
+              <img v-else-if="$store.state.ntConnectionInfo.connected" src="@/assets/robot.svg" alt="">
+              <img v-else class="pulse" style="border-radius: 100%" src="@/assets/robot-off.svg" alt="">
+            </v-list-item-icon>
+            <v-list-item-content>
+              <v-list-item-title v-if="$store.state.settings.networkSettings.runNTServer" class="text-wrap">
+                NetworkTables server running for {{ $store.state.ntConnectionInfo.clients ?
+                    $store.state.ntConnectionInfo.clients : 'zero'
+                }} clients!
+              </v-list-item-title>
+              <v-list-item-title v-else-if="$store.state.ntConnectionInfo.connected && $store.state.backendConnected"
+                class="text-wrap">
+                Robot connected! {{ $store.state.ntConnectionInfo.address }}
+              </v-list-item-title>
+              <v-list-item-title v-else class="text-wrap">
+                Not connected to robot!
+              </v-list-item-title>
+              <router-link v-if="!$store.state.settings.networkSettings.runNTServer" to="settings" class="accent--text"
+                @click="switchToSettingsTab">
+                Team number is {{ $store.state.settings.networkSettings.teamNumber }}
+              </router-link>
+            </v-list-item-content>
+          </v-list-item>
+
+          <v-list-item>
+            <v-list-item-icon>
+              <v-icon v-if="$store.state.backendConnected">
+                mdi-wifi
+              </v-icon>
+              <v-icon v-else class="pulse" style="border-radius: 100%;">
+                mdi-wifi-off
+              </v-icon>
+            </v-list-item-icon>
+            <v-list-item-content>
+              <v-list-item-title class="text-wrap">
+                {{ $store.state.backendConnected ? "Backend Connected" : "Trying to connect..." }}
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </div>
       </v-list>
     </v-navigation-drawer>
     <v-main>
-      <v-container
-        fluid
-        fill-height
-      >
+      <v-container fluid fill-height>
         <v-layout>
           <v-flex>
             <router-view @switch-to-cameras="switchToDriverMode" />
@@ -125,143 +114,163 @@
       </v-container>
     </v-main>
 
-    <v-dialog
-      v-model="$store.state.logsOverlay"
-      width="1500"
-      dark
-    >
+    <v-dialog v-model="$store.state.logsOverlay" width="1500" dark>
       <logs />
     </v-dialog>
+    <v-dialog v-model="needsTeamNumberSet" width="500" dark persistent>
+      <v-card dark color="primary" flat>
+        <v-card-title>No team number set!</v-card-title>
+        <v-card-text>
+          PhotonVision cannot connect to your robot! Please
+          <router-link to="settings" class="accent--text" @click="switchToSettingsTab">
+            visit the settings tab
+          </router-link>
+          and set your team number.
+        </v-card-text>
+      </v-card>
+    </v-dialog>
   </v-app>
 </template>
 
 <script>
 import Logs from "./views/LogsView"
+import { ReconnectingWebsocket } from "./plugins/ReconnectingWebsocket.js"
 
-    export default {
-        name: 'App',
-        components: {
-            Logs
-        },
-        data: () => ({
-            // Used so that we can switch back to the previously selected pipeline after camera calibration
-            previouslySelectedIndices: [],
-            timer: undefined,
-        }),
-        computed: {
-            compact: {
-                get() {
-                    if (this.$store.state.compactMode === undefined) {
-                        return this.$vuetify.breakpoint.smAndDown;
-                    } else {
-                        return this.$store.state.compactMode || this.$vuetify.breakpoint.smAndDown;
-                    }
-                },
-                set(value) {
-                    // compactMode is the user's preference for compact mode; it overrides screen size
-                    this.$store.commit("compactMode", value);
-                    localStorage.setItem("compactMode", value);
-                },
-            },
-        },
-        created() {
-            document.addEventListener("keydown", e => {
-                switch (e.key) {
-                    case "`":
-                        this.$store.state.logsOverlay = !this.$store.state.logsOverlay;
-                        break;
-                    case "z":
-                        if (e.ctrlKey && this.$store.getters.canUndo) {
-                            this.$store.dispatch('undo', {vm: this});
-                        }
-                        break;
-                    case "y":
-                        if (e.ctrlKey && this.$store.getters.canRedo) {
-                            this.$store.dispatch('redo', {vm: this});
-                        }
-                        break;
-
-                }
-            });
-
-            this.$options.sockets.onmessage = (data) => {
-                try {
-                    let message = this.$msgPack.decode(data.data);
-                    for (let prop in message) {
-                        if (message.hasOwnProperty(prop)) {
-                            this.handleMessage(prop, message[prop]);
-                        }
-                    }
-                } catch (error) {
-                    console.error('error: ' + JSON.stringify(data.data) + " , " + error);
-                }
-            };
-            this.$options.sockets.onopen = () => {
-                this.$store.state.backendConnected = true;
-                this.$store.state.connectedCallbacks.forEach(it => it())
-            };
-
-            let closed = () => {
-                this.$store.state.backendConnected = false;
-            };
-            this.$options.sockets.onclose = closed;
-            this.$options.sockets.onerror = closed;
-
-            this.$connect();
-        },
-        methods: {
-            handleMessage(key, value) {
-                if (key === "logMessage") {
-                    this.logMessage(value["logMessage"], value["logLevel"]);
-                } else if (key === "updatePipelineResult") {
-                    this.$store.commit('mutatePipelineResults', value)
-                } else if (this.$store.state.hasOwnProperty(key)) {
-                    this.$store.commit(key, value);
-                } else if (this.$store.getters.currentPipelineSettings.hasOwnProperty(key)) {
-                    this.$store.commit('mutatePipeline', {[key]: value});
-                } else if (this.$store.state.settings.hasOwnProperty(key)) {
-                    this.$store.commit('mutateSettings', {[key]: value});
-                } else {
-                    switch (key) {
-                        default: {
-                            console.error("Unknown message from backend: " + value);
-                        }
-                    }
-                }
-            },
-            toggleCompactMode() {
-                this.compact = !this.compact;
-            },
-            // eslint-disable-next-line no-unused-vars
-            logMessage(message, levelInt) {
-                this.$store.commit('logString', {
-                    ['level']: levelInt,
-                    ['message']: message
-                })
-            },
-            switchToDriverMode() {
-                if (!this.previouslySelectedIndices) this.previouslySelectedIndices = [];
-
-                for (const [i, cameraSettings] of this.$store.state.cameraSettings.entries()) {
-                  this.previouslySelectedIndices[i] = cameraSettings.currentPipelineIndex;
-                  this.handleInputWithIndex('currentPipeline', -1, i);
-                }
-            },
-            rollbackPipelineIndex()
-            {
-              if (this.previouslySelectedIndices !== null) {
-                for (const [i] of this.$store.state.cameraSettings.entries()) {
-                  this.handleInputWithIndex('currentPipeline', this.previouslySelectedIndices[i] || 0, i);
-                }
-              }
-              this.previouslySelectedIndices = null;
-            }
-,
-            switchToSettingsTab() {
-                this.axios.post('http://' + this.$address + '/api/sendMetrics', {})
-            }
+export default {
+  name: 'App',
+  components: {
+    Logs
+  },
+  data: () => ({
+    // Used so that we can switch back to the previously selected pipeline after camera calibration
+    previouslySelectedIndices: [],
+    timer: undefined,
+    teamNumberDialog: true,
+    websocket: null,
+  }),
+  computed: {
+    needsTeamNumberSet: {
+      get() {
+        return this.$store.state.settings.networkSettings.teamNumber < 1
+          && this.teamNumberDialog && this.$store.state.backendConnected
+          && !this.$route.name.toLowerCase().includes("settings");
+      }
+    },
+    compact: {
+      get() {
+        if (this.$store.state.compactMode === undefined) {
+          return this.$vuetify.breakpoint.smAndDown;
+        } else {
+          return this.$store.state.compactMode || this.$vuetify.breakpoint.smAndDown;
         }
-    };
+      },
+      set(value) {
+        // compactMode is the user's preference for compact mode; it overrides screen size
+        this.$store.commit("compactMode", value);
+        localStorage.setItem("compactMode", value);
+      },
+    },
+  },
+  created() {
+    document.addEventListener("keydown", e => {
+      switch (e.key) {
+        case "`":
+          this.$store.state.logsOverlay = !this.$store.state.logsOverlay;
+          break;
+        case "z":
+          if (e.ctrlKey && this.$store.getters.canUndo) {
+            this.$store.dispatch('undo', { vm: this });
+          }
+          break;
+        case "y":
+          if (e.ctrlKey && this.$store.getters.canRedo) {
+            this.$store.dispatch('redo', { vm: this });
+          }
+          break;
+
+      }
+    });
+
+    const wsDataURL = 'ws://' + this.$address + '/websocket_data';
+    this.websocket = new ReconnectingWebsocket(
+      wsDataURL,
+
+      // On data in
+      (event) => {
+        try {
+          let message = this.$msgPack.decode(event.data);
+          for (let prop in message) {
+            if (message.hasOwnProperty(prop)) {
+              this.handleMessage(prop, message[prop]);
+            }
+          }
+        } catch (error) {
+          console.log(event)
+          console.error('error: ' + JSON.stringify(event.data) + " , " + error);
+        }
+      },
+
+      // on connect
+      (event) => {
+        event; this.$store.commit("backendConnected", true);
+        this.$store.state.connectedCallbacks.forEach(it => it());
+       },
+
+      // on disconnect
+      (event) => { event; this.$store.commit("backendConnected", false) }
+    );
+
+    this.$store.commit("websocket", this.websocket);
+  },
+  methods: {
+    handleMessage(key, value) {
+      if (key === "logMessage") {
+        this.logMessage(value["logMessage"], value["logLevel"]);
+      } else if (key === "log") {
+        this.logMessage(value["logMessage"]["logMessage"], value["logMessage"]["logLevel"]);
+      } else if (key === "updatePipelineResult") {
+        this.$store.commit('mutatePipelineResults', value)
+      } else if (this.$store.state.hasOwnProperty(key)) {
+        this.$store.commit(key, value);
+      } else if (this.$store.getters.currentPipelineSettings.hasOwnProperty(key)) {
+        this.$store.commit('mutatePipeline', { [key]: value });
+      } else if (this.$store.state.settings.hasOwnProperty(key)) {
+        this.$store.commit('mutateSettings', { [key]: value });
+      } else {
+        console.error("Unknown message from backend: " + value);
+      }
+    },
+    toggleCompactMode() {
+      this.compact = !this.compact;
+    },
+    // eslint-disable-next-line no-unused-vars
+    logMessage(message, levelInt) {
+      this.$store.commit('logString', {
+        ['level']: levelInt,
+        ['message']: message
+      })
+    },
+    switchToDriverMode() {
+      if (!this.previouslySelectedIndices) this.previouslySelectedIndices = [];
+
+      for (const [i, cameraSettings] of this.$store.state.cameraSettings.entries()) {
+        this.previouslySelectedIndices[i] = cameraSettings.currentPipelineIndex;
+        this.handleInputWithIndex('currentPipeline', -1, i);
+      }
+    },
+    rollbackPipelineIndex() {
+      if (this.previouslySelectedIndices !== null) {
+        for (const [i] of this.$store.state.cameraSettings.entries()) {
+          this.handleInputWithIndex('currentPipeline', this.previouslySelectedIndices[i] || 0, i);
+        }
+      }
+      this.previouslySelectedIndices = null;
+    },
+    switchToSettingsTab() {
+      this.axios.post('http://' + this.$address + '/api/sendMetrics', {})
+    }
+  }
+};
 </script>
 
 <style lang="sass">
@@ -269,76 +278,77 @@ import Logs from "./views/LogsView"
 </style>
 
 <style>
-    .pulse {
-        animation: pulse-animation 2s infinite;
-    }
+.pulse {
+  animation: pulse-animation 2s infinite;
+}
 
-    @keyframes pulse-animation {
-        0% {
-            box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
-            background-color: rgba(0, 0, 0, 0.2);
-        }
-        100% {
-            box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
-            background-color: rgba(0, 0, 0, 0);
-        }
-    }
+@keyframes pulse-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
+    background-color: rgba(0, 0, 0, 0.2);
+  }
 
-    .logo {
-        width: 100%;
-        height: 70px;
-        object-fit: contain;
-    }
+  100% {
+    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
+    background-color: rgba(0, 0, 0, 0);
+  }
+}
 
-    ::-webkit-scrollbar {
-        width: 0.5em;
-        border-radius: 5px;
-    }
+.logo {
+  width: 100%;
+  height: 70px;
+  object-fit: contain;
+}
 
-    ::-webkit-scrollbar-track {
-        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-        border-radius: 10px;
-    }
+::-webkit-scrollbar {
+  width: 0.5em;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+}
 
 
-    ::-webkit-scrollbar-thumb {
-        background-color: #ffd843;
-        border-radius: 10px;
-    }
+::-webkit-scrollbar-thumb {
+  background-color: #ffd843;
+  border-radius: 10px;
+}
 
-    .container {
-        background-color: #232c37;
-        padding: 0 !important;
-    }
+.container {
+  background-color: #232c37;
+  padding: 0 !important;
+}
 
-    #title {
-        color: #ffd843;
-    }
+#title {
+  color: #ffd843;
+}
 </style>
 
 <style>
-  /* Hacks */
+/* Hacks */
 
-  .v-divider {
-    border-color: white !important;
-  }
+.v-divider {
+  border-color: white !important;
+}
 
-  .v-input {
-      font-size: 1rem !important;
-  }
+.v-input {
+  font-size: 1rem !important;
+}
 
-  /* This is unfortunately the only way to override table background color */
-  .theme--dark.v-data-table > .v-data-table__wrapper > table > tbody > tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
-    background: #005281 !important;
-  }
+/* This is unfortunately the only way to override table background color */
+.theme--dark.v-data-table>.v-data-table__wrapper>table>tbody>tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
+  background: #005281 !important;
+}
 </style>
 
 <style lang="scss">
-    @import '~vuetify/src/styles/settings/_variables';
+@import '~vuetify/src/styles/settings/_variables';
 
-    @media #{map-get($display-breakpoints, 'md-and-down')} {
-        html {
-            font-size: 14px !important;
-        }
-    }
-</style>
+@media #{map-get($display-breakpoints, 'md-and-down')} {
+  html {
+    font-size: 14px !important;
+  }
+}
+</style>

photon-client/src/assets/robot-off.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M23 15V18C23 18.5 22.64 18.88 22.17 18.97L18.97 15.77C19 15.68 19 15.59 19 15.5C19 14.12 17.88 13 16.5 13C16.41 13 16.32 13 16.23 13.03L10.2 7H11V5.73C10.4 5.39 10 4.74 10 4C10 2.9 10.9 2 12 2S14 2.9 14 4C14 4.74 13.6 5.39 13 5.73V7H14C17.87 7 21 10.13 21 14H22C22.55 14 23 14.45 23 15M22.11 21.46L20.84 22.73L19.89 21.78C19.62 21.92 19.32 22 19 22H5C3.9 22 3 21.11 3 20V19H2C1.45 19 1 18.55 1 18V15C1 14.45 1.45 14 2 14H3C3 11.53 4.29 9.36 6.22 8.11L1.11 3L2.39 1.73L22.11 21.46M10 15.5C10 14.12 8.88 13 7.5 13S5 14.12 5 15.5 6.12 18 7.5 18 10 16.88 10 15.5M16.07 17.96L14.04 15.93C14.23 16.97 15.04 17.77 16.07 17.96Z" /></svg>

photon-client/src/assets/robot.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M12,2C13.1,2 14,2.9 14,4C14,4.74 13.6,5.39 13,5.73V7H14C17.87,7 21,10.13 21,14H22C22.55,14 23,14.45 23,15V18C23,18.55 22.55,19 22,19H21V20C21,21.1 20.1,22 19,22H5C3.9,22 3,21.1 3,20V19H2C1.45,19 1,18.55 1,18V15C1,14.45 1.45,14 2,14H3C3,10.13 6.13,7 10,7H11V5.73C10.4,5.39 10,4.74 10,4C10,2.9 10.9,2 12,2M7.5,13C6.12,13 5,14.12 5,15.5C5,16.88 6.12,18 7.5,18C8.88,18 10,16.88 10,15.5C10,14.12 8.88,13 7.5,13M16.5,13C15.12,13 14,14.12 14,15.5C14,16.88 15.12,18 16.5,18C17.88,18 19,16.88 19,15.5C19,14.12 17.88,13 16.5,13Z" /></svg>

photon-client/src/components/common/cv-icon.vue

@@ -51,4 +51,4 @@
     .hover:hover {
         color: white !important;
     }
-</style>
+</style>

photon-client/src/components/common/cv-image.vue

@@ -4,16 +4,17 @@
     crossOrigin="anonymous"
     :style="styleObject"
     :src="src"
-    alt=""
-    @click="e => $emit('click', e)"
-  >
+    :alt="alt"
+    @click="clickHandler"
+    @error="loadErrHandler"
+  />
 </template>
 
 <script>
     export default {
         name: "CvImage",
         // eslint-disable-next-line vue/require-prop-types
-        props: ['address', 'scale', 'maxHeight', 'maxHeightMd', 'maxHeightXl', 'colorPicking', 'id', 'disconnected'],
+        props: ['address', 'scale', 'maxHeight', 'maxHeightMd', 'maxHeightLg', 'maxHeightXl', 'colorPicking', 'id', 'disconnected', 'alt'],
         data() {
             return {
                 seed: 1.0,
@@ -26,18 +27,21 @@
                       "border-radius": "3px",
                       "display": "block",
                       "object-fit": "contain",
+                      "background-size:": "contain",
                       "object-position": "50% 50%",
                       "max-width": "100%",
                       "margin-left": "auto",
                       "margin-right": "auto",
                       "max-height": this.maxHeight,
                       height: `${this.scale}%`,
-                      cursor: (this.colorPicking ? `url(${require("../../assets/eyedropper.svg")}),` : "") + "default",
+                      cursor: (this.colorPicking ? `url(${require("../../assets/eyedropper.svg")}),` : "pointer") + "default",
                     };
 
                     if (this.$vuetify.breakpoint.xl) {
                       ret["max-height"] = this.maxHeightXl;
-                    } else if (this.$vuetify.breakpoint.mdAndUp) {
+                    } else if (this.$vuetify.breakpoint.lg) {
+                      ret["max-height"] = this.maxHeightLg;
+                    } else if (this.$vuetify.breakpoint.md) {
                       ret["max-height"] = this.maxHeightMd;
                     }
 
@@ -46,7 +50,14 @@
             },
             src: {
               get() {
-                return this.disconnected ? require("../../assets/noStream.jpg") : this.address + "?" + this.seed // This prevents caching
+                var port = this.getCurPort();
+                if(port <= 0){
+                  //Invalid port, keep it spinny
+                  return require("../../assets/loading.gif");
+                } else {
+                  //Valid port, connect
+                  return this.getSrcURLFromPort(port);
+                }
               },
             },
         },
@@ -54,9 +65,46 @@
             this.reload(); // Force reload image on creation
         },
         methods: {
+            getCurPort(){
+              var port = -1;
+              if(this.disconnected){
+                //Disconnected, port is unknown.
+                port = -1;
+              } else {
+                //Connected - get the port
+                if(this.id == 'raw-stream'){
+                  port = this.$store.state.cameraSettings[this.$store.state.currentCameraIndex].inputStreamPort
+                } else {
+                  port = this.$store.state.cameraSettings[this.$store.state.currentCameraIndex].outputStreamPort
+                }
+              }
+              return port;
+            },
+            getSrcURLFromPort(port){
+              return "http://" + location.hostname + ":" + port + "/stream.mjpg" + "?" + this.seed;
+            },
+            loadErrHandler(event) {
+                console.log(event);
+                console.log("Error loading image, attempting to do it again...");
+                this.reload();
+            },
+            clickHandler(event) {
+              if(this.colorPicking){
+                this.$emit('click', event);
+              } else {
+                var port = this.getCurPort();
+                if(port <= 0){
+                  console.log("No valid port, ignoring click.");
+                } else {
+                  //Valid port, connect
+                  window.open(this.getSrcURLFromPort(port), '_blank');
+                }
+              }
+
+            },
             reload() {
                 this.seed = new Date().getTime();
             }
         },
     }
-</script>
+</script>

photon-client/src/components/common/cv-input.vue

@@ -26,7 +26,7 @@
     </v-row>
   </div>
 </template>
-s
+
 <script>
     import TooltippedLabel from "./cv-tooltipped-label";
 
@@ -61,4 +61,4 @@ s
 </script>
 
 <style lang="css" scoped>
-</style>
+</style>

photon-client/src/components/common/cv-number-input.vue

@@ -54,4 +54,4 @@
 
 <style lang="" scoped>
 
-</style>
+</style>

photon-client/src/components/common/cv-radio.vue

@@ -1,28 +1,46 @@
 <template>
   <div>
-    <v-radio-group
-      v-model="localValue"
-      row
-      dark
-      :mandatory="true"
+    <v-row
+      dense
+      align="center"
     >
-      <v-radio
-        v-for="(name,index) in list"
-        :key="index"
-        color="#ffd843"
-        :label="name"
-        :value="index"
-        :disabled="disabled"
-      />
-    </v-radio-group>
+      <v-col :cols="12 - (inputCols || 8)">
+        <tooltipped-label
+          :tooltip="tooltip"
+          :text="name"
+        />
+      </v-col>
+      <v-col :cols="inputCols || 8">
+        <v-radio-group
+          v-model="localValue"
+          row
+          dark
+          :mandatory="true"
+        >
+          <v-radio
+            v-for="(radioName,index) in list"
+            :key="index"
+            color="#ffd843"
+            :label="radioName"
+            :value="index"
+            :disabled="disabled"
+          />
+        </v-radio-group>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
 <script>
+    import TooltippedLabel from "./cv-tooltipped-label";
+
     export default {
         name: 'Radio',
+        components: {
+          TooltippedLabel
+        },
       // eslint-disable-next-line vue/require-prop-types
-        props: ['value', 'list', 'disabled'],
+        props: ['name', 'value', 'list', 'disabled', 'inputCols', 'tooltip'],
         data() {
             return {}
         },
@@ -41,4 +59,4 @@
 
 <style lang="" scoped>
 
-</style>
+</style>

photon-client/src/components/common/cv-range-slider.vue

@@ -15,10 +15,13 @@
           :value="localValue"
           :max="max"
           :min="min"
+          :disabled="disabled"
           hide-details
           class="align-center"
           dark
-          color="accent"
+          :color="inverted ? 'rgba(255, 255, 255, 0.2)' : 'accent'"
+          :track-color="inverted ? 'accent' : undefined"
+          thumb-color="accent"
           :step="step"
           @input="handleInput"
           @mousedown="$emit('rollback', localValue)"
@@ -34,7 +37,7 @@
               hide-details
               single-line
               type="number"
-              style="width: 50px"
+              style="width: 60px"
               :step="step"
               @input="handleChange"
               @focus="prependFocused = true"
@@ -53,7 +56,7 @@
               hide-details
               single-line
               type="number"
-              style="width: 50px"
+              style="width: 60px"
               :step="step"
               @input="handleChange"
               @focus="appendFocused = true"
@@ -75,7 +78,7 @@ export default {
     TooltippedLabel,
   },
   // eslint-disable-next-line vue/require-prop-types
-  props: ["name", "min", "max", "value", "step", "tooltip"],
+  props: ["name", "min", "max", "value", "step", "tooltip", "disabled", "inverted"],
   data() {
     return {
       prependFocused: false,
@@ -128,4 +131,4 @@ export default {
 </script>
 
 <style lang="" scoped>
-</style>
+</style>

photon-client/src/components/common/cv-select.vue

@@ -37,7 +37,7 @@ import TooltippedLabel from "./cv-tooltipped-label";
             TooltippedLabel,
         },
       // eslint-disable-next-line vue/require-prop-types
-        props: ['list', 'name', 'value', 'disabled', 'selectCols', 'rules', 'tooltip'],
+        props: ['list', 'name', 'value', 'disabled', 'filteredIndices', 'selectCols', 'rules', 'tooltip'],
         computed: {
             localValue: {
                 get() {
@@ -50,6 +50,7 @@ import TooltippedLabel from "./cv-tooltipped-label";
             indexList() {
                 let list = [];
                 for (let i = 0; i < this.list.length; i++) {
+                    if (this.filteredIndices instanceof Set && this.filteredIndices.has(i)) continue;
                     list.push({
                         name: this.list[i],
                         index: i
@@ -62,4 +63,4 @@ import TooltippedLabel from "./cv-tooltipped-label";
 </script>
 
 <style>
-</style>
+</style>

photon-client/src/components/common/cv-slider.vue

@@ -105,4 +105,4 @@ export default {
 </script>
 
 <style lang="" scoped>
-</style>
+</style>

photon-client/src/components/common/cv-switch.vue

@@ -48,4 +48,4 @@ export default {
 
 <style lang="" scoped>
 
-</style>
+</style>

photon-client/src/components/common/cv-tooltipped-label.vue

@@ -3,7 +3,7 @@
     <v-tooltip
       :disabled="tooltip === undefined"
       right
-      open-delay="600"
+      open-delay="300"
     >
       <template v-slot:activator="{ on, attrs }">
         <span
@@ -24,4 +24,4 @@
         // eslint-disable-next-line vue/require-prop-types
         props: ['text', 'tooltip'],
     }
-</script>
+</script>

photon-client/src/components/pipeline/3D/MiniMap.vue

@@ -1,154 +1,268 @@
 <template>
-  <div>
+  <div
+    id="MapContainer"
+    style="flex-grow:1"
+  >
     <v-row>
       <v-col
         align="center"
         cols="12"
       >
         <span class="white--text">Target Location</span>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col
+        align="center"
+        cols="12"
+        align-self="stretch"
+      >
         <canvas
           id="canvasId"
-          class="mt-2"
-          width="800"
-          height="800"
+          style="width:100%;height:100%"
         />
       </v-col>
+      <v-row>
+        <v-col>
+          <v-btn
+            class="ml-10"
+            color="secondary"
+            @click="resetCamFirstPerson"
+          >
+            First Person
+          </v-btn>
+        </v-col>
+        <v-col>
+          <v-btn
+            class="ml-10"
+            color="secondary"
+            @click="resetCamThirdPerson"
+          >
+            Third Person
+          </v-btn>
+        </v-col>
+      </v-row>
     </v-row>
   </div>
 </template>
 
 <script>
-    import theme from "../../../theme";
 
-    export default {
-        name: "MiniMap",
-        props: {
-          // eslint-disable-next-line vue/require-default-prop
-          targets: Array,
-          // eslint-disable-next-line vue/require-default-prop
-          horizontalFOV: Number
-        },
-        data() {
-            return {
-                ctx: undefined,
-                canvas: undefined,
-                x: 0,
-                y: 0,
-                targetWidth: 40,
-                targetHeight: 6
-            }
-        },
-        computed: {
-            hLen: {
-                get() {
-                    return Math.tan(this.horizontalFOV / 2 * Math.PI / 180) * 150;
-                }
-            }
-        },
-        watch: {
-            targets: {
-                deep: true,
-                handler() {
-                    this.draw();
-                }
-            },
-            horizontalFOV() {
-                this.draw();
-            }
-        },
-        mounted: function () {
-            const canvas = document.getElementById("canvasId"); // getting the canvas element
-            const ctx = canvas.getContext("2d"); // getting the canvas context
-            this.canvas = canvas; // setting the canvas as a vue variable
-            this.ctx = ctx; // setting the canvas context as a vue variable
-            this.grad = this.ctx.createLinearGradient(400, 800, 400, 600);
-            this.grad.addColorStop(0, "rgb(119,119,119)");
-            this.grad.addColorStop(0.05, "rgba(14,92,22,0.96)");
-            this.grad.addColorStop(0.8, 'rgba(43,43,43,0.48)');
+import {
+  ArrowHelper,
+  BoxGeometry,
+  ConeGeometry,
+  Mesh,
+  MeshNormalMaterial,
+  PerspectiveCamera,
+  Quaternion,
+  Scene,
+  TrackballControls,
+  Vector3,
+    Color,
+  WebGLRenderer
+} from "three-full";
 
-            // setting canvas context values for drawing
+export default {
+  name: "MiniMap",
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    targets: Array,
+    // eslint-disable-next-line vue/require-default-prop
+    horizontalFOV: Number
+  },
+  data() {
+    return {
+      scene: undefined,
+      cubes: [],
 
-
-            this.ctx.font = "26px Arial";
-            this.ctx.strokeStyle = "whitesmoke";
-            this.ctx.lineWidth = 2;
-
-            this.$nextTick(function () {
-                this.drawPlayer();
-            });
-        },
-        methods: {
-            draw() {
-                this.clearBoard();
-                this.drawPlayer();
-                for (let index in this.targets) {
-                    this.drawTarget(index, this.targets[index].pose);
-                }
-            },
-            drawTarget(index, target) {
-                // first save the untranslated/unrotated context
-                let x = 800 - (160 * target.x); // getting meters as pixels
-                let y = 400 - (160 * target.y);
-                this.ctx.save();
-                this.ctx.beginPath();
-                // move the rotation point to the center of the rect
-                this.ctx.translate(y + this.targetWidth / 2, x + this.targetHeight / 2); // wpi lib makes x forward and back and y left to right
-                // rotate the rect
-                this.ctx.rotate(target.rot * -1 * Math.PI / 180.0);
-
-                // draw the rect on the transformed context
-                // Note: after transforming [0,0] is visually [x,y]
-                //       so the rect needs to be offset accordingly when drawn
-                this.ctx.rect(-this.targetWidth / 2, -this.targetHeight / 2, this.targetWidth, this.targetHeight);
-
-                this.ctx.fillStyle = theme.accent;
-                this.ctx.fill();
-
-                // restore the context to its untranslated/unrotated state
-                this.ctx.restore();
-                this.ctx.fillStyle = "whitesmoke";
-                this.ctx.beginPath();
-                this.ctx.arc(y + this.targetWidth / 2, x + this.targetHeight / 2, 3, 0, 2 * Math.PI, true);
-                this.ctx.fill();
-                this.ctx.fillText(index, y - 30, x - 5);
-
-            },
-            drawPlayer() {
-                this.ctx.beginPath();
-                this.ctx.moveTo(400, 820);
-                this.ctx.lineTo(400 + this.hLen, 650);
-                this.ctx.lineTo(400 - this.hLen, 650);
-                this.ctx.closePath();
-                this.ctx.fillStyle = this.grad;
-                this.ctx.fill();
-                this.ctx.beginPath();
-                this.ctx.moveTo(400, 820);
-                this.ctx.lineTo(400 + this.hLen, 650);
-                this.ctx.stroke();
-                this.ctx.moveTo(400, 820);
-                this.ctx.lineTo(400 - this.hLen, 650);
-                this.ctx.stroke();
-
-            },
-            clearBoard() {
-                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // clearing the canvas
-            }
-        }
     }
+  },
+  watch: {
+    targets: {
+      deep: true,
+      handler() {
+        this.drawTargets();
+      }
+    },
+  },
+
+  mounted() {
+    const scene = new Scene();
+    this.scene = scene;
+    const camera = new PerspectiveCamera(75, 800 / 800, 0.1, 1000);
+    this.camera = camera;
+
+    const canvas = document.getElementById("canvasId"); // getting the canvas element
+    this.canvas = canvas;
+    const renderer = new WebGLRenderer({"canvas": canvas});
+    this.renderer = renderer;
+    scene.background = new Color(0xa9a9a9)
+
+    //Set up resize handlers
+    this.onWindowResize();
+    window.addEventListener( 'resize', this.onWindowResize, false );
+
+    //Add the reference frame cues
+    this.refFrameCues = []
+    // coordinate system
+    this.refFrameCues.push(new ArrowHelper(new Vector3(1, 0, 0).normalize(), new Vector3(0, 0, 0),
+        1, // length
+        0xff0000,
+        0.1,
+        0.1,
+    ))
+    this.refFrameCues.push(new ArrowHelper(new Vector3(0, 1, 0).normalize(), new Vector3(0, 0, 0),
+        1, // length
+        0x00ff00,
+        0.1,
+        0.1,
+    ))
+    this.refFrameCues.push(new ArrowHelper(new Vector3(0, 0, 1).normalize(), new Vector3(0, 0, 0),
+        1, // length
+        0x0000ff,
+        0.1,
+        0.1,
+    ))
+
+    //something that looks vaguely like a camera
+    const camSize = 0.2;
+    const camBodyGeometry = new BoxGeometry(camSize, camSize, camSize);
+    const camLensGeometry = new ConeGeometry(camSize*0.4, camSize*0.8, 30);
+    const camMaterial = new MeshNormalMaterial();
+    const camBody = new Mesh(camBodyGeometry, camMaterial);
+    const camLens = new Mesh(camLensGeometry, camMaterial);
+    camBody.position.set(0,0,0);
+    camLens.rotateZ(Math.PI / 2);
+    camLens.position.set(camSize*0.8,0,0);
+    this.refFrameCues.push(camBody)
+    this.refFrameCues.push(camLens)
+
+    var controls = new TrackballControls(
+        camera,
+        renderer.domElement
+    );
+    controls.rotateSpeed = 1.0;
+    controls.zoomSpeed = 1.2;
+    controls.panSpeed = 0.8;
+    controls.noZoom = false;
+    controls.noPan = false;
+    controls.staticMoving = true;
+    controls.dynamicDampingFactor = 0.3;
+    controls.keys = [65, 83, 68];
+    this.controls = controls;
+
+    this.scene.add(...this.refFrameCues)
+    this.resetCamFirstPerson();
+
+    controls.update();
+
+    function animate() {
+      requestAnimationFrame(animate);
+
+      controls.update();
+      renderer.render(scene, camera);
+
+      //camera.updateMatrixWorld();
+      //console.log("================")
+      //console.log(camera.position);
+      //console.log(camera.rotation);
+      //console.log(camera.up);
+
+    }
+
+    this.drawTargets()
+
+    animate();
+  },
+  methods: {
+    drawTargets() {
+      this.scene.remove(...this.cubes)
+      this.cubes = []
+
+      for (const target of this.targets) {
+        const geometry = new BoxGeometry(0.3 / 5, 0.2, 0.2);
+        const material = new MeshNormalMaterial();
+        let quat = (new Quaternion(
+            target.pose.qx,
+            target.pose.qy,
+            target.pose.qz,
+            target.pose.qw,
+        ))
+        const cube = new Mesh(geometry, material);
+        cube.position.set(target.pose.x, target.pose.y, target.pose.z)
+        cube.rotation.setFromQuaternion(quat);
+        this.cubes.push(cube)
+
+        let arrow = (new ArrowHelper(new Vector3(1, 0, 0).normalize(), new Vector3(0, 0, 0),
+            1, // length
+            0xff0000,
+            0.1,
+            0.1,
+        ));
+        arrow.rotation.setFromQuaternion(quat)
+        arrow.rotateZ(-Math.PI / 2)
+        arrow.position.set(target.pose.x, target.pose.y, target.pose.z)
+        this.cubes.push(arrow);
+
+        arrow = (new ArrowHelper(new Vector3(1, 0, 0).normalize(), new Vector3(0, 0, 0),
+            1, // length
+            0x00ff00,
+            0.1,
+            0.1,
+        ));
+        arrow.rotation.setFromQuaternion(quat)
+        // arrow.rotateX(Math.PI / 2)
+        arrow.position.set(target.pose.x, target.pose.y, target.pose.z)
+        this.cubes.push(arrow);
+        arrow = (new ArrowHelper(new Vector3(1, 0, 0).normalize(), new Vector3(0, 0, 0),
+            1, // length
+            0x0000ff,
+            0.1,
+            0.1,
+        ));
+        arrow.setRotationFromQuaternion(quat)
+        arrow.rotateX(Math.PI / 2)
+        arrow.position.set(target.pose.x, target.pose.y, target.pose.z)
+        this.cubes.push(arrow);
+      }
+      if(this.cubes.length > 0)
+        this.scene.add(...this.cubes);
+    },
+
+    onWindowResize() {
+      var container = document.getElementById("MapContainer")
+      if(container){
+        this.canvas.width = container.clientWidth * 0.95;
+        this.canvas.height = container.clientWidth * 0.85;
+        this.camera.aspect = this.canvas.width / this.canvas.height;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize( this.canvas.width, this.canvas.height );
+      }
+    },
+    resetCamThirdPerson(){
+      //Sets camera to third person position
+      this.controls.reset();
+      this.camera.position.set(-1.39,-1.09,1.17);
+      this.camera.up.set(0,0,1);
+      this.controls.target.set(4.0,0.0,0.0);
+      this.controls.update();
+      this.scene.add(...this.refFrameCues)
+    },
+    resetCamFirstPerson(){
+      //Sets camera to first person position
+      this.controls.reset();
+      this.camera.position.set(-0.1,0,0);
+      this.camera.up.set(0,0,1);
+      this.controls.target.set(0.0,0.0,0.0);
+      this.controls.update();
+      this.scene.remove(...this.refFrameCues)
+    },
+  }
+
+
+}
 </script>
 
 <style scoped>
-    #canvasId {
-        width: 400px;
-        height: 400px;
-        background-color: #232C37;
-        border-radius: 5px;
-        border: 2px solid grey;
-        box-shadow: 0 0 5px 1px;
-    }
-
-    th {
-        width: 80px;
-        text-align: center;
-    }
-</style>
+</style>

photon-client/src/components/pipeline/CameraAndPipelineSelect.vue

@@ -1,11 +1,15 @@
 <template>
   <div>
-    <v-row align="center">
+    <v-row
+      align="center"
+      class="pl-6"
+    >
       <v-col
         cols="10"
         md="5"
         lg="10"
-        class="pt-0 pb-0 pl-6"
+        no-gutters
+        class="pa-0"
       >
         <CVselect
           v-if="isCameraNameEdit === false"
@@ -59,7 +63,8 @@
         cols="10"
         md="5"
         lg="10"
-        class="pt-0 pb-0 pl-6"
+        no-gutters
+        class="pa-0"
       >
         <CVselect
           v-model="currentPipelineIndex"
@@ -88,7 +93,11 @@
               menu
             </v-icon>
           </template>
-          <v-list dense>
+          <v-list
+            dark
+            dense
+            color="primary"
+          >
             <v-list-item @click="toPipelineNameChange">
               <v-list-item-title>
                 <CVicon
@@ -119,7 +128,7 @@
                 />
               </v-list-item-title>
             </v-list-item>
-            <v-list-item @click="openDuplicateDialog">
+            <v-list-item @click="duplicatePipeline">
               <v-list-item-title>
                 <CVicon
                   color="#c5c5c5"
@@ -132,66 +141,47 @@
           </v-list>
         </v-menu>
       </v-col>
+      <v-col
+        v-if="currentPipelineType >= 0"
+        cols="10"
+        md="11"
+        lg="10"
+        no-gutters
+        class="pa-0"
+      >
+        <CVselect
+          v-model="currentPipelineType"
+          name="Type"
+          tooltip="Changes the pipeline type, which changes the type of processing that will happen on input frames"
+          :list="['Reflective Tape', 'Colored Shape', 'AprilTag']"
+          @input="e => showTypeDialog(e)"
+        />
+      </v-col>
     </v-row>
-    <!--pipeline duplicate dialog-->
-    <v-dialog
-      v-model="duplicateDialog"
-      dark
-      width="500"
-      height="357"
-    >
-      <v-card dark>
-        <v-card-title
-          class="headline"
-          primary-title
-        >
-          Duplicate Pipeline
-        </v-card-title>
-        <v-card-text>
-          <CVselect
-            v-model="pipeIndexToDuplicate"
-            name="Pipeline"
-            :list="$store.getters.pipelineList"
-          />
-        </v-card-text>
-        <v-divider />
-        <v-card-actions>
-          <v-spacer />
-          <v-btn
-            color="#ffd843"
-            @click="duplicatePipeline"
-          >
-            Duplicate
-          </v-btn>
-          <v-btn
-            color="error"
-            @click="closeDuplicateDialog"
-          >
-            Cancel
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+
     <!--pipeline naming dialog-->
     <v-dialog
       v-model="namingDialog"
       dark
+      persistent
       width="500"
       height="357"
     >
-      <v-card dark>
+      <v-card
+        dark
+        color="primary"
+      >
         <v-card-title
           class="headline"
           primary-title
         >
-          Pipeline Name
+          {{ isPipelineNameEdit ? "Edit Pipeline Name" : "Create Pipeline" }}
         </v-card-title>
         <v-card-text>
           <CVinput
             v-model="newPipelineName"
-            name="Pipeline"
+            name="Name"
             :error-message="checkPipelineName"
-            @Enter="savePipelineNameChange"
           />
         </v-card-text>
         <v-divider />
@@ -213,163 +203,206 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+    <v-dialog
+      v-model="showPipeTypeDialog"
+      width="600"
+    >
+      <v-card
+        color="primary"
+        dark
+      >
+        <v-card-title>Change Pipeline Type</v-card-title>
+        <v-card-text>
+          Changing the type of this pipeline will erase the current pipeline's settings and replace it with a new {{ ['Reflective', 'Shape'][proposedPipelineType] }} pipeline. <b class="red--text format_bold">You will lose all settings for the pipeline
+            "{{ ($store.getters.isDriverMode ? ['Driver Mode'] : []).concat($store.getters.pipelineList)[currentPipelineIndex] }}."</b> Are you sure you want to do this?
+          <v-row
+            class="mt-6"
+            style="display: flex; align-items: center; justify-content: center"
+            align="center"
+          >
+            <v-btn
+              class="mr-3"
+              color="red"
+              width="250"
+              @click="e => changePipeType(true)"
+            >
+              Yes, replace this pipeline
+            </v-btn>
+            <v-btn
+              class="ml-10"
+              color="secondary"
+              width="250"
+              @click="e => changePipeType(false)"
+            >
+              No, take me back
+            </v-btn>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script>
-    import CVicon from '../common/cv-icon'
-    import CVselect from '../common/cv-select'
-    import CVinput from '../common/cv-input'
-
-    export default {
-        name: "CameraAndPipelineSelect",
-        components: {
-            CVicon,
-            CVselect,
-            CVinput
-        },
-        data: () => {
-            return {
-                re: RegExp("^[A-Za-z0-9 \\-)(]*[A-Za-z0-9][A-Za-z0-9 \\-)(.]*$"),
-                isCameraNameEdit: false,
-                newCameraName: "",
-                cameraNameError: "",
-                isPipelineNameEdit: false,
-                namingDialog: false,
-                newPipelineName: "",
-                duplicateDialog: false,
-                pipeIndexToDuplicate: undefined
-            }
-        },
-        computed: {
-            checkCameraName() {
-                if (this.newCameraName !== this.$store.getters.cameraList[this.currentCameraIndex]) {
-                    if (this.re.test(this.newCameraName)) {
-                        for (let cam in this.cameraList) {
-                            if (this.cameraList.hasOwnProperty(cam)) {
-                                if (this.newCameraName === this.cameraList[cam]) {
-                                    return "A camera by that name already Exists"
-                                }
-                            }
-                        }
-                    } else {
-                        return "A camera name can only contain letters, numbers and spaces"
-                    }
-                }
-                return "";
-            },
-            checkPipelineName() {
-                if (this.newPipelineName !== this.$store.getters.pipelineList[this.currentPipelineIndex - 1] || this.isPipelineNameEdit === false) {
-                    if (this.re.test(this.newPipelineName)) {
-                        for (let pipe in this.$store.getters.pipelineList) {
-                            if (this.$store.getters.pipelineList.hasOwnProperty(pipe)) {
-                                if (this.newPipelineName === this.$store.getters.pipelineList[pipe]) {
-                                    return "A pipeline with this name already exists"
-                                }
-                            }
-                        }
-                    } else {
-                        return "A pipeline name can only contain letters, numbers, and spaces"
-                    }
-                }
-                return ""
-            },
-            currentCameraIndex: {
-                get() {
-                    return this.$store.getters.currentCameraIndex;
-                },
-                set(value) {
-                    this.$store.commit('currentCameraIndex', value);
-                }
-            },
-            currentPipelineIndex: {
-                get() {
-                    return this.$store.getters.currentPipelineIndex + (this.$store.getters.isDriverMode ? 1 : 0);
-                },
-                set(value) {
-                    this.$store.commit('currentPipelineIndex', value - (this.$store.getters.isDriverMode ? 1 : 0));
-                }
-            }
-        },
-        methods: {
-            changeCameraName() {
-                this.newCameraName = this.$store.getters.cameraList[this.currentCameraIndex];
-                this.isCameraNameEdit = true;
-            },
-            saveCameraNameChange() {
-                if (this.checkCameraName === "") {
-                    // this.handleInputWithIndex("changeCameraName", this.newCameraName);
-                    this.axios.post('http://' + this.$address + '/api/setCameraNickname',
-                        {name: this.newCameraName, cameraIndex: this.$store.getters.currentCameraIndex})
-                        // eslint-disable-next-line
-                        .then(r => {
-                            this.$emit('camera-name-changed')
-                        })
-                        .catch(e => {
-                            console.log("HTTP error while changing camera name " + e);
-                            this.$emit('camera-name-changed')
-                        })
-                    this.discardCameraNameChange();
-                }
-            },
-            discardCameraNameChange() {
-                this.isCameraNameEdit = false;
-                this.newCameraName = "";
-            },
-            toPipelineNameChange() {
-                this.newPipelineName = this.$store.getters.pipelineList[this.currentPipelineIndex - 1];
-                this.isPipelineNameEdit = true;
-                this.namingDialog = true;
-            },
-            toCreatePipeline() {
-                this.newPipelineName = "New Pipeline";
-                this.isPipelineNameEdit = false;
-                this.namingDialog = true;
-            },
-            openDuplicateDialog() {
-                this.pipeIndexToDuplicate = this.currentPipelineIndex - 1;
-                this.duplicateDialog = true;
-            },
-            deleteCurrentPipeline() {
-                if (this.$store.getters.pipelineList.length > 1) {
-                    this.handleInputWithIndex('deleteCurrentPipeline', {});
-                } else {
-                    this.snackbar = true;
-                }
-            },
-            savePipelineNameChange() {
-                if (this.checkPipelineName === "") {
-                    if (this.isPipelineNameEdit) {
-                        this.handleInputWithIndex("changePipelineName", this.newPipelineName);
-                    } else {
-                        this.handleInputWithIndex("addNewPipeline", this.newPipelineName);
-                    }
-                    this.discardPipelineNameChange();
-                }
-            },
-            duplicatePipeline() {
-                // if (!this.anotherCamera) {
-                //     this.pipelineDuplicate.camera = -1
-                // }
-                this.handleInputWithIndex("duplicatePipeline", this.pipeIndexToDuplicate);
-                // this.axios.post("http://" + this.$address + "/api/vision/duplicate", this.pipeIndexToDuplicate);
-
-                this.closeDuplicateDialog();
-            },
-            closeDuplicateDialog() {
-                this.duplicateDialog = false;
-                this.pipeIndexToDuplicate = undefined;
-            },
-            discardPipelineNameChange() {
-                this.namingDialog = false;
-                this.isPipelineNameEdit = false;
-                this.newPipelineName = "";
-            },
-        }
+import CVicon from '../common/cv-icon'
+import CVselect from '../common/cv-select'
+import CVinput from '../common/cv-input'
 
+export default {
+  name: "CameraAndPipelineSelect",
+  components: {
+    CVicon,
+    CVselect,
+    CVinput
+  },
+  data: () => {
+    return {
+      re: RegExp("^[A-Za-z0-9_ \\-)(]*[A-Za-z0-9][A-Za-z0-9_ \\-)(.]*$"),
+      isCameraNameEdit: false,
+      newCameraName: "",
+      cameraNameError: "",
+      isPipelineNameEdit: false,
+      namingDialog: false,
+      newPipelineName: "",
+      duplicateDialog: false,
+      showPipeTypeDialog: false,
+      proposedPipelineType : 0,
+      pipeIndexToDuplicate: undefined
     }
+  },
+  computed: {
+    checkCameraName() {
+      if (this.newCameraName !== this.$store.getters.cameraList[this.currentCameraIndex]) {
+        if (this.re.test(this.newCameraName)) {
+          for (let cam in this.cameraList) {
+            if (this.cameraList.hasOwnProperty(cam)) {
+              if (this.newCameraName === this.cameraList[cam]) {
+                return "A camera by that name already exists"
+              }
+            }
+          }
+        } else {
+          return "A camera name can only contain letters, numbers, and spaces"
+        }
+      }
+      return "";
+    },
+    checkPipelineName() {
+      if (this.newPipelineName !== this.$store.getters.pipelineList[this.currentPipelineIndex - 1] || this.isPipelineNameEdit === false) {
+        if (this.re.test(this.newPipelineName)) {
+          for (let pipe in this.$store.getters.pipelineList) {
+            if (this.$store.getters.pipelineList.hasOwnProperty(pipe)) {
+              if (this.newPipelineName === this.$store.getters.pipelineList[pipe]) {
+                return "A pipeline with this name already exists"
+              }
+            }
+          }
+        } else {
+          return "A pipeline name can only contain letters, numbers, and spaces"
+        }
+      }
+      return ""
+    },
+    currentCameraIndex: {
+      get() {
+        return this.$store.getters.currentCameraIndex;
+      },
+      set(value) {
+        this.$store.commit('currentCameraIndex', value);
+      }
+    },
+    currentPipelineIndex: {
+      get() {
+        return this.$store.getters.currentPipelineIndex + (this.$store.getters.isDriverMode ? 1 : 0);
+      },
+      set(value) {
+        this.$store.commit('currentPipelineIndex', value - (this.$store.getters.isDriverMode ? 1 : 0));
+      }
+    },
+    currentPipelineType: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.pipelineType - 2;
+      },
+      set(value) {
+        value; // nop, since we have the dialog for this
+      }
+    }
+  },
+  methods: {
+    showTypeDialog(idx) {
+      // Only show the dialog if it's a new type
+      this.showPipeTypeDialog = idx !== this.currentPipelineType;
+      this.proposedPipelineType = idx;
+    },
+    changePipeType(actuallyChange) {
+      const newIdx = actuallyChange ? this.proposedPipelineType : this.currentPipelineType
+      this.handleInputWithIndex('pipelineType', newIdx);
+      this.showPipeTypeDialog = false;
+    },
+    changeCameraName() {
+      this.newCameraName = this.$store.getters.cameraList[this.currentCameraIndex];
+      this.isCameraNameEdit = true;
+    },
+    saveCameraNameChange() {
+      if (this.checkCameraName === "") {
+        // this.handleInputWithIndex("changeCameraName", this.newCameraName);
+        this.axios.post('http://' + this.$address + '/api/setCameraNickname',
+            {name: this.newCameraName, cameraIndex: this.$store.getters.currentCameraIndex})
+            // eslint-disable-next-line
+            .then(r => {
+              this.$emit('camera-name-changed')
+            })
+            .catch(e => {
+              console.log("HTTP error while changing camera name " + e);
+              this.$emit('camera-name-changed')
+            })
+        this.discardCameraNameChange();
+      }
+    },
+    discardCameraNameChange() {
+      this.isCameraNameEdit = false;
+      this.newCameraName = "";
+    },
+    toPipelineNameChange() {
+      this.newPipelineName = this.$store.getters.pipelineList[this.currentPipelineIndex - 1];
+      this.isPipelineNameEdit = true;
+      this.namingDialog = true;
+    },
+    toCreatePipeline() {
+      this.newPipelineName = "New Pipeline";
+      this.isPipelineNameEdit = false;
+      this.namingDialog = true;
+    },
+    deleteCurrentPipeline() {
+      if (this.$store.getters.pipelineList.length > 1) {
+        this.handleInputWithIndex('deleteCurrentPipeline', {});
+      } else {
+        this.snackbar = true;
+      }
+    },
+    savePipelineNameChange() {
+      if (this.checkPipelineName === "") {
+        if (this.isPipelineNameEdit) {
+          this.handleInputWithIndex("changePipelineName", this.newPipelineName);
+        } else {
+          this.handleInputWithIndex("addNewPipeline", [this.newPipelineName, this.currentPipelineType]); // 0 for reflective, 1 for colored shpae
+        }
+        this.discardPipelineNameChange();
+      }
+    },
+    duplicatePipeline() {
+      this.handleInputWithIndex("duplicatePipeline", this.currentPipelineIndex);
+    },
+    discardPipelineNameChange() {
+      this.namingDialog = false;
+      this.isPipelineNameEdit = false;
+      this.newPipelineName = "";
+    },
+  }
+
+}
 </script>
 
 <style scoped>
 
-</style>
+</style>

photon-client/src/components/pipeline/OutputTab/DualCalibration.vue

@@ -60,4 +60,4 @@
 
 <style scoped>
 
-</style>
+</style>

photon-client/src/components/pipeline/OutputTab/SingleCalibration.vue

@@ -45,4 +45,4 @@
 
 <style scoped>
 
-</style>
+</style>

photon-client/src/jsPDFFonts/readme.md

@@ -0,0 +1,7 @@
+# JSPDF Fonts
+
+These are .js interpretations of the .tff files in the branding folder. They are used by jspdf to apply branding-approprate fonts to any .pdf file generation (ex: calibration targets)
+
+https://peckconsulting.s3.amazonaws.com/fontconverter/fontconverter.html is the converter used to generate them.
+
+https://www.devlinpeck.com/tutorials/jspdf-custom-font has more info creating/using them.

photon-client/src/main.js

@@ -15,23 +15,24 @@ if (process.env.NODE_ENV === "production") {
     Vue.prototype.$address = location.hostname + ":5800";
 }
 
-const wsURL = '//' + Vue.prototype.$address + '/websocket';
+// const wsDataURL = '//' + Vue.prototype.$address + '/websocket_data';
+// import VueNativeSock from 'vue-native-websocket';
+// Vue.use(VueNativeSock, wsDataURL, {
+//     reconnection: true,
+//     reconnectionDelay: 100,
+//     connectManually: true,
+//     format: "arraybuffer",
+// });
 
-import VueNativeSock from 'vue-native-websocket';
-
-Vue.use(VueNativeSock, wsURL, {
-    reconnection: true,
-    reconnectionDelay: 100,
-    connectManually: true,
-    format: "arraybuffer",
-});
 Vue.use(VueAxios, axios);
 Vue.prototype.$msgPack = msgPack(true);
 
 import {dataHandleMixin} from './mixins/global/dataHandleMixin'
-
 Vue.mixin(dataHandleMixin);
 
+import {stateMixin} from './mixins/global/stateMixin'
+Vue.mixin(stateMixin);
+
 new Vue({
     router,
     store,

photon-client/src/mixins/global/dataHandleMixin.js

@@ -2,14 +2,14 @@ export const dataHandleMixin = {
     methods: {
         handleInput(key, value) {
             let msg = this.$msgPack.encode({[key]: value});
-            this.$socket.send(msg);
+            this.$store.state.websocket.ws.send(msg);
         },
         handleInputWithIndex(key, value, cameraIndex = this.$store.getters.currentCameraIndex) {
             let msg = this.$msgPack.encode({
                 [key]: value,
                 ["cameraIndex"]: cameraIndex,
             });
-            this.$socket.send(msg);
+            this.$store.state.websocket.ws.send(msg);
         },
         handleData(val) {
             this.handleInput(val, this[val]);
@@ -22,7 +22,7 @@ export const dataHandleMixin = {
                     ["cameraIndex"]: this.$store.getters.currentCameraIndex
                 }
             });
-            this.$socket.send(msg);
+            this.$store.state.websocket.ws.send(msg);
             this.$emit('update')
         },
         handlePipelineUpdate(key, val) {
@@ -32,7 +32,7 @@ export const dataHandleMixin = {
                     ["cameraIndex"]: this.$store.getters.currentCameraIndex
                 }
             });
-            this.$socket.send(msg);
+            this.$store.state.websocket.ws.send(msg);
             this.$emit('update')
         },
         handleTruthyPipelineData(val) {
@@ -42,7 +42,7 @@ export const dataHandleMixin = {
                     ["cameraIndex"]: this.$store.getters.currentCameraIndex
                 }
             });
-            this.$socket.send(msg);
+            this.$store.state.websocket.ws.send(msg);
             this.$emit('update')
         },
         rollback(val, e) {

photon-client/src/mixins/global/stateMixin.js

@@ -0,0 +1,10 @@
+export const stateMixin = {
+    methods: {
+        currentPipelineType() {
+            return this.$store.getters.pipelineType
+        },
+        currentPipelineSettings() {
+            return this.$store.getters.currentPipelineSettings
+        },
+    }
+};

photon-client/src/plugins/ColorPicker.js

@@ -5,9 +5,11 @@ function initColorPicker() {
     if (!canvas)
         canvas = document.createElement('canvas');
 
-    image = document.querySelector('#normal-stream');
-    canvas.width = image.width;
-    canvas.height = image.height;
+    image = document.querySelector('#raw-stream');
+    if (image !== null) {
+      canvas.width = image.width;
+      canvas.height = image.height;
+    }
 }
 
 //Called on click of the image,
@@ -122,4 +124,4 @@ function shrinkRange(range, color) {
 }
 
 
-export default {initColorPicker, colorPickerClick, eyeDrop, expand, shrink}
+export default {initColorPicker, colorPickerClick, eyeDrop, expand, shrink}

photon-client/src/plugins/ReconnectingWebsocket.js

@@ -0,0 +1,74 @@
+/**
+ * Auto-reconnecting Websocket, a stripped down version of the NT4 client from
+ * https://raw.githubusercontent.com/wpilibsuite/NetworkTablesClients/2f8d378ac08d5ca703d590cfb019fc4af062db89/nt4/js/src/nt4.js
+ */
+export class ReconnectingWebsocket {
+    constructor(serverAddr,
+        onDataIn_in,
+        onConnect_in,
+        onDisconnect_in) {
+
+        this.onDataIn = onDataIn_in;
+        this.onConnect = onConnect_in;
+        this.onDisconnect = onDisconnect_in;
+
+        // WS Connection State (with defaults)
+        this.serverAddr = serverAddr;
+        this.serverConnectionActive = false;
+
+        //Trigger the websocket to connect automatically
+        this.ws_connect();
+    }
+
+    //////////////////////////////////////////////////////////////
+    // Websocket connection Maintenance
+
+    ws_onOpen() {
+        // Set the flag allowing general server communication
+        this.serverConnectionActive = true;
+
+        console.log("[WebSocket] Connected!");
+
+        // User connection-opened hook
+        this.onConnect();
+    }
+
+    ws_onClose(e) {
+        //Clear flags to stop server communication
+        this.ws = null;
+        this.serverConnectionActive = false;
+
+        // User connection-closed hook
+        this.onDisconnect();
+
+        console.log('[WebSocket] Socket is closed. Reconnect will be attempted in 0.5 second.', e.reason);
+        setTimeout(this.ws_connect.bind(this), 500);
+
+        if (!e.wasClean) {
+            console.error('Socket encountered error!');
+        }
+
+    }
+
+    ws_onError(e) {
+        console.log("[WebSocket] Websocket error - " + e.toString());
+        this.ws.close();
+    }
+
+    ws_onMessage(e) {
+       this.onDataIn(e);
+    }
+
+    ws_connect() {
+        this.ws = new WebSocket(this.serverAddr);
+        this.ws.binaryType = "arraybuffer";
+        this.ws.onopen = this.ws_onOpen.bind(this);
+        this.ws.onmessage = this.ws_onMessage.bind(this);
+        this.ws.onclose = this.ws_onClose.bind(this);
+        this.ws.onerror = this.ws_onError.bind(this);
+
+        console.log("[WebSocket] Starting...");
+    }
+}
+
+export default { ReconnectingWebsocket }

photon-client/src/plugins/WebsocketVideoStream.js

@@ -0,0 +1,359 @@
+// Circular buffer storage. Externally-apparent 'length' increases indefinitely
+// while any items with indexes below length-n will be forgotten (undefined
+// will be returned if you try to get them, trying to set is an exception).
+// n represents the initial length of the array, not a maximum
+class StatsHistoryBuffer{
+    constructor (){
+        this.windowLen = 10;
+        this._array= new Array(this.windowLen);
+        this.headPtr = 0;
+        this.frameCount = 0;
+        this.bitAvgAccum = 0;
+
+        //calculated vals
+        this.bitRate_Mbps = 0;
+        this.framerate_fps = 0;
+    }
+
+    putAndPop(v){
+        this.headPtr++;
+        var idx = (this.headPtr)%this._array.length;
+        var poppedVal = this._array[idx];
+        this._array[idx] = v;
+        return poppedVal;
+    }
+
+    addSample(time, frameSize_bits, dispFrame_count) {
+        var oldVal = this.putAndPop([time, frameSize_bits, dispFrame_count]);
+
+        this.bitAvgAccum += frameSize_bits;
+
+        if(oldVal !=null){
+            var oldTime = oldVal[0];
+            var oldFrameSize = oldVal[1];
+            var oldFrameCount = oldVal[2];
+
+            var deltaTime_s = (time - oldTime);
+
+            this.bitAvgAccum -= oldFrameSize;
+
+            //bitrate - total bits transferred over the time period, divided by the period length
+            // converted to mbps
+            this.bitRate_Mbps = ( this.bitAvgAccum / deltaTime_s ) * (1.0/1048576.0);
+
+            //framerate - total frames displayed over the time period, divided by the period length
+            this.framerate_fps = (dispFrame_count - oldFrameCount) / deltaTime_s;
+        }
+
+
+    }
+
+    getText(){
+        return "Streaming @ " + this.framerate_fps.toFixed(1) + "FPS  " + this.bitRate_Mbps.toFixed(1) + "Mbps";
+    }
+
+}
+
+
+export class WebsocketVideoStream{
+
+    constructor(drawDiv, streamPort, host) {
+        console.log("host " + host + " port " + streamPort)
+
+        this.drawDiv = drawDiv;
+        this.image = document.getElementById(this.drawDiv);
+        this.streamPort = streamPort;
+        this.newStreamPortReq = null;
+        this.serverAddr = "ws://" + host + "/websocket_cameras";
+        this.imgData = null;
+        this.imgDataTime = -1;
+        this.prevImgDataTime = -1;
+        this.imgObjURL = null;
+        this.frameRxCount = 0;
+        this.dispFrameCount = 0;
+        this.stats = null;
+
+        //Set up div for stream stats info provided for users
+        this.statsTextDiv = this.image.parentNode.appendChild(document.createElement("div"));
+
+        //Centered over the image
+        this.statsTextDiv.style.position = "absolute";
+        this.statsTextDiv.style.left = "50%";
+        this.statsTextDiv.style.top = "50%";
+        this.statsTextDiv.style.transform = "translate(-50%, -50%)";
+
+        // Big enough for a line or two of text, with centered text
+        this.statsTextDiv.style.padding = "0.5em"
+        this.statsTextDiv.style.overflow = "hidden";
+        this.statsTextDiv.style.textAlign = "center";
+        this.statsTextDiv.style.verticalAlign = "middle";
+
+        // Styled to be black with grey text
+        this.statsTextDiv.style.backgroundColor = "black";
+        this.statsTextDiv.style.color = "#9E9E9E";
+        this.statsTextDiv.style.borderRadius = "3px";
+
+        //Default no text
+        this.statsTextDiv.innerHTML = "";
+
+        // Only show on mouseover, with opacity fade-in/fade-out
+        this.statsTextDiv.style.opacity = "0.0";
+        this.statsTextDiv.style.transition = "opacity 0.25s ease 0.25s";
+        this.statsTextDiv.style.transitionDelay = "opacity 0.5s";
+        this.image.addEventListener('mouseover', () => {this.statsTextDiv.style.opacity = "0.6";});
+        this.statsTextDiv.addEventListener('mouseover', () => {this.statsTextDiv.style.opacity = "0.6";});
+        this.image.addEventListener('mouseout', () => {this.statsTextDiv.style.opacity = "0.0";});
+
+        //Display state machine descriptions
+        this.DSM_DISCONNECTED = "Disconnected";
+        this.DSM_WAIT_FOR_VALID_PORT = "Waiting for valid port ID";
+        this.DSM_SUBSCRIBE = "Subscribing";
+        this.DSM_WAIT_FOR_FIRST_FRAME = "Waiting for frame data";
+        this.DSM_SHOWING = "Showing Frames";
+        this.DSM_RESTART_UNSUBSCRIBE = "Unsubscribing";
+        this.DSM_RESTART_WAIT = "Waiting before resubscribe";
+
+        this.dsm_cur_state = this.DSM_DISCONNECTED;
+        this.dsm_prev_state = this.DSM_DISCONNECTED;
+        this.dsm_restart_start_time = window.performance.now();
+
+        this.dispNoStream();
+        this.ws_connect();
+
+        requestAnimationFrame(()=>this.animationLoop());
+
+    }
+
+    dispImageData(){
+        if(this.prevImgDataTime != this.imgDataTime){
+            //From https://stackoverflow.com/questions/67507616/set-image-src-from-image-blob/67507685#67507685
+            //Ensure uniqueness by making the new one before revoking the old one.
+            var oldURL = this.imgObjURL
+            this.imgObjURL = URL.createObjectURL(this.imgData);
+            if(oldURL != null){
+                URL.revokeObjectURL(oldURL)
+            }
+
+            //Update the image with the new mimetype and image
+            this.image.src = this.imgObjURL;
+
+            this.dispFrameCount++;
+            this.prevImgDataTime = this.imgDataTime;
+        } // else no new image, don't update anything
+    }
+
+    dispNoStream() {
+        this.image.src = require("../assets/loading.gif");
+    }
+
+    animationLoop(){
+        // Update time metrics
+        var curTime_s = window.performance.now() / 1000.0;
+        var timeInState  = curTime_s - this.dsm_restart_start_time;
+
+        // Save previous state
+        this.dsm_prev_state = this.dsm_cur_state;
+
+        // Evaluate state transitions
+        if(this.serverConnectionActive == false){
+            //Any state - if the server connection goes false, always transition to disconnected
+            this.dsm_cur_state = this.DSM_DISCONNECTED;
+        } else {
+            //Conditional transitions
+            switch(this.dsm_cur_state) {
+                case this.DSM_DISCONNECTED:
+                    //Immediately transition to waiting for the first frame
+                    this.dsm_cur_state = this.DSM_WAIT_FOR_VALID_PORT;
+                    break;
+                case this.DSM_WAIT_FOR_VALID_PORT:
+                    // Wait until the user has configured a valid port
+                    if(this.streamPort > 0){
+                        this.dsm_cur_state = this.DSM_SUBSCRIBE;
+                    } else {
+                        this.dsm_cur_state = this.DSM_WAIT_FOR_VALID_PORT;
+                    }
+                    break;
+                case this.DSM_SUBSCRIBE:
+                    // Immediately transition after subscriptions is sent
+                    this.dsm_cur_state = this.DSM_WAIT_FOR_FIRST_FRAME;
+                    break;
+                case this.DSM_WAIT_FOR_FIRST_FRAME:
+                    if(this.imgData != null){
+                        //we got some image data, start showing it
+                        this.dsm_cur_state = this.DSM_SHOWING;
+                    } else if (this.newStreamPortReq != null){
+                        //Stream port requested changed, unsubscribe and restart
+                        this.dsm_cur_state = this.DSM_RESTART_UNSUBSCRIBE;
+                    } else {
+                        this.dsm_cur_state = this.DSM_WAIT_FOR_FIRST_FRAME;
+                    }
+                    break;
+                case this.DSM_SHOWING:
+                    if((curTime_s - this.imgDataTime) > 2.5){
+                        //timeout, begin the restart sequence
+                        this.dsm_cur_state = this.DSM_RESTART_UNSUBSCRIBE;
+                    } else if (this.newStreamPortReq != null){
+                        //Stream port requested changed, unsubscribe and restart
+                        this.dsm_cur_state = this.DSM_RESTART_UNSUBSCRIBE;
+                    }  else {
+                        //stay in this state.
+                        this.dsm_cur_state = this.DSM_SHOWING;
+                    }
+                    break;
+                case this.DSM_RESTART_UNSUBSCRIBE:
+                    //Only should spend one loop in Unsubscribe, immediately transition
+                    this.dsm_cur_state = this.DSM_RESTART_WAIT;
+                    break;
+                case this.DSM_RESTART_WAIT:
+                    if (timeInState > 0.25) {
+                        //we've waited long enough, go to try to re-subscribe
+                        this.dsm_cur_state = this.DSM_WAIT_FOR_VALID_PORT;
+                    } else {
+                        //stay in this state.
+                        this.dsm_cur_state = this.DSM_RESTART_WAIT;
+                    }
+                    break;
+                default:
+                    // Shouldn't get here, default back to init
+                    this.dsm_cur_state = this.DSM_DISCONNECTED;
+              }
+        }
+
+        //take current-state or state-transition actions
+
+        if(this.dsm_cur_state != this.dsm_prev_state){
+            //Any state transition
+            console.log("State Change: " + this.dsm_prev_state + " -> " + this.dsm_cur_state);
+        }
+
+        if(this.dsm_cur_state == this.DSM_SHOWING){
+            // Currently in SHOWING
+            // Show image and update status text
+            this.dispImageData();
+            this.statsTextDiv.innerHTML = this.stats.getText();
+        } else {
+            //Just show the state for debug
+            this.statsTextDiv.innerHTML = this.dsm_cur_state;
+        }
+
+        if(this.dsm_cur_state != this.DSM_SHOWING && this.dsm_prev_state == this.DSM_SHOWING ){
+            //Any transition out of showing - no stream
+            this.dispNoStream();
+        }
+
+        if(this.dsm_cur_state == this.DSM_RESTART_UNSUBSCRIBE){
+            // Currently in UNSUBSCRIBE, do the unsubscribe actions
+            this.stopStream();
+            this.dsm_restart_start_time = curTime_s;
+        }
+
+        if(this.dsm_cur_state == this.DSM_SUBSCRIBE){
+            // Currently in SUBSCRIBE, do the subscribe actions
+            this.startStream();
+            this.dsm_restart_start_time = curTime_s;
+        }
+
+        if(this.dsm_cur_state == this.DSM_WAIT_FOR_VALID_PORT){
+            // Currently waiting for a vaild port to be requested
+            if(this.newStreamPortReq != null){
+                this.streamPort = this.newStreamPortReq;
+                this.newStreamPortReq = null;
+            }
+        }
+
+        //Update status text
+
+        requestAnimationFrame(()=>this.animationLoop());
+    }
+
+    startStream() {
+        console.log("Subscribing to port " + this.streamPort);
+        this.imgData = null;
+        this.ws.send(JSON.stringify({"cmd": "subscribe", "port":this.streamPort}));
+    }
+
+    stopStream() {
+        console.log("Unsubscribing");
+        this.ws.send(JSON.stringify({"cmd": "unsubscribe"}));
+        this.imgData = null;
+    }
+
+    setPort(streamPort){
+        console.log("Port set to " + streamPort);
+        this.newStreamPortReq = streamPort;
+    }
+
+    ws_onOpen() {
+        // Set the flag allowing general server communication
+        this.serverConnectionActive = true;
+        console.log("Camera Websockets Connected!");
+
+        // New websocket connection, reset stats
+        this.frameRxCount = 0;
+        this.dispFrameCount = 0;
+        this.stats = new StatsHistoryBuffer();
+    }
+
+    ws_onClose(e) {
+        //Clear flags to stop server communication
+        this.ws = null;
+        this.serverConnectionActive = false;
+
+        console.log('Camera Socket is closed. Reconnect will be attempted in 0.5 second.', e.reason);
+        setTimeout(this.ws_connect.bind(this), 500);
+
+        if(!e.wasClean){
+            console.error('Socket encountered error!');
+        }
+
+    }
+
+    ws_onError(e){
+        e; //prevent unused failure
+        this.ws.close();
+    }
+
+    ws_onMessage(e){
+        //console.log("Got message from " + this.serverAddr)
+        var msgTime_s = window.performance.now() / 1000.0;
+        if(typeof e.data === 'string'){
+            //string data from host
+            //TODO - anything to receive info here? Maybe "available streams?"
+        } else {
+            if(e.data.size > 0){
+                //binary data - a frame!
+                //Save frame data for display in the next animation thread
+                this.imgData = e.data;
+                this.imgDataTime = msgTime_s;
+
+                //Count the incoming frame
+                this.frameRxCount++;
+
+                //keep the stats up to date
+                this.stats.addSample(msgTime_s,this.imgData.size * 8,this.dispFrameCount);
+            } else {
+                console.log("WS Stream Error: Server sent empty frame!");
+            }
+        }
+
+    }
+
+    ws_connect() {
+        this.serverConnectionActive = false;
+        this.ws = new WebSocket(this.serverAddr);
+        this.ws.binaryType = "blob";
+        this.ws.onopen = this.ws_onOpen.bind(this);
+        this.ws.onmessage = this.ws_onMessage.bind(this);
+        this.ws.onclose = this.ws_onClose.bind(this);
+        this.ws.onerror = this.ws_onError.bind(this);
+        console.log("Connecting to server " + this.serverAddr);
+    }
+
+    ws_close(){
+        this.ws.close();
+    }
+
+}
+
+
+export default {WebsocketVideoStream}

photon-client/src/plugins/objectDiff.js

@@ -1,121 +0,0 @@
-//https://gomakethings.com/getting-the-differences-between-two-objects-with-vanilla-js/
-export const diff = function (obj1, obj2) {
-
-    // Make sure an object to compare is provided
-    if (!obj2 || Object.prototype.toString.call(obj2) !== '[object Object]') {
-        return obj1;
-    }
-
-    //
-    // Variables
-    //
-
-    let diffs = {};
-    let key;
-
-
-    //
-    // Methods
-    //
-
-    /**
-     * Check if two arrays are equal
-     * @param  {Array}   arr1 The first array
-     * @param  {Array}   arr2 The second array
-     * @return {Boolean}      If true, both arrays are equal
-     */
-    const arraysMatch = function (arr1, arr2) {
-
-        // Check if the arrays are the same length
-        if (arr1.length !== arr2.length) return false;
-
-        // Check if all items exist and are in the same order
-        for (let i = 0; i < arr1.length; i++) {
-            if (arr1[i] !== arr2[i]) return false;
-        }
-
-        // Otherwise, return true
-        return true;
-
-    };
-
-    /**
-     * Compare two items and push non-matches to object
-     * @param  {*}      item1 The first item
-     * @param  {*}      item2 The second item
-     * @param  {String} key   The key in our object
-     */
-    const compare = function (item1, item2, key) {
-
-        // Get the object type
-        let type1 = Object.prototype.toString.call(item1);
-        let type2 = Object.prototype.toString.call(item2);
-
-        // If type2 is undefined it has been removed
-        if (type2 === '[object Undefined]') {
-            diffs[key] = null;
-            return;
-        }
-
-        // If items are different types
-        if (type1 !== type2) {
-            diffs[key] = item2;
-            return;
-        }
-
-        // If an object, compare recursively
-        if (type1 === '[object Object]') {
-            let objDiff = diff(item1, item2);
-            if (Object.keys(objDiff).length > 1) {
-                diffs[key] = objDiff;
-            }
-            return;
-        }
-
-        // If an array, compare
-        if (type1 === '[object Array]') {
-            if (!arraysMatch(item1, item2)) {
-                diffs[key] = item2;
-            }
-            return;
-        }
-
-        // Else if it's a function, convert to a string and compare
-        // Otherwise, just compare
-        if (type1 === '[object Function]') {
-            if (item1.toString() !== item2.toString()) {
-                diffs[key] = item2;
-            }
-        } else {
-            if (item1 !== item2) {
-                diffs[key] = item2;
-            }
-        }
-
-    };
-
-
-    //
-    // Compare our objects
-    //
-
-    // Loop through the first object
-    for (key in obj1) {
-        if (obj1.hasOwnProperty(key)) {
-            compare(obj1[key], obj2[key], key);
-        }
-    }
-
-    // Loop through the second object and find missing items
-    for (key in obj2) {
-        if (obj2.hasOwnProperty(key)) {
-            if (!obj1[key] && obj1[key] !== obj2[key] ) {
-                diffs[key] = obj2[key];
-            }
-        }
-    }
-
-    // Return the object of differences
-    return diffs;
-
-};

photon-client/src/scss/variables.scss

@@ -5,4 +5,4 @@ $body-font-family: $default-font;
 $heading-font-family: $default-font;
 .v-application {
     font-family: $default-font !important;
-}
+}

photon-client/src/store/index.js

@@ -15,6 +15,16 @@ export default new Vuex.Store({
     },
     state: {
         backendConnected: false,
+        websocket: null,
+        ntConnectionInfo: {
+            connected: false,
+            address: "",
+            clients: 0,
+        },
+        networkInfo: {
+            possibleRios: ["Loading..."],
+            deviceips: ["Loading..."],
+        },
         connectedCallbacks: [],
         colorPicking: false,
         logsOverlay: false,
@@ -26,8 +36,8 @@ export default new Vuex.Store({
                 tiltDegrees: 0.0,
                 currentPipelineIndex: 0,
                 pipelineNicknames: ["Unknown"],
-                outputStreamPort: 1181,
-                inputStreamPort: 1182,
+                outputStreamPort: 0,
+                inputStreamPort: 0,
                 nickname: "Unknown",
                 videoFormatList: [
                     {
@@ -42,13 +52,15 @@ export default new Vuex.Store({
                 isFovConfigurable: true,
                 calibrated: false,
                 currentPipelineSettings: {
-                    pipelineType: 2, // One of "driver", "reflective", "shape"
+                    pipelineType: 5, // One of "calib", "driver", "reflective", "shape", "AprilTag"
                     // 2 is reflective
 
                     // Settings that apply to all pipeline types
                     cameraExposure: 1,
                     cameraBrightness: 2,
-                    cameraGain: 3,
+                    cameraAutoExposure: false,
+                    cameraRedGain: 3,
+                    cameraBlueGain: 4,
                     inputImageRotationMode: 0,
                     cameraVideoModeIndex: 0,
                     streamingFrameDivisor: 0,
@@ -57,10 +69,13 @@ export default new Vuex.Store({
                     hsvHue: [0, 15],
                     hsvSaturation: [0, 15],
                     hsvValue: [0, 25],
+                    hueInverted: false,
                     contourArea: [0, 12],
                     contourRatio: [0, 12],
                     contourFullness: [0, 12],
                     contourSpecklePercentage: 5,
+                    contourFilterRangeX: 5,
+                    contourFilterRangeY: 5,
                     contourGroupingMode: 0,
                     contourIntersection: 0,
                     contourSortMode: 0,
@@ -75,7 +90,16 @@ export default new Vuex.Store({
 
                     cornerDetectionAccuracyPercentage: 10,
 
-                    // Settings that apply to shape
+                    // Settings that apply to AprilTag
+                    tagFamily: 1,
+                    decimate: 1.0,
+                    blur: 0.0,
+                    threads: 1,
+                    debug: false,
+                    refineEdges: true,
+                    numIterations: 1,
+                    decisionMargin: 0,
+                    hammingDist: 0,
                 }
             }
         ],
@@ -89,9 +113,18 @@ export default new Vuex.Store({
                     skew: 0,
                     area: 0,
                     // 3D only
-                    pose: {x: 0, y: 0, rot: 0},
-                }]
-            },
+                    pose: {x: 1, y: 1, z: 0, qw: 1, qx: 0, qy: 0, qz: 0},
+                },
+            {
+                // Available in both 2D and 3D
+                pitch: 0,
+                yaw: 0,
+                skew: 0,
+                area: 0,
+                // 3D only
+                pose: {x: 2, y: 3, z: 0, qw: 1, qx: 0, qy: 0, qz: 0},
+            }]
+        },
         settings: {
             general: {
                 version: "Unknown",
@@ -137,12 +170,16 @@ export default new Vuex.Store({
     },
     mutations: {
         compactMode: set('compactMode'),
+        websocket: set('websocket'),
         cameraSettings: set('cameraSettings'),
         currentCameraIndex: set('currentCameraIndex'),
         selectedOutputs: set('selectedOutputs'),
         settings: set('settings'),
         calibrationData: set('calibrationData'),
         metrics: set('metrics'),
+        ntConnectionInfo: set('ntConnectionInfo'),
+        networkInfo: set('networkInfo'),
+        backendConnected: set('backendConnected'),
         logString: (state, newStr) => {
             const str = state.logMessages;
             str.push(newStr);
@@ -245,5 +282,6 @@ export default new Vuex.Store({
         },
         pipelineList: state => state.cameraSettings[state.currentCameraIndex].pipelineNicknames,
         calibrationList: state => state.cameraSettings[state.currentCameraIndex].calibrations,
+        pipelineType: state => state.cameraSettings[state.currentCameraIndex].currentPipelineSettings.pipelineType
     }
-})
+})

photon-client/src/store/modules/undoRedo.js

@@ -69,4 +69,4 @@ export default {
         }
     }
 
-};
+};

photon-client/src/theme.js

@@ -5,4 +5,4 @@ const theme = Object.freeze({
     background: "#232C37",
 });
 
-export default theme;
+export default theme;

photon-client/src/views/CamerasView.vue

@@ -19,8 +19,8 @@
             <CVselect
               v-model="currentCameraIndex"
               name="Camera"
-              select-cols="10"
               :list="$store.getters.cameraList"
+              :select-cols="$vuetify.breakpoint.mdAndUp ? 10 : 7"
               @input="handleInput('currentCamera',currentCameraIndex)"
             />
             <CVnumberinput
@@ -28,13 +28,7 @@
               :tooltip="cameraSettings.isFovConfigurable ? 'Field of view (in degrees) of the camera measured across the diagonal of the frame, in a video mode which covers the whole sensor area.' : 'This setting is managed by a vendor'"
               name="Maximum diagonal FOV"
               :disabled="!cameraSettings.isFovConfigurable"
-            />
-            <br>
-            <CVnumberinput
-              v-model="cameraSettings.tiltDegrees"
-              name="Camera pitch"
-              tooltip="How many degrees above the horizontal the physical camera is tilted"
-              :step="0.01"
+              :label-cols="$vuetify.breakpoint.mdAndUp ? undefined : 7"
             />
             <br>
             <v-btn
@@ -66,43 +60,59 @@
                 cols="12"
                 md="6"
               >
-                <CVselect
-                  v-model="selectedFilteredResIndex"
-                  name="Resolution"
-                  select-cols="7"
-                  :list="stringResolutionList"
-                  :disabled="isCalibrating"
-                  tooltip="Resolution to calibrate at (you will have to calibrate every resolution you use 3D mode on)"
-                />
-                <CVselect
-                  v-model="boardType"
-                  name="Board Type"
-                  select-cols="7"
-                  :list="['Chessboard', 'Dot Grid']"
-                  :disabled="isCalibrating"
-                  tooltip="Calibration board pattern to use"
-                />
-                <CVnumberinput
-                  v-model="squareSizeIn"
-                  name="Pattern Spacing (in)"
-                  label-cols="5"
-                  tooltip="Spacing between pattern features in inches"
-                  :disabled="isCalibrating"
-                />
-                <CVnumberinput
-                  v-model="boardWidth"
-                  name="Board width"
-                  label-cols="5"
-                  tooltip="Width of the board in dots or chessboard squares; with the standard chessboard, this is usually 8"
-                  :disabled="isCalibrating"
-                />
-                <CVnumberinput
-                  v-model="boardHeight"
-                  name="Board height"
-                  label-cols="5"
-                  tooltip="Height of the board in dots or chessboard squares; with the standard chessboard, this is usually 8"
-                  :disabled="isCalibrating"
-                />
+                <v-form
+                  ref="form"
+                  v-model="settingsValid"
+                >
+                  <CVselect
+                    v-model="selectedFilteredResIndex"
+                    name="Resolution"
+                    select-cols="7"
+                    :list="stringResolutionList"
+                    :disabled="isCalibrating"
+                    tooltip="Resolution to calibrate at (you will have to calibrate every resolution you use 3D mode on)"
+                  />
+                  <CVselect
+                    v-model="streamingFrameDivisor"
+                    name="Decimation"
+                    tooltip="Resolution to which camera frames are downscaled for detection. Calibration still uses full-res"
+                    :list="calibrationDivisors"
+                    select-cols="7"
+                    @rollback="e => rollback('streamingFrameDivisor', e)"
+                  />
+                  <CVselect
+                    v-model="boardType"
+                    name="Board Type"
+                    select-cols="7"
+                    :list="['Chessboard', 'Dot Grid']"
+                    :disabled="isCalibrating"
+                    tooltip="Calibration board pattern to use"
+                  />
+                  <CVnumberinput
+                    v-model="squareSizeIn"
+                    name="Pattern Spacing (in)"
+                    tooltip="Spacing between pattern features in inches"
+                    :disabled="isCalibrating"
+                    :rules="[v => (v > 0) || 'Size must be positive']"
+                    :label-cols="$vuetify.breakpoint.mdAndUp ? 5 : 7"
+                  />
+                  <CVnumberinput
+                    v-model="boardWidth"
+                    name="Board width"
+                    tooltip="Width of the board in dots or chessboard squares"
+                    :disabled="isCalibrating"
+                    :rules="[v => (v >= 4) || 'Width must be at least 4']"
+                    :label-cols="$vuetify.breakpoint.mdAndUp ? 5 : 7"
+                  />
+                  <CVnumberinput
+                    v-model="boardHeight"
+                    name="Board height"
+                    tooltip="Height of the board in dots or chessboard squares"
+                    :disabled="isCalibrating"
+                    :rules="[v => (v >= 4) || 'Height must be at least 4']"
+                    :label-cols="$vuetify.breakpoint.mdAndUp ? 5 : 7"
+                  />
+                </v-form>
               </v-col>
 
               <!-- Calibrated table -->
@@ -136,6 +146,24 @@
                             text="Standard Deviation"
                           />
                         </th>
+                        <th class="text-center">
+                          <tooltipped-label
+                            tooltip="Estimated Horizontal FOV, in degrees"
+                            text="Horizontal FOV"
+                          />
+                        </th>
+                        <th class="text-center">
+                          <tooltipped-label
+                            tooltip="Estimated Vertical FOV, in degrees"
+                            text="Vertical FOV"
+                          />
+                        </th>
+                        <th class="text-center">
+                          <tooltipped-label
+                            tooltip="Estimated Diagonal FOV, in degrees"
+                            text="Diagonal FOV"
+                          />
+                        </th>
                       </tr>
                     </thead>
                     <tbody>
@@ -148,6 +176,9 @@
                           {{ isCalibrated(value) ? value.mean.toFixed(2) + "px" : "—" }}
                         </td>
                         <td> {{ isCalibrated(value) ? value.standardDeviation.toFixed(2) + "px" : "—" }} </td>
+                        <td> {{ isCalibrated(value) ? value.horizontalFOV.toFixed(2) + "°" : "—" }} </td>
+                        <td> {{ isCalibrated(value) ? value.verticalFOV.toFixed(2) + "°" : "—" }} </td>
+                        <td> {{ isCalibrated(value) ? value.diagonalFOV.toFixed(2) + "°" : "—" }} </td>
                       </tr>
                     </tbody>
                   </v-simple-table>
@@ -171,10 +202,13 @@
               >
                 <CVslider
                   v-model="$store.getters.currentPipelineSettings.cameraExposure"
+                  :disabled="$store.getters.currentPipelineSettings.cameraAutoExposure"
                   name="Exposure"
                   :min="0"
                   :max="100"
                   slider-cols="8"
+                  step="0.1"
+                  tooltip="Directly controls how much light is allowed to fall onto the sensor, which affects apparent brightness"
                   @input="e => handlePipelineUpdate('cameraExposure', e)"
                 />
                 <CVslider
@@ -185,14 +219,43 @@
                   slider-cols="8"
                   @input="e => handlePipelineUpdate('cameraBrightness', e)"
                 />
+                <CVswitch
+                  v-model="$store.getters.currentPipelineSettings.cameraAutoExposure"
+                  class="pt-2"
+                  name="Auto Exposure"
+                  tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
+                  @input="e => handlePipelineUpdate('cameraAutoExposure', e)"
+                />
                 <CVslider
-                  v-if="$store.getters.currentPipelineSettings.cameraGain !== -1"
-                  v-model="$store.getters.currentPipelineSettings.cameraGain"
-                  name="Gain"
-                  :min="0"
-                  :max="100"
-                  slider-cols="8"
-                  @input="e => handlePipelineUpdate('cameraGain', e)"
+                  v-if="cameraGain >= 0"
+                  v-model="cameraGain"
+                  name="Camera Gain"
+                  min="0"
+                  max="100"
+                  tooltip="Controls camera gain, similar to brightness"
+                  :slider-cols="largeBox"
+                  @input="handlePipelineData('cameraGain')"
+                  @rollback="e => rollback('cameraGain', e)"
+                />
+                <CVslider
+                  v-if="$store.getters.currentPipelineSettings.cameraRedGain !== -1"
+                  v-model="$store.getters.currentPipelineSettings.cameraRedGain"
+                  name="Red AWB Gain"
+                  min="0"
+                  max="100"
+                  tooltip="Controls red automatic white balance gain, which affects how the camera captures colors in different conditions"
+                  :slider-cols="8"
+                  @input="e => handlePipelineData('cameraRedGain', e)"
+                />
+                <CVslider
+                  v-if="$store.getters.currentPipelineSettings.cameraBlueGain !== -1"
+                  v-model="$store.getters.currentPipelineSettings.cameraBlueGain"
+                  name="Blue AWB Gain"
+                  min="0"
+                  max="100"
+                  tooltip="Controls blue automatic white balance gain, which affects how the camera captures colors in different conditions"
+                  :slider-cols="8"
+                  @input="e => handlePipelineData('cameraBlueGain', e)"
                 />
               </v-col>
             </v-row>
@@ -227,19 +290,27 @@
                   small
                   outlined
                   style="width: 100%;"
+                  :disabled="!settingsValid"
                   @click="downloadBoard"
                 >
                   <v-icon left>
                     mdi-download
                   </v-icon>
-                  Download Chessboard
+                  Download Target
+                </v-btn>
+              </v-col>
+              <v-col>
+                <v-btn
+                  color="secondary"
+                  small
+                  style="width: 100%;"
+                  @click="$refs.importCalibrationFromCalibdb.click()"
+                >
+                  <v-icon left>
+                    mdi-upload
+                  </v-icon>
+                  Import From CalibDB
                 </v-btn>
-                <a
-                  ref="calibrationFile"
-                  style="color: black; text-decoration: none; display: none"
-                  :href="require('../assets/chessboard.png')"
-                  download="chessboard.png"
-                />
               </v-col>
             </v-row>
           </div>
@@ -252,7 +323,8 @@
       >
         <template>
           <CVimage
-            :address="$store.getters.streamAddress[1]"
+            :id="cameras-cal"
+            :idx=1
             :disconnected="!$store.state.backendConnected"
             scale="100"
             style="border-radius: 5px;"
@@ -316,6 +388,20 @@
         </template>
       </v-col>
     </v-row>
+
+    <!-- Special hidden upload input that gets 'clicked' when the user imports settings -->
+    <input
+      ref="importCalibrationFromCalibdb"
+      type="file"
+      accept=".json"
+      style="display: none;"
+      @change="readImportedCalibration"
+    />
+
+    <v-snackbar v-model="uploadSnack" top :color="uploadSnackData.color" timeout="-1">
+      <span>{{ uploadSnackData.text }}</span>
+    </v-snackbar>
+
   </div>
 </template>
 
@@ -323,8 +409,11 @@
 import CVselect from '../components/common/cv-select';
 import CVnumberinput from '../components/common/cv-number-input';
 import CVslider from '../components/common/cv-slider';
+import CVswitch from '../components/common/cv-switch';
 import CVimage from "../components/common/cv-image";
 import TooltippedLabel from "../components/common/cv-tooltipped-label";
+import jsPDF from "jspdf";
+import "../jsPDFFonts/Prompt-Regular-normal.js";
 
 export default {
     name: 'Cameras',
@@ -333,6 +422,7 @@ export default {
         CVselect,
         CVnumberinput,
         CVslider,
+        CVswitch,
         CVimage
     },
     data() {
@@ -341,11 +431,18 @@ export default {
             calibrationInProgress: false,
             calibrationFailed: false,
             filteredVideomodeIndex: 0,
+            settingsValid: true,
+            unfilteredStreamDivisors: [1, 2, 4],
+            uploadSnackData: {
+              color: "success",
+              text: "",
+            },
+            uploadSnack: false,
         }
     },
     computed: {
         disallowCalibration() {
-            return !(this.calibrationData.boardType === 0 || this.calibrationData.boardType === 1);
+            return !(this.calibrationData.boardType === 0 || this.calibrationData.boardType === 1) || !this.settingsValid;
         },
         checkCancellation() {
             if (this.isCalibrating) {
@@ -365,6 +462,31 @@ export default {
             }
         },
 
+        cameraGain: {
+          get() {
+              return parseInt(this.$store.getters.currentPipelineSettings.cameraGain)
+          },
+          set(val) {
+              this.$store.commit("mutatePipeline", {"cameraGain": parseInt(val)});
+          }
+        },
+
+        calibrationDivisors: {
+          get() {
+            return this.unfilteredStreamDivisors.filter(item => {
+              var res = this.stringResolutionList[this.selectedFilteredResIndex].split(" X ").map(it => parseInt(it));
+              console.log(res);
+              console.log(item);
+              // Realistically, we need more than 320x240, but lower than this is
+              // basically unusable. For now, don't allow decimations that take us
+              // below that
+              const ret = ((res[0] / item) >= 300 && (res[1] / item) >= 220) || (item === 1);
+              console.log(ret);
+              return ret;
+            })
+          }
+        },
+
         // Makes sure there's only one entry per resolution
         filteredResolutionList: {
             get() {
@@ -377,6 +499,9 @@ export default {
                         if (calib != null) {
                             it['standardDeviation'] = calib.standardDeviation;
                             it['mean'] = calib.perViewErrors.reduce((a, b) => a + b) / calib.perViewErrors.length;
+                            it['horizontalFOV'] = 2 * Math.atan2(it.width/2,calib.intrinsics[0]) * (180/Math.PI);
+                            it['verticalFOV'] = 2 * Math.atan2(it.height/2,calib.intrinsics[4]) * (180/Math.PI);
+                            it['diagonalFOV'] = 2 * Math.atan2(Math.sqrt(it.width**2 + (it.height/(calib.intrinsics[4]/calib.intrinsics[0]))**2)/2,calib.intrinsics[0]) * (180/Math.PI);
                         }
                         filtered.push(it);
                     }
@@ -385,13 +510,11 @@ export default {
                 return filtered
             }
         },
-
         stringResolutionList: {
             get() {
                 return this.filteredResolutionList.map(res => `${res['width']} X ${res['height']}`);
             }
         },
-
         cameraSettings: {
             get() {
                 return this.$store.getters.currentCameraSettings;
@@ -401,6 +524,16 @@ export default {
             }
         },
 
+        streamingFrameDivisor: {
+            get() {
+                return this.$store.getters.currentPipelineSettings.streamingFrameDivisor;
+            },
+            set(val) {
+                this.$store.commit("mutatePipeline", {"streamingFrameDivisor": val});
+                this.handlePipelineUpdate("streamingFrameDivisor", val);
+            }
+        },
+
         boardType: {
             get() {
                 return this.calibrationData.boardType
@@ -470,6 +603,57 @@ export default {
         },
     },
     methods: {
+
+    readImportedCalibration(event) {
+      // let formData = new FormData();
+      // formData.append("zipData", event.target.files[0]);
+      const filename = event.target.files[0].name;
+
+      event.target.files[0].text().then(fileText => {
+        const data = {
+          "cameraIndex": this.$store.getters.currentCameraIndex,
+          "payload": fileText,
+          "filename": filename,
+        };
+
+        this.axios
+          .post("http://" + this.$address + "/api/calibration/import", data, {
+            headers: { "Content-Type": "text/plain" },
+          })
+          .then(() => {
+            this.uploadSnackData = {
+              color: "success",
+              text:
+                "Calibration imported successfully! PhotonVision will restart in the background...",
+            };
+            this.uploadSnack = true;
+          })
+          .catch((err) => {
+            if (err.response) {
+              this.uploadSnackData = {
+                color: "error",
+                text:
+                  "Error while uploading calibration file! Could not process provided file.",
+              };
+            } else if (err.request) {
+              this.uploadSnackData = {
+                color: "error",
+                text:
+                  "Error while uploading calibration file! No respond to upload attempt.",
+              };
+            } else {
+              this.uploadSnackData = {
+                color: "error",
+                text: "Error while uploading calibration file!",
+              };
+            }
+            this.uploadSnack = true;
+          });
+
+        })
+
+    },
+
         closeDialog() {
             this.snack = false;
             this.calibrationInProgress = false;
@@ -486,16 +670,103 @@ export default {
             return ret;
         },
         downloadBoard() {
-            this.axios.get("http://" + this.$address + require('../assets/chessboard.png'), {responseType: 'blob'}).then((response) => {
-                require('downloadjs')(response.data, "Calibration Board", "image/png");
-            });
+            // Generates a .pdf of a board for calibration and downloads it
+
+            //Murica paper.
+            var doc = new jsPDF({unit: 'in', format:'letter'});
+            var paper_x = 8.5;
+            var paper_y = 11.0;
+
+            //Load in custom fonts
+            console.log(doc.getFontList());
+            doc.setFont('Prompt-Regular');
+            doc.setFontSize(12);
+
+            // Common Parameters
+            var num_x = this.boardWidth;
+            var num_y = this.boardHeight;
+            var patternSize = this.squareSizeIn;
+            var isCheckerboard = (this.boardType==0);
+
+            var x_coord = 0.0;
+            var y_coord = 0.0;
+            var x_idx = 0;
+            var y_idx = 0;
+            var start_x = 0;
+            var start_y = 0;
+
+            var annotation = num_x + " x " + num_y + " | " + patternSize + "in "
+
+            if(isCheckerboard){
+              ///////////////////////////////////////////
+              // Checkerboard Pattern
+
+              start_x = paper_x/2.0 - (num_x * patternSize)/2.0;
+              start_y = paper_y/2.0 - (num_y * patternSize)/2.0;
+
+              for(y_idx = 0; y_idx < num_y; y_idx++){
+                for(x_idx = 0; x_idx < num_x; x_idx++){
+
+                  x_coord = start_x + x_idx * patternSize;
+                  y_coord = start_y + y_idx * patternSize;
+                  if((x_idx + y_idx) % 2 == 0){
+                    doc.rect(x_coord, y_coord, patternSize, patternSize, "F");
+                  }
+                }
+              }
+
+            } else {
+              ///////////////////////////////////////////
+              // Assymetric Dot-Grid Pattern
+              // see https://github.com/opencv/opencv/blob/b450dd7a87bc69997a8417d94bdfb87427a9fe62/modules/calib3d/src/circlesgrid.cpp#L437
+              // as well as FindBoardCornersPipe.java's Dotboard implementation
+
+              start_x = paper_x/2.0 - ((2*(num_x-1) + (num_y-1) % 2) * patternSize)/2.0;
+              start_y = paper_y/2.0 - (num_y-1 * patternSize)/2.0;
+
+              // Dot Grid Pattern
+              for(y_idx = 0; y_idx < num_y; y_idx++){
+                for(x_idx = 0; x_idx < num_x; x_idx++){
+                  x_coord = start_x + (2*x_idx + y_idx % 2) * patternSize;
+                  y_coord = start_y + y_idx * patternSize;
+                  doc.circle(x_coord, y_coord, patternSize/4.0, "F");
+                }
+              }
+            }
+
+            ///////////////////////////////////////////
+            // Draw a fixed size inch ruler pattern to
+            // help users debug their printers
+            var lineStartX = 1.0;
+            var lineEndX = paper_x - lineStartX;
+            var lineY = paper_y - 1.0;
+            doc.setFont('Prompt-Regular');
+            doc.setLineWidth(0.01);
+            doc.line(lineStartX, lineY, lineEndX, lineY);
+            var segIdx = 0;
+            for(var tickX = lineStartX; tickX <= lineEndX; tickX += 1.0){
+              doc.line(tickX, lineY, tickX, lineY + 0.25);
+              doc.text(String(segIdx) + (segIdx == 0 ? " in" : ""), tickX + 0.1, lineY + 0.25);
+              segIdx++;
+            }
+
+
+            ///////////////////////////////////////////
+            // Annotate what was drawn + branding
+            var img = new Image();
+            img.src = require('@/assets/logoMono.png');
+            doc.addImage(img, 'PNG', 1.0, 0.75, 1.4, 0.5 );
+            doc.setFont('Prompt-Regular');
+            doc.text(annotation, paper_x-1.0, 1.0, {maxWidth:(paper_x - 2.0)/2, align:"right"});
+
+            doc.save("calibrationTarget.pdf");
+
         },
         sendCameraSettings() {
             this.axios.post("http://" + this.$address + "/api/settings/camera", {
                 "settings": this.cameraSettings,
                 "index": this.$store.state.currentCameraIndex
-            }).then(
-                function (response) {
+            }).then(response => {
                     if (response.status === 200) {
                         this.$store.state.saveBar = true;
                     }
@@ -516,14 +787,15 @@ export default {
             if (this.isCalibrating === true) {
                 data['takeCalibrationSnapshot'] = true
             } else {
+                // This store prevents an edge case of a user not selecting a different resolution, which causes the set logic to not be called
+                this.$store.commit('mutateCalibrationState', {['videoModeIndex']: this.filteredResolutionList[this.selectedFilteredResIndex].index});
                 const calData = this.calibrationData;
                 calData.isCalibrating = true;
                 data['startPnpCalibration'] = calData;
-
                 console.log("starting calibration with index " + calData.videoModeIndex);
             }
-
-            this.$socket.send(this.$msgPack.encode(data));
+            this.$store.commit('currentPipelineIndex', -2);
+            this.$store.state.websocket.ws.send(this.$msgPack.encode(data));
         },
         sendCalibrationFinish() {
             console.log("finishing calibration for index " + this.$store.getters.currentCameraIndex);
@@ -563,4 +835,4 @@ export default {
 .v-data-table th, td {
     font-size: 1rem !important;
 }
-</style>
+</style>

photon-client/src/views/LogsView.vue

@@ -12,12 +12,21 @@
         color="secondary"
         style="margin-left: auto;"
         depressed
-        @click="download('photonlog.log', rawLogs.map(it => it.message).join('\n'))"
+        @click="$refs.exportLogFile.click()"
       >
         <v-icon left>
           mdi-download
         </v-icon>
         Download Log
+
+        <!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
+        <a
+          ref="exportLogFile"
+          style="color: black; text-decoration: none; display: none"
+          :href="'http://' + this.$address + '/api/settings/photonvision-journalctl.txt'"
+          download="photonvision-journalctl.txt"
+        />
+
       </v-btn>
     </v-card-title>
     <div class="pr-6 pl-6">

photon-client/src/views/PipelineView.vue

@@ -1,74 +1,75 @@
 <template>
   <div>
     <v-container
-      class="pa-3"
-      fluid
+        class="pa-3"
+        fluid
     >
       <v-row
-        no-gutters
-        align="center"
-        justify="center"
+          no-gutters
+          align="center"
+          justify="center"
       >
         <v-col
-          cols="12"
-          :class="['pb-3 ', 'pr-lg-3']"
-          lg="8"
-          align-self="stretch"
+            cols="12"
+            :class="['pb-3 ', 'pr-lg-3']"
+            lg="8"
+            align-self="stretch"
         >
           <v-card
-            color="primary"
-            height="100%"
-            style="display: flex; flex-direction: column"
-            dark
+              color="primary"
+              height="100%"
+              style="display: flex; flex-direction: column"
+              dark
           >
             <v-card-title
-              class="pb-0 mb-0 pl-4 pt-1"
-              style="height: 15%; min-height: 50px;"
+                class="pb-0 mb-0 pl-4 pt-1"
+                style="height: 15%; min-height: 50px;"
             >
               Cameras
               <v-chip
-                :class="fpsTooLow ? 'ml-2 mt-1' : 'mt-2'"
-                x-small
-                label
-                :color="fpsTooLow ? 'red' : 'transparent'"
-                :text-color="fpsTooLow ? 'white' : 'grey'"
+                  :class="fpsTooLow ? 'ml-2 mt-1' : 'mt-2'"
+                  x-small
+                  label
+                  :color="fpsTooLow ? 'error' : 'transparent'"
+                  :text-color="fpsTooLow ? 'white' : 'grey'"
               >
-                <span class="pr-1">{{ Math.round($store.state.pipelineResults.fps) }}&nbsp;FPS &ndash;</span>
-                <span v-if="!fpsTooLow">{{ Math.round($store.state.pipelineResults.latency) }} ms latency</span>
-                <span v-else-if="!$store.getters.currentPipelineSettings.inputShouldShow">HSV thresholds are too broad; narrow them for better performance</span>
-                <span v-else>stop viewing the color stream for better performance</span>
+                <span class="pr-1">Processing @ {{ Math.round($store.state.pipelineResults.fps) }}&nbsp;FPS &ndash;</span>
+                <span v-if="fpsTooLow && !$store.getters.currentPipelineSettings.inputShouldShow && $store.getters.pipelineType == 2">HSV thresholds are too broad; narrow them for better performance</span>
+                <span v-else-if="fpsTooLow && getters.currentCameraSettings.inputShouldShow">stop viewing the raw stream for better performance</span>
+                <span v-else>{{ Math.min(Math.round($store.state.pipelineResults.latency), 9999) }} ms latency</span>
               </v-chip>
               <v-switch
-                v-model="driverMode"
-                label="Driver Mode"
-                style="margin-left: auto;"
-                color="accent"
+                  v-model="driverMode"
+                  label="Driver Mode"
+                  style="margin-left: auto;"
+                  color="accent"
               />
             </v-card-title>
             <v-row
-              align="center"
+                align="center"
             >
               <v-col
-                v-for="idx in (selectedOutputs instanceof Array ? selectedOutputs : [selectedOutputs])"
-                :key="idx"
-                cols="12"
-                :md="selectedOutputs.length === 1 ? 12 : Math.floor(12 / selectedOutputs.length)"
-                class="pb-0 pt-0"
-                style="height: 100%;"
+                  v-for="idx in (selectedOutputs instanceof Array ? selectedOutputs : [selectedOutputs])"
+                  :key="idx"
+                  cols="12"
+                  :md="selectedOutputs.length === 1 ? 12 : Math.floor(12 / selectedOutputs.length)"
+                  class="pb-0 pt-0"
+                  style="height: 100%;"
               >
                 <div style="position: relative; width: 100%; height: 100%;">
                   <cv-image
-                    :id="idx === 0 ? 'normal-stream' : ''"
-                    ref="streams"
-                    :address="$store.getters.streamAddress[idx]"
-                    :disconnected="!$store.state.backendConnected"
-                    scale="100"
-                    :max-height="$store.getters.isDriverMode ? '40vh' : '300px'"
-                    :max-height-md="$store.getters.isDriverMode ? '50vh' : '320px'"
-                    :max-height-xl="$store.getters.isDriverMode ? '60vh' : '450px'"
-                    :alt="'Stream' + idx"
-                    :color-picking="$store.state.colorPicking && idx === 0"
-                    @click="onImageClick"
+                      :id="idx === 0 ? 'raw-stream' : 'processed-stream'"
+                      ref="streams"
+                      :idx=idx
+                      :disconnected="!$store.state.backendConnected"
+                      scale="100"
+                      :max-height="$store.getters.isDriverMode ? '40vh' : '300px'"
+                      :max-height-md="$store.getters.isDriverMode ? '50vh' : '380px'"
+                      :max-height-lg="$store.getters.isDriverMode ? '55vh' : '390px'"
+                      :max-height-xl="$store.getters.isDriverMode ? '60vh' : '450px'"
+                      :alt="idx === 0 ? 'Raw stream' : 'Processed stream'"
+                      :color-picking="$store.state.colorPicking && idx === 0"
+                      @click="onImageClick"
                   />
                 </div>
               </v-col>
@@ -76,48 +77,44 @@
           </v-card>
         </v-col>
         <v-col
-          cols="12"
-          class="pb-3"
-          lg="4"
-          align-self="stretch"
+            cols="12"
+            class="pb-3"
+            lg="4"
+            align-self="stretch"
         >
           <v-card
-            color="primary"
+              color="primary"
           >
-            <!--            <v-btn @click="onCamNameChange">-->
-            <!--              Reload-->
-            <!--            </v-btn>-->
-            <camera-and-pipeline-select @camera-name-changed="reloadStreams" />
+            <camera-and-pipeline-select />
           </v-card>
           <v-card
-            :disabled="$store.getters.isDriverMode || $store.state.colorPicking"
-            class="mt-3"
-            color="primary"
+              :disabled="$store.getters.isDriverMode || $store.state.colorPicking"
+              class="mt-3"
+              color="primary"
           >
             <v-row
-              align="center"
-              class="pl-3 pr-3"
+                align="center"
+                class="pl-3 pr-3"
             >
-              <!--  -->
               <v-col lg="12">
                 <p style="color: white;">
                   Processing mode:
                 </p>
                 <v-btn-toggle
-                  v-model="processingMode"
-                  mandatory
-                  dark
-                  class="fill"
+                    v-model="processingMode"
+                    mandatory
+                    dark
+                    class="fill"
                 >
                   <v-btn
-                    color="secondary"
+                      color="secondary"
                   >
                     <v-icon>mdi-crop-square</v-icon>
                     <span>2D</span>
                   </v-btn>
                   <v-btn
-                    color="secondary"
-                    @click="on3DClick"
+                      color="secondary"
+                      @click="on3DClick"
                   >
                     <v-icon>mdi-cube-outline</v-icon>
                     <span>3D</span>
@@ -129,25 +126,25 @@
                   Stream display:
                 </p>
                 <v-btn-toggle
-                  v-model="selectedOutputs"
-                  :multiple="$vuetify.breakpoint.mdAndUp"
-                  mandatory
-                  dark
-                  class="fill"
+                    v-model="selectedOutputs"
+                    :multiple="$vuetify.breakpoint.mdAndUp"
+                    mandatory
+                    dark
+                    class="fill"
                 >
                   <v-btn
-                    color="secondary"
-                    class="fill"
+                      color="secondary"
+                      class="fill"
                   >
-                    <v-icon>mdi-palette</v-icon>
-                    <span>Normal</span>
+                    <v-icon>mdi-import</v-icon>
+                    <span>Raw</span>
                   </v-btn>
                   <v-btn
-                    color="secondary"
-                    class="fill"
+                      color="secondary"
+                      class="fill"
                   >
-                    <v-icon>mdi-compare</v-icon>
-                    <span>Threshold</span>
+                    <v-icon>mdi-export</v-icon>
+                    <span>Processed</span>
                   </v-btn>
                 </v-btn-toggle>
               </v-col>
@@ -157,29 +154,29 @@
       </v-row>
       <v-row no-gutters>
         <v-col
-          v-for="(tabs, idx) in tabGroups"
-          :key="idx"
-          :cols="Math.floor(12 / tabGroups.length)"
-          :class="idx !== tabGroups.length - 1 ? 'pr-3' : ''"
-          align-self="stretch"
+            v-for="(tabs, idx) in tabGroups"
+            :key="idx"
+            :cols="Math.floor(12 / tabGroups.length)"
+            :class="idx !== tabGroups.length - 1 ? 'pr-3' : ''"
+            align-self="stretch"
         >
           <v-card
-            color="primary"
-            height="100%"
-            class="pr-4 pl-4"
+              color="primary"
+              height="100%"
+              class="pr-4 pl-4"
           >
             <v-tabs
-              v-if="!$store.getters.isDriverMode"
-              v-model="selectedTabs[idx]"
-              grow
-              background-color="primary"
-              dark
-              height="48"
-              slider-color="accent"
+                v-if="!$store.getters.isDriverMode"
+                v-model="selectedTabs[idx]"
+                grow
+                background-color="primary"
+                dark
+                height="48"
+                slider-color="accent"
             >
               <v-tab
-                v-for="(tab, i) in tabs.filter(it => it.name !== '3D' || $store.getters.currentPipelineSettings.solvePNPEnabled)"
-                :key="i"
+                  v-for="(tab, i) in tabs"
+                  :key="i"
               >
                 {{ tab.name }}
               </v-tab>
@@ -187,10 +184,10 @@
             <div class="pl-4 pr-4 pt-2">
               <keep-alive>
                 <component
-                  :is="(tabs[selectedTabs[idx]] || tabs[0]).component"
-                  :ref="(tabs[selectedTabs[idx]] || tabs[0]).name"
-                  v-model="$store.getters.pipeline"
-                  @update="$emit('save')"
+                    :is="(tabs[selectedTabs[idx]] || tabs[0]).component"
+                    :ref="(tabs[selectedTabs[idx]] || tabs[0]).name"
+                    v-model="$store.getters.pipeline"
+                    @update="$emit('save')"
                 />
               </keep-alive>
             </div>
@@ -198,30 +195,33 @@
         </v-col>
       </v-row>
     </v-container>
-    <!-- snack bar and modal -->
+
     <v-snackbar
-      v-model="snackbar"
-      :timeout="3000"
-      top
-      color="error"
+        v-model="showNTWarning"
+        color="error"
+        timeout="-1"
+        top
     >
-      <span style="color:#000">Can not remove the only pipeline!</span>
-      <v-btn
-        color="black"
-        text
-        @click="snackbar = false"
-      >
-        Close
-      </v-btn>
+      {{ $store.state.settings.networkSettings.runNTServer ?
+        "NetworkTables server enabled! PhotonLib may not work." :
+        "NetworkTables not connected! Are you on a network with a robot?" }}
+      <template v-slot:action>
+        <v-btn
+            text
+            @click="hideNTWarning = true"
+        >
+          Hide
+        </v-btn>
+      </template>
     </v-snackbar>
 
     <v-dialog
-      v-model="dialog"
-      width="500"
+        v-model="dialog"
+        width="500"
     >
       <v-card
-        color="primary"
-        dark
+          color="primary"
+          dark
       >
         <v-card-title>
           Current resolution not calibrated
@@ -230,9 +230,9 @@
         <v-card-text>
           Because the current resolution {{ this.$store.getters.currentVideoFormat.width }} x {{ this.$store.getters.currentVideoFormat.height }} is not yet calibrated, 3D mode cannot be enabled. Please
           <a
-            href="/#/cameras"
-            class="white--text"
-            @click="$emit('switch-to-cameras')"
+              href="/#/cameras"
+              class="white--text"
+              @click="$emit('switch-to-cameras')"
           > visit the Cameras tab</a> to calibrate this resolution. For now, SolvePNP will do nothing.
         </v-card-text>
 
@@ -241,9 +241,9 @@
         <v-card-actions>
           <v-spacer />
           <v-btn
-            color="white"
-            text
-            @click="closeUncalibratedDialog"
+              color="white"
+              text
+              @click="closeUncalibratedDialog"
           >
             OK
           </v-btn>
@@ -261,212 +261,267 @@ import ThresholdTab from './PipelineViews/ThresholdTab';
 import ContoursTab from './PipelineViews/ContoursTab';
 import OutputTab from './PipelineViews/OutputTab';
 import TargetsTab from "./PipelineViews/TargetsTab";
+import Map3DTab from './PipelineViews/Map3DTab';
 import PnPTab from './PipelineViews/PnPTab';
+import AprilTagTab from './PipelineViews/AprilTagTab';
+import ArucoTab from './PipelineViews/ArucoTab';
 
 export default {
-    name: 'Pipeline',
-    components: {
-        CameraAndPipelineSelect,
-        cvImage,
-        InputTab,
-        ThresholdTab,
-        ContoursTab,
-        OutputTab,
-        TargetsTab,
-        PnPTab,
-    },
-    data() {
-        return {
-            selectedTabsData: [0, 0, 0, 0],
-            snackbar: false,
-            counterData: 0,
-            dialog: false,
-            processingModeOverride: false
-        }
-    },
-    computed: {
-        selectedTabs: {
-            get() {
-                return this.$store.getters.isDriverMode ? [0] : this.selectedTabsData;
-            },
-            set(value) {
-                this.selectedTabsData = value;
-            }
-        },
-        tabGroups: {
-            get() {
-                let tabs = {
-                    input: {
-                        name: "Input",
-                        component: "InputTab",
-                    },
-                    threshold: {
-                        name: "Threshold",
-                        component: "ThresholdTab",
-                    },
-                    contours: {
-                        name: "Contours",
-                        component: "ContoursTab",
-                    },
-                    output: {
-                        name: "Output",
-                        component: "OutputTab",
-                    },
-                    targets: {
-                        name: "Target Info",
-                        component: "TargetsTab",
-                    },
-                    pnp: {
-                        name: "3D",
-                        component: "PnPTab",
-                    }
-                };
-
-                // 2D array of tab names and component names; each sub-array is a separate tab group
-                let ret = [];
-                if (this.$vuetify.breakpoint.smAndDown || this.$store.getters.isDriverMode || (this.$vuetify.breakpoint.mdAndDown && !this.$store.state.compactMode)) {
-                    // One big tab group with all the tabs
-                    ret[0] = Object.values(tabs);
-                } else if (this.$vuetify.breakpoint.mdAndDown || !this.$store.state.compactMode) {
-                    // Two tab groups, one with "input, threshold, contours, output" and the other with "target info, 3D"
-                    ret[0] = [tabs.input, tabs.threshold, tabs.contours, tabs.output];
-                    ret[1] = [tabs.targets, tabs.pnp];
-                } else if (this.$vuetify.breakpoint.lgAndDown) {
-                    // Three tab groups, one with "input", one with "threshold, contours, output", and the other with "target info, 3D"
-                    ret[0] = [tabs.input];
-                    ret[1] = [tabs.threshold, tabs.contours, tabs.output];
-                    ret[2] = [tabs.targets, tabs.pnp];
-                } else if (this.$vuetify.breakpoint.xl) {
-                    // Three tab groups, one with "input", one with "threshold, contours", and the other with "output, target info, 3D"
-                    ret[0] = [tabs.input];
-                    ret[1] = [tabs.threshold];
-                    ret[2] = [tabs.contours, tabs.output];
-                    ret[3] = [tabs.targets, tabs.pnp];
-                }
-
-                return ret;
-            }
-        },
-        processingMode: {
-            get() {
-                return (this.$store.getters.currentPipelineSettings.solvePNPEnabled || this.processingModeOverride) ? 1 : 0;
-            },
-            set(value) {
-                if (this.$store.getters.isCalibrated) {
-                    this.$store.getters.currentPipelineSettings.solvePNPEnabled = value === 1;
-                    this.handlePipelineUpdate("solvePNPEnabled", value === 1);
-                }
-            }
-        },
-        driverMode: {
-            get() {
-                return this.$store.getters.isDriverMode;
-            },
-            set(value) {
-                this.$store.getters.currentCameraSettings.currentPipelineIndex = value ? -1 : 0;
-                this.handleInputWithIndex('currentPipeline', value ? -1 : 0);
-            }
-        },
-        selectedOutputs: {
-            // All this logic exists to deal with the reality that the output select buttons sometimes need an array and sometimes need a number (depending on whether or not they're exclusive)
-            get() {
-                // We switch the selector to single-select only on sm-and-down size devices, so we have to return a Number instead of an Array in that state
-                let ret = [];
-                if (this.$store.state.colorPicking) {
-                    ret = [0]; // We want the input stream only while color picking
-                } else if (this.$store.getters.isDriverMode) {
-                    ret = [1]; // We want only the output stream in driver mode
-                } else {
-                  if (this.$store.getters.currentPipelineSettings.inputShouldShow) ret = ret.concat([0]);
-                  if (this.$store.getters.currentPipelineSettings.outputShouldShow) ret = ret.concat([1]);
-                  if (!ret.length) ret = [0];
-                }
-
-                if (this.$vuetify.breakpoint.mdAndUp) {
-                    return ret;
-                } else {
-                    return ret[0] || 0;
-                }
-            },
-            set(value) {
-                let valToCommit = [0];
-                if (value instanceof Array) {
-                  // Value is already an array, we don't need to do anything
-                  valToCommit = value;
-                } else if (value) {
-                  // Value is assumed to be a number, so we wrap it into an array
-                  valToCommit = [value];
-                }
-
-                this.$store.commit("mutatePipeline", {"inputShouldShow": valToCommit.includes(0)});
-                this.$store.commit("mutatePipeline", {"outputShouldShow": valToCommit.includes(1)});
-                this.handlePipelineUpdate("inputShouldShow", valToCommit.includes(0));
-            }
-        },
-        fpsTooLow: {
-            get() {
-                // For now we only show the FPS is too low warning when GPU acceleration is enabled, because we don't really trust the presented video modes otherwise
-                return this.$store.state.pipelineResults.fps - this.$store.getters.currentVideoFormat.fps < -5 && this.$store.state.pipelineResults.fps !== 0 && !this.$store.getters.isDriverMode && this.$store.state.settings.general.gpuAcceleration;
-            }
-        },
-        latency: {
-            get() {
-                return this.$store.getters.currentPipelineResults.latency;
-            }
-        },
-        isCalibrated: {
-          get() {
-            const resolution = this.$store.getters.videoFormatList[this.$store.getters.currentPipelineSettings.cameraVideoModeIndex];
-            return this.$store.getters.currentCameraSettings.calibrations
-                    .some(e => e.width === resolution.width && e.height === resolution.height)
-          }
-        },
-    },
-    created() {
-        this.$store.state.connectedCallbacks.push(this.reloadStreams)
-    },
-    methods: {
-        reloadStreams() {
-            // Reload the streams as we technically close and reopen them
-            this.$refs.streams.forEach(it => it.reload())
-        },
-        onImageClick(event) {
-            // Only run on the input stream
-            if (event.target.alt !== "Stream0") return;
-            // Get a reference to the threshold tab (if it is shown) and call its "onClick" method
-            let ref = this.$refs["Threshold"];
-            if (ref && ref[0])
-                ref[0].onClick(event)
-        },
-        on3DClick() {
-            if (!this.$store.getters.isCalibrated) {
-                this.dialog = true;
-                this.processingModeOverride = true;
-            }
-        },
-        closeUncalibratedDialog() {
-            this.dialog = false;
-            this.processingModeOverride = false;
-            // this.$store.getters.currentPipelineSettings.solvePNPEnabled = false;
-            this.handlePipelineUpdate("solvePNPEnabled", false);
-        }
+  name: 'Pipeline',
+  components: {
+    CameraAndPipelineSelect,
+    cvImage,
+    InputTab,
+    ThresholdTab,
+    ContoursTab,
+    OutputTab,
+    TargetsTab,
+    Map3DTab,
+    PnPTab,
+    AprilTagTab,
+    ArucoTab,
+  },
+  data() {
+    return {
+      selectedTabsData: [0, 0, 0, 0],
+      counterData: 0,
+      dialog: false,
+      processingModeOverride: false,
+      hideNTWarning: false,
     }
+  },
+  computed: {
+    selectedTabs: {
+      get() {
+        return this.$store.getters.isDriverMode ? [0] : this.selectedTabsData;
+      },
+      set(value) {
+        this.selectedTabsData = value;
+      }
+    },
+    tabGroups: {
+      get() {
+        let tabs = {
+          input: {
+            name: "Input",
+            component: "InputTab",
+          },
+          threshold: {
+            name: "Threshold",
+            component: "ThresholdTab",
+          },
+          contours: {
+            name: "Contours",
+            component: "ContoursTab",
+          },
+          apriltag: {
+            name: "AprilTag",
+            component: "AprilTagTab",
+          },
+          aruco: {
+            name: "Aruco",
+            component: "ArucoTab",
+          },
+          output: {
+            name: "Output",
+            component: "OutputTab",
+          },
+          targets: {
+            name: "Targets",
+            component: "TargetsTab",
+          },
+          pnp: {
+            name: "PnP",
+            component: "PnPTab",
+          },
+          map3d: {
+            name: "3D",
+            component: "Map3DTab",
+          }
+        };
+
+        // If not in 3d, name "3D" is illegal
+        const allow3d = this.$store.getters.currentPipelineSettings.solvePNPEnabled;
+        // If in apriltag, "Threshold" and "Contours" are illegal -- otherwise "AprilTag" is
+        const isAprilTag = (this.$store.getters.currentPipelineSettings.pipelineType - 2) === 2;
+        const isAruco = (this.$store.getters.currentPipelineSettings.pipelineType - 2) === 3;
+
+        // 2D array of tab names and component names; each sub-array is a separate tab group
+        let ret = [];
+        if (this.$vuetify.breakpoint.smAndDown || this.$store.getters.isDriverMode || (this.$vuetify.breakpoint.mdAndDown && !this.$store.state.compactMode)) {
+          // One big tab group with all the tabs
+          ret[0] = Object.values(tabs);
+        } else if (this.$vuetify.breakpoint.mdAndDown || !this.$store.state.compactMode) {
+          // Two tab groups, one with "input, threshold, contours, output" and the other with "target info, 3D"
+          ret[0] = [tabs.input, tabs.threshold, tabs.contours, tabs.apriltag, tabs.aruco, tabs.output];
+          ret[1] = [tabs.targets, tabs.pnp, tabs.map3d];
+        } else if (this.$vuetify.breakpoint.lgAndDown) {
+          // Three tab groups, one with "input", one with "threshold, contours, output", and the other with "target info, 3D"
+          ret[0] = [tabs.input];
+          ret[1] = [tabs.threshold, tabs.contours, tabs.apriltag,tabs.aruco, tabs.output];
+          ret[2] = [tabs.targets, tabs.pnp, tabs.map3d];
+        } else if (this.$vuetify.breakpoint.xl) {
+          // Three tab groups, one with "input", one with "threshold, contours", and the other with "output, target info, 3D"
+          ret[0] = [tabs.input];
+          ret[1] = [tabs.threshold];
+          ret[2] = [tabs.contours, tabs.apriltag, tabs.aruco,tabs.output];
+          ret[3] = [tabs.targets, tabs.pnp, tabs.map3d];
+        }
+
+        for(let i = 0; i < ret.length; i++) {
+          const group = ret[i];
+
+          // All the tabs we allow
+          const filteredGroup = group.filter(it =>
+              !(!allow3d && it.name === "3D") //Filter out 3D tab any time 3D isn't calibrated
+              && !((!allow3d || isAprilTag || isAruco) && it.name === "PnP") //Filter out the PnP config tab if 3D isn't available, or we're doing Apriltags
+              && !((isAprilTag || isAruco) && (it.name === "Threshold")) //Filter out threshold tab if we're doing apriltags
+              && !((isAprilTag || isAruco)&& (it.name === "Contours")) //Filter out contours if we're doing Apriltag
+              && !(!isAprilTag && it.name === "AprilTag") //Filter out apriltag unless we actually are doing Apriltags
+              && !(!isAruco && it.name === "Aruco")
+          );
+          ret[i] = filteredGroup;
+        }
+
+        // One last filter to remove empty lists
+        return ret.filter(it => it !== undefined && it.length > 0);
+      }
+    },
+    processingMode: {
+      get() {
+        return (this.$store.getters.currentPipelineSettings.solvePNPEnabled || this.processingModeOverride) ? 1 : 0;
+      },
+      set(value) {
+        if (this.$store.getters.isCalibrated) {
+          this.$store.getters.currentPipelineSettings.solvePNPEnabled = value === 1;
+          this.handlePipelineUpdate("solvePNPEnabled", value === 1);
+        }
+      }
+    },
+    driverMode: {
+      get() {
+        return this.$store.getters.isDriverMode;
+      },
+      set(value) {
+        this.$store.getters.currentCameraSettings.currentPipelineIndex = value ? -1 : 0;
+        this.handleInputWithIndex('currentPipeline', value ? -1 : 0);
+      }
+    },
+    selectedOutputs: {
+      // All this logic exists to deal with the reality that the output select buttons sometimes need an array and sometimes need a number (depending on whether or not they're exclusive)
+      get() {
+        // We switch the selector to single-select only on sm-and-down size devices, so we have to return a Number instead of an Array in that state
+        let ret = [];
+        if (this.$store.state.colorPicking) {
+          ret = [0]; // We want the input stream only while color picking
+        } else if (this.$store.getters.isDriverMode) {
+          ret = [1]; // We want only the output stream in driver mode
+        } else {
+          if (this.$store.getters.currentPipelineSettings.inputShouldShow) ret = ret.concat([0]);
+          if (this.$store.getters.currentPipelineSettings.outputShouldShow) ret = ret.concat([1]);
+          if (!ret.length) ret = [0];
+        }
+
+        if (this.$vuetify.breakpoint.mdAndUp) {
+          return ret;
+        } else {
+          return ret[0] || 0;
+        }
+      },
+      set(value) {
+        let valToCommit = [0];
+        if (value instanceof Array) {
+          // Value is already an array, we don't need to do anything
+          valToCommit = value;
+        } else if (value) {
+          // Value is assumed to be a number, so we wrap it into an array
+          valToCommit = [value];
+        }
+
+        this.$store.commit("mutatePipeline", {"inputShouldShow": valToCommit.includes(0)});
+        this.$store.commit("mutatePipeline", {"outputShouldShow": valToCommit.includes(1)});
+        this.handlePipelineUpdate("inputShouldShow", valToCommit.includes(0));
+      }
+    },
+    fpsTooLow: {
+      get() {
+        // For now we only show the FPS is too low warning when GPU acceleration is enabled, because we don't really trust the presented video modes otherwise
+        const currFPS = this.$store.state.pipelineResults.fps;
+        const targetFPS = this.$store.getters.currentVideoFormat.fps;
+        const driverMode = this.$store.getters.isDriverMode;
+        const gpuAccel = this.$store.state.settings.general.gpuAcceleration === true;
+        const isReflective = this.$store.getters.pipelineType === 2;
+
+        return (currFPS - targetFPS) < -5 && this.$store.state.pipelineResults.fps !== 0 && !driverMode && gpuAccel && isReflective;
+      }
+    },
+    latency: {
+      get() {
+        return this.$store.getters.currentPipelineResults.latency;
+      }
+    },
+    isCalibrated: {
+      get() {
+        const resolution = this.$store.getters.videoFormatList[this.$store.getters.currentPipelineSettings.cameraVideoModeIndex];
+        return this.$store.getters.currentCameraSettings.calibrations
+            .some(e => e.width === resolution.width && e.height === resolution.height)
+      }
+    },
+    isRobotConnected: {
+      get() {
+        // return this.$store.state.ntConnectionInfo.connected && this.$store.state.backendConnected;
+        return true;
+      }
+    },
+    showNTWarning: {
+      get() {
+        return (!this.$store.state.ntConnectionInfo.connected || this.$store.state.settings.networkSettings.runNTServer) && this.$store.state.settings.networkSettings.teamNumber > 0 && this.$store.state.backendConnected && !this.hideNTWarning;
+      }
+    },
+  },
+  created() {
+    this.$store.state.connectedCallbacks.push(this.reloadStreams)
+  },
+  methods: {
+    reloadStreams() {
+      // Reload the streams as we technically close and reopen them
+      this.$refs.streams.forEach(it => it.reload())
+    },
+    onImageClick(event) {
+      // Get a reference to the threshold tab (if it is shown) and call its "onClick" method
+      let ref = this.$refs["Threshold"];
+      if (ref && ref[0])
+        ref[0].onClick(event)
+    },
+    on3DClick() {
+      if (!this.$store.getters.isCalibrated) {
+        this.dialog = true;
+        this.processingModeOverride = true;
+      }
+    },
+    closeUncalibratedDialog() {
+      this.dialog = false;
+      this.processingModeOverride = false;
+      // this.$store.getters.currentPipelineSettings.solvePNPEnabled = false;
+      this.handlePipelineUpdate("solvePNPEnabled", false);
+    }
+  }
 }
 </script>
 
 <style scoped>
 .v-btn-toggle.fill {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .v-btn-toggle.fill > .v-btn {
-    width: 50%;
-    height: 100%;
+  width: 50%;
+  height: 100%;
 }
 
 th {
-    width: 80px;
-    text-align: center;
+  width: 80px;
+  text-align: center;
 }
-</style>
+</style>

photon-client/src/views/PipelineViews/AprilTagTab.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <CVselect
+        v-model="selectedFamily"
+        name="Target family"
+        :list="['AprilTag family 36h11', 'AprilTag family 25h9', 'AprilTag family 16h5']"
+        select-cols="8"
+        @input="handlePipelineUpdate('tagFamily', selectedFamily)"
+    />
+    <CVslider
+        v-model="decimate"
+        class="pt-2"
+        slider-cols="8"
+        name="Decimate"
+        min="1"
+        max="8"
+        step="1.0"
+        tooltip="Increases FPS at the expense of range by reducing image resolution initially"
+        @input="handlePipelineData('decimate')"
+    />
+    <CVslider
+        v-model="blur"
+        class="pt-2"
+        slider-cols="8"
+        name="Blur"
+        min="0"
+        max="5"
+        step=".01"
+        tooltip="Gaussian blur added to the image, high FPS cost for slightly decreased noise"
+        @input="handlePipelineData('blur')"
+    />
+    <CVslider
+        v-model="threads"
+        class="pt-2"
+        slider-cols="8"
+        name="Threads"
+        min="1"
+        max="8"
+        step="1"
+        tooltip="Number of threads spawned by the AprilTag detector"
+        @input="handlePipelineData('threads')"
+    />
+    <CVswitch
+        v-model="refineEdges"
+        class="pt-2"
+        slider-cols="8"
+        name="Refine Edges"
+        tooltip="Further refines the apriltag corner position initial estimate, suggested left on"
+        @input="handlePipelineData('refineEdges')"
+    />
+    <CVslider
+        v-model="decisionMargin"
+        class="pt-2 pb-4"
+        slider-cols="8"
+        name="Decision Margin Cutoff"
+        min="0"
+        max="250"
+        step="1"
+        tooltip="Tags with a 'margin' (decoding quality score) less than this wil be rejected. Increase this to reduce the number of false positive detections"
+        @input="handlePipelineData('decisionMargin')"
+    />
+    <CVslider
+        v-model="numIterations"
+        class="pt-2 pb-4"
+        slider-cols="8"
+        name="Pose Estimation Iterations"
+        min="0"
+        max="500"
+        step="1"
+        tooltip="Number of iterations the pose estimation algorithm will run, 50-100 is a good starting point"
+        @input="handlePipelineData('numIterations')"
+    />
+  </div>
+</template>
+
+<script>
+import CVslider from '../../components/common/cv-slider'
+import CVswitch from '../../components/common/cv-switch'
+import CVselect from '../../components/common/cv-select'
+
+export default {
+  name: "AprilTag",
+  components: {
+    CVslider,
+    CVswitch,
+    CVselect,
+  },
+  data() {
+    return {
+      familyList: ["AprilTag family 36h11", "AprilTag family 25h9", "AprilTag family 16h5"],
+    }
+  },
+  computed: {
+    selectedFamily: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.tagFamily
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"tagFamily": val})
+      }
+    },
+    decimate: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.decimate
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"decimate": val});
+      }
+    },
+    decisionMargin: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.decisionMargin
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"decisionMargin": val});
+      }
+    },
+    numIterations: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.numIterations
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"numIterations": val});
+      }
+    },
+    blur: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.blur
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"blur": val});
+      }
+    },
+    threads: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.threads
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"threads": val});
+      }
+    },
+    refineEdges: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.refineEdges
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"refineEdges": val});
+      }
+    },
+  },
+  methods: {
+  }
+}
+</script>

photon-client/src/views/PipelineViews/ArucoTab.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <CVslider
+        v-model="decimate"
+        class="pt-2"
+        slider-cols="8"
+        name="Decimate"
+        min="1"
+        max="8"
+        step=".5"
+        tooltip="Increases FPS at the expense of range by reducing image resolution initially"
+        @input="handlePipelineData('decimate')"
+    />
+    <CVslider
+        v-model="numIterations"
+        class="pt-2"
+        slider-cols="8"
+        name="Corner Iterations"
+        min="30"
+        max="1000"
+        step="5"
+        tooltip="How many iterations are going to be used in order to refine corners. Higher values are lead to more accuracy at the cost of performance"
+        @input="handlePipelineData('numIterations')"
+    />
+    <CVslider
+        v-model="cornerAccuracy"
+        class="pt-2"
+        slider-cols="8"
+        name="Corner Accuracy"
+        min=".01"
+        max="100"
+        step=".01"
+        tooltip="Minimum accuracy for the corners, lower is better but more performance intensive "
+        @input="handlePipelineData('cornerAccuracy')"
+    />
+  </div>
+</template>
+
+<script>
+import CVslider from '../../components/common/cv-slider'
+
+export default {
+  name: "Aruco",
+  components: {
+    CVslider
+  },
+  computed: {
+    decimate: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.decimate
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"decimate": val});
+      },
+    },
+      numIterations: {
+        get() {
+          return this.$store.getters.currentPipelineSettings.numIterations
+        },
+        set(val) {
+          this.$store.commit("mutatePipeline", {"numIterations": val});
+        },
+      },
+        cornerAccuracy: {
+          get() {
+            return this.$store.getters.currentPipelineSettings.cornerAccuracy
+          },
+          set(val) {
+            this.$store.commit("mutatePipeline", {"cornerAccuracy": val});
+          },
+        },
+    },
+    methods: {
+    }
+  }
+</script>

photon-client/src/views/PipelineViews/ContoursTab.vue

@@ -5,11 +5,11 @@
       name="Area"
       min="0"
       max="100"
-      step="0.1"
+      step="0.01"
       @input="handlePipelineData('contourArea')"
-      @rollback="e=> rollback('contourArea',e)"
     />
     <CVrangeSlider
+      v-if="currentPipelineType() !== 3"
       v-model="contourRatio"
       name="Ratio (W/H)"
       tooltip="Min and max ratio between the width and height of a contour's bounding rectangle"
@@ -17,16 +17,32 @@
       max="100"
       step="0.1"
       @input="handlePipelineData('contourRatio')"
-      @rollback="e=> rollback('contourRatio',e)"
+    />
+    <CVselect
+      v-model="contourTargetOrientation"
+      name="Target Orientation"
+      tooltip="Used to determine how to calculate target landmarks, as well as aspect ratio"
+      :list="['Portrait', 'Landscape']"
+      @input="handlePipelineData('contourTargetOrientation')"
+      @rollback="e=> rollback('contourTargetOrientation', e)"
     />
     <CVrangeSlider
+      v-if="currentPipelineType() !== 3"
       v-model="contourFullness"
       name="Fullness"
       tooltip="Min and max ratio between a contour's area and its bounding rectangle"
       min="0"
       max="100"
       @input="handlePipelineData('contourFullness')"
-      @rollback="e=> rollback('contourFullness',e)"
+    />
+    <CVrangeSlider
+      v-if="currentPipelineType() === 3"
+      v-model="contourPerimeter"
+      name="Perimeter"
+      tooltip="Min and max perimeter of the shape, in pixels"
+      min="0"
+      max="4000"
+      @input="handlePipelineData('contourPerimeter')"
     />
     <CVslider
       v-model="contourSpecklePercentage"
@@ -36,27 +52,110 @@
       max="100"
       :slider-cols="largeBox"
       @input="handlePipelineData('contourSpecklePercentage')"
-      @rollback="e=> rollback('contourSpecklePercentage',e)"
-    />
-    <CVselect
-      v-model="contourGroupingMode"
-      name="Target Grouping"
-      tooltip="Whether or not every two targets are paired with each other (good for e.g. 2019 targets)"
-      :select-cols="largeBox"
-      :list="['Single','Dual']"
-      @input="handlePipelineData('contourGroupingMode')"
-      @rollback="e=> rollback('contourGroupingMode',e)"
-    />
-    <CVselect
-      v-model="contourIntersection"
-      name="Target Intersection"
-      tooltip="If target grouping is in dual mode it will use this dropdown to decide how targets are grouped with adjacent targets"
-      :select-cols="largeBox"
-      :list="['None','Up','Down','Left','Right']"
-      :disabled="contourGroupingMode === 0"
-      @input="handlePipelineData('contourIntersection')"
-      @rollback="e=> rollback('contourIntersection',e)"
     />
+    <template v-if="currentPipelineType() !== 3">
+      <CVslider
+        v-model="contourFilterRangeX"
+        name="X filter tightness"
+        tooltip="Rejects contours whose center X is further than X standard deviations above/below the mean X location"
+        min="0.1"
+        max="4"
+        step="0.1"
+        :slider-cols="largeBox"
+        @input="handlePipelineData('contourFilterRangeX')"
+      />
+      <CVslider
+        v-model="contourFilterRangeY"
+        name="Y filter tightness"
+        tooltip="Rejects contours whose center Y is further than X standard deviations above/below the mean Y location"
+        min="0.1"
+        max="4"
+        step="0.1"
+        :slider-cols="largeBox"
+        @input="handlePipelineData('contourFilterRangeY')"
+      />
+      <CVselect
+        v-model="contourGroupingMode"
+        name="Target Grouping"
+        tooltip="Whether or not every two targets are paired with each other (good for e.g. 2019 targets)"
+        :select-cols="largeBox"
+        :list="['Single','Dual','2orMore']"
+        @input="handlePipelineData('contourGroupingMode')"
+      />
+      <CVselect
+        v-model="contourIntersection"
+        name="Target Intersection"
+        tooltip="If target grouping is in dual mode it will use this dropdown to decide how targets are grouped with adjacent targets"
+        :select-cols="largeBox"
+        :list="['None','Up','Down','Left','Right']"
+        :disabled="contourGroupingMode === 0"
+        @input="handlePipelineData('contourIntersection')"
+      />
+    </template>
+    <!-- If we arent not a shape, we are a shape-->
+    <template v-else>
+      <v-divider class="mt-3" />
+      <CVselect
+        v-model="contourShape"
+        name="Target Shape"
+        tooltip="The shape of targets to look for"
+        :select-cols="largeBox"
+        :list="['Circle', 'Polygon', 'Triangle', 'Quadrilateral']"
+        @input="handlePipelineData('contourShape')"
+      />
+
+      <!-- Accuracy % is only for polygons-->
+      <CVslider
+        v-model="accuracyPercentage"
+        :disabled="currentPipelineSettings().contourShape < 1"
+        name="Shape Simplification"
+        tooltip="How much we should simply the input contour before checking how many sides it has"
+        min="0"
+        max="100"
+        :slider-cols="largeBox"
+        @input="handlePipelineData('accuracyPercentage')"
+      />
+      <!-- Similarly, the threshold is only for circles -->
+      <CVslider
+        v-model="circleDetectThreshold"
+        :disabled="currentPipelineSettings().contourShape !== 0"
+        name="Circle match distance"
+        tooltip="How close the centroid of a contour must be to the center of a circle in order for them to be matched"
+        min="1"
+        max="100"
+        :slider-cols="largeBox"
+        @input="handlePipelineData('circleDetectThreshold')"
+      />
+      <CVrangeSlider
+        v-model="contourRadius"
+        :disabled="currentPipelineSettings().contourShape !== 0"
+        name="Radius"
+        min="0"
+        max="100"
+        step="1"
+        label-cols="3"
+        @input="handlePipelineData('contourRadius')"
+      />
+      <CVslider
+        v-model="maxCannyThresh"
+        :disabled="currentPipelineSettings().contourShape !== 0"
+        name="Max Canny Threshold"
+        min="1"
+        max="100"
+        :slider-cols="largeBox"
+        @input="handlePipelineData('maxCannyThresh')"
+      />
+      <CVslider
+        v-model="circleAccuracy"
+        :disabled="currentPipelineSettings().contourShape !== 0"
+        name="Circle Accuracy"
+        min="1"
+        max="100"
+        :slider-cols="largeBox"
+        @input="handlePipelineData('circleAccuracy')"
+      />
+      <v-divider class="mt-3" />
+    </template>
     <CVselect
       v-model="contourSortMode"
       name="Target Sort"
@@ -70,93 +169,176 @@
 </template>
 
 <script>
-    import CVrangeSlider from '../../components/common/cv-range-slider'
-    import CVselect from '../../components/common/cv-select'
-    import CVslider from '../../components/common/cv-slider'
+import CVrangeSlider from '../../components/common/cv-range-slider'
+import CVselect from '../../components/common/cv-select'
+import CVslider from '../../components/common/cv-slider'
 
-    export default {
-        name: 'Contours',
-        components: {
-            CVrangeSlider,
-            CVselect,
-            CVslider
-        },
-        // eslint-disable-next-line vue/require-prop-types
-        props: ['value'],
+export default {
+  name: 'Contours',
+  components: {
+    CVrangeSlider,
+    CVselect,
+    CVslider
+  },
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['value'],
 
-        data() {
-            return {}
-        },
-        computed: {
-          largeBox: {
-            get() {
-              // Sliders and selectors should be fuller width if we're on screen size medium and
-              // up and either not in compact mode (because the tab will be 100% screen width),
-              // or in driver mode (where the card will also be 100% screen width).
-              return this.$vuetify.breakpoint.mdAndUp && (!this.$store.state.compactMode || this.$store.getters.isDriverMode) ? 10 : 8;
-            }
-          },
-            contourArea: {
-                get() {
-                    return this.$store.getters.currentPipelineSettings.contourArea
-                },
-                set(val) {
-                    this.$store.commit("mutatePipeline", {"contourArea": val});
-                }
-            },
-            contourRatio: {
-                get() {
-                    return this.$store.getters.currentPipelineSettings.contourRatio
-                },
-                set(val) {
-                    this.$store.commit("mutatePipeline", {"contourRatio": val});
-                }
-            },
-            contourFullness: {
-                get() {
-                    return this.$store.getters.currentPipelineSettings.contourFullness
-                },
-                set(val) {
-                    this.$store.commit("mutatePipeline", {"contourFullness": val});
-                }
-            },
-            contourSpecklePercentage: {
-                get() {
-                    return this.$store.getters.currentPipelineSettings.contourSpecklePercentage
-                },
-                set(val) {
-                    this.$store.commit("mutatePipeline", {"contourSpecklePercentage": val});
-                }
-            },
-            contourGroupingMode: {
-                get() {
-                    return this.$store.getters.currentPipelineSettings.contourGroupingMode
-                },
-                set(val) {
-                    this.$store.commit("mutatePipeline", {"contourGroupingMode": val});
-                }
-            },
-            contourSortMode: {
-              get() {
-                return this.$store.getters.currentPipelineSettings.contourSortMode
-              },
-              set(val) {
-                this.$store.commit("mutatePipeline", {"contourSortMode": val});
-              }
-            },
-            contourIntersection: {
-                get() {
-                    return this.$store.getters.currentPipelineSettings.contourIntersection
-                },
-                set(val) {
-                    this.$store.commit("mutatePipeline", {"contourIntersection": val});
-                }
-            }
-        },
-        methods: {},
-    }
+  data() {
+    return {}
+  },
+  computed: {
+    largeBox: {
+      get() {
+        // Sliders and selectors should be fuller width if we're on screen size medium and
+        // up and either not in compact mode (because the tab will be 100% screen width),
+        // or in driver mode (where the card will also be 100% screen width).
+        return this.$vuetify.breakpoint.mdAndUp && (!this.$store.state.compactMode || this.$store.getters.isDriverMode) ? 10 : 8;
+      }
+    },
+    contourArea: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.contourArea
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"contourArea": val});
+      }
+    },
+    contourRatio: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.contourRatio
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"contourRatio": val});
+      }
+    },
+    contourTargetOrientation: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.contourTargetOrientation
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"contourTargetOrientation": val});
+      }
+    },
+    contourFullness: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.contourFullness
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"contourFullness": val});
+      }
+    },
+    contourPerimeter: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.contourPerimeter
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"contourPerimeter": val});
+      }
+    },
+    contourSpecklePercentage: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.contourSpecklePercentage
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"contourSpecklePercentage": val});
+      }
+    },
+    contourFilterRangeX: {
+      get() {
+        console.log(this.$store.getters.currentPipelineSettings.contourFilterRangeX)
+        return this.$store.getters.currentPipelineSettings.contourFilterRangeX
+      },
+      set(val) {
+        console.log("set")
+        console.log(val)
+        this.$store.commit("mutatePipeline", {"contourFilterRangeX": val});
+      }
+    },
+    contourFilterRangeY: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.contourFilterRangeY
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"contourFilterRangeY": val});
+      }
+    },
+    contourGroupingMode: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.contourGroupingMode
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"contourGroupingMode": val});
+      }
+    },
+    contourSortMode: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.contourSortMode
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"contourSortMode": val});
+      }
+    },
+    contourShape: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.contourShape
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"contourShape": val});
+      }
+    },
+    contourIntersection: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.contourIntersection
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"contourIntersection": val});
+      }
+    },
+    accuracyPercentage: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.accuracyPercentage
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"accuracyPercentage": val});
+      }
+    },
+    contourRadius: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.contourRadius
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"contourRadius": val});
+      }
+    },
+    circleDetectThreshold: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.circleDetectThreshold
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"circleDetectThreshold": val});
+      }
+    },
+    maxCannyThresh: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.maxCannyThresh
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"maxCannyThresh": val});
+      }
+    },
+    circleAccuracy: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.circleAccuracy
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"circleAccuracy": val});
+      }
+    },
+  },
+  methods: {},
+}
 </script>
 
 <style lang="" scoped>
 
-</style>
+</style>

photon-client/src/views/PipelineViews/InputTab.vue

@@ -2,11 +2,12 @@
   <div>
     <CVslider
       v-model="cameraExposure"
+      :disabled="cameraAutoExposure"
       name="Exposure"
       min="0"
       max="100"
       step="0.1"
-      tooltip="Directly controls how much light is allowed to fall onto the sensor, which affects brightness"
+      tooltip="Directly controls how much light is allowed to fall onto the sensor, which affects apparent brightness"
       :slider-cols="largeBox"
       @input="handlePipelineData('cameraExposure')"
       @rollback="e => rollback('cameraExposure', e)"
@@ -21,22 +22,53 @@
       @input="handlePipelineData('cameraBrightness')"
       @rollback="e => rollback('cameraBrightness', e)"
     />
+    <CVswitch
+      v-model="cameraAutoExposure"
+      class="pt-2"
+      name="Auto Exposure"
+      tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
+      @input="handlePipelineData('cameraAutoExposure')"
+    />
     <CVslider
-      v-if="cameraGain !== -1"
+      v-if="cameraGain >= 0"
       v-model="cameraGain"
-      name="Gain"
+      name="Camera Gain"
       min="0"
       max="100"
-      tooltip="Controls automatic white balance gain, which affects how the camera captures colors in different conditions"
+      tooltip="Controls camera gain, similar to brightness"
       :slider-cols="largeBox"
       @input="handlePipelineData('cameraGain')"
       @rollback="e => rollback('cameraGain', e)"
     />
+    <CVslider
+      v-if="cameraRedGain !== -1"
+      v-model="cameraRedGain"
+      name="Red Balance"
+      min="0"
+      max="100"
+      tooltip="Controls red automatic white balance gain, which affects how the camera captures colors in different conditions"
+      :slider-cols="largeBox"
+      @input="handlePipelineData('cameraRedGain')"
+      @rollback="e => rollback('cameraRedGain', e)"
+    />
+    <CVslider
+      v-if="cameraBlueGain !== -1"
+      v-model="cameraBlueGain"
+      name="Blue Balance"
+      min="0"
+      max="100"
+      tooltip="Controls blue automatic white balance gain, which affects how the camera captures colors in different conditions"
+      :slider-cols="largeBox"
+      @input="handlePipelineData('cameraBlueGain')"
+      @rollback="e => rollback('cameraBlueGain', e)"
+    />
+    <!-- TODO: stop filtering out the 90 degree rotation modes when we fix those in libcamera -->
     <CVselect
       v-model="inputImageRotationMode"
       name="Orientation"
       tooltip="Rotates the camera stream"
       :list="['Normal','90° CW','180°','90° CCW']"
+      :filtered-indices="this.$store.state.settings.general.gpuAcceleration ? new Set([1, 3]) : undefined"
       :select-cols="largeBox"
       @input="handlePipelineData('inputImageRotationMode')"
       @rollback="e => rollback('inputImageRotationMode',e)"
@@ -64,6 +96,7 @@
 <script>
     import CVslider from '../../components/common/cv-slider'
     import CVselect from '../../components/common/cv-select'
+    import CVswitch from '../../components/common/cv-switch'
 
     const unfilteredStreamDivisors = [1, 2, 4, 6];
 
@@ -72,14 +105,10 @@
         components: {
             CVslider,
             CVselect,
+            CVswitch,
         },
         // eslint-disable-next-line vue/require-prop-types
         props: ['value'],
-        data() {
-            return {
-              rawStreamDivisorIndex: 0,
-            }
-        },
         computed: {
             largeBox: {
               get() {
@@ -97,6 +126,14 @@
                     this.$store.commit("mutatePipeline", {"cameraExposure": parseFloat(val)});
                 }
             },
+            cameraAutoExposure: {
+                get() {
+                    return this.$store.getters.currentPipelineSettings.cameraAutoExposure;
+                },
+                set(val) {
+                    this.$store.commit("mutatePipeline", {"cameraAutoExposure": val});
+                }
+            },
             cameraBrightness: {
                 get() {
                     return parseInt(this.$store.getters.currentPipelineSettings.cameraBrightness)
@@ -113,6 +150,22 @@
                     this.$store.commit("mutatePipeline", {"cameraGain": parseInt(val)});
                 }
             },
+            cameraRedGain: {
+                get() {
+                    return parseInt(this.$store.getters.currentPipelineSettings.cameraRedGain)
+                },
+                set(val) {
+                    this.$store.commit("mutatePipeline", {"cameraRedGain": parseInt(val)});
+                }
+            },
+            cameraBlueGain: {
+                get() {
+                    return parseInt(this.$store.getters.currentPipelineSettings.cameraBlueGain)
+                },
+                set(val) {
+                    this.$store.commit("mutatePipeline", {"cameraBlueGain": parseInt(val)});
+                }
+            },
             inputImageRotationMode: {
                 get() {
                     return this.$store.getters.currentPipelineSettings.inputImageRotationMode
@@ -129,15 +182,22 @@
                     this.$store.commit("mutatePipeline", {"cameraVideoModeIndex": val});
 
                     this.handlePipelineUpdate("streamingFrameDivisor", this.getNumSkippedStreamDivisors());
-                    this.rawStreamDivisorIndex = 0;
+                    this.$store.commit("mutatePipeline", {"streamingFrameDivisor": 0});
+
+                    // If we don't have 3d mode calibrated at the new resolution either, we should disable it here
+                    // (TODO) This probably belongs in the backend (Matt)
+                    if (!this.$store.getters.isCalibrated) {
+                        this.handlePipelineUpdate("solvePNPEnabled", false);
+                        this.$store.commit("mutatePipeline", {"solvePNPEnabled": false});
+                    }
                 }
             },
             streamingFrameDivisor: {
                 get() {
-                    return this.rawStreamDivisorIndex;
+                    return this.$store.getters.currentPipelineSettings.streamingFrameDivisor;
                 },
                 set(val) {
-                    this.rawStreamDivisorIndex = val;
+                    this.$store.commit("mutatePipeline", {"streamingFrameDivisor": val});
                     this.handlePipelineUpdate("streamingFrameDivisor", this.getNumSkippedStreamDivisors() + val);
                 }
             },
@@ -170,7 +230,11 @@
             // It would probably be cleaner if this checked that we're on the Raspi 3 instead of checking for GPU accel status
             const width = this.$store.getters.videoFormatList[
                     this.$store.getters.currentCameraSettings.currentPipelineSettings.cameraVideoModeIndex]['width'];
-            return unfilteredStreamDivisors.filter((x) => !this.$store.state.settings.general.gpuAcceleration || width / x < 400);
+
+            // If GPU acceleration is enabled, the  downsized width must be below 400px
+            // This check should be skipped if we're currently in driver mode
+            return unfilteredStreamDivisors.filter((x) => this.$store.getters.isDriverMode
+                    || !this.$store.state.settings.general.gpuAcceleration || width / x < 400);
           },
           getNumSkippedStreamDivisors() {
             return unfilteredStreamDivisors.length - this.getRawStreamDivisors().length;

photon-client/src/views/PipelineViews/Map3DTab.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <mini-map
+      class="miniMapClass"
+      :targets="targets"
+      :horizontal-f-o-v="horizontalFOV"
+    />
+  </div>
+</template>
+
+<script>
+    import miniMap from '../../components/pipeline/3D/MiniMap';
+
+    export default {
+        name: "Map3D",
+        components: {
+            miniMap
+        },
+        data() {
+            return {
+            }
+        },
+        computed: {
+            targets: {
+                get() {
+                    return this.$store.getters.currentPipelineResults.targets;
+                }
+            },
+            horizontalFOV: {
+                get() {
+                    let index = this.$store.getters.currentPipelineSettings.cameraVideoModeIndex;
+                    let FOV = this.$store.getters.currentCameraSettings.fov;
+                    let resolution = this.$store.getters.videoFormatList[index];
+                    let diagonalView = FOV * (Math.PI / 180);
+                    let diagonalAspect = Math.hypot(resolution.width, resolution.height);
+                    return Math.atan(Math.tan(diagonalView / 2) * (resolution.width / diagonalAspect)) * 2 * (180 / Math.PI)
+                }
+            },
+        },
+        methods: {
+        }
+    }
+</script>
+
+<style scoped>
+    .miniMapClass {
+        width: 400px !important;
+        height: 100% !important;
+
+        margin-left: auto;
+        margin-right: auto;
+    }
+</style>

photon-client/src/views/PipelineViews/OutputTab.vue

@@ -1,8 +1,5 @@
 <template>
   <div>
-    <span class="white--text">Target Manipulation</span>
-    <v-divider class="mt-2" />
-
     <CVselect
       v-model="contourTargetOffsetPointEdge"
       name="Target Offset Point"
@@ -13,6 +10,7 @@
     />
 
     <CVselect
+      v-if="!isTagPipeline"
       v-model="contourTargetOrientation"
       name="Target Orientation"
       tooltip="Used to determine how to calculate target landmarks (e.g. the top, left, or bottom of the target)"
@@ -24,15 +22,15 @@
     <CVswitch
       v-model="outputShowMultipleTargets"
       name="Show Multiple Targets"
-      tooltip="If enabled, up to five targets will be displayed and sent to user code"
+      tooltip="If enabled, up to five targets will be displayed and sent to user code, instead of just one"
+      :disabled="isTagPipeline"
       class="mb-4"
       text-cols="3"
       @input="handlePipelineData('outputShowMultipleTargets')"
 
       @rollback="e=> rollback('outputShowMultipleTargets', e)"
     />
-    <span class="white--text">Robot Offset</span>
-    <v-divider class="mt-2" />
+    <v-divider />
     <CVselect
       v-model="offsetRobotOffsetMode"
       name="Robot Offset Mode"
@@ -141,6 +139,11 @@
                 get() {
                     return undefined; // TODO fix
                 }
+            },
+            isTagPipeline: {
+                get() {
+                     return this.$store.getters.currentPipelineSettings.pipelineType > 3;
+                }
             }
         },
         methods: {
@@ -156,4 +159,4 @@
 </script>
 
 <style scoped>
-</style>
+</style>

photon-client/src/views/PipelineViews/PnPTab.vue

@@ -6,7 +6,6 @@
       type="file"
       accept=".csv"
       style="display: none;"
-
       @change="readFile"
     >
 
@@ -32,11 +31,7 @@
       @input="handlePipelineData('cornerDetectionAccuracyPercentage')"
       @rollback="e => rollback('cornerDetectionAccuracyPercentage', e)"
     />
-    <mini-map
-      class="miniMapClass"
-      :targets="targets"
-      :horizontal-f-o-v="horizontalFOV"
-    />
+
     <v-snackbar
       v-model="snack"
       top
@@ -49,18 +44,16 @@
 
 <script>
     import Papa from 'papaparse';
-    import miniMap from '../../components/pipeline/3D/MiniMap';
     import CVslider from '../../components/common/cv-slider'
 
     export default {
         name: "PnP",
         components: {
-            CVslider,
-            miniMap
+            CVslider
         },
         data() {
             return {
-                targetList: ['2020 High Goal Outer', '2020 High Goal Inner', '2019 Dual Target', 'Power Cell (7in)', '2016 High Goal'], //Keep in sync with TargetModel.java 
+                targetList: ['2020 High Goal Outer', '2020 High Goal Inner', '2019 Dual Target', '2020 Power Cell (7in)','2022 Cargo Ball (9.5in)', '2016 High Goal', '6.5in (36h11) AprilTag', '6in (16h5) AprilTag'], //Keep in sync with TargetModel.java
                 snackbar: {
                     color: "Success",
                     text: ""
@@ -72,7 +65,6 @@
             selectedModel: {
                 get() {
                     let ret = this.$store.getters.currentPipelineSettings.targetModel
-                    console.log(ret)
                     return this.targetList[ret];
                 },
                 set(val) {
@@ -87,21 +79,6 @@
                     this.$store.commit("mutatePipeline", {"cornerDetectionAccuracyPercentage": val});
                 }
             },
-            targets: {
-                get() {
-                    return this.$store.getters.currentPipelineResults.targets;
-                }
-            },
-            horizontalFOV: {
-                get() {
-                    let index = this.$store.getters.currentPipelineSettings.cameraVideoModeIndex;
-                    let FOV = this.$store.getters.currentCameraSettings.fov;
-                    let resolution = this.$store.getters.videoFormatList[index];
-                    let diagonalView = FOV * (Math.PI / 180);
-                    let diagonalAspect = Math.hypot(resolution.width, resolution.height);
-                    return Math.atan(Math.tan(diagonalView / 2) * (resolution.width / diagonalAspect)) * 2 * (180 / Math.PI)
-                }
-            },
         },
         methods: {
             readFile(event) {
@@ -155,4 +132,4 @@
         margin-left: auto;
         margin-right: auto;
     }
-</style>
+</style>

photon-client/src/views/PipelineViews/TargetsTab.vue

@@ -18,29 +18,40 @@
               <th class="text-center">
                 Target
               </th>
+              <th
+                  v-if="$store.getters.pipelineType === 4 || (($store.getters.pipelineType - 2) === 3)"
+                class="text-center"
+              >
+                Fiducial ID
+              </th>
               <template v-if="!$store.getters.currentPipelineSettings.solvePNPEnabled">
                 <th class="text-center">
-                  Pitch
+                  Pitch,&nbsp;&deg;
                 </th>
                 <th class="text-center">
-                  Yaw
+                  Yaw,&nbsp;&deg;
                 </th>
                 <th class="text-center">
-                  Skew
+                  Skew,&nbsp;&deg;
+                </th>
+                <th class="text-center">
+                  Area, %
                 </th>
               </template>
-              <th class="text-center">
-                Area
-              </th>
-              <template v-if="$store.getters.currentPipelineSettings.solvePNPEnabled">
+              <template v-else>
                 <th class="text-center">
-                  X
+                  X,&nbsp;m
                 </th>
                 <th class="text-center">
-                  Y
+                  Y,&nbsp;m
                 </th>
                 <th class="text-center">
-                  Angle
+                  Z Angle,&nbsp;&deg;
+                </th>
+              </template>
+              <template v-if="$store.getters.pipelineType === 4 && $store.getters.currentPipelineSettings.solvePNPEnabled">
+                <th class="text-center">
+                  Ambiguity
                 </th>
               </template>
             </tr>
@@ -51,17 +62,29 @@
               :key="index"
             >
               <td>{{ index }}</td>
+              <td v-if="$store.getters.pipelineType === 4 || (($store.getters.pipelineType - 2) === 3)">
+                {{ parseInt(value.fiducialId) }}
+              </td>
               <template v-if="!$store.getters.currentPipelineSettings.solvePNPEnabled">
                 <td>{{ parseFloat(value.pitch).toFixed(2) }}</td>
                 <td>{{ parseFloat(value.yaw).toFixed(2) }}</td>
                 <td>{{ parseFloat(value.skew).toFixed(2) }}</td>
+                <td>{{ parseFloat(value.area).toFixed(2) }}</td>
               </template>
-              <td>{{ parseFloat(value.area).toFixed(2) }}</td>
-              <template v-if="$store.getters.currentPipelineSettings.solvePNPEnabled">
-                <!-- TODO: Make sure that units are correct -->
+              <template v-else-if="$store.getters.currentPipelineSettings.solvePNPEnabled && $store.getters.pipelineType === 4">
                 <td>{{ parseFloat(value.pose.x).toFixed(2) }}&nbsp;m</td>
                 <td>{{ parseFloat(value.pose.y).toFixed(2) }}&nbsp;m</td>
-                <td>{{ parseFloat(value.pose.rot).toFixed(2) }}&deg;</td>
+                <td>{{ (parseFloat(value.pose.angle_z) * 180 / Math.PI).toFixed(2) }}&deg;</td>
+              </template>
+              <template v-else-if="$store.getters.currentPipelineSettings.solvePNPEnabled">
+                <td>{{ parseFloat(value.pose.x).toFixed(2) }}&nbsp;m</td>
+                <td>{{ parseFloat(value.pose.y).toFixed(2) }}&nbsp;m</td>
+                <td>{{ (parseFloat(value.pose.angle_z) * 180 / Math.PI).toFixed(2) }}&deg;</td>
+              </template>
+              <template v-if="$store.getters.pipelineType === 4 && $store.getters.currentPipelineSettings.solvePNPEnabled">
+                <td>
+                  {{ parseFloat(value.ambiguity).toFixed(2) }}
+                </td>
               </template>
             </tr>
           </tbody>
@@ -97,4 +120,4 @@
     .v-data-table td {
       font-family: monospace !important;
     }
-</style>
+</style>

photon-client/src/views/PipelineViews/ThresholdTab.vue

@@ -1,16 +1,21 @@
 <template>
-  <div>
+  <div :style="{'--averageHue': averageHue}">
     <CVrangeSlider
+      id="hue-slider"
       v-model="hsvHue"
+      :class="hueInverted ? 'inverted-slider' : 'normal-slider'"
       name="Hue"
       tooltip="Describes color"
       :min="0"
       :max="180"
+      :inverted="hueInverted"
       @input="handlePipelineData('hsvHue')"
       @rollback="e => rollback('hue',e)"
     />
     <CVrangeSlider
+      id="sat-slider"
       v-model="hsvSaturation"
+      class="normal-slider"
       name="Saturation"
       tooltip="Describes colorfulness; the smaller this value the 'whiter' the color becomes"
       :min="0"
@@ -19,7 +24,9 @@
       @rollback="e => rollback('saturation',e)"
     />
     <CVrangeSlider
+      id="value-slider"
       v-model="hsvValue"
+      class="normal-slider"
       name="Value"
       tooltip="Describes lightness; the smaller this value the 'blacker' the color becomes"
       :min="0"
@@ -27,6 +34,30 @@
       @input="handlePipelineData('hsvValue')"
       @rollback="e => rollback('value',e)"
     />
+    <CVSwitch
+      v-model="hueInverted"
+      name="Invert hue"
+      tooltip="Selects the hue range outside of the hue slider bounds instead of inside"
+      @input="handlePipelineData('hueInverted')"
+      @rollback="e => rollback('hueInverted',e)"
+    />
+    <template v-if="currentPipelineType() === 3">
+      <CVSwitch
+        v-model="erode"
+        name="Erode"
+        tooltip="Removes pixels around the edges of white areas in the thresholded image"
+        @input="handlePipelineData('erode')"
+        @rollback="e => rollback('erode',e)"
+      />
+      <CVSwitch
+        v-model="dilate"
+        class="mb-0"
+        name="Dilate"
+        tooltip="Adds pixels around the edges of white areas in the thresholded image"
+        @input="handlePipelineData('dilate')"
+        @rollback="e => rollback('dilate',e)"
+      />
+    </template>
     <div class="pt-3 white--text">
       Color Picker
     </div>
@@ -42,7 +73,7 @@
           color="accent"
           class="ma-2 black--text"
           small
-          @click="setFunction(3)"
+          @click="setFunction(hueInverted ? 2 : 3)"
         >
           <v-icon left>
             mdi-minus
@@ -58,13 +89,13 @@
           <v-icon left>
             mdi-plus-minus
           </v-icon>
-          Set To Average
+          {{ hueInverted ? "Exclude" : "Set to" }} Average
         </v-btn>
         <v-btn
           color="accent"
           class="ma-2 black--text"
           small
-          @click="setFunction(2)"
+          @click="setFunction(hueInverted ? 3: 2)"
         >
           <v-icon left>
             mdi-plus
@@ -84,116 +115,195 @@
         </v-btn>
       </template>
     </v-row>
+    <v-divider class="mb-3" />
   </div>
 </template>
 
 <script>
-    import CVrangeSlider from '../../components/common/cv-range-slider'
-    
-    export default {
-        name: 'Threshold',
-        components: {
-            CVrangeSlider
-        },
-        // eslint-disable-next-line vue/require-prop-types
-        props: ['value'],
-        data() {
-            return {
-                currentFunction: undefined,
-                colorPicker: undefined,
-                showThresholdState: 0
-            }
-        },
-        computed: {
-            hsvHue: {
-                get() {
-                    return this.$store.getters.currentPipelineSettings.hsvHue
-                },
-                set(val) {
-                    this.$store.commit("mutatePipeline", {"hsvHue": val})
-                }
-            },
-            hsvSaturation: {
-                get() {
-                    return this.$store.getters.currentPipelineSettings.hsvSaturation
-                },
-                set(val) {
-                    this.$store.commit("mutatePipeline", {"hsvSaturation": val})
-                }
-            },
-            hsvValue: {
-                get() {
-                    return this.$store.getters.currentPipelineSettings.hsvValue
-                },
-                set(val) {
-                    this.$store.commit("mutatePipeline", {"hsvValue": val})
-                }
-            }
-        },
-        mounted: function () {
-            const self = this;
-            this.colorPicker = require('../../plugins/ColorPicker').default;
-            this.$nextTick(() => {
-                self.colorPicker.initColorPicker();
-            });
-        },
-        methods: {
-            onClick(event) {
-                if (this.currentFunction !== undefined) {
-                    this.colorPicker.initColorPicker();
+import CVrangeSlider from '../../components/common/cv-range-slider'
+import CVSwitch from "@/components/common/cv-switch";
 
-                    let s = this.$store.getters.currentPipelineSettings;
-                    let hsvArray = this.colorPicker.colorPickerClick(event, this.currentFunction,
-                        [
-                                [s.hsvHue[0], s.hsvSaturation[0], s.hsvValue[0]],
-                                [s.hsvHue[1], s.hsvSaturation[1], s.hsvValue[1]]
-                        ].map(hsv => hsv.map(it => it || 0)));
-                    // That `map` calls are to make sure that we don't let any undefined/null values slip in
-                    this.currentFunction = undefined;
-                    this.$store.state.colorPicking = false;
-                    this.handlePipelineUpdate("outputShouldDraw", true);
-
-                    s.hsvHue = [hsvArray[0][0], hsvArray[1][0]];
-                    s.hsvSaturation = [hsvArray[0][1], hsvArray[1][1]];
-                    s.hsvValue = [hsvArray[0][2], hsvArray[1][2]];
-
-                    let msg = this.$msgPack.encode({
-                        "changePipelineSetting": {
-                            'hsvHue': s.hsvHue,
-                            'hsvSaturation': s.hsvSaturation,
-                            'hsvValue': s.hsvValue,
-                            'cameraIndex': this.$store.state.currentCameraIndex
-                        }
-                    });
-                    this.$socket.send(msg);
-                    this.$emit('update');
-                }
-            },
-            setFunction(index) {
-                switch (index) {
-                    case 0:
-                        this.currentFunction = undefined;
-                        this.$store.state.colorPicking = false;
-
-                        this.handlePipelineUpdate("outputShouldDraw", true);
-                        return;
-                    case 1:
-                        this.currentFunction = this.colorPicker.eyeDrop;
-                        break;
-                    case 2:
-                        this.currentFunction = this.colorPicker.expand;
-                        break;
-                    case 3:
-                        this.currentFunction = this.colorPicker.shrink;
-                        break;
-                }
-                this.$store.state.colorPicking = true;
-
-                this.handlePipelineUpdate("outputShouldDraw", false);
-                this.$store.commit("mutatePipeline", {"inputShouldShow": true});
-                this.handlePipelineUpdate("inputShouldShow", true);
-            }
-        }
+export default {
+  name: 'Threshold',
+  components: {
+    CVSwitch,
+    CVrangeSlider
+  },
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['value'],
+  data() {
+    return {
+      currentFunction: undefined,
+      colorPicker: undefined,
+      showThresholdState: 0
     }
+  },
+  computed: {
+    hsvHue: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.hsvHue
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"hsvHue": val})
+      }
+    },
+    averageHue: {
+      get() {
+        var isInverted = this.$store.getters.currentPipelineSettings.hueInverted;
+        const arr = this.$store.getters.currentPipelineSettings.hsvHue;
+        var retVal = 0;
 
-</script>
+        if (Array.isArray(arr)) {
+          retVal = (arr[0] + arr[1]);
+        } else {
+          retVal = (arr.first + arr.second);
+        }
+
+        if(isInverted){
+          retVal += 180;
+        }
+
+        if(retVal > 360){
+          retVal -= 360;
+        }
+
+        return retVal;
+
+      },
+    },
+    hueInverted: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.hueInverted;
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"hueInverted": val});
+      }
+    },
+    hsvSaturation: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.hsvSaturation;
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"hsvSaturation": val})
+      }
+    },
+    hsvValue: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.hsvValue;
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"hsvValue": val});
+      }
+    },
+    erode: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.erode;
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"erode": val});
+      }
+    },
+    dilate: {
+      get() {
+        return this.$store.getters.currentPipelineSettings.dilate;
+      },
+      set(val) {
+        this.$store.commit("mutatePipeline", {"dilate": val});
+      }
+    },
+  },
+  mounted: function () {
+    const self = this;
+    this.colorPicker = require('../../plugins/ColorPicker').default;
+    this.$nextTick(() => {
+      self.colorPicker.initColorPicker();
+    });
+  },
+  methods: {
+    onClick(event) {
+      if (this.currentFunction !== undefined) {
+        this.colorPicker.initColorPicker();
+
+        let s = this.$store.getters.currentPipelineSettings;
+        let hsvArray = this.colorPicker.colorPickerClick(event, this.currentFunction,
+            [
+              [s.hsvHue[0], s.hsvSaturation[0], s.hsvValue[0]],
+              [s.hsvHue[1], s.hsvSaturation[1], s.hsvValue[1]]
+            ].map(hsv => hsv.map(it => it || 0)));
+        // That `map` calls are to make sure that we don't let any undefined/null values slip in
+        this.currentFunction = undefined;
+        this.$store.state.colorPicking = false;
+        this.handlePipelineUpdate("outputShouldDraw", true);
+
+        s.hsvHue = [hsvArray[0][0], hsvArray[1][0]];
+        s.hsvSaturation = [hsvArray[0][1], hsvArray[1][1]];
+        s.hsvValue = [hsvArray[0][2], hsvArray[1][2]];
+
+        let msg = this.$msgPack.encode({
+          "changePipelineSetting": {
+            'hsvHue': s.hsvHue,
+            'hsvSaturation': s.hsvSaturation,
+            'hsvValue': s.hsvValue,
+            'cameraIndex': this.$store.state.currentCameraIndex
+          }
+        });
+        this.$store.state.websocket.ws.send(msg);
+        this.$emit('update');
+      }
+    },
+    setFunction(index) {
+      switch (index) {
+        case 0:
+          this.currentFunction = undefined;
+          this.$store.state.colorPicking = false;
+
+          this.handlePipelineUpdate("outputShouldDraw", true);
+          return;
+        case 1:
+          this.currentFunction = this.colorPicker.eyeDrop;
+          break;
+        case 2:
+          this.currentFunction = this.colorPicker.expand;
+          break;
+        case 3:
+          this.currentFunction = this.colorPicker.shrink;
+          break;
+      }
+      this.$store.state.colorPicking = true;
+
+      this.handlePipelineUpdate("outputShouldDraw", false);
+      this.$store.commit("mutatePipeline", {"inputShouldShow": true});
+      this.handlePipelineUpdate("inputShouldShow", true);
+    }
+  }
+}
+
+</script>
+
+<style lang="css" scoped>
+#hue-slider >>> .v-slider {
+  background: linear-gradient( to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100% );
+  border-radius: 10px;
+  box-shadow: 0px 0px 5px #333, inset 0px 0px 3px #333;
+}
+#sat-slider >>> .v-slider {
+  background: linear-gradient( to right, #fff 0%, hsl(var(--averageHue), 100%, 50%) 100% );
+  border-radius: 10px;
+  box-shadow: 0px 0px 5px #333, inset 0px 0px 3px #333;
+}
+#value-slider >>> .v-slider {
+  background: linear-gradient( to right, #000 0%, hsl(var(--averageHue), 100%, 50%) 100% );
+  border-radius: 10px;
+  box-shadow: 0px 0px 5px #333, inset 0px 0px 3px #333;
+}
+>>> .v-slider__thumb {
+  outline: black solid thin;
+}
+.normal-slider >>> .v-slider__track-fill {
+    outline: black solid thin;
+}
+
+.inverted-slider >>> .v-slider__track-background {
+  outline: black solid thin;
+}
+</style>

photon-client/src/views/SettingsView.vue

@@ -37,7 +37,8 @@
     import Networking from './SettingsViews/Networking'
     import Lighting from "./SettingsViews/Lighting";
     import cvImage from '../components/common/cv-image'
-    import General from "./SettingsViews/General";
+    import Stats from "./SettingsViews/Stats";
+    import DeviceControl from "./SettingsViews/DeviceControl";
 
     export default {
         name: 'SettingsTab',
@@ -49,6 +50,7 @@
             return {
                 selectedTab: 0,
                 snack: false,
+                calibrationInProgress: false,
                 snackbar: {
                   color: "accent",
                   text: ""
@@ -68,7 +70,7 @@
             },
             tabList: {
                 get() {
-                    return [General, Networking].concat(this.$store.state.settings.lighting.supported ? Lighting : []);
+                    return [Stats, DeviceControl, Networking].concat(this.$store.state.settings.lighting.supported ? Lighting : []);
                 }
             }
         },
@@ -85,4 +87,4 @@
         height: auto !important;
         vertical-align: middle;
     }
-</style>
+</style>

photon-client/src/views/SettingsViews/DeviceControl.vue

@@ -0,0 +1,289 @@
+<template>
+  <div>
+    <v-row>
+      <v-col cols="12" lg="4" md="6">
+        <v-btn color="red" @click="restartProgram()">
+          <v-icon left>
+            mdi-restart
+          </v-icon>
+          Restart PhotonVision
+        </v-btn>
+      </v-col>
+      <v-col cols="12" lg="4" md="6">
+        <v-btn color="red" @click="restartDevice()">
+          <v-icon left>
+            mdi-restart-alert
+          </v-icon>
+          Restart Device
+        </v-btn>
+      </v-col>
+      <v-col cols="12" lg="4">
+        <v-btn color="secondary" @click="$refs.offlineUpdate.click()">
+          <v-icon left>
+            mdi-update
+          </v-icon>
+          Offline Update
+        </v-btn>
+      </v-col>
+    </v-row>
+    <v-divider />
+    <v-row>
+      <v-col cols="12" sm="6">
+        <v-btn color="secondary" @click="$refs.exportSettings.click()">
+          <v-icon left>
+            mdi-download
+          </v-icon>
+          Export Settings
+        </v-btn>
+      </v-col>
+      <v-col cols="12" sm="6">
+        <v-btn color="secondary" @click="$refs.importSettings.click()">
+          <v-icon left>
+            mdi-upload
+          </v-icon>
+          Import Settings
+        </v-btn>
+      </v-col>
+
+      <v-col cols="12" sm="6">
+        <v-btn color="secondary" @click="$refs.exportLogFile.click()">
+          <v-icon left>
+            mdi-file
+          </v-icon>
+          Export current log
+
+          <!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
+          <a
+            ref="exportLogFile"
+            style="color: black; text-decoration: none; display: none"
+            :href="
+              'http://' +
+                this.$address +
+                '/api/settings/photonvision-journalctl.txt'
+            "
+            download="photonvision-journalctl.txt"
+          />
+        </v-btn>
+      </v-col>
+
+      <v-col cols="12" sm="6">
+        <v-btn color="secondary" @click="showLogs()">
+          <v-icon left>
+            mdi-bug
+          </v-icon>
+          Show log viewer
+        </v-btn>
+      </v-col>
+    </v-row>
+    <v-snackbar v-model="snack" top :color="snackbar.color" timeout="-1">
+      <span>{{ snackbar.text }}</span>
+    </v-snackbar>
+
+    <!-- Special hidden upload input that gets 'clicked' when the user imports settings -->
+    <input
+      ref="importSettings"
+      type="file"
+      accept=".zip, .json"
+      style="display: none;"
+      @change="readImportedSettings"
+    />
+    <!-- Special hidden link that gets 'clicked' when the user exports settings -->
+    <a
+      ref="exportSettings"
+      style="color: black; text-decoration: none; display: none"
+      :href="
+        'http://' + this.$address + '/api/settings/photonvision_config.zip'
+      "
+      download="photonvision-settings.zip"
+    />
+
+    <!-- Special hidden new jar upload input that gets 'clicked' when the user posts a new .jar -->
+    <input
+      ref="offlineUpdate"
+      type="file"
+      accept=".jar"
+      style="display: none;"
+      @change="doOfflineUpdate"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Device Control",
+  data() {
+    return {
+      snack: false,
+      uploadPercentage: 0.0,
+      snackbar: {
+        color: "success",
+        text: "",
+      },
+    };
+  },
+  computed: {
+    settings() {
+      return this.$store.state.settings.general;
+    },
+    version() {
+      return `${this.settings.version}`;
+    },
+    hwModel() {
+      if (this.settings.hardwareModel !== "") {
+        return `${this.settings.hardwareModel}`;
+      } else {
+        return `Unknown`;
+      }
+    },
+    platform() {
+      return `${this.settings.hardwarePlatform}`;
+    },
+    gpuAccel() {
+      return `${this.settings.gpuAcceleration ? "Enabled" : "Unsupported"} ${
+        this.settings.gpuAcceleration
+          ? "(" + this.settings.gpuAcceleration + ")"
+          : ""
+      }`;
+    },
+    metrics() {
+      // console.log(this.$store.state.metrics);
+      return this.$store.state.metrics;
+    },
+  },
+  methods: {
+    restartProgram() {
+      this.axios.post("http://" + this.$address + "/api/restartProgram", {});
+    },
+    restartDevice() {
+      this.axios.post("http://" + this.$address + "/api/restartDevice", {});
+    },
+    readImportedSettings(event) {
+      let formData = new FormData();
+      formData.append("zipData", event.target.files[0]);
+      this.axios
+        .post("http://" + this.$address + "/api/settings/import", formData, {
+          headers: { "Content-Type": "multipart/form-data" },
+        })
+        .then(() => {
+          this.snackbar = {
+            color: "success",
+            text:
+              "Settings imported successfully! PhotonVision will restart in the background...",
+          };
+          this.snack = true;
+        })
+        .catch((err) => {
+          if (err.response) {
+            this.snackbar = {
+              color: "error",
+              text:
+                "Error while uploading settings file! Could not process provided file.",
+            };
+          } else if (err.request) {
+            this.snackbar = {
+              color: "error",
+              text:
+                "Error while uploading settings file! No respond to upload attempt.",
+            };
+          } else {
+            this.snackbar = {
+              color: "error",
+              text: "Error while uploading settings file!",
+            };
+          }
+          this.snack = true;
+        });
+    },
+    doOfflineUpdate(event) {
+      this.snackbar = {
+        color: "secondary",
+        text: "New Software Upload in Process...",
+      };
+      this.snack = true;
+
+      let formData = new FormData();
+      formData.append("jarData", event.target.files[0]);
+      this.axios
+        .post(
+          "http://" + this.$address + "/api/settings/offlineUpdate",
+          formData,
+          {
+            headers: { "Content-Type": "multipart/form-data" },
+            onUploadProgress: function(progressEvent) {
+              this.uploadPercentage = parseInt(
+                Math.round((progressEvent.loaded / progressEvent.total) * 100)
+              );
+              if (this.uploadPercentage < 99.5) {
+                this.snackbar.text =
+                  "New Software Upload in Process, " +
+                  this.uploadPercentage +
+                  "% complete";
+              } else {
+                this.snackbar.text = "Installing uploaded software...";
+              }
+            }.bind(this),
+          }
+        )
+        .then(() => {
+          this.snackbar = {
+            color: "success",
+            text:
+              "New .jar copied successfully! PhotonVision will restart in the background...",
+          };
+          this.snack = true;
+        })
+        .catch((err) => {
+          if (err.response) {
+            this.snackbar = {
+              color: "error",
+              text:
+                "Error while uploading new .jar file! Could not process provided file.",
+            };
+          } else if (err.request) {
+            this.snackbar = {
+              color: "error",
+              text:
+                "Error while uploading new .jar file! No respond to upload attempt.",
+            };
+          } else {
+            this.snackbar = {
+              color: "error",
+              text: "Error while uploading new .jar file!",
+            };
+          }
+          this.snack = true;
+        });
+    },
+    showLogs(event) {
+      event;
+      this.$store.state.logsOverlay = true;
+    },
+  },
+};
+</script>
+
+<style lang="css" scoped>
+.v-btn {
+  width: 100%;
+}
+
+.infoTable {
+  border: 1px solid;
+  border-collapse: separate;
+  border-spacing: 0px;
+  border-radius: 5px;
+  text-align: left;
+  margin-bottom: 10px;
+  width: 100%;
+  display: block;
+  overflow-x: auto;
+}
+
+.infoElem {
+  padding-right: 15px;
+  padding-bottom: 1px;
+  padding-top: 1px;
+  padding-left: 10px;
+  border-right: 1px solid;
+}
+</style>

photon-client/src/views/SettingsViews/Lighting.vue

@@ -41,4 +41,4 @@
 
 <style lang="" scoped>
 
-</style>
+</style>

photon-client/src/views/SettingsViews/Networking.vue

@@ -4,46 +4,163 @@
       ref="form"
       v-model="valid"
     >
-      <CVSwitch
-        v-model="runNTServer"
-        name="Run NetworkTables Server"
-        tooltip="If enabled, this device will create a NT server. This is useful for home debugging, but should be disabled on-robot."
-      />
       <CVnumberinput
         v-model="teamNumber"
         :disabled="settings.runNTServer"
         name="Team Number"
         :rules="[v => (v > 0) || 'Team number must be greater than zero', v => (v < 10000) || 'Team number must have fewer than five digits']"
         class="mb-4"
+        :label-cols="$vuetify.breakpoint.mdAndUp ? undefined : 5"
       />
+      <v-banner
+        v-show="(teamNumber < 1 || teamNumber > 10000) && !runNTServer"
+        rounded
+        color="red"
+        text-color="white"
+      >
+        Team number is unset or invalid. NetworkTables will not be able to connect.
+      </v-banner>
       <CVradio
+        v-show="$store.state.settings.networkSettings.shouldManage"
         v-model="connectionType"
+        :input-cols="inputCols"
+        name="IP Assignment Mode"
+        tooltip="DHCP will make the radio (router) automatically assign an IP address; this may result in an IP address that changes across reboots. Static IP assignment means that you pick the IP address and it won't change."
         :list="['DHCP','Static']"
-        :disabled="!$store.state.settings.networkSettings.supported"
       />
-      <template v-if="!isDHCP">
-        <CVinput
-          v-model="staticIp"
-          :input-cols="inputCols"
-          :rules="[v => isIPv4(v) || 'Invalid IPv4 address']"
-          name="IP"
-        />
-      </template>
+      <CVinput
+        v-if="!isDHCP"
+        v-model="staticIp"
+        :input-cols="inputCols"
+        :rules="[v => isIPv4(v) || 'Invalid IPv4 address']"
+        name="IP"
+      />
       <CVinput
         v-model="hostname"
         :input-cols="inputCols"
         :rules="[v => isHostname(v) || 'Invalid hostname']"
         name="Hostname"
       />
+      <CVSwitch
+        v-model="runNTServer"
+        name="Run NetworkTables Server (Debugging Only)"
+        tooltip="If enabled, this device will create a NT server. This is useful for home debugging, but should be disabled on-robot."
+        class="mt-3 mb-3"
+        :text-cols="$vuetify.breakpoint.mdAndUp ? undefined : 5"
+      />
+      <v-banner
+        v-show="runNTServer"
+        rounded
+        color="red"
+        text-color="white"
+      >
+        This switch is intended for testing; it should be off on a robot. PhotonLib will NOT work!
+      </v-banner>
     </v-form>
     <v-btn
       color="accent"
+      :class="runNTServer ? 'mt-3' : ''"
       style="color: black; width: 100%;"
       :disabled="!valid && !runNTServer"
       @click="sendGeneralSettings()"
     >
       Save
     </v-btn>
+    <v-snackbar
+      v-model="snack"
+      top
+      :color="snackbar.color"
+      timeout="5000"
+    >
+      <span>{{ snackbar.text }}</span>
+    </v-snackbar>
+
+    <template v-if="$store.state.settings.networkSettings.shouldManage && false">
+
+      <!-- Advanced controls for changing DHCP settings and stuff -->
+      <v-divider class="mt-4 mb-4" />
+
+      <v-title> Advanced </v-title>
+
+      <CVinput
+        :input-cols="inputCols"
+        name="Set DHCP command"
+      />
+      <CVinput
+        :input-cols="inputCols"
+        name="Set static command"
+      />
+      <CVinput
+        :input-cols="inputCols"
+        name="NetworkManager interface"
+      />
+      <CVinput
+        :input-cols="inputCols"
+        name="Physical interface"
+      />
+
+    </template>
+
+    <!-- TEMP - RIO finder is not currently enabled
+    <v-row>
+      <v-col
+        cols="12"
+        sm="6"
+      >
+        <v-simple-table
+          fixed-header
+          height="100%"
+          dense
+        >
+          <template v-slot:default>
+            <thead style="font-size: 1.25rem;">
+              <tr>
+                <th>
+                  Device IPs
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(value, index) in $store.state.networkInfo.deviceips"
+                :key="index"
+              >
+                <td>{{ value }}</td>
+              </tr>
+            </tbody>
+          </template>
+        </v-simple-table>
+      </v-col>
+      <v-col
+        cols="12"
+        sm="6"
+      >
+        <v-simple-table
+          fixed-header
+          height="100%"
+          dense
+        >
+          <template v-slot:default>
+            <thead style="font-size: 1.25rem;">
+              <tr>
+                <th>
+                  Possible RoboRIOs
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(value, index) in $store.state.networkInfo.possibleRios"
+                :key="index"
+              >
+                <td>{{ value }}</td>
+              </tr>
+            </tbody>
+          </template>
+        </v-simple-table>
+      </v-col>
+    </v-row>
+    -->
   </div>
 </template>
 
@@ -80,7 +197,7 @@ export default {
     },
     computed: {
         inputCols() {
-            return this.$vuetify.breakpoint.smAndUp ? 10 : 7;
+            return this.$vuetify.breakpoint.mdAndUp ? 10 : 7;
         },
         isDHCP() {
             return this.settings.connectionType === 0;
@@ -155,8 +272,16 @@ export default {
             return true;
         },
         sendGeneralSettings() {
+            const changingStaticIp = !this.isDHCP;
+
+            this.snackbar = {
+                color: "secondary",
+                text: "Updating settings..."
+            };
+            this.snack = true;
+
             this.axios.post("http://" + this.$address + "/api/settings/general", this.settings).then(
-                function (response) {
+                response => {
                     if (response.status === 200) {
                         this.snackbar = {
                             color: "success",
@@ -165,11 +290,18 @@ export default {
                         this.snack = true;
                     }
                 },
-                function (error) {
+                error => {
+                  if (error.status === 504 || changingStaticIp) {
+                    this.snackbar = {
+                        color: "error",
+                        text: (error.response || {data: `Connection lost! Try the new static IP at ${this.staticIp}:5800 or ${this.hostname}:5800 ?`}).data
+                    };
+                  } else {
                     this.snackbar = {
                         color: "error",
                         text: (error.response || {data: "Couldn't save settings"}).data
                     };
+                  }
                     this.snack = true;
                 }
             )
@@ -179,6 +311,24 @@ export default {
 }
 </script>
 
-<style lang="" scoped>
+<style scoped>
+    .v-data-table {
+      /*text-align: center;*/
+      background-color: transparent !important;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+    }
 
+    .v-data-table th {
+      background-color: #006492 !important;
+    }
+
+    .v-data-table th, td {
+      font-size: 1rem !important;
+    }
+
+    .v-data-table td {
+      font-family: monospace !important;
+    }
 </style>

photon-client/src/views/SettingsViews/Stats.vue

@@ -49,22 +49,46 @@
           <th class="infoElem">
             Disk Usage
           </th>
+          <th class="infoElem">
+            <v-tooltip top>
+              <template v-slot:activator="{ on, attrs }">
+                <span
+                  v-bind="attrs"
+                  v-on="on"
+                >
+                ⓘ CPU Throttling
+                </span>
+              </template>
+              <span>
+                    Current or Previous Reason for the cpu being held back from maximum performance.
+              </span>
+            </v-tooltip>
+          </th>
+          <th class="infoElem">
+            CPU Uptime
+          </th>
         </tr>
         <tr v-if="metrics.cpuUtil !== 'N/A'">
           <td class="infoElem">
-            {{ metrics.cpuUtil.replace(" ", "") }}%
+            {{ metrics.cpuUtil }}%
           </td>
           <td class="infoElem">
             {{ parseInt(metrics.cpuTemp) }}&deg;&nbsp;C
           </td>
           <td class="infoElem">
-            {{ metrics.ramUtil.replace(" ", "") }}MB of {{ metrics.cpuMem }}MB
+            {{ metrics.ramUtil }}MB of {{ metrics.cpuMem }}MB
           </td>
           <td class="infoElem">
-            {{ metrics.gpuMemUtil.replace(" ", "") }}MB of {{ metrics.gpuMem }}MB
+            {{ metrics.gpuMemUtil }}MB of {{ metrics.gpuMem }}MB
           </td>
           <td class="infoElem">
-            {{ metrics.diskUtilPct.replace(" ", "") }}
+            {{ metrics.diskUtilPct }}
+          </td>
+          <td class="infoElem">
+            {{ metrics.cpuThr }}
+          </td>
+          <td class="infoElem">
+            {{ metrics.cpuUptime }}
           </td>
         </tr>
         <tr v-if="metrics.cpuUtil === 'N/A'">
@@ -83,75 +107,21 @@
           <td class="infoElem">
             ---
           </td>
+          <td class="infoElem">
+            ---
+          </td>
+          <td class="infoElem">
+            ---
+          </td>
         </tr>
       </table>
     </v-row>
 
-    <v-row>
-      <v-col
-        cols="12"
-        sm="6"
-        lg="3"
-      >
-        <v-btn
-          color="secondary"
-          @click="$refs.exportSettings.click()"
-        >
-          <v-icon left>
-            mdi-download
-          </v-icon>
-          Export Settings
-        </v-btn>
-      </v-col>
-      <v-col
-        cols="12"
-        sm="6"
-        lg="3"
-      >
-        <v-btn
-          color="secondary"
-          @click="$refs.importSettings.click()"
-        >
-          <v-icon left>
-            mdi-upload
-          </v-icon>
-          Import Settings
-        </v-btn>
-      </v-col>
-      <v-col
-        cols="12"
-        lg="3"
-      >
-        <v-btn
-          color="red"
-          @click="restartProgram()"
-        >
-          <v-icon left>
-            mdi-restart
-          </v-icon>
-          Restart Photon
-        </v-btn>
-      </v-col>
-      <v-col
-        cols="12"
-        lg="3"
-      >
-        <v-btn
-          color="red"
-          @click="restartDevice()"
-        >
-          <v-icon left>
-            mdi-restart
-          </v-icon>
-          Restart Device
-        </v-btn>
-      </v-col>
-    </v-row>
     <v-snackbar
       v-model="snack"
       top
       :color="snackbar.color"
-      timeout="0"
+      timeout="-1"
     >
       <span>{{ snackbar.text }}</span>
     </v-snackbar>
@@ -172,15 +142,25 @@
       :href="'http://' + this.$address + '/api/settings/photonvision_config.zip'"
       download="photonvision-settings.zip"
     />
+
+    <!-- Special hidden new jar upload input that gets 'clicked' when the user posts a new .jar -->
+    <input
+      ref="offlineUpdate"
+      type="file"
+      accept=".jar"
+      style="display: none;"
+      @change="doOfflineUpdate"
+    >
   </div>
 </template>
 
 <script>
 export default {
-    name: 'General',
+    name: 'Stats',
     data() {
         return {
             snack: false,
+            uploadPercentage: 0.0,
             snackbar: {
                 color: "success",
                 text: ""
@@ -208,8 +188,8 @@ export default {
           return  `${this.settings.gpuAcceleration ? "Enabled" : "Unsupported"} ${this.settings.gpuAcceleration ? "(" + this.settings.gpuAcceleration + ")" : ""}`
         },
         metrics() {
-          console.log(this.$store.state.metrics);
-            return this.$store.state.metrics;
+          // console.log(this.$store.state.metrics);
+          return this.$store.state.metrics;
         }
     },
     methods: {
@@ -226,7 +206,7 @@ export default {
                 {headers: {"Content-Type": "multipart/form-data"}}).then(() => {
                 this.snackbar = {
                     color: "success",
-                    text: "Settings imported successfully! Program will now exit...",
+                    text: "Settings imported successfully! PhotonVision will restart in the background...",
                 };
                 this.snack = true;
             }).catch(err => {
@@ -234,7 +214,7 @@ export default {
                   this.snackbar = {
                       color: "error",
                       text: "Error while uploading settings file! Could not process provided file.",
-                  };               
+                  };
                 } else if (err.request) {
                   this.snackbar = {
                       color: "error",
@@ -249,6 +229,56 @@ export default {
                 this.snack = true;
             });
         },
+        doOfflineUpdate(event) {
+          this.snackbar = {
+                color: "secondary",
+                text: "New Software Upload in Process..."
+            };
+            this.snack = true;
+
+            let formData = new FormData();
+            formData.append("jarData", event.target.files[0]);
+            this.axios.post("http://" + this.$address + "/api/settings/offlineUpdate", formData,
+                {headers: {"Content-Type": "multipart/form-data"},
+                 onUploadProgress: function( progressEvent ) {
+                    this.uploadPercentage = parseInt( Math.round( ( progressEvent.loaded / progressEvent.total ) * 100 ) );
+                    if(this.uploadPercentage < 99.5){
+                      this.snackbar.text = "New Software Upload in Process, " + this.uploadPercentage + "% complete";
+                    } else {
+                      this.snackbar.text = "Installing uploaded software...";
+                    }
+
+                 }.bind(this)
+                }).then(() => {
+                this.snackbar = {
+                    color: "success",
+                    text: "New .jar copied successfully! PhotonVision will restart in the background...",
+                };
+                this.snack = true;
+            }).catch(err => {
+                if (err.response) {
+                  this.snackbar = {
+                      color: "error",
+                      text: "Error while uploading new .jar file! Could not process provided file.",
+                  };
+                } else if (err.request) {
+                  this.snackbar = {
+                      color: "error",
+                      text: "Error while uploading new .jar file! No respond to upload attempt.",
+                  };
+                } else {
+                  this.snackbar = {
+                      color: "error",
+                      text: "Error while uploading new .jar file!",
+                  };
+                }
+                this.snack = true;
+            });
+        },
+        showLogs(event) {
+          event;
+          this.$store.state.logsOverlay = true;
+        }
     }
 }
 </script>
@@ -266,6 +296,8 @@ export default {
   text-align: left;
   margin-bottom: 10px;
   width: 100%;
+  display: block;
+  overflow-x: auto;
 }
 
 .infoElem {
@@ -276,4 +308,4 @@ export default {
   border-right: 1px solid;
 }
 
-</style>
+</style>

photon-core/.gitignore

@@ -0,0 +1,15 @@
+bin/*
+.settings/*
+.project
+.classpath
+*.prefs
+.gradle
+.gradle/*
+build
+build/*
+photonvision/*
+photonvision_config/*
+photon-server/lib/*
+photon-server/package-lock.json
+
+src/main/java/org/photonvision/PhotonVersion.java

photon-core/build.gradle

@@ -0,0 +1,57 @@
+plugins {
+    id 'edu.wpi.first.WpilibTools' version '1.0.0'
+}
+
+import java.nio.file.Path
+
+apply from: "${rootDir}/shared/common.gradle"
+
+dependencies {
+    implementation project(':photon-targeting')
+
+    implementation 'io.javalin:javalin:4.2.0'
+
+    implementation 'org.msgpack:msgpack-core:0.9.0'
+    implementation 'org.msgpack:jackson-dataformat-msgpack:0.9.0'
+
+    // JOGL stuff (currently we only distribute for aarch64, which is Pi 4)
+    implementation "org.jogamp.gluegen:gluegen-rt:$joglVersion"
+    implementation "org.jogamp.jogl:jogl-all:$joglVersion"
+
+    implementation "org.jogamp.gluegen:gluegen-rt:$joglVersion:natives-linux-aarch64"
+    implementation "org.jogamp.jogl:jogl-all:$joglVersion:natives-linux-aarch64"
+
+    // Zip
+    implementation 'org.zeroturnaround:zt-zip:1.14'
+
+    implementation wpilibTools.deps.wpilibJava("apriltag")
+}
+
+task writeCurrentVersionJava {
+    def versionFileIn = file("${rootDir}/shared/PhotonVersion.java.in")
+    writePhotonVersionFile(versionFileIn, Path.of("$projectDir", "src", "main", "java", "org", "photonvision", "PhotonVersion.java"),
+            versionString)
+}
+
+build.dependsOn writeCurrentVersionJava
+
+def testNativeConfigName = 'wpilibTestNative'
+def testNativeConfig = configurations.create(testNativeConfigName)
+
+def folder = project.layout.buildDirectory.dir('NativeTest')
+
+def testNativeTasks = wpilibTools.createExtractionTasks {
+    taskPostfix = "Test"
+    configurationName = testNativeConfigName
+    rootTaskFolder.set(folder)
+}
+
+testNativeTasks.addToSourceSetResources(sourceSets.test)
+
+testNativeConfig.dependencies.add wpilibTools.deps.cscore()
+testNativeConfig.dependencies.add wpilibTools.deps.wpilib("ntcore")
+testNativeConfig.dependencies.add wpilibTools.deps.wpilib("wpinet")
+testNativeConfig.dependencies.add wpilibTools.deps.wpilib("hal")
+testNativeConfig.dependencies.add wpilibTools.deps.wpilib("wpiutil")
+testNativeConfig.dependencies.add wpilibTools.deps.wpilib("apriltag")
+testNativeConfig.dependencies.add wpilibTools.deps.wpilib("wpimath")

photon-core/settings.gradle

@@ -0,0 +1 @@
+rootProject.name = 'photon-core'

photon-core/src/main/java/org/photonvision/common/configuration/CameraConfiguration.java

@@ -20,8 +20,8 @@ package org.photonvision.common.configuration;
 import com.fasterxml.jackson.annotation.JsonCreator;
 import com.fasterxml.jackson.annotation.JsonIgnore;
 import com.fasterxml.jackson.annotation.JsonProperty;
-import edu.wpi.first.wpilibj.geometry.Rotation2d;
 import java.util.ArrayList;
+import java.util.Arrays;
 import java.util.List;
 import org.photonvision.common.logging.LogGroup;
 import org.photonvision.common.logging.Logger;
@@ -46,11 +46,12 @@ public class CameraConfiguration {
     /** Can be either path (ex /dev/videoX) or index (ex 1). */
     public String path = "";
 
+    @JsonIgnore public String[] otherPaths = {};
+
     public CameraType cameraType = CameraType.UsbCamera;
     public double FOV = 70;
     public final List<CameraCalibrationCoefficients> calibrations;
     public int currentPipelineIndex = 0;
-    public Rotation2d camPitch = new Rotation2d();
 
     public int streamIndex = 0; // 0 index means ports [1181, 1182], 1 means [1183, 1184], etc...
 
@@ -61,19 +62,22 @@ public class CameraConfiguration {
     public DriverModePipelineSettings driveModeSettings = new DriverModePipelineSettings();
 
     public CameraConfiguration(String baseName, String path) {
-        this(baseName, baseName, baseName, path);
+        this(baseName, baseName, baseName, path, new String[0]);
     }
 
-    public CameraConfiguration(String baseName, String uniqueName, String nickname, String path) {
+    public CameraConfiguration(
+            String baseName, String uniqueName, String nickname, String path, String[] alternates) {
         this.baseName = baseName;
         this.uniqueName = uniqueName;
         this.nickname = nickname;
         this.path = path;
         this.calibrations = new ArrayList<>();
+        this.otherPaths = alternates;
 
         logger.debug(
                 "Creating USB camera configuration for "
                         + cameraType
+                        + " "
                         + baseName
                         + " (AKA "
                         + nickname
@@ -90,8 +94,7 @@ public class CameraConfiguration {
             @JsonProperty("path") String path,
             @JsonProperty("cameraType") CameraType cameraType,
             @JsonProperty("calibration") List<CameraCalibrationCoefficients> calibrations,
-            @JsonProperty("currentPipelineIndex") int currentPipelineIndex,
-            @JsonProperty("camPitch") Rotation2d camPitch) {
+            @JsonProperty("currentPipelineIndex") int currentPipelineIndex) {
         this.baseName = baseName;
         this.uniqueName = uniqueName;
         this.nickname = nickname;
@@ -100,11 +103,11 @@ public class CameraConfiguration {
         this.cameraType = cameraType;
         this.calibrations = calibrations != null ? calibrations : new ArrayList<>();
         this.currentPipelineIndex = currentPipelineIndex;
-        this.camPitch = camPitch;
 
         logger.debug(
                 "Creating camera configuration for "
                         + cameraType
+                        + " "
                         + baseName
                         + " (AKA "
                         + nickname
@@ -147,4 +150,33 @@ public class CameraConfiguration {
                 .ifPresent(calibrations::remove);
         calibrations.add(calibration);
     }
+
+    @Override
+    public String toString() {
+        return "CameraConfiguration [baseName="
+                + baseName
+                + ", uniqueName="
+                + uniqueName
+                + ", nickname="
+                + nickname
+                + ", path="
+                + path
+                + ", otherPaths="
+                + Arrays.toString(otherPaths)
+                + ", cameraType="
+                + cameraType
+                + ", FOV="
+                + FOV
+                + ", calibrations="
+                + calibrations
+                + ", currentPipelineIndex="
+                + currentPipelineIndex
+                + ", streamIndex="
+                + streamIndex
+                + ", pipelineSettings="
+                + pipelineSettings
+                + ", driveModeSettings="
+                + driveModeSettings
+                + "]";
+    }
 }

photon-core/src/main/java/org/photonvision/common/configuration/ConfigManager.java

@@ -32,7 +32,6 @@ import java.util.*;
 import java.util.stream.Collectors;
 import org.photonvision.common.logging.LogGroup;
 import org.photonvision.common.logging.Logger;
-import org.photonvision.common.util.TimedTaskManager;
 import org.photonvision.common.util.file.FileUtils;
 import org.photonvision.common.util.file.JacksonUtils;
 import org.photonvision.vision.pipeline.CVPipelineSettings;
@@ -57,6 +56,7 @@ public class ConfigManager {
     final File configDirectoryFile;
 
     private long saveRequestTimestamp = -1;
+    private Thread settingsSaveThread;
 
     public static ConfigManager getInstance() {
         if (INSTANCE == null) {
@@ -97,7 +97,8 @@ public class ConfigManager {
                 new File(Path.of(configDirectoryFile.toString(), NET_SET_FNAME).toUri());
         this.camerasFolder = new File(Path.of(configDirectoryFile.toString(), "cameras").toUri());
 
-        TimedTaskManager.getInstance().addTask("ConfigManager", this::checkSaveAndWrite, 1000);
+        settingsSaveThread = new Thread(this::saveAndWriteTask);
+        settingsSaveThread.start();
     }
 
     public void load() {
@@ -332,8 +333,8 @@ public class ConfigManager {
         return loadedConfigurations;
     }
 
-    public void addCameraConfigurations(HashMap<VisionSource, CameraConfiguration> sources) {
-        getConfig().addCameraConfigs(sources.values());
+    public void addCameraConfigurations(List<VisionSource> sources) {
+        getConfig().addCameraConfigs(sources);
         requestSave();
     }
 
@@ -425,12 +426,24 @@ public class ConfigManager {
         saveRequestTimestamp = System.currentTimeMillis();
     }
 
-    private void checkSaveAndWrite() {
+    private void saveAndWriteTask() {
         // Only save if 1 second has past since the request was made
-        if (saveRequestTimestamp > 0 && (System.currentTimeMillis() - saveRequestTimestamp) > 1000L) {
-            saveRequestTimestamp = -1;
-            logger.debug("Saving to disk...");
-            saveToDisk();
+        while (!Thread.currentThread().isInterrupted()) {
+            if (saveRequestTimestamp > 0 && (System.currentTimeMillis() - saveRequestTimestamp) > 1000L) {
+                saveRequestTimestamp = -1;
+                logger.debug("Saving to disk...");
+                saveToDisk();
+            }
+
+            try {
+                Thread.sleep(1000);
+            } catch (InterruptedException e) {
+                logger.error("Exception waiting for settings semaphore", e);
+            }
         }
     }
+
+    public void unloadCameraConfigs() {
+        this.config.getCameraConfigurations().clear();
+    }
 }

photon-core/src/main/java/org/photonvision/common/configuration/HardwareConfig.java

@@ -24,7 +24,6 @@ import java.util.List;
 
 @JsonIgnoreProperties(ignoreUnknown = true)
 public class HardwareConfig {
-
     public final String deviceName;
     public final String deviceLogoPath;
     public final String supportURL;
@@ -42,6 +41,8 @@ public class HardwareConfig {
     public final String cpuTempCommand;
     public final String cpuMemoryCommand;
     public final String cpuUtilCommand;
+    public final String cpuThrottleReasonCmd;
+    public final String cpuUptimeCommand;
     public final String gpuMemoryCommand;
     public final String ramUtilCommand;
     public final String gpuMemUsageCommand;
@@ -66,6 +67,8 @@ public class HardwareConfig {
         cpuTempCommand = "";
         cpuMemoryCommand = "";
         cpuUtilCommand = "";
+        cpuThrottleReasonCmd = "";
+        cpuUptimeCommand = "";
         gpuMemoryCommand = "";
         ramUtilCommand = "";
         ledBlinkCommand = "";
@@ -92,6 +95,8 @@ public class HardwareConfig {
             String cpuTempCommand,
             String cpuMemoryCommand,
             String cpuUtilCommand,
+            String cpuThrottleReasonCmd,
+            String cpuUptimeCommand,
             String gpuMemoryCommand,
             String ramUtilCommand,
             String gpuMemUsageCommand,
@@ -112,6 +117,8 @@ public class HardwareConfig {
         this.cpuTempCommand = cpuTempCommand;
         this.cpuMemoryCommand = cpuMemoryCommand;
         this.cpuUtilCommand = cpuUtilCommand;
+        this.cpuThrottleReasonCmd = cpuThrottleReasonCmd;
+        this.cpuUptimeCommand = cpuUptimeCommand;
         this.gpuMemoryCommand = gpuMemoryCommand;
         this.ramUtilCommand = ramUtilCommand;
         this.gpuMemUsageCommand = gpuMemUsageCommand;
@@ -121,7 +128,22 @@ public class HardwareConfig {
         this.blacklistedResIndices = blacklistedResIndices;
     }
 
+    /** @return True if the FOV has been preset to a sane value, false otherwise */
     public final boolean hasPresetFOV() {
         return vendorFOV > 0;
     }
+
+    /** @return True if any command has been configured to a non-default empty, false otherwise */
+    public final boolean hasCommandsConfigured() {
+        return cpuTempCommand != ""
+                || cpuMemoryCommand != ""
+                || cpuUtilCommand != ""
+                || cpuThrottleReasonCmd != ""
+                || cpuUptimeCommand != ""
+                || gpuMemoryCommand != ""
+                || ramUtilCommand != ""
+                || ledBlinkCommand != ""
+                || gpuMemUsageCommand != ""
+                || diskUsageCommand != "";
+    }
 }

photon-core/src/main/java/org/photonvision/common/configuration/NetworkConfig.java

@@ -19,12 +19,15 @@ package org.photonvision.common.configuration;
 
 import com.fasterxml.jackson.annotation.JsonCreator;
 import com.fasterxml.jackson.annotation.JsonGetter;
+import com.fasterxml.jackson.annotation.JsonIgnore;
 import com.fasterxml.jackson.annotation.JsonProperty;
 import com.fasterxml.jackson.annotation.JsonSetter;
+import com.fasterxml.jackson.databind.ObjectMapper;
 import java.util.HashMap;
 import java.util.Map;
 import org.photonvision.common.hardware.Platform;
 import org.photonvision.common.networking.NetworkMode;
+import org.photonvision.common.util.file.JacksonUtils;
 
 public class NetworkConfig {
     public int teamNumber = 0;
@@ -33,6 +36,16 @@ public class NetworkConfig {
     public String hostname = "photonvision";
     public boolean runNTServer = false;
 
+    @JsonIgnore public static final String NM_IFACE_STRING = "${interface}";
+    @JsonIgnore public static final String NM_IP_STRING = "${ipaddr}";
+
+    public String networkManagerIface = "Wired\\ connection\\ 1";
+    public String physicalInterface = "eth0";
+    public String setStaticCommand =
+            "nmcli con mod ${interface} ipv4.addresses ${ipaddr}/8 ipv4.method \"manual\" ipv6.method \"disabled\"";
+    public String setDHCPcommand =
+            "nmcli con mod ${interface} ipv4.method \"auto\" ipv6.method \"disabled\"";
+
     private boolean shouldManage;
 
     public NetworkConfig() {
@@ -46,46 +59,48 @@ public class NetworkConfig {
             @JsonProperty("staticIp") String staticIp,
             @JsonProperty("hostname") String hostname,
             @JsonProperty("runNTServer") boolean runNTServer,
-            @JsonProperty("shouldManage") boolean shouldManage) {
+            @JsonProperty("shouldManage") boolean shouldManage,
+            @JsonProperty("networkManagerIface") String networkManagerIface,
+            @JsonProperty("physicalInterface") String physicalInterface,
+            @JsonProperty("setStaticCommand") String setStaticCommand,
+            @JsonProperty("setDHCPcommand") String setDHCPcommand) {
         this.teamNumber = teamNumber;
         this.connectionType = connectionType;
         this.staticIp = staticIp;
         this.hostname = hostname;
         this.runNTServer = runNTServer;
+        this.networkManagerIface = networkManagerIface;
+        this.physicalInterface = physicalInterface;
+        this.setStaticCommand = setStaticCommand;
+        this.setDHCPcommand = setDHCPcommand;
         setShouldManage(shouldManage);
     }
 
     public static NetworkConfig fromHashMap(Map<String, Object> map) {
-        // teamNumber (int), supported (bool), connectionType (int),
-        // staticIp (str), netmask (str), hostname (str)
-        var ret = new NetworkConfig();
-        ret.teamNumber = Integer.parseInt(map.get("teamNumber").toString());
-        ret.connectionType = NetworkMode.values()[(Integer) map.get("connectionType")];
-        ret.staticIp = (String) map.get("staticIp");
-        ret.hostname = (String) map.get("hostname");
-        ret.runNTServer = (Boolean) map.get("runNTServer");
-        ret.setShouldManage((Boolean) map.get("supported"));
-        return ret;
+        try {
+            return new ObjectMapper().convertValue(map, NetworkConfig.class);
+        } catch (Exception e) {
+            e.printStackTrace();
+            return new NetworkConfig();
+        }
     }
 
-    public HashMap<String, Object> toHashMap() {
-        HashMap<String, Object> tmp = new HashMap<>();
-        tmp.put("teamNumber", teamNumber);
-        tmp.put("supported", shouldManage());
-        tmp.put("connectionType", connectionType.ordinal());
-        tmp.put("staticIp", staticIp);
-        tmp.put("hostname", hostname);
-        tmp.put("runNTServer", runNTServer);
-        return tmp;
+    public Map<String, Object> toHashMap() {
+        try {
+            return new ObjectMapper().convertValue(this, JacksonUtils.UIMap.class);
+        } catch (Exception e) {
+            e.printStackTrace();
+            return new HashMap<>();
+        }
     }
 
     @JsonGetter("shouldManage")
     public boolean shouldManage() {
-        return this.shouldManage || Platform.isRaspberryPi();
+        return this.shouldManage || Platform.isLinux();
     }
 
     @JsonSetter("shouldManage")
     public void setShouldManage(boolean shouldManage) {
-        this.shouldManage = shouldManage || Platform.isRaspberryPi();
+        this.shouldManage = shouldManage || Platform.isLinux();
     }
 }

photon-core/src/main/java/org/photonvision/common/configuration/PhotonConfiguration.java

@@ -25,13 +25,13 @@ import java.util.stream.Collectors;
 import org.photonvision.PhotonVersion;
 import org.photonvision.common.hardware.Platform;
 import org.photonvision.common.util.SerializationUtils;
-import org.photonvision.raspi.PicamJNI;
+import org.photonvision.raspi.LibCameraJNI;
 import org.photonvision.vision.processes.VisionModule;
 import org.photonvision.vision.processes.VisionModuleManager;
+import org.photonvision.vision.processes.VisionSource;
 
 // TODO rename this class
 public class PhotonConfiguration {
-
     private HardwareConfig hardwareConfig;
     private HardwareSettings hardwareSettings;
     private NetworkConfig networkConfig;
@@ -75,9 +75,9 @@ public class PhotonConfiguration {
         return cameraConfigurations;
     }
 
-    public void addCameraConfigs(Collection<CameraConfiguration> config) {
-        for (var c : config) {
-            addCameraConfig(c);
+    public void addCameraConfigs(Collection<VisionSource> sources) {
+        for (var s : sources) {
+            addCameraConfig(s.getCameraConfiguration());
         }
     }
 
@@ -110,11 +110,11 @@ public class PhotonConfiguration {
         generalSubmap.put("version", PhotonVersion.versionString);
         generalSubmap.put(
                 "gpuAcceleration",
-                PicamJNI.isSupported()
-                        ? "Zerocopy MMAL on " + PicamJNI.getSensorModel().getFriendlyName()
+                LibCameraJNI.isSupported()
+                        ? "Zerocopy Libcamera on " + LibCameraJNI.getSensorModel().getFriendlyName()
                         : ""); // TODO add support for other types of GPU accel
         generalSubmap.put("hardwareModel", hardwareConfig.deviceName);
-        generalSubmap.put("hardwarePlatform", Platform.getCurrentPlatform().toString());
+        generalSubmap.put("hardwarePlatform", Platform.getPlatformName());
         settingsSubmap.put("general", generalSubmap);
 
         map.put("settings", settingsSubmap);
@@ -128,7 +128,8 @@ public class PhotonConfiguration {
 
     public static class UICameraConfiguration {
         @SuppressWarnings("unused")
-        public double fov, tiltDegrees;
+        public double fov;
+
         public String nickname;
         public HashMap<String, Object> currentPipelineSettings;
         public int currentPipelineIndex;

photon-core/src/main/java/org/photonvision/common/dataflow/DataChangeService.java

@@ -27,7 +27,6 @@ import org.photonvision.common.logging.Logger;
 
 @SuppressWarnings("rawtypes")
 public class DataChangeService {
-
     private static final Logger logger = new Logger(DataChangeService.class, LogGroup.WebServer);
 
     private static class ThreadSafeSingleton {

photon-core/src/main/java/org/photonvision/common/dataflow/events/IncomingWebSocketEvent.java

@@ -23,7 +23,6 @@ import org.photonvision.common.dataflow.DataChangeDestination;
 import org.photonvision.common.dataflow.DataChangeSource;
 
 public class IncomingWebSocketEvent<T> extends DataChangeEvent<T> {
-
     public final Integer cameraIndex;
     public final WsContext originContext;
 

photon-core/src/main/java/org/photonvision/common/dataflow/events/OutgoingUIEvent.java

@@ -34,6 +34,13 @@ public class OutgoingUIEvent<T> extends DataChangeEvent<T> {
         this.originContext = originContext;
     }
 
+    public static OutgoingUIEvent<HashMap<String, Object>> wrappedOf(
+            String commandName, Object value) {
+        HashMap<String, Object> data = new HashMap<>();
+        data.put(commandName, value);
+        return new OutgoingUIEvent<>(commandName, data);
+    }
+
     public static OutgoingUIEvent<HashMap<String, Object>> wrappedOf(
             String commandName, String propertyName, Object value, WsContext originContext) {
         HashMap<String, Object> data = new HashMap<>();

photon-core/src/main/java/org/photonvision/common/dataflow/networktables/NTDataChangeListener.java

@@ -17,23 +17,29 @@
 
 package org.photonvision.common.dataflow.networktables;
 
-import edu.wpi.first.networktables.EntryListenerFlags;
-import edu.wpi.first.networktables.EntryNotification;
-import edu.wpi.first.networktables.NetworkTableEntry;
+import edu.wpi.first.networktables.NetworkTableEvent;
+import edu.wpi.first.networktables.NetworkTableInstance;
+import edu.wpi.first.networktables.Subscriber;
+import java.util.EnumSet;
 import java.util.function.Consumer;
 
 public class NTDataChangeListener {
-
-    private final NetworkTableEntry watchedEntry;
+    private final NetworkTableInstance instance;
+    private final Subscriber watchedEntry;
     private final int listenerID;
 
     public NTDataChangeListener(
-            NetworkTableEntry watchedEntry, Consumer<EntryNotification> dataChangeConsumer) {
-        this.watchedEntry = watchedEntry;
-        listenerID = watchedEntry.addListener(dataChangeConsumer, EntryListenerFlags.kUpdate);
+            NetworkTableInstance instance,
+            Subscriber watchedSubscriber,
+            Consumer<NetworkTableEvent> dataChangeConsumer) {
+        this.watchedEntry = watchedSubscriber;
+        this.instance = instance;
+        listenerID =
+                this.instance.addListener(
+                        watchedEntry, EnumSet.of(NetworkTableEvent.Kind.kValueAll), dataChangeConsumer);
     }
 
     public void remove() {
-        watchedEntry.removeListener(listenerID);
+        this.instance.removeListener(listenerID);
     }
 }

photon-core/src/main/java/org/photonvision/common/dataflow/networktables/NTDataPublisher.java

@@ -0,0 +1,223 @@
+/*
+ * Copyright (C) Photon Vision.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package org.photonvision.common.dataflow.networktables;
+
+import edu.wpi.first.networktables.NetworkTable;
+import edu.wpi.first.networktables.NetworkTableEvent;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.function.BooleanSupplier;
+import java.util.function.Consumer;
+import java.util.function.Supplier;
+import org.opencv.core.Point;
+import org.photonvision.common.dataflow.CVPipelineResultConsumer;
+import org.photonvision.common.dataflow.structures.Packet;
+import org.photonvision.common.logging.LogGroup;
+import org.photonvision.common.logging.Logger;
+import org.photonvision.common.networktables.NTTopicSet;
+import org.photonvision.targeting.PhotonPipelineResult;
+import org.photonvision.targeting.PhotonTrackedTarget;
+import org.photonvision.targeting.TargetCorner;
+import org.photonvision.vision.pipeline.result.CVPipelineResult;
+import org.photonvision.vision.target.TrackedTarget;
+
+public class NTDataPublisher implements CVPipelineResultConsumer {
+    private final Logger logger = new Logger(NTDataPublisher.class, LogGroup.General);
+
+    private final NetworkTable rootTable = NetworkTablesManager.getInstance().kRootTable;
+
+    private NTTopicSet ts = new NTTopicSet();
+
+    NTDataChangeListener pipelineIndexListener;
+    private final Supplier<Integer> pipelineIndexSupplier;
+    private final Consumer<Integer> pipelineIndexConsumer;
+
+    NTDataChangeListener driverModeListener;
+    private final BooleanSupplier driverModeSupplier;
+    private final Consumer<Boolean> driverModeConsumer;
+
+    private long heartbeatCounter = 0;
+
+    public NTDataPublisher(
+            String cameraNickname,
+            Supplier<Integer> pipelineIndexSupplier,
+            Consumer<Integer> pipelineIndexConsumer,
+            BooleanSupplier driverModeSupplier,
+            Consumer<Boolean> driverModeConsumer) {
+        this.pipelineIndexSupplier = pipelineIndexSupplier;
+        this.pipelineIndexConsumer = pipelineIndexConsumer;
+        this.driverModeSupplier = driverModeSupplier;
+        this.driverModeConsumer = driverModeConsumer;
+
+        updateCameraNickname(cameraNickname);
+        updateEntries();
+    }
+
+    private void onPipelineIndexChange(NetworkTableEvent entryNotification) {
+        var newIndex = (int) entryNotification.valueData.value.getInteger();
+        var originalIndex = pipelineIndexSupplier.get();
+
+        // ignore indexes below 0
+        if (newIndex < 0) {
+            ts.pipelineIndexPublisher.set(originalIndex);
+            return;
+        }
+
+        if (newIndex == originalIndex) {
+            logger.debug("Pipeline index is already " + newIndex);
+            return;
+        }
+
+        pipelineIndexConsumer.accept(newIndex);
+        var setIndex = pipelineIndexSupplier.get();
+        if (newIndex != setIndex) { // set failed
+            ts.pipelineIndexPublisher.set(setIndex);
+            // TODO: Log
+        }
+        logger.debug("Successfully set pipeline index to " + newIndex);
+    }
+
+    private void onDriverModeChange(NetworkTableEvent entryNotification) {
+        var newDriverMode = entryNotification.valueData.value.getBoolean();
+        var originalDriverMode = driverModeSupplier.getAsBoolean();
+
+        if (newDriverMode == originalDriverMode) {
+            logger.debug("Driver mode is already " + newDriverMode);
+            return;
+        }
+
+        driverModeConsumer.accept(newDriverMode);
+        logger.debug("Successfully set driver mode to " + newDriverMode);
+    }
+
+    private void removeEntries() {
+        if (pipelineIndexListener != null) pipelineIndexListener.remove();
+        if (driverModeListener != null) driverModeListener.remove();
+        ts.removeEntries();
+    }
+
+    private void updateEntries() {
+        if (pipelineIndexListener != null) pipelineIndexListener.remove();
+        if (driverModeListener != null) driverModeListener.remove();
+
+        ts.updateEntries();
+
+        pipelineIndexListener =
+                new NTDataChangeListener(
+                        ts.subTable.getInstance(), ts.pipelineIndexSubscriber, this::onPipelineIndexChange);
+
+        driverModeListener =
+                new NTDataChangeListener(
+                        ts.subTable.getInstance(), ts.driverModeSubscriber, this::onDriverModeChange);
+    }
+
+    public void updateCameraNickname(String newCameraNickname) {
+        removeEntries();
+        ts.subTable = rootTable.getSubTable(newCameraNickname);
+        updateEntries();
+    }
+
+    @Override
+    public void accept(CVPipelineResult result) {
+        var simplified =
+                new PhotonPipelineResult(
+                        result.getLatencyMillis(), simpleFromTrackedTargets(result.targets));
+        Packet packet = new Packet(simplified.getPacketSize());
+        simplified.populatePacket(packet);
+
+        ts.rawBytesEntry.set(packet.getData());
+
+        ts.pipelineIndexPublisher.set(pipelineIndexSupplier.get());
+        ts.driverModePublisher.set(driverModeSupplier.getAsBoolean());
+        ts.latencyMillisEntry.set(result.getLatencyMillis());
+        ts.hasTargetEntry.set(result.hasTargets());
+
+        if (result.hasTargets()) {
+            var bestTarget = result.targets.get(0);
+
+            ts.targetPitchEntry.set(bestTarget.getPitch());
+            ts.targetYawEntry.set(bestTarget.getYaw());
+            ts.targetAreaEntry.set(bestTarget.getArea());
+            ts.targetSkewEntry.set(bestTarget.getSkew());
+
+            var pose = bestTarget.getBestCameraToTarget3d();
+            ts.targetPoseEntry.set(
+                    new double[] {
+                        pose.getTranslation().getX(),
+                        pose.getTranslation().getY(),
+                        pose.getTranslation().getZ(),
+                        pose.getRotation().getQuaternion().getW(),
+                        pose.getRotation().getQuaternion().getX(),
+                        pose.getRotation().getQuaternion().getY(),
+                        pose.getRotation().getQuaternion().getZ()
+                    });
+
+            var targetOffsetPoint = bestTarget.getTargetOffsetPoint();
+            ts.bestTargetPosX.set(targetOffsetPoint.x);
+            ts.bestTargetPosY.set(targetOffsetPoint.y);
+        } else {
+            ts.targetPitchEntry.set(0);
+            ts.targetYawEntry.set(0);
+            ts.targetAreaEntry.set(0);
+            ts.targetSkewEntry.set(0);
+            ts.targetPoseEntry.set(new double[] {0, 0, 0});
+            ts.bestTargetPosX.set(0);
+            ts.bestTargetPosY.set(0);
+        }
+
+        ts.heartbeatPublisher.set(heartbeatCounter++);
+
+        // TODO...nt4... is this needed?
+        rootTable.getInstance().flush();
+    }
+
+    public static List<PhotonTrackedTarget> simpleFromTrackedTargets(List<TrackedTarget> targets) {
+        var ret = new ArrayList<PhotonTrackedTarget>();
+        for (var t : targets) {
+            var minAreaRectCorners = new ArrayList<TargetCorner>();
+            var detectedCorners = new ArrayList<TargetCorner>();
+            {
+                var points = new Point[4];
+                t.getMinAreaRect().points(points);
+                for (int i = 0; i < 4; i++) {
+                    minAreaRectCorners.add(new TargetCorner(points[i].x, points[i].y));
+                }
+            }
+            {
+                var points = t.getTargetCorners();
+                for (int i = 0; i < points.size(); i++) {
+                    detectedCorners.add(new TargetCorner(points.get(i).x, points.get(i).y));
+                }
+            }
+
+            ret.add(
+                    new PhotonTrackedTarget(
+                            t.getYaw(),
+                            t.getPitch(),
+                            t.getArea(),
+                            t.getSkew(),
+                            t.getFiducialId(),
+                            t.getBestCameraToTarget3d(),
+                            t.getAltCameraToTarget3d(),
+                            t.getPoseAmbiguity(),
+                            minAreaRectCorners,
+                            detectedCorners));
+        }
+        return ret;
+    }
+}

photon-core/src/main/java/org/photonvision/common/dataflow/networktables/NetworkTablesManager.java

@@ -17,24 +17,32 @@
 
 package org.photonvision.common.dataflow.networktables;
 
-import edu.wpi.first.networktables.LogMessage;
 import edu.wpi.first.networktables.NetworkTable;
+import edu.wpi.first.networktables.NetworkTableEvent;
 import edu.wpi.first.networktables.NetworkTableInstance;
+import java.util.HashMap;
 import java.util.function.Consumer;
+import org.photonvision.PhotonVersion;
+import org.photonvision.common.configuration.ConfigManager;
 import org.photonvision.common.configuration.NetworkConfig;
+import org.photonvision.common.dataflow.DataChangeService;
+import org.photonvision.common.dataflow.events.OutgoingUIEvent;
 import org.photonvision.common.logging.LogGroup;
 import org.photonvision.common.logging.Logger;
 import org.photonvision.common.scripting.ScriptEventType;
 import org.photonvision.common.scripting.ScriptManager;
+import org.photonvision.common.util.TimedTaskManager;
 
 public class NetworkTablesManager {
-
     private final NetworkTableInstance ntInstance = NetworkTableInstance.getDefault();
     private final String kRootTableName = "/photonvision";
     public final NetworkTable kRootTable = ntInstance.getTable(kRootTableName);
 
+    private boolean isRetryingConnection = false;
+
     private NetworkTablesManager() {
-        ntInstance.addLogger(new NTLogger(), 0, 255); // to hide error messages
+        ntInstance.addLogger(0, 255, new NTLogger()); // to hide error messages
+        TimedTaskManager.getInstance().addTask("NTManager", this::ntTick, 5000);
     }
 
     private static NetworkTablesManager INSTANCE;
@@ -46,50 +54,95 @@ public class NetworkTablesManager {
 
     private static final Logger logger = new Logger(NetworkTablesManager.class, LogGroup.General);
 
-    private static class NTLogger implements Consumer<LogMessage> {
-
+    private static class NTLogger implements Consumer<NetworkTableEvent> {
         private boolean hasReportedConnectionFailure = false;
         private long lastConnectMessageMillis = 0;
 
         @Override
-        public void accept(LogMessage logMessage) {
-            if (!hasReportedConnectionFailure && logMessage.message.contains("timed out")) {
+        public void accept(NetworkTableEvent event) {
+            if (!hasReportedConnectionFailure && event.logMessage.message.contains("timed out")) {
                 logger.error("NT Connection has failed! Will retry in background.");
                 hasReportedConnectionFailure = true;
-            } else if (logMessage.message.contains("connected")
+                getInstance().broadcastConnectedStatus();
+            } else if (event.logMessage.message.contains("connected")
                     && System.currentTimeMillis() - lastConnectMessageMillis > 125) {
                 logger.info("NT Connected!");
                 hasReportedConnectionFailure = false;
                 lastConnectMessageMillis = System.currentTimeMillis();
                 ScriptManager.queueEvent(ScriptEventType.kNTConnected);
+                getInstance().broadcastVersion();
+                getInstance().broadcastConnectedStatus();
             }
         }
     }
 
+    public void broadcastConnectedStatus() {
+        TimedTaskManager.getInstance().addOneShotTask(this::broadcastConnectedStatusImpl, 1000L);
+    }
+
+    private void broadcastConnectedStatusImpl() {
+        HashMap<String, Object> map = new HashMap<>();
+        var subMap = new HashMap<String, Object>();
+
+        subMap.put("connected", ntInstance.isConnected());
+        if (ntInstance.isConnected()) {
+            var connections = getInstance().ntInstance.getConnections();
+            if (connections.length > 0) {
+                subMap.put("address", connections[0].remote_ip + ":" + connections[0].remote_port);
+            }
+            subMap.put("clients", connections.length);
+        }
+
+        map.put("ntConnectionInfo", subMap);
+        DataChangeService.getInstance()
+                .publishEvent(new OutgoingUIEvent<>("networkTablesConnected", map));
+    }
+
+    private void broadcastVersion() {
+        kRootTable.getEntry("version").setString(PhotonVersion.versionString);
+        kRootTable.getEntry("buildDate").setString(PhotonVersion.buildDate);
+    }
+
     public void setConfig(NetworkConfig config) {
         if (config.runNTServer) {
             setServerMode();
         } else {
             setClientMode(config.teamNumber);
         }
+        broadcastVersion();
     }
 
     private void setClientMode(int teamNumber) {
-        logger.info("Starting NT Client");
+        if (!isRetryingConnection) logger.info("Starting NT Client");
         ntInstance.stopServer();
-
-        ntInstance.startClientTeam(teamNumber);
-        if (ntInstance.isConnected()) {
-            logger.info("[NetworkTablesManager] Connected to the robot!");
-        } else {
-            logger.error(
-                    "[NetworkTablesManager] Could not connect to the robot! Will retry in the background...");
-        }
+        ntInstance.startClient4("photonvision");
+        ntInstance.setServerTeam(teamNumber);
+        ntInstance.startDSClient();
+        broadcastVersion();
     }
 
     private void setServerMode() {
         logger.info("Starting NT Server");
         ntInstance.stopClient();
         ntInstance.startServer();
+        broadcastVersion();
+    }
+
+    // So it seems like if Photon starts before the robot NT server does, and both aren't static IP,
+    // it'll never connect. This hack works around it by restarting the client/server while the nt
+    // instance
+    // isn't connected, same as clicking the save button in the settings menu (or restarting the
+    // service)
+    private void ntTick() {
+        if (!ntInstance.isConnected()
+                && !ConfigManager.getInstance().getConfig().getNetworkConfig().runNTServer) {
+            setConfig(ConfigManager.getInstance().getConfig().getNetworkConfig());
+        }
+
+        if (!ntInstance.isConnected() && !isRetryingConnection) {
+            isRetryingConnection = true;
+            logger.error(
+                    "[NetworkTablesManager] Could not connect to the robot! Will retry in the background...");
+        }
     }
 }

photon-core/src/main/java/org/photonvision/common/dataflow/websocket/UIDataPublisher.java

@@ -17,14 +17,13 @@
 
 package org.photonvision.common.dataflow.websocket;
 
-import com.fasterxml.jackson.core.JsonProcessingException;
 import java.util.ArrayList;
-import java.util.Arrays;
 import java.util.HashMap;
 import org.photonvision.common.dataflow.CVPipelineResultConsumer;
+import org.photonvision.common.dataflow.DataChangeService;
+import org.photonvision.common.dataflow.events.OutgoingUIEvent;
 import org.photonvision.common.logging.LogGroup;
 import org.photonvision.common.logging.Logger;
-import org.photonvision.server.SocketHandler;
 import org.photonvision.vision.pipeline.result.CVPipelineResult;
 
 public class UIDataPublisher implements CVPipelineResultConsumer {
@@ -39,16 +38,17 @@ public class UIDataPublisher implements CVPipelineResultConsumer {
 
     @Override
     public void accept(CVPipelineResult result) {
-        var now = System.currentTimeMillis();
+        long now = System.currentTimeMillis();
+
+        var dataMap = new HashMap<String, Object>();
+        dataMap.put("latency", result.getLatencyMillis());
 
         // only update the UI at 15hz
         if (lastUIResultUpdateTime + 1000.0 / 10.0 > now) return;
 
         var uiMap = new HashMap<Integer, HashMap<String, Object>>();
-        var dataMap = new HashMap<String, Object>();
 
         dataMap.put("fps", result.fps);
-        dataMap.put("latency", result.getLatencyMillis());
 
         var targets = result.targets;
 
@@ -57,18 +57,10 @@ public class UIDataPublisher implements CVPipelineResultConsumer {
             uiTargets.add(t.toHashMap());
         }
         dataMap.put("targets", uiTargets);
-
         uiMap.put(index, dataMap);
-        var retMap = new HashMap<String, Object>();
-        retMap.put("updatePipelineResult", uiMap);
-
-        try {
-            SocketHandler.getInstance().broadcastMessage(retMap, null);
-        } catch (JsonProcessingException e) {
-            logger.error(e.getMessage());
-            logger.error(Arrays.toString(e.getStackTrace()));
-        }
 
+        DataChangeService.getInstance()
+                .publishEvent(OutgoingUIEvent.wrappedOf("updatePipelineResult", uiMap));
         lastUIResultUpdateTime = now;
     }
 }

photon-core/src/main/java/org/photonvision/common/hardware/GPIO/CustomGPIO.java

@@ -21,7 +21,6 @@ import org.photonvision.common.configuration.HardwareConfig;
 import org.photonvision.common.hardware.Platform;
 
 public class CustomGPIO extends GPIOBase {
-
     private boolean currentState;
     private final int port;
 

photon-core/src/main/java/org/photonvision/common/hardware/GPIO/pi/PigpioException.java

@@ -20,14 +20,13 @@ package org.photonvision.common.hardware.GPIO.pi;
 import java.util.HashMap;
 
 /**
-* A class that defines the exceptions that can be thrown by Pigpio.
-*
-* <p>Credit to nkolban
-* https://github.com/nkolban/jpigpio/blob/master/JPigpio/src/jpigpio/PigpioException.java
-*/
+ * A class that defines the exceptions that can be thrown by Pigpio.
+ *
+ * <p>Credit to nkolban
+ * https://github.com/nkolban/jpigpio/blob/master/JPigpio/src/jpigpio/PigpioException.java
+ */
 @SuppressWarnings({"SpellCheckingInspection", "unused", "RedundantSuppression"})
 public class PigpioException extends Exception {
-
     private int rc = -99999999;
     private static final long serialVersionUID = 443595760654129068L;
 
@@ -67,10 +66,10 @@ public class PigpioException extends Exception {
     }
 
     /**
-    * Retrieve the error code that was returned by the underlying Pigpio call.
-    *
-    * @return The error code that was returned by the underlying Pigpio call.
-    */
+     * Retrieve the error code that was returned by the underlying Pigpio call.
+     *
+     * @return The error code that was returned by the underlying Pigpio call.
+     */
     public int getErrorCode() {
         return rc;
     } // End of getErrorCode

photon-core/src/main/java/org/photonvision/common/hardware/GPIO/pi/PigpioPin.java

@@ -24,7 +24,6 @@ import org.photonvision.common.logging.LogGroup;
 import org.photonvision.common.logging.Logger;
 
 public class PigpioPin extends GPIOBase {
-
     public static final Logger logger = new Logger(PigpioPin.class, LogGroup.General);
     private static final PigpioSocket piSocket = new PigpioSocket();
 

photon-core/src/main/java/org/photonvision/common/hardware/GPIO/pi/PigpioPulse.java

@@ -23,14 +23,14 @@ public class PigpioPulse {
     int delayMicros;
 
     /**
-    * Initialises a pulse.
-    *
-    * @param gpioOn GPIO number to switch on at the start of the pulse. If zero, then no GPIO will be
-    *     switched on.
-    * @param gpioOff GPIO number to switch off at the start of the pulse. If zero, then no GPIO will
-    *     be switched off.
-    * @param delayMicros the delay in microseconds before the next pulse.
-    */
+     * Initialises a pulse.
+     *
+     * @param gpioOn GPIO number to switch on at the start of the pulse. If zero, then no GPIO will be
+     *     switched on.
+     * @param gpioOff GPIO number to switch off at the start of the pulse. If zero, then no GPIO will
+     *     be switched off.
+     * @param delayMicros the delay in microseconds before the next pulse.
+     */
     public PigpioPulse(int gpioOn, int gpioOff, int delayMicros) {
         this.gpioOn = gpioOn != 0 ? 1 << gpioOn : 0;
         this.gpioOff = gpioOff != 0 ? 1 << gpioOff : 0;

photon-core/src/main/java/org/photonvision/common/hardware/GPIO/pi/PigpioSocket.java

@@ -41,12 +41,12 @@ public class PigpioSocket {
     }
 
     /**
-    * Creates and starts a socket connection to a pigpio daemon on a remote host with the specified
-    * address and port
-    *
-    * @param addr Address of remote pigpio daemon
-    * @param port Port of remote pigpio daemon
-    */
+     * Creates and starts a socket connection to a pigpio daemon on a remote host with the specified
+     * address and port
+     *
+     * @param addr Address of remote pigpio daemon
+     * @param port Port of remote pigpio daemon
+     */
     public PigpioSocket(String addr, int port) {
         try {
             commandSocket = new PigpioSocketLock(addr, port);
@@ -56,10 +56,10 @@ public class PigpioSocket {
     }
 
     /**
-    * Reconnects to the pigpio daemon
-    *
-    * @throws PigpioException on failure
-    */
+     * Reconnects to the pigpio daemon
+     *
+     * @throws PigpioException on failure
+     */
     public void reconnect() throws PigpioException {
         try {
             commandSocket.reconnect();
@@ -70,10 +70,10 @@ public class PigpioSocket {
     }
 
     /**
-    * Terminates the connection to the pigpio daemon
-    *
-    * @throws PigpioException on failure
-    */
+     * Terminates the connection to the pigpio daemon
+     *
+     * @throws PigpioException on failure
+     */
     public void gpioTerminate() throws PigpioException {
         try {
             commandSocket.terminate();
@@ -84,12 +84,12 @@ public class PigpioSocket {
     }
 
     /**
-    * Read the GPIO level
-    *
-    * @param pin Pin to read from
-    * @return Value of the pin
-    * @throws PigpioException on failure
-    */
+     * Read the GPIO level
+     *
+     * @param pin Pin to read from
+     * @return Value of the pin
+     * @throws PigpioException on failure
+     */
     public boolean gpioRead(int pin) throws PigpioException {
         try {
             int retCode = commandSocket.sendCmd(PigpioCommand.PCMD_READ.value, pin);
@@ -102,12 +102,12 @@ public class PigpioSocket {
     }
 
     /**
-    * Write the GPIO level
-    *
-    * @param pin Pin to write to
-    * @param value Value to write
-    * @throws PigpioException on failure
-    */
+     * Write the GPIO level
+     *
+     * @param pin Pin to write to
+     * @param value Value to write
+     * @throws PigpioException on failure
+     */
     public void gpioWrite(int pin, boolean value) throws PigpioException {
         try {
             int retCode = commandSocket.sendCmd(PigpioCommand.PCMD_WRITE.value, pin, value ? 1 : 0);
@@ -119,10 +119,10 @@ public class PigpioSocket {
     }
 
     /**
-    * Clears all waveforms and any data added by calls to {@link #waveAddGeneric(ArrayList)}
-    *
-    * @throws PigpioException on failure
-    */
+     * Clears all waveforms and any data added by calls to {@link #waveAddGeneric(ArrayList)}
+     *
+     * @throws PigpioException on failure
+     */
     public void waveClear() throws PigpioException {
         try {
             int retCode = commandSocket.sendCmd(PigpioCommand.PCMD_WVCLR.value);
@@ -134,12 +134,12 @@ public class PigpioSocket {
     }
 
     /**
-    * Adds a number of pulses to the current waveform
-    *
-    * @param pulses ArrayList of pulses to add
-    * @return the new total number of pulses in the current waveform
-    * @throws PigpioException on failure
-    */
+     * Adds a number of pulses to the current waveform
+     *
+     * @param pulses ArrayList of pulses to add
+     * @return the new total number of pulses in the current waveform
+     * @throws PigpioException on failure
+     */
     private int waveAddGeneric(ArrayList<PigpioPulse> pulses) throws PigpioException {
         // pigpio wave message format
 
@@ -175,12 +175,12 @@ public class PigpioSocket {
     }
 
     /**
-    * Creates pulses and adds them to the current waveform
-    *
-    * @param pulseTimeMillis Pulse length in milliseconds
-    * @param blinks Number of times to pulse. -1 for repeat
-    * @param pinNo Pin to pulse
-    */
+     * Creates pulses and adds them to the current waveform
+     *
+     * @param pulseTimeMillis Pulse length in milliseconds
+     * @param blinks Number of times to pulse. -1 for repeat
+     * @param pinNo Pin to pulse
+     */
     private void addBlinkPulsesToWaveform(int pulseTimeMillis, int blinks, int pinNo) {
         boolean repeat = blinks == -1;
 
@@ -208,13 +208,13 @@ public class PigpioSocket {
     }
 
     /**
-    * Generates and sends a waveform to the given pins with the specified parameters.
-    *
-    * @param pulseTimeMillis Pulse length in milliseconds
-    * @param blinks Number of times to pulse. -1 for repeat
-    * @param pins Pins to pulse
-    * @throws PigpioException on failure
-    */
+     * Generates and sends a waveform to the given pins with the specified parameters.
+     *
+     * @param pulseTimeMillis Pulse length in milliseconds
+     * @param blinks Number of times to pulse. -1 for repeat
+     * @param pins Pins to pulse
+     * @throws PigpioException on failure
+     */
     public void generateAndSendWaveform(int pulseTimeMillis, int blinks, int... pins)
             throws PigpioException {
         if (pins.length == 0) return;
@@ -263,11 +263,11 @@ public class PigpioSocket {
     }
 
     /**
-    * Stops the transmission of the current waveform
-    *
-    * @return success
-    * @throws PigpioException on failure
-    */
+     * Stops the transmission of the current waveform
+     *
+     * @return success
+     * @throws PigpioException on failure
+     */
     public boolean waveTxStop() throws PigpioException {
         try {
             int retCode = commandSocket.sendCmd(PigpioCommand.PCMD_WVHLT.value);
@@ -280,12 +280,12 @@ public class PigpioSocket {
     }
 
     /**
-    * Creates a waveform from the data provided by the prior calls to {@link
-    * #waveAddGeneric(ArrayList)} Upon success a wave ID greater than or equal to 0 is returned
-    *
-    * @return ID of the created waveform
-    * @throws PigpioException on failure
-    */
+     * Creates a waveform from the data provided by the prior calls to {@link
+     * #waveAddGeneric(ArrayList)} Upon success a wave ID greater than or equal to 0 is returned
+     *
+     * @return ID of the created waveform
+     * @throws PigpioException on failure
+     */
     public int waveCreate() throws PigpioException {
         try {
             int retCode = commandSocket.sendCmd(PigpioCommand.PCMD_WVCRE.value);
@@ -298,11 +298,11 @@ public class PigpioSocket {
     }
 
     /**
-    * Deletes the waveform with specified wave ID
-    *
-    * @param waveId ID of the waveform to delete
-    * @throws PigpioException on failure
-    */
+     * Deletes the waveform with specified wave ID
+     *
+     * @param waveId ID of the waveform to delete
+     * @throws PigpioException on failure
+     */
     public void waveDelete(int waveId) throws PigpioException {
         try {
             int retCode = commandSocket.sendCmd(PigpioCommand.PCMD_WVDEL.value, waveId);
@@ -314,12 +314,12 @@ public class PigpioSocket {
     }
 
     /**
-    * Transmits the waveform with specified wave ID. The waveform is sent once
-    *
-    * @param waveId ID of the waveform to transmit
-    * @return The number of DMA control blocks in the waveform
-    * @throws PigpioException on failure
-    */
+     * Transmits the waveform with specified wave ID. The waveform is sent once
+     *
+     * @param waveId ID of the waveform to transmit
+     * @return The number of DMA control blocks in the waveform
+     * @throws PigpioException on failure
+     */
     public int waveSendOnce(int waveId) throws PigpioException {
         try {
             int retCode = commandSocket.sendCmd(PigpioCommand.PCMD_WVTX.value, waveId);
@@ -331,13 +331,13 @@ public class PigpioSocket {
     }
 
     /**
-    * Transmits the waveform with specified wave ID. The waveform cycles until cancelled (either by
-    * the sending of a new waveform or {@link #waveTxStop()}
-    *
-    * @param waveId ID of the waveform to transmit
-    * @return The number of DMA control blocks in the waveform
-    * @throws PigpioException on failure
-    */
+     * Transmits the waveform with specified wave ID. The waveform cycles until cancelled (either by
+     * the sending of a new waveform or {@link #waveTxStop()}
+     *
+     * @param waveId ID of the waveform to transmit
+     * @return The number of DMA control blocks in the waveform
+     * @throws PigpioException on failure
+     */
     public int waveSendRepeat(int waveId) throws PigpioException {
         try {
             int retCode = commandSocket.sendCmd(PigpioCommand.PCMD_WVTXR.value, waveId);
@@ -349,14 +349,14 @@ public class PigpioSocket {
     }
 
     /**
-    * Starts hardware PWM on a GPIO at the specified frequency and dutycycle
-    *
-    * @param pin GPIO pin to start PWM on
-    * @param pwmFrequency Frequency to run at (1Hz-125MHz). Frequencies above 30MHz are unlikely to
-    *     work
-    * @param pwmDuty Duty cycle to run at (0-1,000,000)
-    * @throws PigpioException on failure
-    */
+     * Starts hardware PWM on a GPIO at the specified frequency and dutycycle
+     *
+     * @param pin GPIO pin to start PWM on
+     * @param pwmFrequency Frequency to run at (1Hz-125MHz). Frequencies above 30MHz are unlikely to
+     *     work
+     * @param pwmDuty Duty cycle to run at (0-1,000,000)
+     * @throws PigpioException on failure
+     */
     public void hardwarePWM(int pin, int pwmFrequency, int pwmDuty) throws PigpioException {
         try {
             ByteBuffer bb = ByteBuffer.allocate(4);