@viamrobotics/motion-tools 1.9.0 → 1.10.0

package/dist/components/overlay/settings/Settings.svelte

@@ -0,0 +1,279 @@
+<script lang="ts">
+	import { Switch, Input } from '@viamrobotics/prime-core'
+	import { Portal } from '@threlte/extras'
+	import RefreshRate from '../RefreshRate.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { RefreshRates, useMachineSettings } from '../../../hooks/useMachineSettings.svelte'
+	import { useGeometries } from '../../../hooks/useGeometries.svelte'
+	import { usePointClouds } from '../../../hooks/usePointclouds.svelte'
+	import { useThrelte } from '@threlte/core'
+	import { useRefetchPoses } from '../../../hooks/useRefetchPoses'
+	import FloatingPanel from '../FloatingPanel.svelte'
+	import DashboardButton from '../dashboard/Button.svelte'
+	import Tabs from './Tabs.svelte'
+	import { PersistedState } from 'runed'
+	import ToggleGroup from '../ToggleGroup.svelte'
+
+	const { invalidate } = useThrelte()
+	const partID = usePartID()
+	const cameras = useResourceNames(() => partID.current, 'camera')
+	const visionServices = useResourceNames(() => partID.current, 'vision')
+	const settings = useSettings()
+	const { disabledCameras, disabledVisionServices } = useMachineSettings()
+	const geometries = useGeometries()
+	const pointclouds = usePointClouds()
+	const { refetchPoses } = useRefetchPoses()
+
+	// Invalidate the renderer for any settings change
+	$effect(() => {
+		for (const key in settings.current) {
+			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+			settings.current[key as keyof typeof settings.current]
+		}
+
+		invalidate()
+	})
+
+	const isOpen = new PersistedState('settings-is-open', false)
+	const activeTab = new PersistedState('settings-active-tab', 'Connection')
+</script>
+
+<Portal id="dashboard">
+	<fieldset>
+		<DashboardButton
+			active
+			icon="cog"
+			description="Settings"
+			onclick={() => {
+				isOpen.current = !isOpen.current
+			}}
+		/>
+	</fieldset>
+</Portal>
+
+{#snippet SectionTitle(title: string)}
+	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>{title}</strong></h3>
+{/snippet}
+
+{#snippet Connection()}
+	<div class="flex flex-col gap-2.5 text-xs">
+		{@render SectionTitle('Polling rates')}
+
+		<RefreshRate
+			id={RefreshRates.poses}
+			label="Poses"
+			allowLive
+			onManualRefetch={() => {
+				refetchPoses()
+				geometries.refetch()
+			}}
+		/>
+		<RefreshRate
+			id={RefreshRates.pointclouds}
+			label="Pointclouds"
+			onManualRefetch={() => {
+				pointclouds.refetch()
+			}}
+		/>
+	</div>
+{/snippet}
+
+{#snippet Pointclouds()}
+	<div class="flex flex-col gap-1 text-xs">
+		<label class="flex items-center justify-between gap-2">
+			Default point size
+
+			<div class="w-20">
+				<Input
+					bind:value={settings.current.pointSize}
+					on:keydown={(event) => event.stopImmediatePropagation()}
+				/>
+			</div>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Default point color
+
+			<div class="w-20">
+				<Input
+					type="color"
+					bind:value={settings.current.pointColor}
+					on:keydown={(event) => event.stopImmediatePropagation()}
+				/>
+			</div>
+		</label>
+
+		{@render SectionTitle('Enabled cameras')}
+
+		{#each cameras.current as camera (camera)}
+			<div class="flex items-center justify-between py-0.5 text-xs">
+				{camera.name}
+				<Switch
+					on={disabledCameras.get(camera.name) !== true}
+					on:change={(event) => {
+						disabledCameras.set(camera.name, !event.detail)
+					}}
+				/>
+			</div>
+		{:else}
+			No cameras detected
+		{/each}
+	</div>
+{/snippet}
+
+{#snippet Vision()}
+	<div class="text-gray-9 flex flex-col gap-1 text-xs">
+		{@render SectionTitle('Enabled vision services')}
+
+		{#each visionServices.current as visionService (visionService)}
+			<div class="flex items-center justify-between py-0.5">
+				{visionService.name}
+				<Switch
+					on={disabledVisionServices.get(visionService.name) !== true}
+					on:change={(event) => {
+						disabledVisionServices.set(visionService.name, !event.detail)
+					}}
+				/>
+			</div>
+		{:else}
+			No vision services detected
+		{/each}
+	</div>
+{/snippet}
+
+{#snippet Scene()}
+	<div class="text-gray-9 flex flex-col gap-1 text-xs">
+		<label class="flex items-center justify-between gap-2 py-1">
+			Arm Models
+
+			<ToggleGroup
+				multiple
+				options={[
+					{
+						label: 'Colliders',
+						value: 'colliders',
+						selected: settings.current.renderArmModels.includes('colliders'),
+					},
+					{
+						label: 'Model',
+						value: 'model',
+						selected: settings.current.renderArmModels.includes('model'),
+					},
+				]}
+				onSelect={(value) => {
+					settings.current.renderArmModels = (value.join('+') || 'colliders') as
+						| 'colliders'
+						| 'model'
+						| 'colliders+model'
+
+					console.log(settings.current.renderArmModels)
+				}}
+			/>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Single item hover details <Switch bind:on={settings.current.renderSubEntityHoverDetail} />
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Object labels <Switch bind:on={settings.current.enableLabels} />
+		</label>
+
+		{@render SectionTitle('Grid')}
+
+		<label class="flex items-center justify-between gap-2 py-1">
+			Visible <Switch bind:on={settings.current.grid} />
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Cell size (m)
+
+			<div class="w-20">
+				<Input
+					bind:value={settings.current.gridCellSize}
+					on:keydown={(event) => event.stopImmediatePropagation()}
+				/>
+			</div>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Section size (m)
+
+			<div class="w-20">
+				<Input
+					bind:value={settings.current.gridSectionSize}
+					on:keydown={(event) => event.stopImmediatePropagation()}
+				/>
+			</div>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Fade distance (m)
+
+			<div class="w-20">
+				<Input
+					bind:value={settings.current.gridFadeDistance}
+					on:keydown={(event) => event.stopImmediatePropagation()}
+				/>
+			</div>
+		</label>
+
+		{@render SectionTitle('Lines')}
+
+		<label class="flex items-center justify-between gap-2">
+			Thickness
+
+			<div class="w-20">
+				<Input
+					bind:value={settings.current.lineWidth}
+					on:keydown={(event) => event.stopImmediatePropagation()}
+				/>
+			</div>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Dot size
+
+			<div class="w-20">
+				<Input
+					bind:value={settings.current.lineDotSize}
+					on:keydown={(event) => event.stopImmediatePropagation()}
+				/>
+			</div>
+		</label>
+	</div>
+{/snippet}
+
+{#snippet Stats()}
+	<div class="flex w-full flex-col gap-2.5 text-xs">
+		<label class="flex items-center justify-between gap-2">
+			Query devtools <Switch bind:on={settings.current.enableQueryDevtools} />
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Render stats <Switch bind:on={settings.current.renderStats} />
+		</label>
+	</div>
+{/snippet}
+
+<FloatingPanel
+	title="Settings"
+	bind:isOpen={isOpen.current}
+	defaultSize={{ width: 460, height: 500 }}
+>
+	<Tabs
+		defaultTab={activeTab.current}
+		items={[
+			{ label: 'Connection', content: Connection },
+			{ label: 'Scene', content: Scene },
+			{ label: 'Pointclouds', content: Pointclouds },
+			{ label: 'Vision', content: Vision },
+			{ label: 'Stats', content: Stats },
+		]}
+		onValueChange={(value) => {
+			activeTab.current = value
+		}}
+	/>
+</FloatingPanel>

package/dist/components/overlay/settings/Tabs.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import * as tabs from '@zag-js/tabs'
+	import { useMachine, normalizeProps } from '@zag-js/svelte'
+
+	interface Props {
+		defaultTab?: string
+		onValueChange: (value: string) => void
+		items: {
+			label: string
+			content: Snippet
+		}[]
+	}
+
+	let { defaultTab, items, onValueChange }: Props = $props()
+
+	const id = $props.id()
+	const service = useMachine(tabs.machine, () => ({
+		id,
+		defaultValue: defaultTab,
+		onValueChange: (details) => onValueChange(details.value),
+	}))
+
+	const api = $derived(tabs.connect(service, normalizeProps))
+</script>
+
+<div
+	{...api.getRootProps()}
+	class="flex h-full gap-2 overflow-hidden"
+>
+	<div
+		{...api.getListProps()}
+		class="bg-gray-1 flex h-full flex-col items-start p-2 text-sm"
+	>
+		{#each items as item (item.label)}
+			<button
+				{...api.getTriggerProps({ value: item.label })}
+				class="text-gray-8 w-full py-1 pr-8 pl-3 text-left"
+				class:bg-gray-2={api.focusedValue === item.label}
+			>
+				{item.label}
+			</button>
+		{/each}
+	</div>
+
+	{#each items as item (item.label)}
+		<div
+			{...api.getContentProps({ value: item.label })}
+			class="h-full w-full overflow-y-auto p-4"
+		>
+			{@render item.content()}
+		</div>
+	{/each}
+</div>

package/dist/components/overlay/settings/Tabs.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    defaultTab?: string;
+    onValueChange: (value: string) => void;
+    items: {
+        label: string;
+        content: Snippet;
+    }[];
+}
+declare const Tabs: import("svelte").Component<Props, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/{widgets → overlay/widgets}/ArmPositions.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { draggable } from '@neodrag/svelte'
-	import { formatNumeric } from '../../format'
-	import Table from '../shared/Table.svelte'
-	import { useArmClient } from '../../hooks/useArmClient.svelte'
+	import { formatNumeric } from '../../../format'
+	import Table from '../Table.svelte'
+	import { useArmClient } from '../../../hooks/useArmClient.svelte'
 	import { Icon, Label, Select } from '@viamrobotics/prime-core'
 
 	const { ...rest } = $props()
@@ -17,7 +17,7 @@
 </script>
 
 <div
-	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 overflow-y-auto border text-xs"
+	class="bg-extralight border-medium absolute top-0 left-0 z-4 m-2 overflow-y-auto border text-xs"
 	use:draggable={{
 		bounds: 'body',
 		handle: dragElement,

package/dist/components/{widgets → overlay/widgets}/Camera.svelte

@@ -3,9 +3,9 @@
 	import { Icon, Select } from '@viamrobotics/prime-core'
 	import { CameraStream, useRobotClient } from '@viamrobotics/svelte-sdk'
 	import { StreamClient } from '@viamrobotics/sdk'
-	import { useSettings } from '../../hooks/useSettings.svelte'
-	import { usePartID } from '../../hooks/usePartID.svelte'
-	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { useEnvironment } from '../../../hooks/useEnvironment.svelte'
 
 	interface Resolution {
 		width: number
@@ -107,7 +107,7 @@
 </script>
 
 <div
-	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 flex resize-x flex-col overflow-hidden border text-xs"
+	class="bg-extralight border-medium absolute top-0 left-0 z-4 m-2 flex resize-x flex-col overflow-hidden border text-xs"
 	style:width="320px"
 	style:height="auto !important"
 	use:draggable={{
@@ -176,7 +176,7 @@
 			<!-- FPS Pill -->
 			{#if fps > 0}
 				<div
-					class="absolute bottom-2 left-2 z-10 rounded-[3px] bg-black/30 px-1 py-0.5 text-right font-mono text-xs text-white"
+					class="absolute bottom-2 left-2 z-4 rounded-[3px] bg-black/30 px-1 py-0.5 text-right font-mono text-xs text-white"
 				>
 					{fps.toFixed(1)}fps
 				</div>

package/dist/ecs/index.d.ts

@@ -2,3 +2,4 @@ export { provideWorld, useWorld } from './useWorld';
 export { useQuery } from './useQuery.svelte';
 export { useTrait } from './useTrait.svelte';
 export * as traits from './traits';
+export * as relations from './relations';

package/dist/ecs/index.js

@@ -2,3 +2,4 @@ export { provideWorld, useWorld } from './useWorld';
 export { useQuery } from './useQuery.svelte';
 export { useTrait } from './useTrait.svelte';
 export * as traits from './traits';
+export * as relations from './relations';

package/dist/ecs/relations.d.ts

@@ -0,0 +1,7 @@
+export declare const SubEntityLinkType: {
+    readonly HoverLink: "HoverLink";
+};
+export declare const SubEntityLink: import("koota").Relation<import("koota").Trait<{
+    indexMapping: () => string;
+    type: string;
+}>>;

package/dist/ecs/relations.js

@@ -0,0 +1,7 @@
+import { relation } from 'koota';
+export const SubEntityLinkType = {
+    HoverLink: 'HoverLink',
+};
+export const SubEntityLink = relation({
+    store: { indexMapping: () => 'index', type: '' },
+});

package/dist/ecs/traits.d.ts

@@ -30,12 +30,17 @@ export declare const Center: import("koota").Trait<{
     oZ: number;
     theta: number;
 }>;
-export declare const Hover: import("koota").Trait<{
-    index: number;
+export declare const InstancedPose: import("koota").Trait<{
     x: number;
     y: number;
     z: number;
+    oX: number;
+    oY: number;
+    oZ: number;
+    theta: number;
+    index: number;
 }>;
+export declare const Hovered: import("koota").Trait<() => boolean>;
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances
@@ -123,6 +128,7 @@ export declare const SnapshotAPI: import("koota").Trait<() => boolean>;
  * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
  */
 export declare const DroppedFile: import("koota").Trait<() => boolean>;
+export declare const ShowAxesHelper: import("koota").Trait<() => boolean>;
 /**
  * Point size, in mm
  */

package/dist/ecs/traits.js

@@ -8,12 +8,17 @@ export const Parent = trait(() => 'world');
 export const Pose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const EditedPose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const Center = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
-export const Hover = trait({
-    index: -1, // Sub-entity index, -1 if not applicable
-    x: 0, // World position X in meters
-    y: 0, // World position Y in meters
-    z: 0, // World position Z in meters
+export const InstancedPose = trait({
+    x: 0,
+    y: 0,
+    z: 0,
+    oX: 0,
+    oY: 0,
+    oZ: 1,
+    theta: 0,
+    index: -1,
 });
+export const Hovered = trait(() => true);
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances
@@ -74,6 +79,7 @@ export const SnapshotAPI = trait(() => true);
  * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
  */
 export const DroppedFile = trait(() => true);
+export const ShowAxesHelper = trait(() => true);
 // === Shape Properties ===
 /**
  * Point size, in mm

package/dist/hooks/useDrawAPI.svelte.js

@@ -149,7 +149,7 @@ export const provideDrawAPI = () => {
             if (frame.geometry) {
                 entityTraits.push(geometryTrait());
             }
-            entityTraits.push(traits.Name(name), traits.Pose(pose), traits.DrawAPI, traits.ReferenceFrame, traits.Removable);
+            entityTraits.push(traits.Name(name), traits.Pose(pose), traits.DrawAPI, traits.ReferenceFrame, traits.Removable, traits.ShowAxesHelper);
             const entity = world.spawn(...entityTraits);
             entities.set(name, entity);
         }

package/dist/hooks/useFrames.svelte.js

@@ -199,6 +199,7 @@ export const provideFrames = (partID) => {
                 traits.Pose(pose),
                 traits.EditedPose(pose),
                 traits.FramesAPI,
+                traits.ShowAxesHelper,
             ];
             if (parent && parent !== 'world') {
                 entityTraits.push(traits.Parent(parent));

package/dist/hooks/useGeometries.svelte.js

@@ -9,7 +9,7 @@ import { useResourceByName } from './useResourceByName.svelte';
 import { traits, useWorld } from '../ecs';
 import {} from 'koota';
 import { createPose } from '../transform';
-import { RefetchRates } from '../components/RefreshRate.svelte';
+import { RefetchRates } from '../components/overlay/RefreshRate.svelte';
 import { useEnvironment } from './useEnvironment.svelte';
 const key = Symbol('geometries-context');
 const colorUtil = new Color();

package/dist/hooks/useLinked.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Entity } from 'koota';
+interface LinkedEntitiesContext {
+    readonly current: Entity[];
+}
+export declare const provideLinkedEntities: () => void;
+export declare const useLinkedEntities: () => LinkedEntitiesContext;
+export {};

package/dist/hooks/useLinked.svelte.js

@@ -0,0 +1,35 @@
+import { getContext, setContext } from 'svelte';
+import { relations, useWorld } from '../ecs';
+import { useFocusedEntity, useSelectedEntity } from './useSelection.svelte';
+const linkedKey = Symbol('linked-context');
+export const provideLinkedEntities = () => {
+    const world = useWorld();
+    const selectedEntity = useSelectedEntity();
+    const focusedEntity = useFocusedEntity();
+    const displayEntity = $derived(selectedEntity.current ?? focusedEntity.current);
+    let linkedEntities = $derived(displayEntity?.targetsFor(relations.SubEntityLink) ?? []);
+    const unsubAdd = world.onAdd(relations.SubEntityLink, (entity, target) => {
+        if (entity === displayEntity) {
+            linkedEntities = [...linkedEntities, target];
+        }
+    });
+    const unsubRemove = world.onRemove(relations.SubEntityLink, (entity, target) => {
+        if (entity === displayEntity) {
+            linkedEntities = linkedEntities.filter((e) => e !== target);
+        }
+    });
+    $effect(() => {
+        return () => {
+            unsubAdd();
+            unsubRemove();
+        };
+    });
+    setContext(linkedKey, {
+        get current() {
+            return linkedEntities;
+        },
+    });
+};
+export const useLinkedEntities = () => {
+    return getContext(linkedKey);
+};

package/dist/hooks/useObjectEvents.svelte.js

@@ -3,6 +3,7 @@ import { useFocusedEntity, useSelectedEntity } from './useSelection.svelte';
 import { useVisibility } from './useVisibility.svelte';
 import { Vector2 } from 'three';
 import { traits } from '../ecs';
+import { updateHoverInfo } from '../HoverUpdater.svelte';
 export const useObjectEvents = (entity) => {
     const down = new Vector2();
     const selectedEntity = useSelectedEntity();
@@ -14,31 +15,49 @@ export const useObjectEvents = (entity) => {
     const onpointerenter = (event) => {
         event.stopPropagation();
         cursor.onPointerEnter();
-        if (currentEntity && !currentEntity.has(traits.Hover)) {
-            currentEntity.add(traits.Hover({
-                index: -1,
-                x: event.point.x,
-                y: event.point.y,
-                z: event.point.z,
-            }));
+        if (currentEntity && !currentEntity.has(traits.Hovered)) {
+            const hoverInfo = updateHoverInfo(currentEntity, event);
+            if (hoverInfo) {
+                currentEntity.add(traits.InstancedPose({
+                    index: hoverInfo.index,
+                    x: hoverInfo.x,
+                    y: hoverInfo.y,
+                    z: hoverInfo.z,
+                    oX: hoverInfo.oX,
+                    oY: hoverInfo.oY,
+                    oZ: hoverInfo.oZ,
+                    theta: hoverInfo.theta,
+                }));
+            }
+            currentEntity.add(traits.Hovered);
         }
     };
     const onpointermove = (event) => {
         event.stopPropagation();
-        if (currentEntity && currentEntity.has(traits.Hover)) {
-            currentEntity.set(traits.Hover, {
-                index: event.index ?? -1,
-                x: event.point.x,
-                y: event.point.y,
-                z: event.point.z,
-            });
+        if (currentEntity && currentEntity.has(traits.Hovered)) {
+            const hoverInfo = updateHoverInfo(currentEntity, event);
+            if (hoverInfo) {
+                currentEntity.set(traits.InstancedPose, {
+                    index: hoverInfo.index,
+                    x: hoverInfo.x,
+                    y: hoverInfo.y,
+                    z: hoverInfo.z,
+                    oX: hoverInfo.oX,
+                    oY: hoverInfo.oY,
+                    oZ: hoverInfo.oZ,
+                    theta: hoverInfo.theta,
+                });
+            }
         }
     };
     const onpointerleave = (event) => {
         event.stopPropagation();
         cursor.onPointerLeave();
-        if (currentEntity?.has(traits.Hover)) {
-            currentEntity.remove(traits.Hover);
+        if (currentEntity?.has(traits.Hovered)) {
+            currentEntity.remove(traits.Hovered);
+        }
+        if (currentEntity?.has(traits.InstancedPose)) {
+            currentEntity.remove(traits.InstancedPose);
         }
     };
     const ondblclick = (event) => {

package/dist/hooks/usePointcloudObjects.svelte.js

@@ -7,7 +7,7 @@ import { getContext, setContext } from 'svelte';
 import { traits, useWorld } from '../ecs';
 import { createBufferGeometry, updateBufferGeometry } from '../attribute';
 import { useEnvironment } from './useEnvironment.svelte';
-import { RefetchRates } from '../components/RefreshRate.svelte';
+import { RefetchRates } from '../components/overlay/RefreshRate.svelte';
 import { createPose } from '../transform';
 const key = Symbol('pointcloud-object-context');
 export const providePointcloudObjects = (partID) => {