@viamrobotics/test-widgets 0.11.1 → 0.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/widgets/arm/arm.svelte +67 -65
- package/dist/components/widgets/camera/live-or-polling-video.svelte +1 -1
- package/dist/components/widgets/encoder/encoder.svelte +36 -34
- package/dist/components/widgets/input-controller/input-controller.svelte +1 -1
- package/dist/components/widgets/ml-model-service/ml-model-service.svelte +1 -1
- package/dist/components/widgets/operations-and-sessions/operations-table.svelte +53 -44
- package/dist/components/widgets/operations-and-sessions/sessions-table.svelte +45 -36
- package/dist/components/widgets/power-sensor/power-sensor.svelte +42 -40
- package/package.json +1 -1
|
@@ -57,75 +57,77 @@
|
|
|
57
57
|
|
|
58
58
|
<ConnectionStatus {partID}>
|
|
59
59
|
{#snippet connected()}
|
|
60
|
-
<div class="
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<ApiSection
|
|
66
|
-
title="GetJointPositions"
|
|
67
|
-
api="rdk:component:arm"
|
|
68
|
-
bottomText="Updates automatically"
|
|
60
|
+
<div class="@container">
|
|
61
|
+
<div class="flex flex-col gap-4 @2xl:flex-row @2xl:gap-0 @2xl:divide-x">
|
|
62
|
+
<!-- Main control sections -->
|
|
63
|
+
<div
|
|
64
|
+
class="flex flex-col gap-4 @2xl:grid @2xl:grow @2xl:grid-cols-2 @2xl:gap-0 @2xl:divide-x @4xl:grid-cols-3"
|
|
69
65
|
>
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
66
|
+
<ApiSection
|
|
67
|
+
title="GetJointPositions"
|
|
68
|
+
api="rdk:component:arm"
|
|
69
|
+
bottomText="Updates automatically"
|
|
70
|
+
>
|
|
71
|
+
<Query query={jointPositionsQuery}>
|
|
72
|
+
{#if jointPositionsQuery.data}
|
|
73
|
+
<GetJointPositions positions={jointPositionsQuery.data.values} />
|
|
74
|
+
{/if}
|
|
75
|
+
</Query>
|
|
76
|
+
</ApiSection>
|
|
77
|
+
<ApiSection
|
|
78
|
+
title="MoveToJointPositions"
|
|
79
|
+
api="rdk:component:arm"
|
|
80
|
+
>
|
|
81
|
+
<Query query={jointPositionsQuery}>
|
|
82
|
+
{#if jointPositionsQuery.data}
|
|
83
|
+
<MoveToJointPositions
|
|
84
|
+
positions={jointPositionsQuery.data.values}
|
|
85
|
+
{moveToJointPositions}
|
|
86
|
+
lastError={moveToJointPosMutation.error}
|
|
87
|
+
{jointLimitsDegrees}
|
|
88
|
+
isMoving={isMovingQuery.data ?? false}
|
|
89
|
+
/>
|
|
90
|
+
{/if}
|
|
91
|
+
</Query>
|
|
92
|
+
</ApiSection>
|
|
93
|
+
<ApiSection
|
|
94
|
+
title="MoveToPosition"
|
|
95
|
+
api="rdk:component:arm"
|
|
96
|
+
>
|
|
97
|
+
<Query query={endPositionQuery}>
|
|
98
|
+
{#if endPositionQuery.data}
|
|
99
|
+
<MoveToPosition
|
|
100
|
+
endPosition={endPositionQuery.data}
|
|
101
|
+
{moveToPosition}
|
|
102
|
+
lastError={moveToPosMutation.error}
|
|
103
|
+
/>
|
|
104
|
+
{/if}
|
|
105
|
+
</Query>
|
|
106
|
+
</ApiSection>
|
|
107
|
+
</div>
|
|
107
108
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
>
|
|
112
|
-
<ApiSection
|
|
113
|
-
title="Stop"
|
|
114
|
-
api="rdk:component:arm"
|
|
109
|
+
<!-- Control actions sidebar -->
|
|
110
|
+
<div
|
|
111
|
+
class="flex flex-row gap-4 @2xl:ml-auto @2xl:w-full @2xl:max-w-40 @2xl:flex-col @2xl:gap-0 @2xl:divide-y"
|
|
115
112
|
>
|
|
116
|
-
<
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
113
|
+
<ApiSection
|
|
114
|
+
title="Stop"
|
|
115
|
+
api="rdk:component:arm"
|
|
116
|
+
>
|
|
117
|
+
<StopButton
|
|
118
|
+
error={stopMutation.error}
|
|
119
|
+
onStop={() => {
|
|
120
|
+
stopMutation.mutate([], {})
|
|
121
|
+
}}
|
|
122
|
+
/>
|
|
123
|
+
</ApiSection>
|
|
124
|
+
<IsMoving
|
|
125
|
+
client={ArmClient}
|
|
126
|
+
api="rdk:component:arm"
|
|
127
|
+
{partID}
|
|
128
|
+
{resourceName}
|
|
121
129
|
/>
|
|
122
|
-
</
|
|
123
|
-
<IsMoving
|
|
124
|
-
client={ArmClient}
|
|
125
|
-
api="rdk:component:arm"
|
|
126
|
-
{partID}
|
|
127
|
-
{resourceName}
|
|
128
|
-
/>
|
|
130
|
+
</div>
|
|
129
131
|
</div>
|
|
130
132
|
</div>
|
|
131
133
|
{/snippet}
|
|
@@ -405,7 +405,7 @@
|
|
|
405
405
|
lastError={resolutionMutation.error}
|
|
406
406
|
class="-m-4 mt-4"
|
|
407
407
|
>
|
|
408
|
-
<div class="flex w-full flex-
|
|
408
|
+
<div class="flex w-full flex-wrap justify-between gap-2">
|
|
409
409
|
<Label cx="max-w-[96px] gap-1 text-xs">
|
|
410
410
|
<span class="flex gap-1 whitespace-nowrap">
|
|
411
411
|
Resolution
|
|
@@ -61,42 +61,44 @@
|
|
|
61
61
|
/>
|
|
62
62
|
</div>
|
|
63
63
|
|
|
64
|
-
<div class="
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
{
|
|
73
|
-
{
|
|
74
|
-
|
|
75
|
-
<
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
64
|
+
<div class="@container">
|
|
65
|
+
<div class="grid w-full grid-cols-1 divide-y @lg:grid-cols-2 @lg:divide-x @lg:divide-y-0">
|
|
66
|
+
<ApiSection
|
|
67
|
+
title="GetPosition"
|
|
68
|
+
api="rdk:component:encoder"
|
|
69
|
+
tooltip="Relative encoders return ticks since last zeroing. Absolute encoders return degrees."
|
|
70
|
+
class="gap-3"
|
|
71
|
+
>
|
|
72
|
+
<Queries queries={[propertiesQuery, positionQuery]}>
|
|
73
|
+
{#if positionQuery.data !== undefined}
|
|
74
|
+
{@const [position, encoderPositionType] = positionQuery.data}
|
|
75
|
+
<div class="font-roboto-mono flex flex-col gap-2 text-sm">
|
|
76
|
+
<Position
|
|
77
|
+
{position}
|
|
78
|
+
{encoderPositionType}
|
|
79
|
+
/>
|
|
80
|
+
</div>
|
|
81
|
+
{/if}
|
|
82
|
+
</Queries>
|
|
83
|
+
</ApiSection>
|
|
83
84
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
>
|
|
89
|
-
<Button
|
|
90
|
-
icon="play-circle-outline"
|
|
91
|
-
class="w-fit"
|
|
92
|
-
onclick={() => {
|
|
93
|
-
resetMutation.mutate([], {})
|
|
94
|
-
}}
|
|
85
|
+
<ApiSection
|
|
86
|
+
title="ResetPosition"
|
|
87
|
+
api="rdk:component:encoder"
|
|
88
|
+
description="Set the current position as the new zero position"
|
|
95
89
|
>
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
90
|
+
<Button
|
|
91
|
+
icon="play-circle-outline"
|
|
92
|
+
class="w-fit"
|
|
93
|
+
onclick={() => {
|
|
94
|
+
resetMutation.mutate([], {})
|
|
95
|
+
}}
|
|
96
|
+
>
|
|
97
|
+
Execute
|
|
98
|
+
</Button>
|
|
99
|
+
<ErrorDisplay lastError={resetMutation.error} />
|
|
100
|
+
</ApiSection>
|
|
101
|
+
</div>
|
|
100
102
|
</div>
|
|
101
103
|
{/snippet}
|
|
102
104
|
</ConnectionStatus>
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
|
|
40
40
|
<ConnectionStatus {partID}>
|
|
41
41
|
{#snippet connected()}
|
|
42
|
-
<div class="flex flex-
|
|
42
|
+
<div class="flex flex-wrap items-center justify-between gap-2 p-4 pb-3">
|
|
43
43
|
<RefetchController
|
|
44
44
|
{refetchInterval}
|
|
45
45
|
queries={[eventsQuery]}
|
|
@@ -34,49 +34,58 @@
|
|
|
34
34
|
{#if formattedOperations.length === 0}
|
|
35
35
|
<p class="text-subtle-2 text-xs">No operations currently available</p>
|
|
36
36
|
{:else}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
>{operation.id}
|
|
54
|
-
</td>
|
|
55
|
-
<td
|
|
56
|
-
class="truncate p-2"
|
|
57
|
-
title={operation.sessionId}
|
|
58
|
-
>{operation.sessionId}
|
|
59
|
-
</td>
|
|
60
|
-
<td
|
|
61
|
-
class="truncate p-2"
|
|
62
|
-
title={operation.method}
|
|
63
|
-
>{operation.method}
|
|
64
|
-
</td>
|
|
65
|
-
<td
|
|
66
|
-
class="truncate p-2"
|
|
67
|
-
title={`${formatNumeric(operation.elapsedTime, 0)} ms`}
|
|
68
|
-
>
|
|
69
|
-
{formatNumeric(operation.elapsedTime, 0)} ms
|
|
70
|
-
</td>
|
|
71
|
-
<td class="p-2">
|
|
72
|
-
<Tooltip hoverDelayMS={500}>
|
|
73
|
-
<Button onclick={() => cancelOperation(operation.id)}>Kill</Button>
|
|
74
|
-
|
|
75
|
-
<span slot="description"> Request cancellation of the operation. </span>
|
|
76
|
-
</Tooltip>
|
|
77
|
-
</td>
|
|
37
|
+
<!-- Scroll region: keyboard users need focus on the wrapper to scroll the overflow (WCAG 2.1.1). -->
|
|
38
|
+
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
|
39
|
+
<div
|
|
40
|
+
class="overflow-x-auto"
|
|
41
|
+
role="region"
|
|
42
|
+
aria-label="Operations"
|
|
43
|
+
tabindex="0"
|
|
44
|
+
>
|
|
45
|
+
<table class="w-full min-w-md table-fixed">
|
|
46
|
+
<thead>
|
|
47
|
+
<tr class="bg-light text-subtle-1 border text-left text-xs">
|
|
48
|
+
<th class="w-1/4 p-2 font-normal">ID</th>
|
|
49
|
+
<th class="w-1/4 p-2 font-normal">Session</th>
|
|
50
|
+
<th class="w-1/4 p-2 font-normal">Method</th>
|
|
51
|
+
<th class="w-1/6 p-2 font-normal">Elapsed Time</th>
|
|
52
|
+
<th class="w-16"></th>
|
|
78
53
|
</tr>
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
54
|
+
</thead>
|
|
55
|
+
<tbody class="text-xs">
|
|
56
|
+
{#each formattedOperations as operation (operation.id)}
|
|
57
|
+
<tr class="border border-b text-left">
|
|
58
|
+
<td
|
|
59
|
+
class="truncate p-2"
|
|
60
|
+
title={operation.id}
|
|
61
|
+
>{operation.id}
|
|
62
|
+
</td>
|
|
63
|
+
<td
|
|
64
|
+
class="truncate p-2"
|
|
65
|
+
title={operation.sessionId}
|
|
66
|
+
>{operation.sessionId}
|
|
67
|
+
</td>
|
|
68
|
+
<td
|
|
69
|
+
class="truncate p-2"
|
|
70
|
+
title={operation.method}
|
|
71
|
+
>{operation.method}
|
|
72
|
+
</td>
|
|
73
|
+
<td
|
|
74
|
+
class="truncate p-2"
|
|
75
|
+
title={`${formatNumeric(operation.elapsedTime, 0)} ms`}
|
|
76
|
+
>
|
|
77
|
+
{formatNumeric(operation.elapsedTime, 0)} ms
|
|
78
|
+
</td>
|
|
79
|
+
<td class="p-2">
|
|
80
|
+
<Tooltip hoverDelayMS={500}>
|
|
81
|
+
<Button onclick={() => cancelOperation(operation.id)}>Kill</Button>
|
|
82
|
+
|
|
83
|
+
<span slot="description"> Request cancellation of the operation. </span>
|
|
84
|
+
</Tooltip>
|
|
85
|
+
</td>
|
|
86
|
+
</tr>
|
|
87
|
+
{/each}
|
|
88
|
+
</tbody>
|
|
89
|
+
</table>
|
|
90
|
+
</div>
|
|
82
91
|
{/if}
|
|
@@ -38,41 +38,50 @@
|
|
|
38
38
|
{#if flattenedSessions.length === 0}
|
|
39
39
|
<p class="text-subtle-2 text-xs">No sessions currently available</p>
|
|
40
40
|
{:else}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
>
|
|
57
|
-
{session.id}
|
|
58
|
-
{#if session.id === ourSessionId}
|
|
59
|
-
<div class="text-subtle-2 text-xs">(Ours)</div>
|
|
60
|
-
{/if}
|
|
61
|
-
</td>
|
|
62
|
-
<td class="truncate p-2">{session.typeString}</td>
|
|
63
|
-
<td
|
|
64
|
-
class="truncate p-2"
|
|
65
|
-
title={session.remoteAddress}
|
|
66
|
-
>{session.remoteAddress}
|
|
67
|
-
</td>
|
|
68
|
-
<td
|
|
69
|
-
class="truncate p-2"
|
|
70
|
-
title={session.localAddress}
|
|
71
|
-
>
|
|
72
|
-
{session.localAddress}
|
|
73
|
-
</td>
|
|
41
|
+
<!-- Scroll region: keyboard users need focus on the wrapper to scroll the overflow (WCAG 2.1.1). -->
|
|
42
|
+
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
|
43
|
+
<div
|
|
44
|
+
class="overflow-x-auto"
|
|
45
|
+
role="region"
|
|
46
|
+
aria-label="Sessions"
|
|
47
|
+
tabindex="0"
|
|
48
|
+
>
|
|
49
|
+
<table class="w-full min-w-md table-fixed">
|
|
50
|
+
<thead>
|
|
51
|
+
<tr class="bg-light text-subtle-1 border text-left text-xs">
|
|
52
|
+
<th class="w-1/4 p-2 font-normal">ID</th>
|
|
53
|
+
<th class="w-1/8 p-2 font-normal">Type</th>
|
|
54
|
+
<th class="w-1/4 p-2 font-normal">Remote Address</th>
|
|
55
|
+
<th class="w-1/4 p-2 font-normal">Local Address</th>
|
|
74
56
|
</tr>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
57
|
+
</thead>
|
|
58
|
+
<tbody class="text-xs">
|
|
59
|
+
{#each flattenedSessions as session (session.id)}
|
|
60
|
+
<tr class="border border-b text-left">
|
|
61
|
+
<td
|
|
62
|
+
class="truncate p-2 text-left"
|
|
63
|
+
title={session.id}
|
|
64
|
+
>
|
|
65
|
+
{session.id}
|
|
66
|
+
{#if session.id === ourSessionId}
|
|
67
|
+
<div class="text-subtle-2 text-xs">(Ours)</div>
|
|
68
|
+
{/if}
|
|
69
|
+
</td>
|
|
70
|
+
<td class="truncate p-2">{session.typeString}</td>
|
|
71
|
+
<td
|
|
72
|
+
class="truncate p-2"
|
|
73
|
+
title={session.remoteAddress}
|
|
74
|
+
>{session.remoteAddress}
|
|
75
|
+
</td>
|
|
76
|
+
<td
|
|
77
|
+
class="truncate p-2"
|
|
78
|
+
title={session.localAddress}
|
|
79
|
+
>
|
|
80
|
+
{session.localAddress}
|
|
81
|
+
</td>
|
|
82
|
+
</tr>
|
|
83
|
+
{/each}
|
|
84
|
+
</tbody>
|
|
85
|
+
</table>
|
|
86
|
+
</div>
|
|
78
87
|
{/if}
|
|
@@ -63,49 +63,51 @@
|
|
|
63
63
|
/>
|
|
64
64
|
</div>
|
|
65
65
|
|
|
66
|
-
<div class="
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<Query
|
|
73
|
-
query={currentQuery}
|
|
74
|
-
contentCx="h-6"
|
|
66
|
+
<div class="@container">
|
|
67
|
+
<div class="grid w-full grid-cols-1 divide-y @2xl:grid-cols-3 @2xl:divide-x @2xl:divide-y-0">
|
|
68
|
+
<ApiSection
|
|
69
|
+
title="GetCurrent"
|
|
70
|
+
api="rdk:component:power_sensor"
|
|
71
|
+
class="pb-5"
|
|
75
72
|
>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
73
|
+
<Query
|
|
74
|
+
query={currentQuery}
|
|
75
|
+
contentCx="h-6"
|
|
76
|
+
>
|
|
77
|
+
{#if currentQuery.data !== undefined}
|
|
78
|
+
<CurrentReading data={currentQuery.data} />
|
|
79
|
+
{/if}
|
|
80
|
+
</Query>
|
|
81
|
+
</ApiSection>
|
|
82
|
+
<ApiSection
|
|
83
|
+
title="GetVoltage"
|
|
84
|
+
api="rdk:component:power_sensor"
|
|
85
|
+
class="pb-5"
|
|
89
86
|
>
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
87
|
+
<Query
|
|
88
|
+
query={voltageQuery}
|
|
89
|
+
contentCx="h-6"
|
|
90
|
+
>
|
|
91
|
+
{#if voltageQuery.data !== undefined}
|
|
92
|
+
<VoltageReading data={voltageQuery.data} />
|
|
93
|
+
{/if}
|
|
94
|
+
</Query>
|
|
95
|
+
</ApiSection>
|
|
96
|
+
<ApiSection
|
|
97
|
+
title="GetPower"
|
|
98
|
+
api="rdk:component:power_sensor"
|
|
99
|
+
class="pb-5"
|
|
103
100
|
>
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
101
|
+
<Query
|
|
102
|
+
query={powerQuery}
|
|
103
|
+
contentCx="h-6"
|
|
104
|
+
>
|
|
105
|
+
{#if powerQuery.data !== undefined}
|
|
106
|
+
<PowerReading data={powerQuery.data} />
|
|
107
|
+
{/if}
|
|
108
|
+
</Query>
|
|
109
|
+
</ApiSection>
|
|
110
|
+
</div>
|
|
109
111
|
</div>
|
|
110
112
|
|
|
111
113
|
<ApiSection
|