@viamrobotics/motion-tools 1.32.0 → 1.33.0

package/dist/components/App.svelte

@@ -7,7 +7,7 @@
 	import { useXR } from '@threlte/xr'
 	import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
 	import { primeTheme } from '@viamrobotics/tweakpane-config'
-	import { onMount, type Snippet } from 'svelte'
+	import { type Component, onMount, type Snippet } from 'svelte'
 	import { ThemeUtils } from 'svelte-tweakpane-ui'
 
 	import type { FragmentInfo } from '../hooks/usePartConfig.svelte'
@@ -17,7 +17,6 @@
 	import Details from './overlay/Details.svelte'
 	import TreeContainer from './overlay/left-pane/TreeContainer.svelte'
 	import Settings from './overlay/settings/Settings.svelte'
-	import XR from './xr/XR.svelte'
 	import { provideWorld, traits, useQuery } from '../ecs'
 	import { type CameraPose, provideCameraControls } from '../hooks/useControls.svelte'
 	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
@@ -51,7 +50,20 @@
 		localConfigProps?: LocalConfigProps
 
 		/**
-		 * Snippet for THREE objects
+		 * Allows adding additional tabs to the settings panel
+		 */
+		settingsTabs?: {
+			label: string
+			component: Component
+		}[]
+
+		/**
+		 * Allows setting the initial camera pose
+		 */
+		cameraPose?: CameraPose
+
+		/**
+		 * Snippet for Three.js objects
 		 */
 		children?: Snippet
 
@@ -64,11 +76,6 @@
 		 * Snippet to inject items into the details panel
 		 */
 		details?: Snippet<[{ entity: Entity }]>
-
-		/**
-		 * Allows setting the initial camera pose
-		 */
-		cameraPose?: CameraPose
 	}
 
 	let {
@@ -76,6 +83,7 @@
 		inputBindingsEnabled = true,
 		localConfigProps,
 		cameraPose,
+		settingsTabs,
 		children: appChildren,
 		dashboard,
 		details,
@@ -124,8 +132,6 @@
 				{@render appChildren?.()}
 			</Scene>
 
-			<XR {@attach domPortal(root)} />
-
 			{#if settings.current.renderSubEntityHoverDetail}
 				<HoveredEntities />
 			{/if}
@@ -166,7 +172,7 @@
 
 				<PortalTarget id="dom" />
 
-				<Settings />
+				<Settings {settingsTabs} />
 				<Logs />
 				<AddFrames />
 			</div>

package/dist/components/App.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Struct } from '@viamrobotics/sdk';
 import type { Entity } from 'koota';
-import { type Snippet } from 'svelte';
+import { type Component, type Snippet } from 'svelte';
 import type { FragmentInfo } from '../hooks/usePartConfig.svelte';
 import { type CameraPose } from '../hooks/useControls.svelte';
 interface LocalConfigProps {
@@ -14,7 +14,18 @@ interface Props {
     inputBindingsEnabled?: boolean;
     localConfigProps?: LocalConfigProps;
     /**
-     * Snippet for THREE objects
+     * Allows adding additional tabs to the settings panel
+     */
+    settingsTabs?: {
+        label: string;
+        component: Component;
+    }[];
+    /**
+     * Allows setting the initial camera pose
+     */
+    cameraPose?: CameraPose;
+    /**
+     * Snippet for Three.js objects
      */
     children?: Snippet;
     /**
@@ -27,11 +38,7 @@ interface Props {
     details?: Snippet<[{
         entity: Entity;
     }]>;
-    /**
-     * Allows setting the initial camera pose
-     */
-    cameraPose?: CameraPose;
 }
-declare const App: import("svelte").Component<Props, {}, "">;
+declare const App: Component<Props, {}, "">;
 type App = ReturnType<typeof App>;
 export default App;

package/dist/components/Scene.svelte

@@ -19,7 +19,6 @@
 	import CameraControls from './CameraControls.svelte'
 	import KeyboardBindings from './KeyboardBindings.svelte'
 	import PointerMissBox from './PointerMissBox.svelte'
-	import { useOrigin } from './xr/useOrigin.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -29,7 +28,6 @@
 
 	const threlte = useThrelte()
 	const settings = useSettings()
-	const origin = useOrigin()
 
 	// @ts-expect-error This is for debugging
 	globalThis.__threlte__ = threlte
@@ -66,48 +64,43 @@
 <KeyboardBindings />
 <Environment url={hdrImage} />
 
-<T.Group
-	position={origin.position}
-	rotation.z={origin.rotation}
->
-	<PointerMissBox />
-	<SelectedTransformControls />
-
-	{#if !$isPresenting && settings.current.grid}
-		<Grid
-			oncreate={(ref) => {
-				const material = ref.material as ShaderMaterial
-				material.depthWrite = false
-			}}
-			raycast={() => null}
-			bvh={{ enabled: false }}
-			plane="xy"
-			sectionColor="#333"
-			infiniteGrid
-			renderOrder={999}
-			cellSize={settings.current.gridCellSize}
-			sectionSize={settings.current.gridSectionSize}
-			fadeOrigin={[0, 0, 0]}
-			fadeDistance={settings.current.gridFadeDistance}
-		/>
-	{/if}
-
-	{#if !$isPresenting}
-		<Camera position={[3, 3, 3]}>
-			<CameraControls />
-		</Camera>
-	{/if}
-
-	<StaticGeometries />
-	<Selected />
-
-	<PortalTarget />
-
-	<Entities />
-	<BatchedArrows />
-
-	{@render children?.()}
-
-	<T.DirectionalLight position={[3, 3, 3]} />
-	<T.AmbientLight />
-</T.Group>
+<PointerMissBox />
+<SelectedTransformControls />
+
+{#if !$isPresenting && settings.current.grid}
+	<Grid
+		oncreate={(ref) => {
+			const material = ref.material as ShaderMaterial
+			material.depthWrite = false
+		}}
+		raycast={() => null}
+		bvh={{ enabled: false }}
+		plane="xy"
+		sectionColor="#333"
+		infiniteGrid
+		renderOrder={999}
+		cellSize={settings.current.gridCellSize}
+		sectionSize={settings.current.gridSectionSize}
+		fadeOrigin={[0, 0, 0]}
+		fadeDistance={settings.current.gridFadeDistance}
+	/>
+{/if}
+
+{#if !$isPresenting}
+	<Camera position={[3, 3, 3]}>
+		<CameraControls />
+	</Camera>
+{/if}
+
+<StaticGeometries />
+<Selected />
+
+<PortalTarget />
+
+<Entities />
+<BatchedArrows />
+
+{@render children?.()}
+
+<T.DirectionalLight position={[3, 3, 3]} />
+<T.AmbientLight />

package/dist/components/SceneProviders.svelte

@@ -21,8 +21,6 @@
 	import { provideResourceByName } from '../hooks/useResourceByName.svelte'
 	import { provideWorldStates } from '../hooks/useWorldState.svelte'
 
-	import { provideOrigin } from './xr/useOrigin.svelte'
-
 	interface Props {
 		children: Snippet
 	}
@@ -37,7 +35,6 @@
 	provideHierarchy()
 	provideWorldMatrix()
 	provideInheritedInvisible()
-	provideOrigin()
 
 	provideRelationships()
 

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { useGeometries } from '../../../hooks/useGeometries.svelte'
+	import { usePointcloudObjects } from '../../../hooks/usePointcloudObjects.svelte'
+	import { usePointClouds } from '../../../hooks/usePointclouds.svelte'
+	import { useRefetchPoses } from '../../../hooks/useRefetchPoses'
+	import { RefreshRates } from '../../../hooks/useSettings.svelte'
+
+	import RefreshRate from '../RefreshRate.svelte'
+
+	const geometries = useGeometries()
+	const pointclouds = usePointClouds()
+	const pointcloudObjects = usePointcloudObjects()
+	const { refetchPoses } = useRefetchPoses()
+</script>
+
+<div class="flex flex-col gap-2.5 text-xs">
+	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Polling rates</strong></h3>
+
+	<RefreshRate
+		id={RefreshRates.poses}
+		label="Poses"
+		allowLive
+		onManualRefetch={() => {
+			refetchPoses()
+			geometries.refetch()
+		}}
+	/>
+	<RefreshRate
+		id={RefreshRates.pointclouds}
+		label="Pointclouds from cameras"
+		onManualRefetch={() => {
+			pointclouds.refetch()
+		}}
+	/>
+	<RefreshRate
+		id={RefreshRates.vision}
+		label="Vision service pointcloud segments and objects"
+		onManualRefetch={() => {
+			pointcloudObjects.refetch()
+		}}
+	/>
+</div>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ConnectionSettings: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ConnectionSettings = InstanceType<typeof ConnectionSettings>;
+export default ConnectionSettings;

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Switch } from '@viamrobotics/prime-core'
+
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+
+	const settings = useSettings()
+</script>
+
+<div class="flex w-full flex-col gap-2.5 text-xs">
+	<label class="flex items-center justify-between gap-2">
+		Render stats <Switch bind:on={settings.current.renderStats} />
+	</label>
+</div>

package/dist/components/{xr/frame-configure/Controllers.svelte.d.ts → overlay/settings/DebugSettings.svelte.d.ts}

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Controllers: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const DebugSettings: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Controllers = InstanceType<typeof Controllers>;
-export default Controllers;
+type DebugSettings = InstanceType<typeof DebugSettings>;
+export default DebugSettings;

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Input, Switch } from '@viamrobotics/prime-core'
+	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+	import { Color } from 'three'
+
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+
+	const partID = usePartID()
+	const cameras = useResourceNames(() => partID.current, 'camera')
+	const settings = useSettings()
+
+	const { disabledCameras } = $derived(settings.current)
+
+	const colorHex = $derived(`#${new Color(settings.current.pointColor).getHexString()}`)
+</script>
+
+<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"
+				value={colorHex}
+				on:change={(event) => {
+					const value = (event.target as HTMLInputElement).value
+					settings.current.pointColor = value
+				}}
+				on:keydown={(event) => event.stopImmediatePropagation()}
+			/>
+		</div>
+	</label>
+
+	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Enabled cameras</strong></h3>
+
+	{#each cameras.current as camera (camera)}
+		<div class="flex items-center justify-between py-0.5 text-xs">
+			{camera.name}
+			<Switch
+				on={disabledCameras[camera.name] !== true}
+				on:change={(event) => {
+					disabledCameras[camera.name] = !event.detail
+				}}
+			/>
+		</div>
+	{:else}
+		No cameras detected
+	{/each}
+</div>

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

@@ -0,0 +1,3 @@
+declare const PointcloudSettings: import("svelte").Component<Record<string, never>, {}, "">;
+type PointcloudSettings = ReturnType<typeof PointcloudSettings>;
+export default PointcloudSettings;

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

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { Input, Switch } from '@viamrobotics/prime-core'
+
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+
+	import ToggleGroup from '../ToggleGroup.svelte'
+
+	const settings = useSettings()
+</script>
+
+<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>
+
+	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Grid</strong></h3>
+
+	<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>
+
+	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Lines</strong></h3>
+
+	<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>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SceneSettings: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SceneSettings = InstanceType<typeof SceneSettings>;
+export default SceneSettings;