@jspsych/plugin-tobii-calibration 0.1.1
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/README.md +137 -0
- package/dist/index.browser.js +840 -0
- package/dist/index.browser.js.map +1 -0
- package/dist/index.browser.min.js +206 -0
- package/dist/index.browser.min.js.map +1 -0
- package/dist/index.cjs +839 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +300 -0
- package/dist/index.js +837 -0
- package/dist/index.js.map +1 -0
- package/package.json +54 -0
- package/src/calibration-display.d.ts +78 -0
- package/src/calibration-display.d.ts.map +1 -0
- package/src/calibration-display.js +293 -0
- package/src/calibration-display.js.map +1 -0
- package/src/calibration-display.ts +359 -0
- package/src/index.d.ts +297 -0
- package/src/index.d.ts.map +1 -0
- package/src/index.js +597 -0
- package/src/index.js.map +1 -0
- package/src/index.spec.d.ts +2 -0
- package/src/index.spec.d.ts.map +1 -0
- package/src/index.spec.js +125 -0
- package/src/index.spec.js.map +1 -0
- package/src/index.spec.ts +156 -0
- package/src/index.ts +646 -0
- package/src/types.d.ts +52 -0
- package/src/types.d.ts.map +1 -0
- package/src/types.js +5 -0
- package/src/types.js.map +1 -0
- package/src/types.ts +53 -0
package/src/index.ts
ADDED
|
@@ -0,0 +1,646 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @title Tobii Calibration
|
|
3
|
+
* @description jsPsych plugin for Tobii eye tracker calibration. Provides a visual
|
|
4
|
+
* calibration procedure with animated points and real-time feedback.
|
|
5
|
+
* @version 1.0.0
|
|
6
|
+
* @author jsPsych Team
|
|
7
|
+
* @see {@link https://github.com/jspsych/jspsych-tobii/tree/main/packages/plugin-tobii-calibration#readme Documentation}
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from 'jspsych';
|
|
11
|
+
import { version } from '../package.json';
|
|
12
|
+
import type TobiiExtension from '@jspsych/extension-tobii';
|
|
13
|
+
import type { CalibrationResult } from '@jspsych/extension-tobii';
|
|
14
|
+
import { CalibrationDisplay } from './calibration-display';
|
|
15
|
+
import type { CalibrationParameters, CalibrationPoint } from './types';
|
|
16
|
+
|
|
17
|
+
const info = <const>{
|
|
18
|
+
name: 'tobii-calibration',
|
|
19
|
+
version: version,
|
|
20
|
+
parameters: {
|
|
21
|
+
/** Number of calibration points (5 or 9) */
|
|
22
|
+
calibration_points: {
|
|
23
|
+
type: ParameterType.INT,
|
|
24
|
+
default: 9,
|
|
25
|
+
},
|
|
26
|
+
/** Calibration mode: click or view */
|
|
27
|
+
calibration_mode: {
|
|
28
|
+
type: ParameterType.STRING,
|
|
29
|
+
default: 'view',
|
|
30
|
+
},
|
|
31
|
+
/** Size of calibration points in pixels */
|
|
32
|
+
point_size: {
|
|
33
|
+
type: ParameterType.INT,
|
|
34
|
+
default: 20,
|
|
35
|
+
},
|
|
36
|
+
/** Color of calibration points */
|
|
37
|
+
point_color: {
|
|
38
|
+
type: ParameterType.STRING,
|
|
39
|
+
default: '#ff0000',
|
|
40
|
+
},
|
|
41
|
+
/** Duration to show each point before data collection (ms) - allows user to fixate */
|
|
42
|
+
point_duration: {
|
|
43
|
+
type: ParameterType.INT,
|
|
44
|
+
default: 500,
|
|
45
|
+
},
|
|
46
|
+
/** Show progress indicator */
|
|
47
|
+
show_progress: {
|
|
48
|
+
type: ParameterType.BOOL,
|
|
49
|
+
default: true,
|
|
50
|
+
},
|
|
51
|
+
/** Custom calibration points */
|
|
52
|
+
custom_points: {
|
|
53
|
+
type: ParameterType.COMPLEX,
|
|
54
|
+
default: null,
|
|
55
|
+
},
|
|
56
|
+
/** Instructions text */
|
|
57
|
+
instructions: {
|
|
58
|
+
type: ParameterType.STRING,
|
|
59
|
+
default:
|
|
60
|
+
'Look at each point as it appears on the screen. Keep your gaze fixed on each point until it disappears.',
|
|
61
|
+
},
|
|
62
|
+
/** Button text for click mode */
|
|
63
|
+
button_text: {
|
|
64
|
+
type: ParameterType.STRING,
|
|
65
|
+
default: 'Start Calibration',
|
|
66
|
+
},
|
|
67
|
+
/** Background color of the calibration container */
|
|
68
|
+
background_color: {
|
|
69
|
+
type: ParameterType.STRING,
|
|
70
|
+
default: '#808080',
|
|
71
|
+
},
|
|
72
|
+
/** Primary button color */
|
|
73
|
+
button_color: {
|
|
74
|
+
type: ParameterType.STRING,
|
|
75
|
+
default: '#007bff',
|
|
76
|
+
},
|
|
77
|
+
/** Primary button hover color */
|
|
78
|
+
button_hover_color: {
|
|
79
|
+
type: ParameterType.STRING,
|
|
80
|
+
default: '#0056b3',
|
|
81
|
+
},
|
|
82
|
+
/** Retry button color */
|
|
83
|
+
retry_button_color: {
|
|
84
|
+
type: ParameterType.STRING,
|
|
85
|
+
default: '#dc3545',
|
|
86
|
+
},
|
|
87
|
+
/** Retry button hover color */
|
|
88
|
+
retry_button_hover_color: {
|
|
89
|
+
type: ParameterType.STRING,
|
|
90
|
+
default: '#c82333',
|
|
91
|
+
},
|
|
92
|
+
/** Success message color */
|
|
93
|
+
success_color: {
|
|
94
|
+
type: ParameterType.STRING,
|
|
95
|
+
default: '#28a745',
|
|
96
|
+
},
|
|
97
|
+
/** Error message color */
|
|
98
|
+
error_color: {
|
|
99
|
+
type: ParameterType.STRING,
|
|
100
|
+
default: '#dc3545',
|
|
101
|
+
},
|
|
102
|
+
/** Maximum number of retry attempts allowed on calibration failure */
|
|
103
|
+
max_retries: {
|
|
104
|
+
type: ParameterType.INT,
|
|
105
|
+
default: 1,
|
|
106
|
+
},
|
|
107
|
+
/** Duration of zoom in/out animations in ms */
|
|
108
|
+
zoom_duration: {
|
|
109
|
+
type: ParameterType.INT,
|
|
110
|
+
default: 300,
|
|
111
|
+
},
|
|
112
|
+
/** Duration of explosion animation in ms */
|
|
113
|
+
explosion_duration: {
|
|
114
|
+
type: ParameterType.INT,
|
|
115
|
+
default: 400,
|
|
116
|
+
},
|
|
117
|
+
/** Duration to show success result before auto-advancing in ms */
|
|
118
|
+
success_display_duration: {
|
|
119
|
+
type: ParameterType.INT,
|
|
120
|
+
default: 2000,
|
|
121
|
+
},
|
|
122
|
+
/** Duration to show instructions before auto-advancing in view mode in ms */
|
|
123
|
+
instruction_display_duration: {
|
|
124
|
+
type: ParameterType.INT,
|
|
125
|
+
default: 3000,
|
|
126
|
+
},
|
|
127
|
+
},
|
|
128
|
+
data: {
|
|
129
|
+
/** Calibration success status */
|
|
130
|
+
calibration_success: {
|
|
131
|
+
type: ParameterType.BOOL,
|
|
132
|
+
},
|
|
133
|
+
/** Number of calibration points used */
|
|
134
|
+
num_points: {
|
|
135
|
+
type: ParameterType.INT,
|
|
136
|
+
},
|
|
137
|
+
/** Calibration mode used */
|
|
138
|
+
mode: {
|
|
139
|
+
type: ParameterType.STRING,
|
|
140
|
+
},
|
|
141
|
+
/** Full calibration result data */
|
|
142
|
+
calibration_data: {
|
|
143
|
+
type: ParameterType.COMPLEX,
|
|
144
|
+
},
|
|
145
|
+
/** Number of calibration attempts made */
|
|
146
|
+
num_attempts: {
|
|
147
|
+
type: ParameterType.INT,
|
|
148
|
+
},
|
|
149
|
+
},
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
type Info = typeof info;
|
|
153
|
+
|
|
154
|
+
class TobiiCalibrationPlugin implements JsPsychPlugin<Info> {
|
|
155
|
+
static info = info;
|
|
156
|
+
|
|
157
|
+
constructor(private jsPsych: JsPsych) {}
|
|
158
|
+
|
|
159
|
+
private static removeStyles(): void {
|
|
160
|
+
const el = document.getElementById('tobii-calibration-styles');
|
|
161
|
+
if (el) {
|
|
162
|
+
el.remove();
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
private injectStyles(trial: TrialType<Info>): void {
|
|
167
|
+
// Remove existing styles so each trial gets its own colors
|
|
168
|
+
TobiiCalibrationPlugin.removeStyles();
|
|
169
|
+
|
|
170
|
+
const css = `
|
|
171
|
+
.tobii-calibration-container {
|
|
172
|
+
position: fixed;
|
|
173
|
+
top: 0;
|
|
174
|
+
left: 0;
|
|
175
|
+
width: 100%;
|
|
176
|
+
height: 100%;
|
|
177
|
+
background-color: ${trial.background_color};
|
|
178
|
+
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
179
|
+
z-index: 9999;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.tobii-calibration-instructions {
|
|
183
|
+
position: absolute;
|
|
184
|
+
top: 50%;
|
|
185
|
+
left: 50%;
|
|
186
|
+
transform: translate(-50%, -50%);
|
|
187
|
+
background-color: white;
|
|
188
|
+
padding: 40px;
|
|
189
|
+
border-radius: 10px;
|
|
190
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
191
|
+
text-align: center;
|
|
192
|
+
max-width: 600px;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.tobii-calibration-instructions h2 {
|
|
196
|
+
margin-top: 0;
|
|
197
|
+
margin-bottom: 20px;
|
|
198
|
+
font-size: 24px;
|
|
199
|
+
color: #333;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.tobii-calibration-instructions p {
|
|
203
|
+
margin-bottom: 20px;
|
|
204
|
+
font-size: 16px;
|
|
205
|
+
line-height: 1.5;
|
|
206
|
+
color: #666;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.calibration-start-btn,
|
|
210
|
+
.calibration-continue-btn,
|
|
211
|
+
.calibration-retry-btn {
|
|
212
|
+
background-color: ${trial.button_color};
|
|
213
|
+
color: white;
|
|
214
|
+
border: none;
|
|
215
|
+
padding: 12px 30px;
|
|
216
|
+
font-size: 16px;
|
|
217
|
+
border-radius: 5px;
|
|
218
|
+
cursor: pointer;
|
|
219
|
+
transition: background-color 0.3s;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.calibration-start-btn:hover,
|
|
223
|
+
.calibration-continue-btn:hover {
|
|
224
|
+
background-color: ${trial.button_hover_color};
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.calibration-retry-btn {
|
|
228
|
+
background-color: ${trial.retry_button_color};
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.calibration-retry-btn:hover {
|
|
232
|
+
background-color: ${trial.retry_button_hover_color};
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.tobii-calibration-point {
|
|
236
|
+
position: absolute;
|
|
237
|
+
border-radius: 50%;
|
|
238
|
+
transform: translate(-50%, -50%);
|
|
239
|
+
cursor: pointer;
|
|
240
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.tobii-calibration-point.animation-pulse {
|
|
244
|
+
animation: tobii-calibration-pulse 1s infinite;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
@keyframes tobii-calibration-pulse {
|
|
248
|
+
0%, 100% {
|
|
249
|
+
transform: translate(-50%, -50%) scale(1);
|
|
250
|
+
opacity: 1;
|
|
251
|
+
}
|
|
252
|
+
50% {
|
|
253
|
+
transform: translate(-50%, -50%) scale(1.2);
|
|
254
|
+
opacity: 0.8;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.tobii-calibration-point.animation-shrink {
|
|
259
|
+
animation: tobii-calibration-shrink 1s ease-out;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
@keyframes tobii-calibration-shrink {
|
|
263
|
+
0% {
|
|
264
|
+
transform: translate(-50%, -50%) scale(3);
|
|
265
|
+
opacity: 0.5;
|
|
266
|
+
}
|
|
267
|
+
100% {
|
|
268
|
+
transform: translate(-50%, -50%) scale(1);
|
|
269
|
+
opacity: 1;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.tobii-calibration-point.animation-explosion {
|
|
274
|
+
animation: tobii-calibration-explosion ${(trial.explosion_duration as number) / 1000}s ease-out forwards;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
@keyframes tobii-calibration-explosion {
|
|
278
|
+
0% {
|
|
279
|
+
transform: translate(-50%, -50%) scale(1);
|
|
280
|
+
opacity: 1;
|
|
281
|
+
}
|
|
282
|
+
50% {
|
|
283
|
+
transform: translate(-50%, -50%) scale(2);
|
|
284
|
+
opacity: 0.8;
|
|
285
|
+
}
|
|
286
|
+
100% {
|
|
287
|
+
transform: translate(-50%, -50%) scale(0);
|
|
288
|
+
opacity: 0;
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.tobii-calibration-point.animation-zoom-out {
|
|
293
|
+
animation: tobii-calibration-zoom-out ${(trial.zoom_duration as number) / 1000}s ease-out forwards;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
@keyframes tobii-calibration-zoom-out {
|
|
297
|
+
0% {
|
|
298
|
+
transform: translate(-50%, -50%) scale(1);
|
|
299
|
+
}
|
|
300
|
+
100% {
|
|
301
|
+
transform: translate(-50%, -50%) scale(2.5);
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.tobii-calibration-point.animation-zoom-in {
|
|
306
|
+
animation: tobii-calibration-zoom-in ${(trial.zoom_duration as number) / 1000}s ease-out forwards;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
@keyframes tobii-calibration-zoom-in {
|
|
310
|
+
0% {
|
|
311
|
+
transform: translate(-50%, -50%) scale(2.5);
|
|
312
|
+
}
|
|
313
|
+
100% {
|
|
314
|
+
transform: translate(-50%, -50%) scale(1);
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.tobii-calibration-progress {
|
|
319
|
+
position: fixed;
|
|
320
|
+
top: 20px;
|
|
321
|
+
left: 50%;
|
|
322
|
+
transform: translateX(-50%);
|
|
323
|
+
background-color: rgba(0, 0, 0, 0.7);
|
|
324
|
+
color: white;
|
|
325
|
+
padding: 10px 20px;
|
|
326
|
+
border-radius: 5px;
|
|
327
|
+
font-size: 14px;
|
|
328
|
+
z-index: 10000;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.tobii-calibration-result {
|
|
332
|
+
position: absolute;
|
|
333
|
+
top: 50%;
|
|
334
|
+
left: 50%;
|
|
335
|
+
transform: translate(-50%, -50%);
|
|
336
|
+
background-color: white;
|
|
337
|
+
padding: 40px;
|
|
338
|
+
border-radius: 10px;
|
|
339
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
340
|
+
text-align: center;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.tobii-calibration-result-content h2 {
|
|
344
|
+
margin-top: 0;
|
|
345
|
+
margin-bottom: 20px;
|
|
346
|
+
font-size: 24px;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.tobii-calibration-result-content.success h2 {
|
|
350
|
+
color: ${trial.success_color};
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.tobii-calibration-result-content.error h2 {
|
|
354
|
+
color: ${trial.error_color};
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.tobii-calibration-result-content p {
|
|
358
|
+
margin-bottom: 20px;
|
|
359
|
+
font-size: 16px;
|
|
360
|
+
color: #666;
|
|
361
|
+
}
|
|
362
|
+
`;
|
|
363
|
+
|
|
364
|
+
const styleElement = document.createElement('style');
|
|
365
|
+
styleElement.id = 'tobii-calibration-styles';
|
|
366
|
+
styleElement.textContent = css;
|
|
367
|
+
document.head.appendChild(styleElement);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
async trial(display_element: HTMLElement, trial: TrialType<Info>): Promise<void> {
|
|
371
|
+
// Inject styles
|
|
372
|
+
this.injectStyles(trial);
|
|
373
|
+
// Get extension instance
|
|
374
|
+
const tobiiExt = this.jsPsych.extensions.tobii as unknown as TobiiExtension;
|
|
375
|
+
|
|
376
|
+
if (!tobiiExt) {
|
|
377
|
+
throw new Error('Tobii extension not initialized');
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
// Check connection
|
|
381
|
+
if (!tobiiExt.isConnected()) {
|
|
382
|
+
throw new Error('Not connected to Tobii server');
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
// Create calibration display
|
|
386
|
+
const calibrationDisplay = new CalibrationDisplay(
|
|
387
|
+
display_element,
|
|
388
|
+
trial as unknown as CalibrationParameters
|
|
389
|
+
);
|
|
390
|
+
|
|
391
|
+
// Show instructions (only once, before retry loop)
|
|
392
|
+
await calibrationDisplay.showInstructions();
|
|
393
|
+
|
|
394
|
+
// Get calibration points and validate custom points
|
|
395
|
+
let points: CalibrationPoint[];
|
|
396
|
+
if (trial.custom_points) {
|
|
397
|
+
points = this.validateCustomPoints(trial.custom_points);
|
|
398
|
+
} else {
|
|
399
|
+
points = this.getCalibrationPoints(trial.calibration_points!);
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
const maxAttempts = 1 + (trial.max_retries as number);
|
|
403
|
+
let attempt = 0;
|
|
404
|
+
let calibrationResult: CalibrationResult = { success: false };
|
|
405
|
+
|
|
406
|
+
try {
|
|
407
|
+
// Retry loop
|
|
408
|
+
while (attempt < maxAttempts) {
|
|
409
|
+
attempt++;
|
|
410
|
+
const retriesRemaining = maxAttempts - attempt;
|
|
411
|
+
|
|
412
|
+
// Start calibration on server (resets server-side state on each call)
|
|
413
|
+
await tobiiExt.startCalibration();
|
|
414
|
+
|
|
415
|
+
// Initialize point at screen center (with brief pause)
|
|
416
|
+
await calibrationDisplay.initializePoint();
|
|
417
|
+
|
|
418
|
+
// Show each point and collect calibration data with smooth path animation
|
|
419
|
+
for (let i = 0; i < points.length; i++) {
|
|
420
|
+
const point = points[i];
|
|
421
|
+
|
|
422
|
+
// Travel to the point location (smooth animation from current position)
|
|
423
|
+
await calibrationDisplay.travelToPoint(point, i, points.length);
|
|
424
|
+
|
|
425
|
+
// Zoom out (point grows larger to attract attention)
|
|
426
|
+
await calibrationDisplay.playZoomOut();
|
|
427
|
+
|
|
428
|
+
// Zoom in (point shrinks to fixation size)
|
|
429
|
+
await calibrationDisplay.playZoomIn();
|
|
430
|
+
|
|
431
|
+
if (trial.calibration_mode === 'click') {
|
|
432
|
+
// Wait for user to click
|
|
433
|
+
await calibrationDisplay.waitForClick();
|
|
434
|
+
} else {
|
|
435
|
+
// Wait for user to fixate on the point
|
|
436
|
+
await this.delay(trial.point_duration!);
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
// Collect calibration data for this point (blocks until SDK finishes)
|
|
440
|
+
const result = await tobiiExt.collectCalibrationPoint(point.x, point.y);
|
|
441
|
+
|
|
442
|
+
// Play explosion animation based on result
|
|
443
|
+
await calibrationDisplay.playExplosion(result.success);
|
|
444
|
+
|
|
445
|
+
// Reset point for next travel (don't remove element)
|
|
446
|
+
if (i < points.length - 1) {
|
|
447
|
+
await calibrationDisplay.resetPointAfterExplosion();
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
// Hide point after final explosion
|
|
452
|
+
await calibrationDisplay.hidePoint();
|
|
453
|
+
|
|
454
|
+
// Compute calibration on server
|
|
455
|
+
calibrationResult = await tobiiExt.computeCalibration();
|
|
456
|
+
|
|
457
|
+
// Show result with retry option if retries remain
|
|
458
|
+
const userChoice = await calibrationDisplay.showResult(
|
|
459
|
+
calibrationResult.success,
|
|
460
|
+
retriesRemaining > 0
|
|
461
|
+
);
|
|
462
|
+
|
|
463
|
+
if (userChoice === 'continue') {
|
|
464
|
+
break;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
// User chose retry — reset display for next attempt
|
|
468
|
+
calibrationDisplay.resetForRetry();
|
|
469
|
+
}
|
|
470
|
+
} finally {
|
|
471
|
+
// Clear display and remove injected styles
|
|
472
|
+
calibrationDisplay.clear();
|
|
473
|
+
display_element.innerHTML = '';
|
|
474
|
+
TobiiCalibrationPlugin.removeStyles();
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
// Finish trial
|
|
478
|
+
const trial_data = {
|
|
479
|
+
calibration_success: calibrationResult.success,
|
|
480
|
+
num_points: points.length,
|
|
481
|
+
mode: trial.calibration_mode,
|
|
482
|
+
calibration_data: calibrationResult,
|
|
483
|
+
num_attempts: attempt,
|
|
484
|
+
};
|
|
485
|
+
|
|
486
|
+
this.jsPsych.finishTrial(trial_data);
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
/**
|
|
490
|
+
* Validate custom calibration points
|
|
491
|
+
*/
|
|
492
|
+
private validateCustomPoints(points: unknown[]): CalibrationPoint[] {
|
|
493
|
+
if (!Array.isArray(points) || points.length === 0) {
|
|
494
|
+
throw new Error('custom_points must be a non-empty array');
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
const validated: CalibrationPoint[] = [];
|
|
498
|
+
for (let i = 0; i < points.length; i++) {
|
|
499
|
+
const point = points[i];
|
|
500
|
+
if (typeof point !== 'object' || point === null) {
|
|
501
|
+
throw new Error(`Invalid calibration point at index ${i}: must have numeric x and y`);
|
|
502
|
+
}
|
|
503
|
+
const p = point as Record<string, unknown>;
|
|
504
|
+
if (typeof p.x !== 'number' || typeof p.y !== 'number') {
|
|
505
|
+
throw new Error(`Invalid calibration point at index ${i}: must have numeric x and y`);
|
|
506
|
+
}
|
|
507
|
+
if (p.x < 0 || p.x > 1 || p.y < 0 || p.y > 1) {
|
|
508
|
+
throw new Error(
|
|
509
|
+
`Calibration point at index ${i} out of range: x and y must be between 0 and 1`
|
|
510
|
+
);
|
|
511
|
+
}
|
|
512
|
+
validated.push({ x: p.x, y: p.y });
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
return validated;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
/**
|
|
519
|
+
* Get standard calibration points for the given grid size
|
|
520
|
+
*/
|
|
521
|
+
private getCalibrationPoints(count: number): CalibrationPoint[] {
|
|
522
|
+
switch (count) {
|
|
523
|
+
case 5:
|
|
524
|
+
return [
|
|
525
|
+
{ x: 0.1, y: 0.1 },
|
|
526
|
+
{ x: 0.9, y: 0.1 },
|
|
527
|
+
{ x: 0.5, y: 0.5 },
|
|
528
|
+
{ x: 0.1, y: 0.9 },
|
|
529
|
+
{ x: 0.9, y: 0.9 },
|
|
530
|
+
];
|
|
531
|
+
case 9:
|
|
532
|
+
return [
|
|
533
|
+
{ x: 0.1, y: 0.1 },
|
|
534
|
+
{ x: 0.5, y: 0.1 },
|
|
535
|
+
{ x: 0.9, y: 0.1 },
|
|
536
|
+
{ x: 0.1, y: 0.5 },
|
|
537
|
+
{ x: 0.5, y: 0.5 },
|
|
538
|
+
{ x: 0.9, y: 0.5 },
|
|
539
|
+
{ x: 0.1, y: 0.9 },
|
|
540
|
+
{ x: 0.5, y: 0.9 },
|
|
541
|
+
{ x: 0.9, y: 0.9 },
|
|
542
|
+
];
|
|
543
|
+
case 13:
|
|
544
|
+
// 3x3 outer grid + 4 diagonal midpoints
|
|
545
|
+
return [
|
|
546
|
+
{ x: 0.1, y: 0.1 },
|
|
547
|
+
{ x: 0.5, y: 0.1 },
|
|
548
|
+
{ x: 0.9, y: 0.1 },
|
|
549
|
+
{ x: 0.3, y: 0.3 },
|
|
550
|
+
{ x: 0.7, y: 0.3 },
|
|
551
|
+
{ x: 0.1, y: 0.5 },
|
|
552
|
+
{ x: 0.5, y: 0.5 },
|
|
553
|
+
{ x: 0.9, y: 0.5 },
|
|
554
|
+
{ x: 0.3, y: 0.7 },
|
|
555
|
+
{ x: 0.7, y: 0.7 },
|
|
556
|
+
{ x: 0.1, y: 0.9 },
|
|
557
|
+
{ x: 0.5, y: 0.9 },
|
|
558
|
+
{ x: 0.9, y: 0.9 },
|
|
559
|
+
];
|
|
560
|
+
case 15:
|
|
561
|
+
// 5 rows x 3 columns
|
|
562
|
+
return [
|
|
563
|
+
{ x: 0.1, y: 0.1 },
|
|
564
|
+
{ x: 0.5, y: 0.1 },
|
|
565
|
+
{ x: 0.9, y: 0.1 },
|
|
566
|
+
{ x: 0.1, y: 0.3 },
|
|
567
|
+
{ x: 0.5, y: 0.3 },
|
|
568
|
+
{ x: 0.9, y: 0.3 },
|
|
569
|
+
{ x: 0.1, y: 0.5 },
|
|
570
|
+
{ x: 0.5, y: 0.5 },
|
|
571
|
+
{ x: 0.9, y: 0.5 },
|
|
572
|
+
{ x: 0.1, y: 0.7 },
|
|
573
|
+
{ x: 0.5, y: 0.7 },
|
|
574
|
+
{ x: 0.9, y: 0.7 },
|
|
575
|
+
{ x: 0.1, y: 0.9 },
|
|
576
|
+
{ x: 0.5, y: 0.9 },
|
|
577
|
+
{ x: 0.9, y: 0.9 },
|
|
578
|
+
];
|
|
579
|
+
case 19:
|
|
580
|
+
// Symmetric 3-5-3-5-3 pattern
|
|
581
|
+
return [
|
|
582
|
+
{ x: 0.1, y: 0.1 },
|
|
583
|
+
{ x: 0.5, y: 0.1 },
|
|
584
|
+
{ x: 0.9, y: 0.1 },
|
|
585
|
+
{ x: 0.1, y: 0.3 },
|
|
586
|
+
{ x: 0.3, y: 0.3 },
|
|
587
|
+
{ x: 0.5, y: 0.3 },
|
|
588
|
+
{ x: 0.7, y: 0.3 },
|
|
589
|
+
{ x: 0.9, y: 0.3 },
|
|
590
|
+
{ x: 0.1, y: 0.5 },
|
|
591
|
+
{ x: 0.5, y: 0.5 },
|
|
592
|
+
{ x: 0.9, y: 0.5 },
|
|
593
|
+
{ x: 0.1, y: 0.7 },
|
|
594
|
+
{ x: 0.3, y: 0.7 },
|
|
595
|
+
{ x: 0.5, y: 0.7 },
|
|
596
|
+
{ x: 0.7, y: 0.7 },
|
|
597
|
+
{ x: 0.9, y: 0.7 },
|
|
598
|
+
{ x: 0.1, y: 0.9 },
|
|
599
|
+
{ x: 0.5, y: 0.9 },
|
|
600
|
+
{ x: 0.9, y: 0.9 },
|
|
601
|
+
];
|
|
602
|
+
case 25:
|
|
603
|
+
// 5x5 full grid
|
|
604
|
+
return [
|
|
605
|
+
{ x: 0.1, y: 0.1 },
|
|
606
|
+
{ x: 0.3, y: 0.1 },
|
|
607
|
+
{ x: 0.5, y: 0.1 },
|
|
608
|
+
{ x: 0.7, y: 0.1 },
|
|
609
|
+
{ x: 0.9, y: 0.1 },
|
|
610
|
+
{ x: 0.1, y: 0.3 },
|
|
611
|
+
{ x: 0.3, y: 0.3 },
|
|
612
|
+
{ x: 0.5, y: 0.3 },
|
|
613
|
+
{ x: 0.7, y: 0.3 },
|
|
614
|
+
{ x: 0.9, y: 0.3 },
|
|
615
|
+
{ x: 0.1, y: 0.5 },
|
|
616
|
+
{ x: 0.3, y: 0.5 },
|
|
617
|
+
{ x: 0.5, y: 0.5 },
|
|
618
|
+
{ x: 0.7, y: 0.5 },
|
|
619
|
+
{ x: 0.9, y: 0.5 },
|
|
620
|
+
{ x: 0.1, y: 0.7 },
|
|
621
|
+
{ x: 0.3, y: 0.7 },
|
|
622
|
+
{ x: 0.5, y: 0.7 },
|
|
623
|
+
{ x: 0.7, y: 0.7 },
|
|
624
|
+
{ x: 0.9, y: 0.7 },
|
|
625
|
+
{ x: 0.1, y: 0.9 },
|
|
626
|
+
{ x: 0.3, y: 0.9 },
|
|
627
|
+
{ x: 0.5, y: 0.9 },
|
|
628
|
+
{ x: 0.7, y: 0.9 },
|
|
629
|
+
{ x: 0.9, y: 0.9 },
|
|
630
|
+
];
|
|
631
|
+
default:
|
|
632
|
+
throw new Error(
|
|
633
|
+
`Unsupported calibration_points value: ${count}. Use 5, 9, 13, 15, 19, or 25, or provide custom_points.`
|
|
634
|
+
);
|
|
635
|
+
}
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
/**
|
|
639
|
+
* Delay helper
|
|
640
|
+
*/
|
|
641
|
+
private delay(ms: number): Promise<void> {
|
|
642
|
+
return new Promise((resolve) => setTimeout(resolve, ms));
|
|
643
|
+
}
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
export default TobiiCalibrationPlugin;
|
package/src/types.d.ts
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Type definitions for calibration plugin
|
|
3
|
+
*/
|
|
4
|
+
export interface CalibrationPoint {
|
|
5
|
+
x: number;
|
|
6
|
+
y: number;
|
|
7
|
+
}
|
|
8
|
+
export interface CalibrationParameters {
|
|
9
|
+
/** Number of calibration points */
|
|
10
|
+
calibration_points?: 5 | 9 | 13 | 15 | 19 | 25;
|
|
11
|
+
/** Calibration mode: click to advance or view for fixed duration */
|
|
12
|
+
calibration_mode?: 'click' | 'view';
|
|
13
|
+
/** Size of calibration point in pixels */
|
|
14
|
+
point_size?: number;
|
|
15
|
+
/** Color of calibration point */
|
|
16
|
+
point_color?: string;
|
|
17
|
+
/** Duration to show each point before data collection (ms) - allows user to fixate */
|
|
18
|
+
point_duration?: number;
|
|
19
|
+
/** Show progress indicator */
|
|
20
|
+
show_progress?: boolean;
|
|
21
|
+
/** Custom calibration points (overrides calibration_points) */
|
|
22
|
+
custom_points?: CalibrationPoint[];
|
|
23
|
+
/** Instructions text */
|
|
24
|
+
instructions?: string;
|
|
25
|
+
/** Button text for click mode */
|
|
26
|
+
button_text?: string;
|
|
27
|
+
/** Background color of the calibration container */
|
|
28
|
+
background_color?: string;
|
|
29
|
+
/** Primary button color */
|
|
30
|
+
button_color?: string;
|
|
31
|
+
/** Primary button hover color */
|
|
32
|
+
button_hover_color?: string;
|
|
33
|
+
/** Retry button color */
|
|
34
|
+
retry_button_color?: string;
|
|
35
|
+
/** Retry button hover color */
|
|
36
|
+
retry_button_hover_color?: string;
|
|
37
|
+
/** Success message color */
|
|
38
|
+
success_color?: string;
|
|
39
|
+
/** Error message color */
|
|
40
|
+
error_color?: string;
|
|
41
|
+
/** Maximum number of retry attempts allowed on calibration failure */
|
|
42
|
+
max_retries?: number;
|
|
43
|
+
/** Duration of zoom in/out animations in ms */
|
|
44
|
+
zoom_duration?: number;
|
|
45
|
+
/** Duration of explosion animation in ms */
|
|
46
|
+
explosion_duration?: number;
|
|
47
|
+
/** Duration to show success result before auto-advancing in ms */
|
|
48
|
+
success_display_duration?: number;
|
|
49
|
+
/** Duration to show instructions before auto-advancing in view mode in ms */
|
|
50
|
+
instruction_display_duration?: number;
|
|
51
|
+
}
|
|
52
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,qBAAqB;IACpC,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC/C,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACnC,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yBAAyB;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,4BAA4B;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kEAAkE;IAClE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,6EAA6E;IAC7E,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC"}
|
package/src/types.js
ADDED
package/src/types.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;GAEG"}
|