-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
360 lines (336 loc) · 16.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<!DOCTYPE html>
<html>
<title>Nomon Web App</title>
<link rel="icon"
type="image/png"
href="./icon.png">
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0"/>
<meta http-equiv="cache-control" content="max-age=0"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
<meta http-equiv="pragma" content="no-cache"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<link rel="stylesheet" href="style/sidebar.css">
<link rel="stylesheet" href="style/buttons.css">
<link rel="stylesheet" href="style/footer.css">
<style>
body {
margin: 0;
padding-bottom: 4em;
font-family: Helvetica, sans-serif;
}
h1 {
margin-top: 6vh;
}
html {
scroll-behavior: smooth;
}
div.spacer {
font-size: 0;
height: 3px;
padding-top: 6vh;
line-height: 0;
background-color: #f1f1f1;
background-clip: content-box;
}
</style>
<body>
<body>
<ul>
<li><a class="active" href="#about" id="about_ref">About</a></li>
<li><a href="#demo" id="demo_ref">Demo</a></li>
<li><a href="#research" id="research_ref">Research</a></li>
<li style="font-family: 'Courier New', monospace"><a href="#code" id="code_ref">open_source_code</a></li>
<li><a href="#contact" id="contact_ref">Contact</a></li>
</ul>
<div style="margin-left:15%;padding:1px 16px">
<img src="resources/title_logo.JPG" style="width: 100%">
<div class="spacer" style="padding-top: 0"></div>
<h1 id="about"><img src="resources/clock.jfif" style="width: 3vw; vertical-align: middle;">About</h1>
<h3><img src="resources/clock.jfif" style="width: 3vw; vertical-align: middle;">Single Switch Communication</h3>
<p>For people living with severe motor impairments, Augmentative and Alternative Communication (AAC) devices with
a single-switch input can provide a means of computer interaction. Users control the activation time of their
single switch by, e.g., pressing a button, releasing a puff of air, or blinking. These switch activations are
commonly sent into an AAC interface, such as a scanning system, which facilitates computer navigation or text
composition.
</p>
<figure align="center">
<img src="resources/rcs_animation.gif">
<figcaption><b>Row Column Scanning</b> https://www.wikiwand.com/en/Switch_access_scanning</figcaption>
</figure>
<p> In a scanning
system, individual interface options or sets of options are highlighted in a fixed sequence. To select
something, the user waits for their target to be highlighted and then activates their switch. A common approach,
row column scanning, involves an activation to select a set of options arranged in a row followed by a second
activation to select a column. Such scanning systems are typically limited to displaying options in a fixed grid
and, when used for text composition, have extremely slow text entry rates — on the order of 0.3–2.9 words per
minute (wpm) and 1.9 wpm — with motor impaired users.</p>
<h3><img src="resources/clock.jfif" style="width: 3vw; vertical-align: middle;">Nomon</h3>
<p><b>What is Nomon?</b> Our interface, Nomon, addresses the limitations of traditional single switch input methods
through
its flexible selection scheme. Nomon has many potential uses such as drawing, general operating system control,
and even gaming. The interface places an indicator next to each option and uses a probabilistic selection
mechanism. This selection mechanism incorporates prior information on options and a model of user-input noise to
perform Bayesian updates that adapt its selection criteria to a user’s ability. This adaptation helps the user
type quickly while avoiding errors. Further, Nomon is not limited to a strict grid layout as these indicators
can be placed at arbitrary locations on the screen</p>
<figure align="center" >
<iframe width="560" height="315" src="https://www.youtube.com/embed/s8ul3y-Iaeg" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<figcaption><b>Video demonstration:</b> typing text with the Nomon keyboard application.</figcaption>
</figure>
<p><b>How does it work?</b> In Nomon, all options have a clock indicator to their left which allows for selection.
Each clock has a
unique phase, and the minute hands of all clocks rotate at a constant, shared speed. A user can select an option
by
clicking when the clock adjacent to their desired option passes noon. The user needs to look only at the
adjacent clock
to select its corresponding target. After a click, all the clock hands change phase. This phase change is done
such that
the hour hands on the most likely clocks are maximally separated. The user then repeatedly clicks when the
minute
hand passes noon until their target is narrowed down and selected. The number of clicks required to select a
target is
dependent on the precision of the user and on how probable the target is. In a writing application that makes
use of a
language model, an experienced user can select targets in around two clicks. A demonstration of how typing with
the Nomon interface works is included below.</p>
<figure align="center" >
<iframe width="560" height="315" src="https://www.youtube.com/embed/eIm5G1sqHAM"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<figcaption><b>Video:</b> A deep dive into Nomon's unique, probabilistic selection mechanism.</figcaption>
</figure>
<div class="spacer"></div>
<h1 id="demo"><img src="resources/clock.jfif" style="width: 3vw; vertical-align: middle;">Demo </h1>
<p> We provide three demos of the Nomon interface below: (1) a <b>Guided Tutorial</b> on selecting items with
Nomon clocks,
(2) an <b>Emoji Selection Interface</b> that demonstrates Nomon's ability to select between many options
at once, and (3) a full <b>Text Keyboard</b> with word completions.</p>
<table align="" width="100%">
<tr>
<td style="text-align:center">
<img alt="" border=0 height=100 id="nomon_img" src="resources/clock.jfif" width=100></img>
</td>
<td style="text-align:center">
<h1 style="font-size: 60px">😃😮😒</h1>
</td>
<td style="text-align:center">
<h1 style="font-size: 70px">Abc</h1>
</td>
</tr>
<tr>
<td style="text-align:center">
<a href='/html/login.html'>
<input class='btn clickable' type="button" id="commboard_button" value="CHI Interactivity Demo"/>
</a>
</td>
<td style="text-align:center">
<a href='/html/keyboard.html?emoji=true'>
<input class='btn clickable' type="button" id="emoji_button" value="Emoji Interface"/>
</a>
</td>
<td style="text-align:center">
<a href='/html/keyboard.html'>
<input class='btn clickable' type="button" id="alpha_button" value="Text Keyboard"/>
</a>
</td>
</tr>
</table>
<div class="spacer"></div>
<h1 id="research"><img src="resources/clock.jfif" style="width: 3vw; vertical-align: middle;">Research </h1>
<table align="center" width="100%">
<tr>
<td style="text-align:center; width: 25%">
<h3>Initial Study</h3>
</td>
<td style="text-align:center; width: 25%">
<h3>Nomon Technical Report</h3>
</td>
<td style="text-align:center; width: 25%">
<h3>CHI '22 Performance Evaluation</h3>
</td>
<td style="text-align:center; width: 25%">
<h3>CHI '22 Interactivity Demo</h3>
</td>
</tr>
<tr>
<td style="text-align:center">
<a href='https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0007481' target="_blank">
<img alt="" border=1px height=260 src="resources/plos_one_article.PNG" width=200></img>
</a>
</td>
<td style="text-align:center">
<a href='https://www.semanticscholar.org/paper/Nomon-%3A-Efficient-communication-with-a-single-Broderick-Hennig/10c22be1cbc60e00ab2a58d37f41b0647b01b9f8'
target="_blank">
<img alt="" border=1px height=260 src="resources/nomon_thesis.PNG" width=200></img>
</a>
</td>
<td style="text-align:center">
<a href="https://doi.org/10.1145/3491102.3517738" target="_blank">
<img alt="" border=1px height=260 src="resources/chi_22_article.PNG" width=200></img>
</a>
</td>
<td style="text-align:center">
<a href="https://doi.org/10.1145/3491101.3519892" target="_blank">
<img alt="" border=1px height=260 src="resources/chi_22_interactive.PNG" width=200></img>
</a>
</td>
</tr>
<tr>
<td style="text-align:center; font-size: .75em; width: 25%">
<p>Tamara Broderick and David J. C. MacKay</p>
</td>
<td style="text-align:center; font-size: .75em; width: 25%">
<p>Tamara Broderick</p>
</td>
<td style="text-align:center; font-size: .75em; width: 25%">
<p>Nicholas Bonaker, Keith Vertanen, <br> Emli-Mari Nel, and Tamara Broderick</p>
</td>
<td style="text-align:center; font-size: .75em; width: 25%">
<p>Nicholas Bonaker, Keith Vertanen, <br> Emli-Mari Nel, and Tamara Broderick</p>
</td>
</tr>
<tr>
<td style="text-align:center; width: 25%">
<h3>GNOMON (Gaming)</h3>
</td>
</tr>
<tr>
<td style="text-align:center">
<a href='https://dl.acm.org/citation.cfm?id=3085957' target="_blank">
<img alt="" border=1px height=260 src="resources/gnomon_paper.PNG" width=200></img>
</a>
</td>
</tr>
<tr>
<td style="text-align:center; font-size: .75em; width: 25%">
<p>Sebastián Aced López, Fulvio Corno, and Luigi De Russis</p>
</td>
</tr>
</table>
<div class="spacer"></div>
<h1 style="font-family: 'Courier New', monospace" id="code">
<img src="resources/clock.jfif" style="width: 3vw; vertical-align: middle;">open_source_code</h1>
<table align="center" width="100%">
<tr align="center">
<td style="text-align:center" colspan="2">
<a href='https://github.com/nbonaker/NomonWeb' target="_blank">
<img alt="" border=0px height=200 src="resources/js_logo.png" width=200></img>
</a>
</td>
<tr align="center">
<td style="text-align:center; font-family: 'Courier New', monospace" colspan="2" >
<h3>Active JavaScript Repository</h3>
</td>
</tr>
<tr>
<td style="text-align:center">
<a href='https://github.com/tbroderick/Nomon'
target="_blank">
<img alt="" border=0px height=150 src="resources/python_logo.jfif" width=150></img>
</a>
</td>
<td style="text-align:center">
<a href=''
target="_blank">
<img alt="" border=0px height=150 src="resources/electron_logo.png" width=150></img>
</a>
</td>
</tr>
<tr>
<td style="text-align:center; width: 25%; font-family: 'Courier New', monospace">
<h4>Unsupported Python Repository</h4>
</td>
<td style="text-align:center; width: 25%; font-family: 'Courier New', monospace">
<h4>Installable Electron App Coming Soon!</h4>
</td>
</tr>
</table>
<div class="spacer"></div>
<h1 id="contact"><img src="resources/clock.jfif" style="width: 3vw; vertical-align: middle;">Contact </h1>
<table align="center" width="100%">
<tr align="center">
<td style="text-align:center">
<img alt="" border=0px height=150 src="resources/nick.jpg" width=150></img>
</td>
<td style="text-align:center">
<img alt="" border=0px height=150 src="resources/emli-mari.PNG" width=150></img>
</td>
<td style="text-align:center">
<img alt="" border=0px height=150 src="resources/keith.PNG" width=150></img>
</td>
<td style="text-align:center">
<img alt="" border=0px height=150 src="resources/tamara.PNG" width=150></img>
</td>
</tr>
<tr>
<td style="text-align:center">
<h3>Nicholas Bonaker</h3>
<p>Graduate Student, MIT <br> nbonaker@mit.edu</p>
</td>
<td style="text-align:center">
<h3>Emli-Mari Nel</h3>
<p>Averly <br> emlimari.nel@gmail.com</p>
</td>
<td style="text-align:center">
<h3>Keith Vertanen</h3>
<p>Associate Professor, Michigan Tech <br> vertanen@mtu.edu</p>
</td>
<td style="text-align:center">
<h3>Tamara Broderick</h3>
<p>Associate Professor, MIT <br> tamarab@mit.edu</p>
</td>
</tr>
</table>
</div>
<script>
$(document).ready(function () {
$(window).scroll(function () {
var scroll = $(window).height() * 1 / 4 + $(window).scrollTop();
var about_pos = $("#about").offset().top;
var demo_pos = $("#demo").offset().top;
var research_pos = $("#research").offset().top;
var code_pos = $("#code").offset().top;
var contact_pos = $("#contact").offset().top;
document.getElementById("about_ref").classList.remove('active');
document.getElementById("demo_ref").classList.remove('active');
document.getElementById("research_ref").classList.remove('active');
document.getElementById("code_ref").classList.remove('active');
document.getElementById("contact_ref").classList.remove('active');
if (scroll < demo_pos) {
document.getElementById("about_ref").classList.add('active');
} else if (scroll < research_pos) {
document.getElementById("demo_ref").classList.add('active');
} else if (scroll < code_pos) {
document.getElementById("research_ref").classList.add('active');
} else if (scroll < contact_pos) {
document.getElementById("code_ref").classList.add('active');
} else {
document.getElementById("contact_ref").classList.add('active');
}
});
});
</script>
</body>
<footer>
<div class="row">
<div class="column">
<p style="text-align: left; padding-left: 1em"> © 2021 The Nomon Web Application. </p>
</div>
<div class="column">
<p style="text-align: center"><img src="/icon.png" style="width: 1em;"> <span
id="footer_version">v0.0.0</span></p>
</div>
<div class="column">
<p style="text-align: right; padding-right: 1em">This code is under MIT license. </p>
</div>
</div>
</footer>
</html>