@viamrobotics/test-widgets 0.0.1

package/dist/components/widgets/movement-sensor/compass-heading.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { formatNumeric } from '../../../format'
+
+	interface Props {
+		data: number
+	}
+
+	const { data }: Props = $props()
+</script>
+
+<div class="flex items-center gap-3">
+	<svg
+		width="32"
+		height="32"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		class="transition-transform duration-1000 ease-in-out"
+		style:transform="rotate({data}deg)"
+	>
+		<circle
+			cx="16"
+			cy="16"
+			r="15.5"
+			fill="#fff"
+			stroke="#D7D7D9"
+		/>
+		<path
+			d="m16 3 2.6 4.5h-5.2L16 3Z"
+			fill="#BE3536"
+		/>
+		<path
+			d="m29 16-4.5 2.6v-5.2L29 16ZM3 16l4.5 2.6v-5.2L3 16Zm13 13 2.6-4.5h-5.2L16 29Z"
+			fill="#C5C6CC"
+		/>
+		<path
+			d="M17.2 10.2h1.2V16h-1.1l-2.7-4v4h-1.2v-5.8h1.1l2.7 3.8v-3.8Z"
+			fill="#BE3536"
+		/>
+	</svg>
+
+	<div class="text-subtle-1 font-mono">
+		{formatNumeric(data)}
+	</div>
+</div>

package/dist/components/widgets/movement-sensor/compass-heading.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    data: number;
+}
+declare const CompassHeading: import("svelte").Component<Props, {}, "">;
+type CompassHeading = ReturnType<typeof CompassHeading>;
+export default CompassHeading;

package/dist/components/widgets/movement-sensor/map.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { MovementSensorPosition } from '@viamrobotics/sdk'
+
+	import {
+		DirectionalMarker,
+		FollowControls,
+		MapLibre,
+		MapLibreMarker,
+		MapProviders,
+		NavigationControls,
+		SatelliteControls,
+	} from '../../maplibre'
+
+	import { safeReadCoordinate } from './safe-read-coordinate'
+
+	interface Props {
+		coordinate: MovementSensorPosition['coordinate']
+		rotation: number | undefined
+	}
+
+	const { coordinate, rotation }: Props = $props()
+
+	const lat = $derived(safeReadCoordinate(coordinate?.latitude))
+	const lng = $derived(safeReadCoordinate(coordinate?.longitude))
+</script>
+
+<div class="relative h-[300px] w-full lg:h-auto lg:w-1/2">
+	<MapLibre
+		zoom={15}
+		options={{ attributionControl: { compact: false } }}
+		mapProvider={MapProviders.googleMaps}
+		mapProviderKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
+	>
+		<div class="absolute top-2.5 right-12 z-10 flex items-center gap-2">
+			<SatelliteControls />
+			<NavigationControls />
+		</div>
+
+		{#if lat !== undefined && lng !== undefined && rotation !== undefined}
+			<DirectionalMarker
+				{lat}
+				{lng}
+				{rotation}
+			/>
+		{:else if lat !== undefined && lng !== undefined}
+			<MapLibreMarker
+				{lat}
+				{lng}
+			/>
+		{/if}
+		<div class="absolute right-3 bottom-7 z-10">
+			{#if lat !== undefined && lng !== undefined}
+				<FollowControls
+					following
+					{lat}
+					{lng}
+				/>
+			{/if}
+		</div>
+	</MapLibre>
+</div>

package/dist/components/widgets/movement-sensor/map.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MovementSensorPosition } from '@viamrobotics/sdk';
+interface Props {
+    coordinate: MovementSensorPosition['coordinate'];
+    rotation: number | undefined;
+}
+declare const Map: import("svelte").Component<Props, {}, "">;
+type Map = ReturnType<typeof Map>;
+export default Map;

package/dist/components/widgets/movement-sensor/movement-sensor.svelte

@@ -0,0 +1,255 @@
+<script lang="ts">
+	import { Switch } from '@viamrobotics/prime-core'
+	import { MovementSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+	import { slide } from 'svelte/transition'
+
+	import ConnectionStatus from '../../connection-status.svelte'
+	import Query from '../../query.svelte'
+	import ReadingsList from '../../readings-list.svelte'
+	import RefetchController from '../../refetch-controller.svelte'
+	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
+
+	import Accuracy from './accuracy.svelte'
+	import CompassHeading from './compass-heading.svelte'
+	import Map from './map.svelte'
+	import Orientation from './orientation.svelte'
+	import Position from './position.svelte'
+	import Vector3 from './vector3.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const refetchInterval = createRefetchIntervalStore(
+		() => partID,
+		() => resourceName,
+		'movement-sensor'
+	)
+	let showFullReadings = $state(false)
+
+	const onSetShowFullReadings = (event: CustomEvent<boolean>) => {
+		showFullReadings = event.detail
+	}
+
+	const client = createResourceClient(
+		MovementSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const propertiesQuery = createResourceQuery(client, 'getProperties', () => ({
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const positionQuery = createResourceQuery(client, 'getPosition', () => ({
+		enabled: propertiesQuery.data?.positionSupported === true,
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const orientationQuery = createResourceQuery(client, 'getOrientation', () => ({
+		enabled: propertiesQuery.data?.orientationSupported === true,
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const compassHeadingQuery = createResourceQuery(client, 'getCompassHeading', () => ({
+		enabled: propertiesQuery.data?.compassHeadingSupported === true,
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const angularVelocityQuery = createResourceQuery(client, 'getAngularVelocity', () => ({
+		enabled: propertiesQuery.data?.angularVelocitySupported === true,
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const linearVelocityQuery = createResourceQuery(client, 'getLinearVelocity', () => ({
+		enabled: propertiesQuery.data?.linearVelocitySupported === true,
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const linearAccelerationQuery = createResourceQuery(client, 'getLinearAcceleration', () => ({
+		enabled: propertiesQuery.data?.linearAccelerationSupported === true,
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const accuracyQuery = createResourceQuery(client, 'getAccuracy', () => ({
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const readingsQuery = createResourceQuery(client, 'getReadings', () => ({
+		enabled: showFullReadings,
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const headingID = $props.id()
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="p-4">
+			<RefetchController
+				{refetchInterval}
+				queries={[propertiesQuery, positionQuery]}
+			/>
+		</div>
+
+		<Query
+			query={propertiesQuery}
+			contentCx="p-4 h-14"
+		>
+			<div class="flex flex-wrap text-xs lg:flex-nowrap">
+				<div class="flex w-full flex-col gap-5 py-4 pr-6 pl-4 lg:w-1/4">
+					{#if propertiesQuery.data?.positionSupported}
+						<div class="flex flex-col gap-2">
+							<h3 class="font-semibold">GetPosition</h3>
+							<Query
+								query={positionQuery}
+								contentCx="h-6"
+							>
+								{#if positionQuery.data !== undefined}
+									<Position data={positionQuery.data} />
+								{/if}
+							</Query>
+						</div>
+					{/if}
+
+					{#if propertiesQuery.data?.orientationSupported}
+						<div class="flex flex-col gap-2">
+							<h3 class="font-semibold">
+								GetOrientation <span class="text-subtle-2 font-normal">(º)</span>
+							</h3>
+							<Query
+								query={orientationQuery}
+								contentCx="h-6"
+							>
+								{#if orientationQuery.data !== undefined}
+									<Orientation data={orientationQuery.data} />
+								{/if}
+							</Query>
+						</div>
+					{/if}
+
+					{#if propertiesQuery.data?.compassHeadingSupported}
+						<div class="flex flex-col gap-2">
+							<h3 class="font-semibold">
+								GetCompassHeading <span class="text-subtle-2 font-normal">(º)</span>
+							</h3>
+							<Query
+								query={compassHeadingQuery}
+								contentCx="h-6"
+							>
+								{#if compassHeadingQuery.data !== undefined}
+									<CompassHeading data={compassHeadingQuery.data} />
+								{/if}
+							</Query>
+						</div>
+					{/if}
+				</div>
+
+				<div class="flex w-full flex-col gap-5 p-4 lg:w-1/4">
+					{#if propertiesQuery.data?.angularVelocitySupported}
+						<div class="flex flex-col gap-2">
+							<h3 class="font-semibold">
+								GetAngularVelocity <span class="text-subtle-2 font-normal">(º/s)</span>
+							</h3>
+							<Query
+								query={angularVelocityQuery}
+								contentCx="h-6"
+							>
+								{#if angularVelocityQuery.data !== undefined}
+									<Vector3 data={angularVelocityQuery.data} />
+								{/if}
+							</Query>
+						</div>
+					{/if}
+
+					{#if propertiesQuery.data?.linearVelocitySupported}
+						<div class="flex flex-col gap-2">
+							<h3 class="font-semibold">
+								GetLinearVelocity <span class="text-subtle-2 font-normal">(m/s)</span>
+							</h3>
+							<Query
+								query={linearVelocityQuery}
+								contentCx="h-6"
+							>
+								{#if linearVelocityQuery.data !== undefined}
+									<Vector3 data={linearVelocityQuery.data} />
+								{/if}
+							</Query>
+						</div>
+					{/if}
+
+					{#if propertiesQuery.data?.linearAccelerationSupported}
+						<div class="flex flex-col gap-2">
+							<h3 class="font-semibold">
+								GetLinearAcceleration <span class="text-subtle-2 font-normal"
+									>(m/s<sup>2</sup>)</span
+								>
+							</h3>
+							<Query
+								query={linearAccelerationQuery}
+								contentCx="h-6"
+							>
+								{#if linearAccelerationQuery.data !== undefined}
+									<Vector3 data={linearAccelerationQuery.data} />
+								{/if}
+							</Query>
+						</div>
+					{/if}
+
+					<div class="flex flex-col gap-2">
+						<h3 class="font-semibold">GetAccuracy</h3>
+						<Query
+							query={accuracyQuery}
+							contentCx="h-6"
+						>
+							{#if accuracyQuery.data !== undefined}
+								<Accuracy data={accuracyQuery.data} />
+							{/if}
+						</Query>
+					</div>
+				</div>
+
+				{#if propertiesQuery.data?.positionSupported}
+					<Map
+						coordinate={positionQuery.data?.coordinate}
+						rotation={orientationQuery.data?.oZ}
+					/>
+				{/if}
+			</div>
+		</Query>
+
+		<section
+			class="flex flex-col gap-4 p-4"
+			aria-labelledby={headingID}
+		>
+			<div>
+				<h3
+					id={headingID}
+					class="pb-1.5 font-semibold"
+				>
+					GetReadings
+				</h3>
+				<p class="text-subtle-2 text-xs">Get all the measurements and data from the sensor</p>
+			</div>
+
+			<Switch
+				annotated
+				on:change={onSetShowFullReadings}
+			/>
+
+			{#if showFullReadings}
+				<div transition:slide={{ duration: 150 }}>
+					<Query query={readingsQuery}>
+						{#if readingsQuery.data !== undefined}
+							<ReadingsList data={readingsQuery.data} />
+						{/if}
+					</Query>
+				</div>
+			{/if}
+		</section>
+	{/snippet}
+</ConnectionStatus>

package/dist/components/widgets/movement-sensor/movement-sensor.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    partID: string;
+    resourceName: string;
+}
+declare const MovementSensor: import("svelte").Component<Props, {}, "">;
+type MovementSensor = ReturnType<typeof MovementSensor>;
+export default MovementSensor;

package/dist/components/widgets/movement-sensor/orientation.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { Orientation } from '@viamrobotics/sdk'
+
+	import { formatNumeric } from '../../../format'
+
+	interface Props {
+		data: Orientation
+	}
+
+	const { data }: Props = $props()
+</script>
+
+<dl class="flex flex-col gap-2">
+	<div class="flex flex-wrap gap-x-4 gap-y-2 font-mono">
+		<div>
+			<dt class="text-subtle-2 inline-block uppercase">x</dt>
+			<dd class="inline-block">
+				{formatNumeric(data.oX)}
+			</dd>
+		</div>
+
+		<div>
+			<dt class="text-subtle-2 inline-block uppercase">y</dt>
+			<dd class="inline-block">
+				{formatNumeric(data.oY)}
+			</dd>
+		</div>
+
+		<div>
+			<dt class="text-subtle-2 inline-block uppercase">z</dt>
+			<dd class="inline-block">
+				{formatNumeric(data.oZ)}
+			</dd>
+		</div>
+
+		<div>
+			<dt class="text-subtle-2 inline-block italic">θ</dt>
+			<dd class="inline-block">
+				{formatNumeric(data.theta)}
+			</dd>
+		</div>
+	</div>
+</dl>

package/dist/components/widgets/movement-sensor/orientation.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Orientation } from '@viamrobotics/sdk';
+interface Props {
+    data: Orientation;
+}
+declare const Orientation: import("svelte").Component<Props, {}, "">;
+type Orientation = ReturnType<typeof Orientation>;
+export default Orientation;

package/dist/components/widgets/movement-sensor/position.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { MovementSensorPosition } from '@viamrobotics/sdk'
+
+	import { formatNumeric } from '../../../format'
+
+	interface Props {
+		data: MovementSensorPosition
+	}
+
+	const { data }: Props = $props()
+</script>
+
+<dl class="flex flex-col gap-2 font-mono">
+	<div class="flex justify-between gap-2">
+		<dt class="text-subtle-1 uppercase">Lat</dt>
+		<dd>
+			{formatNumeric(data.coordinate?.latitude, 6)}
+		</dd>
+	</div>
+
+	<div class="flex justify-between gap-2">
+		<dt class="text-subtle-1 uppercase">Lng</dt>
+		<dd>
+			{formatNumeric(data.coordinate?.longitude, 6)}
+		</dd>
+	</div>
+
+	<div class="flex justify-between gap-2">
+		<dt class="text-subtle-1 uppercase">Alt (m)</dt>
+		<dd>{formatNumeric(data.altitudeM)}</dd>
+	</div>
+</dl>

package/dist/components/widgets/movement-sensor/position.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MovementSensorPosition } from '@viamrobotics/sdk';
+interface Props {
+    data: MovementSensorPosition;
+}
+declare const Position: import("svelte").Component<Props, {}, "">;
+type Position = ReturnType<typeof Position>;
+export default Position;

package/dist/components/widgets/movement-sensor/safe-read-coordinate.d.ts

@@ -0,0 +1 @@
+export declare const safeReadCoordinate: (coordinate: number | undefined) => number | undefined;

package/dist/components/widgets/movement-sensor/safe-read-coordinate.js

@@ -0,0 +1,6 @@
+export const safeReadCoordinate = (coordinate) => {
+    if (Number.isNaN(coordinate)) {
+        return undefined;
+    }
+    return coordinate;
+};

package/dist/components/widgets/movement-sensor/vector3.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Vector3 } from '@viamrobotics/sdk'
+
+	import { formatNumeric } from '../../../format'
+
+	interface Props {
+		data: Vector3
+	}
+
+	const { data }: Props = $props()
+</script>
+
+<dl class="flex flex-col gap-2">
+	<div class="flex flex-wrap gap-x-4 gap-y-2 font-mono">
+		<div>
+			<dt class="text-subtle-2 inline-block uppercase">x</dt>
+			<dd class="inline-block">
+				{formatNumeric(data.x)}
+			</dd>
+		</div>
+
+		<div>
+			<dt class="text-subtle-2 inline-block uppercase">y</dt>
+			<dd class="inline-block">
+				{formatNumeric(data.y)}
+			</dd>
+		</div>
+
+		<div>
+			<dt class="text-subtle-2 inline-block uppercase">z</dt>
+			<dd class="inline-block">
+				{formatNumeric(data.z)}
+			</dd>
+		</div>
+	</div>
+</dl>

package/dist/components/widgets/movement-sensor/vector3.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Vector3 } from '@viamrobotics/sdk';
+interface Props {
+    data: Vector3;
+}
+declare const Vector3: import("svelte").Component<Props, {}, "">;
+type Vector3 = ReturnType<typeof Vector3>;
+export default Vector3;

package/dist/components/widgets/navigation/directional-marker.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { NavigationPosition } from '@viamrobotics/sdk'
+
+	import { DirectionalMarker, FollowControls } from '../../maplibre'
+
+	interface Props {
+		position: NavigationPosition
+	}
+
+	const { position }: Props = $props()
+</script>
+
+<div class="absolute right-4 bottom-12 z-10">
+	<FollowControls
+		lat={position.location?.latitude}
+		lng={position.location?.longitude}
+	/>
+</div>
+
+{#if position.location}
+	<DirectionalMarker
+		lat={position.location.latitude}
+		lng={position.location.longitude}
+		rotation={position.compassHeading}
+	/>
+{/if}

package/dist/components/widgets/navigation/directional-marker.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { NavigationPosition } from '@viamrobotics/sdk';
+import { DirectionalMarker } from '../../maplibre';
+interface Props {
+    position: NavigationPosition;
+}
+declare const DirectionalMarker: import("svelte").Component<Props, {}, "">;
+type DirectionalMarker = ReturnType<typeof DirectionalMarker>;
+export default DirectionalMarker;