Add tracker graph to tracker settings page

Author: gorbit99

gui/package.json

@@ -26,13 +26,15 @@
     "@tweenjs/tween.js": "^25.0.0",
     "@twemoji/svg": "^15.0.0",
     "browser-fs-access": "^0.35.0",
+    "chart.js": "^4.5.0",
     "classnames": "^2.5.1",
     "flatbuffers": "22.10.26",
     "intl-pluralrules": "^2.0.1",
     "ip-num": "^1.5.1",
     "jotai": "^2.12.2",
     "prompts": "^2.4.2",
     "react": "^18.3.1",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",

gui/public/i18n/en/translation.ftl

@@ -390,6 +390,10 @@ tracker-settings-update-blocked = Update not available. No other releases availa
 tracker-settings-update-available = { $versionName } is now available
 tracker-settings-update = Update now
 tracker-settings-update-title = Firmware version
+tracker-settings-graph-acceleration-title = Tracker Acceleration
+tracker-settings-graph-position-title = Tracker Position
+tracker-settings-graph-show-title = Show Tracker Graph
+tracker-settings-graph-hide-title = Hide Tracker Graph
 
 ## Tracker part card info
 tracker-part_card-no_name = No name

gui/src/App.tsx

@@ -61,6 +61,16 @@ import { FirmwareUpdate } from './components/firmware-update/FirmwareUpdate';
 import { ConnectionLost } from './components/onboarding/pages/ConnectionLost';
 import { VRCWarningsPage } from './components/vrc/VRCWarningsPage';
 import { StayAlignedSetup } from './components/onboarding/pages/stay-aligned/StayAlignedSetup';
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+} from 'chart.js';
 
 export const GH_REPO = 'SlimeVR/SlimeVR-Server';
 export const VersionContext = createContext('');
@@ -73,6 +83,16 @@ function Layout() {
   const { isMobile } = useBreakpoint('mobile');
   useDiscordPresence();
 
+  ChartJS.register(
+    Title,
+    Tooltip,
+    Legend,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement
+  );
+
   return (
     <>
       <SerialDetectionModal></SerialDetectionModal>

gui/src/components/tracker/TrackerGraph.tsx

@@ -0,0 +1,158 @@
+import { useLocalization } from '@fluent/react';
+import { useEffect, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+import { TrackerDataT } from 'solarxr-protocol';
+import { Button } from '@/components/commons/Button';
+
+export function TrackerGraph({ tracker }: { tracker: TrackerDataT }) {
+  const { l10n } = useLocalization();
+
+  type AxisData = {
+    x: number;
+    y: number;
+    time: number;
+  };
+
+  type ChartData = {
+    x: AxisData[];
+    y: AxisData[];
+    z: AxisData[];
+  };
+
+  const [chartData, setChartData] = useState<ChartData>({
+    x: [],
+    y: [],
+    z: [],
+  });
+
+  const [showTrackerGraph, setShowTrackerGraph] = useState(false);
+
+  const secondDuration = 60;
+
+  useEffect(() => {
+    if (!showTrackerGraph) {
+      return;
+    }
+
+    const newValue = tracker.info?.isImu
+      ? tracker.linearAcceleration
+      : tracker.position;
+    if (!newValue) {
+      return;
+    }
+
+    const currentTime = new Date().getTime() / 1000;
+    const startTime = currentTime - secondDuration;
+
+    const updateData = (data: AxisData[], newSample: number) => {
+      const remapped = data
+        .filter((value) => value.time >= startTime)
+        .map((value) => ({ ...value, x: value.time - startTime }));
+      remapped.push({
+        time: currentTime,
+        x: secondDuration,
+        y: newSample,
+      });
+      return remapped;
+    };
+
+    const newData = {
+      x: updateData(chartData.x, newValue.x),
+      y: updateData(chartData.y, newValue.y),
+      z: updateData(chartData.z, newValue.z),
+    };
+    setChartData(newData);
+  }, [tracker]);
+
+  useEffect(() => {
+    if (!showTrackerGraph) {
+      setChartData({ x: [], y: [], z: [] });
+    }
+  }, [showTrackerGraph]);
+
+  const options = {
+    responsive: true,
+    animation: false,
+    plugins: {
+      title: {
+        display: true,
+        text: l10n.getString(
+          tracker?.info?.isImu
+            ? 'tracker-settings-graph-acceleration-title'
+            : 'tracker-settings-graph-position-title'
+        ),
+      },
+      tooltip: {
+        mode: 'index',
+        intersect: false,
+        animation: false,
+        callbacks: {
+          title: () => '',
+        },
+      },
+    },
+    scales: {
+      x: {
+        type: 'linear',
+        min: 0,
+        max: secondDuration,
+      },
+      y: {
+        min: -4,
+        max: 4,
+      },
+    },
+    elements: {
+      point: {
+        radius: 0,
+      },
+    },
+    parsing: false,
+    normalized: true,
+  } as const;
+
+  return (
+    <>
+      <Button
+        variant="tertiary"
+        className="self-start"
+        onClick={() => setShowTrackerGraph(!showTrackerGraph)}
+      >
+        {l10n.getString(
+          showTrackerGraph
+            ? 'tracker-settings-graph-hide-title'
+            : 'tracker-settings-graph-show-title'
+        )}
+      </Button>
+      {showTrackerGraph && (
+        <Line
+          options={options}
+          data={{
+            labels: ['X', 'Y', 'Z'],
+            datasets: [
+              {
+                label: 'X',
+                data: chartData.x,
+                borderColor: 'rgb(200, 50, 50)',
+                backgroundColor: 'rgb(200, 100, 100)',
+              },
+              {
+                label: 'Y',
+                data: chartData.y,
+                borderColor: 'rgb(50, 200, 50)',
+                backgroundColor: 'rgb(100, 200, 100)',
+              },
+              {
+                label: 'Z',
+                data: chartData.z,
+                borderColor: 'rgb(50, 50, 200)',
+                backgroundColor: 'rgb(100, 100, 200)',
+              },
+            ],
+          }}
+          id="tracker-graph"
+        />
+      )}
+    </>
+  );
+}

gui/src/components/tracker/TrackerSettings.tsx

@@ -40,6 +40,8 @@ import semver from 'semver';
 import { useSetAtom } from 'jotai';
 import { ignoredTrackersAtom } from '@/store/app-store';
 import { checkForUpdate } from '@/hooks/firmware-update';
+import { TrackerGraph } from './TrackerGraph';
+import { useConfig } from '@/hooks/config';
 
 const rotationsLabels: [Quaternion, string][] = [
   [rotationToQuatMap.BACK, 'tracker-rotation-back'],
@@ -75,6 +77,8 @@ export function TrackerSettingsPage() {
 
   const tracker = useTrackerFromId(trackernum, deviceid);
 
+  const { config } = useConfig();
+
   const onDirectionSelected = (mountingOrientationDegrees: Quaternion) => {
     if (!tracker) return;
 
@@ -505,6 +509,9 @@ export function TrackerSettingsPage() {
               </Button>
             </div>
           )}
+          {config?.debug && tracker && (
+            <TrackerGraph tracker={tracker.tracker} />
+          )}
         </div>
       </div>
     </form>