@viamrobotics/test-widgets 0.1.5 → 0.1.6

package/dist/builtin.js

@@ -1,49 +1,58 @@
-import { ArmClient, BaseClient, BoardClient, ButtonClient, CameraClient, DataManagerClient, DiscoveryClient, EncoderClient, GantryClient, GenericComponentClient, GenericServiceClient, GripperClient, InputControllerClient, MLModelClient, MotionClient, MotorClient, MovementSensorClient, NavigationClient, PoseTrackerClient, PowerSensorClient, SensorClient, ServoClient, SlamClient, SwitchClient, VideoClient, VisionClient, WorldStateStoreClient, } from '@viamrobotics/sdk';
 import { ArmWidget, BaseWidget, BoardWidget, ButtonWidget, CameraWidget, DiscoveryWidget, EncoderWidget, GantryWidget, GripperWidget, InputControllerWidget, MLModelServiceWidget, MotorWidget, MovementSensorWidget, NavigationServiceWidget, PowerSensorWidget, SensorWidget, ServoWidget, SlamWidget, SwitchWidget, VisionServiceWidget, } from './';
+import { clientMap } from "./client-map.js";
 import { getResourceAPI } from "./resource.js";
+export { clientForBuiltinResource } from "./client-map.js";
 // The types are nicer to work with as arrays (as opposed to a record of objects) because TS will infer the types.
 // try not to expose this map so that we can easily refactor it.
 const resourceMap = 
 // api: [client, testView, showResourceInControlView]
 // list created via `cat rdkbuiltins/viam-server-stable.json | rg "api" | sort | uniq`
 {
-    'rdk:component:arm': [ArmClient, ArmWidget, true],
-    'rdk:component:base': [BaseClient, BaseWidget, true],
-    'rdk:component:board': [BoardClient, BoardWidget, true],
-    'rdk:component:button': [ButtonClient, ButtonWidget, true],
-    'rdk:component:camera': [CameraClient, CameraWidget, true],
-    'rdk:component:encoder': [EncoderClient, EncoderWidget, true],
-    'rdk:component:gantry': [GantryClient, GantryWidget, true],
-    'rdk:component:generic': [GenericComponentClient, undefined, true],
-    'rdk:component:gripper': [GripperClient, GripperWidget, true],
-    'rdk:component:input_controller': [InputControllerClient, InputControllerWidget, true],
-    'rdk:component:motor': [MotorClient, MotorWidget, true],
-    'rdk:component:movement_sensor': [MovementSensorClient, MovementSensorWidget, true],
-    'rdk:component:pose_tracker': [PoseTrackerClient, undefined, true],
-    'rdk:component:power_sensor': [PowerSensorClient, PowerSensorWidget, true],
-    'rdk:component:sensor': [SensorClient, SensorWidget, true],
-    'rdk:component:servo': [ServoClient, ServoWidget, true],
-    'rdk:component:switch': [SwitchClient, SwitchWidget, true],
+    'rdk:component:arm': [clientMap['rdk:component:arm'], ArmWidget, true],
+    'rdk:component:base': [clientMap['rdk:component:base'], BaseWidget, true],
+    'rdk:component:board': [clientMap['rdk:component:board'], BoardWidget, true],
+    'rdk:component:button': [clientMap['rdk:component:button'], ButtonWidget, true],
+    'rdk:component:camera': [clientMap['rdk:component:camera'], CameraWidget, true],
+    'rdk:component:encoder': [clientMap['rdk:component:encoder'], EncoderWidget, true],
+    'rdk:component:gantry': [clientMap['rdk:component:gantry'], GantryWidget, true],
+    'rdk:component:generic': [clientMap['rdk:component:generic'], undefined, true],
+    'rdk:component:gripper': [clientMap['rdk:component:gripper'], GripperWidget, true],
+    'rdk:component:input_controller': [
+        clientMap['rdk:component:input_controller'],
+        InputControllerWidget,
+        true,
+    ],
+    'rdk:component:motor': [clientMap['rdk:component:motor'], MotorWidget, true],
+    'rdk:component:movement_sensor': [
+        clientMap['rdk:component:movement_sensor'],
+        MovementSensorWidget,
+        true,
+    ],
+    'rdk:component:pose_tracker': [clientMap['rdk:component:pose_tracker'], undefined, true],
+    'rdk:component:power_sensor': [
+        clientMap['rdk:component:power_sensor'],
+        PowerSensorWidget,
+        true,
+    ],
+    'rdk:component:sensor': [clientMap['rdk:component:sensor'], SensorWidget, true],
+    'rdk:component:servo': [clientMap['rdk:component:servo'], ServoWidget, true],
+    'rdk:component:switch': [clientMap['rdk:component:switch'], SwitchWidget, true],
     'rdk:service:base_remote_control': [undefined, undefined, true],
     // dont show -- confusing to users
-    'rdk:service:data_manager': [DataManagerClient, undefined, false],
-    'rdk:service:discovery': [DiscoveryClient, DiscoveryWidget, true],
-    'rdk:service:generic': [GenericServiceClient, undefined, true],
-    'rdk:service:mlmodel': [MLModelClient, MLModelServiceWidget, true],
+    'rdk:service:data_manager': [clientMap['rdk:service:data_manager'], undefined, false],
+    'rdk:service:discovery': [clientMap['rdk:service:discovery'], DiscoveryWidget, true],
+    'rdk:service:generic': [clientMap['rdk:service:generic'], undefined, true],
+    'rdk:service:mlmodel': [clientMap['rdk:service:mlmodel'], MLModelServiceWidget, true],
     // dont show -- confusing to users
-    'rdk:service:motion': [MotionClient, undefined, false],
-    'rdk:service:navigation': [NavigationClient, NavigationServiceWidget, true],
+    'rdk:service:motion': [clientMap['rdk:service:motion'], undefined, false],
+    'rdk:service:navigation': [clientMap['rdk:service:navigation'], NavigationServiceWidget, true],
     // dont show -- confusing to users
     'rdk:service:sensors': [undefined, undefined, false],
     'rdk:service:shell': [undefined, undefined, false],
-    'rdk:service:slam': [SlamClient, SlamWidget, true],
-    'rdk:service:vision': [VisionClient, VisionServiceWidget, true],
-    'rdk:service:world_state_store': [WorldStateStoreClient, undefined, true],
-    'rdk:service:video': [VideoClient, undefined, true],
-};
-export const clientForBuiltinResource = (resource) => {
-    const resAPI = getResourceAPI(resource);
-    return resAPI in resourceMap ? resourceMap[resAPI][0] : undefined;
+    'rdk:service:slam': [clientMap['rdk:service:slam'], SlamWidget, true],
+    'rdk:service:vision': [clientMap['rdk:service:vision'], VisionServiceWidget, true],
+    'rdk:service:world_state_store': [clientMap['rdk:service:world_state_store'], undefined, true],
+    'rdk:service:video': [clientMap['rdk:service:video'], undefined, true],
 };
 export const viewForBuiltinResource = (resource) => {
     const resAPI = getResourceAPI(resource);

package/dist/client-map.d.ts

@@ -0,0 +1,31 @@
+import { ArmClient, BaseClient, BoardClient, ButtonClient, CameraClient, DataManagerClient, DiscoveryClient, EncoderClient, GantryClient, GenericComponentClient, GenericServiceClient, GripperClient, InputControllerClient, MLModelClient, MotionClient, MotorClient, MovementSensorClient, NavigationClient, PoseTrackerClient, PowerSensorClient, type ResourceName, SensorClient, ServoClient, SlamClient, SwitchClient, VideoClient, VisionClient, WorldStateStoreClient } from '@viamrobotics/sdk';
+export declare const clientMap: {
+    readonly 'rdk:component:arm': typeof ArmClient;
+    readonly 'rdk:component:base': typeof BaseClient;
+    readonly 'rdk:component:board': typeof BoardClient;
+    readonly 'rdk:component:button': typeof ButtonClient;
+    readonly 'rdk:component:camera': typeof CameraClient;
+    readonly 'rdk:component:encoder': typeof EncoderClient;
+    readonly 'rdk:component:gantry': typeof GantryClient;
+    readonly 'rdk:component:generic': typeof GenericComponentClient;
+    readonly 'rdk:component:gripper': typeof GripperClient;
+    readonly 'rdk:component:input_controller': typeof InputControllerClient;
+    readonly 'rdk:component:motor': typeof MotorClient;
+    readonly 'rdk:component:movement_sensor': typeof MovementSensorClient;
+    readonly 'rdk:component:pose_tracker': typeof PoseTrackerClient;
+    readonly 'rdk:component:power_sensor': typeof PowerSensorClient;
+    readonly 'rdk:component:sensor': typeof SensorClient;
+    readonly 'rdk:component:servo': typeof ServoClient;
+    readonly 'rdk:component:switch': typeof SwitchClient;
+    readonly 'rdk:service:data_manager': typeof DataManagerClient;
+    readonly 'rdk:service:discovery': typeof DiscoveryClient;
+    readonly 'rdk:service:generic': typeof GenericServiceClient;
+    readonly 'rdk:service:mlmodel': typeof MLModelClient;
+    readonly 'rdk:service:motion': typeof MotionClient;
+    readonly 'rdk:service:navigation': typeof NavigationClient;
+    readonly 'rdk:service:slam': typeof SlamClient;
+    readonly 'rdk:service:vision': typeof VisionClient;
+    readonly 'rdk:service:world_state_store': typeof WorldStateStoreClient;
+    readonly 'rdk:service:video': typeof VideoClient;
+};
+export declare const clientForBuiltinResource: (resource: ResourceName) => typeof ArmClient | typeof BaseClient | typeof GantryClient | typeof GripperClient | typeof MotorClient | typeof ServoClient | typeof BoardClient | typeof ButtonClient | typeof CameraClient | typeof DiscoveryClient | typeof EncoderClient | typeof GenericComponentClient | typeof InputControllerClient | typeof MovementSensorClient | typeof PoseTrackerClient | typeof PowerSensorClient | typeof SensorClient | typeof SwitchClient | typeof DataManagerClient | typeof GenericServiceClient | typeof MLModelClient | typeof MotionClient | typeof NavigationClient | typeof SlamClient | typeof VisionClient | typeof WorldStateStoreClient | typeof VideoClient | undefined;

package/dist/client-map.js

@@ -0,0 +1,35 @@
+import { ArmClient, BaseClient, BoardClient, ButtonClient, CameraClient, DataManagerClient, DiscoveryClient, EncoderClient, GantryClient, GenericComponentClient, GenericServiceClient, GripperClient, InputControllerClient, MLModelClient, MotionClient, MotorClient, MovementSensorClient, NavigationClient, PoseTrackerClient, PowerSensorClient, SensorClient, ServoClient, SlamClient, SwitchClient, VideoClient, VisionClient, WorldStateStoreClient, } from '@viamrobotics/sdk';
+import { getResourceAPI } from "./resource.js";
+export const clientMap = {
+    'rdk:component:arm': ArmClient,
+    'rdk:component:base': BaseClient,
+    'rdk:component:board': BoardClient,
+    'rdk:component:button': ButtonClient,
+    'rdk:component:camera': CameraClient,
+    'rdk:component:encoder': EncoderClient,
+    'rdk:component:gantry': GantryClient,
+    'rdk:component:generic': GenericComponentClient,
+    'rdk:component:gripper': GripperClient,
+    'rdk:component:input_controller': InputControllerClient,
+    'rdk:component:motor': MotorClient,
+    'rdk:component:movement_sensor': MovementSensorClient,
+    'rdk:component:pose_tracker': PoseTrackerClient,
+    'rdk:component:power_sensor': PowerSensorClient,
+    'rdk:component:sensor': SensorClient,
+    'rdk:component:servo': ServoClient,
+    'rdk:component:switch': SwitchClient,
+    'rdk:service:data_manager': DataManagerClient,
+    'rdk:service:discovery': DiscoveryClient,
+    'rdk:service:generic': GenericServiceClient,
+    'rdk:service:mlmodel': MLModelClient,
+    'rdk:service:motion': MotionClient,
+    'rdk:service:navigation': NavigationClient,
+    'rdk:service:slam': SlamClient,
+    'rdk:service:vision': VisionClient,
+    'rdk:service:world_state_store': WorldStateStoreClient,
+    'rdk:service:video': VideoClient,
+};
+export const clientForBuiltinResource = (resource) => {
+    const resAPI = getResourceAPI(resource);
+    return resAPI in clientMap ? clientMap[resAPI] : undefined;
+};

package/dist/components/widgets/camera/camera.svelte

@@ -29,7 +29,6 @@
 		() => resourceName,
 		'camera'
 	)
-	const isShowingPip = $state(false)
 	let isShowingPointcloud = $state(false)
 
 	const { addImageToDataset } = useAddImageToDataset()
@@ -46,7 +45,6 @@
 	const imageQuery = createResourceQuery(client, 'getImages', () => ({
 		enabled: refetchInterval.current !== RefetchIntervals.LIVE,
 		refetchInterval: refetchInterval.current,
-		refetchIntervalInBackground: isShowingPip,
 	}))
 
 	const pointcloudQuery = createResourceQuery(client, 'getPointCloud', () => ({
@@ -70,11 +68,6 @@
 	// to be requested separately. Don't show a "toggle pip" button in Firefox.
 	const isFirefox = navigator.userAgent.toLowerCase().includes('firefox')
 
-	let mediaStream = $state<MediaStream | null>(null)
-	const setMediaStream = (next: MediaStream | null) => {
-		mediaStream = next
-	}
-
 	let mousePostionTooltip = $state<'On' | 'Off'>('Off')
 	const setMousePostionTooltip = (event: CustomEvent<string>) => {
 		mousePostionTooltip = event.detail as 'On' | 'Off'
@@ -103,7 +96,6 @@
 					error={imageQuery.error}
 					isLoading={imageQuery.isLoading}
 					refetch={imageQuery.refetch}
-					{setMediaStream}
 					showMousePositionTooltip={mousePostionTooltip === 'On'}
 				/>
 			</div>
@@ -146,9 +138,8 @@
 				{/if}
 				{#if !isFirefox}
 					<PictureInPictureButton
-						{mediaStream}
 						{resourceName}
-						{isShowingPip}
+						rate={refetchInterval.current}
 					/>
 				{/if}
 				<Label>

package/dist/components/widgets/camera/live-or-polling-video.svelte

@@ -25,7 +25,6 @@
 		isLoading: boolean
 		videoClass?: string
 		showMousePositionTooltip?: boolean
-		setMediaStream?: ((mediaStream: MediaStream | null) => void) | undefined
 		refetch: () => Promise<unknown>
 	}
 
@@ -39,7 +38,6 @@
 		isLoading,
 		videoClass = '',
 		showMousePositionTooltip = false,
-		setMediaStream: setPipMediaStream,
 		refetch,
 	}: Props = $props()
 
@@ -72,7 +70,6 @@
 			}
 			videoElement.srcObject = mediaStream
 		}
-		setPipMediaStream?.(mediaStream)
 	}
 
 	// For live streams, set the media stream when there is a new video track.
@@ -185,13 +182,12 @@
 	})
 
 	$effect(() => {
-		return () => {
+		return () =>
 			untrack(() => {
 				disableStream().then(() => {
 					setMediaStream(null)
 				})
 			})
-		}
 	})
 
 	$effect(() => {

package/dist/components/widgets/camera/live-or-polling-video.svelte.d.ts

@@ -10,7 +10,6 @@ interface Props {
     isLoading: boolean;
     videoClass?: string;
     showMousePositionTooltip?: boolean;
-    setMediaStream?: ((mediaStream: MediaStream | null) => void) | undefined;
     refetch: () => Promise<unknown>;
 }
 declare const LiveOrPollingVideo: import("svelte").Component<Props, {}, "">;

package/dist/components/widgets/camera/picture-in-picture-button.svelte

@@ -1,80 +1,35 @@
 <script lang="ts">
 	import { Button } from '@viamrobotics/prime-core'
-	import { onMount } from 'svelte'
 
 	import ErrorDisplay from '../../error.svelte'
 
+	import { usePip } from '../../../pip/context.svelte'
+
 	interface Props {
 		resourceName: string
-		mediaStream: MediaStream | null
-		isShowingPip: boolean
-	}
-
-	let { resourceName, mediaStream, isShowingPip = $bindable(false) }: Props = $props()
-
-	let videoElement = $state.raw<HTMLVideoElement>()
-	let lastErr = $state.raw<Error>()
-
-	const onEnter = () => {
-		isShowingPip = true
-	}
-
-	const onLeave = () => {
-		isShowingPip = false
+		rate: number | 'live' | false
 	}
 
-	onMount(() => {
-		videoElement?.addEventListener('enterpictureinpicture', onEnter)
-		videoElement?.addEventListener('leavepictureinpicture', onLeave)
+	const { resourceName, rate }: Props = $props()
 
-		return () => {
-			videoElement?.removeEventListener('enterpictureinpicture', onEnter)
-			videoElement?.removeEventListener('leavepictureinpicture', onLeave)
-			if (isShowingPip) {
-				document.exitPictureInPicture()
-			}
-		}
-	})
+	const pip = usePip()
 
-	$effect.pre(() => {
-		if (videoElement) {
-			videoElement.srcObject = mediaStream
+	$effect(() => {
+		if (resourceName === pip.resourceName) {
+			pip.setRate(rate)
 		}
 	})
-
-	const togglePictureInPicture = async () => {
-		lastErr = undefined
-
-		try {
-			await (isShowingPip
-				? document.exitPictureInPicture()
-				: videoElement?.requestPictureInPicture())
-		} catch (error) {
-			lastErr = error as Error
-		}
-	}
 </script>
 
 <Button
 	icon="picture-in-picture-top-right"
-	onclick={togglePictureInPicture}
+	onclick={() => pip.toggle(resourceName)}
+	progress={pip.readyState === 'loading' ? 'indeterminate' : undefined}
 >
 	Toggle picture-in-picture
 </Button>
 
-<!-- Display a fixed video element on the page but essentially hide it.
-  There must always be a video element visible for PiP. -->
-<video
-	class="fixed right-0 bottom-0 h-px w-px opacity-[0.01]"
-	bind:this={videoElement}
-	muted
-	autoplay
-	controls={false}
-	playsinline
-	aria-label={`${resourceName} picture-in-picture stream`}
-></video>
-
 <ErrorDisplay
 	class="max-w-50"
-	lastError={lastErr}
+	lastError={pip.error}
 />

package/dist/components/widgets/camera/picture-in-picture-button.svelte.d.ts

@@ -1,8 +1,7 @@
 interface Props {
     resourceName: string;
-    mediaStream: MediaStream | null;
-    isShowingPip: boolean;
+    rate: number | 'live' | false;
 }
-declare const PictureInPictureButton: import("svelte").Component<Props, {}, "isShowingPip">;
+declare const PictureInPictureButton: import("svelte").Component<Props, {}, "">;
 type PictureInPictureButton = ReturnType<typeof PictureInPictureButton>;
 export default PictureInPictureButton;

package/dist/components/widgets/do-command/do-command.svelte

@@ -5,7 +5,7 @@
 	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
 	import { PersistedState } from 'runed'
 
-	import { clientForBuiltinResource } from '../../../builtin'
+	import { clientForBuiltinResource } from '../../../client-map'
 	import { getResourceAPI, getResourceKey } from '../../../resource'
 
 	import ErrorDisplay from '../../error.svelte'

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { createAddImageToDatasetContext, type ImageData, useAddImageToDataset, } from './add-image-to-dataset';
 export * from './components';
+export { providePip, usePip } from './pip/context.svelte';

package/dist/index.js

@@ -1,2 +1,3 @@
 export { createAddImageToDatasetContext, useAddImageToDataset, } from './add-image-to-dataset';
 export * from './components';
+export { providePip, usePip } from './pip/context.svelte';

package/dist/pip/context.svelte.d.ts

@@ -0,0 +1,13 @@
+interface PipContext {
+    /** Called by PictureInPictureButton to start or stop PiP. */
+    toggle(resourceName: string): Promise<void>;
+    setRate(rate: 'live' | number | false): void;
+    error: Error | undefined;
+    /** Whether the PictureInPicture is active */
+    readyState: 'inactive' | 'loading' | 'active';
+    /** The current resource streamed */
+    resourceName: string | undefined;
+}
+export declare function providePip(partID: () => string): PipContext;
+export declare function usePip(): PipContext;
+export {};

package/dist/pip/context.svelte.js

@@ -0,0 +1,125 @@
+import { CameraClient } from '@viamrobotics/sdk';
+import { createResourceClient, createResourceQuery, createStreamClient, } from '@viamrobotics/svelte-sdk';
+import { getContext, setContext } from 'svelte';
+const PIP_KEY = Symbol('pip-context');
+export function providePip(partID) {
+    const video = document.createElement('video');
+    video.muted = true;
+    video.autoplay = true;
+    video.controls = false;
+    video.playsInline = true;
+    video.ariaHidden = 'true';
+    video.style = 'position:fixed; right: 0; bottom: 0; height: 1px; width: 1px; opacity: 0.01;';
+    const canvas = document.createElement('canvas');
+    const canvasCtx = canvas.getContext('2d');
+    const canvasStream = canvas.captureStream();
+    const img = document.createElement('img');
+    let error = $state();
+    let readyState = $state('inactive');
+    let rate = $state('live');
+    let activeName = $state();
+    const cameraClient = $derived(activeName ? createResourceClient(CameraClient, partID, () => activeName ?? '') : undefined);
+    const streamClient = $derived(activeName ? createStreamClient(partID, () => activeName ?? '') : undefined);
+    const imageQuery = $derived(cameraClient?.current
+        ? createResourceQuery(cameraClient, 'getImages', () => ({
+            enabled: rate !== 'live',
+            refetchInterval: typeof rate === 'number' ? rate : false,
+            refetchIntervalInBackground: activeName === cameraClient?.current?.name,
+        }))
+        : undefined);
+    const mediaStream = $derived((rate === 'live' ? streamClient?.mediaStream : canvasStream) ?? null);
+    $effect(() => {
+        document.body.append(video);
+        return () => {
+            video.remove();
+        };
+    });
+    $effect(() => {
+        video.srcObject = mediaStream;
+        return () => {
+            video.srcObject = null;
+        };
+    });
+    $effect(() => {
+        const currentRate = rate;
+        if (currentRate === 'live')
+            return;
+        const image = imageQuery?.data?.images[0];
+        if (!image)
+            return;
+        if (img.src)
+            URL.revokeObjectURL(img.src);
+        img.src = URL.createObjectURL(new Blob([new Uint8Array(image.image)], {
+            type: image.mimeType || 'image/jpeg',
+        }));
+        const drawImage = () => {
+            canvas.width = img.naturalWidth;
+            canvas.height = img.naturalHeight;
+            canvasCtx?.drawImage(img, 0, 0);
+        };
+        img.addEventListener('load', drawImage);
+        return () => {
+            if (img.src)
+                URL.revokeObjectURL(img.src);
+            img.removeEventListener('load', drawImage);
+        };
+    });
+    const toggle = async () => {
+        if (activeName === undefined &&
+            readyState === 'active' &&
+            document.pictureInPictureElement === video) {
+            try {
+                await document.exitPictureInPicture();
+                readyState = 'inactive';
+                error = undefined;
+            }
+            catch (nextError) {
+                error = nextError;
+            }
+            return;
+        }
+        readyState = 'loading';
+        // Wait for the new stream's metadata to load before requesting PiP,
+        // otherwise the browser throws InvalidStateError.
+        if (video.readyState < 1 /* HAVE_METADATA */) {
+            await new Promise((resolve) => {
+                video.addEventListener('loadedmetadata', () => resolve(), { once: true });
+            });
+        }
+        try {
+            await video.requestPictureInPicture();
+            readyState = 'active';
+            error = undefined;
+        }
+        catch (nextError) {
+            error = nextError;
+        }
+    };
+    const context = {
+        async toggle(resourceName) {
+            activeName = activeName === resourceName ? undefined : resourceName;
+            await toggle();
+        },
+        setRate(newRate) {
+            rate = newRate;
+        },
+        get error() {
+            return error;
+        },
+        get readyState() {
+            return readyState;
+        },
+        get resourceName() {
+            return activeName;
+        },
+    };
+    setContext(PIP_KEY, context);
+    return context;
+}
+export function usePip() {
+    const ctx = getContext(PIP_KEY);
+    if (!ctx) {
+        throw new Error('usePipContext must be called after providePip()');
+    }
+    return ctx;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "Apache-2.0",
   "type": "module",
   "files": [