@viamrobotics/motion-tools 1.9.1 → 1.11.0

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

@@ -0,0 +1,330 @@
+<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'
+	import XRControllerSettings from '../../xr/XRControllerSettings.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 currentRobotCameraWidgets = $derived(
+		settings.current.openCameraWidgets[partID.current] || []
+	)
+
+	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}
+
+{#snippet XR()}
+	<div class="flex flex-col gap-2.5 text-xs">
+		<XRControllerSettings />
+	</div>
+{/snippet}
+
+{#snippet Widgets()}
+	<div class="text-gray-9 flex flex-col gap-1 text-xs">
+		<label class="flex items-center justify-between gap-2 py-1">
+			Arm positions
+			<Switch bind:on={settings.current.enableArmPositionsWidget} />
+		</label>
+
+		{@render SectionTitle('Camera widgets')}
+
+		{#each cameras.current as camera (camera)}
+			{@const isWidgetOpen = currentRobotCameraWidgets.includes(camera.name)}
+			<div class="flex items-center justify-between gap-2 py-0.5">
+				<span class="min-w-0 truncate">{camera.name}</span>
+				<Switch
+					on={isWidgetOpen}
+					on:change={(event) => {
+						if (event.detail) {
+							settings.current.openCameraWidgets = {
+								...settings.current.openCameraWidgets,
+								[partID.current]: [...currentRobotCameraWidgets, camera.name],
+							}
+						} else {
+							settings.current.openCameraWidgets = {
+								...settings.current.openCameraWidgets,
+								[partID.current]: currentRobotCameraWidgets.filter(
+									(widget) => widget !== camera.name
+								),
+							}
+						}
+					}}
+				/>
+			</div>
+		{:else}
+			No cameras detected
+		{/each}
+	</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: 'Widgets', content: Widgets },
+			{ label: 'Stats', content: Stats },
+			...('xr' in navigator ? [{ label: 'VR / AR', content: XR }] : []),
+		]}
+		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/overlay/widgets/Camera.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { draggable } from '@neodrag/svelte'
 	import { Icon, Select } from '@viamrobotics/prime-core'
-	import { CameraStream, useRobotClient } from '@viamrobotics/svelte-sdk'
-	import { StreamClient } from '@viamrobotics/sdk'
+	import { CameraStream, useRobotClient, useConnectionStatus } from '@viamrobotics/svelte-sdk'
+	import { StreamClient, MachineConnectionEvent } from '@viamrobotics/sdk'
 	import { useSettings } from '../../../hooks/useSettings.svelte'
 	import { usePartID } from '../../../hooks/usePartID.svelte'
 	import { useEnvironment } from '../../../hooks/useEnvironment.svelte'
@@ -17,6 +17,7 @@
 	const settings = useSettings()
 	const partID = usePartID()
 	const client = useRobotClient(() => partID.current)
+	const connectionStatus = useConnectionStatus(() => partID.current)
 	const environment = useEnvironment()
 
 	let dragElement = $state.raw<HTMLElement>()
@@ -70,13 +71,18 @@
 		}
 	}
 
-	// Create a single StreamClient instance per robot client
-	let streamClient = $derived(client.current ? new StreamClient(client.current) : undefined)
+	// Only create StreamClient when connection is fully established
+	let streamClient = $derived(
+		client.current && connectionStatus.current === MachineConnectionEvent.CONNECTED
+			? new StreamClient(client.current)
+			: undefined
+	)
 
 	$effect(() => {
 		if (streamClient) {
 			isLoading = true
 			error = undefined
+
 			streamClient
 				.getOptions(name)
 				.then((options) => {
@@ -164,14 +170,16 @@
 			class="relative min-h-0 w-full flex-1 overflow-hidden bg-black [&_img]:h-full [&_img]:w-full [&_img]:object-fill [&_video]:h-full [&_video]:w-full [&_video]:object-fill"
 			style:aspect-ratio={aspectRatio}
 		>
-			{#key environment.current.viewerMode === 'monitor'}
-				<CameraStream
-					{name}
-					partID={partID.current}
-					onloadedmetadata={onMediaLoad}
-					onload={onMediaLoad}
-				/>
-			{/key}
+			{#if connectionStatus.current === MachineConnectionEvent.CONNECTED}
+				{#key environment.current.viewerMode === 'monitor'}
+					<CameraStream
+						{name}
+						partID={partID.current}
+						onloadedmetadata={onMediaLoad}
+						onload={onMediaLoad}
+					/>
+				{/key}
+			{/if}
 
 			<!-- FPS Pill -->
 			{#if fps > 0}