- ();
+ const { layoutWidth, ref: refw } = useLayout();
-export function MainLayoutRoute({ children }: { children: ReactChild }) {
-
- const { layoutHeight, ref } = useLayout();
-
- return (
- <>
-
- <>
- }>Overview
- }>Body proportions
-
-
-
- {!websocketAPI.isConnected && (
- <>
-
+
+
+
+
-
-
-
+
+
+
+
);
}
diff --git a/src/components/BVHButton.tsx b/src/components/BVHButton.tsx
index 3ae36910b..82ec7363b 100644
--- a/src/components/BVHButton.tsx
+++ b/src/components/BVHButton.tsx
@@ -1,26 +1,30 @@
-import { useState } from "react";
-import { RpcMessage } from "solarxr-protocol";
-import { RecordBVHRequestT } from "solarxr-protocol/protocol/typescript/dist/solarxr-protocol/rpc/record-bvhrequest";
-import { RecordBVHStatusT } from "solarxr-protocol/protocol/typescript/dist/solarxr-protocol/rpc/record-bvhstatus";
-import { useWebsocketAPI } from "../hooks/websocket-api";
-import { BigButton } from "./commons/BigButton";
-import { RecordIcon } from "./commons/icon/RecordIcon";
+import { useState } from 'react';
+import { RpcMessage } from 'solarxr-protocol';
+import { RecordBVHRequestT } from 'solarxr-protocol/protocol/typescript/dist/solarxr-protocol/rpc/record-bvhrequest';
+import { RecordBVHStatusT } from 'solarxr-protocol/protocol/typescript/dist/solarxr-protocol/rpc/record-bvhstatus';
+import { useWebsocketAPI } from '../hooks/websocket-api';
+import { BigButton } from './commons/BigButton';
+import { RecordIcon } from './commons/icon/RecordIcon';
export function BVHButton() {
- const { useRPCPacket, sendRPCPacket } = useWebsocketAPI();
- const [recording, setRecording] = useState(false);
+ const { useRPCPacket, sendRPCPacket } = useWebsocketAPI();
+ const [recording, setRecording] = useState(false);
- const toggleBVH = () => {
- const record = new RecordBVHRequestT();
- record.stop = recording;
- sendRPCPacket(RpcMessage.RecordBVHRequest, record)
- }
+ const toggleBVH = () => {
+ const record = new RecordBVHRequestT();
+ record.stop = recording;
+ sendRPCPacket(RpcMessage.RecordBVHRequest, record);
+ };
- useRPCPacket(RpcMessage.RecordBVHStatus, (data: RecordBVHStatusT) => {
- setRecording(data.recording);
- })
+ useRPCPacket(RpcMessage.RecordBVHStatus, (data: RecordBVHStatusT) => {
+ setRecording(data.recording);
+ });
- return (
- Connection lost to server
-
- )}
- {websocketAPI.isConnected &&
+
-
+ {!websocketAPI.isConnected && (
+ <>
+
+ Connection lost to server
+
+
+ )}
+ {websocketAPI.isConnected &&
-
-
+ return (
+ <>
+
+
-
- )
-
-}
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 66b902aff..ca354997b 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,57 +1,101 @@
import classnames from 'classnames';
import { ReactChild } from 'react';
-import {
- useMatch,
- NavLink,
-} from "react-router-dom";
-import { SlimeVRIcon } from './commons/icon/SimevrIcon';
-import { appWindow } from '@tauri-apps/api/window'
-import { MinimiseIcon } from './commons/icon/MinimiseIcon';
-import { MaximiseIcon } from './commons/icon/MaximiseIcon';
-import { CloseIcon } from './commons/icon/CloseIcon';
+import { useMatch, NavLink } from 'react-router-dom';
+import { CubeIcon } from './commons/icon/CubeIcon';
+import { GearIcon } from './commons/icon/GearIcon';
-export function NavButton({ to, children, match, icon }: { to: string, children: ReactChild, match?: string, icon: ReactChild }) {
+export function NavButton({
+ to,
+ children,
+ match,
+ state = {},
+ icon,
+}: {
+ to: string;
+ children: ReactChild;
+ match?: string;
+ state?: any;
+ icon: ReactChild;
+}) {
+ const doesMatch = useMatch({
+ path: match || to,
+ });
- const doesMatch = useMatch({
- path: match || to,
- });
-
- return (
-
-
- )
+ return (
+
+
+ );
}
-
-export function Navbar({ children }: { children?: ReactChild }) {
- return (
- ([]);
- const [syntheticlist, setSyntheticTrackersList] = useState([]);
-
- useDataFeedPacket(DataFeedMessage.DataFeedUpdate, (packet: DataFeedUpdateT) => {
- setDevicesList(packet.devices)
- setSyntheticTrackersList(packet.syntheticTrackers)
- })
-
- const trackers = useMemo(() => list.reduce((curr, device) => ([...curr, ...device.trackers.map((tracker) => ({ tracker, device }))]), []), [list]);
-
- const asignedTrackers = useMemo(() =>
- trackers.filter(({ tracker: { info } }) => {
- return info && info.bodyPart !== BodyPart.NONE
- })
- , [trackers]);
-
- const unasignedTrackers = useMemo(() =>
- trackers.filter(({ tracker: { info } }) => {
- return info && info.bodyPart === BodyPart.NONE
- })
- , [trackers]);
-
- return (
- (null);
- const [reseting, setReseting] = useState(false);
- const [timer, setTimer] = useState(0);
- const { sendRPCPacket } = useWebsocketAPI();
-
- const reset = () => {
- const req = new ResetRequestT();
- req.resetType = type;
- setReseting(true);
- if (type !== ResetType.Quick) {
- if (timerid.current)
- clearInterval(timerid.current);
- timerid.current = setInterval(() => {
- setTimer((timer) => {
- if (timer + 1 === 3) {
- if (timerid.current)
- clearInterval(timerid.current);
- sendRPCPacket(RpcMessage.ResetRequest, req)
- setTimer(0);
- setReseting(false)
- }
- return timer + 1;
- });
- }, 1000);
- } else {
- sendRPCPacket(RpcMessage.ResetRequest, req)
- setReseting(false);
- }
- }
-
- return (
-
+ {direction === 'left' && (
+
+ );
+}
diff --git a/src/components/commons/BigButton.tsx b/src/components/commons/BigButton.tsx
index e0bf9f521..32eb26ec4 100644
--- a/src/components/commons/BigButton.tsx
+++ b/src/components/commons/BigButton.tsx
@@ -1,11 +1,36 @@
-import classNames from "classnames";
-import React, { ReactChild } from "react";
+import classNames from 'classnames';
+import React, { ReactChild } from 'react';
-export function BigButton({ text, icon, disabled, onClick, ...props }: { text: string, icon: ReactChild } & React.AllHTMLAttributes) {
- return (
-
- )
-}
\ No newline at end of file
+export function BigButton({
+ text,
+ icon,
+ disabled,
+ onClick,
+ ...props
+}: {
+ text: string;
+ disabled?: boolean;
+ icon: ReactChild;
+} & React.HTMLAttributes) {
+ return (
+
+ );
+}
diff --git a/src/components/commons/BodyInteractions.tsx b/src/components/commons/BodyInteractions.tsx
new file mode 100644
index 000000000..f5b53e4aa
--- /dev/null
+++ b/src/components/commons/BodyInteractions.tsx
@@ -0,0 +1,187 @@
+import classNames from 'classnames';
+import {
+ ReactChild,
+ useEffect,
+ useLayoutEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+import { BodyPart } from 'solarxr-protocol';
+import { PersonFrontIcon } from './PersonFrontIcon';
+
+export function BodyInteractions({
+ leftControls,
+ rightControls,
+ assignedRoles,
+}: {
+ leftControls?: ReactChild;
+ rightControls?: ReactChild;
+ assignedRoles: BodyPart[];
+}) {
+ const personRef = useRef(null);
+ const leftContainerRef = useRef(null);
+ const rightContainerRef = useRef(null);
+ const canvasRefRef = useRef(null);
+ const [slotsButtonsPos, setSlotsButtonPos] = useState<
+ {
+ id: string;
+ left: number;
+ top: number;
+ height: number;
+ width: number;
+ hidden: boolean;
+ buttonOffset: {
+ left: number;
+ top: number;
+ };
+ }[]
+ >([]);
+
+ const getSlotsPos = () => {
+ return (
+ (personRef.current && [
+ ...(personRef.current.querySelectorAll('.body-part-circle') as any),
+ ]) ||
+ []
+ );
+ };
+
+ const getControlsPos = () => {
+ const pos = (container: HTMLDivElement) =>
+ [...(container.querySelectorAll('.control') as any)].filter(
+ ({ id }) => !!id
+ );
+
+ const left =
+ (leftContainerRef.current && pos(leftContainerRef.current)) || [];
+ const right =
+ (rightContainerRef.current && pos(rightContainerRef.current)) || [];
+ return [...left, ...right];
+ };
+
+ const getOffset = (el: HTMLDivElement, offset = { left: 0, top: 0 }) => {
+ const rect = el.getBoundingClientRect();
+ return {
+ left: rect.left - (offset.left || 0),
+ top: rect.top - (offset.top || 0),
+ width: rect.width || el.offsetWidth,
+ height: rect.height || el.offsetHeight,
+ };
+ };
+
+ useLayoutEffect(() => {
+ if (
+ !(
+ personRef.current &&
+ canvasRefRef.current &&
+ rightContainerRef.current &&
+ leftContainerRef.current
+ )
+ )
+ return;
+
+ const ctx = canvasRefRef.current.getContext('2d');
+ if (!ctx) return;
+ const slotsPos = getSlotsPos();
+ const controlsPos = getControlsPos();
+
+ canvasRefRef.current.width = canvasRefRef.current.offsetWidth;
+ canvasRefRef.current.height = canvasRefRef.current.offsetHeight;
+
+ ctx.strokeStyle = '#608AAB';
+ ctx.lineWidth = 1;
+
+ const canvasBox = canvasRefRef.current.getBoundingClientRect();
+ const personBox = personRef.current.getBoundingClientRect();
+
+ const controlsPosIds = controlsPos.map(({ id: cid }) => cid);
+ const slots = slotsPos.map((slot: HTMLDivElement) => {
+ const slotPosition = getOffset(slot, canvasBox);
+ return {
+ ...slotPosition,
+ id: slot.id,
+ hidden: !controlsPosIds.includes(slot.id),
+ buttonOffset: {
+ left: canvasBox.left - personBox.left,
+ top: canvasBox.top - personBox.top,
+ },
+ };
+ });
+
+ slots.forEach((slot) => {
+ const controls = controlsPos.filter(({ id }) => id === slot.id);
+ controls.forEach((control) => {
+ const controlPosition = getOffset(control, canvasBox);
+
+ const offsetX =
+ controlPosition.left < slot.left ? controlPosition.width : 0;
+
+ const constolLeft = controlPosition.left + offsetX;
+ const LINE_BREAK_WIDTH = 40;
+ const leftOffsetX =
+ LINE_BREAK_WIDTH * (controlPosition.left < slot.left ? -1 : 1);
+
+ ctx.beginPath();
+ ctx.moveTo(
+ constolLeft,
+ controlPosition.top + controlPosition.height / 2
+ );
+ ctx.lineTo(
+ constolLeft - leftOffsetX,
+ controlPosition.top + controlPosition.height / 2
+ );
+ ctx.lineTo(slot.left + slot.width / 2, slot.top + slot.height / 2);
+ ctx.stroke();
+ });
+ });
+ setSlotsButtonPos(slots);
+ }, [leftControls, rightControls]);
+
+ return (
+ ) {
+ const classes = useMemo(() => {
+ const variantsMap = {
+ primary: classNames({
+ 'bg-accent-background-30 hover:bg-accent-background-20 text-standard text-background-10':
+ !disabled,
+ 'bg-accent-background-40 hover:bg-accent-background-40 cursor-not-allowed text-accent-background-10':
+ disabled,
+ }),
+ secondary: classNames({
+ 'bg-background-60 hover:bg-background-50 text-standard text-background-10':
+ !disabled,
+ 'bg-background-60 hover:bg-background-60 cursor-not-allowed text-background-40':
+ disabled,
+ }),
+ tierciary: classNames({
+ 'bg-background-50 hover:bg-background-40 text-standard text-background-10':
+ !disabled,
+ 'bg-background-50 hover:bg-background-50 cursor-not-allowed text-background-40':
+ disabled,
+ }),
+ };
+ return classNames(
+ variantsMap[variant],
+ 'focus:ring-4 text-center relative',
+ {
+ 'rounded-full p-2 text-center min-h-[35px] min-w-[35px]': rounded,
+ 'rounded-md px-5 py-2.5': !rounded,
+ },
+ props.className
+ );
+ }, [variant, disabled, rounded]);
-export function Button({ children, variant, disabled, ...props }: { children: ReactChild, variant: 'primary' } & React.ButtonHTMLAttributes) {
-
- const classes = useMemo(() => {
- const variantsMap = {
- primary: classNames('text-field-title focus:ring-4 focus:outline-none focus:ring-primary-2', { 'bg-purple-gray-600 hover:bg-purple-gray-500': !disabled, 'bg-purple-gray-900 hover:bg-purple-gray-900 text-section-indicator': disabled }),
- }
- return classNames(variantsMap[variant], 'focus:ring-4 rounded-lg px-5 py-2.5 text-center font-medium');
-
- }, [variant, disabled])
- return
-}
\ No newline at end of file
+ return to ? (
+
+
+ {children}
+
+
+ ) : (
+
+ );
+}
diff --git a/src/components/commons/ButtonIcon.tsx b/src/components/commons/ButtonIcon.tsx
deleted file mode 100644
index f5d170d80..000000000
--- a/src/components/commons/ButtonIcon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import classNames from "classnames";
-import React, { ReactChild } from "react";
-
-
-export function IconButton({ icon, className, ...props }: { icon: ReactChild, className?: string } & React.HTMLAttributes) {
- return (
- (({ label, outlined, ...props }, ref) => {
- const id = useId();
+export function CheckBox({
+ label,
+ variant = 'checkbox',
+ control,
+ outlined,
+ name,
+ ...props
+}: {
+ label: string | ReactChild;
+ control: Control;
+ name: string;
+ variant?: 'checkbox' | 'toggle';
+ outlined?: boolean;
+}) {
+ const classes = useMemo(() => {
+ const vriantsMap = {
+ checkbox: {
+ checkbox: classNames(
+ 'bg-background-50 border-background-50 rounded-md w-5 h-5 text-accent-background-30 focus:border-accent-background-40 focus:ring-transparent focus:ring-offset-transparent focus:outline-transparent'
+ ),
+ toggle: '',
+ pin: '',
+ },
+ toggle: {
+ checkbox: classNames('hidden'),
+ toggle: classNames('w-10 h-4 rounded-full relative transition-colors'),
+ pin: classNames('h-2 w-2 bg-background-10 rounded-full absolute m-1'),
+ },
+ };
+ return vriantsMap[variant];
+ }, [variant]);
- return (
-
+ {children}
+
+ );
+}
diff --git a/src/components/onboarding/OnboardingLayout.tsx b/src/components/onboarding/OnboardingLayout.tsx
new file mode 100644
index 000000000..35e7862cb
--- /dev/null
+++ b/src/components/onboarding/OnboardingLayout.tsx
@@ -0,0 +1,27 @@
+import { ReactChild } from 'react';
+import { useLayout } from '../../hooks/layout';
+import { useOnboarding } from '../../hooks/onboarding';
+import { MainLayoutRoute } from '../MainLayout';
+import { TopBar } from '../TopBar';
+
+export function OnboardingLayout({ children }: { children: ReactChild }) {
+ const { layoutHeight, ref } = useLayout();
+ const { state } = useOnboarding();
+
+ return !state.alonePage ? (
+ <>
+
+
+ );
+}
diff --git a/src/components/onboarding/TrackerPartCard.tsx b/src/components/onboarding/TrackerPartCard.tsx
new file mode 100644
index 000000000..2da9cdb34
--- /dev/null
+++ b/src/components/onboarding/TrackerPartCard.tsx
@@ -0,0 +1,92 @@
+import classNames from 'classnames';
+import { MouseEventHandler, useEffect, useMemo, useState } from 'react';
+import { BodyPart, TrackerDataT } from 'solarxr-protocol';
+import { FlatDeviceTracker } from '../../hooks/app';
+import { useTracker } from '../../hooks/tracker';
+import { Typography } from '../commons/Typography';
+
+function Tracker({
+ tracker,
+ updateVelocity,
+}: {
+ tracker: TrackerDataT;
+ updateVelocity: (velocity: number) => void;
+}) {
+ const { useVelocity } = useTracker(tracker);
+
+ const velocity = useVelocity();
+
+ useEffect(() => {
+ updateVelocity(velocity);
+ }, [velocity]);
+
+ return (
+
+ {`${tracker.info?.customName || tracker.info?.displayName}` || 'no name'}
+
+ );
+}
+
+export function TrackerPartCard({
+ td,
+ label,
+ role,
+ direction,
+ onlyAssigned,
+ onClick,
+}: {
+ td: FlatDeviceTracker[];
+ label: string;
+ role: BodyPart;
+ onlyAssigned: boolean;
+ direction: 'left' | 'right';
+ onClick?: MouseEventHandler;
+}) {
+ const [velocities, setVelocities] = useState([]);
+
+ const updateVelocity = (vel: number) => {
+ if (velocities.length > 3) {
+ velocities.shift();
+ }
+ velocities.push(vel);
+ setVelocities(velocities);
+ };
+
+ const globalVelocity = useMemo(
+ () => velocities.reduce((curr, v) => curr + v, 0) / (td?.length || 1),
+ [velocities, td]
+ );
+
+ const showCard = useMemo(
+ () => (onlyAssigned && td && td.length > 0) || !onlyAssigned,
+ [onlyAssigned, td]
+ );
+
+ return (
+ (showCard && (
+ ();
+ const { trackers, useConnectedTrackers } = useTrackers();
+ const { applyProgress, state, skipSetup } = useOnboarding();
+ const navigate = useNavigate();
+ const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
+ const [isSerialOpen, setSerialOpen] = useState(false);
+ const [connectionStatus, setConnectionStatus] =
+ useState('START-CONNECTING');
+
+ applyProgress(0.4);
+
+ const connectedTrackers = useConnectedTrackers();
+
+ useEffect(() => {
+ if (!state.wifi) {
+ navigate('/onboarding/wifi-creds');
+ }
+
+ sendRPCPacket(RpcMessage.OpenSerialRequest, new OpenSerialRequestT());
+ return () => {
+ sendRPCPacket(RpcMessage.CloseSerialRequest, new CloseSerialRequestT());
+ };
+ }, []);
+
+ useRPCPacket(
+ RpcMessage.SerialUpdateResponse,
+ (data: SerialUpdateResponseT) => {
+ if (data.closed) {
+ setSerialOpen(false);
+ setConnectionStatus('START-CONNECTING');
+ setTimeout(() => {
+ sendRPCPacket(RpcMessage.OpenSerialRequest, new OpenSerialRequestT());
+ }, 1000);
+ }
+
+ if (!data.closed && !isSerialOpen) {
+ setSerialOpen(true);
+ setConnectionStatus('START-CONNECTING');
+ }
+
+ if (data.log) {
+ const log = data.log as string;
+ if (connectionStatus === 'START-CONNECTING' && state.wifi) {
+ setConnectionStatus('CONNECTING');
+ if (!state.wifi) return;
+ const wifi = new SetWifiRequestT();
+ wifi.ssid = state.wifi.ssid;
+ wifi.password = state.wifi.password;
+ sendRPCPacket(RpcMessage.SetWifiRequest, wifi);
+ }
+
+ if (log.includes('Connected successfully to SSID')) {
+ setConnectionStatus('CONNECTED');
+ }
+
+ if (log.includes('Handshake successful')) {
+ setConnectionStatus('HANDSHAKE');
+ setTimeout(() => {
+ setConnectionStatus('START-CONNECTING');
+ }, 3000);
+ }
+
+ if (
+ // eslint-disable-next-line quotes
+ log.includes("Can't connect from any credentials")
+ ) {
+ setConnectionStatus('ERROR');
+ }
+ }
+ }
+ );
+
+ useEffect(() => {
+ const id = setInterval(() => {
+ if (!isSerialOpen)
+ sendRPCPacket(RpcMessage.OpenSerialRequest, new OpenSerialRequestT());
+ else clearInterval(id);
+ }, 1000);
+
+ return () => {
+ clearInterval(id);
+ };
+ }, [isSerialOpen, sendRPCPacket]);
+
+ return (
+ ({
+ defaultValues: {},
+ mode: 'onChange',
+ });
+
+ applyProgress(0.2);
+
+ useEffect(() => {
+ if (state.wifi) {
+ reset({
+ ssid: state.wifi.ssid,
+ password: state.wifi.password,
+ });
+ }
+ }, []);
+
+ const submitWifiCreds = (value: WifiForm) => {
+ setWifiCredentials(value.ssid, value.password);
+ navigate('/onboarding/connect-trackers');
+ };
+
+ return (
+
+ );
+}
diff --git a/src/components/onboarding/pages/body-proportions/AutoboneStepper.tsx b/src/components/onboarding/pages/body-proportions/AutoboneStepper.tsx
new file mode 100644
index 000000000..c3252bc0d
--- /dev/null
+++ b/src/components/onboarding/pages/body-proportions/AutoboneStepper.tsx
@@ -0,0 +1,171 @@
+import classNames from 'classnames';
+import {
+ FC,
+ MouseEventHandler,
+ ReactChild,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { useElemSize } from '../../../../hooks/layout';
+import { CheckIcon } from '../../../commons/icon/CheckIcon';
+import { CrossIcon } from '../../../commons/icon/CrossIcon';
+import { Typography } from '../../../commons/Typography';
+import { DoneStep } from './autobone-steps/Done';
+import { PreparationStep } from './autobone-steps/Preparation';
+import { PutTrackersOnStep } from './autobone-steps/PutTrackersOn';
+import { Recording } from './autobone-steps/Recording';
+import { StartRecording } from './autobone-steps/StartRecording';
+import { VerifyResultsStep } from './autobone-steps/VerifyResults';
+
+export function StepDot({
+ active,
+ done,
+ onClick,
+}: {
+ active?: boolean;
+ done?: boolean;
+ onClick?: MouseEventHandler;
+}) {
+ return (
+ (null);
+ const { width } = useElemSize(ref);
+ const [steps, setSteps] = useState(0);
+ const [step, setStep] = useState(0);
+
+ useEffect(() => {
+ if (!ref.current) return;
+ const steps = ref.current.getElementsByClassName('step-container');
+ setSteps(steps.length);
+ }, [ref]);
+
+ const stepsComponents: Step[] = [
+ { type: 'numbered', component: PutTrackersOnStep },
+ { type: 'numbered', component: PreparationStep },
+ { type: 'numbered', component: StartRecording },
+ { type: 'fullsize', component: Recording },
+ { type: 'numbered', component: VerifyResultsStep },
+ { type: 'fullsize', component: DoneStep },
+ ];
+
+ const nextStep = () => {
+ if (step + 1 === steps) return;
+ setStep(step + 1);
+ };
+
+ const prevStep = () => {
+ if (step - 1 < 0) return;
+ setStep(step - 1);
+ };
+
+ return (
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/body-proportions/BodyProportions.tsx b/src/components/onboarding/pages/body-proportions/BodyProportions.tsx
new file mode 100644
index 000000000..448f1fbcb
--- /dev/null
+++ b/src/components/onboarding/pages/body-proportions/BodyProportions.tsx
@@ -0,0 +1,218 @@
+import classNames from 'classnames';
+import {
+ MouseEventHandler,
+ ReactChild,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import {
+ ChangeSkeletonConfigRequestT,
+ RpcMessage,
+ SkeletonBone,
+ SkeletonConfigRequestT,
+ SkeletonConfigResponseT,
+} from 'solarxr-protocol';
+import { useWebsocketAPI } from '../../../../hooks/websocket-api';
+import { Typography } from '../../../commons/Typography';
+
+export const skeletonBoneLabels = {
+ [SkeletonBone.NONE]: 'None',
+ [SkeletonBone.HEAD]: 'Head shift',
+ [SkeletonBone.NECK]: 'Neck length',
+ [SkeletonBone.TORSO]: 'Torso length',
+ [SkeletonBone.CHEST]: 'Chest distance',
+ [SkeletonBone.WAIST]: 'Waist distance',
+ [SkeletonBone.HIP_OFFSET]: 'Hip offset',
+ [SkeletonBone.HIPS_WIDTH]: 'Hips width',
+ [SkeletonBone.LEGS_LENGTH]: 'Legs length',
+ [SkeletonBone.KNEE_HEIGHT]: 'Knee height',
+ [SkeletonBone.FOOT_LENGTH]: 'Foot length',
+ [SkeletonBone.FOOT_SHIFT]: 'Foot shift',
+ [SkeletonBone.SKELETON_OFFSET]: 'Skeleton offset',
+ [SkeletonBone.CONTROLLER_DISTANCE_Z]: 'Controller distance z',
+ [SkeletonBone.CONTROLLER_DISTANCE_Y]: 'Controller distance y',
+ [SkeletonBone.FOREARM_LENGTH]: 'Forearm distance',
+ [SkeletonBone.SHOULDERS_DISTANCE]: 'Shoulders distance',
+ [SkeletonBone.SHOULDERS_WIDTH]: 'Shoulders width',
+ [SkeletonBone.UPPER_ARM_LENGTH]: 'Upper arm length',
+ [SkeletonBone.ELBOW_OFFSET]: 'Elbow offset',
+};
+
+function IncrementButton({
+ children,
+ onClick,
+}: {
+ children: ReactChild;
+ onClick?: MouseEventHandler;
+}) {
+ return (
+ | null>(null);
+ const [selectedBone, setSelectedBone] = useState(SkeletonBone.HEAD);
+ const bodyParts = useMemo(() => {
+ return (
+ config?.skeletonParts.map(({ bone, value }) => ({
+ bone,
+ label: skeletonBoneLabels[bone],
+ value,
+ })) || []
+ );
+ }, [config]);
+
+ useRPCPacket(
+ RpcMessage.SkeletonConfigResponse,
+ (data: SkeletonConfigResponseT) => {
+ setConfig(data);
+ console.log(data);
+ }
+ );
+
+ useEffect(() => {
+ sendRPCPacket(
+ RpcMessage.SkeletonConfigRequest,
+ new SkeletonConfigRequestT()
+ );
+ }, []);
+
+ const roundedStep = (value: number, step: number, add: boolean) => {
+ if (!add) {
+ return (Math.round(value * 200) - step * 2) / 200;
+ } else {
+ return (Math.round(value * 200) + step * 2) / 200;
+ }
+ };
+
+ const updateConfigValue = (configChange: ChangeSkeletonConfigRequestT) => {
+ sendRPCPacket(RpcMessage.ChangeSkeletonConfigRequest, configChange);
+ const conf = { ...config } as Omit | null;
+ const b = conf?.skeletonParts?.find(({ bone }) => bone == selectedBone);
+ if (!b || !conf) return;
+ b.value = configChange.value;
+ setConfig(conf);
+ };
+
+ const increment = async (value: number, v: number) => {
+ const configChange = new ChangeSkeletonConfigRequestT();
+
+ configChange.bone = selectedBone;
+ configChange.value = roundedStep(value, v, true);
+
+ updateConfigValue(configChange);
+ };
+
+ const decrement = (value: number, v: number) => {
+ const configChange = new ChangeSkeletonConfigRequestT();
+
+ configChange.bone = selectedBone;
+ configChange.value = value - v / 100;
+
+ updateConfigValue(configChange);
+ };
+
+ return (
+ (BodyPart.NONE);
+
+ applyProgress(0.7);
+
+ const { useAssignedTrackers } = useTrackers();
+ const assignedTrackers = useAssignedTrackers();
+
+ const trackerPartGrouped = useMemo(
+ () =>
+ assignedTrackers.reduce<{ [key: number]: FlatDeviceTracker[] }>(
+ (curr, td) => {
+ const key = td.tracker.info?.bodyPart || BodyPart.NONE;
+ return {
+ ...curr,
+ [key]: [...(curr[key] || []), td],
+ };
+ },
+ {}
+ ),
+ [assignedTrackers]
+ );
+
+ const onDirectionSelected = (mountingOrientation: number) => {
+ (trackerPartGrouped[selectedRole] || []).forEach((td) => {
+ const assignreq = new AssignTrackerRequestT();
+
+ assignreq.bodyPosition = td.tracker.info?.bodyPart || BodyPart.NONE;
+ assignreq.mountingRotation = QuaternionToQuatT(
+ Quaternion.Euler(0, +mountingOrientation, 0)
+ );
+ assignreq.trackerId = td.tracker.trackerId;
+ sendRPCPacket(RpcMessage.AssignTrackerRequest, assignreq);
+ });
+
+ setSelectRole(BodyPart.NONE);
+ };
+
+ return (
+ <>
+ setSelectRole(BodyPart.NONE)}
+ onDirectionSelected={onDirectionSelected}
+ >
+ ;
+}) {
+ return (
+ ();
+ const { ref: refOptions, height: optionsHeight } =
+ useElemSize();
+
+ return (
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/trackers-assign/TrackerAssignment.tsx b/src/components/onboarding/pages/trackers-assign/TrackerAssignment.tsx
new file mode 100644
index 000000000..8cbe22fbd
--- /dev/null
+++ b/src/components/onboarding/pages/trackers-assign/TrackerAssignment.tsx
@@ -0,0 +1,153 @@
+import { useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import {
+ AssignTrackerRequestT,
+ BodyPart,
+ QuatT,
+ RpcMessage,
+ TrackerIdT,
+} from 'solarxr-protocol';
+import { FlatDeviceTracker } from '../../../../hooks/app';
+import { useOnboarding } from '../../../../hooks/onboarding';
+import { useTrackers } from '../../../../hooks/tracker';
+import { useWebsocketAPI } from '../../../../hooks/websocket-api';
+import { ArrowLink } from '../../../commons/ArrowLink';
+import { Button } from '../../../commons/Button';
+import { CheckBox } from '../../../commons/Checkbox';
+import { TipBox } from '../../../commons/TipBox';
+import { Typography } from '../../../commons/Typography';
+import { BodyAssignment } from '../../BodyAssignment';
+import { TrackerSelectionMenu } from './TrackerSelectionMenu';
+
+export function TrackersAssignPage() {
+ const { useAssignedTrackers, trackers } = useTrackers();
+ const { applyProgress, skipSetup, state } = useOnboarding();
+ const { sendRPCPacket } = useWebsocketAPI();
+
+ const { control, watch } = useForm<{ advanced: boolean }>({
+ defaultValues: { advanced: false },
+ });
+ const { advanced } = watch();
+ const [selectedRole, setSelectRole] = useState(BodyPart.NONE);
+ const assignedTrackers = useAssignedTrackers();
+
+ const trackerPartGrouped = useMemo(
+ () =>
+ assignedTrackers.reduce<{ [key: number]: FlatDeviceTracker[] }>(
+ (curr, td) => {
+ const key = td.tracker.info?.bodyPart || BodyPart.NONE;
+ return {
+ ...curr,
+ [key]: [...(curr[key] || []), td],
+ };
+ },
+ {}
+ ),
+ [assignedTrackers]
+ );
+
+ const onTrackerSelected = (tracker: FlatDeviceTracker | null) => {
+ const assign = (
+ role: BodyPart,
+ rotation: QuatT | null,
+ trackerId: TrackerIdT | null
+ ) => {
+ const assignreq = new AssignTrackerRequestT();
+
+ assignreq.bodyPosition = role;
+ assignreq.mountingRotation = rotation;
+ assignreq.trackerId = trackerId;
+ sendRPCPacket(RpcMessage.AssignTrackerRequest, assignreq);
+ };
+
+ (trackerPartGrouped[selectedRole] || []).forEach((td) =>
+ assign(
+ BodyPart.NONE,
+ td.tracker.info?.mountingOrientation || null,
+ td.tracker.trackerId
+ )
+ );
+
+ if (!tracker) {
+ setSelectRole(BodyPart.NONE);
+ return;
+ }
+
+ assign(
+ selectedRole,
+ tracker.tracker.info?.mountingOrientation || null,
+ tracker.tracker.trackerId
+ );
+ setSelectRole(BodyPart.NONE);
+ };
+
+ applyProgress(0.5);
+
+ return (
+ <>
+ setSelectRole(BodyPart.NONE)}
+ onTrackerSelected={onTrackerSelected}
+ >
+ ();
+ const { ref: refOptions, height: optionsHeight } =
+ useElemSize();
+
+ const { useAssignedTrackers, useUnassignedTrackers } = useTrackers();
+
+ const unassignedTrackers = useUnassignedTrackers();
+ const assignedTrackers = useAssignedTrackers();
+
+ return (
+
+
+ );
+}
diff --git a/src/components/proportions/AutomaticCalibration.tsx b/src/components/proportions/AutomaticCalibration.tsx
deleted file mode 100644
index 98e6c435a..000000000
--- a/src/components/proportions/AutomaticCalibration.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import classNames from "classnames";
-import { useMemo, useState } from "react";
-import { AutoBoneEpochResponseT, AutoBoneProcessRequestT, AutoBoneProcessStatusResponseT, AutoBoneProcessType, RpcMessage, SkeletonConfigRequestT, SkeletonPartT } from "solarxr-protocol";
-import { useWebsocketAPI } from "../../hooks/websocket-api";
-import { Button } from "../commons/Button";
-import { AppModal } from "../Modal";
-import { bodyPartLabels } from "./BodyProportions";
-
-export function AutomaticCalibration() {
- const { useRPCPacket, sendRPCPacket } = useWebsocketAPI();
-
- const [isOpen, setOpen] = useState(false);
- const [isProcessRunning, setProcessRunning] = useState(false);
- const [hasRecording, setHasRecording] = useState(false);
- const [hasCalibration, setHasCalibration] = useState(false);
- const [progress, setProgress] = useState(0);
- const [skeletonParts, setSkeletonParts] = useState(null);
-
- const bodyParts = useMemo(() => {
- return skeletonParts?.map(({ bone, value }) => ({ bone, label: bodyPartLabels[bone], value })) || []
- }, [skeletonParts])
-
- const startProcess = (processType: AutoBoneProcessType) => {
- // Don't allow multiple processes at once (for now atleast)
- if (isProcessRunning) {
- return;
- }
-
- setProcessRunning(true);
- setProgress(0);
-
- const processRequest = new AutoBoneProcessRequestT();
- processRequest.processType = processType;
-
- sendRPCPacket(RpcMessage.AutoBoneProcessRequest, processRequest)
- }
-
- const startRecording = () => {
- setHasRecording(false);
- startProcess(AutoBoneProcessType.RECORD);
- }
-
- const startProcessing = () => {
- setHasCalibration(false);
- startProcess(AutoBoneProcessType.PROCESS);
- }
-
- useRPCPacket(RpcMessage.AutoBoneProcessStatusResponse, (data: AutoBoneProcessStatusResponseT) => {
- if (data.completed) {
- setProcessRunning(false);
- setProgress(1);
- }
-
- if (data.processType) {
- if (data.message) {
- console.log(AutoBoneProcessType[data.processType], ": ", data.message);
- }
-
- if (data.total > 0 && data.current >= 0) {
- setProgress(data.current / data.total);
- }
-
- if (data.completed) {
- console.log("Process ", AutoBoneProcessType[data.processType], " has completed");
-
- switch (data.processType) {
- case AutoBoneProcessType.RECORD:
- setHasRecording(data.success);
- break;
-
- case AutoBoneProcessType.PROCESS:
- setHasCalibration(data.success);
- break;
-
- case AutoBoneProcessType.APPLY:
- // Update skeleton config when applied
- sendRPCPacket(RpcMessage.SkeletonConfigRequest, new SkeletonConfigRequestT())
- break;
- }
- }
- }
- })
-
- useRPCPacket(RpcMessage.AutoBoneEpochResponse, (data: AutoBoneEpochResponseT) => {
- setProgress(data.currentEpoch/data.totalEpochs);
-
- // Probably not necessary to show to the user
- console.log("Epoch ", data.currentEpoch, "/", data.totalEpochs, " (Error ", data.epochError, ")");
-
- setSkeletonParts(data.adjustedSkeletonParts);
- })
-
- return (
- <>
-
- Automatic Calibration}
- onRequestClose={() => setOpen(false)}
- >
- <>
-
-
- )
-
-}
\ No newline at end of file
diff --git a/src/components/proportions/BodyProportions.tsx b/src/components/proportions/BodyProportions.tsx
deleted file mode 100644
index 44ab1f2ba..000000000
--- a/src/components/proportions/BodyProportions.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import classNames from "classnames";
-import { useEffect, useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
-import { useWebsocketAPI } from "../../hooks/websocket-api";
-import { Button } from "../commons/Button";
-import { NumberSelector } from "../commons/NumberSelector";
-import { AutomaticCalibration } from "./AutomaticCalibration";
-import { BodyView } from "./BodyView";
-
-import { ChangeSkeletonConfigRequestT, RpcMessage, SkeletonBone, SkeletonConfigRequestT, SkeletonConfigResponseT, SkeletonResetAllRequestT } from 'solarxr-protocol';
-
-export const bodyPartLabels = {
- [SkeletonBone.NONE]: "None",
- [SkeletonBone.HEAD]: "Head shift",
- [SkeletonBone.NECK]: "Neck length",
- [SkeletonBone.TORSO]: "Torso length",
- [SkeletonBone.CHEST]: "Chest distance",
- [SkeletonBone.WAIST]: "Waist distance",
- [SkeletonBone.HIP_OFFSET]: "Hip offset",
- [SkeletonBone.HIPS_WIDTH]: "Hips width",
- [SkeletonBone.LEGS_LENGTH]: "Legs length",
- [SkeletonBone.KNEE_HEIGHT]: "Knee height",
- [SkeletonBone.FOOT_LENGTH]: "Foot length",
- [SkeletonBone.FOOT_SHIFT]: "Foot shift",
- [SkeletonBone.SKELETON_OFFSET]: "Skeleton offset",
- [SkeletonBone.CONTROLLER_DISTANCE_Z]: "Controller distance z",
- [SkeletonBone.CONTROLLER_DISTANCE_Y]: "Controller distance y",
- [SkeletonBone.FOREARM_LENGTH]: "Forearm distance",
- [SkeletonBone.SHOULDERS_DISTANCE]: "Shoulders distance",
- [SkeletonBone.SHOULDERS_WIDTH]: "Shoulders width",
- [SkeletonBone.UPPER_ARM_LENGTH]: "Upper arm length",
- [SkeletonBone.ELBOW_OFFSET]: "Elbow offset"
-}
-
-type BodyProportionsForm = ({ [key: string]: number });
-
-
-export function BodyProportions() {
- const { useRPCPacket, sendRPCPacket } = useWebsocketAPI();
- const [selectedBodyPart, setSelectedBodyPart] = useState(null);
- const { control, reset, watch, handleSubmit } = useForm({ defaultValues: Object.values(SkeletonBone).filter((bone) => !isNaN(+bone)).reduce((curr, bone) => ({ ...curr, [bone]: 0 }), {}) });
- const [config, setConfig] = useState(null);
- const [step, setStep] = useState(1);
-
- const bodyParts = useMemo(() => {
- return config?.skeletonParts.map(({ bone, value }) => ({ bone, label: bodyPartLabels[bone], value })) || []
- }, [config])
-
-
- const toFormData = (data: SkeletonConfigResponseT): BodyProportionsForm => data.skeletonParts.reduce((curr, part) => ({ ...curr, [part.bone]: part.value }), {})
-
- useRPCPacket(RpcMessage.SkeletonConfigResponse, (data: SkeletonConfigResponseT) => {
- setConfig(data);
- reset(toFormData(data));
- })
-
- useEffect(() => {
- sendRPCPacket(RpcMessage.SkeletonConfigRequest, new SkeletonConfigRequestT())
- }, [])
-
-
- const onSubmit = async (data: BodyProportionsForm) => {
- if (!config) return ;
-
- const curr = toFormData(config);
- for (const key in curr) {
- if (curr[key] !== data[key]) {
- const configChange = new ChangeSkeletonConfigRequestT();
-
- console.log(key);
- configChange.bone = +key;
- configChange.value = data[key];
-
- await sendRPCPacket(RpcMessage.ChangeSkeletonConfigRequest, configChange);
- }
- }
- }
-
- useEffect(() => {
- const subscription = watch(() => handleSubmit(onSubmit)());
- return () => subscription.unsubscribe();
- })
-
-
- const handleResetAll = () => {
- sendRPCPacket(RpcMessage.SkeletonResetAllRequest, new SkeletonResetAllRequestT());
- }
-
-
- const onMouseEnterSelector = (id: number) => {
- setSelectedBodyPart(id);
- }
-
- const roundedStep = (value: number, add: boolean) => {
- if (!add) {
- return (Math.round(value * 200) - step * 2) / 200;
- } else {
- return (Math.round(value * 200) + step * 2) / 200;
- }
- }
-
-
- return (
- {children}
-
-}
\ No newline at end of file
+ return (
+ {children}
+ );
+}
diff --git a/src/components/providers/ConfigContext.tsx b/src/components/providers/ConfigContext.tsx
new file mode 100644
index 000000000..9bbaf2532
--- /dev/null
+++ b/src/components/providers/ConfigContext.tsx
@@ -0,0 +1,16 @@
+import { ReactChild, useEffect } from 'react';
+import { ConfigContextC, useConfigProvider } from '../../hooks/config';
+
+export function ConfigContextProvider({ children }: { children: ReactChild }) {
+ const context = useConfigProvider();
+
+ useEffect(() => {
+ context.loadConfig();
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/settings/SettingsLayout.tsx b/src/components/settings/SettingsLayout.tsx
index b4d81e1b4..de7e14e5d 100644
--- a/src/components/settings/SettingsLayout.tsx
+++ b/src/components/settings/SettingsLayout.tsx
@@ -1,32 +1,26 @@
-import { ReactChild } from "react";
-import { NavLink } from "react-router-dom";
-import { useLayout } from "../../hooks/layout";
-import { CloseIcon } from "../commons/icon/CloseIcon";
-import { Navbar } from "../Navbar";
-import { SettingsSidebar } from "./SettingsSidebar";
+import { ReactChild } from 'react';
+import { useLayout } from '../../hooks/layout';
+import { Navbar } from '../Navbar';
+import { TopBar } from '../TopBar';
+import { SettingsSidebar } from './SettingsSidebar';
export function SettingsLayoutRoute({ children }: { children: ReactChild }) {
+ const { layoutHeight, ref } = useLayout();
- const { layoutHeight, ref } = useLayout();
-
- return (
- <>
-
+
+
+ );
+}
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
deleted file mode 100644
index b74ccdf9f..000000000
--- a/src/components/Modal.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ReactChild } from "react";
-import ReactModal from "react-modal";
-import { IconButton } from "./commons/ButtonIcon";
-import { CrossIcon } from "./commons/icon/CrossIcon";
-
-export function AppModal({ children, name, ...props }: { children?: ReactChild, name: ReactChild } & ReactModal.Props) {
-
- return (
-
+
-
- )
- }
\ No newline at end of file
+
{children}
-
-
-
+ )}
+
-
+
+
+
+
+
-
-
-
-
- {/* */}
-
-
-
- Settings
-
-
- - {name} -
-
- } className="fill-purple-gray-200" onClick={props.onRequestClose}>
-
-
- {children}
-
-
-
- {icon}
- {children}
-
+
+
+ {icon}
+
+
+ {children}
+
+
-
- )
-}
\ No newline at end of file
+export function Navbar() {
+ return (
+
-
- {children &&
-
-
-
- SlimeVR
-
- {children}
-
}
-
-
- appWindow.minimize()}>
-
- appWindow.toggleMaximize()}>
-
- appWindow.close()}>
-
-
+ }
+ >
+ Settings
+
+
+ );
+}
diff --git a/src/components/Overview.tsx b/src/components/Overview.tsx
deleted file mode 100644
index 947218cb7..000000000
--- a/src/components/Overview.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useMemo, useState } from "react";
-import { BodyPart, DataFeedMessage, DataFeedUpdateT, DeviceDataT, TrackerDataT } from "solarxr-protocol";
-import { useWebsocketAPI } from "../hooks/websocket-api";
-import { TrackerCard } from "./tracker/TrackerCard";
-// import { TrackerCard } from "./tracker/TrackerCard";
-
-interface FlatDeviceTracker {
- device?: DeviceDataT;
- tracker: TrackerDataT;
-}
-
-
-export function Overview() {
-
- const { useDataFeedPacket } = useWebsocketAPI();
- const [list, setDevicesList] = useState
+ }>
+ Home
+
+ }
+ >
+ Body proportions
+
+ }
+ >
+ Tracker assignment
+
+ }
+ >
+ Mounting Calibration
+
+ }>
+ Setup Wizard
+
+
+
-
-
- )
-}
\ No newline at end of file
diff --git a/src/components/ResetButton.tsx b/src/components/ResetButton.tsx
deleted file mode 100644
index 9e897e3b0..000000000
--- a/src/components/ResetButton.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useRef, useState } from "react";
-import { ResetRequestT, ResetType, RpcMessage } from "solarxr-protocol";
-import { useWebsocketAPI } from "../hooks/websocket-api";
-import { BigButton } from "./commons/BigButton";
-import { QuickResetIcon, ResetIcon } from "./commons/icon/ResetIcon";
-
-
-
-export function ResetButton({ type }: { type: ResetType }) {
-
- const timerid = useRef
- Assigned Trackers
-
-
- {asignedTrackers.map(({ tracker, device }, index) => )}
-
- {syntheticlist.length > 0 &&
- <>
-
- External Trackers
-
-
- {syntheticlist.map((tracker, index) =>
-
-
- }
- {unasignedTrackers.length > 0 &&
- <>
-
- Unassigned Trackers
-
-
- {unasignedTrackers.map(({tracker, device}, index) => )}
-
-
-
- }
-
+
+ );
+}
diff --git a/src/components/commons/ArrowLink.tsx b/src/components/commons/ArrowLink.tsx
new file mode 100644
index 000000000..645435aa2
--- /dev/null
+++ b/src/components/commons/ArrowLink.tsx
@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import { ReactChild, useMemo } from 'react';
+import { NavLink } from 'react-router-dom';
+import { ArrowLeftIcon, ArrowRightIcon } from './icon/ArrowIcons';
+
+export function ArrowLink({
+ to,
+ children,
+ direction = 'left',
+ variant = 'flat',
+}: {
+ to: string;
+ children: ReactChild;
+ direction?: 'left' | 'right';
+ variant?: 'flat' | 'boxed';
+}) {
+ const classes = useMemo(() => {
+ const variantsMap = {
+ flat: classNames('justify-start'),
+ boxed: classNames(
+ 'justify-between bg-background-70 rounded-md hover:bg-background-60 p-3'
+ ),
+ };
+ return classNames(
+ variantsMap[variant],
+ 'flex gap-2 hover:fill-background-10 hover:text-background-10 fill-background-30 text-background-30'
+ );
+ }, [variant]);
+
+ return (
+
+
+
+
+
+
+
+ SlimeVR
+
+
+ v{packagejson.version}
+
+
+
+
+ {progress !== undefined && (
+
+
+
+ appWindow.minimize()}
+ >
+
+ appWindow.toggleMaximize()}
+ >
+
+ appWindow.close()}
+ >
+
+
+
+ )}
+ {children}
+ {direction === 'right' && (
+
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/commons/Button.tsx b/src/components/commons/Button.tsx
index 55f2abf41..7791a4d1f 100644
--- a/src/components/commons/Button.tsx
+++ b/src/components/commons/Button.tsx
@@ -1,16 +1,103 @@
-import classNames from "classnames";
-import { ReactChild, useMemo } from "react";
+import classNames from 'classnames';
+import React, { ReactChild, useMemo } from 'react';
+import { NavLink } from 'react-router-dom';
+import { LoaderIcon } from './icon/LoaderIcon';
+function ButtonContent({
+ loading,
+ icon,
+ children,
+}: {
+ loading: boolean;
+ icon?: ReactChild;
+ children: ReactChild;
+}) {
+ return (
+ <>
+
+
+
+ {leftControls}
+
+
+
+
+
+
+ )
+ )}
+
+ {rightControls}
+
+
+ {icon && (
+
+ {loading && (
+
+ {icon}
+
+ )}
+ {children}
+
+
+ )}
+
+ );
+}
+export function Button({
+ children,
+ variant,
+ disabled,
+ to,
+ loading = false,
+ state = {},
+ icon,
+ rounded = false,
+ ...props
+}: {
+ children: ReactChild;
+ icon?: ReactChild;
+ variant: 'primary' | 'secondary' | 'tierciary';
+ to?: string;
+ loading?: boolean;
+ rounded?: boolean;
+ state?: any;
+} & React.ButtonHTMLAttributes
- {icon}
-
- )
-}
\ No newline at end of file
diff --git a/src/components/commons/Checkbox.tsx b/src/components/commons/Checkbox.tsx
index faa8727ea..b29df3cdf 100644
--- a/src/components/commons/Checkbox.tsx
+++ b/src/components/commons/Checkbox.tsx
@@ -1,13 +1,86 @@
import classNames from 'classnames';
-import { forwardRef, useId } from 'react'
+import { ReactChild, useMemo } from 'react';
+import { Control, Controller } from 'react-hook-form';
-export const CheckBox = forwardRef
-
-
+ return (
+ (
+ (({type, placeholder, ...props}, ref) => {
- return ;
-});
\ No newline at end of file
+export const Input = forwardRef(function AppInput(
+ { type, placeholder, label, autocomplete, ...props },
+ ref
+) {
+ const [forceText, setForceText] = useState(false);
+
+ const togglePassword = (e: MouseEvent) => {
+ e.preventDefault();
+ setForceText(!forceText);
+ };
+
+ return (
+
+ );
+});
diff --git a/src/components/commons/Modal.tsx b/src/components/commons/Modal.tsx
new file mode 100644
index 000000000..d3708caf1
--- /dev/null
+++ b/src/components/commons/Modal.tsx
@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import { ReactChild } from 'react';
+import ReactModal from 'react-modal';
+
+export function EmptyModal({
+ children,
+ ...props
+}: { children?: ReactChild } & ReactModal.Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/commons/NumberSelector.tsx b/src/components/commons/NumberSelector.tsx
index 0a951ba71..a019da0a6 100644
--- a/src/components/commons/NumberSelector.tsx
+++ b/src/components/commons/NumberSelector.tsx
@@ -1,50 +1,63 @@
-import classNames from "classnames";
-import { useMemo } from "react";
-import { Control, Controller } from "react-hook-form";
-import { Button } from "./Button";
+import { Control, Controller } from 'react-hook-form';
+import { Button } from './Button';
+import { Typography } from './Typography';
+export function NumberSelector({
+ label,
+ valueLabelFormat,
+ control,
+ name,
+ min,
+ max,
+ step,
+}: {
+ label: string;
+ valueLabelFormat?: (value: number) => string;
+ control: Control;
+ name: string;
+ min: number;
+ max: number;
+ step: number | ((value: number, add: boolean) => number);
+}) {
+ const stepFn =
+ typeof step === 'function'
+ ? step
+ : (value: number, add: boolean) => (add ? value + step : value - step);
-
-export function NumberSelector({ label, valueLabelFormat, control, name, min, max, step, variant }: { label: string, valueLabelFormat?: (value: number) => string, control: Control, name: string, min: number, max: number, step: number | ((value: number, add: boolean) => number), variant: 'smol' | 'big' }) {
-
- const variantClass = useMemo(() => {
- const variantsMap = {
- smol: {
- container: 'flex flex-col gap-1',
- label: 'flex text-field-title',
- value: 'flex justify-center items-center w-10 text-field-title'
- },
- big: {
- container: 'flex flex-row gap-5',
- label: 'flex flex-grow justify-start items-center text-field-title',
- value: 'flex justify-center items-center w-16 text-field-title'
- }
- };
- return variantsMap[variant];
- }, [variant])
-
-
- const stepFn = typeof step === 'function' ? step : (value: number, add: boolean) => add ? value + step : value - step;
-
-
- return (
- (
- (
+ ;
+ name: string;
+ label: string;
+ value: string | number;
+ desciption?: string;
+}) {
+ return (
+ (
+
+ )}
+ />
+ );
+}
diff --git a/src/components/commons/Select.tsx b/src/components/commons/Select.tsx
deleted file mode 100644
index b7bd63582..000000000
--- a/src/components/commons/Select.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-
-export type SelectOption = { label: string, value: any };
-
-export const Select = React.forwardRef(({ label, options, ...props }, ref) => {
- return (
- (null);
+ const [reseting, setReseting] = useState(false);
+ const [timer, setTimer] = useState(0);
+ const { sendRPCPacket } = useWebsocketAPI();
+
+ const reset = () => {
+ const req = new ResetRequestT();
+ req.resetType = type;
+ setReseting(true);
+ if (type !== ResetType.Quick) {
+ if (timerid.current) clearInterval(timerid.current);
+ timerid.current = setInterval(() => {
+ setTimer((timer) => {
+ if (timer + 1 === 3) {
+ if (timerid.current) clearInterval(timerid.current);
+ sendRPCPacket(RpcMessage.ResetRequest, req);
+ setTimer(0);
+ setReseting(false);
+ }
+ return timer + 1;
+ });
+ }, 1000);
+ } else {
+ sendRPCPacket(RpcMessage.ResetRequest, req);
+ setReseting(false);
+ }
+ };
+
+ return (
+
+
+ }
+ rightControls={
+
+
- )
-});
\ No newline at end of file
+ )}
+ />
+ );
+}
diff --git a/src/components/commons/Input.tsx b/src/components/commons/Input.tsx
index f56e51db1..639ecc2a0 100644
--- a/src/components/commons/Input.tsx
+++ b/src/components/commons/Input.tsx
@@ -1,16 +1,54 @@
-import { forwardRef, HTMLInputTypeAttribute } from "react";
+import classNames from 'classnames';
+import {
+ forwardRef,
+ HTMLInputTypeAttribute,
+ MouseEvent,
+ useState,
+} from 'react';
+import { EyeIcon } from './icon/EyeIcon';
export interface InputProps {
- type: HTMLInputTypeAttribute,
- placeholder?: string
+ type: HTMLInputTypeAttribute;
+ placeholder?: string;
+ label?: string;
+ autocomplete?: boolean;
}
-export const Input = forwardRef
-
- )}
- />
- )
-}
\ No newline at end of file
+ return (
+ {label}
-
-
-
-
-
- {valueLabelFormat ? valueLabelFormat(value) : value}
-
-
-
-
+ {label}
+
+ )}
+ />
+ );
+}
diff --git a/src/components/commons/PersonFrontIcon.tsx b/src/components/commons/PersonFrontIcon.tsx
new file mode 100644
index 000000000..a954de080
--- /dev/null
+++ b/src/components/commons/PersonFrontIcon.tsx
@@ -0,0 +1,151 @@
+import { BodyPart } from 'solarxr-protocol';
+
+export function PersonFrontIcon({ width }: { width?: number }) {
+ const CIRCLE_RADIUS = 0.0001;
+
+ return (
+
+ );
+}
diff --git a/src/components/commons/ProgressBar.tsx b/src/components/commons/ProgressBar.tsx
new file mode 100644
index 000000000..5df41c2cd
--- /dev/null
+++ b/src/components/commons/ProgressBar.tsx
@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import { useMemo } from 'react';
+
+export function ProgressBar({
+ progress,
+ parts = 1,
+ height = 10,
+}: {
+ progress: number;
+ parts?: number;
+ height?: number;
+}) {
+ const Bar = ({ index }: { index: number }) => {
+ const value = useMemo(
+ () => Math.min(Math.max((progress * parts) / 1 - index, 0), 1),
+ [index, progress]
+ );
+ return (
+
+
+
+
+
+
+ {valueLabelFormat ? valueLabelFormat(value) : value}
+
+
+
+
+
+
+
+ );
+ };
+
+ return (
+
+ {Array.from({ length: parts }).map((_, key) => (
+
+ );
+}
diff --git a/src/components/commons/Radio.tsx b/src/components/commons/Radio.tsx
new file mode 100644
index 000000000..f609ed41a
--- /dev/null
+++ b/src/components/commons/Radio.tsx
@@ -0,0 +1,53 @@
+import classNames from 'classnames';
+import { Control, Controller } from 'react-hook-form';
+import { Typography } from './Typography';
+
+export function Radio({
+ control,
+ name,
+ label,
+ value,
+ desciption,
+}: {
+ control: Control
- {label && {label}}
-
-
- )
-});
\ No newline at end of file
diff --git a/src/components/commons/TipBox.tsx b/src/components/commons/TipBox.tsx
new file mode 100644
index 000000000..87251fb19
--- /dev/null
+++ b/src/components/commons/TipBox.tsx
@@ -0,0 +1,13 @@
+import { ReactChild } from 'react';
+import { BulbIcon } from './icon/BulbIcon';
+
+export function TipBox({ children }: { children: ReactChild }) {
+ return (
+
+
+ );
+}
diff --git a/src/components/commons/Typography.tsx b/src/components/commons/Typography.tsx
new file mode 100644
index 000000000..b26b6c803
--- /dev/null
+++ b/src/components/commons/Typography.tsx
@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import { createElement, ReactNode, useMemo } from 'react';
+
+export function Typography({
+ variant = 'standard',
+ bold = false,
+ color = 'primary',
+ children,
+}: {
+ variant?: 'main-title' | 'section-title' | 'standard' | 'vr-accessible';
+ bold?: boolean;
+ block?: boolean;
+ color?: 'primary' | 'secondary' | string;
+ children: ReactNode;
+}) {
+ const tag = useMemo(() => {
+ const tags = {
+ 'main-title': 'h1',
+ 'section-title': 'h2',
+ standard: 'p',
+ 'vr-accessible': 'p',
+ };
+ return tags[variant];
+ }, [variant]);
+
+ return createElement(
+ tag,
+ {
+ className: classNames([
+ variant === 'main-title' && 'text-main-title',
+ variant === 'section-title' && 'text-section-title',
+ variant === 'standard' &&
+ (bold ? 'text-standard-bold' : 'text-standard'),
+ variant === 'vr-accessible' &&
+ (bold ? 'text-vr-accesible-bold' : 'text-vr-accesible'),
+ color === 'primary' && 'text-background-10',
+ color === 'secondary' && 'text-background-30',
+ typeof color === 'string' && color,
+ ]),
+ },
+ children
+ );
+}
diff --git a/src/components/commons/icon/ArrowDownIcon.tsx b/src/components/commons/icon/ArrowDownIcon.tsx
deleted file mode 100644
index 59549624a..000000000
--- a/src/components/commons/icon/ArrowDownIcon.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-export function ArrowDownIcon() {
- return (
-
- )
-}
\ No newline at end of file
diff --git a/src/components/commons/icon/ArrowIcons.tsx b/src/components/commons/icon/ArrowIcons.tsx
new file mode 100644
index 000000000..3ab59e37b
--- /dev/null
+++ b/src/components/commons/icon/ArrowIcons.tsx
@@ -0,0 +1,48 @@
+export function ArrowDownIcon() {
+ return (
+
+ );
+}
+
+export function ArrowLeftIcon() {
+ return (
+
+ );
+}
+
+export function ArrowRightIcon() {
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/BatteryIcon.tsx b/src/components/commons/icon/BatteryIcon.tsx
index 32d77549d..a02fd0b77 100644
--- a/src/components/commons/icon/BatteryIcon.tsx
+++ b/src/components/commons/icon/BatteryIcon.tsx
@@ -1,31 +1,64 @@
-import classNames from "classnames";
-import { useMemo } from "react";
+import classNames from 'classnames';
+import { useMemo } from 'react';
-export function BatteryIcon({ value }: { value: number }) {
+export function BatteryIcon({
+ value,
+ disabled = false,
+}: {
+ value: number;
+ disabled?: boolean;
+}) {
+ const col = useMemo(() => {
+ const colorsMap: { [key: number]: string } = {
+ 0.4: 'fill-status-success',
+ 0.2: 'fill-status-warning',
+ 0: 'fill-status-critical',
+ };
- const col = useMemo(() => {
+ const val = Object.keys(colorsMap)
+ .filter((key) => +key < value)
+ .sort((a, b) => +b - +a)[0];
+ return disabled
+ ? 'fill-background-40'
+ : colorsMap[+val] || 'fill-background-10';
+ }, [value, disabled]);
- const colorsMap: { [key: number]: string } = {
- 0.4: 'fill-status-online',
- 0.2: 'fill-status-warning',
- 0: 'fill-status-error',
- }
-
- const val = Object.keys(colorsMap).filter(key => +key < value).sort((a, b) => +b - +a)[0];
- return colorsMap[+val] || 'fill-primary-gray-600';
- }, [value])
-
- return (
-
- );
-}
\ No newline at end of file
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/BulbIcon.tsx b/src/components/commons/icon/BulbIcon.tsx
new file mode 100644
index 000000000..ee077ac70
--- /dev/null
+++ b/src/components/commons/icon/BulbIcon.tsx
@@ -0,0 +1,12 @@
+export function BulbIcon() {
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/CheckIcon.tsx b/src/components/commons/icon/CheckIcon.tsx
new file mode 100644
index 000000000..ee06dc53a
--- /dev/null
+++ b/src/components/commons/icon/CheckIcon.tsx
@@ -0,0 +1,19 @@
+export function CheckIcon(props: any) {
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/CircleIcon.tsx b/src/components/commons/icon/CircleIcon.tsx
index fc94d04f6..facf013da 100644
--- a/src/components/commons/icon/CircleIcon.tsx
+++ b/src/components/commons/icon/CircleIcon.tsx
@@ -1,8 +1,13 @@
-
export function CircleIcon(props: any) {
- return (
-
- )
-}
\ No newline at end of file
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/CloseIcon.tsx b/src/components/commons/icon/CloseIcon.tsx
index f68b206e9..4ecc38a7f 100644
--- a/src/components/commons/icon/CloseIcon.tsx
+++ b/src/components/commons/icon/CloseIcon.tsx
@@ -1,11 +1,29 @@
-
-
-
-export function CloseIcon({ className, size = 35 }: { className?: string, size?: number }) {
- return (
-
- )
-}
\ No newline at end of file
+export function CloseIcon({
+ className,
+ size = 35,
+}: {
+ className?: string;
+ size?: number;
+}) {
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/CrossIcon.tsx b/src/components/commons/icon/CrossIcon.tsx
index 26faa8abf..1c4f94a55 100644
--- a/src/components/commons/icon/CrossIcon.tsx
+++ b/src/components/commons/icon/CrossIcon.tsx
@@ -1,5 +1,11 @@
-
-
export function CrossIcon() {
- return ( )
-}
\ No newline at end of file
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/CubeIcon.tsx b/src/components/commons/icon/CubeIcon.tsx
index 61e89b4ed..4a1b804db 100644
--- a/src/components/commons/icon/CubeIcon.tsx
+++ b/src/components/commons/icon/CubeIcon.tsx
@@ -1,10 +1,15 @@
-
export function CubeIcon(props: any) {
- return (
-
- )
-}
\ No newline at end of file
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/EyeIcon.tsx b/src/components/commons/icon/EyeIcon.tsx
new file mode 100644
index 000000000..f4ebad00a
--- /dev/null
+++ b/src/components/commons/icon/EyeIcon.tsx
@@ -0,0 +1,12 @@
+export function EyeIcon() {
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/FootIcon.tsx b/src/components/commons/icon/FootIcon.tsx
new file mode 100644
index 000000000..bf26e53a7
--- /dev/null
+++ b/src/components/commons/icon/FootIcon.tsx
@@ -0,0 +1,12 @@
+export function FootIcon({ width }: { width?: number }) {
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/FrontOfChair.tsx b/src/components/commons/icon/FrontOfChair.tsx
new file mode 100644
index 000000000..04d361bbb
--- /dev/null
+++ b/src/components/commons/icon/FrontOfChair.tsx
@@ -0,0 +1,20 @@
+export function FromtOfChairIcon() {
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/GearIcon.tsx b/src/components/commons/icon/GearIcon.tsx
index 3f59293ef..668ea636b 100644
--- a/src/components/commons/icon/GearIcon.tsx
+++ b/src/components/commons/icon/GearIcon.tsx
@@ -1,9 +1,12 @@
-
-
export function GearIcon() {
- return (
-
- )
-}
\ No newline at end of file
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/LoaderIcon.tsx b/src/components/commons/icon/LoaderIcon.tsx
new file mode 100644
index 000000000..3360de9ec
--- /dev/null
+++ b/src/components/commons/icon/LoaderIcon.tsx
@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+
+export function LoaderIcon({
+ youSpinMeRightRoundBabyRightRound = false,
+}: {
+ youSpinMeRightRoundBabyRightRound?: boolean;
+}) {
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/MaximiseIcon.tsx b/src/components/commons/icon/MaximiseIcon.tsx
index 886e23a38..e5bb192c9 100644
--- a/src/components/commons/icon/MaximiseIcon.tsx
+++ b/src/components/commons/icon/MaximiseIcon.tsx
@@ -1,10 +1,17 @@
-
-
-
export function MaximiseIcon({ className }: { className?: string }) {
- return (
-
- )
-}
\ No newline at end of file
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/MinimiseIcon.tsx b/src/components/commons/icon/MinimiseIcon.tsx
index 79c503016..430fac71e 100644
--- a/src/components/commons/icon/MinimiseIcon.tsx
+++ b/src/components/commons/icon/MinimiseIcon.tsx
@@ -1,10 +1,14 @@
-
-
-
export function MinimiseIcon({ className }: { className?: string }) {
- return (
-
- )
-}
\ No newline at end of file
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/RecordIcon.tsx b/src/components/commons/icon/RecordIcon.tsx
index 26341f02c..905ce2d32 100644
--- a/src/components/commons/icon/RecordIcon.tsx
+++ b/src/components/commons/icon/RecordIcon.tsx
@@ -1,9 +1,7 @@
-
-
export function RecordIcon() {
- return (
-
- )
-}
\ No newline at end of file
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/ResetIcon.tsx b/src/components/commons/icon/ResetIcon.tsx
index 9b86d1409..60a117408 100644
--- a/src/components/commons/icon/ResetIcon.tsx
+++ b/src/components/commons/icon/ResetIcon.tsx
@@ -1,20 +1,57 @@
-
-
export function ResetIcon() {
- return (
-
- )
+ return (
+
+ );
}
export function QuickResetIcon() {
- return (
-
- )
-}
\ No newline at end of file
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/SimevrIcon.tsx b/src/components/commons/icon/SimevrIcon.tsx
index e86896bc9..2203d5e34 100644
--- a/src/components/commons/icon/SimevrIcon.tsx
+++ b/src/components/commons/icon/SimevrIcon.tsx
@@ -1,12 +1,31 @@
-
-
-
export function SlimeVRIcon({ drag }: { drag?: boolean }) {
- return (
-
- )
-}
\ No newline at end of file
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/SquaresIcon.tsx b/src/components/commons/icon/SquaresIcon.tsx
new file mode 100644
index 000000000..3d5a37b78
--- /dev/null
+++ b/src/components/commons/icon/SquaresIcon.tsx
@@ -0,0 +1,15 @@
+export function SquaresIcon() {
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/SteamIcon.tsx b/src/components/commons/icon/SteamIcon.tsx
new file mode 100644
index 000000000..283d01f49
--- /dev/null
+++ b/src/components/commons/icon/SteamIcon.tsx
@@ -0,0 +1,12 @@
+export function SteamIcon() {
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/WifiIcon.tsx b/src/components/commons/icon/WifiIcon.tsx
index 17b2c1227..5ed3a1d07 100644
--- a/src/components/commons/icon/WifiIcon.tsx
+++ b/src/components/commons/icon/WifiIcon.tsx
@@ -1,34 +1,68 @@
-import classNames from "classnames";
-import { useMemo } from "react"
+import classNames from 'classnames';
+import { useMemo } from 'react';
+export function WifiIcon({
+ value,
+ disabled = false,
+}: {
+ value: number;
+ disabled?: boolean;
+}) {
+ const percent = useMemo(
+ () =>
+ value
+ ? Math.max(
+ Math.min(((value - -95) * (100 - 0)) / (-40 - -95) + 0, 100)
+ ) / 100
+ : 0,
+ [value]
+ );
-export function WifiIcon({ value }: { value: number }) {
+ const y = useMemo(() => (percent ? (1 - percent) * 13 : 0), [percent]);
- const percent = useMemo(() => value ? Math.max(Math.min((value - -95) * (100 - 0) / (-40 - -95) + 0, 100)) / 100 : 0, [value])
+ const col = useMemo(() => {
+ const colorsMap: { [key: number]: string } = {
+ 0.4: 'fill-status-success',
+ 0.2: 'fill-status-warning',
+ 0: 'fill-status-critical',
+ };
- const y = useMemo(() => percent ? (1 - percent) * 13 : 0 , [percent])
+ const val = Object.keys(colorsMap)
+ .filter((key) => +key < percent)
+ .sort((a, b) => +b - +a)[0];
+ return disabled
+ ? 'fill-background-40'
+ : colorsMap[+val] || 'fill-background-10';
+ }, [percent, disabled]);
- const col = useMemo(() => {
-
- const colorsMap: { [key: number]: string } = {
- 0.4: 'fill-status-online',
- 0.2: 'fill-status-warning',
- 0: 'fill-status-error',
- }
-
- const val = Object.keys(colorsMap).filter(key => +key < percent).sort((a, b) => +b - +a)[0];
- return colorsMap[+val] || 'fill-primary-gray-600';
- }, [percent])
-
- return (
-
- )
-}
\ No newline at end of file
+ return (
+
+ );
+}
diff --git a/src/components/commons/icon/WrenchIcons.tsx b/src/components/commons/icon/WrenchIcons.tsx
new file mode 100644
index 000000000..e9eb3d4bd
--- /dev/null
+++ b/src/components/commons/icon/WrenchIcons.tsx
@@ -0,0 +1,12 @@
+export function WrenchIcon() {
+ return (
+
+ );
+}
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
new file mode 100644
index 000000000..40ceca845
--- /dev/null
+++ b/src/components/home/Home.tsx
@@ -0,0 +1,56 @@
+import { useNavigate } from 'react-router-dom';
+import { TrackerDataT } from 'solarxr-protocol';
+import { useConfig } from '../../hooks/config';
+import { useTrackers } from '../../hooks/tracker';
+import { Typography } from '../commons/Typography';
+import { TrackerCard } from '../tracker/TrackerCard';
+import { TrackersTable } from '../tracker/TrackersTable';
+
+export function Home() {
+ const { config } = useConfig();
+ const { useAssignedTrackers } = useTrackers();
+ const navigate = useNavigate();
+
+ const asignedTrackers = useAssignedTrackers();
+
+ const sendToSettings = (tracker: TrackerDataT) => {
+ navigate(
+ `/tracker/${tracker.trackerId?.trackerNum}/${tracker.trackerId?.deviceId?.id}`
+ );
+ };
+
+ return (
+
+
+ {children}
+
+ {asignedTrackers.length === 0 && (
+
+ );
+}
diff --git a/src/components/home/ResetButton.tsx b/src/components/home/ResetButton.tsx
new file mode 100644
index 000000000..f6f9865d1
--- /dev/null
+++ b/src/components/home/ResetButton.tsx
@@ -0,0 +1,50 @@
+import { useRef, useState } from 'react';
+import { ResetRequestT, ResetType, RpcMessage } from 'solarxr-protocol';
+import { useWebsocketAPI } from '../../hooks/websocket-api';
+import { BigButton } from '../commons/BigButton';
+import { QuickResetIcon, ResetIcon } from '../commons/icon/ResetIcon';
+
+export function ResetButton({ type }: { type: ResetType }) {
+ const timerid = useRef
+
+ No trackers detected or assigned
+
+
+ )}
+
+ {!config?.debug && (
+
+ {asignedTrackers.map(({ tracker, device }, index) => (
+ sendToSettings(tracker)}
+ smol
+ interactable
+ />
+ ))}{' '}
+
+ )}
+ {config?.debug && (
+
+ sendToSettings(tracker)}
+ >
+
+ )}
+
+ {advanced && (
+ onRoleSelected(BodyPart.HMD)}
+ direction="right"
+ />
+ )}
+ {advanced && (
+ onRoleSelected(BodyPart.NECK)}
+ direction="right"
+ />
+ )}
+
+
+
+ {advanced && (
+ onRoleSelected(BodyPart.RIGHT_SHOULDER)}
+ direction="right"
+ />
+ )}
+ onRoleSelected(BodyPart.RIGHT_UPPER_ARM)}
+ direction="right"
+ />
+
+
+ onRoleSelected(BodyPart.RIGHT_LOWER_ARM)}
+ direction="right"
+ />
+
+ {advanced && (
+ onRoleSelected(BodyPart.RIGHT_HAND)}
+ direction="right"
+ />
+ )}
+
+
+ onRoleSelected(BodyPart.RIGHT_UPPER_LEG)}
+ direction="right"
+ />
+
+ onRoleSelected(BodyPart.RIGHT_LOWER_LEG)}
+ direction="right"
+ />
+ onRoleSelected(BodyPart.RIGHT_FOOT)}
+ direction="right"
+ />
+
+
+ onRoleSelected(BodyPart.CHEST)}
+ direction="left"
+ />
+
+
+ }
+ >
+
+ );
+}
diff --git a/src/components/onboarding/OnboardingContextProvicer.tsx b/src/components/onboarding/OnboardingContextProvicer.tsx
new file mode 100644
index 000000000..98074597c
--- /dev/null
+++ b/src/components/onboarding/OnboardingContextProvicer.tsx
@@ -0,0 +1,19 @@
+import { ReactChild } from 'react';
+import {
+ OnboardingContextC,
+ useProvideOnboarding,
+} from '../../hooks/onboarding';
+
+export function OnboardingContextProvider({
+ children,
+}: {
+ children: ReactChild;
+}) {
+ const context = useProvideOnboarding();
+
+ return (
+
+ {advanced && (
+ onRoleSelected(BodyPart.LEFT_SHOULDER)}
+ direction="left"
+ />
+ )}
+
+ onRoleSelected(BodyPart.LEFT_UPPER_ARM)}
+ direction="left"
+ />
+
+
+
+ onRoleSelected(BodyPart.LEFT_LOWER_ARM)}
+ direction="left"
+ />
+ {advanced && (
+ onRoleSelected(BodyPart.LEFT_HAND)}
+ role={BodyPart.LEFT_HAND}
+ direction="left"
+ />
+ )}
+
+
+
+ onRoleSelected(BodyPart.WAIST)}
+ role={BodyPart.WAIST}
+ direction="left"
+ />
+ onRoleSelected(BodyPart.HIP)}
+ role={BodyPart.HIP}
+ direction="left"
+ />
+
+
+ onRoleSelected(BodyPart.LEFT_UPPER_LEG)}
+ direction="left"
+ />
+
+ onRoleSelected(BodyPart.LEFT_LOWER_LEG)}
+ direction="left"
+ />
+ onRoleSelected(BodyPart.LEFT_FOOT)}
+ direction="left"
+ />
+
+
+ {children}
+
+
+ ) : (
+ {children}
+
+ {label}
+ {td?.map(({ tracker }, index) => (
+ updateVelocity(vel)}
+ />
+ ))}
+ {!td && Unassigned }
+
+ )) || <>
+ );
+}
diff --git a/src/components/onboarding/pages/ConnectTracker.tsx b/src/components/onboarding/pages/ConnectTracker.tsx
new file mode 100644
index 000000000..2fc829f47
--- /dev/null
+++ b/src/components/onboarding/pages/ConnectTracker.tsx
@@ -0,0 +1,224 @@
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+ CloseSerialRequestT,
+ OpenSerialRequestT,
+ RpcMessage,
+ SerialUpdateResponseT,
+ SetWifiRequestT,
+} from 'solarxr-protocol';
+import { useLayout } from '../../../hooks/layout';
+import { useOnboarding } from '../../../hooks/onboarding';
+import { useTrackers } from '../../../hooks/tracker';
+import { useWebsocketAPI } from '../../../hooks/websocket-api';
+import { ArrowLink } from '../../commons/ArrowLink';
+import { Button } from '../../commons/Button';
+import { LoaderIcon } from '../../commons/icon/LoaderIcon';
+import { TipBox } from '../../commons/TipBox';
+import { Typography } from '../../commons/Typography';
+import { TrackerCard } from '../../tracker/TrackerCard';
+
+const BOTTOM_HEIGHT = 80;
+type ConnectionStatus =
+ | 'CONNECTING'
+ | 'CONNECTED'
+ | 'HANDSHAKE'
+ | 'ERROR'
+ | 'START-CONNECTING';
+
+const statusLabelMap = {
+ ['CONNECTING']: 'Sending wifi credentials',
+ ['CONNECTED']: 'Connected to WiFi',
+ ['ERROR']: 'Unable to connect to Wifi',
+ ['START-CONNECTING']: 'Looking for trackers',
+ ['HANDSHAKE']: 'Connected to the Server',
+};
+
+export function ConnectTrackersPage() {
+ const { layoutHeight, ref } = useLayout
+
+ );
+}
diff --git a/src/components/onboarding/pages/Done.tsx b/src/components/onboarding/pages/Done.tsx
new file mode 100644
index 000000000..38c286c9b
--- /dev/null
+++ b/src/components/onboarding/pages/Done.tsx
@@ -0,0 +1,28 @@
+import { NavLink } from 'react-router-dom';
+import { useOnboarding } from '../../../hooks/onboarding';
+import { Button } from '../../commons/Button';
+import { SlimeVRIcon } from '../../commons/icon/SimevrIcon';
+import { Typography } from '../../commons/Typography';
+
+export function DonePage() {
+ const { applyProgress, skipSetup } = useOnboarding();
+
+ applyProgress(1);
+
+ return (
+
+
+
+
+ Go Back to WiFi credentials
+
+ Connect trackers
+
+ Now onto the fun part, connecting all the trackers!
+
+
+ Simply connect all that aren't connected yet, through a USB port.
+
+
+ Not sure which tracker is which? Shake a tracker and it will
+ highlight the corresponding item.
+
+
+
+
+
+ I have other types of trackers
+
+
+ I'm having trouble connecting!
+
+
+
+
+
+
+
+ USB Tracker
+
+ {statusLabelMap[connectionStatus]}
+
+
+
+
+ {connectedTrackers.length} trackers connected
+
+
+
+
+
+
+ {Array.from({
+ ...connectedTrackers,
+ length: Math.max(trackers.length, 20),
+ }).map((tracker, index) => (
+
+
+ {!tracker && (
+
+ )}
+ {tracker && (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/EnterVR.tsx b/src/components/onboarding/pages/EnterVR.tsx
new file mode 100644
index 000000000..d72afcd45
--- /dev/null
+++ b/src/components/onboarding/pages/EnterVR.tsx
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { BodyPart } from 'solarxr-protocol';
+import { useOnboarding } from '../../../hooks/onboarding';
+import { useTrackers } from '../../../hooks/tracker';
+import { ArrowLink } from '../../commons/ArrowLink';
+import { Button } from '../../commons/Button';
+import { Typography } from '../../commons/Typography';
+
+export function EnterVRPage() {
+ const { applyProgress, skipSetup } = useOnboarding();
+
+ applyProgress(0.6);
+
+ return (
+ <>
+
+ You're all set!
+
+
+
+ Enjoy your full body experience
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/Home.tsx b/src/components/onboarding/pages/Home.tsx
new file mode 100644
index 000000000..63a670404
--- /dev/null
+++ b/src/components/onboarding/pages/Home.tsx
@@ -0,0 +1,59 @@
+import { NavLink } from 'react-router-dom';
+import { useOnboarding } from '../../../hooks/onboarding';
+import { Button } from '../../commons/Button';
+import { SlimeVRIcon } from '../../commons/icon/SimevrIcon';
+import { Typography } from '../../commons/Typography';
+
+export function HomePage() {
+ const { applyProgress, skipSetup } = useOnboarding();
+
+ applyProgress(0.1);
+
+ return (
+
+
+
+
+
+
+ Go Back to Tracker assignent
+
+ Time to enter VR!
+
+ Put on all your trackers and then enter VR!
+
+
+ {/*
+ Illustration HERE
+
*/}
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+ );
+}
diff --git a/src/components/onboarding/pages/ResetTutorial.tsx b/src/components/onboarding/pages/ResetTutorial.tsx
new file mode 100644
index 000000000..4da04f1e4
--- /dev/null
+++ b/src/components/onboarding/pages/ResetTutorial.tsx
@@ -0,0 +1,47 @@
+import { useOnboarding } from '../../../hooks/onboarding';
+import { ArrowLink } from '../../commons/ArrowLink';
+import { Button } from '../../commons/Button';
+import { Typography } from '../../commons/Typography';
+
+export function ResetTutorialPage() {
+ const { applyProgress, skipSetup } = useOnboarding();
+
+ applyProgress(0.8);
+
+ return (
+ <>
+
+ Welcome to SlimeVR
+
+ Skip setup
+
+
+
+
+
+ Bringing full-body tracking
+ to everyone
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/WifiCreds.tsx b/src/components/onboarding/pages/WifiCreds.tsx
new file mode 100644
index 000000000..fe77c389a
--- /dev/null
+++ b/src/components/onboarding/pages/WifiCreds.tsx
@@ -0,0 +1,92 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { useOnboarding } from '../../../hooks/onboarding';
+import { ArrowLink } from '../../commons/ArrowLink';
+import { Button } from '../../commons/Button';
+import { Input } from '../../commons/Input';
+import { Typography } from '../../commons/Typography';
+
+export interface WifiForm {
+ ssid: string;
+ password: string;
+}
+
+export function WifiCredsPage() {
+ const navigate = useNavigate();
+ const { applyProgress, state, setWifiCredentials, skipSetup } =
+ useOnboarding();
+ const { register, reset, handleSubmit, formState } = useForm
+
+
+
+
+
+ Go Back to Mounting calibration
+
+
+ Reset tutorial
+
+ Work in progress
+
+
+
+ This feature isn't done, just press continue
+
+
+
+
+
+
+
+
+
+
+
+ {active && (
+
+ )}
+ {done &&
+ );
+}
+
+export function StepContainer({
+ children,
+ width,
+ active,
+ type,
+ step,
+ variant,
+}: {
+ type: 'numbered' | 'fullsize';
+ variant: 'alone' | 'onboarding';
+ children: ReactChild;
+ width: number;
+ active: boolean;
+ step: number;
+}) {
+ return (
+
+ {type === 'numbered' && (
+
+ );
+}
+
+type StepComponentType = FC<{
+ nextStep: () => void;
+ prevStep: () => void;
+ variant: 'alone' | 'onboarding';
+}>;
+type Step = { type: 'numbered' | 'fullsize'; component: StepComponentType };
+
+export function AutoboneStepper({
+ variant,
+}: {
+ variant: 'alone' | 'onboarding';
+}) {
+ const ref = useRef
+
+ )}
+ {children}
+
+
+ {step + 1}
+
+
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx b/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
new file mode 100644
index 000000000..6fe3ec052
--- /dev/null
+++ b/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx
@@ -0,0 +1,70 @@
+import {
+ AutoboneContextC,
+ useProvideAutobone,
+} from '../../../../hooks/autobone';
+import { useOnboarding } from '../../../../hooks/onboarding';
+import { ArrowLink } from '../../../commons/ArrowLink';
+import { Button } from '../../../commons/Button';
+import { Typography } from '../../../commons/Typography';
+import { AutoboneStepper } from './AutoboneStepper';
+
+export function AutomaticProportionsPage() {
+ const { applyProgress, skipSetup, state } = useOnboarding();
+ const context = useProvideAutobone();
+
+ applyProgress(0.9);
+
+ return (
+
+
+
+ {stepsComponents.map(({ type, component: StepComponent }, index) => (
+
+
+ ))}
+
+
+ {Array.from({ length: steps }).map((_, index) => (
+
+
+ {index !== 0 && (
+
+ )}
+ setStep(index)}
+ />
+
+ ))}
+
+
+
+
+
+ {!state.alonePage && (
+
+ Go Back to Reset tutorial
+
+ )}
+ Measure your body
+
+
+
+ For SlimeVR trackers to work, we need to know the length of your
+ bones.
+
+
+ This short calibration will measure it for you.
+
+
+
+
+
+
+
+ {!state.alonePage && (
+
+ )}
+
+
+
+ {!state.alonePage && (
+
+ )}
+
+
+
+ {children}
+
+
+ );
+}
+
+export function BodyProportions({
+ precise,
+ variant = 'onboarding',
+}: {
+ precise: boolean;
+ variant: 'onboarding' | 'alone';
+}) {
+ const { useRPCPacket, sendRPCPacket } = useWebsocketAPI();
+ const [config, setConfig] = useState
+
+ );
+}
diff --git a/src/components/onboarding/pages/body-proportions/ManualProportions.tsx b/src/components/onboarding/pages/body-proportions/ManualProportions.tsx
new file mode 100644
index 000000000..3ec8f3aaf
--- /dev/null
+++ b/src/components/onboarding/pages/body-proportions/ManualProportions.tsx
@@ -0,0 +1,78 @@
+import { useForm } from 'react-hook-form';
+import { useOnboarding } from '../../../../hooks/onboarding';
+import { ArrowLink } from '../../../commons/ArrowLink';
+import { Button } from '../../../commons/Button';
+import { CheckBox } from '../../../commons/Checkbox';
+import { PersonFrontIcon } from '../../../commons/PersonFrontIcon';
+import { Typography } from '../../../commons/Typography';
+import { BodyProportions } from './BodyProportions';
+
+export function ManualProportionsPage() {
+ const { applyProgress, skipSetup, state } = useOnboarding();
+
+ applyProgress(0.9);
+
+ const { control, watch } = useForm<{ precise: boolean }>({
+ defaultValues: { precise: false },
+ });
+ const { precise } = watch();
+
+ return (
+ <>
+
+ {bodyParts.map(({ label, bone, value }) => (
+
+
+
+
+ ))}
+
+ {!precise && (
+ decrement(value, 10)}>
+ -10
+
+ )}
+ decrement(value, 1)}>
+ -1
+
+ {precise && (
+ decrement(value, 0.5)}>
+ -0.5
+
+ )}
+
+ setSelectedBone(bone)}
+ >
+
+
+
+ {label}
+
+
+ {Number(value * 100)
+ .toFixed(1)
+ .replace(/[.,]0$/, '')}{' '}
+ CM
+
+
+
+ {precise && (
+ increment(value, 0.5)}>
+ +0.5
+
+ )}
+ increment(value, 1)}>
+ +1
+
+ {!precise && (
+ increment(value, 10)}>
+ +10
+
+ )}
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/body-proportions/autobone-steps/Done.tsx b/src/components/onboarding/pages/body-proportions/autobone-steps/Done.tsx
new file mode 100644
index 000000000..64fb4b8f6
--- /dev/null
+++ b/src/components/onboarding/pages/body-proportions/autobone-steps/Done.tsx
@@ -0,0 +1,17 @@
+import { Typography } from '../../../../commons/Typography';
+
+export function DoneStep() {
+ return (
+
+
+
+
+
+
+
+ {!state.alonePage && (
+
+ Go Back to Reset tutorial
+
+ )}
+
+ Manual Body Proportions
+
+
+
+
+
+
+
+ {!state.alonePage && (
+
+ )}
+
+
+
+ {!state.alonePage && (
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/body-proportions/autobone-steps/Preparation.tsx b/src/components/onboarding/pages/body-proportions/autobone-steps/Preparation.tsx
new file mode 100644
index 000000000..8d1f4d25a
--- /dev/null
+++ b/src/components/onboarding/pages/body-proportions/autobone-steps/Preparation.tsx
@@ -0,0 +1,32 @@
+import { Button } from '../../../../commons/Button';
+import { FromtOfChairIcon } from '../../../../commons/icon/FrontOfChair';
+import { Typography } from '../../../../commons/Typography';
+
+export function PreparationStep({ nextStep }: { nextStep: () => void }) {
+ return (
+ <>
+
+
+ Body measured and saved!
+
+
+ Your body proportions calibtation is complete
+
+
+ {/* */}
+
+
+
+
+ Preparation
+
+
+
+
+
+ Grab a chair and stand in front of it. such that you can
+
+ sit down at any moment.
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/body-proportions/autobone-steps/PutTrackersOn.tsx b/src/components/onboarding/pages/body-proportions/autobone-steps/PutTrackersOn.tsx
new file mode 100644
index 000000000..fb77bc236
--- /dev/null
+++ b/src/components/onboarding/pages/body-proportions/autobone-steps/PutTrackersOn.tsx
@@ -0,0 +1,44 @@
+import { Button } from '../../../../commons/Button';
+import { PersonFrontIcon } from '../../../../commons/PersonFrontIcon';
+import { TipBox } from '../../../../commons/TipBox';
+import { Typography } from '../../../../commons/Typography';
+
+export function PutTrackersOnStep({ nextStep }: { nextStep: () => void }) {
+ return (
+ <>
+
+
+
+
+ Put on your trackers
+
+
+
+
+
+ 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.
+
+
+
+
+ Not sure which tracker is which? Shake a tracker and it will
+ highlight the corresponding item.
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/body-proportions/autobone-steps/Recording.tsx b/src/components/onboarding/pages/body-proportions/autobone-steps/Recording.tsx
new file mode 100644
index 000000000..1f262cebd
--- /dev/null
+++ b/src/components/onboarding/pages/body-proportions/autobone-steps/Recording.tsx
@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { useAutobone } from '../../../../../hooks/autobone';
+import { ProgressBar } from '../../../../commons/ProgressBar';
+import { Typography } from '../../../../commons/Typography';
+
+export function Recording({ nextStep }: { nextStep: () => void }) {
+ const { progress, hasCalibration, hasRecording } = useAutobone();
+
+ useEffect(() => {
+ if (progress === 1 && hasCalibration) {
+ nextStep();
+ }
+ }, [progress, hasCalibration]);
+
+ return (
+
+
+ Do squads (we probably want illustrations here)
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/body-proportions/autobone-steps/StartRecording.tsx b/src/components/onboarding/pages/body-proportions/autobone-steps/StartRecording.tsx
new file mode 100644
index 000000000..d40f672da
--- /dev/null
+++ b/src/components/onboarding/pages/body-proportions/autobone-steps/StartRecording.tsx
@@ -0,0 +1,45 @@
+import { useAutobone } from '../../../../../hooks/autobone';
+import { Button } from '../../../../commons/Button';
+import { TipBox } from '../../../../commons/TipBox';
+import { Typography } from '../../../../commons/Typography';
+
+export function StartRecording({ nextStep }: { nextStep: () => void }) {
+ const { startRecording } = useAutobone();
+
+ const start = () => {
+ nextStep();
+ startRecording();
+ };
+
+ return (
+ <>
+
+ We're recording...
+ Make the moves shown below
+
+
+
+ REC
+
+
+
+ {!hasCalibration && hasRecording
+ ? 'Processing the result'
+ : '15 seconds left'}
+
+
+
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/body-proportions/autobone-steps/VerifyResults.tsx b/src/components/onboarding/pages/body-proportions/autobone-steps/VerifyResults.tsx
new file mode 100644
index 000000000..bccc195af
--- /dev/null
+++ b/src/components/onboarding/pages/body-proportions/autobone-steps/VerifyResults.tsx
@@ -0,0 +1,83 @@
+import classNames from 'classnames';
+import { useEffect } from 'react';
+import { useAutobone } from '../../../../../hooks/autobone';
+import { Button } from '../../../../commons/Button';
+import { Typography } from '../../../../commons/Typography';
+
+export function VerifyResultsStep({
+ nextStep,
+ prevStep,
+ variant,
+}: {
+ nextStep: () => void;
+ prevStep: () => void;
+ variant: 'onboarding' | 'alone';
+}) {
+ const {
+ startRecording,
+ hasCalibration,
+ bodyParts,
+ hasRecording,
+ applyProcessing,
+ } = useAutobone();
+
+ const apply = () => {
+ applyProcessing();
+ nextStep();
+ };
+
+ const redo = () => {
+ startRecording();
+ prevStep();
+ };
+
+ return (
+ <>
+
+
+ Make some moves
+
+
+
+
+
+ We're now going to record some specific poses and
+
+
+ moves. these will be prompted in the next screen.
+
+
+
+
+ Make sure you do not move your heels, they must stay at the same
+ place while recording.
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/mounting/AutomaticMounting.tsx b/src/components/onboarding/pages/mounting/AutomaticMounting.tsx
new file mode 100644
index 000000000..03aaac248
--- /dev/null
+++ b/src/components/onboarding/pages/mounting/AutomaticMounting.tsx
@@ -0,0 +1,60 @@
+import { useOnboarding } from '../../../../hooks/onboarding';
+import { ArrowLink } from '../../../commons/ArrowLink';
+import { Button } from '../../../commons/Button';
+import { Typography } from '../../../commons/Typography';
+
+export function AutomaticMountingPage() {
+ const { applyProgress, skipSetup, state } = useOnboarding();
+
+ applyProgress(0.7);
+
+ return (
+ <>
+
+
+ Verify results
+
+
+
+
+ Check the results below, do they look correct?
+
+
+
+
+
+ Recording results
+
+
+ {bodyParts?.map(({ bone, label, value }) => (
+ Processing recording...
+ )}
+
+
+ {label}
+ {(value * 100).toFixed(2)} CM
+
+ ))}
+ {!hasCalibration && hasRecording && (
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/mounting/ManualMounting.tsx b/src/components/onboarding/pages/mounting/ManualMounting.tsx
new file mode 100644
index 000000000..e2947df2e
--- /dev/null
+++ b/src/components/onboarding/pages/mounting/ManualMounting.tsx
@@ -0,0 +1,117 @@
+import { Quaternion } from 'math3d';
+import { useMemo, useState } from 'react';
+import { AssignTrackerRequestT, BodyPart, RpcMessage } from 'solarxr-protocol';
+import { FlatDeviceTracker } from '../../../../hooks/app';
+import { useOnboarding } from '../../../../hooks/onboarding';
+import { useTrackers } from '../../../../hooks/tracker';
+import { useWebsocketAPI } from '../../../../hooks/websocket-api';
+import { QuaternionToQuatT } from '../../../../maths/quaternion';
+import { ArrowLink } from '../../../commons/ArrowLink';
+import { Button } from '../../../commons/Button';
+import { TipBox } from '../../../commons/TipBox';
+import { Typography } from '../../../commons/Typography';
+import { BodyAssignment } from '../../BodyAssignment';
+import { MountingSelectionMenu } from './MountingSelectionMenu';
+
+export function ManualMountingPage() {
+ const { applyProgress, skipSetup, state } = useOnboarding();
+ const { sendRPCPacket } = useWebsocketAPI();
+
+ const [selectedRole, setSelectRole] = useState
+
+
+
+
+ {!state.alonePage && (
+
+ Go Back to Enter VR
+
+ )}
+
+ Mount calibration!{' '}
+
+ Work in progress
+
+
+
+ This feature isn't done, just choose manual mounting.
+
+
+
+
+
+ {!state.alonePage && (
+
+ )}
+
+
+
+ {!state.alonePage && (
+
+ )}
+
+
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx b/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx
new file mode 100644
index 000000000..8fa6f2376
--- /dev/null
+++ b/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx
@@ -0,0 +1,100 @@
+import classNames from 'classnames';
+import { MouseEventHandler } from 'react';
+import ReactModal from 'react-modal';
+import { useElemSize, useLayout } from '../../../../hooks/layout';
+import { Button } from '../../../commons/Button';
+import { FootIcon } from '../../../commons/icon/FootIcon';
+import { Typography } from '../../../commons/Typography';
+
+function MoutingOrientationCard({
+ orientation,
+ onClick,
+}: {
+ orientation: string;
+ onClick?: MouseEventHandler
+
+
+
+
+ {!state.alonePage && (
+
+ Go Back to Enter VR
+
+ )}
+ Manual Mounting
+
+ Click on every tracker and select which way they are mounted
+
+
+ Not sure which tracker is which? Shake a tracker and it will
+ highlight the corresponding item.
+
+
+
+
+
+
+
+ {!state.alonePage && (
+
+ )}
+
+
+
+ {!state.alonePage && (
+
+ )}
+
+
+
+ );
+}
+
+export function MountingSelectionMenu({
+ isOpen = true,
+ onClose,
+ onDirectionSelected,
+}: {
+ isOpen: boolean;
+ onClose: () => void;
+ onDirectionSelected: (direction: number) => void;
+}) {
+ const { ref: refTrackers, layoutHeight: trackersHeight } =
+ useLayout
+ {orientation}
+
+
+
+
+
+ Where do you want this tracker to be?
+
+
+
+
+
+ onDirectionSelected(90)}
+ />
+ onDirectionSelected(-90)}
+ />
+ onDirectionSelected(180)}
+ />
+ onDirectionSelected(0)}
+ />
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/onboarding/pages/trackers-assign/TrackerSelectionMenu.tsx b/src/components/onboarding/pages/trackers-assign/TrackerSelectionMenu.tsx
new file mode 100644
index 000000000..10696d9ee
--- /dev/null
+++ b/src/components/onboarding/pages/trackers-assign/TrackerSelectionMenu.tsx
@@ -0,0 +1,123 @@
+import classNames from 'classnames';
+import ReactModal from 'react-modal';
+import { BodyPart } from 'solarxr-protocol';
+import { FlatDeviceTracker } from '../../../../hooks/app';
+import { useElemSize, useLayout } from '../../../../hooks/layout';
+import { useTrackers } from '../../../../hooks/tracker';
+import { Button } from '../../../commons/Button';
+import { TipBox } from '../../../commons/TipBox';
+import { Typography } from '../../../commons/Typography';
+import { TrackerCard } from '../../../tracker/TrackerCard';
+
+export function TrackerSelectionMenu({
+ isOpen = true,
+ onClose,
+ onTrackerSelected,
+ bodyPart,
+}: {
+ isOpen: boolean;
+ bodyPart: BodyPart;
+ onClose: () => void;
+ onTrackerSelected: (tracker: FlatDeviceTracker | null) => void;
+}) {
+ const { ref: refTrackers, layoutHeight: trackersHeight } =
+ useLayout
+
+
+
+
+ {!state.alonePage && (
+
+ Go Back to Wifi Credentials
+
+ )}
+ Assign trackers
+
+ Let's choose which tracker goes where. Click on a location where
+ you want to place a tracker
+
+
+ Not sure which tracker is which? Shake a tracker and it will
+ highlight the corresponding item.
+
+
+
+ {assignedTrackers.length}
+
+ of {trackers.length} trackers assigned
+
+
+
+
+
+
+
+ {!state.alonePage && (
+
+ )}
+
+
+ {!state.alonePage && (
+
+ )}
+
+
+
+
+
+ Which tracker to assign to the {BodyPart[bodyPart]}?
+
+
+
+
+
+
+
+ {unassignedTrackers.length && (
+ Assigned Trackers
+
+
+ Unassigned Trackers
+
+ )}
+
+ {unassignedTrackers.map((fd, index) => (
+ onTrackerSelected(fd)}
+ smol
+ interactable
+ outlined={
+ bodyPart ===
+ (fd.tracker.info?.bodyPart || BodyPart.NONE)
+ }
+ >
+ ))}
+
+
+ {assignedTrackers.map((fd, index) => (
+ onTrackerSelected(fd)}
+ smol
+ interactable
+ outlined={
+ bodyPart ===
+ (fd.tracker.info?.bodyPart || BodyPart.NONE)
+ }
+ >
+ ))}
+
+
+
+
+
+
+
+
+ Not sure which tracker is which? Shake a tracker and it will
+ highlight the corresponding item.
+
+
+
+
+
+
-
-
-
-
-
-
-
-
- 0})} style={{width: `${progress * 100}%`}}>
-
- {bodyParts.map(({label, bone, value}) =>
-
-
-
- )}
-
-
- {label}
- {`${Number(value * 100).toFixed(1).replace(/[.,]0$/, "")}cm`}
-
-
-
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/components/proportions/BodyView.tsx b/src/components/proportions/BodyView.tsx
deleted file mode 100644
index 38d490f89..000000000
--- a/src/components/proportions/BodyView.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { SkeletonBone } from "solarxr-protocol";
-
-
-
-export function BodyView({ selectedBodyPart }: { selectedBodyPart: number }) {
-
- return (
- <>
- {selectedBodyPart !== SkeletonBone.HIPS_WIDTH &&
-
- }
- {selectedBodyPart === SkeletonBone.HIPS_WIDTH &&
-
- }
-
- )
-
-}
\ No newline at end of file
diff --git a/src/components/providers/AppContext.tsx b/src/components/providers/AppContext.tsx
index 0cac633bc..99480d7ca 100644
--- a/src/components/providers/AppContext.tsx
+++ b/src/components/providers/AppContext.tsx
@@ -1,10 +1,10 @@
-import { ReactChild } from "react";
-import { AppContextC, useProvideAppContext } from "../../hooks/app";
+import { ReactChild } from 'react';
+import { AppContextC, useProvideAppContext } from '../../hooks/app';
export function AppContextProvider({ children }: { children: ReactChild }) {
+ const context = useProvideAppContext();
- const context = useProvideAppContext();
-
- return
- Body Proportions
-
-
-
-
-
-
-
-
-
-
-
- Precision
-
-
- setStep(0.5)} className={classNames("hover:bg-purple-gray-500 flex flex-grow justify-center items-center ", { 'bg-purple-gray-400': step === 0.5 })}>0.5
- setStep(1)} className={classNames("hover:bg-purple-gray-500 flex flex-grow justify-center items-center", { 'bg-purple-gray-400': step === 1 })}>1
- setStep(5)} className={classNames("hover:bg-purple-gray-500 flex flex-grow justify-center items-center", { 'bg-purple-gray-400': step === 5 })}>5
-
- {bodyParts.map(({label, bone}) =>
-
- onMouseEnterSelector(bone)} className={classNames('px-3 rounded-lg py-2', { 'bg-purple-gray-700 ': bone === selectedBodyPart })}>
- `${Number(value * 100).toFixed(1).replace(/[.,]0$/, "")}cm` }
- >
-
- )}
-
-
+ return (
+ <>
+
+ ) {
+ return (
+
+ {children}
+
+ );
+}
export function SettingsSidebar() {
- return (
-
+
+
+ );
+}
diff --git a/src/components/settings/SettingsPageLayout.tsx b/src/components/settings/SettingsPageLayout.tsx
new file mode 100644
index 000000000..a4d60767e
--- /dev/null
+++ b/src/components/settings/SettingsPageLayout.tsx
@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import { ReactChild } from 'react';
+
+export function SettingsPageLayout({
+ children,
+ className,
+ icon,
+ ...props
+}: {
+ children: ReactChild;
+ icon: ReactChild;
+} & React.HTMLAttributes
-
- {children}
-
+
-
-
-
-
+ {children}
+
+ );
+}
diff --git a/src/components/settings/SettingsSidebar.tsx b/src/components/settings/SettingsSidebar.tsx
index 12f4c3bd5..120f5f497 100644
--- a/src/components/settings/SettingsSidebar.tsx
+++ b/src/components/settings/SettingsSidebar.tsx
@@ -1,25 +1,67 @@
-import { NavLink } from "react-router-dom"
+import classNames from 'classnames';
+import { ReactChild, useMemo } from 'react';
+import { NavLink, useLocation, useMatch } from 'react-router-dom';
+import { Typography } from '../commons/Typography';
+export function SettingsLink({
+ to,
+ scrollTo,
+ children,
+}: {
+ to: string;
+ scrollTo?: string;
+ children: ReactChild;
+}) {
+ const { state } = useLocation();
+ const doesMatch = useMatch({
+ path: to,
+ });
+ const isActive = useMemo(() => {
+ const typedState: { scrollTo?: string } = state as any;
+ return (
+ (doesMatch && !scrollTo && !typedState?.scrollTo) ||
+ (doesMatch && typedState?.scrollTo == scrollTo)
+ );
+ }, [state, doesMatch]);
+
+ return (
+
+
+
+ {icon}
+
+ {children}
+
- (null);
+
+ const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
+ const { register, reset, control, watch, handleSubmit } =
+ useForm({
+ defaultValues: {
+ trackers: {
+ waist: false,
+ chest: false,
+ elbows: false,
+ knees: false,
+ legs: false,
+ },
+ filtering: { intensity: 0, ticks: 0 },
+ interface: { devmode: false },
+ },
+ });
+
+ const onSubmit = (values: SettingsForm) => {
+ const settings = new ChangeSettingsRequestT();
+
+ if (values.trackers) {
+ const trackers = new SteamVRTrackersSettingT();
+ trackers.waist = values.trackers.waist;
+ trackers.chest = values.trackers.chest;
+ trackers.legs = values.trackers.legs;
+ trackers.knees = values.trackers.knees;
+ trackers.elbows = values.trackers.elbows;
+ settings.steamVrTrackers = trackers;
+ }
+
+ const filtering = new FilteringSettingsT();
+ filtering.type = values.filtering.type;
+ filtering.intensity = values.filtering.intensity;
+ filtering.ticks = values.filtering.ticks;
+
+ settings.filtering = filtering;
+ sendRPCPacket(RpcMessage.ChangeSettingsRequest, settings);
+
+ setConfig({ debug: values.interface.devmode });
+ };
+
+ useEffect(() => {
+ const subscription = watch(() => handleSubmit(onSubmit)());
+ return () => subscription.unsubscribe();
+ }, []);
+
+ useEffect(() => {
+ sendRPCPacket(RpcMessage.SettingsRequest, new SettingsRequestT());
+ }, []);
+
+ useRPCPacket(RpcMessage.SettingsResponse, (settings: SettingsResponseT) => {
+ reset({
+ ...(settings.steamVrTrackers
+ ? { trackers: settings.steamVrTrackers }
+ : {}),
+ ...(settings.filtering ? { filtering: settings.filtering } : {}),
+ interface: {
+ devmode: config?.debug,
+ },
+ });
+ });
+
+ // Handle scrolling to selected page
+ useEffect(() => {
+ const typedState: { scrollTo: string } = state as any;
+ if (!pageRef.current || !typedState || !typedState.scrollTo) {
+ return;
+ }
+ const elem = pageRef.current.querySelector(`#${typedState.scrollTo}`);
+ if (elem) {
+ elem.scrollIntoView({ behavior: 'smooth' });
+ }
+ }, [state]);
+
+ return (
+
+ );
+}
diff --git a/src/components/settings/pages/Serial.tsx b/src/components/settings/pages/Serial.tsx
index cf6a21d58..b4137c652 100644
--- a/src/components/settings/pages/Serial.tsx
+++ b/src/components/settings/pages/Serial.tsx
@@ -1,94 +1,104 @@
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { CloseSerialRequestT, OpenSerialRequestT, RpcMessage, SerialUpdateResponseT, SetWifiRequestT } from "solarxr-protocol";
-import { useLayout } from "../../../hooks/layout";
-import { useWebsocketAPI } from "../../../hooks/websocket-api";
-import { Button } from "../../commons/Button";
-import { Input } from "../../commons/Input";
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import {
+ CloseSerialRequestT,
+ OpenSerialRequestT,
+ RpcMessage,
+ SerialUpdateResponseT,
+ SetWifiRequestT,
+} from 'solarxr-protocol';
+import { useLayout } from '../../../hooks/layout';
+import { useWebsocketAPI } from '../../../hooks/websocket-api';
+import { Button } from '../../commons/Button';
+import { Input } from '../../commons/Input';
+import { Typography } from '../../commons/Typography';
export interface WifiForm {
- ssid: string;
- password: string;
+ ssid: string;
+ password: string;
}
export function Serial() {
+ const {
+ layoutHeight,
+ layoutWidth,
+ ref: consoleRef,
+ } = useLayout();
- const { layoutHeight, layoutWidth, ref: consoleRef } = useLayout();
+ const { useRPCPacket, sendRPCPacket } = useWebsocketAPI();
+ // const consoleRef = useRef(null);
+ const [consoleContent, setConsole] = useState('');
+ const [isSerialOpen, setSerialOpen] = useState(false);
- const { useRPCPacket, sendRPCPacket } = useWebsocketAPI();
- // const consoleRef = useRef(null);
- const [consoleContent, setConsole] = useState("");
- const [isSerialOpen, setSerialOpen] = useState(false);
- const { register, handleSubmit } = useForm({ defaultValues: {} });
+ useEffect(() => {
+ sendRPCPacket(RpcMessage.OpenSerialRequest, new OpenSerialRequestT());
+ return () => {
+ sendRPCPacket(RpcMessage.CloseSerialRequest, new CloseSerialRequestT());
+ };
+ }, []);
-
- useEffect(() => {
- sendRPCPacket(RpcMessage.OpenSerialRequest, new OpenSerialRequestT())
- return () => {
- sendRPCPacket(RpcMessage.CloseSerialRequest, new CloseSerialRequestT());
- }
- }, [])
-
-
- useRPCPacket(RpcMessage.SerialUpdateResponse, (data: SerialUpdateResponseT) => {
- if (data.closed) {
- setSerialOpen(false)
- setTimeout(() => {
- sendRPCPacket(RpcMessage.OpenSerialRequest, new OpenSerialRequestT())
- }, 1000)
- }
-
- if (!data.closed) {
- setSerialOpen(true);
- }
-
- if (data.log && consoleRef.current) {
- setConsole((console) => console + data.log)
- }
- })
-
- useEffect(() => {
- if (consoleRef.current)
- consoleRef.current.scrollTo({ top: consoleRef.current.scrollHeight })
- }, [consoleContent])
-
-
- useEffect(() => {
- const id = setInterval(() => {
- if (!isSerialOpen)
- sendRPCPacket(RpcMessage.OpenSerialRequest, new OpenSerialRequestT())
- else
- clearInterval(id);
+ useRPCPacket(
+ RpcMessage.SerialUpdateResponse,
+ (data: SerialUpdateResponseT) => {
+ if (data.closed) {
+ setSerialOpen(false);
+ setTimeout(() => {
+ sendRPCPacket(RpcMessage.OpenSerialRequest, new OpenSerialRequestT());
}, 1000);
+ }
- return () => {
- clearInterval(id);
- }
- }, [isSerialOpen, sendRPCPacket])
+ if (!data.closed) {
+ setSerialOpen(true);
+ }
- const sendWifiCredentials = (value: WifiForm) => {
- const wifi = new SetWifiRequestT();
-
- wifi.password = value.password;
- wifi.ssid = value.ssid;
-
- sendRPCPacket(RpcMessage.SetWifiRequest, wifi)
+ if (data.log && consoleRef.current) {
+ setConsole((console) => console + data.log);
+ }
}
+ );
+ useEffect(() => {
+ if (consoleRef.current)
+ consoleRef.current.scrollTo({
+ top: consoleRef.current.scrollHeight,
+ });
+ }, [consoleContent]);
- return (
-
- )
+ useEffect(() => {
+ const id = setInterval(() => {
+ if (!isSerialOpen)
+ sendRPCPacket(RpcMessage.OpenSerialRequest, new OpenSerialRequestT());
+ else clearInterval(id);
+ }, 1000);
-}
\ No newline at end of file
+ return () => {
+ clearInterval(id);
+ };
+ }, [isSerialOpen, sendRPCPacket]);
+
+ return (
+ (null);
-
-
- const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
- const { register, reset, control, watch, handleSubmit } = useForm({ defaultValues: { filtering: { intensity: 0, ticks: 0 } } });
-
- const onSubmit = (values: SettingsForm) => {
- const settings = new ChangeSettingsRequestT();
-
- if (values.trackers) {
- const trackers = new SteamVRTrackersSettingT();
- trackers.waist = values.trackers.waist;
- trackers.chest = values.trackers.chest;
- trackers.legs = values.trackers.legs;
- trackers.knees = values.trackers.knees;
- trackers.elbows = values.trackers.elbows;
- settings.steamVrTrackers = trackers;
- }
-
- const filtering = new FilteringSettingsT();
- filtering.type = values.filtering.type;
- filtering.intensity = values.filtering.intensity;
- filtering.ticks = values.filtering.ticks;
-
- settings.filtering = filtering;
- sendRPCPacket(RpcMessage.ChangeSettingsRequest, settings)
- }
-
-
- useEffect(() => {
- const subscription = watch(() => handleSubmit(onSubmit)());
- return () => subscription.unsubscribe();
- }, [])
-
-
- useEffect(() => {
- sendRPCPacket(RpcMessage.SettingsRequest, new SettingsRequestT());
- }, [])
-
- useRPCPacket(RpcMessage.SettingsResponse, (settings: SettingsResponseT) => {
- reset({
- ...(settings.steamVrTrackers ? {trackers: settings.steamVrTrackers} : {}),
- ...(settings.filtering ? {filtering: settings.filtering} : {})
- })
- })
-
-
- useEffect(() => {
-
- const typedState: { scrollTo: string } = state as any;
-
- if (!pageRef.current || (!typedState || !typedState.scrollTo))
- return ;
-
- const elem = pageRef.current.querySelector(`#${typedState.scrollTo}`)
- if (elem)
- elem.scrollIntoView({ behavior: 'smooth' })
- }, [state])
-
-
- return (
-
- )
-}
diff --git a/src/components/tracker/SingleTrackerBodyAssignmentMenu.tsx b/src/components/tracker/SingleTrackerBodyAssignmentMenu.tsx
new file mode 100644
index 000000000..d3bbdff47
--- /dev/null
+++ b/src/components/tracker/SingleTrackerBodyAssignmentMenu.tsx
@@ -0,0 +1,82 @@
+import classNames from 'classnames';
+import { useForm } from 'react-hook-form';
+import ReactModal from 'react-modal';
+import { BodyPart } from 'solarxr-protocol';
+import { Button } from '../commons/Button';
+import { CheckBox } from '../commons/Checkbox';
+import { TipBox } from '../commons/TipBox';
+import { Typography } from '../commons/Typography';
+import { BodyAssignment } from '../onboarding/BodyAssignment';
+
+export function SingleTrackerBodyAssignmentMenu({
+ isOpen = true,
+ onClose,
+ onRoleSelected,
+}: {
+ isOpen: boolean;
+ onClose: () => void;
+ onRoleSelected: (role: BodyPart) => void;
+}) {
+ const { control, watch } = useForm<{ advanced: boolean }>({
+ defaultValues: { advanced: false },
+ });
+ const { advanced } = watch();
+
+ return (
+
+
+ );
+}
diff --git a/src/components/tracker/TrackerBattery.tsx b/src/components/tracker/TrackerBattery.tsx
new file mode 100644
index 000000000..717e00b6d
--- /dev/null
+++ b/src/components/tracker/TrackerBattery.tsx
@@ -0,0 +1,30 @@
+import { BatteryIcon } from '../commons/icon/BatteryIcon';
+import { Typography } from '../commons/Typography';
+
+export function TrackerBattery({
+ value,
+ disabled,
+}: {
+ value: number;
+ disabled?: boolean;
+}) {
+ return (
+ (0);
- const [rots, setRotation] = useState([]);
-
- const statusClass = useMemo(() => {
- const statusMap: { [key: number]: string } = {
- [TrackerStatus.NONE]: 'bg-purple-gray-900',
- [TrackerStatus.BUSY]: 'bg-status-warning',
- [TrackerStatus.ERROR]: 'bg-status-error',
- [TrackerStatus.DISCONNECTED]: 'bg-purple-gray-900',
- [TrackerStatus.OCCLUDED]: 'bg-status-warning',
- [TrackerStatus.OK]: 'bg-status-online'
- }
- return statusMap[tracker.status];
- }, [tracker.status]);
-
- useEffect(() => {
- if (tracker.rotation) {
- const rot = QuaternionFromQuatT(tracker.rotation).mul(QuaternionFromQuatT(previousRot.current).inverse());
- const dif = Math.min(1, (rot.x ** 2 + rot.y ** 2 + rot.z ** 2) * 2.5)
- // Use sum of rotation of last 3 frames (0.3sec) for smoother movement and better detection of slow movement.
- if (rots.length === 3) {
- rots.shift();
- }
- rots.push(dif);
- setRotation(rots);
- setVelocity(rots.reduce((a, b) => a + b));
- previousRot.current = tracker.rotation;
- }
- }, [tracker.rotation])
-
- const trackerName = useMemo(() => {
- if (device?.customName)
- return device.customName;
- if (tracker.info?.bodyPart)
- return BodyPart[tracker.info?.bodyPart];
- return device?.hardwareInfo?.displayName || 'NONE';
-
- }, [tracker.info, device?.customName, device?.hardwareInfo?.displayName])
-
- return (
-
-
-
- {/* TRACKER SETTINGS
-
- SteamVR
- Filtering
- Serial
-
-
-
*/}
+ return (
+ USER INTERFACE
-
- Widgets
-
-
+ Settings
+
+ );
+}
diff --git a/src/components/settings/pages/GeneralSettings.tsx b/src/components/settings/pages/GeneralSettings.tsx
new file mode 100644
index 000000000..b7518de30
--- /dev/null
+++ b/src/components/settings/pages/GeneralSettings.tsx
@@ -0,0 +1,257 @@
+import { useEffect, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { useLocation } from 'react-router-dom';
+import {
+ ChangeSettingsRequestT,
+ FilteringSettingsT,
+ FilteringType,
+ RpcMessage,
+ SettingsRequestT,
+ SettingsResponseT,
+ SteamVRTrackersSettingT,
+} from 'solarxr-protocol';
+import { useConfig } from '../../../hooks/config';
+import { useWebsocketAPI } from '../../../hooks/websocket-api';
+import { CheckBox } from '../../commons/Checkbox';
+import { SquaresIcon } from '../../commons/icon/SquaresIcon';
+import { SteamIcon } from '../../commons/icon/SteamIcon';
+import { WrenchIcon } from '../../commons/icon/WrenchIcons';
+import { NumberSelector } from '../../commons/NumberSelector';
+import { Radio } from '../../commons/Radio';
+import { Typography } from '../../commons/Typography';
+import { SettingsPageLayout } from '../SettingsPageLayout';
+
+interface SettingsForm {
+ trackers: {
+ waist: boolean;
+ chest: boolean;
+ legs: boolean;
+ knees: boolean;
+ elbows: boolean;
+ };
+ filtering: {
+ type: number;
+ intensity: number;
+ ticks: number;
+ };
+ interface: {
+ devmode: boolean;
+ };
+}
+
+export function GeneralSettings() {
+ const { config, setConfig } = useConfig();
+ const { state } = useLocation();
+ const pageRef = useRef
+ General
+
+
+
+ SteamVR
+
+
+ Tracker mechanics
+
+
+ Interface
+
- )
-
-}
\ No newline at end of file
+
+ Utilities
+
+
+ Serial Console
+
+
+ Serial Console
+
+ This is a live information feed for serial communication. May be useful
+ if you need to know the firmware is acting up.
+
+
+ );
+}
diff --git a/src/components/settings/pages/TrackersSettings.tsx b/src/components/settings/pages/TrackersSettings.tsx
deleted file mode 100644
index 1ed51557f..000000000
--- a/src/components/settings/pages/TrackersSettings.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useForm } from "react-hook-form";
-import { useLocation } from "react-router-dom";
-import { ChangeSettingsRequestT, FilteringSettingsT, RpcMessage, SettingsRequestT, SettingsResponseT, SteamVRTrackersSettingT } from "solarxr-protocol";
-import { useWebsocketAPI } from "../../../hooks/websocket-api";
-import { CheckBox } from "../../commons/Checkbox";
-import { NumberSelector } from "../../commons/NumberSelector";
-import { Select } from "../../commons/Select";
-
-interface SettingsForm {
- trackers: {
- waist: boolean,
- chest: boolean,
- legs: boolean,
- knees: boolean,
- elbows: boolean,
- }
- filtering: {
- type: number;
- intensity: number;
- ticks: number;
- }
-}
-
-
-export function TrackersSettings() {
-
- const { state } = useLocation();
- const pageRef = useRef
+
+
+
+
+ {isSerialOpen
+ ? consoleContent
+ : 'Connection to serial lost, Reconnecting...'}
+
+
+
+
+
+
+
+
+
+ Where do you want this tracker to be?
+
+
+ Choose a location where you want this tracker to be assigned.
+ Alternatively you can choose to manage all trackers at once
+ instead of one by one.
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/tracker/TrackerCard.tsx b/src/components/tracker/TrackerCard.tsx
index 6d4a1ec08..a3588b766 100644
--- a/src/components/tracker/TrackerCard.tsx
+++ b/src/components/tracker/TrackerCard.tsx
@@ -1,96 +1,151 @@
-import classNames from "classnames";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { BodyPart, DeviceDataT, TrackerDataT, TrackerStatus } from "solarxr-protocol";
-import { WifiIcon } from "../commons/icon/WifiIcon";
-import { BatteryIcon } from "../commons/icon/BatteryIcon";
-import { TrackerSettings } from "./TrackerSettings";
-import { IconButton } from "../commons/ButtonIcon";
-import { GearIcon } from "../commons/icon/GearIcon";
-import { QuaternionFromQuatT } from "../../maths/quaternion";
+import { MouseEventHandler } from 'react';
+import {
+ DeviceDataT,
+ TrackerDataT,
+ TrackerStatus as TrackerStatusEnum,
+} from 'solarxr-protocol';
+import { Typography } from '../commons/Typography';
+import { TrackerBattery } from './TrackerBattery';
+import { TrackerWifi } from './TrackerWifi';
+import { TrackerStatus } from './TrackerStatus';
+import { FootIcon } from '../commons/icon/FootIcon';
+import classNames from 'classnames';
+import { useTracker } from '../../hooks/tracker';
+function TrackerBig({
+ device,
+ tracker,
+}: {
+ tracker: TrackerDataT;
+ device?: DeviceDataT;
+}) {
+ const { useName } = useTracker(tracker);
-export function TrackerCard({ tracker, device }: { tracker: TrackerDataT, device?: DeviceDataT }) {
+ const trackerName = useName();
- const previousRot = useRef<{ x: number, y: number, z: number, w: number }>(tracker.rotation!)
- const [velocity, setVelocity] = useState
+
+ {!disabled && (
+
+
+ {(value * 100).toFixed(0)} %
+
+
+ )}
+ {disabled && (
+
+
+
+ )}
+
- ;
+}) {
+ const { useVelocity } = useTracker(tracker);
+
+ const velocity = useVelocity();
+
+ return (
+ (false);
+ const [selectBodypart, setSelectBodypart] = useState(false);
+ const { trackernum, deviceid } = useParams<{
+ trackernum: string;
+ deviceid: string;
+ }>();
+ const { register, watch, reset } = useForm<{ trackerName: string | null }>({
+ defaultValues: { trackerName: null },
+ reValidateMode: 'onSubmit',
+ });
+ const { trackerName } = watch();
+ const tracker = useTrackerFromId(trackernum, deviceid);
- const [open, setOpen] = useState(false);
+ const onDirectionSelected = (mountingOrientation: number) => {
+ if (!tracker) return;
- const positions = useMemo(() => Object.keys(BodyPart).filter((position: string) => isNaN(+position)).map((role, index) =>( { label: role, value: index })), [])
- const rotations = useMemo(() => [
- { label: 'FRONT', value: rotationToQuatMap.FRONT },
- { label: 'LEFT', value: rotationToQuatMap.LEFT },
- { label: 'RIGHT', value: rotationToQuatMap.RIGHT },
- { label: 'BACK', value: rotationToQuatMap.BACK }
- ], []);
+ const assignreq = new AssignTrackerRequestT();
+ assignreq.mountingRotation = QuaternionToQuatT(
+ Quaternion.Euler(0, +mountingOrientation, 0)
+ );
+ assignreq.bodyPosition = tracker?.tracker.info?.bodyPart || BodyPart.NONE;
+ assignreq.trackerId = tracker?.tracker.trackerId;
+ sendRPCPacket(RpcMessage.AssignTrackerRequest, assignreq);
+ setSelectRotation(false);
+ };
+ const onRoleSelected = (role: BodyPart) => {
+ if (!tracker) return;
- const handleSaveSettings = ({ bodyPosition, mountingRotation }: { bodyPosition: number, mountingRotation: number }) => {
- const assignreq = new AssignTrackerRequestT();
+ const assignreq = new AssignTrackerRequestT();
+ assignreq.bodyPosition = role;
+ assignreq.trackerId = tracker?.tracker.trackerId;
+ sendRPCPacket(RpcMessage.AssignTrackerRequest, assignreq);
+ setSelectBodypart(false);
+ };
- assignreq.bodyPosition = bodyPosition;
+ const currRotation = useMemo(
+ () =>
+ tracker?.tracker.info?.mountingOrientation
+ ? FixEuler(
+ QuaternionFromQuatT(tracker.tracker.info?.mountingOrientation)
+ .eulerAngles.y
+ )
+ : rotationToQuatMap.BACK,
+ [tracker?.tracker.info?.mountingOrientation]
+ );
-
- assignreq.mountingRotation = QuaternionToQuatT(Quaternion.Euler(0, +mountingRotation, 0));
- assignreq.trackerId = tracker.trackerId;
+ useDebouncedEffect(
+ () => {
+ if (!tracker) return;
+ if (trackerName == tracker.tracker.info?.customName) return;
+ const assignreq = new AssignTrackerRequestT();
+ assignreq.bodyPosition = tracker?.tracker.info?.bodyPart || BodyPart.NONE;
+ assignreq.displayName = trackerName;
+ assignreq.trackerId = tracker?.tracker.trackerId;
+ sendRPCPacket(RpcMessage.AssignTrackerRequest, assignreq);
+ },
+ [trackerName],
+ 1000
+ );
- sendRPCPacket(RpcMessage.AssignTrackerRequest, assignreq)
- setOpen(false);
+ useEffect(() => {
+ if (tracker && !firstLoad) setFirstLoad(true);
+ }, [tracker, firstLoad]);
+
+ useEffect(() => {
+ if (firstLoad) {
+ console.log('hey');
+ reset({
+ trackerName: tracker?.tracker.info?.customName as string | null,
+ });
}
+ }, [firstLoad]);
-
- const openSettings = () => {
-
- if (!tracker.info?.editable)
- return;
-
- setOpen(true)
- reset({
- bodyPosition: tracker.info?.bodyPart,
- mountingRotation: tracker.info?.mountingOrientation ? FixEuler(QuaternionFromQuatT(tracker.info?.mountingOrientation!).eulerAngles.y) : rotationToQuatMap.BACK
- })
- }
-
-
- return (
- <>
-
-
+ return (
+
-
- {tracker.info?.editable &&
- {trackerName}
-
- {device && device.hardwareStatus &&
- <>
-
-
- {device.hardwareStatus.rssi &&
- {device.hardwareStatus.batteryPctEstimate &&
-
-
}
- {device.hardwareStatus.ping && {device.hardwareStatus.ping} ms
}
-
-
- }
-
- }
-
-
- {((device.hardwareStatus.batteryPctEstimate)).toFixed(0)} %
-
-
-
-
-
-
- }/>
-
- }
-
+
+ );
+}
-}
\ No newline at end of file
+function TrackerSmol({
+ device,
+ tracker,
+}: {
+ tracker: TrackerDataT;
+ device?: DeviceDataT;
+}) {
+ const { useName } = useTracker(tracker);
+
+ const trackerName = useName();
+
+ return (
+
+
+
+ {trackerName}
+
+
+
+
+ {device && device.hardwareStatus && (
+ <>
+ {device.hardwareStatus.batteryPctEstimate && (
+
+
+ {device.hardwareStatus.rssi && device.hardwareStatus.ping && (
+
-
- )
+
+ )}
+
+
+ );
+}
+
+export function TrackerCard({
+ tracker,
+ device,
+ smol = false,
+ interactable = false,
+ outlined = false,
+ onClick,
+ bg = 'bg-background-60',
+ shakeHighlight = true,
+}: {
+ tracker: TrackerDataT;
+ device?: DeviceDataT;
+ smol?: boolean;
+ interactable?: boolean;
+ outlined?: boolean;
+ bg?: string;
+ shakeHighlight?: boolean;
+ onClick?: MouseEventHandler
+
+
+ {trackerName}
+
+ {device && device.hardwareStatus && (
+ <>
+
+ {device.hardwareStatus.batteryPctEstimate && (
+
+
+ {device.hardwareStatus.rssi && device.hardwareStatus.ping && (
+
+
+ )}
+
+ {smol &&
+ );
+}
diff --git a/src/components/tracker/TrackerSettings.tsx b/src/components/tracker/TrackerSettings.tsx
index 05ae742fd..6ee4830a3 100644
--- a/src/components/tracker/TrackerSettings.tsx
+++ b/src/components/tracker/TrackerSettings.tsx
@@ -1,86 +1,232 @@
-import { ReactChild, useMemo, useState } from "react";
-import { Button } from "../commons/Button";
-import { AppModal } from "../Modal";
-import { Select } from "../commons/Select";
-import { useWebsocketAPI } from "../../hooks/websocket-api";
-import { useForm } from "react-hook-form";
-import { AssignTrackerRequestT, BodyPart, DeviceDataT, RpcMessage, TrackerDataT } from "solarxr-protocol";
-import { FixEuler, QuaternionFromQuatT, QuaternionToQuatT } from "../../maths/quaternion";
-import { Quaternion } from "math3d";
-
+import { Quaternion } from 'math3d';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
+import { AssignTrackerRequestT, BodyPart, RpcMessage } from 'solarxr-protocol';
+import { useDebouncedEffect } from '../../hooks/timeout';
+import { useTrackerFromId } from '../../hooks/tracker';
+import { useWebsocketAPI } from '../../hooks/websocket-api';
+import {
+ FixEuler,
+ QuaternionFromQuatT,
+ QuaternionToQuatT,
+} from '../../maths/quaternion';
+import { ArrowLink } from '../commons/ArrowLink';
+import { Button } from '../commons/Button';
+import { FootIcon } from '../commons/icon/FootIcon';
+import { Input } from '../commons/Input';
+import { Typography } from '../commons/Typography';
+import { MountingSelectionMenu } from '../onboarding/pages/mounting/MountingSelectionMenu';
+import { SingleTrackerBodyAssignmentMenu } from './SingleTrackerBodyAssignmentMenu';
+import { TrackerCard } from './TrackerCard';
const rotationToQuatMap = {
- FRONT: 180,
- LEFT: 90,
- RIGHT: -90,
- BACK: 0
-}
+ FRONT: 180,
+ LEFT: 90,
+ RIGHT: -90,
+ BACK: 0,
+};
-export function TrackerSettings({ tracker, device, children }: { tracker: TrackerDataT, device?: DeviceDataT, children: ReactChild }) {
+const rotationsLabels = {
+ [rotationToQuatMap.BACK]: 'Back',
+ [rotationToQuatMap.FRONT]: 'Front',
+ [rotationToQuatMap.LEFT]: 'Left',
+ [rotationToQuatMap.RIGHT]: 'Right',
+};
- const { sendRPCPacket } = useWebsocketAPI();
- const { register, handleSubmit, reset } = useForm({ defaultValues: { bodyPosition: 0, mountingRotation: rotationToQuatMap.BACK } });
+export function TrackerSettingsPage() {
+ const { sendRPCPacket } = useWebsocketAPI();
+ const [firstLoad, setFirstLoad] = useState(false);
+ const [selectRotation, setSelectRotation] = useState
- {children}
+ return (
+
+ );
+}
diff --git a/src/components/tracker/TrackerStatus.tsx b/src/components/tracker/TrackerStatus.tsx
new file mode 100644
index 000000000..4d4706eca
--- /dev/null
+++ b/src/components/tracker/TrackerStatus.tsx
@@ -0,0 +1,36 @@
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { Typography } from '../commons/Typography';
+import { TrackerStatus as TrackerStatusEnum } from 'solarxr-protocol';
+
+const statusLabelMap: { [key: number]: string } = {
+ [TrackerStatusEnum.NONE]: 'No Status',
+ [TrackerStatusEnum.BUSY]: 'Busy',
+ [TrackerStatusEnum.ERROR]: 'Error',
+ [TrackerStatusEnum.DISCONNECTED]: 'Disconnected',
+ [TrackerStatusEnum.OCCLUDED]: 'Occluded',
+ [TrackerStatusEnum.OK]: 'Connected',
+};
+
+const statusClassMap: { [key: number]: string } = {
+ [TrackerStatusEnum.NONE]: 'bg-background-30',
+ [TrackerStatusEnum.BUSY]: 'bg-status-warning',
+ [TrackerStatusEnum.ERROR]: 'bg-status-critical',
+ [TrackerStatusEnum.DISCONNECTED]: 'bg-background-30',
+ [TrackerStatusEnum.OCCLUDED]: 'bg-status-warning',
+ [TrackerStatusEnum.OK]: 'bg-status-success',
+};
+
+export function TrackerStatus({ status }: { status: number }) {
+ const statusClass = useMemo(() => statusClassMap[status], [status]);
+ const statusLabel = useMemo(() => statusLabelMap[status], [status]);
+
+ return (
+
+
+ {`${rot.x.toFixed(0)} / ${rot.y.toFixed(0)} / ${rot.z.toFixed(0)}`}
+
+
+ );
+}
+
+export function RowContainer({
+ children,
+ rounded = 'none',
+ hover,
+ onClick,
+ onMouseOver,
+ onMouseOut,
+}: {
+ children: ReactChild;
+ rounded?: 'left' | 'right' | 'none';
+ hover: boolean;
+ onClick?: MouseEventHandler;
+ onMouseOver?: MouseEventHandler;
+ onMouseOut?: MouseEventHandler;
+}) {
+ return (
+ (null);
+
+ const trackerEqual = (id: TrackerIdT | null) =>
+ id?.trackerNum == hoverTracker?.trackerNum &&
+ (!id?.deviceId || id.deviceId.id == hoverTracker?.deviceId?.id);
+
+ return (
+ ;
- setDebug: (value: boolean) => void;
+ state: AppState;
+ trackers: FlatDeviceTracker[];
+ dispatch: Dispatch;
}
-
export function reducer(state: AppState, action: AppStateAction) {
- switch (action.type) {
- case 'debug':
- return { ...state, debug: action.value };
- default:
- throw new Error(`unhandled state action ${action.type}`);
- }
+ switch (action.type) {
+ case 'datafeed':
+ return { ...state, datafeed: action.value };
+ default:
+ throw new Error(`unhandled state action ${action.type}`);
+ }
}
-
-
export function useProvideAppContext(): AppContext {
-
- const [state, dispatch] = useReducer(reducer, { debug: false })
-
-
- return {
- state,
- dispatch,
- setDebug: (value: boolean) => dispatch({ type: 'debug', value }),
+ const { sendDataFeedPacket, useDataFeedPacket, isConnected } =
+ useWebsocketAPI();
+ const { config } = useConfig();
+ const navigate = useNavigate();
+ const [state, dispatch] = useReducer>(
+ reducer,
+ {
+ datafeed: new DataFeedUpdateT(),
}
+ );
+
+ useEffect(() => {
+ if (isConnected) {
+ const trackerData = new TrackerDataMaskT();
+ trackerData.position = true;
+ trackerData.rotation = true;
+ trackerData.info = true;
+ trackerData.status = true;
+ trackerData.temp = true;
+
+ const dataMask = new DeviceDataMaskT();
+ dataMask.deviceData = true;
+ dataMask.trackerData = trackerData;
+
+ const config = new DataFeedConfigT();
+ config.dataMask = dataMask;
+ config.minimumTimeSinceLast = 100;
+ config.syntheticTrackersMask = trackerData;
+
+ const startDataFeed = new StartDataFeedT();
+ startDataFeed.dataFeeds = [config];
+ sendDataFeedPacket(DataFeedMessage.StartDataFeed, startDataFeed);
+ }
+ }, [isConnected]);
+
+ useLayoutEffect(() => {
+ if (config && !config.doneOnboarding) {
+ navigate('/onboarding/home');
+ }
+ }, [config]);
+
+ const trackers = useMemo(
+ () =>
+ (state.datafeed?.devices || []).reduce(
+ (curr, device) => [
+ ...curr,
+ ...device.trackers.map((tracker) => ({ tracker, device })),
+ ],
+ []
+ ),
+ [state]
+ );
+
+ useDataFeedPacket(
+ DataFeedMessage.DataFeedUpdate,
+ (packet: DataFeedUpdateT) => {
+ dispatch({ type: 'datafeed', value: packet });
+ }
+ );
+
+ return {
+ state,
+ trackers,
+ dispatch,
+ };
}
-
-
-
export const AppContextC = createContext(undefined as any);
export function useAppContext() {
- const context = useContext(AppContextC);
- if (!context) {
- throw new Error('useWebsocketAPI must be within a WebSocketApi Provider')
- }
- return context;
-
-}
\ No newline at end of file
+ const context = useContext(AppContextC);
+ if (!context) {
+ throw new Error('useAppContext must be within a AppContext Provider');
+ }
+ return context;
+}
diff --git a/src/hooks/autobone.tsx b/src/hooks/autobone.tsx
new file mode 100644
index 000000000..5b0a7243e
--- /dev/null
+++ b/src/hooks/autobone.tsx
@@ -0,0 +1,164 @@
+import { createContext, useContext, useMemo, useState } from 'react';
+import {
+ AutoBoneEpochResponseT,
+ AutoBoneProcessRequestT,
+ AutoBoneProcessStatusResponseT,
+ AutoBoneProcessType,
+ RpcMessage,
+ SkeletonBone,
+ SkeletonConfigRequestT,
+ SkeletonPartT,
+} from 'solarxr-protocol';
+import { skeletonBoneLabels } from '../components/onboarding/pages/body-proportions/BodyProportions';
+import { useWebsocketAPI } from './websocket-api';
+
+export interface AutoboneContext {
+ hasRecording: boolean;
+ hasCalibration: boolean;
+ progress: number;
+ bodyParts: { bone: SkeletonBone; label: string; value: number }[] | null;
+ startRecording: () => void;
+ startProcessing: () => void;
+ applyProcessing: () => void;
+}
+
+export function useProvideAutobone(): AutoboneContext {
+ const { useRPCPacket, sendRPCPacket } = useWebsocketAPI();
+ const [hasRecording, setHasRecording] = useState(false);
+ const [hasCalibration, setHasCalibration] = useState(false);
+ const [progress, setProgress] = useState(0);
+ const [skeletonParts, setSkeletonParts] = useState(
+ null
+ );
+
+ const bodyParts = useMemo(() => {
+ return (
+ skeletonParts?.map(({ bone, value }) => ({
+ bone,
+ label: skeletonBoneLabels[bone],
+ value,
+ })) || []
+ );
+ }, [skeletonParts]);
+
+ const startProcess = (processType: AutoBoneProcessType) => {
+ // Don't allow multiple processes at once (for now atleast)
+ // if (isProcessRunning) {
+ // return;
+ // }
+
+ setProgress(0);
+
+ const processRequest = new AutoBoneProcessRequestT();
+ processRequest.processType = processType;
+
+ sendRPCPacket(RpcMessage.AutoBoneProcessRequest, processRequest);
+ };
+
+ const startRecording = () => {
+ setHasRecording(false);
+ startProcess(AutoBoneProcessType.RECORD);
+ };
+
+ const startProcessing = () => {
+ setHasCalibration(false);
+ startProcess(AutoBoneProcessType.PROCESS);
+ };
+
+ const applyProcessing = () => {
+ startProcess(AutoBoneProcessType.APPLY);
+ };
+
+ useRPCPacket(
+ RpcMessage.AutoBoneProcessStatusResponse,
+ (data: AutoBoneProcessStatusResponseT) => {
+ if (data.completed) {
+ setProgress(1);
+ }
+
+ if (data.processType) {
+ if (data.message) {
+ console.log(
+ AutoBoneProcessType[data.processType],
+ ': ',
+ data.message
+ );
+ }
+
+ if (data.total > 0 && data.current >= 0) {
+ setProgress(data.current / data.total);
+ }
+
+ if (data.completed) {
+ console.log(
+ 'Process ',
+ AutoBoneProcessType[data.processType],
+ ' has completed'
+ );
+
+ switch (data.processType) {
+ case AutoBoneProcessType.RECORD:
+ setHasRecording(data.success);
+ startProcessing();
+ break;
+
+ case AutoBoneProcessType.PROCESS:
+ setHasCalibration(data.success);
+
+ break;
+
+ case AutoBoneProcessType.APPLY:
+ // Update skeleton config when applied
+ sendRPCPacket(
+ RpcMessage.SkeletonConfigRequest,
+ new SkeletonConfigRequestT()
+ );
+ break;
+ }
+ }
+ }
+ }
+ );
+
+ useRPCPacket(
+ RpcMessage.AutoBoneEpochResponse,
+ (data: AutoBoneEpochResponseT) => {
+ setProgress(data.currentEpoch / data.totalEpochs);
+
+ // Probably not necessary to show to the user
+ console.log(
+ 'Epoch ',
+ data.currentEpoch,
+ '/',
+ data.totalEpochs,
+ ' (Error ',
+ data.epochError,
+ ')'
+ );
+
+ setSkeletonParts(data.adjustedSkeletonParts);
+ }
+ );
+
+ return {
+ hasCalibration,
+ hasRecording,
+ progress,
+ bodyParts,
+ startProcessing,
+ startRecording,
+ applyProcessing,
+ };
+}
+
+export const AutoboneContextC = createContext(
+ undefined as any
+);
+
+export function useAutobone() {
+ const context = useContext(AutoboneContextC);
+ if (!context) {
+ throw new Error('useAutobone must be within a AutoboneContext Provider');
+ }
+ return context;
+}
diff --git a/src/hooks/config.ts b/src/hooks/config.ts
new file mode 100644
index 000000000..45bb66a27
--- /dev/null
+++ b/src/hooks/config.ts
@@ -0,0 +1,79 @@
+import {
+ BaseDirectory,
+ readTextFile,
+ writeFile,
+ createDir,
+} from '@tauri-apps/api/fs';
+import { appDir } from '@tauri-apps/api/path';
+
+import { createContext, useContext, useState } from 'react';
+
+export interface Config {
+ debug: boolean;
+ doneOnboarding: boolean;
+}
+
+export interface ConfigContext {
+ config: Config | null;
+ loading: boolean;
+ setConfig: (config: Partial) => Promise;
+ loadConfig: () => Promise;
+}
+
+const initialConfig = { doneOnboarding: false };
+
+export function useConfigProvider(): ConfigContext {
+ const [currConfig, set] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ const setConfig = async (config: Partial) => {
+ const newConfig = config
+ ? {
+ ...currConfig,
+ ...config,
+ }
+ : null;
+ set(newConfig as Config);
+
+ await createDir('', { dir: BaseDirectory.App, recursive: true });
+ await writeFile(
+ { contents: JSON.stringify(newConfig), path: 'config.json' },
+ { dir: BaseDirectory.App }
+ );
+ };
+
+ return {
+ config: currConfig,
+ loading,
+ setConfig,
+ loadConfig: async () => {
+ setLoading(true);
+ try {
+ const appDirPath = await appDir();
+ console.log(appDirPath);
+ const json = await readTextFile('config.json', {
+ dir: BaseDirectory.App,
+ });
+ const loadedConfig = JSON.parse(json);
+ set(loadedConfig);
+ setLoading(false);
+ return loadedConfig;
+ } catch (e) {
+ console.log(e);
+ setConfig(initialConfig);
+ setLoading(false);
+ return null;
+ }
+ },
+ };
+}
+
+export const ConfigContextC = createContext(undefined as never);
+
+export function useConfig() {
+ const context = useContext(ConfigContextC);
+ if (!context) {
+ throw new Error('useConfig must be within a ConfigContext Provider');
+ }
+ return context;
+}
diff --git a/src/hooks/layout.ts b/src/hooks/layout.ts
index f7a67ba9b..bfba85735 100644
--- a/src/hooks/layout.ts
+++ b/src/hooks/layout.ts
@@ -1,35 +1,74 @@
-import { useEffect, useRef, useState } from "react";
-
-
+import {
+ MutableRefObject,
+ Ref,
+ useEffect,
+ useLayoutEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
export function useLayout() {
- const [layoutHeight, setLayoutHeigt] = useState(window.innerHeight);
- const [layoutWidth, setLayoutWidth] = useState(window.innerWidth);
- const ref = useRef(null);
-
- const computeLayoutHeight = (windowHeight: number, windowWidth: number) => {
- if (ref.current) {
- setLayoutHeigt(windowHeight - ref.current.getBoundingClientRect().top)
- setLayoutWidth(windowWidth - ref.current.getBoundingClientRect().left)
- }
+ const [layoutHeight, setLayoutHeigt] = useState(window.innerHeight);
+ const [layoutWidth, setLayoutWidth] = useState(window.innerWidth);
+ const ref = useRef(null);
+
+ const computeLayoutHeight = (windowHeight: number, windowWidth: number) => {
+ if (ref.current) {
+ setLayoutHeigt(windowHeight - ref.current.getBoundingClientRect().top);
+ setLayoutWidth(windowWidth - ref.current.getBoundingClientRect().left);
}
-
- const onWindowResize = () => {
- computeLayoutHeight(window.innerHeight, window.innerWidth)
+ };
+
+ const onWindowResize = () => {
+ computeLayoutHeight(window.innerHeight, window.innerWidth);
+ };
+
+ useLayoutEffect(() => {
+ window.addEventListener('resize', onWindowResize);
+ computeLayoutHeight(window.innerHeight, window.innerWidth);
+ return () => {
+ window.removeEventListener('resize', onWindowResize);
+ };
+ });
+
+ return {
+ layoutHeight,
+ layoutWidth,
+ ref,
+ };
+}
+
+export function useElemSize(
+ forwardRef?: MutableRefObject
+) {
+ const innerRef = useRef(null);
+ const ref = forwardRef || innerRef;
+ const [height, setHeight] = useState(0);
+ const [width, setWidth] = useState(0);
+
+ const observer = useRef(
+ new ResizeObserver((entries) => {
+ const { width, height } = entries[0].contentRect;
+ setWidth(width);
+ setHeight(height);
+ })
+ );
+
+ useEffect(() => {
+ if (ref.current) {
+ observer.current.observe(ref.current);
}
- useEffect(() => {
- window.addEventListener('resize', onWindowResize);
- computeLayoutHeight(window.innerHeight, window.innerWidth)
- return () => {
- window.removeEventListener('resize', onWindowResize);
- }
- }, [])
+ return () => {
+ if (!ref.current) return;
+ observer.current.unobserve(ref.current);
+ };
+ }, [ref, observer]);
-
- return {
- layoutHeight,
- layoutWidth,
- ref
- }
-}
\ No newline at end of file
+ return {
+ ref,
+ height,
+ width,
+ };
+}
diff --git a/src/hooks/onboarding.tsx b/src/hooks/onboarding.tsx
new file mode 100644
index 000000000..eec33f318
--- /dev/null
+++ b/src/hooks/onboarding.tsx
@@ -0,0 +1,99 @@
+import {
+ createContext,
+ Reducer,
+ useContext,
+ useEffect,
+ useLayoutEffect,
+ useReducer,
+} from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+import { useConfig } from './config';
+
+type OnboardingAction =
+ | { type: 'progress'; value: number }
+ | { type: 'alone-page'; value: boolean }
+ | { type: 'wifi-creds'; ssid: string; password: string };
+
+interface OnboardingState {
+ progress: number;
+ wifi?: { ssid: string; password: string };
+ alonePage: boolean;
+}
+
+export interface OnboardingContext {
+ state: OnboardingState;
+ applyProgress: (value: number) => void;
+ setWifiCredentials: (ssid: string, password: string) => void;
+ skipSetup: () => void;
+}
+
+export function reducer(state: OnboardingState, action: OnboardingAction) {
+ switch (action.type) {
+ case 'wifi-creds':
+ return {
+ ...state,
+ wifi: { ssid: action.ssid, password: action.password },
+ };
+ case 'progress':
+ return {
+ ...state,
+ progress: action.value,
+ };
+ case 'alone-page':
+ return {
+ ...state,
+ alonePage: action.value,
+ };
+ default:
+ throw new Error(`unhandled state action ${(action as any).type}`);
+ }
+}
+
+export function useProvideOnboarding(): OnboardingContext {
+ const { setConfig } = useConfig();
+ const [state, dispatch] = useReducer<
+ Reducer
+ >(reducer, {
+ progress: 0,
+ alonePage: false,
+ });
+
+ const { state: locatioState } = useLocation();
+
+ useLayoutEffect(() => {
+ const { alonePage = false }: { alonePage?: boolean } =
+ (locatioState as any) || {};
+
+ if (alonePage !== state.alonePage)
+ dispatch({ type: 'alone-page', value: alonePage });
+ }, [locatioState, state]);
+
+ return {
+ state,
+ applyProgress: (value: number) => {
+ useLayoutEffect(() => {
+ dispatch({ type: 'progress', value });
+ }, []);
+ },
+ setWifiCredentials: (ssid: string, password: string) => {
+ dispatch({ type: 'wifi-creds', ssid, password });
+ },
+ skipSetup: () => {
+ setConfig({ doneOnboarding: true });
+ },
+ };
+}
+
+export const OnboardingContextC = createContext(
+ undefined as any
+);
+
+export function useOnboarding() {
+ const context = useContext(OnboardingContextC);
+ if (!context) {
+ throw new Error(
+ 'useOnboarding must be within a OnboardingContext Provider'
+ );
+ }
+ return context;
+}
diff --git a/src/hooks/router.ts b/src/hooks/router.ts
deleted file mode 100644
index 3916ea694..000000000
--- a/src/hooks/router.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-export function usePageScrollTo() {
-
-}
\ No newline at end of file
diff --git a/src/hooks/timeout.ts b/src/hooks/timeout.ts
index ca160981d..311a470b5 100644
--- a/src/hooks/timeout.ts
+++ b/src/hooks/timeout.ts
@@ -1,15 +1,28 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
-export const useTimeout = (fn: () => void, delay: number) => {
+export function useTimeout(fn: () => void, delay: number) {
useEffect(() => {
const id = setTimeout(fn, delay);
return () => clearTimeout(id);
});
-};
+}
-export const useInterval = (fn: () => void, delay: number) => {
+export function useInterval(fn: () => void, delay: number) {
useEffect(() => {
const id = setInterval(fn, delay);
return () => clearInterval(id);
});
-};
\ No newline at end of file
+}
+
+export const useDebouncedEffect = (
+ effect: () => void,
+ deps: any[],
+ delay: number
+) => {
+ useEffect(() => {
+ const handler = setTimeout(() => effect(), delay);
+
+ return () => clearTimeout(handler);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [...(deps || []), delay]);
+};
diff --git a/src/hooks/tracker.tsx b/src/hooks/tracker.tsx
new file mode 100644
index 000000000..c4e36d873
--- /dev/null
+++ b/src/hooks/tracker.tsx
@@ -0,0 +1,116 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { BodyPart, TrackerDataT, TrackerStatus } from 'solarxr-protocol';
+import { QuaternionFromQuatT } from '../maths/quaternion';
+import { useAppContext } from './app';
+
+export function useTrackers() {
+ const { trackers } = useAppContext();
+
+ return {
+ trackers,
+ useAssignedTrackers: () =>
+ useMemo(
+ () =>
+ trackers.filter(
+ ({ tracker }) => tracker.info?.bodyPart !== BodyPart.NONE
+ ),
+ [trackers]
+ ),
+ useUnassignedTrackers: () =>
+ useMemo(
+ () =>
+ trackers.filter(
+ ({ tracker }) => tracker.info?.bodyPart === BodyPart.NONE
+ ),
+ [trackers]
+ ),
+ useConnectedTrackers: () =>
+ useMemo(
+ () =>
+ trackers.filter(
+ ({ tracker }) => tracker.status !== TrackerStatus.DISCONNECTED
+ ),
+ [trackers]
+ ),
+ };
+}
+
+export function useTracker(tracker: TrackerDataT) {
+ return {
+ useName: () =>
+ useMemo(() => {
+ if (tracker.info?.customName) return tracker.info?.customName;
+ if (tracker.info?.bodyPart) return BodyPart[tracker.info?.bodyPart];
+ return tracker.info?.displayName || 'NONE';
+ }, [tracker.info]),
+ useRotation: () =>
+ useMemo(
+ () =>
+ QuaternionFromQuatT({
+ x: tracker.rotation?.x || 0,
+ y: tracker.rotation?.y || 0,
+ z: tracker.rotation?.z || 0,
+ w: tracker.rotation?.w || 1,
+ }).eulerAngles,
+ [tracker.rotation]
+ ),
+ useVelocity: () => {
+ const previousRot = useRef<{
+ x: number;
+ y: number;
+ z: number;
+ w: number;
+ }>(tracker.rotation || { x: 0, y: 0, z: 0, w: 1 });
+ const [velocity, setVelocity] = useState(0);
+ const [rots, setRotation] = useState([]);
+
+ useEffect(() => {
+ if (tracker.rotation) {
+ const rot = QuaternionFromQuatT(tracker.rotation).mul(
+ QuaternionFromQuatT(previousRot.current).inverse()
+ );
+ const dif = Math.min(1, (rot.x ** 2 + rot.y ** 2 + rot.z ** 2) * 2.5);
+ // Use sum of rotation of last 3 frames (0.3sec) for smoother movement and better detection of slow movement.
+ if (rots.length === 3) {
+ rots.shift();
+ }
+ rots.push(dif);
+ setRotation(rots);
+ setVelocity(
+ Math.min(
+ 1,
+ Math.max(
+ 0,
+ rots.reduce((a, b) => a + b)
+ )
+ )
+ );
+ previousRot.current = tracker.rotation;
+ }
+ }, [tracker.rotation]);
+
+ return velocity;
+ },
+ };
+}
+
+export function useTrackerFromId(
+ trackerNum: string | number | undefined,
+ deviceId: string | number | undefined
+) {
+ const { trackers } = useAppContext();
+
+ const tracker = useMemo(
+ () =>
+ trackers.find(
+ ({ tracker }) =>
+ trackerNum &&
+ deviceId &&
+ tracker?.trackerId?.trackerNum == trackerNum &&
+ tracker?.trackerId?.deviceId?.id == deviceId
+ ),
+ [trackers, trackerNum, deviceId]
+ );
+
+ return tracker;
+}
diff --git a/src/hooks/websocket-api.ts b/src/hooks/websocket-api.ts
index 4b71d541a..8ff7f14c4 100644
--- a/src/hooks/websocket-api.ts
+++ b/src/hooks/websocket-api.ts
@@ -1,172 +1,190 @@
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
-import { DataFeedMessage, DataFeedMessageHeaderT, MessageBundle, MessageBundleT, RpcMessage, RpcMessageHeaderT } from 'solarxr-protocol'
+import {
+ DataFeedMessage,
+ DataFeedMessageHeaderT,
+ MessageBundle,
+ MessageBundleT,
+ RpcMessage,
+ RpcMessageHeaderT,
+} from 'solarxr-protocol';
-import { Builder, ByteBuffer } from 'flatbuffers'
-import { useInterval } from "./timeout";
+import { Builder, ByteBuffer } from 'flatbuffers';
+import { useInterval } from './timeout';
export interface WebSocketApi {
- isConnected: boolean,
- useRPCPacket: (type: RpcMessage, callback: (packet: T) => void) => void
- useDataFeedPacket: (type: DataFeedMessage, callback: (packet: T) => void) => void
- sendRPCPacket: (type: RpcMessage, data: RPCPacketType) => void
- sendDataFeedPacket: (type: DataFeedMessage, data: DataFeedPacketType) => void
+ isConnected: boolean;
+ useRPCPacket: (type: RpcMessage, callback: (packet: T) => void) => void;
+ useDataFeedPacket: (
+ type: DataFeedMessage,
+ callback: (packet: T) => void
+ ) => void;
+ sendRPCPacket: (type: RpcMessage, data: RPCPacketType) => void;
+ sendDataFeedPacket: (type: DataFeedMessage, data: DataFeedPacketType) => void;
}
-
-export const WebSocketApiContext = createContext(undefined as any);
+export const WebSocketApiContext = createContext(
+ undefined as never
+);
export type RPCPacketType = RpcMessageHeaderT['message'];
export type DataFeedPacketType = DataFeedMessageHeaderT['message'];
// export type OutboundPacketType = OutboundPacketT['packet'];
export function useProvideWebsocketApi(): WebSocketApi {
- const rpcPacketCounterRef = useRef(0);
- const webSocketRef = useRef(null);
- const rpclistenerRef = useRef(new EventTarget());
- const datafeedlistenerRef = useRef(new EventTarget());
- const [isConnected, setConnected] = useState(false);
+ const rpcPacketCounterRef = useRef(0);
+ const webSocketRef = useRef(null);
+ const rpclistenerRef = useRef(new EventTarget());
+ const datafeedlistenerRef = useRef(new EventTarget());
+ const [isConnected, setConnected] = useState(false);
-
- useInterval(() => {
- if (webSocketRef.current && !isConnected) {
- disconnect();
- connect();
- console.log('Try reconnecting');
- }
- }, 3000);
-
- const onConnected = (event: Event) => {
- if (!webSocketRef.current) return ;
-
- setConnected(true);
+ useInterval(() => {
+ if (webSocketRef.current && !isConnected) {
+ disconnect();
+ connect();
+ console.log('Try reconnecting');
}
+ }, 3000);
- const onConnectionClose = (event: Event) => {
- setConnected(false);
- rpcPacketCounterRef.current = 0;
- }
+ const onConnected = () => {
+ if (!webSocketRef.current) return;
+ setConnected(true);
+ };
- const onMessage = async (event: { data: Blob }) => {
- if (!event.data.arrayBuffer)
- return ;
- const buffer = await event.data.arrayBuffer();
+ const onConnectionClose = () => {
+ setConnected(false);
+ rpcPacketCounterRef.current = 0;
+ };
- const fbb = new ByteBuffer(new Uint8Array(buffer));
+ const onMessage = async (event: { data: Blob }) => {
+ if (!event.data.arrayBuffer) return;
+ const buffer = await event.data.arrayBuffer();
- const message = MessageBundle.getRootAsMessageBundle(fbb).unpack();
+ const fbb = new ByteBuffer(new Uint8Array(buffer));
+ const message = MessageBundle.getRootAsMessageBundle(fbb).unpack();
- message.rpcMsgs.forEach((rpcHeader) => {
- rpclistenerRef.current?.dispatchEvent(new CustomEvent(RpcMessage[rpcHeader.messageType], { detail: rpcHeader.message }))
+ message.rpcMsgs.forEach((rpcHeader) => {
+ rpclistenerRef.current?.dispatchEvent(
+ new CustomEvent(RpcMessage[rpcHeader.messageType], {
+ detail: rpcHeader.message,
})
+ );
+ });
- message.dataFeedMsgs.forEach((datafeedHeader) => {
- datafeedlistenerRef.current?.dispatchEvent(new CustomEvent(DataFeedMessage[datafeedHeader.messageType], { detail: datafeedHeader.message }))
+ message.dataFeedMsgs.forEach((datafeedHeader) => {
+ datafeedlistenerRef.current?.dispatchEvent(
+ new CustomEvent(DataFeedMessage[datafeedHeader.messageType], {
+ detail: datafeedHeader.message,
})
- }
+ );
+ });
+ };
- const sendRPCPacket = (type: RpcMessage, data: RPCPacketType): void => {
- if (!webSocketRef.current)
- throw new Error('No connection');
+ const sendRPCPacket = (type: RpcMessage, data: RPCPacketType): void => {
+ if (!webSocketRef.current) throw new Error('No connection');
- const fbb = new Builder(1);
+ const fbb = new Builder(1);
- const message = new MessageBundleT();
+ const message = new MessageBundleT();
+ const rpcHeader = new RpcMessageHeaderT();
+ rpcHeader.messageType = type;
+ rpcHeader.message = data;
- const rpcHeader = new RpcMessageHeaderT();
- rpcHeader.messageType = type;
- rpcHeader.message = data;
+ message.rpcMsgs = [rpcHeader];
+ fbb.finish(message.pack(fbb));
- message.rpcMsgs = [rpcHeader]
- fbb.finish(message.pack(fbb));
+ webSocketRef.current.send(fbb.asUint8Array());
- webSocketRef.current.send(fbb.asUint8Array());
+ rpcPacketCounterRef.current++;
+ };
+ const sendDataFeedPacket = (
+ type: DataFeedMessage,
+ data: DataFeedPacketType
+ ): void => {
+ if (!webSocketRef.current) throw new Error('No connection');
+ const fbb = new Builder(1);
- rpcPacketCounterRef.current++;
- }
+ const message = new MessageBundleT();
- const sendDataFeedPacket = (type: DataFeedMessage, data: DataFeedPacketType): void => {
- if (!webSocketRef.current)
- throw new Error('No connection');
+ const datafeedHeader = new DataFeedMessageHeaderT();
+ datafeedHeader.messageType = type;
+ datafeedHeader.message = data;
- const fbb = new Builder(1);
+ message.dataFeedMsgs = [datafeedHeader];
+ fbb.finish(message.pack(fbb));
- const message = new MessageBundleT();
+ webSocketRef.current.send(fbb.asUint8Array());
+ };
- const datafeedHeader = new DataFeedMessageHeaderT();
- datafeedHeader.messageType = type;
- datafeedHeader.message = data;
+ const connect = () => {
+ webSocketRef.current = new WebSocket('ws://localhost:21110');
- message.dataFeedMsgs = [datafeedHeader]
- fbb.finish(message.pack(fbb));
+ // Connection opened
+ webSocketRef.current.addEventListener('open', onConnected);
+ webSocketRef.current.addEventListener('close', onConnectionClose);
+ webSocketRef.current.addEventListener('message', onMessage);
+ };
- webSocketRef.current.send(fbb.asUint8Array());
- }
+ const disconnect = () => {
+ if (!webSocketRef.current) return;
- const connect = () => {
- webSocketRef.current = new WebSocket('ws://localhost:21110');
-
+ webSocketRef.current.removeEventListener('open', onConnected);
+ webSocketRef.current.removeEventListener('close', onConnectionClose);
+ webSocketRef.current.removeEventListener('message', onMessage);
+ };
- // Connection opened
- webSocketRef.current.addEventListener('open', onConnected);
- webSocketRef.current.addEventListener('close', onConnectionClose);
- webSocketRef.current.addEventListener('message', onMessage);
- }
+ useEffect(() => {
+ connect();
+ return () => {
+ disconnect();
+ };
+ }, []);
- const disconnect = () => {
- if (!webSocketRef.current) return ;
-
- webSocketRef.current.removeEventListener('open', onConnected);
- webSocketRef.current.removeEventListener('close', onConnectionClose);
- webSocketRef.current.removeEventListener('message', onMessage);
- }
-
- useEffect(() => {
- connect();
+ return {
+ isConnected,
+ useDataFeedPacket: (
+ type: DataFeedMessage,
+ callback: (packet: T) => void
+ ) => {
+ useEffect(() => {
+ const onEvent = (event: CustomEventInit) => {
+ callback(event.detail);
+ };
+ datafeedlistenerRef.current.addEventListener(
+ DataFeedMessage[type],
+ onEvent
+ );
return () => {
- disconnect();
- }
- }, [])
-
- return {
- isConnected,
- useDataFeedPacket: (type: DataFeedMessage, callback: (packet: T) => void) => {
- const onEvent = (event: CustomEventInit) => {
- callback(event.detail)
- }
-
- useEffect(() => {
- datafeedlistenerRef.current.addEventListener(DataFeedMessage[type], onEvent)
- return () => {
- datafeedlistenerRef.current.removeEventListener(DataFeedMessage[type], onEvent)
- }
- }, [])
- },
- useRPCPacket: (type: RpcMessage, callback: (packet: T) => void) => {
- const onEvent = (event: CustomEventInit) => {
- callback(event.detail)
- }
-
- useEffect(() => {
- rpclistenerRef.current.addEventListener(RpcMessage[type], onEvent)
- return () => {
- rpclistenerRef.current.removeEventListener(RpcMessage[type], onEvent)
- }
- }, [])
- },
- sendRPCPacket,
- sendDataFeedPacket
- }
+ datafeedlistenerRef.current.removeEventListener(
+ DataFeedMessage[type],
+ onEvent
+ );
+ };
+ }, [callback, type]);
+ },
+ useRPCPacket: (type: RpcMessage, callback: (packet: T) => void) => {
+ useEffect(() => {
+ const onEvent = (event: CustomEventInit) => {
+ callback(event.detail);
+ };
+ rpclistenerRef.current.addEventListener(RpcMessage[type], onEvent);
+ return () => {
+ rpclistenerRef.current.removeEventListener(RpcMessage[type], onEvent);
+ };
+ }, [callback, type]);
+ },
+ sendRPCPacket,
+ sendDataFeedPacket,
+ };
}
-
export function useWebsocketAPI(): WebSocketApi {
- const context = useContext(WebSocketApiContext);
- if (!context) {
- throw new Error('useWebsocketAPI must be within a WebSocketApi Provider')
- }
- return context;
-}
\ No newline at end of file
+ const context = useContext(WebSocketApiContext);
+ if (!context) {
+ throw new Error('useWebsocketAPI must be within a WebSocketApi Provider');
+ }
+ return context;
+}
diff --git a/src/index.css b/src/index.css
index 3de263426..2aa04a45d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,49 +2,48 @@
@tailwind components;
@tailwind utilities;
-
body {
font-variant-numeric: tabular-nums;
- font-family: "Work Sans", sans-serif;
+ font-family: 'poppins', sans-serif;
height: 100vh;
width: 100vw;
user-select: none;
- overflow: hidden;
- border-radius: 15px;
+ background: theme('colors.background.20');
}
html {
overflow: hidden;
- border-radius: 15px;
+ background: theme('colors.background.20');
}
#root {
height: 100%;
}
-
::-webkit-scrollbar {
- width: 10px;
- height: 10px;
+ width: 4px;
+ height: 4px;
}
::-webkit-scrollbar-corner {
- background-color: theme('colors.purple-gray.900');
+ background-color: transparent;
}
::-webkit-scrollbar-track {
- background: theme('colors.purple-gray.600');
+ background: transparent;
border-radius: 50px;
- border-radius: 50px;
-
}
::-webkit-scrollbar-thumb {
- background: theme('colors.purple-gray.400');
- border-radius: 50px;
+ background: theme('colors.background.50');
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
- background: theme('colors.purple-gray.300');
-}
\ No newline at end of file
+ background: theme('colors.background.60');
+}
+
+input::-ms-reveal,
+input::-ms-clear {
+ display: none;
+}
diff --git a/src/index.tsx b/src/index.tsx
index b40707a45..da70ffca2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,8 +1,10 @@
import * as ReactDOMClient from 'react-dom/client';
-import "@fontsource/work-sans/variable.css";
+import '@fontsource/poppins/500.css';
+import '@fontsource/poppins/700.css';
import './index.css';
import App from './App';
import Modal from 'react-modal';
+import React from 'react';
Modal.setAppElement('#root');
@@ -11,6 +13,8 @@ const container = document.getElementById('root');
if (container) {
const root = ReactDOMClient.createRoot(container);
root.render(
-
+
);
}
diff --git a/src/maths/angle.ts b/src/maths/angle.ts
index d40a44de6..466a17589 100644
--- a/src/maths/angle.ts
+++ b/src/maths/angle.ts
@@ -1,5 +1,3 @@
-
-
export const DEG_TO_RAD = Math.PI / 180.0;
-export const RAD_TO_DEG = 180.0 / Math.PI;
\ No newline at end of file
+export const RAD_TO_DEG = 180.0 / Math.PI;
diff --git a/src/maths/quaternion.ts b/src/maths/quaternion.ts
index 37f646d89..1314ba3e5 100644
--- a/src/maths/quaternion.ts
+++ b/src/maths/quaternion.ts
@@ -1,25 +1,34 @@
import { Quaternion } from 'math3d';
import { QuatT } from 'solarxr-protocol';
-
-export function QuaternionFromQuatT(q: { x: number, y: number, z: number, w: number }) {
- return new Quaternion(q.x, q.y, q.z, q.w)
+export function QuaternionFromQuatT(q: {
+ x: number;
+ y: number;
+ z: number;
+ w: number;
+}) {
+ return new Quaternion(q.x, q.y, q.z, q.w);
}
-export function QuaternionToQuatT(q: { x: number, y: number, z: number, w: number }) {
- const quat = new QuatT();
+export function QuaternionToQuatT(q: {
+ x: number;
+ y: number;
+ z: number;
+ w: number;
+}) {
+ const quat = new QuatT();
- quat.x = q.x;
- quat.y = q.y;
- quat.z = q.z;
- quat.w = q.w;
- return quat;
+ quat.x = q.x;
+ quat.y = q.y;
+ quat.z = q.z;
+ quat.w = q.w;
+ return quat;
}
export function FixEuler(yaw: number) {
- if(yaw > 180) {
- yaw *= -1;
- yaw += 180;
- }
- return Math.round(yaw)
-}
\ No newline at end of file
+ if (yaw > 180) {
+ yaw *= -1;
+ yaw += 180;
+ }
+ return Math.round(yaw);
+}
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 624c875ec..7cb0ddde1 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -1,6 +1,6 @@
-/// & { title?: string }>;
+ export const ReactComponent: React.FunctionComponent<
+ React.SVGProps & { title?: string }
+ >;
const src: string;
export default src;
diff --git a/tailwind.config.js b/tailwind.config.js
index 020edaea5..1ceda9de0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,60 +1,89 @@
-const plugin = require('tailwindcss/plugin')
+const plugin = require('tailwindcss/plugin');
-const rem = (px) => `${(px / 12).toFixed(4)}rem`
+const rem = (pt) => `${pt / 16}rem`;
+
+const colors = {
+ 'blue-gray': {
+ 100: '#ffffff',
+ 200: '#78A4C6',
+ 300: '#608AAB',
+ 400: '#3D6381',
+ 500: '#1A3D59',
+ 600: '#112D43',
+ 700: '#081E30',
+ 800: '#00101C',
+ 900: '#000509',
+ },
+ purple: {
+ 100: '#BB8AE5',
+ 200: '#9D5CD4',
+ 500: '#65459A',
+ 700: '#623B83',
+ 900: '#2E2145',
+ },
+};
module.exports = {
- content: ["./src/**/*.{js,jsx,ts,tsx}",],
+ content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
+ screens: {
+ xs: '800px',
+ sm: '900px',
+ md: '1100px',
+ lg: '1300px',
+ xl: '1600px',
+ },
extend: {
colors: {
- 'accent': {
- darker: '#831ECC',
- lighter: '#C06FFB'
- },
- 'status': {
- online: '#9AFF76',
- warning: '#FFB257',
- error: '#FF6464'
- },
- 'purple-gray': {
- 900: "#160B1D",
- 800: "#261730",
- 700: "#3F2A4F",
- 600: "#593E6C",
- 500: "#6E5084",
- 400: "#8E6BA7",
- 300: "#C0A1D8",
- 200: "#EFE2F9",
- 100: "#FFFFFF"
+ status: {
+ success: '#50E897',
+ warning: '#D8CD37',
+ critical: '#DF6D8C',
+ special: '#A44FED',
},
+ ...colors,
+ background: Object.keys(colors['blue-gray']).reduce(
+ (curr, colork, index) => ({
+ ...curr,
+ [(index + 1) * 10]: colors['blue-gray'][colork],
+ }),
+ {}
+ ),
+ 'accent-background': Object.keys(colors.purple).reduce(
+ (curr, colork, index) => ({
+ ...curr,
+ [(index + 1) * 10]: colors.purple[colork],
+ }),
+ {}
+ ),
},
fontSize: {
- DEFAULT: rem(12),
+ DEFAULT: rem(10),
},
fontWeight: {
- DEFAULT: 400,
- }
+ DEFAULT: 500,
+ },
+ color: {
+ DEFAULT: '#ffffff',
+ },
},
},
plugins: [
require('@tailwindcss/forms'),
- plugin(function({ addUtilities, theme }) {
-
- const textConfig = (fontSize, fontWeight, color) => ({
- color,
+ plugin(function ({ addUtilities, theme }) {
+ const textConfig = (fontSize, fontWeight) => ({
fontSize,
- fontWeight
- })
+ fontWeight,
+ });
addUtilities({
- '.text-heading': textConfig(rem(35), 700, theme('colors.purple-gray.100')),
- '.text-secondary-heading': textConfig(rem(25), 700, theme('colors.purple-gray.100')),
- '.text-field-title': textConfig(rem(12), 700, theme('colors.purple-gray.100')),
- '.text-extra-emphasised': textConfig(rem(12), 600, theme('colors.purple-gray.100')),
- '.text-emphasised': textConfig(rem(12), 400, theme('colors.purple-gray.100')),
- '.text-default': textConfig(rem(12), 400, theme('colors.purple-gray.300')),
- '.text-section-indicator': textConfig(rem(12), 700, theme('colors.purple-gray.400'))
- })
- })
+ '.text-main-title': textConfig(rem(25), 700),
+ '.text-section-title': textConfig(rem(12), 700),
+ '.text-standard': textConfig(rem(10), 500),
+ '.text-vr-accesible': textConfig(rem(14), 500),
+ '.text-vr-accesible-bold': textConfig(rem(14), 700),
+ '.text-standard-bold': textConfig(rem(10), 700),
+ });
+ }),
],
-}
\ No newline at end of file
+};
+ {statusLabel}
+
+ );
+}
diff --git a/src/components/tracker/TrackerWifi.tsx b/src/components/tracker/TrackerWifi.tsx
new file mode 100644
index 000000000..36efaff6e
--- /dev/null
+++ b/src/components/tracker/TrackerWifi.tsx
@@ -0,0 +1,30 @@
+import { WifiIcon } from '../commons/icon/WifiIcon';
+import { Typography } from '../commons/Typography';
+
+export function TrackerWifi({
+ rssi,
+ ping,
+ disabled,
+}: {
+ rssi: number;
+ ping: number;
+ disabled?: boolean;
+}) {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/components/tracker/TrackersTable.tsx b/src/components/tracker/TrackersTable.tsx
new file mode 100644
index 000000000..52c3cc5ba
--- /dev/null
+++ b/src/components/tracker/TrackersTable.tsx
@@ -0,0 +1,223 @@
+import classNames from 'classnames';
+import { MouseEventHandler, ReactChild, useState } from 'react';
+import {
+ TrackerDataT,
+ TrackerIdT,
+ TrackerStatus as TrackerStatusEnum,
+} from 'solarxr-protocol';
+import { FlatDeviceTracker } from '../../hooks/app';
+import { useTracker } from '../../hooks/tracker';
+import { FootIcon } from '../commons/icon/FootIcon';
+import { Typography } from '../commons/Typography';
+import { TrackerBattery } from './TrackerBattery';
+import { TrackerStatus } from './TrackerStatus';
+import { TrackerWifi } from './TrackerWifi';
+
+export function TrackerNameCol({ tracker }: { tracker: TrackerDataT }) {
+ const { useName } = useTracker(tracker);
+
+ const name = useName();
+
+ return (
+
+
+ {!disabled && (
+
+ {ping} ms
+
+ )}
+ {disabled && (
+
+
+
+ )}
+
+
+ );
+}
+
+export function TrackerRotCol({ tracker }: { tracker: TrackerDataT }) {
+ const { useRotation } = useTracker(tracker);
+
+ const rot = useRotation();
+
+ return (
+
+
+
+ {name}
+
+
+ {children}
+
+ );
+}
+
+export function TrackersTable({
+ flatTrackers,
+ clickedTracker,
+}: {
+ clickedTracker: (tracker: TrackerDataT) => void;
+ flatTrackers: FlatDeviceTracker[];
+}) {
+ const [hoverTracker, setHoverTracker] = useState
+
+ );
+}
diff --git a/src/gobals.d.ts b/src/gobals.d.ts
index 6eb21d016..e69de29bb 100644
--- a/src/gobals.d.ts
+++ b/src/gobals.d.ts
@@ -1,5 +0,0 @@
-import * as react from 'react'
-
-declare module 'react' {
- function useId(): string;
-}
\ No newline at end of file
diff --git a/src/hooks/app.ts b/src/hooks/app.ts
index e18ecf210..8d8fd4e21 100644
--- a/src/hooks/app.ts
+++ b/src/hooks/app.ts
@@ -1,55 +1,127 @@
-import { createContext, Dispatch, useContext, useReducer } from "react";
-
-type AppStateAction =
- | { type: 'debug', value: boolean }
+import {
+ createContext,
+ Dispatch,
+ Reducer,
+ useContext,
+ useEffect,
+ useLayoutEffect,
+ useMemo,
+ useReducer,
+} from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+ DataFeedConfigT,
+ DataFeedMessage,
+ DataFeedUpdateT,
+ DeviceDataMaskT,
+ DeviceDataT,
+ StartDataFeedT,
+ TrackerDataMaskT,
+ TrackerDataT,
+} from 'solarxr-protocol';
+import { useConfig } from './config';
+import { useWebsocketAPI } from './websocket-api';
+export interface FlatDeviceTracker {
+ device?: DeviceDataT;
+ tracker: TrackerDataT;
+}
+type AppStateAction = { type: 'datafeed'; value: DataFeedUpdateT };
export interface AppState {
- debug: boolean;
+ datafeed?: DataFeedUpdateT;
}
-
export interface AppContext {
- state: AppState;
- dispatch: Dispatch
+ clickedTracker(tracker)}
+ hover={trackerEqual(tracker.trackerId)}
+ onMouseOver={() => setHoverTracker(tracker.trackerId)}
+ onMouseOut={() => setHoverTracker(null)}
+ >
+
+ ))}
+
+ Tracker
+ {flatTrackers.map(({ tracker }, index) => (
+
+ clickedTracker(tracker)}
+ hover={trackerEqual(tracker.trackerId)}
+ onMouseOver={() => setHoverTracker(tracker.trackerId)}
+ onMouseOut={() => setHoverTracker(null)}
+ >
+
+ {device?.hardwareInfo?.manufacturer || '--'}
+
+
+ ))}
+
+ Type
+ {flatTrackers.map(({ device, tracker }, index) => (
+
+ clickedTracker(tracker)}
+ hover={trackerEqual(tracker.trackerId)}
+ onMouseOver={() => setHoverTracker(tracker.trackerId)}
+ onMouseOut={() => setHoverTracker(null)}
+ >
+ {(device &&
+ device.hardwareStatus &&
+ device.hardwareStatus.batteryPctEstimate && (
+
+ ))}
+
+ Battery
+ {flatTrackers.map(({ device, tracker }, index) => (
+
+ clickedTracker(tracker)}
+ hover={trackerEqual(tracker.trackerId)}
+ onMouseOver={() => setHoverTracker(tracker.trackerId)}
+ onMouseOut={() => setHoverTracker(null)}
+ >
+ {(device &&
+ device.hardwareStatus &&
+ device.hardwareStatus.rssi &&
+ device.hardwareStatus.ping && (
+
+ ))}
+
+ Ping
+ {flatTrackers.map(({ device, tracker }, index) => (
+
+ clickedTracker(tracker)}
+ hover={trackerEqual(tracker.trackerId)}
+ onMouseOver={() => setHoverTracker(tracker.trackerId)}
+ onMouseOut={() => setHoverTracker(null)}
+ >
+
+ ))}
+
+ Rotation X/Y/Z
+ {flatTrackers.map(({ tracker }, index) => (
+
+ clickedTracker(tracker)}
+ hover={trackerEqual(tracker.trackerId)}
+ onMouseOver={() => setHoverTracker(tracker.trackerId)}
+ onMouseOut={() => setHoverTracker(null)}
+ >
+
+
+ {`${tracker.position?.x.toFixed(
+ 0
+ )} / ${tracker.position?.y.toFixed(
+ 0
+ )} / ${tracker.position?.z.toFixed(0)}`}
+
+
+
+ ))}
+
+ Position X/Y/Z
+ {flatTrackers.map(({ tracker }, index) => (
+
+ clickedTracker(tracker)}
+ hover={trackerEqual(tracker.trackerId)}
+ onMouseOver={() => setHoverTracker(tracker.trackerId)}
+ onMouseOut={() => setHoverTracker(null)}
+ >
+ {device?.customName}
+
+ ))}
+
+ URL
+ {flatTrackers.map(({ device, tracker }, index) => (
+