Add more tutorials on setup (#696)

Co-authored-by: Erimel <[email protected]>

gui/public/i18n/en/translation.ftl

@@ -1,4 +1,3 @@
-### SlimeVR complete GUI translations
 # Please developers (not translators) don't reuse a key inside another key
 # or concat text with a translation string in the code, use the appropriate
 # features like variables and selectors in each appropriate case!
@@ -492,7 +491,23 @@ onboarding-wifi_creds-password =
 ## Mounting setup
 onboarding-reset_tutorial-back = Go Back to Mounting calibration
 onboarding-reset_tutorial = Reset tutorial
-onboarding-reset_tutorial-description = This feature isn't done, just press continue
+onboarding-reset_tutorial-description = While you use your trackers they might get out of alignment because of IMU yaw drift, or because you might have moved them physically. You have several ways to fix this.
+onboarding-reset_tutorial-skip = Skip step
+# Cares about multiline
+onboarding-reset_tutorial-0 = Tap { $taps } times the highlighted tracker for triggering yaw reset.
+
+    This will make the trackers face the same direction as your HMD.
+# Cares about multiline
+onboarding-reset_tutorial-1 = Tap { $taps } times the highlighted tracker for triggering full reset.
+
+    You need to be standing for this (i-pose). There is a 3 seconds delay (configurable) before it actually happens.
+    This fully resets the position and rotation of all your trackers. It should fix most issues.
+# Cares about multiline
+onboarding-reset_tutorial-2 = Tap { $taps } times the highlighted tracker for triggering mounting reset.
+
+    Mounting reset helps on how the trackers are actually put on you, so if you accidentally moved them and changed how they are oriented by a big amount, this will help.
+
+    You need to be on a pose like you are skiing like it's shown on the Automatic Mounting wizard and you have a 3 second delay (configurable) before it gets triggered.
 
 ## Setup start
 onboarding-home = Welcome to SlimeVR
@@ -546,6 +561,15 @@ onboarding-calibration_tutorial-status-calibrating = Calibrating
 onboarding-calibration_tutorial-status-success = Nice!
 onboarding-calibration_tutorial-status-error = The tracker was moved
 
+## Tracker assignment tutorial
+onboarding-assignment_tutorial = How to prepare a Slime Tracker before putting it on
+onboarding-assignment_tutorial-first_step = 1. Place a body part sticker (if you have one) on the tracker according to your choosing
+# This text has a character limit of around 11 characters, so please keep it short
+onboarding-assignment_tutorial-sticker = Sticker
+onboarding-assignment_tutorial-second_step = 2. Attach the strap to your tracker, keeping the hook and loop side of the strap face in the following orientation:
+onboarding-assignment_tutorial-second_step-continuation = The hook and loop side for the extension should be in this orientation:
+onboarding-assignment_tutorial-done = I put stickers and straps!
+
 ## Tracker assignment setup
 onboarding-assign_trackers-back = Go Back to Wi-Fi Credentials
 onboarding-assign_trackers-title = Assign trackers
@@ -621,6 +645,8 @@ onboarding-assign_trackers-warning-WAIST = Waist is assigned but you need { $una
 
 ## Tracker mounting method choose
 onboarding-choose_mounting = What mounting calibration method to use?
+# Multiline text
+onboarding-choose_mounting-description = Mounting orientation corrects for the placement of trackers on your body.
 onboarding-choose_mounting-auto_mounting = Automatic mounting
 # Italized text
 onboarding-choose_mounting-auto_mounting-subtitle = Recommended
@@ -660,6 +686,9 @@ onboarding-automatic_mounting-put_trackers_on-next = I have all my trackers on
 
 ## Tracker proportions method choose
 onboarding-choose_proportions = What proportion calibration method to use?
+# Multiline string
+onboarding-choose_proportions-description = Body proportions are used to know the measurements of your body. They're required to calculate the trackers' positions.
+    When proportions of your body don't match the ones saved, your tracking precision will be worse and you will notice things like skating or sliding, or your body not matching your avatar well.
 onboarding-choose_proportions-auto_proportions = Automatic proportions
 # Italized text
 onboarding-choose_proportions-auto_proportions-subtitle = Recommended
@@ -732,7 +761,7 @@ home-no_trackers = No trackers detected or assigned
 ## Status system
 status_system-StatusTrackerReset = It is recommended to perform a full reset as one or more trackers are unadjusted.
 status_system-StatusSteamVRDisconnected = { $type ->
-    *[steamvr] Unable to connect to SteamVR via the SlimeVR driver.
-    [steamvr_feeder] Unable to connect to the SlimeVR Feeder App.
+    *[steamvr] Currently not connected to SteamVR via the SlimeVR driver.
+    [steamvr_feeder] Currently not connected to the SlimeVR Feeder App.
 }
 status_system-StatusTrackerError = The { $trackerName } tracker has an error.

gui/src/App.tsx

@@ -46,9 +46,12 @@ import { LogicalSize, appWindow } from '@tauri-apps/api/window';
 import { StatusProvider } from './components/providers/StatusSystemContext';
 import { Release, VersionUpdateModal } from './components/VersionUpdateModal';
 import { CalibrationTutorialPage } from './components/onboarding/pages/CalibrationTutorial';
+import { AssignmentTutorialPage } from './components/onboarding/pages/assignment-preparation/AssignmentTutorial';
+import { open } from '@tauri-apps/api/shell';
 
 export const GH_REPO = 'SlimeVR/SlimeVR-Server';
 export const VersionContext = createContext('');
+export const DOCS_SITE = 'https://docs.slimevr.dev/';
 
 function Layout() {
   const { loading } = useConfig();
@@ -104,6 +107,7 @@ function Layout() {
             path="calibration-tutorial"
             element={<CalibrationTutorialPage />}
           />
+          <Route path="assign-tutorial" element={<AssignmentTutorialPage />} />
           <Route path="trackers-assign" element={<TrackersAssignPage />} />
           <Route path="enter-vr" element={<EnterVRPage />} />
           <Route path="mounting/choose" element={<MountingChoose />}></Route>
@@ -224,6 +228,17 @@ export default function App() {
     };
   }, []);
 
+  useEffect(() => {
+    function onKeyboard(ev: KeyboardEvent) {
+      if (ev.key === 'F1') {
+        return open(DOCS_SITE).catch(() => window.open(DOCS_SITE, '_blank'));
+      }
+    }
+
+    document.addEventListener('keypress', onKeyboard);
+    return () => document.removeEventListener('keypress', onKeyboard);
+  }, []);
+
   return (
     <Router>
       <ConfigContextProvider>

gui/src/components/MainLayout.tsx

@@ -21,7 +21,7 @@ import { ClearDriftCompensationButton } from './ClearDriftCompensationButton';
 import { useWebsocketAPI } from '../hooks/websocket-api';
 import { useStatusContext, parseStatusToLocale } from '../hooks/status-system';
 import { Localized } from '@fluent/react';
-import { WarningBox } from './commons/TipBox';
+import { TipBox } from './commons/TipBox';
 import { useAppContext } from '../hooks/app';
 import { TrackingPauseButton } from './TrackingPauseButton';
 
@@ -133,11 +133,11 @@ export function MainLayoutRoute({
                       vars={parseStatusToLocale(status, trackers)}
                       key={status.id}
                     >
-                      <WarningBox whitespace={false} hideIcon={true}>
+                      <TipBox whitespace={false} hideIcon={true}>
                         {`Warning, you should fix ${
                           StatusData[status.dataType]
                         }`}
-                      </WarningBox>
+                      </TipBox>
                     </Localized>
                   ))}
                 </div>

gui/src/components/TopBar.tsx

@@ -15,8 +15,9 @@ import { ProgressBar } from './commons/ProgressBar';
 import { Typography } from './commons/Typography';
 import { DownloadIcon } from './commons/icon/DownloadIcon';
 import { open } from '@tauri-apps/api/shell';
-import { GH_REPO, VersionContext } from '../App';
+import { GH_REPO, VersionContext, DOCS_SITE } from '../App';
 import classNames from 'classnames';
+import { QuestionIcon } from './commons/icon/QuestionIcon';
 
 export function TopBar({
   progress,
@@ -115,6 +116,17 @@ export function TopBar({
         className="flex justify-end items-center px-2 gap-2 z-50"
         data-tauri-drag-region
       >
+        <div
+          className={classNames(
+            'flex items-center justify-center stroke-window-icon',
+            'hover:bg-background-60 rounded-full w-7 h-7 cursor-pointer'
+          )}
+          onClick={() =>
+            open(DOCS_SITE).catch(() => window.open(DOCS_SITE, '_blank'))
+          }
+        >
+          <QuestionIcon></QuestionIcon>
+        </div>
         <div
           className="flex items-center justify-center hover:bg-background-60 rounded-full w-7 h-7"
           onClick={() => appWindow.minimize()}

gui/src/components/commons/TipBox.tsx

@@ -4,14 +4,32 @@ import { WarningIcon } from './icon/WarningIcon';
 import { Typography } from './Typography';
 import classNames from 'classnames';
 
-export function TipBox({ children }: { children: ReactNode }) {
+export function TipBox({
+  children,
+  hideIcon = false,
+  whitespace = false,
+}: {
+  children: ReactNode;
+  hideIcon?: boolean;
+  whitespace?: boolean;
+}) {
   return (
     <div className="flex flex-row gap-4 bg-accent-background-50 p-4 rounded-md">
-      <div className="fill-accent-background-20 flex flex-col justify-center">
+      <div
+        className={classNames(
+          'fill-accent-background-20 flex flex-col justify-center',
+          hideIcon && 'hidden'
+        )}
+      >
         <BulbIcon></BulbIcon>
       </div>
       <div className="flex flex-col">
-        <Typography color="text-accent-background-10">{children}</Typography>
+        <Typography
+          color="text-accent-background-10"
+          whitespace={whitespace ? 'whitespace-pre' : undefined}
+        >
+          {children}
+        </Typography>
       </div>
     </div>
   );

gui/src/components/commons/icon/PauseIcon.tsx

@@ -1,6 +1,6 @@
 export function PauseIcon({ width = 33 }: { width?: number }) {
   return (
-    <svg width={width} height="24" viewBox="0 0 24 24">
+    <svg width={width} height="29" viewBox="0 0 24 24">
       <path d="M 5.9998494,-4.225e-5 A 2,2 0 0 0 3.9999715,1.9998356 V 22.000165 a 2,2 0 0 0 1.9998779,1.999877 2,2 0 0 0 1.999878,-1.999877 V 1.9998356 A 2,2 0 0 0 5.9998494,-4.225e-5 Z m 12.0003006,0 A 2,2 0 0 0 15.999756,1.9998356 V 22.000165 a 2,2 0 0 0 2.000394,1.999877 2,2 0 0 0 1.999878,-1.999877 V 1.9998356 A 2,2 0 0 0 18.00015,-4.225e-5 Z" />
     </svg>
   );

gui/src/components/commons/icon/PlayIcon.tsx

@@ -1,6 +1,6 @@
 export function PlayIcon({ width = 33 }: { width?: number }) {
   return (
-    <svg width={width} height="24" viewBox="0 0 24 24">
+    <svg width={width} height="29" viewBox="0 0 24 24">
       <path d="M 4.8398087,0.31374371 21.480589,9.976131 a 2.3403036,2.3403036 0 0 1 0,4.047737 L 4.8398087,23.686256 A 2.3203976,2.3203976 0 0 1 1.354257,21.679602 V 2.3203979 A 2.3203976,2.3203976 0 0 1 4.8398087,0.31374371 Z" />
     </svg>
   );

gui/src/components/commons/icon/QuestionIcon.tsx

@@ -0,0 +1,17 @@
+export function QuestionIcon({ width = 35 }: { width?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      width={width}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
+      />
+    </svg>
+  );
+}

gui/src/components/commons/icon/TrashIcon.tsx

@@ -4,7 +4,7 @@ export function TrashIcon({ width = 33 }: { width: number }) {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       width={width}
-      height="24"
+      height="29"
     >
       <path
         fillRule="evenodd"

gui/src/components/onboarding/BodyAssignment.tsx

@@ -36,7 +36,7 @@ export function BodyAssignment({
   onlyAssigned = false,
 }: {
   advanced: boolean;
-  onlyAssigned: boolean;
+  onlyAssigned?: boolean;
   rolesWithErrors?: Partial<Record<BodyPart, BodyPartError>>;
   highlightedRoles?: BodyPart[];
   onRoleSelected: (role: BodyPart) => void;

gui/src/components/onboarding/pages/CalibrationTutorial.tsx

@@ -9,6 +9,7 @@ import { ProgressBar } from '../../commons/ProgressBar';
 import { LoaderIcon, SlimeState } from '../../commons/icon/LoaderIcon';
 import { useCountdown } from '../../../hooks/countdown';
 import classNames from 'classnames';
+import { TaybolIcon } from '../../commons/icon/TaybolIcon';
 
 export enum CalibrationStatus {
   SUCCESS,
@@ -66,7 +67,7 @@ export function CalibrationTutorialPage() {
     }
   }, [calibrationStatus, l10n]);
 
-  applyProgress(0.45);
+  applyProgress(0.43);
 
   return (
     <>
@@ -137,7 +138,7 @@ export function CalibrationTutorialPage() {
                 </Button>
                 <Button
                   variant="primary"
-                  to="/onboarding/trackers-assign"
+                  to="/onboarding/assign-tutorial"
                   className={classNames(
                     'ml-auto',
                     CalibrationStatus.SUCCESS !== calibrationStatus && 'hidden'
@@ -149,8 +150,9 @@ export function CalibrationTutorialPage() {
             </div>
           </div>
           <div className="flex self-center w-[32rem]">
-            <div>
-              <img src="/images/taybol.png"></img>
+            <div className="stroke-none fill-background-10">
+              <TaybolIcon width="500"></TaybolIcon>
+              {/* <img src="/images/taybol.png"></img> */}
             </div>
           </div>
         </div>

gui/src/components/onboarding/pages/ConnectTracker.tsx

@@ -217,7 +217,7 @@ export function ConnectTrackersPage() {
                   ? '/'
                   : bnoExists
                   ? '/onboarding/calibration-tutorial'
-                  : '/onboarding/trackers-assign'
+                  : '/onboarding/assign-tutorial'
               }
               className="ml-auto"
             >