DIY Firmware Tool – Link to IMU Board Rotation

gui/public/i18n/en/translation.ftl

@@ -1366,9 +1366,10 @@ firmware_tool-add_imus_step-description =
     If you followed the SlimeVR documentation, the default values should be correct.
 firmware_tool-add_imus_step-imu_type-label = IMU type
 firmware_tool-add_imus_step-imu_type-placeholder = Select the type of IMU
-firmware_tool-add_imus_step-imu_rotation =
-    .label = IMU Rotation (deg)
-    .placeholder = Rotation angle of the IMU
+
+firmware_tool-add_imus_step-imu_rotation-tooltip = Click to open documentation
+firmware_tool-add_imus_step-imu_rotation-tooltip-label = IMU Rotation (Degree)
+firmware_tool-add_imus_step-imu_rotation-tooltip-placeholder = IMU Rotation (Degree)
 firmware_tool-add_imus_step-scl_pin =
     .label = SCL Pin
     .placeholder = Pin address of SCL

gui/src/components/WidgetsComponent.tsx

@@ -14,6 +14,7 @@ import { ToggleableSkeletonVisualizerWidget } from './widgets/SkeletonVisualizer
 import { useAtomValue } from 'jotai';
 import { flatTrackersAtom } from '@/store/app-store';
 import { A } from './commons/A';
+import { DOCS_SITE } from '@/App';
 
 function UnprioritizedStatuses() {
   const { l10n } = useLocalization();
@@ -33,7 +34,10 @@ function UnprioritizedStatuses() {
           key={status.id}
           elems={{
             PublicFixLink: (
-              <A href="https://docs.slimevr.dev/common-issues.html#network-profile-is-currently-set-to-public"></A>
+              <A
+                href={`${DOCS_SITE}/common-issues.html#network-profile-is-currently-set-to-public`}
+                underline
+              ></A>
             ),
           }}
         >

gui/src/components/commons/A.tsx

@@ -1,14 +1,25 @@
 import { open } from '@tauri-apps/plugin-shell';
 import { ReactNode } from 'react';
+import classNames from 'classnames';
 
-export function A({ href, children }: { href?: string; children?: ReactNode }) {
+export function A({
+  href,
+  children,
+  className,
+  underline = false,
+}: {
+  href?: string;
+  children?: ReactNode;
+  className?: string;
+  underline?: boolean;
+}) {
   return (
     <a
       href="javascript:void(0)"
       onClick={() =>
         href && open(href).catch(() => window.open(href, '_blank'))
       }
-      className="underline"
+      className={classNames(className, { underline: underline })}
     >
       {children}
     </a>

gui/src/components/commons/Input.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { forwardRef, MouseEvent, useMemo, useState } from 'react';
+import { forwardRef, MouseEvent, useMemo, useState, ReactNode } from 'react';
 import {
   Control,
   Controller,
@@ -10,15 +10,15 @@ import { EyeIcon } from './icon/EyeIcon';
 
 interface InputProps {
   variant?: 'primary' | 'secondary' | 'tertiary';
-  label?: string;
+  label?: string | ReactNode;
   name: string;
 }
 
 export const InputInside = forwardRef<
   HTMLInputElement,
   {
     variant?: 'primary' | 'secondary' | 'tertiary';
-    label?: string;
+    label?: string | ReactNode;
     error?: FieldError;
     onChange: () => void;
   } & Partial<HTMLInputElement>

gui/src/components/firmware-tool/AddImusStep.tsx

@@ -20,6 +20,9 @@ import classNames from 'classnames';
 import { useElemSize } from '@/hooks/layout';
 import { useGetFirmwaresImus } from '@/firmware-tool-api/firmwareToolComponents';
 import { CheckBox } from '@/components/commons/Checkbox';
+import { Tooltip } from '@/components/commons/Tooltip';
+import { A } from '@/components/commons/A';
+import { DOCS_SITE } from '@/App';
 
 function IMUCard({
   control,
@@ -67,23 +70,48 @@ function IMUCard({
                 display="block"
               ></Dropdown>
             </label>
-            <Localized
-              id="firmware_tool-add_imus_step-imu_rotation"
-              attrs={{ label: true, placeholder: true }}
-            >
-              <Input
-                control={control}
-                rules={{
-                  required: true,
-                }}
-                type="number"
-                name={`imus[${index}].rotation`}
-                variant="primary"
-                label="Rotation Degree"
-                placeholder="Rotation Degree"
-                autocomplete="off"
-              ></Input>
-            </Localized>
+            <Input
+              control={control}
+              rules={{
+                required: true,
+              }}
+              type="number"
+              name={`imus[${index}].rotation`}
+              variant="primary"
+              label={
+                <div>
+                  <Tooltip
+                    preferedDirection="bottom"
+                    mode="corner"
+                    content={l10n.getString(
+                      'firmware_tool-add_imus_step-imu_rotation-tooltip'
+                    )}
+                  >
+                    <div className="flex cursor-help group">
+                      <A
+                        href={`${DOCS_SITE}/firmware/configuring-project.html#adjust-imu-board-rotation`}
+                        className="hover:underline"
+                      >
+                        {l10n.getString(
+                          'firmware_tool-add_imus_step-imu_rotation-tooltip-label'
+                        )}
+                      </A>
+                      <div className="group-hover:opacity-100 group-hover:underline opacity-65 ml-1 scale-[0.65] border-2 border-solid text-xs w-5 h-5 flex justify-center items-center rounded-full">
+                        <A
+                          href={`${DOCS_SITE}/firmware/configuring-project.html#adjust-imu-board-rotation`}
+                        >
+                          i
+                        </A>
+                      </div>
+                    </div>
+                  </Tooltip>
+                </div>
+              }
+              placeholder={l10n.getString(
+                'firmware_tool-add_imus_step-imu_rotation-tooltip-placeholder'
+              )}
+              autocomplete="off"
+            ></Input>
           </div>
           <div
             className="duration-500 transition-[height] overflow-hidden"

gui/src/components/firmware-update/FirmwareUpdate.tsx

@@ -96,7 +96,9 @@ const StatusList = ({ status }: { status: Record<string, UpdateStatus> }) => {
 };
 
 const MarkdownLink = (props: ComponentProps<'a'>) => (
-  <A href={props.href}>{props.children}</A>
+  <A href={props.href} underline>
+    {props.children}
+  </A>
 );
 
 export function FirmwareUpdate() {

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

@@ -27,6 +27,7 @@ import { BaseModal } from '@/components/commons/BaseModal';
 import { useStatusContext } from '@/hooks/status-system';
 import { A } from '@/components/commons/A';
 import { CONNECT_TRACKER } from '@/utils/tauri';
+import { DOCS_SITE } from '@/App';
 
 const statusLabelMap = {
   [WifiProvisioningStatus.NONE]:
@@ -250,7 +251,10 @@ export function ConnectTrackersPage() {
                 id={`status_system-${StatusData[status.dataType]}`}
                 elems={{
                   PublicFixLink: (
-                    <A href="https://docs.slimevr.dev/common-issues.html#network-profile-is-currently-set-to-public"></A>
+                    <A
+                      href={`${DOCS_SITE}/common-issues.html#network-profile-is-currently-set-to-public`}
+                      underline
+                    ></A>
                   ),
                 }}
               >

gui/src/components/onboarding/pages/body-proportions/autobone-steps/AutoboneErrorModal.tsx

@@ -40,9 +40,10 @@ export function AutoboneErrorModal({
               docs: (
                 <A
                   href={`${DOCS_SITE}/server/body-config.html#common-issues--debugging`}
+                  underline
                 ></A>
               ),
-              discord: <A href={SLIMEVR_DISCORD}></A>,
+              discord: <A href={SLIMEVR_DISCORD} underline></A>,
             }}
           >
             <WarningBox>

gui/src/components/vrc/VRCWarningsPage.tsx

@@ -14,6 +14,7 @@ import classNames from 'classnames';
 import { useLocaleConfig } from '@/i18n/config';
 import { A } from '@/components/commons/A';
 import { Button } from '@/components/commons/Button';
+import { DOCS_SITE } from '@/App';
 
 function SettingRow({
   name,
@@ -301,7 +302,7 @@ export function VRCWarningsPage() {
         <Localized
           id={'vrc_config-page-help-desc'}
           elems={{
-            a: <A href="https://docs.slimevr.dev/tools/vrchat-config.html"></A>,
+            a: <A href={`${DOCS_SITE}/tools/vrchat-config.html`} underline></A>,
           }}
         >
           <Typography />