@viamrobotics/test-widgets 0.1.10 → 0.1.11

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.
@@ -30,6 +30,14 @@
30
30
  () => resourceName,
31
31
  'camera'
32
32
  )
33
+ let isPlaying = $state(false)
34
+ $effect(() => {
35
+ // Reset the play gate whenever the camera identity changes so a swapped
36
+ // resource doesn't auto-start using the previous instance's state.
37
+ void resourceName
38
+ void partID
39
+ isPlaying = false
40
+ })
33
41
  let isShowingPointcloud = $state(false)
34
42
  let selectedSource = $state('')
35
43
  let sourceNames = $state<string[]>([])
@@ -50,7 +58,7 @@
50
58
  'getImages',
51
59
  () => (selectedSource ? ([[selectedSource]] as [string[]]) : ([] as [])),
52
60
  () => ({
53
- enabled: refetchInterval.current !== RefetchIntervals.LIVE,
61
+ enabled: isPlaying && refetchInterval.current !== RefetchIntervals.LIVE,
54
62
  refetchInterval: refetchInterval.current,
55
63
  })
56
64
  )
@@ -106,95 +114,113 @@
106
114
 
107
115
  <ConnectionStatus {partID}>
108
116
  {#snippet connected()}
109
- <div class="flex gap-4 p-4 pb-3">
110
- <RefetchController
111
- {refetchInterval}
112
- allowLive
113
- queries={[imageQuery, pointcloudQuery]}
114
- />
115
- {#if sourceNames.length > 0 && refetchInterval.current !== RefetchIntervals.LIVE}
116
- <Label position="left">
117
- Source
118
- <Select
119
- value={selectedSource}
120
- on:change={onSourceSelect}
121
- slot="input"
122
- >
123
- {#each sourceNames as name (name)}
124
- <option value={name}>{name}</option>
125
- {/each}
126
- </Select>
127
- </Label>
128
- {/if}
129
- </div>
130
- <div class="flex h-full w-full gap-4 p-4">
131
- <div class="grow">
132
- <LiveOrPollingVideo
133
- {partID}
134
- {resourceName}
135
- showResolutionOptions
136
- isLive={refetchInterval.current === RefetchIntervals.LIVE}
137
- data={imageQuery.data}
138
- error={imageQuery.error}
139
- isLoading={imageQuery.isLoading}
140
- refetch={imageQuery.refetch}
141
- showMousePositionTooltip={mousePostionTooltip === 'On'}
117
+ {#if isPlaying}
118
+ <div class="flex gap-4 p-4 pb-3">
119
+ <RefetchController
120
+ {refetchInterval}
121
+ allowLive
122
+ queries={[imageQuery, pointcloudQuery]}
142
123
  />
143
- </div>
144
- <div class="flex flex-col items-start gap-2">
145
- <ExportScreenshot
146
- name={client.current?.name ?? ''}
147
- getImage={exportScreenshotQuery.refetch}
148
- />
149
- {#if addImageToDataset}
150
- <Button
151
- icon="layers-triple-outline"
152
- onclick={async () => {
153
- let imgData
154
- if (refetchInterval.current === RefetchIntervals.LIVE) {
155
- const { isSuccess, data } = await imageQuery.refetch()
156
- if (!isSuccess) return
157
- imgData = data
158
- } else {
159
- imgData = imageQuery.data
160
- }
161
-
162
- const image = imgData?.images?.[0]?.image
163
- const mimeType = imgData?.images?.[0]?.mimeType
164
-
165
- if (image) {
166
- addImageToDataset({
167
- binaryData: new Uint8Array(image),
168
- partID,
169
- componentType: 'camera',
170
- componentName: resourceName,
171
- methodName: 'captureAllFromCamera',
172
- mimeType: mimeType ?? 'image/png',
173
- dataRequestTimes: [new Date(), new Date()],
174
- })
175
- }
176
- }}
177
- >
178
- Add current image to dataset
179
- </Button>
124
+ {#if sourceNames.length > 0 && refetchInterval.current !== RefetchIntervals.LIVE}
125
+ <Label position="left">
126
+ Source
127
+ <Select
128
+ value={selectedSource}
129
+ on:change={onSourceSelect}
130
+ slot="input"
131
+ >
132
+ {#each sourceNames as name (name)}
133
+ <option value={name}>{name}</option>
134
+ {/each}
135
+ </Select>
136
+ </Label>
180
137
  {/if}
181
- {#if !isFirefox}
182
- <PictureInPictureButton
138
+ </div>
139
+ {/if}
140
+ <div class="flex h-full w-full gap-4 p-4">
141
+ <div class="grow">
142
+ {#if isPlaying}
143
+ <LiveOrPollingVideo
144
+ {partID}
183
145
  {resourceName}
184
- rate={refetchInterval.current}
146
+ showResolutionOptions
147
+ isLive={refetchInterval.current === RefetchIntervals.LIVE}
148
+ data={imageQuery.data}
149
+ error={imageQuery.error}
150
+ isLoading={imageQuery.isLoading}
151
+ refetch={imageQuery.refetch}
152
+ showMousePositionTooltip={mousePostionTooltip === 'On'}
185
153
  />
154
+ {:else}
155
+ <div class="bg-medium flex h-64 w-80 items-center justify-center">
156
+ <Button
157
+ icon="play-circle-outline"
158
+ variant="dark"
159
+ onclick={() => {
160
+ isPlaying = true
161
+ }}
162
+ >
163
+ Start feed
164
+ </Button>
165
+ </div>
186
166
  {/if}
187
- <Label>
188
- Mouse Position Tooltip
189
-
190
- <ToggleButtons
191
- slot="input"
192
- options={['On', 'Off']}
193
- selected={mousePostionTooltip}
194
- on:input={setMousePostionTooltip}
195
- />
196
- </Label>
197
167
  </div>
168
+ {#if isPlaying}
169
+ <div class="flex flex-col items-start gap-2">
170
+ <ExportScreenshot
171
+ name={client.current?.name ?? ''}
172
+ getImage={exportScreenshotQuery.refetch}
173
+ />
174
+ {#if addImageToDataset}
175
+ <Button
176
+ icon="layers-triple-outline"
177
+ onclick={async () => {
178
+ let imgData
179
+ if (refetchInterval.current === RefetchIntervals.LIVE) {
180
+ const { isSuccess, data } = await imageQuery.refetch()
181
+ if (!isSuccess) return
182
+ imgData = data
183
+ } else {
184
+ imgData = imageQuery.data
185
+ }
186
+
187
+ const image = imgData?.images?.[0]?.image
188
+ const mimeType = imgData?.images?.[0]?.mimeType
189
+
190
+ if (image) {
191
+ addImageToDataset({
192
+ binaryData: new Uint8Array(image),
193
+ partID,
194
+ componentType: 'camera',
195
+ componentName: resourceName,
196
+ methodName: 'captureAllFromCamera',
197
+ mimeType: mimeType ?? 'image/png',
198
+ dataRequestTimes: [new Date(), new Date()],
199
+ })
200
+ }
201
+ }}
202
+ >
203
+ Add current image to dataset
204
+ </Button>
205
+ {/if}
206
+ {#if !isFirefox}
207
+ <PictureInPictureButton
208
+ {resourceName}
209
+ rate={refetchInterval.current}
210
+ />
211
+ {/if}
212
+ <Label>
213
+ Mouse Position Tooltip
214
+
215
+ <ToggleButtons
216
+ slot="input"
217
+ options={['On', 'Off']}
218
+ selected={mousePostionTooltip}
219
+ on:input={setMousePostionTooltip}
220
+ />
221
+ </Label>
222
+ </div>
223
+ {/if}
198
224
  </div>
199
225
 
200
226
  <section
@@ -130,6 +130,12 @@
130
130
  on:change={onCameraSelect}
131
131
  slot="input"
132
132
  >
133
+ <option
134
+ value=""
135
+ selected={cameraName === ''}
136
+ >
137
+ Default camera
138
+ </option>
133
139
  {#each cameras.current as { name } (name)}
134
140
  <option
135
141
  selected={cameraName === name}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@viamrobotics/test-widgets",
3
- "version": "0.1.10",
3
+ "version": "0.1.11",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "files": [
@@ -41,71 +41,71 @@
41
41
  "threlte-uikit": ">=2"
42
42
  },
43
43
  "devDependencies": {
44
- "@changesets/cli": "^2.30.0",
44
+ "@changesets/cli": "^2.31.0",
45
45
  "@eslint/compat": "^2.0.5",
46
46
  "@eslint/js": "^10.0.1",
47
47
  "@fontsource-variable/public-sans": "^5.2.7",
48
48
  "@fontsource-variable/roboto-mono": "^5.2.8",
49
49
  "@fontsource-variable/space-grotesk": "^5.2.10",
50
50
  "@playwright/test": "^1.59.1",
51
- "@sentry/svelte": "^10.48.0",
51
+ "@sentry/svelte": "^10.50.0",
52
52
  "@sveltejs/adapter-static": "^3.0.10",
53
- "@sveltejs/kit": "^2.57.1",
53
+ "@sveltejs/kit": "^2.58.0",
54
54
  "@sveltejs/package": "^2.5.7",
55
55
  "@sveltejs/vite-plugin-svelte": "^7.0.0",
56
- "@tailwindcss/postcss": "^4.2.2",
57
- "@tailwindcss/vite": "^4.2.2",
58
- "@tanstack/svelte-query": "^6.1.16",
59
- "@tanstack/svelte-query-devtools": "^6.1.16",
56
+ "@tailwindcss/postcss": "^4.2.4",
57
+ "@tailwindcss/vite": "^4.2.4",
58
+ "@tanstack/svelte-query": "^6.1.24",
59
+ "@tanstack/svelte-query-devtools": "^6.1.24",
60
60
  "@testing-library/dom": "^10.4.1",
61
61
  "@testing-library/jest-dom": "^6.9.1",
62
62
  "@testing-library/svelte": "^5.3.1",
63
63
  "@testing-library/user-event": "^14.6.1",
64
64
  "@threlte/core": "^8.5.9",
65
- "@threlte/extras": "^9.14.6",
66
- "@threlte/test": "^2.0.2",
65
+ "@threlte/extras": "^9.15.0",
66
+ "@threlte/test": "^2.1.0",
67
67
  "@types/lodash-es": "^4.17.12",
68
- "@types/node": "^25",
68
+ "@types/node": "^25.6.0",
69
69
  "@types/three": "^0.183.1",
70
- "@viamrobotics/motion-tools": "^1.18.1",
71
- "@viamrobotics/prime-core": "^0.1.16",
70
+ "@viamrobotics/motion-tools": "^1.19.1",
71
+ "@viamrobotics/prime-core": "^0.1.19",
72
72
  "@viamrobotics/prime-editor": "^0.0.2",
73
73
  "@viamrobotics/sdk": "^0.68.2",
74
- "@viamrobotics/svelte-sdk": "^1.1.6",
74
+ "@viamrobotics/svelte-sdk": "^1.2.1",
75
75
  "@viamrobotics/tailwind-config": "^1.0.0",
76
76
  "@viamrobotics/three": "^0.0.9",
77
- "@vitest/browser": "^4.1.4",
78
- "@vitest/browser-playwright": "^4.1.4",
79
- "@vitest/coverage-v8": "^4.1.4",
80
- "eslint": "^10.2.0",
77
+ "@vitest/browser": "^4.1.5",
78
+ "@vitest/browser-playwright": "^4.1.5",
79
+ "@vitest/coverage-v8": "^4.1.5",
80
+ "eslint": "^10.2.1",
81
81
  "eslint-config-prettier": "^10.1.8",
82
- "eslint-plugin-perfectionist": "^5.8.0",
83
- "eslint-plugin-svelte": "^3.17.0",
82
+ "eslint-plugin-perfectionist": "^5.9.0",
83
+ "eslint-plugin-svelte": "^3.17.1",
84
84
  "eslint-plugin-unicorn": "^64.0.0",
85
85
  "globals": "^17.5.0",
86
86
  "lodash-es": "^4.18.1",
87
- "maplibre-gl": "^5.23.0",
87
+ "maplibre-gl": "^5.24.0",
88
88
  "mock-match-media": "^1.0.3",
89
89
  "playwright": "^1.59.1",
90
90
  "prettier": "^3.8.3",
91
91
  "prettier-plugin-svelte": "^3.5.1",
92
- "prettier-plugin-tailwindcss": "^0.7.2",
92
+ "prettier-plugin-tailwindcss": "^0.7.4",
93
93
  "publint": "^0.3.18",
94
94
  "runed": "^0.37.1",
95
- "svelte": "^5.55.4",
95
+ "svelte": "^5.55.5",
96
96
  "svelte-check": "^4.4.6",
97
97
  "svelte-splitpanes": "^8.0.12",
98
98
  "tailwind-merge": "^3.5.0",
99
- "tailwindcss": "^4.2.2",
99
+ "tailwindcss": "^4.2.4",
100
100
  "three": "^0.183.2",
101
101
  "threlte-uikit": "^2.0.0",
102
- "type-fest": "^5.5.0",
103
- "typescript": "^6.0.2",
104
- "typescript-eslint": "^8.58.2",
105
- "vite": "^8.0.8",
102
+ "type-fest": "^5.6.0",
103
+ "typescript": "^6.0.3",
104
+ "typescript-eslint": "^8.59.1",
105
+ "vite": "^8.0.10",
106
106
  "vite-plugin-devtools-json": "^1.0.0",
107
107
  "vite-plugin-glsl": "^1.6.0",
108
- "vitest": "^4.1.4",
108
+ "vitest": "^4.1.5",
109
109
  "vitest-browser-svelte": "^2.1.1"
110
110
  },
111
111
  "engines": {