Better tracker velocity display (SlimeVR#530)

Links2004 · Jan 29, 2023 · 1c4b2f4 · 1c4b2f4
1 parent 5437f20
commit 1c4b2f4
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 27 deletions.
diff --git a/gui/src/components/tracker/TrackerCard.tsx b/gui/src/components/tracker/TrackerCard.tsx
@@ -133,15 +133,17 @@ export function TrackerCard({
     <div
       onClick={onClick}
       className={classNames(
-        'rounded-lg',
+        'rounded-lg overflow-hidden',
         interactable && 'hover:bg-background-50 cursor-pointer',
         outlined && 'outline outline-2 outline-accent-background-40',
         bg
       )}
       style={
         shakeHighlight
           ? {
-              boxShadow: `0px 0px ${velocity * 8}px ${velocity * 8}px #183951`,
+              boxShadow: `0px 0px ${Math.floor(velocity * 8)}px ${Math.floor(
+                velocity * 8
+              )}px #BB8AE5`,
             }
           : {}
       }

diff --git a/gui/src/components/tracker/TrackerPartCard.tsx b/gui/src/components/tracker/TrackerPartCard.tsx
@@ -55,7 +55,10 @@ export function TrackerPartCard({
   };
 
   const globalVelocity = useMemo(
-    () => velocities.reduce((curr, v) => curr + v, 0) / (td?.length || 1),
+    () =>
+      Math.floor(
+        velocities.reduce((curr, v) => curr + v, 0) / (td?.length || 1)
+      ),
     [velocities, td]
   );
 
@@ -76,7 +79,7 @@ export function TrackerPartCard({
         style={{
           boxShadow: `0px 0px ${globalVelocity * 3}px ${
             globalVelocity * 3
-          }px #183951`,
+          }px  #BB8AE5`,
         }}
       >
         <Typography color="secondary">

diff --git a/gui/src/components/tracker/TrackersTable.tsx b/gui/src/components/tracker/TrackersTable.tsx
@@ -132,7 +132,9 @@ export function RowContainer({
         onMouseEnter={onMouseOver}
         onMouseLeave={onMouseOut}
         style={{
-          boxShadow: `0px 0px ${velocity * 8}px ${velocity * 8}px #183951`,
+          boxShadow: `0px 0px ${Math.floor(velocity * 8)}px ${Math.floor(
+            velocity * 8
+          )}px  #BB8AE5`,
         }}
         className={classNames(
           'min-h-[50px]  flex flex-col justify-center px-3',

diff --git a/gui/src/hooks/tracker.ts b/gui/src/hooks/tracker.ts
@@ -1,9 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { BodyPart, TrackerDataT, TrackerStatus } from 'solarxr-protocol';
-import {
-  QuaternionFromQuatT,
-  QuaternionToEulerDegrees,
-} from '../maths/quaternion';
+import { QuaternionFromQuatT, QuaternionToEulerDegrees } from '../maths/quaternion';
 import { useAppContext } from './app';
 import { useLocalization } from '@fluent/react';
 import { useDataFeedConfig } from './datafeed-config';
@@ -18,17 +15,13 @@ export function useTrackers() {
     useAssignedTrackers: () =>
       useMemo(
         () =>
-          trackers.filter(
-            ({ tracker }) => tracker.info?.bodyPart !== BodyPart.NONE
-          ),
+          trackers.filter(({ tracker }) => tracker.info?.bodyPart !== BodyPart.NONE),
         [trackers]
       ),
     useUnassignedTrackers: () =>
       useMemo(
         () =>
-          trackers.filter(
-            ({ tracker }) => tracker.info?.bodyPart === BodyPart.NONE
-          ),
+          trackers.filter(({ tracker }) => tracker.info?.bodyPart === BodyPart.NONE),
         [trackers]
       ),
     useConnectedTrackers: () =>
@@ -51,16 +44,11 @@ export function useTracker(tracker: TrackerDataT) {
       useMemo(() => {
         if (tracker.info?.customName) return tracker.info?.customName;
         if (tracker.info?.bodyPart)
-          return l10n.getString(
-            'body_part-' + BodyPart[tracker.info?.bodyPart]
-          );
+          return l10n.getString('body_part-' + BodyPart[tracker.info?.bodyPart]);
         return tracker.info?.displayName || 'NONE';
       }, [tracker.info]),
     useRawRotationEulerDegrees: () =>
-      useMemo(
-        () => QuaternionToEulerDegrees(tracker?.rotation),
-        [tracker.rotation]
-      ),
+      useMemo(() => QuaternionToEulerDegrees(tracker?.rotation), [tracker.rotation]),
     useRefAdjRotationEulerDegrees: () =>
       useMemo(
         () => QuaternionToEulerDegrees(tracker?.rotationReferenceAdjusted),
@@ -72,9 +60,7 @@ export function useTracker(tracker: TrackerDataT) {
         [tracker.rotationIdentityAdjusted]
       ),
     useVelocity: () => {
-      const previousRot = useRef<Quaternion>(
-        QuaternionFromQuatT(tracker.rotation)
-      );
+      const previousRot = useRef<Quaternion>(QuaternionFromQuatT(tracker.rotation));
       const previousAcc = useRef<Vector3>(
         Vector3FromVec3fT(tracker.linearAcceleration)
       );
@@ -91,12 +77,12 @@ export function useTracker(tracker: TrackerDataT) {
           );
           const dif = Math.min(
             1,
-            (rot.x ** 2 + rot.y ** 2 + rot.z ** 2) * 2.5 +
+            (rot.x ** 2 + rot.y ** 2 + rot.z ** 2) * 50 +
               (acc.x ** 2 + acc.y ** 2 + acc.z ** 2) / 1000
           );
           // Use sum of the rotation and acceleration delta vector lengths over 0.3sec
           // for smoother movement and better detection of slow movement.
-          if (deltas.length >= 0.3 * feedMaxTps) {
+          if (deltas.length >= 0.5 * feedMaxTps) {
             deltas.shift();
           }
           deltas.push(dif);