tracky-mouse 2.1.0 → 2.3.0

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.
Files changed (13) hide show
  1. package/README.md +300 -298
  2. package/lib/OneEuroFilter.js +1 -0
  3. package/lib/clmtrackr.js +15369 -15369
  4. package/lib/face-landmarks-detection.min.js +17 -17
  5. package/lib/face_mesh/face_mesh.js +131 -131
  6. package/lib/face_mesh/face_mesh_solution_packed_assets_loader.js +198 -198
  7. package/lib/face_mesh/face_mesh_solution_simd_wasm_bin.js +21 -21
  8. package/lib/face_mesh/face_mesh_solution_wasm_bin.js +21 -21
  9. package/lib/no-eval.js +3220 -3220
  10. package/lib/stats.js +179 -179
  11. package/package.json +61 -57
  12. package/tracky-mouse.css +292 -288
  13. package/tracky-mouse.js +2952 -2285
package/tracky-mouse.css CHANGED
@@ -1,289 +1,293 @@
1
- .tracky-mouse-pointer {
2
- z-index: 900000;
3
- pointer-events: none;
4
- border-radius: 50%;
5
- background-color: red;
6
- width: 20px;
7
- height: 20px;
8
- position: fixed;
9
- transform: translate(-50%, -50%);
10
- }
11
-
12
- .tracky-mouse-dwell-indicator {
13
- position: fixed;
14
- pointer-events: none;
15
- z-index: 1000000;
16
- }
17
-
18
- .tracky-mouse-dwell-indicator::after {
19
- content: "";
20
- display: block;
21
- position: absolute;
22
- background: red;
23
- left: 2px;
24
- top: 2px;
25
- right: 2px;
26
- bottom: 2px;
27
- }
28
-
29
- .tracky-mouse-dwell-indicator:not(.tracky-mouse-for-release) {
30
- background: yellow;
31
- }
32
-
33
- .tracky-mouse-dwell-indicator.tracky-mouse-for-release {
34
- background: white;
35
- }
36
-
37
- .tracky-mouse-dwell-indicator:not(.tracky-mouse-for-release),
38
- .tracky-mouse-dwell-indicator:not(.tracky-mouse-for-release)::after {
39
- border-radius: 50%;
40
- }
41
-
42
- .tracky-mouse-dwell-indicator.tracky-mouse-for-release,
43
- .tracky-mouse-dwell-indicator.tracky-mouse-for-release::after {
44
- clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
45
- }
46
-
47
- .tracky-mouse-hover-halo {
48
- pointer-events: none;
49
- z-index: 1000000;
50
- box-shadow: 0 0 10px yellow, 0 0 3px yellow;
51
- }
52
-
53
- .tracky-mouse-ui {
54
- display: flex;
55
- flex-direction: column;
56
- background-color: rgb(223, 204, 255);
57
- color: black;
58
- padding: 10px;
59
- border-radius: 5px;
60
- --max-ui-width: 600px;
61
- max-width: var(--max-ui-width);
62
- box-sizing: border-box;
63
- font-size: 15px;
64
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
65
- accent-color: rgb(191, 36, 234);
66
- }
67
-
68
- .tracky-mouse-canvas {
69
- max-width: 100%;
70
- object-fit: scale-down;
71
- background-color: rgba(15, 0, 20, 0.5);
72
- }
73
-
74
- .tracky-mouse-start-stop-button {
75
- background-color: rgb(191, 36, 234);
76
- color: white;
77
- font-size: 20px;
78
- border-radius: 5px;
79
- padding: 5px;
80
- margin: 5px;
81
- width: 120px;
82
- cursor: pointer;
83
- }
84
-
85
- .tracky-mouse-start-stop-button::after {
86
- content: "(" attr(aria-keyshortcuts) ")";
87
- opacity: 0.6;
88
- margin-left: 0.5em;
89
- }
90
-
91
- .tracky-mouse-ui .tracky-mouse-control-row:not([hidden]) {
92
- display: flex;
93
- }
94
-
95
- .tracky-mouse-ui .tracky-mouse-control-row label {
96
- /* Avoid accidental clicks on controls by their labels, when otherwise 100% width. */
97
- /* This may not be needed in the current layout. */
98
- width: fit-content;
99
- }
100
-
101
- .tracky-mouse-ui .tracky-mouse-label-text {
102
- display: inline-block;
103
- min-width: 150px;
104
- }
105
-
106
- .tracky-mouse-ui .tracky-mouse-labeled-slider {
107
- display: inline-flex;
108
- position: relative;
109
- margin-bottom: 20px;
110
- flex: 1;
111
- max-width: 400px;
112
- }
113
-
114
- .tracky-mouse-ui .tracky-mouse-labeled-slider input {
115
- flex: 1;
116
- }
117
-
118
- .tracky-mouse-ui .tracky-mouse-labeled-slider .tracky-mouse-min-label,
119
- .tracky-mouse-ui .tracky-mouse-labeled-slider .tracky-mouse-max-label {
120
- opacity: 0.8;
121
- position: absolute;
122
- bottom: -10px;
123
- pointer-events: none;
124
- }
125
-
126
- .tracky-mouse-ui .tracky-mouse-labeled-slider .tracky-mouse-min-label {
127
- left: 0;
128
- }
129
-
130
- .tracky-mouse-ui .tracky-mouse-labeled-slider .tracky-mouse-max-label {
131
- right: 0;
132
- }
133
-
134
- .tracky-mouse-canvas-container-container {
135
- flex: 1;
136
- flex-basis: 0;
137
- min-width: 0;
138
- /* I might be able to simplify this or let it have an intrinsic height
139
- based on the width, for the web demo, by leaving min-height unset (auto),
140
- and only setting it to 0 for the desktop app.
141
- Well, really the difference is whether the height of the .tracky-mouse-ui
142
- is fixed or not, not whether it's a web demo or desktop app.
143
- So I might differentiate based on a .constrained-height class or something,
144
- if not detect it automatically. */
145
- min-height: var(--tracky-mouse-camera-view-min-height, 300px);
146
- }
147
-
148
- .tracky-mouse-canvas-container {
149
- position: relative;
150
- /* Note: aspect-ratio is set from JS, which determines the width implicitly. */
151
- max-height: 100%;
152
- margin: auto;
153
- }
154
-
155
- .tracky-mouse-canvas-overlay {
156
- position: absolute;
157
- left: 0;
158
- top: 0;
159
- width: 100%;
160
- height: 100%;
161
- display: flex;
162
- flex-direction: column;
163
- align-items: center;
164
- justify-content: center;
165
- }
166
-
167
- .tracky-mouse-use-camera-button {
168
- font-size: min(2em, 8vw);
169
- color: white;
170
- background-color: rgb(220, 20, 60);
171
- border: 0;
172
- border-radius: 5px;
173
- padding: 10px;
174
- cursor: pointer;
175
- }
176
-
177
- .tracky-mouse-use-camera-button:hover {
178
- background-color: rgb(230, 20, 62);
179
- }
180
-
181
- .tracky-mouse-error-message {
182
- font-size: min(1.5em, 6vw);
183
- text-align: center;
184
- color: white;
185
- padding: 5px;
186
- }
187
-
188
- /* Screen overlay in electron app */
189
-
190
- #tracky-mouse-screen-overlay-message {
191
- color: yellow;
192
- position: absolute;
193
- bottom: 0;
194
- left: 50%;
195
- transform: translateX(-50%);
196
- text-align: center;
197
- padding: 0 5px;
198
- white-space: nowrap;
199
- --overlay-background-color: rgba(0, 0, 0, 0.3);
200
- --height: 25px;
201
- height: var(--height);
202
- line-height: var(--height);
203
- background-color: var(--overlay-background-color);
204
- text-shadow: 0 0 8px rgba(3, 2, 2, 0.5);
205
- font-size: calc(var(--height) * 0.8);
206
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
207
- }
208
-
209
- /* triangles */
210
- #tracky-mouse-screen-overlay-message::before,
211
- #tracky-mouse-screen-overlay-message::after {
212
- content: "";
213
- position: absolute;
214
- bottom: 0;
215
- width: 0px;
216
- height: 0px;
217
- border-style: solid;
218
- }
219
-
220
- #tracky-mouse-screen-overlay-message::before {
221
- border-width: 0 0 var(--height) var(--height);
222
- border-color: transparent transparent var(--overlay-background-color) transparent;
223
- left: calc(var(--height) * -1);
224
- }
225
-
226
- #tracky-mouse-screen-overlay-message::after {
227
- border-width: var(--height) 0 0 var(--height);
228
- border-color: transparent transparent transparent var(--overlay-background-color);
229
- right: calc(var(--height) * -1);
230
- }
231
-
232
- @keyframes tracky-mouse-screen-overlay-message-fade-out {
233
- 0% {
234
- opacity: 1;
235
- }
236
-
237
- 100% {
238
- opacity: 0;
239
- }
240
- }
241
-
242
- .tracky-mouse-absolute-center {
243
- position: absolute;
244
- left: 50%;
245
- top: 50%;
246
- transform: translate(-50%, -50%);
247
- }
248
-
249
- /* prefer manual takeback indicator, rather than showing both at once */
250
- body.tracky-mouse-manual-takeback .tracky-mouse-head-not-found-indicator,
251
- body:not(.tracky-mouse-head-not-found) .tracky-mouse-head-not-found-indicator {
252
- display: none;
253
- }
254
-
255
- body:not(.tracky-mouse-manual-takeback) .tracky-mouse-manual-takeback-indicator {
256
- display: none;
257
- }
258
-
259
- .tracky-mouse-manual-takeback .tracky-mouse-no-takeback-indicator {
260
- display: none;
261
- }
262
-
263
- .tracky-mouse-screen-overlay-status-indicator img {
264
- filter: drop-shadow(0 0 4px #000) drop-shadow(2px 2px 2px #000);
265
- opacity: 0.5;
266
- }
267
-
268
- .tracky-mouse-ui a:link,
269
- .tracky-mouse-ui a:visited {
270
- color: rgb(135 0 191);
271
- }
272
-
273
- .tracky-mouse-controls details {
274
- border: 1px solid rgba(0, 0, 0, 0.3);
275
- border-radius: 4px;
276
- margin-bottom: 8px;
277
- }
278
-
279
- .tracky-mouse-controls details summary {
280
- cursor: pointer;
281
- user-select: none;
282
- font-weight: bold;
283
- background: rgba(135, 0, 191, 0.1);
284
- padding: 8px;
285
- }
286
-
287
- .tracky-mouse-controls details .tracky-mouse-details-body {
288
- padding: 8px;
1
+ .tracky-mouse-pointer {
2
+ z-index: 900000;
3
+ pointer-events: none;
4
+ border-radius: 50%;
5
+ background-color: red;
6
+ width: 20px;
7
+ height: 20px;
8
+ position: fixed;
9
+ transform: translate(-50%, -50%);
10
+ }
11
+
12
+ .tracky-mouse-dwell-indicator {
13
+ position: fixed;
14
+ pointer-events: none;
15
+ z-index: 1000000;
16
+ }
17
+
18
+ .tracky-mouse-dwell-indicator::after {
19
+ content: "";
20
+ display: block;
21
+ position: absolute;
22
+ background: red;
23
+ left: 2px;
24
+ top: 2px;
25
+ right: 2px;
26
+ bottom: 2px;
27
+ }
28
+
29
+ .tracky-mouse-dwell-indicator:not(.tracky-mouse-for-release) {
30
+ background: yellow;
31
+ }
32
+
33
+ .tracky-mouse-dwell-indicator.tracky-mouse-for-release {
34
+ background: white;
35
+ }
36
+
37
+ .tracky-mouse-dwell-indicator:not(.tracky-mouse-for-release),
38
+ .tracky-mouse-dwell-indicator:not(.tracky-mouse-for-release)::after {
39
+ border-radius: 50%;
40
+ }
41
+
42
+ .tracky-mouse-dwell-indicator.tracky-mouse-for-release,
43
+ .tracky-mouse-dwell-indicator.tracky-mouse-for-release::after {
44
+ clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
45
+ }
46
+
47
+ .tracky-mouse-hover-halo {
48
+ pointer-events: none;
49
+ z-index: 1000000;
50
+ box-shadow: 0 0 10px yellow, 0 0 3px yellow;
51
+ }
52
+
53
+ .tracky-mouse-ui {
54
+ display: flex;
55
+ flex-direction: column;
56
+ background-color: rgb(223, 204, 255);
57
+ color: black;
58
+ padding: 10px;
59
+ border-radius: 5px;
60
+ --max-ui-width: 600px;
61
+ max-width: var(--max-ui-width);
62
+ box-sizing: border-box;
63
+ font-size: 15px;
64
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
65
+ accent-color: rgb(191, 36, 234);
66
+ }
67
+
68
+ .tracky-mouse-canvas {
69
+ max-width: 100%;
70
+ object-fit: scale-down;
71
+ background-color: rgba(15, 0, 20, 0.5);
72
+ }
73
+
74
+ .tracky-mouse-start-stop-button {
75
+ background-color: rgb(191, 36, 234);
76
+ color: white;
77
+ font-size: 20px;
78
+ border-radius: 5px;
79
+ padding: 5px;
80
+ margin: 5px;
81
+ margin-bottom: 10px;
82
+ width: 120px;
83
+ cursor: pointer;
84
+ }
85
+
86
+ .tracky-mouse-start-stop-button::after {
87
+ content: "(" attr(aria-keyshortcuts) ")";
88
+ opacity: 0.6;
89
+ margin-left: 0.5em;
90
+ }
91
+
92
+ .tracky-mouse-ui .tracky-mouse-control-row:not([hidden]) {
93
+ display: flex;
94
+ min-height: 30px;
95
+ align-items: center;
96
+ }
97
+
98
+ .tracky-mouse-ui .tracky-mouse-control-row label {
99
+ /* Avoid accidental clicks on controls by their labels, when otherwise 100% width. */
100
+ /* This may not be needed in the current layout. */
101
+ width: fit-content;
102
+ }
103
+
104
+ .tracky-mouse-ui .tracky-mouse-label-text {
105
+ display: inline-block;
106
+ min-width: 150px;
107
+ }
108
+
109
+ .tracky-mouse-ui .tracky-mouse-labeled-slider {
110
+ display: inline-flex;
111
+ flex-direction: column;
112
+ margin-bottom: 18px;
113
+ margin-top: 5px;
114
+ flex: 1;
115
+ max-width: 400px;
116
+ }
117
+
118
+ .tracky-mouse-ui .tracky-mouse-labeled-slider input {
119
+ flex: 1;
120
+ }
121
+
122
+ .tracky-mouse-ui .tracky-mouse-labeled-slider .tracky-mouse-slider-labels {
123
+ opacity: 0.8;
124
+ pointer-events: none;
125
+ display: flex;
126
+ width: 100%;
127
+ left: 0;
128
+ right: 0;
129
+ justify-content: space-between;
130
+ /* If they come this close, wrap the slider label text */
131
+ gap: 10px;
132
+ }
133
+
134
+ .tracky-mouse-canvas-container-container {
135
+ flex: 1;
136
+ flex-basis: 0;
137
+ min-width: 0;
138
+ /* I might be able to simplify this or let it have an intrinsic height
139
+ based on the width, for the web demo, by leaving min-height unset (auto),
140
+ and only setting it to 0 for the desktop app.
141
+ Well, really the difference is whether the height of the .tracky-mouse-ui
142
+ is fixed or not, not whether it's a web demo or desktop app.
143
+ So I might differentiate based on a .constrained-height class or something,
144
+ if not detect it automatically. */
145
+ min-height: var(--tracky-mouse-camera-view-min-height, 300px);
146
+ }
147
+
148
+ .tracky-mouse-canvas-container {
149
+ position: relative;
150
+ /* Note: aspect-ratio is set from JS, which determines the width implicitly. */
151
+ max-height: 100%;
152
+ margin: auto;
153
+ }
154
+
155
+ .tracky-mouse-canvas-overlay {
156
+ position: absolute;
157
+ left: 0;
158
+ top: 0;
159
+ width: 100%;
160
+ height: 100%;
161
+ display: flex;
162
+ flex-direction: column;
163
+ align-items: center;
164
+ justify-content: center;
165
+ }
166
+
167
+ .tracky-mouse-use-camera-button {
168
+ font-size: min(2em, 8vw);
169
+ color: white;
170
+ background-color: rgb(220, 20, 60);
171
+ border: 0;
172
+ border-radius: 5px;
173
+ padding: 10px;
174
+ cursor: pointer;
175
+ }
176
+
177
+ .tracky-mouse-use-camera-button:hover {
178
+ background-color: rgb(230, 20, 62);
179
+ }
180
+
181
+ .tracky-mouse-error-message {
182
+ font-size: min(1.5em, 6vw);
183
+ text-align: center;
184
+ color: white;
185
+ padding: 5px;
186
+ }
187
+
188
+ /* Screen overlay in electron app */
189
+
190
+ #tracky-mouse-screen-overlay-message {
191
+ color: yellow;
192
+ position: absolute;
193
+ bottom: 0;
194
+ left: 50%;
195
+ transform: translateX(-50%);
196
+ text-align: center;
197
+ padding: 0 5px;
198
+ white-space: nowrap;
199
+ --overlay-background-color: rgba(0, 0, 0, 0.3);
200
+ --height: 25px;
201
+ height: var(--height);
202
+ line-height: var(--height);
203
+ background-color: var(--overlay-background-color);
204
+ text-shadow: 0 0 8px rgba(3, 2, 2, 0.5);
205
+ font-size: calc(var(--height) * 0.8);
206
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
207
+ }
208
+
209
+ /* triangles */
210
+ #tracky-mouse-screen-overlay-message::before,
211
+ #tracky-mouse-screen-overlay-message::after {
212
+ content: "";
213
+ position: absolute;
214
+ bottom: 0;
215
+ width: 0px;
216
+ height: 0px;
217
+ border-style: solid;
218
+ }
219
+
220
+ #tracky-mouse-screen-overlay-message::before {
221
+ border-width: 0 0 var(--height) var(--height);
222
+ border-color: transparent transparent var(--overlay-background-color) transparent;
223
+ left: calc(var(--height) * -1);
224
+ }
225
+
226
+ #tracky-mouse-screen-overlay-message::after {
227
+ border-width: var(--height) 0 0 var(--height);
228
+ border-color: transparent transparent transparent var(--overlay-background-color);
229
+ right: calc(var(--height) * -1);
230
+ }
231
+
232
+ @keyframes tracky-mouse-screen-overlay-message-fade-out {
233
+ 0% {
234
+ opacity: 1;
235
+ }
236
+
237
+ 100% {
238
+ opacity: 0;
239
+ }
240
+ }
241
+
242
+ .tracky-mouse-absolute-center {
243
+ position: absolute;
244
+ left: 50%;
245
+ top: 50%;
246
+ transform: translate(-50%, -50%);
247
+ }
248
+
249
+ /* prefer manual takeback indicator, rather than showing both at once */
250
+ body.tracky-mouse-manual-takeback .tracky-mouse-head-not-found-indicator,
251
+ body:not(.tracky-mouse-head-not-found) .tracky-mouse-head-not-found-indicator {
252
+ display: none;
253
+ }
254
+
255
+ body:not(.tracky-mouse-manual-takeback) .tracky-mouse-manual-takeback-indicator {
256
+ display: none;
257
+ }
258
+
259
+ .tracky-mouse-manual-takeback .tracky-mouse-no-takeback-indicator {
260
+ display: none;
261
+ }
262
+
263
+ .tracky-mouse-screen-overlay-status-indicator img {
264
+ filter: drop-shadow(0 0 4px #000) drop-shadow(2px 2px 2px #000);
265
+ opacity: 0.5;
266
+ }
267
+
268
+ .tracky-mouse-ui a:link,
269
+ .tracky-mouse-ui a:visited {
270
+ color: rgb(135 0 191);
271
+ }
272
+
273
+ .tracky-mouse-controls {
274
+ overflow: auto;
275
+ }
276
+
277
+ .tracky-mouse-controls details {
278
+ border: 1px solid rgba(0, 0, 0, 0.3);
279
+ border-radius: 4px;
280
+ margin-bottom: 8px;
281
+ }
282
+
283
+ .tracky-mouse-controls details summary {
284
+ cursor: pointer;
285
+ user-select: none;
286
+ font-weight: bold;
287
+ background: rgba(135, 0, 191, 0.1);
288
+ padding: 8px;
289
+ }
290
+
291
+ .tracky-mouse-controls details .tracky-mouse-details-body {
292
+ padding: 8px;
289
293
  }