Expand skeleton height config (#1156)

Co-authored-by: Uriel <imurx@proton.me>

Author: ButterscotchV

gui/public/i18n/en/translation.ftl

@@ -122,6 +122,10 @@ reset-reset_all_warning =
     Are you sure you want to do this?
 reset-reset_all_warning-reset = Reset proportions
 reset-reset_all_warning-cancel = Cancel
+reset-reset_all_warning_default =
+    <b>Warning:</b> You currently don't have your height defined, which
+    will make the proportions be based on a default height.
+    Are you sure you want to do this?
 
 reset-full = Full Reset
 reset-mounting = Reset Mounting
@@ -962,6 +966,15 @@ onboarding-choose_proportions-manual_proportions = Manual proportions
 # Italicized text
 onboarding-choose_proportions-manual_proportions-subtitle = For small touches
 onboarding-choose_proportions-manual_proportions-description = This will let you adjust your proportions manually by modifying them directly
+onboarding-choose_proportions-scaled_proportions = Scaled proportions
+# Italized text
+onboarding-choose_proportions-scaled_proportions-subtitle = Recommended for new users
+# Multiline string
+onboarding-choose_proportions-scaled_proportions-description =
+    This will scale the proportions of an average human body based on your height, this will help for basic full-body tracking.
+
+    <b>This requires having your headset (HMD) connected to SlimeVR and on your head!</b>
+onboarding-choose_proportions-scaled_proportions-button = Scaled proportions
 onboarding-choose_proportions-export = Export proportions
 onboarding-choose_proportions-import = Import proportions
 onboarding-choose_proportions-import-success = Imported
@@ -981,9 +994,11 @@ onboarding-automatic_proportions-title = Measure your body
 onboarding-automatic_proportions-description = For SlimeVR trackers to work, we need to know the length of your bones. This short calibration will measure it for you.
 onboarding-automatic_proportions-manual = Manual proportions
 onboarding-automatic_proportions-prev_step = Previous step
+
 onboarding-automatic_proportions-put_trackers_on-title = Put on your trackers
 onboarding-automatic_proportions-put_trackers_on-description = To calibrate your proportions, we're gonna use the trackers you just assigned. Put on all your trackers, you can see which are which in the figure to the right.
 onboarding-automatic_proportions-put_trackers_on-next = I have all my trackers on
+
 onboarding-automatic_proportions-requirements-title = Requirements
 # Each line of text is a different list item
 onboarding-automatic_proportions-requirements-descriptionv2 =
@@ -993,23 +1008,38 @@ onboarding-automatic_proportions-requirements-descriptionv2 =
     Your headset is reporting positional data to the SlimeVR server (this generally means having SteamVR running and connected to SlimeVR using SlimeVR's SteamVR driver).
     Your tracking is working and is accurately representing your movements (ex. you have performed a full reset and they move the right direction when kicking, bending over, sitting, etc).
 onboarding-automatic_proportions-requirements-next = I have read the requirements
-onboarding-automatic_proportions-check_height-title = Check your height
-onboarding-automatic_proportions-check_height-description = We use your height as a basis of our measurements by using the headset's (HMD) height as an approximation of your actual height, but it's better to check if they are right yourself!
+
+onboarding-automatic_proportions-check_height-title-v2 = Measure your height
+onboarding-automatic_proportions-check_height-description-v2 = Your headset (HMD) height should be slightly less than your full height, as headsets measure your eye height. This measurement will be used as a baseline for your body proportions.
 # All the text is in bold!
-onboarding-automatic_proportions-check_height-calculation_warning = Please press the button while standing <u>upright</u> to calculate your height. You have 3 seconds after you press the button!
+onboarding-automatic_proportions-check_height-calculation_warning-v2 = Start measuring while standing <u>upright</u> to calculate your height. Be careful to not raise your hands higher than your headset, as they may affect the measurement!
 onboarding-automatic_proportions-check_height-guardian_tip = If you are using a standalone VR headset, make sure to have your guardian /
     boundary turned on so that your height is correct!
-onboarding-automatic_proportions-check_height-fetch_height = I'm standing!
 # Context is that the height is unknown
 onboarding-automatic_proportions-check_height-unknown = Unknown
 # Shows an element below it
-onboarding-automatic_proportions-check_height-hmd_height1 = Your HMD height is
+onboarding-automatic_proportions-check_height-hmd_height2 = Your headset height is:
+onboarding-automatic_proportions-check_height-measure-start = Start measuring
+onboarding-automatic_proportions-check_height-measure-stop = Stop measuring
+onboarding-automatic_proportions-check_height-measure-reset = Retry measuring
+onboarding-automatic_proportions-check_height-next_step = Use headset height
+
+onboarding-automatic_proportions-check_floor_height-title = Measure your floor height (optional)
+onboarding-automatic_proportions-check_floor_height-description = In some cases, your floor height may not be set correctly by your headset, causing the headset height to be measured as higher than it should be. You can measure the "height" of your floor to correct your headset height.
+# All the text is in bold!
+onboarding-automatic_proportions-check_floor_height-calculation_warning = If you are sure that your floor height is correct, you can skip this step.
 # Shows an element below it
-onboarding-automatic_proportions-check_height-height1 = so your actual height is
-onboarding-automatic_proportions-check_height-next_step = They are fine
+onboarding-automatic_proportions-check_floor_height-floor_height = Your floor height is:
+onboarding-automatic_proportions-check_floor_height-measure-start = Start measuring
+onboarding-automatic_proportions-check_floor_height-measure-stop = Stop measuring
+onboarding-automatic_proportions-check_floor_height-measure-reset = Retry measuring
+onboarding-automatic_proportions-check_floor_height-skip_step = Skip step and save
+onboarding-automatic_proportions-check_floor_height-next_step = Use floor height and save
+
 onboarding-automatic_proportions-start_recording-title = Get ready to move
 onboarding-automatic_proportions-start_recording-description = We're now going to record some specific poses and moves. These will be prompted in the next screen. Be ready to start when the button is pressed!
 onboarding-automatic_proportions-start_recording-next = Start Recording
+
 onboarding-automatic_proportions-recording-title = REC
 onboarding-automatic_proportions-recording-description-p0 = Recording in progress...
 onboarding-automatic_proportions-recording-description-p1 = Make the moves shown below:
@@ -1027,12 +1057,14 @@ onboarding-automatic_proportions-recording-timer = { $time ->
     [one] 1 second left
     *[other] { $time } seconds left
 }
+
 onboarding-automatic_proportions-verify_results-title = Verify results
 onboarding-automatic_proportions-verify_results-description = Check the results below, do they look correct?
 onboarding-automatic_proportions-verify_results-results = Recording results
 onboarding-automatic_proportions-verify_results-processing = Processing the result
 onboarding-automatic_proportions-verify_results-redo = Redo recording
 onboarding-automatic_proportions-verify_results-confirm = They're correct
+
 onboarding-automatic_proportions-done-title = Body measured and saved.
 onboarding-automatic_proportions-done-description = Your body proportions' calibration is complete!
 onboarding-automatic_proportions-error_modal-v2 =
@@ -1041,6 +1073,26 @@ onboarding-automatic_proportions-error_modal-v2 =
     Please <docs>check the docs</docs> or join our <discord>Discord</discord> for help ^_^
 onboarding-automatic_proportions-error_modal-confirm = Understood!
 
+onboarding-automatic_proportions-smol_warning =
+    Your configured height of { $height } is smaller than the minimum accepted height of { $minHeight }.
+    <b>Please redo the measurements and ensure they are correct.</b>
+onboarding-automatic_proportions-smol_warning-cancel = Go back
+
+## Tracker scaled proportions setup
+onboarding-scaled_proportions-title = Scaled proportions
+onboarding-scaled_proportions-description = For SlimeVR trackers to work, we need to know the length of your bones. This will use an average proportion and scale it based on your height.
+onboarding-scaled_proportions-manual_height-title = Configure your height
+onboarding-scaled_proportions-manual_height-description = Your headset (HMD) height should be slightly less than your full height, as headsets measure your eye height. This height will be used as a baseline for your body proportions.
+onboarding-scaled_proportions-manual_height-missing_steamvr = SteamVR is not currently connected to SlimeVR, so measurements can't be based on your headset. <b>Proceed at your own risk or check the docs!</b>
+onboarding-scaled_proportions-manual_height-height = Your headset height is
+onboarding-scaled_proportions-manual_height-next_step = Continue and save
+
+## Tracker scaled proportions reset
+onboarding-scaled_proportions-reset_proportion-title = Reset your body proportions
+onboarding-scaled_proportions-reset_proportion-description = To set your body proportions based on your height, you need to now reset all of your proportions. This will clear any proportions you have configured and provide a baseline configuration.
+onboarding-scaled_proportions-done-title = Body proportions set
+onboarding-scaled_proportions-done-description = Your body proportions should now be configured based on your height.
+
 ## Home
 home-no_trackers = No trackers detected or assigned
 

gui/src/App.tsx

@@ -56,6 +56,7 @@ import { AppLayout } from './AppLayout';
 import { Preload } from './components/Preload';
 import { UnknownDeviceModal } from './components/UnknownDeviceModal';
 import { useDiscordPresence } from './hooks/discord-presence';
+import { ScaledProportionsPage } from './components/onboarding/pages/body-proportions/ScaledProportions';
 import { EmptyLayout } from './components/EmptyLayout';
 import { AdvancedSettings } from './components/settings/pages/AdvancedSettings';
 import { FirmwareUpdate } from './components/firmware-update/FirmwareUpdate';
@@ -162,6 +163,10 @@ function Layout() {
               path="body-proportions/manual"
               element={<ManualProportionsPage />}
             />
+            <Route
+              path="body-proportions/scaled"
+              element={<ScaledProportionsPage />}
+            />
             <Route path="done" element={<DonePage />} />
           </Route>
           <Route path="*" element={<TopBar></TopBar>}></Route>

gui/src/components/commons/NumberSelector.tsx

@@ -1,6 +1,8 @@
 import { Control, Controller } from 'react-hook-form';
 import { Button } from './Button';
 import { Typography } from './Typography';
+import { useCallback, useMemo } from 'react';
+import { useLocaleConfig } from '@/i18n/config';
 
 export function NumberSelector({
   label,
@@ -10,7 +12,9 @@ export function NumberSelector({
   min,
   max,
   step,
+  doubleStep,
   disabled = false,
+  showButtonWithNumber = false,
 }: {
   label?: string;
   valueLabelFormat?: (value: number) => string;
@@ -19,14 +23,36 @@ export function NumberSelector({
   min: number;
   max: number;
   step: number | ((value: number, add: boolean) => number);
+  doubleStep?: number;
   disabled?: boolean;
+  showButtonWithNumber?: boolean;
 }) {
+  const { currentLocales } = useLocaleConfig();
+
   const stepFn =
     typeof step === 'function'
       ? step
       : (value: number, add: boolean) =>
           +(add ? value + step : value - step).toFixed(2);
 
+  const doubleStepFn = useCallback(
+    (value: number, add: boolean) =>
+      doubleStep === undefined
+        ? 0
+        : +(add ? value + doubleStep : value - doubleStep).toFixed(2),
+    [doubleStep]
+  );
+
+  const decimalFormat = useMemo(
+    () =>
+      new Intl.NumberFormat(currentLocales, {
+        style: 'decimal',
+        maximumFractionDigits: 2,
+        signDisplay: 'exceptZero',
+      }),
+    [currentLocales]
+  );
+
   return (
     <Controller
       control={control}
@@ -35,7 +61,19 @@ export function NumberSelector({
         <div className="flex flex-col gap-1 w-full">
           <Typography bold>{label}</Typography>
           <div className="flex gap-5 bg-background-60 p-2 rounded-lg">
-            <div className="flex">
+            <div className="flex gap-1">
+              {doubleStep !== undefined && (
+                <Button
+                  variant="tertiary"
+                  rounded
+                  onClick={() => onChange(doubleStepFn(value, false))}
+                  disabled={doubleStepFn(value, false) < min || disabled}
+                >
+                  {showButtonWithNumber
+                    ? decimalFormat.format(-doubleStep)
+                    : '--'}
+                </Button>
+              )}
               <Button
                 variant="tertiary"
                 rounded
@@ -48,7 +86,7 @@ export function NumberSelector({
             <div className="flex flex-grow justify-center items-center w-10 text-standard">
               {valueLabelFormat ? valueLabelFormat(value) : value}
             </div>
-            <div className="flex">
+            <div className="flex gap-1">
               <Button
                 variant="tertiary"
                 rounded
@@ -57,6 +95,18 @@ export function NumberSelector({
               >
                 +
               </Button>
+              {doubleStep !== undefined && (
+                <Button
+                  variant="tertiary"
+                  rounded
+                  onClick={() => onChange(doubleStepFn(value, true))}
+                  disabled={doubleStepFn(value, true) > max || disabled}
+                >
+                  {showButtonWithNumber
+                    ? decimalFormat.format(doubleStep)
+                    : '++'}
+                </Button>
+              )}
             </div>
           </div>
         </div>

gui/src/components/onboarding/StepperSlider.tsx

@@ -94,30 +94,42 @@ export function StepDot({
 export function StepperSlider({
   variant,
   steps,
+  back,
+  forward,
 }: {
   variant: 'alone' | 'onboarding';
   steps: Step[];
+  /**
+   * Ran when step is 0 and `prevStep` is executed
+   */
+  back?: () => void;
+  /**
+   * Ran when step is `steps.length - 1` and nextStep is executed
+   */
+  forward?: () => void;
 }) {
   const ref = useRef<HTMLDivElement | null>(null);
   const { width } = useElemSize(ref);
-  const [stepsContainers, setSteps] = useState(0);
   const [shouldAnimate, setShouldAnimate] = useState(true);
   const [step, setStep] = useState(0);
 
   useEffect(() => {
-    if (!ref.current) return;
-    const stepsContainers =
-      ref.current.getElementsByClassName('step-container');
-    setSteps(stepsContainers.length);
-  }, [ref]);
+    setStep((x) => Math.min(x, steps.length - 1));
+  }, [steps.length]);
 
   const nextStep = () => {
-    if (step + 1 === stepsContainers) return;
+    if (step + 1 === steps.length) {
+      forward?.();
+      return;
+    }
     setStep(step + 1);
   };
 
   const prevStep = () => {
-    if (step - 1 < 0) return;
+    if (step - 1 < 0) {
+      back?.();
+      return;
+    }
     setStep(step - 1);
   };
 
@@ -168,7 +180,7 @@ export function StepperSlider({
         </div>
       </div>
       <div className="flex justify-center items-center gap-2">
-        {Array.from({ length: stepsContainers }).map((_, index) => (
+        {Array.from({ length: steps.length }).map((_, index) => (
           <div key={index} className="flex items-center gap-2">
             {index !== 0 && (
               <div className="w-5 h-1 bg-background-50 rounded-full"></div>