- (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({
+
diff --git a/gui/src/components/onboarding/StepperSlider.tsx b/gui/src/components/onboarding/StepperSlider.tsx
index 8778bfc58..3f5815af8 100644
--- a/gui/src/components/onboarding/StepperSlider.tsx
+++ b/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
+ {doubleStep !== undefined && (
+
+ )}
-
+
+ {doubleStep !== undefined && (
+
+ )}
- {Array.from({ length: stepsContainers }).map((_, index) => (
+ {Array.from({ length: steps.length }).map((_, index) => (
{index !== 0 && (
diff --git a/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx b/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
index b843ba135..f0527ed82 100644
--- a/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
+++ b/gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
@@ -1,9 +1,6 @@
import { useLocalization } from '@fluent/react';
-import { RpcMessage, SkeletonResetAllRequestT } from 'solarxr-protocol';
import { AutoboneContextC, useProvideAutobone } from '@/hooks/autobone';
import { useOnboarding } from '@/hooks/onboarding';
-import { useWebsocketAPI } from '@/hooks/websocket-api';
-import { Button } from '@/components/commons/Button';
import { Typography } from '@/components/commons/Typography';
import { StepperSlider } from '@/components/onboarding/StepperSlider';
import { DoneStep } from './autobone-steps/Done';
@@ -12,83 +9,55 @@ import { PutTrackersOnStep } from './autobone-steps/PutTrackersOn';
import { Recording } from './autobone-steps/Recording';
import { StartRecording } from './autobone-steps/StartRecording';
import { VerifyResultsStep } from './autobone-steps/VerifyResults';
-import { useCountdown } from '@/hooks/countdown';
-import { CheckHeight } from './autobone-steps/CheckHeight';
+import { CheckHeightStep } from './autobone-steps/CheckHeight';
import { PreparationStep } from './autobone-steps/Preparation';
-import { useState } from 'react';
-import { ProportionsResetModal } from './ProportionsResetModal';
+import { HeightContextC, useProvideHeightContext } from '@/hooks/height';
+import { CheckFloorHeightStep } from './autobone-steps/CheckFloorHeight';
export function AutomaticProportionsPage() {
const { l10n } = useLocalization();
const { applyProgress, state } = useOnboarding();
- const { sendRPCPacket } = useWebsocketAPI();
const context = useProvideAutobone();
- const { isCounting, startCountdown, timer } = useCountdown({
- onCountdownEnd: () => {
- sendRPCPacket(
- RpcMessage.SkeletonResetAllRequest,
- new SkeletonResetAllRequestT()
- );
- },
- });
-
- const [showWarning, setShowWarning] = useState(false);
+ const heightContext = useProvideHeightContext();
applyProgress(0.9);
return (
-
-
-
-
- {l10n.getString('onboarding-automatic_proportions-title')}
-
-
-
-
- {l10n.getString('onboarding-automatic_proportions-description')}
+
+ {
- startCountdown();
- setShowWarning(false);
- }}
- onClose={() => setShowWarning(false)}
- isOpen={showWarning}
- >
-
+
);
}
diff --git a/gui/src/components/onboarding/pages/body-proportions/ProportionsChoose.tsx b/gui/src/components/onboarding/pages/body-proportions/ProportionsChoose.tsx
index d142cb78b..456390372 100644
--- a/gui/src/components/onboarding/pages/body-proportions/ProportionsChoose.tsx
+++ b/gui/src/components/onboarding/pages/body-proportions/ProportionsChoose.tsx
@@ -1,6 +1,6 @@
import { useOnboarding } from '@/hooks/onboarding';
import { Localized, useLocalization } from '@fluent/react';
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
import classNames from 'classnames';
import { Typography } from '@/components/commons/Typography';
import { Button } from '@/components/commons/Button';
@@ -9,6 +9,7 @@ import {
SkeletonConfigRequestT,
SkeletonBone,
ChangeSkeletonConfigRequestT,
+ SkeletonResetAllRequestT,
} from 'solarxr-protocol';
import { useWebsocketAPI } from '@/hooks/websocket-api';
import { save } from '@tauri-apps/plugin-dialog';
@@ -18,6 +19,7 @@ import { useAppContext } from '@/hooks/app';
import { error } from '@/utils/logging';
import { fileOpen, fileSave } from 'browser-fs-access';
import { useDebouncedEffect } from '@/hooks/timeout';
+import { ProportionsResetModal } from './ProportionsResetModal';
export const MIN_HEIGHT = 0.4;
export const MAX_HEIGHT = 4;
@@ -36,7 +38,9 @@ export function ProportionsChoose() {
const { applyProgress, state } = useOnboarding();
const { useRPCPacket, sendRPCPacket } = useWebsocketAPI();
const [animated, setAnimated] = useState(false);
+ const [showProportionWarning, setShowProportionWarning] = useState(false);
const [importState, setImportState] = useState(ImportStatus.OK);
+ const exporting = useRef(false);
const { computedTrackers } = useAppContext();
useDebouncedEffect(
@@ -78,6 +82,8 @@ export function ProportionsChoose() {
useRPCPacket(
RpcMessage.SkeletonConfigResponse,
(data: SkeletonConfigExport) => {
+ if (!exporting.current) return;
+ exporting.current = false;
// Convert the skeleton part enums into a string
data.skeletonParts.forEach((x) => {
if (typeof x.bone === 'number')
@@ -151,6 +157,13 @@ export function ProportionsChoose() {
setImportState(ImportStatus.SUCCESS);
};
+ const resetAll = () => {
+ sendRPCPacket(
+ RpcMessage.SkeletonResetAllRequest,
+ new SkeletonResetAllRequestT()
+ );
+ };
+
return (
<>
+
-
+
-
+
+ {l10n.getString('onboarding-automatic_proportions-title')}
-
-
-
-
-
-
@@ -217,62 +230,122 @@ export function ProportionsChoose() {
-
-
- ![]()
setAnimated(() => true)}
- onAnimationEnd={() => setAnimated(() => false)}
- src="/images/slimetower.webp"
- className={classNames(
- 'absolute w-[100px] -right-2 -top-24',
- animated && 'animate-[bounce_1s_1]'
- )}
- >
-
-
- {l10n.getString(
- 'onboarding-choose_proportions-auto_proportions'
+ {state.alonePage && (
+
+ )}
+ {!state.alonePage && (
+
+
-
+
-
+ ![]()
setAnimated(() => true)}
+ onAnimationEnd={() => setAnimated(() => false)}
+ src="/images/slimetower.webp"
+ className={classNames(
+ 'absolute w-[100px] -right-2 -top-24',
+ animated && 'animate-[bounce_1s_1]'
)}
-
-
- {l10n.getString(
- 'onboarding-choose_proportions-auto_proportions-subtitle'
- )}
-
-
-
- }}
- >
-
- Description for autobone
+ >
+
+
+
+ {l10n.getString(
+ 'onboarding-choose_proportions-auto_proportions'
+ )}
-
+
+ {l10n.getString(
+ 'onboarding-choose_proportions-auto_proportions-subtitle'
+ )}
+
+
+
+ }}
+ >
+
+ Description for autobone
+
+
+
+
+ )}
+
+
+ ![]()
setAnimated(() => true)}
+ onAnimationEnd={() => setAnimated(() => false)}
+ src="/images/slimetower.webp"
+ className={classNames(
+ 'absolute w-[100px] -right-2 -top-24',
+ animated && 'animate-[bounce_1s_1]'
+ )}
+ >
+
+
+
+
+ {l10n.getString(
+ 'onboarding-choose_proportions-scaled_proportions'
+ )}
+
+
+ {l10n.getString(
+ 'onboarding-choose_proportions-scaled_proportions-subtitle'
+ )}
+
+
+
+ }}
+ >
+
+ Description for scaled proportions
+
+
+
+
{!state.alonePage && (
@@ -280,15 +353,33 @@ export function ProportionsChoose() {
{l10n.getString('onboarding-previous_step')}
)}
+ {state.alonePage && (
+
+ )}
+ {
+ resetAll();
+ setShowProportionWarning(false);
+ }}
+ onClose={() => setShowProportionWarning(false)}
+ isOpen={showProportionWarning}
+ >
diff --git a/gui/src/components/onboarding/pages/body-proportions/ProportionsResetModal.tsx b/gui/src/components/onboarding/pages/body-proportions/ProportionsResetModal.tsx
index 62839c2a5..233bdfb14 100644
--- a/gui/src/components/onboarding/pages/body-proportions/ProportionsResetModal.tsx
+++ b/gui/src/components/onboarding/pages/body-proportions/ProportionsResetModal.tsx
@@ -3,6 +3,13 @@ import { WarningBox } from '@/components/commons/TipBox';
import { Localized, useLocalization } from '@fluent/react';
import { BaseModal } from '@/components/commons/BaseModal';
import ReactModal from 'react-modal';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { useEffect, useState } from 'react';
+import {
+ RpcMessage,
+ SettingsRequestT,
+ SettingsResponseT,
+} from 'solarxr-protocol';
export function ProportionsResetModal({
isOpen = true,
@@ -24,6 +31,16 @@ export function ProportionsResetModal({
accept: () => void;
} & ReactModal.Props) {
const { l10n } = useLocalization();
+ const { useRPCPacket, sendRPCPacket } = useWebsocketAPI();
+ const [usingDefaultHeight, setUsingDefaultHeight] = useState(true);
+
+ useEffect(
+ () => sendRPCPacket(RpcMessage.SettingsRequest, new SettingsRequestT()),
+ []
+ );
+ useRPCPacket(RpcMessage.SettingsResponse, (res: SettingsResponseT) =>
+ setUsingDefaultHeight(!res.modelSettings?.skeletonHeight?.hmdHeight)
+ );
return (
- }}>
+ }}
+ >
Warning: This will reset your proportions to being just
based on your height.
diff --git a/gui/src/components/onboarding/pages/body-proportions/ScaledProportions.tsx b/gui/src/components/onboarding/pages/body-proportions/ScaledProportions.tsx
new file mode 100644
index 000000000..d9110a25f
--- /dev/null
+++ b/gui/src/components/onboarding/pages/body-proportions/ScaledProportions.tsx
@@ -0,0 +1,75 @@
+import { useLocalization } from '@fluent/react';
+import { useOnboarding } from '@/hooks/onboarding';
+import { Typography } from '@/components/commons/Typography';
+import { StepperSlider } from '@/components/onboarding/StepperSlider';
+import { CheckHeightStep } from './autobone-steps/CheckHeight';
+import { HeightContextC, useProvideHeightContext } from '@/hooks/height';
+import { CheckFloorHeightStep } from './autobone-steps/CheckFloorHeight';
+import { ResetProportionsStep } from './scaled-steps/ResetProportions';
+import { DoneStep } from './scaled-steps/Done';
+import { useNavigate } from 'react-router-dom';
+import { useMemo } from 'react';
+import { ManualHeightStep } from './scaled-steps/ManualHeightStep';
+import { useTrackers } from '@/hooks/tracker';
+import { BodyPart } from 'solarxr-protocol';
+
+export function ScaledProportionsPage() {
+ const { l10n } = useLocalization();
+ const { applyProgress, state } = useOnboarding();
+ const heightContext = useProvideHeightContext();
+ const navigate = useNavigate();
+ const { trackers } = useTrackers();
+
+ const hmdTracker = useMemo(
+ () =>
+ trackers.some(
+ (tracker) =>
+ tracker.tracker.info?.bodyPart === BodyPart.HEAD &&
+ (tracker.tracker.info.isHmd || tracker.tracker.position?.y)
+ ),
+ [trackers]
+ );
+
+ applyProgress(0.9);
+
+ return (
+
+
+ );
+}
diff --git a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/CheckFloorHeight.tsx b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/CheckFloorHeight.tsx
new file mode 100644
index 000000000..6469e6bb8
--- /dev/null
+++ b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/CheckFloorHeight.tsx
@@ -0,0 +1,207 @@
+import {
+ ChangeSettingsRequestT,
+ HeightRequestT,
+ HeightResponseT,
+ ModelSettingsT,
+ RpcMessage,
+ SkeletonHeightT,
+} from 'solarxr-protocol';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
+import { Localized, useLocalization } from '@fluent/react';
+import { useEffect, useMemo, useState } from 'react';
+import { useLocaleConfig } from '@/i18n/config';
+import { useHeightContext } from '@/hooks/height';
+import { useInterval } from '@/hooks/timeout';
+import { TooSmolModal } from './TooSmolModal';
+
+export function CheckFloorHeightStep({
+ nextStep,
+ prevStep,
+ variant,
+}: {
+ nextStep: () => void;
+ prevStep: () => void;
+ variant: 'onboarding' | 'alone';
+}) {
+ const { l10n } = useLocalization();
+ const { floorHeight, hmdHeight, setFloorHeight, validateHeight } =
+ useHeightContext();
+ const [fetchHeight, setFetchHeight] = useState(false);
+ const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
+ const [isOpen, setOpen] = useState(false);
+ const { currentLocales } = useLocaleConfig();
+
+ useEffect(() => setFloorHeight(0), []);
+
+ useInterval(() => {
+ if (fetchHeight) {
+ sendRPCPacket(RpcMessage.HeightRequest, new HeightRequestT());
+ }
+ }, 100);
+
+ const mFormat = useMemo(
+ () =>
+ new Intl.NumberFormat(currentLocales, {
+ style: 'unit',
+ unit: 'meter',
+ maximumFractionDigits: 2,
+ }),
+ [currentLocales]
+ );
+
+ useRPCPacket(RpcMessage.HeightResponse, ({ minHeight }: HeightResponseT) => {
+ if (fetchHeight) {
+ setFloorHeight((val) =>
+ val === null ? minHeight : Math.min(minHeight, val)
+ );
+ }
+ });
+ return (
+ <>
+ setOpen(false)} />
+
+ );
+}
diff --git a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/CheckHeight.tsx b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/CheckHeight.tsx
index 80943a426..fcf900de2 100644
--- a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/CheckHeight.tsx
+++ b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/CheckHeight.tsx
@@ -1,27 +1,15 @@
-import {
- AutoBoneSettingsT,
- ChangeSettingsRequestT,
- HeightRequestT,
- HeightResponseT,
- RpcMessage,
-} from 'solarxr-protocol';
+import { HeightRequestT, HeightResponseT, RpcMessage } from 'solarxr-protocol';
import { useWebsocketAPI } from '@/hooks/websocket-api';
import { Button } from '@/components/commons/Button';
import { Typography } from '@/components/commons/Typography';
import { Localized, useLocalization } from '@fluent/react';
-import { useForm } from 'react-hook-form';
import { useMemo, useState } from 'react';
-import { NumberSelector } from '@/components/commons/NumberSelector';
-import { MIN_HEIGHT } from '@/components/onboarding/pages/body-proportions/ProportionsChoose';
import { useLocaleConfig } from '@/i18n/config';
-import { useCountdown } from '@/hooks/countdown';
import { TipBox } from '@/components/commons/TipBox';
+import { useHeightContext } from '@/hooks/height';
+import { useInterval } from '@/hooks/timeout';
-interface HeightForm {
- hmdHeight: number;
-}
-
-export function CheckHeight({
+export function CheckHeightStep({
nextStep,
prevStep,
variant,
@@ -31,18 +19,17 @@ export function CheckHeight({
variant: 'onboarding' | 'alone';
}) {
const { l10n } = useLocalization();
- const { control, handleSubmit, setValue } = useForm();
- const [fetchedHeight, setFetchedHeight] = useState(false);
+ const { hmdHeight, setHmdHeight } = useHeightContext();
+ const [fetchHeight, setFetchHeight] = useState(false);
const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
- const { timer, isCounting, startCountdown } = useCountdown({
- duration: 3,
- onCountdownEnd: () => {
- setFetchedHeight(true);
- sendRPCPacket(RpcMessage.HeightRequest, new HeightRequestT());
- },
- });
const { currentLocales } = useLocaleConfig();
+ useInterval(() => {
+ if (fetchHeight) {
+ sendRPCPacket(RpcMessage.HeightRequest, new HeightRequestT());
+ }
+ }, 100);
+
const mFormat = useMemo(
() =>
new Intl.NumberFormat(currentLocales, {
@@ -53,88 +40,103 @@ export function CheckHeight({
[currentLocales]
);
- const sFormat = useMemo(
- () => new Intl.RelativeTimeFormat(currentLocales, { style: 'short' }),
- [currentLocales]
- );
-
- useRPCPacket(RpcMessage.HeightResponse, ({ hmdHeight }: HeightResponseT) => {
- setValue('hmdHeight', hmdHeight);
+ useRPCPacket(RpcMessage.HeightResponse, ({ maxHeight }: HeightResponseT) => {
+ if (fetchHeight) {
+ setHmdHeight((val) =>
+ val === null ? maxHeight : Math.max(maxHeight, val)
+ );
+ }
});
-
- const onSubmit = (values: HeightForm) => {
- const changeSettings = new ChangeSettingsRequestT();
- const autobone = new AutoBoneSettingsT();
- autobone.targetHmdHeight = values.hmdHeight;
- changeSettings.autoBoneSettings = autobone;
-
- sendRPCPacket(RpcMessage.ChangeSettingsRequest, changeSettings);
- nextStep();
- };
-
return (
<>
+
+
+
+
+
+ {l10n.getString('onboarding-scaled_proportions-title')}
+
+
+
+
+ {l10n.getString('onboarding-scaled_proportions-description')}
+
+
+
+
+ navigate('/onboarding/body-proportions/choose', { state })
+ }
+ >
+
+
+
+
+
+
+
+
+ {l10n.getString(
+ 'onboarding-automatic_proportions-check_floor_height-title'
+ )}
+
+
+ {/* TODO: Get image of person putting controller in floor */}
+ {/*
+
+ {l10n.getString(
+ 'onboarding-automatic_proportions-check_floor_height-description'
+ )}
+
+ }}
+ >
+
+ Press the button to get your height!
+
+
+
+
+
+
+ {!fetchHeight && (
+
+ )}
+ {fetchHeight && (
+
+ )}
+
+ {l10n.getString(
+ 'onboarding-automatic_proportions-check_floor_height-floor_height'
+ )}
+
+
+ {floorHeight === null
+ ? l10n.getString(
+ 'onboarding-automatic_proportions-check_height-unknown'
+ )
+ : mFormat.format(floorHeight)}
+
+
+
+ 
+
*/}
+
+
+
+
+
+
+
-
-
- {l10n.getString(
- 'onboarding-automatic_proportions-check_height-title'
- )}
-
-
-
+
+
+
{l10n.getString(
- 'onboarding-automatic_proportions-check_height-description'
+ 'onboarding-automatic_proportions-check_height-title-v2'
)}
- }}
- >
-
- Press the button to get your height!
-
-
-
-
-
-
+
-
+
{l10n.getString(
- 'onboarding-automatic_proportions-check_height-guardian_tip'
+ 'onboarding-automatic_proportions-check_height-description-v2'
)}
-
+
+ }}
+ >
+
+ Press the button to get your height!
+
+
+
+
+
+
+ {l10n.getString(
+ 'onboarding-automatic_proportions-check_height-guardian_tip'
+ )}
+
+
+
+
+ {!fetchHeight && (
+
+ )}
+ {fetchHeight && (
+
+ )}
+
+ {l10n.getString(
+ 'onboarding-automatic_proportions-check_height-hmd_height2'
+ )}
+
+
+ {hmdHeight === null
+ ? l10n.getString(
+ 'onboarding-automatic_proportions-check_height-unknown'
+ )
+ : mFormat.format(hmdHeight)}
+
+
@@ -146,8 +148,8 @@ export function CheckHeight({