Toe tracking server rewrite

gui/app/public/i18n/en/translation.ftl

@@ -437,6 +437,17 @@ tracker_selection_menu-LEFT_HAND = { -tracker_selection-part } left hand?
 tracker_selection_menu-LEFT_UPPER_LEG = { -tracker_selection-part } left thigh?
 tracker_selection_menu-LEFT_LOWER_LEG = { -tracker_selection-part } left ankle?
 tracker_selection_menu-LEFT_FOOT = { -tracker_selection-part } left foot?
+tracker_selection_menu-LEFT_BIG_TOE = { -tracker_selection-part } left big toe?
+tracker_selection_menu-LEFT_INDEX_TOE = { -tracker_selection-part } left index toe?
+tracker_selection_menu-LEFT_MIDDLE_TOE = { -tracker_selection-part } left middle toe?
+tracker_selection_menu-LEFT_RING_TOE = { -tracker_selection-part } left ring toe?
+tracker_selection_menu-LEFT_LITTLE_TOE = { -tracker_selection-part } left little toe?
+tracker_selection_menu-RIGHT_BIG_TOE = { -tracker_selection-part } right big toe?
+tracker_selection_menu-RIGHT_INDEX_TOE = { -tracker_selection-part } right index toe?
+tracker_selection_menu-RIGHT_MIDDLE_TOE = { -tracker_selection-part } right middle toe?
+tracker_selection_menu-RIGHT_RING_TOE = { -tracker_selection-part } right ring toe?
+tracker_selection_menu-RIGHT_LITTLE_TOE = { -tracker_selection-part } right little toe?
+
 
 tracker_selection_menu-unassigned = Unassigned Trackers
 tracker_selection_menu-assigned = Assigned Trackers
@@ -1193,6 +1204,42 @@ onboarding-assign_trackers-warning-WAIST = Waist is assigned but you need { $una
     *[unknown] Unknown unassigned body part
 } to also be assigned!
 
+onboarding-assign_trackers-warning-LEFT_BIG_TOE = Left Big Toe is assigned but you need { $unassigned ->
+    [0] the left foot
+    *[unknown] Unknown unassigned body part
+} to also be assigned!
+onboarding-assign_trackers-warning-LEFT_INDEX_TOE = Left Index Toe is assigned but you need { $unassigned ->
+    [0] the left foot
+    *[unknown] Unknown unassigned body part
+} to also be assigned!
+onboarding-assign_trackers-warning-LEFT_MIDDLE_TOE = Left Middle Toe is assigned but you need { $unassigned ->
+    [0] the left foot
+    *[unknown] Unknown unassigned body part} to also be assigned!
+onboarding-assign_trackers-warning-LEFT_RING_TOE = Left Ring Toe is assigned but you need { $unassigned ->
+    [0] the left foot
+    *[unknown] Unknown unassigned body part} to also be assigned!
+onboarding-assign_trackers-warning-LEFT_LITTLE_TOE = Left Little Toe is assigned but you need { $unassigned ->
+    [0] the left foot
+    *[unknown] Unknown unassigned body part} to also be assigned!
+onboarding-assign_trackers-warning-RIGHT_BIG_TOE = Left Big Toe is assigned but you need { $unassigned ->
+    [0] the right foot
+    *[unknown] Unknown unassigned body part
+} to also be assigned!
+onboarding-assign_trackers-warning-RIGHT_INDEX_TOE = Right Index Toe is assigned but you need { $unassigned ->
+    [0] the right foot
+    *[unknown] Unknown unassigned body part
+} to also be assigned!
+onboarding-assign_trackers-warning-RIGHT_MIDDLE_TOE = Right Middle Toe is assigned but you need { $unassigned ->
+    [0] the right foot
+    *[unknown] Unknown unassigned body part} to also be assigned!
+onboarding-assign_trackers-warning-RIGHT_RING_TOE = Right Ring Toe is assigned but you need { $unassigned ->
+    [0] the right foot
+    *[unknown] Unknown unassigned body part} to also be assigned!
+onboarding-assign_trackers-warning-RIGHT_LITTLE_TOE = Right Little Toe is assigned but you need { $unassigned ->
+    [0] the right foot
+    *[unknown] Unknown unassigned body part} to also be assigned!
+
+
 ## Tracker mounting method choose
 onboarding-choose_mounting = What mounting calibration method to use?
 # Multiline text
@@ -1704,3 +1751,15 @@ toolbar-mounting_calibration-fingers = Fingers
 toolbar-drift_reset = Drift Reset
 toolbar-assigned_trackers = {$count} trackers assigned
 toolbar-unassigned_trackers = {$count} trackers unassigned
+body_part-LEFT_BIG_TOE = Left Big Toe
+body_part-LEFT_INDEX_TOE = Left Index Toe
+body_part-LEFT_MIDDLE_TOE = Left Middle Toe
+body_part-LEFT_RING_TOE = Left Ring Toe
+body_part-LEFT_LITTLE_TOE = Left Little Toe
+
+body_part-RIGHT_TOES = Right Toes
+body_part-RIGHT_BIG_TOE = Right Big Toe
+body_part-RIGHT_INDEX_TOE = Right Index Toe
+body_part-RIGHT_MIDDLE_TOE = Right Middle Toe
+body_part-RIGHT_RING_TOE = Right Ring Toe
+body_part-RIGHT_LITTLE_TOE = Right Little Toe

gui/app/src/components/Toolbar.tsx

@@ -147,7 +147,7 @@ export function Toolbar() {
 
   const { visibleGroups, groupVisibility } = useMemo(() => {
     const groupVisibility = Object.keys(BODY_PARTS_GROUPS)
-      .filter((k) => ['fingers'].includes(k))
+      .filter((k) => ['fingers', 'toes'].includes(k))
       .reduce(
         (curr, key) => {
           const group = key as MountingResetGroup;
@@ -200,6 +200,13 @@ export function Toolbar() {
                 group={'feet'}
                 customName="toolbar-mounting_calibration-feet"
               />
+              {groupVisibility['toes'] && (
+                <BasicResetButton
+                  type={ResetType.MOUNTING}
+                  group={'toes'}
+                  customName="toolbar-mounting_calibration-toes"
+                />
+              )}
               {groupVisibility['fingers'] && (
                 <BasicResetButton
                   type={ResetType.MOUNTING}

gui/app/src/components/commons/BodyInteractions.tsx

@@ -13,6 +13,7 @@ export function BodyInteractions({
   variant = 'tracker-select',
   mirror,
   onSelectRole,
+  onToesSelected,
 }: {
   leftControls?: ReactNode;
   rightControls?: ReactNode;
@@ -21,6 +22,7 @@ export function BodyInteractions({
   variant?: 'dots' | 'tracker-select';
   assignedRoles: BodyPart[];
   onSelectRole: (role: BodyPart) => void;
+  onToesSelected?: (side: 'left' | 'right') => void;
   highlightedRoles: BodyPart[];
   mirror: boolean;
 }) {
@@ -114,7 +116,10 @@ export function BodyInteractions({
         ...slotPosition,
         id: slot.id,
         hidden:
-          variant === 'tracker-select' && !controlsPosIds.includes(slot.id),
+          variant === 'tracker-select' &&
+          !controlsPosIds.includes(slot.id) &&
+          slot.id !== 'left-toes' &&
+          slot.id !== 'right-toes',
         buttonOffset: {
           left: canvasBox.left - personBox.left,
           top: canvasBox.top - personBox.top,
@@ -211,8 +216,14 @@ export function BodyInteractions({
             ({ top, left, height, width, id, hidden, buttonOffset }) => (
               <div
                 key={id}
-                className={classNames('absolute z-10')}
-                onClick={() => onSelectRole((BodyPart as any)[id])}
+                className={classNames('absolute z-10', 'cursor-pointer')}
+                onClick={() => {
+                  if (id === 'left-toes' || id === 'right-toes') {
+                    onToesSelected?.(id === 'left-toes' ? 'left' : 'right');
+                    return;
+                  }
+                  onSelectRole((BodyPart as any)[id]);
+                }}
                 style={{
                   top: top + height / 2 - dotsSize / 2 + buttonOffset.top,
                   left: left + width / 2 - dotsSize / 2 + buttonOffset.left,

gui/app/src/components/commons/BodyPartIcon.tsx

@@ -125,8 +125,38 @@ export const mapPart: Record<
     <FingersIcon width={width} />
   ),
   [BodyPart.RIGHT_LITTLE_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.LEFT_BIG_TOE]: renderFootLeft,
+  [BodyPart.LEFT_INDEX_TOE]: renderFootLeft,
+  [BodyPart.LEFT_LITTLE_TOE]: renderFootLeft,
+  [BodyPart.RIGHT_BIG_TOE]: renderFootRight,
+  [BodyPart.RIGHT_INDEX_TOE]: renderFootRight,
+  [BodyPart.RIGHT_LITTLE_TOE]: renderFootRight,
 };
+function renderFootLeft({
+  width,
+  currentLocales,
+}: {
+  width?: number;
+  currentLocales: string[];
+}) {
+  if (currentLocales.includes('en-x-owo')) {
+    return <PawIcon />;
+  }
+  return <FootIcon width={width} />;
+}
 
+function renderFootRight({
+  width,
+  currentLocales,
+}: {
+  width?: number;
+  currentLocales: string[];
+}) {
+  if (currentLocales.includes('en-x-owo')) {
+    return <PawIcon />;
+  }
+  return <FootIcon width={width} flipped />;
+}
 export function BodyPartIcon({
   bodyPart = BodyPart.NONE,
   width = 24,
@@ -138,7 +168,7 @@ export function BodyPartIcon({
   return (
     <svg width={width} height={width}>
       <rect width={width} height={width} rx="2" fill="#56407B" />
-      {mapPart[bodyPart]({ width, currentLocales })}
+      {mapPart[bodyPart]?.({ width, currentLocales })}
     </svg>
   );
 }

gui/app/src/components/commons/PersonFrontIcon.tsx

@@ -9,6 +9,9 @@ export const SIDES = [
     upperLeg: BodyPart.LEFT_UPPER_LEG,
     lowerLeg: BodyPart.LEFT_LOWER_LEG,
     foot: BodyPart.LEFT_FOOT,
+    bigToe: BodyPart.LEFT_BIG_TOE,
+    indexToe: BodyPart.LEFT_INDEX_TOE,
+    littleToe: BodyPart.LEFT_LITTLE_TOE,
   },
   {
     shoulder: BodyPart.RIGHT_SHOULDER,
@@ -18,6 +21,9 @@ export const SIDES = [
     upperLeg: BodyPart.RIGHT_UPPER_LEG,
     lowerLeg: BodyPart.RIGHT_LOWER_LEG,
     foot: BodyPart.RIGHT_FOOT,
+    bigToe: BodyPart.RIGHT_BIG_TOE,
+    indexToe: BodyPart.RIGHT_INDEX_TOE,
+    littleToe: BodyPart.RIGHT_LITTLE_TOE,
   },
 ];
 
@@ -121,6 +127,14 @@ export function PersonFrontIcon({ mirror = true }: { mirror?: boolean }) {
         id={BodyPart[SIDES[right].foot]}
       />
 
+      <circle
+        className="body-part-circle"
+        cx="102"
+        cy="393"
+        r={CIRCLE_RADIUS}
+        id="right-toes"
+      />
+
       <circle
         className="body-part-circle"
         cx="15"
@@ -172,6 +186,13 @@ export function PersonFrontIcon({ mirror = true }: { mirror?: boolean }) {
         r={CIRCLE_RADIUS}
         id={BodyPart[SIDES[left].foot]}
       />
+      <circle
+        className="body-part-circle"
+        cx="62"
+        cy="393"
+        r={CIRCLE_RADIUS}
+        id="left-toes"
+      />
     </svg>
   );
 }

gui/app/src/components/home/ResetButton.tsx

@@ -23,6 +23,7 @@ export function ResetButtonIcon(options: UseResetOptions) {
   if (options.type === ResetType.MOUNTING) {
     if (options.group === 'default') return <SkiIcon />;
     if (options.group === 'feet') return <FootIcon />;
+    if (options.group === 'toes') return <FootIcon />;
     if (options.group === 'fingers') return <FingersIcon width={16} />;
   }
 }

gui/app/src/components/onboarding/BodyAssignment.tsx

@@ -26,6 +26,16 @@ export const LOWER_BODY = new Set([
   BodyPart.RIGHT_FOOT,
   ...LEGS_PARTS,
 ]);
+
+export const TOES_PARTS = new Set([
+  BodyPart.LEFT_BIG_TOE,
+  BodyPart.RIGHT_BIG_TOE,
+  BodyPart.LEFT_INDEX_TOE,
+  BodyPart.RIGHT_INDEX_TOE,
+  BodyPart.LEFT_LITTLE_TOE,
+  BodyPart.RIGHT_LITTLE_TOE,
+]);
+
 export const SPINE_PARTS = [
   BodyPart.UPPER_CHEST,
   BodyPart.CHEST,
@@ -35,6 +45,12 @@ export const SPINE_PARTS = [
 export const ASSIGNMENT_RULES: Partial<
   Record<BodyPart, (BodyPart | BodyPart[])[]>
 > = {
+  [BodyPart.LEFT_BIG_TOE]: [BodyPart.LEFT_FOOT],
+  [BodyPart.LEFT_INDEX_TOE]: [BodyPart.LEFT_FOOT],
+  [BodyPart.LEFT_LITTLE_TOE]: [BodyPart.LEFT_FOOT],
+  [BodyPart.RIGHT_BIG_TOE]: [BodyPart.RIGHT_FOOT],
+  [BodyPart.RIGHT_INDEX_TOE]: [BodyPart.RIGHT_FOOT],
+  [BodyPart.RIGHT_LITTLE_TOE]: [BodyPart.RIGHT_FOOT],
   [BodyPart.LEFT_FOOT]: [
     BodyPart.LEFT_LOWER_LEG,
     BodyPart.LEFT_UPPER_LEG,
@@ -93,13 +109,15 @@ export const ASSIGNMENT_MODES: Record<AssignMode, BodyPart[]> = {
     ...SPINE_PARTS,
     ...ARMS_PARTS,
     ...LEGS_PARTS,
+    ...TOES_PARTS,
   ],
 };
 
 export function BodyAssignment({
   assignMode,
   mirror,
   onRoleSelected,
+  onToesSelected,
   rolesWithErrors = {},
   highlightedRoles = [],
   onlyAssigned = false,
@@ -111,6 +129,7 @@ export function BodyAssignment({
   rolesWithErrors?: Partial<Record<BodyPart, BodyPartError>>;
   highlightedRoles?: BodyPart[];
   onRoleSelected: (role: BodyPart) => void;
+  onToesSelected?: (side: 'left' | 'right') => void;
   width?: number;
   dotSize?: number;
 }) {
@@ -159,6 +178,7 @@ export function BodyAssignment({
       assignedRoles={assignedRoles}
       highlightedRoles={highlightedRoles}
       onSelectRole={onRoleSelected}
+      onToesSelected={onToesSelected}
       leftControls={
         <div className="flex flex-col justify-between h-full text-right">
           <div className="flex flex-col gap-2">

gui/app/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx

@@ -148,6 +148,60 @@ export const mapPart: Record<
     <FingersIcon width={width} />
   ),
   [BodyPart.RIGHT_LITTLE_DISTAL]: ({ width }) => <FingersIcon width={width} />,
+  [BodyPart.LEFT_BIG_TOE]: ({ width, currentLocales }) =>
+    currentLocales.includes('en-x-owo') ? (
+      <PawIcon
+        width={width ? width * 0.75 : undefined}
+        transform="translate(40, -50)"
+      />
+    ) : (
+      <FootIcon width={width} />
+    ),
+  [BodyPart.LEFT_INDEX_TOE]: ({ width, currentLocales }) =>
+    currentLocales.includes('en-x-owo') ? (
+      <PawIcon
+        width={width ? width * 0.75 : undefined}
+        transform="translate(40, -50)"
+      />
+    ) : (
+      <FootIcon width={width} />
+    ),
+  [BodyPart.LEFT_LITTLE_TOE]: ({ width, currentLocales }) =>
+    currentLocales.includes('en-x-owo') ? (
+      <PawIcon
+        width={width ? width * 0.75 : undefined}
+        transform="translate(40, -50)"
+      />
+    ) : (
+      <FootIcon width={width} />
+    ),
+  [BodyPart.RIGHT_BIG_TOE]: ({ width, currentLocales }) =>
+    currentLocales.includes('en-x-owo') ? (
+      <PawIcon
+        width={width ? width * 0.75 : undefined}
+        transform="translate(40, -50)"
+      />
+    ) : (
+      <FootIcon width={width} flipped />
+    ),
+  [BodyPart.RIGHT_INDEX_TOE]: ({ width, currentLocales }) =>
+    currentLocales.includes('en-x-owo') ? (
+      <PawIcon
+        width={width ? width * 0.75 : undefined}
+        transform="translate(40, -50)"
+      />
+    ) : (
+      <FootIcon width={width} flipped />
+    ),
+  [BodyPart.RIGHT_LITTLE_TOE]: ({ width, currentLocales }) =>
+    currentLocales.includes('en-x-owo') ? (
+      <PawIcon
+        width={width ? width * 0.75 : undefined}
+        transform="translate(40, -50)"
+      />
+    ) : (
+      <FootIcon width={width} flipped />
+    ),
 };
 
 export function MountingBodyPartIcon({
@@ -158,7 +212,9 @@ export function MountingBodyPartIcon({
   width?: number;
 }) {
   const { currentLocales } = useLocaleConfig();
-  return mapPart[bodyPart]({ width, currentLocales });
+  return (
+    mapPart[bodyPart]?.({ width, currentLocales }) || <FootIcon width={width} />
+  );
 }
 
 function PieSliceOfFeet({