-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
377 lines (352 loc) · 31.6 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
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Explorations on making Jupyter more accessible">
<meta name="author" content="James Martin">
<title>Jupyter a11y</title>
<!--fonts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href='css/notebook.css' rel='stylesheet' type='text/css'>
<link href='css/extra.css' rel='stylesheet' type='text/css'>
<link href='css/site.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<!-- Header Section -->
<header id="siteTitle">
<h1 class="title"><a href=".">Jupyter a11y Project</a></h1>
<div class="subtitle"></div>
<nav>
<a href=".">Home</a>
<a href="./about/">About</a>
</nav>
<br> Click a title below the Installation instructions to expand or collapse a post.
<hr>
</header>
</div>
<div class="container" id="notebook-container">
<h3 data-target="#Installation">Installing the Extension</h3> Learn how to install the a11y nbreader nbextension
<br>
<br>
<div id="Installation">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>Getting started with <code>nbreader</code> is pretty simple. Run the following cells of code in any notebook to download and install the extension.</p>
<div class="highlight"><pre><span class="kn">import</span> <span class="nn">notebook.nbextensions</span>
<span class="n">nbreader</span> <span class="o">=</span> <span class="s">'https://raw.githubusercontent.com/jameslmartin/jupyter-a11y/master/nbreader.js'</span>
<span class="n">notebook</span><span class="o">.</span><span class="n">nbextensions</span><span class="o">.</span><span class="n">install_nbextension</span><span class="p">(</span><span class="n">nbreader</span><span class="p">,</span> <span class="n">user</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span></pre></div>
<p>After the file is downloaded, load the extension by running this block of code with the JavaScript magic:</p>
<div class="highlight"><pre><span class="o">%%</span><span class="n">javascript</span>
<span class="n">Jupyter</span><span class="o">.</span><span class="n">utils</span><span class="o">.</span><span class="n">load_extensions</span><span class="p">(</span><span class="s">'nbreader'</span><span class="p">)</span></pre></div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h4 id="Keyboard-shortcuts">Keyboard shortcuts</h3>
<p>Click <code>Help > Keyboard Shortcuts</code> to see your available list of shortcuts. Several\ of the main functions include:</p>
<ul>
<li><code>Shift-R</code> to read the highlighted cell </li>
<li><code>Shift-ESC</code> to cancel reading of the cell (useful for code with links and multiple lines) </li>
<li><code>Shift-S</code> to skip the current line of the code cell being read </li>
</ul>
<p>If you have any ideas for how to expand and build on the functionality of the nbreader, get in touch by leaving a comment on the current <a href="https://gist.github.com/jameslmartin/b52f4778782fa4a61dbd">gist page</a>.</p>
<h4 id="Persisting-across-notebooks">Persisting across notebooks</h3>
<p>To persist the <code>nbreader</code> extension, run the following code to modify your Jupyter configuration profile:</p>
<div class="highlight"><pre><span class="kn">from</span> <span class="nn">notebook.services.config</span> <span class="kn">import</span> <span class="n">ConfigManager</span>
<span class="n">ip</span> <span class="o">=</span> <span class="n">get_ipython</span><span class="p">()</span>
<span class="n">cm</span> <span class="o">=</span> <span class="n">ConfigManager</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">ip</span><span class="p">,</span> <span class="n">profile_dir</span><span class="o">=</span><span class="n">ip</span><span class="o">.</span><span class="n">profile_dir</span><span class="o">.</span><span class="n">location</span><span class="p">)</span>
<span class="n">cm</span><span class="o">.</span><span class="n">update</span><span class="p">(</span><span class="s">'notebook'</span><span class="p">,</span> <span class="p">{</span><span class="s">"load_extensions"</span><span class="p">:</span> <span class="p">{</span><span class="s">"nbreader"</span><span class="p">:</span> <span class="bp">True</span><span class="p">}})</span></pre></div>
<p>To learn more, check out <a href="http://mindtrove.info/#nb-extensions">Pete Parente's</a> post about extending Jupyter notebooks. Pete also walks through an example of writing your own nbextension.</p>
</div>
</div>
</div>
</div>
<!--
=========================== End of Installation ===========================
-->
<h3 data-target="#Creating" data-toggle="collapse" class="post-title">Creating a new notebook extension</h3>
Get a breif overview of how to create a new nbextension <br> <br>
<div id="Creating" class="collapse">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>Creating a new notebook extension (nbextension) is easy. Jupyter nbextensions are written and installed using JavaScript. From my explorations, I've found that nbextensions consist of an outer function that is loaded upon a notebook being booted. There are a few different ways to write nbextensions, but I've observed the following structure:</p>
<div class="highlight"><pre><span class="nx">define</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<span class="s2">"use strict"</span>
<span class="kd">var</span> <span class="nx">Jupyter</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'base/js/namespace'</span><span class="p">);</span>
<span class="p">...</span>
<span class="kd">var</span> <span class="nx">load_extension</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="p">...</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">load_ipython_extension</span><span class="o">:</span> <span class="nx">load_extension</span> <span class="p">}</span>
<span class="p">})</span></pre></div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h4 id="Keyboard-bindings-and-loading-the-extension">Keyboard bindings and loading the extension</h3>
<p>Digging a little further, the <code>load_ipython_extension</code> function is very important. For example, this is the current iteration for <code>reader</code>:</p>
<div class="highlight"><pre><span class="kd">var</span> <span class="nx">load_extension</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="kd">var</span> <span class="nx">_read</span> <span class="o">=</span> <span class="nx">Jupyter</span><span class="p">.</span><span class="nx">keyboard_manager</span><span class="p">.</span><span class="nx">actions</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="nx">read</span><span class="p">,</span> <span class="s1">'read highlighted cell'</span><span class="p">,</span> <span class="s1">'accessibility'</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">_kill</span> <span class="o">=</span> <span class="nx">Jupyter</span><span class="p">.</span><span class="nx">keyboard_manager</span><span class="p">.</span><span class="nx">actions</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="nx">kill</span><span class="p">,</span> <span class="s1">'cancel reading of cell'</span><span class="p">,</span> <span class="s1">'accessibility'</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">_mode</span> <span class="o">=</span> <span class="nx">Jupyter</span><span class="p">.</span><span class="nx">keyboard_manager</span><span class="p">.</span><span class="nx">actions</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="nx">get_mode</span><span class="p">,</span> <span class="s1">'read the mode of current cell'</span><span class="p">,</span> <span class="s1">'accessibility'</span><span class="p">)</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Reader Loaded"</span><span class="p">)</span>
<span class="nx">Jupyter</span><span class="p">.</span><span class="nx">keyboard_manager</span><span class="p">.</span><span class="nx">command_shortcuts</span><span class="p">.</span><span class="nx">add_shortcut</span><span class="p">(</span><span class="s1">'Shift-R'</span><span class="p">,</span> <span class="nx">_read</span><span class="p">)</span>
<span class="nx">Jupyter</span><span class="p">.</span><span class="nx">keyboard_manager</span><span class="p">.</span><span class="nx">command_shortcuts</span><span class="p">.</span><span class="nx">add_shortcut</span><span class="p">(</span><span class="s1">'Shift-ESC'</span><span class="p">,</span> <span class="nx">_kill</span><span class="p">)</span>
<span class="nx">Jupyter</span><span class="p">.</span><span class="nx">keyboard_manager</span><span class="p">.</span><span class="nx">command_shortcuts</span><span class="p">.</span><span class="nx">add_shortcut</span><span class="p">(</span><span class="s1">'CTRL-M'</span><span class="p">,</span> <span class="nx">_mode</span><span class="p">)</span>
<span class="p">}</span></pre></div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>Note that we are registering several functions (<code>read</code>, <code>kill</code>, and <code>get_mode</code>) to the Jupyter keyboard manager as <em>actions</em>, then associating shortcuts.</p>
<p>From my observations, this <code>load_extension</code> function is called for every extension you have installed for that notebook.</p>
<p>To double check these shortcuts are registered, click <code>Help</code> then <code>Keyboard Shortcuts</code>. The messages passed as the second argument to the <code>register</code> function are <strong>not</strong> the ones displayed in the <code>Keyboard Shortcuts</code> window. Let's take a look at the <code>kill</code> function specifically to see where these messages are specified.</p>
<div class="highlight"><pre><span class="kd">var</span> <span class="nx">kill</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">help</span><span class="o">:</span><span class="s1">'cancel reading of cell'</span><span class="p">,</span>
<span class="nx">handler</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">speechSynthesis</span><span class="p">.</span><span class="nx">cancel</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span></pre></div>
<p>We see the help messages are specified as a property of the kill action.</p>
<p>Each action is an object with at least a help message and a handler, which is a function. In the case of <code>kill</code>, it simply cancels all speech messages in the queue. Note that the handler function need not take any arguments.</p>
</div>
</div>
</div>
</div>
<!--
=========================== End of Installation ===========================
-->
<h3 data-target="#Binding" data-toggle="collapse" class="post-title">Binding kernel events</h3>
Get a breif overview of how to bind Jupyter kernel events to JavaScript functions <br> <br>
<div id="Binding" class="collapse">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>We can also bind JavaScript functions to kernel events. This gives us tremendous flexibility to wrap kernel events by "hooking" into the communication between the notebook UI and the kernel. This allows us to take an approach similar to <a href="https://github.com/tvraman/emacspeak">emacspeak</a>.</p>
<p>For example, we can play earcons as the kernel transitions from busy to idle. Similar to the gray circle in the top right of the notebook interface or the [*] seen next to the running cell, this earcon gives users an idea of the state of the kernel.</p>
<p>The following code cell is an example of how to tap into Jupyter's events data structure.</p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered_html">
<div class="inner_cell">
<div class="highlight"><pre><span class="o">%%</span><span class="nx">javascript</span>
<span class="kd">var</span> <span class="nx">events</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'base/js/events'</span><span class="p">);</span> <span class="c1">//Use require.js to get list of events</span>
<span class="c1">//...</span>
<span class="cm">/*</span>
<span class="cm"> * earcon_setup(): loads a sound to be played while code is executing by the kernel. Provides knowledge of</span>
<span class="cm"> * kernel state.</span>
<span class="cm"> */</span>
<span class="kd">var</span> <span class="nx">earcon_setup</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">events</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">play</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Play"</span><span class="p">)</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">stop</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Stop"</span><span class="p">)</span>
<span class="p">};</span>
<span class="nx">events</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">"kernel_idle.Kernel"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">stop</span><span class="p">();</span> <span class="c1">// Bind the stop() function to when the idle event fires</span>
<span class="p">})</span>
<span class="nx">events</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">"kernel_busy.Kernel"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">play</span><span class="p">();</span> <span class="c1">// Bind the play() function to when the busy event fires</span>
<span class="p">})</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>In the developer's console in Chrome, we can see when these events are fired. The kernel transitions between the idle/busy states on startup, so this is a fairly naive binding.</p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p><img src="./screenshot_1.png" style="height:100px;width:auto;"></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>The above screenshot was generated by running a code cell twice. Looking in the code for my test file (<code>reader_test.js</code>) for the <code>reader</code> nbextension, we see the code:</p>
<p><img src="./screenshot_2.png" style="height:400px;width:auto;"></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>Note that this <code>earcon_setup</code> function is called in the <code>load_extension</code> function discussed in a previous post. This function makes use of closures in JavaScript. The functions <code>play()</code> and <code>stop()</code> store the Howl and allow the sound to be played when the kernel events fire.</p>
</div>
</div>
</div>
</div>
<!--
=========================== End of kernel events ===========================
-->
<h3 data-target="#Libraries" data-toggle="collapse" class="post-title">Loading external JavaScript libraries for use in nbextensions</h3>
Learn how to include other JavaScript libraries in your nbextension using jQuery<br> <br>
<div id="Libraries" class="collapse">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>One of the great features of JavaScript programming on the web is the ability to embed other libraries as scripts in your website. Libraries like jQuery, Bootstrap, and D3.js are three examples and add tons of flexibility to websites. Since notebook extensions are not yet maintained with a package manager like <a href="https://www.npmjs.com/">npm</a>, the easiest way to include JavaScript libraries is through <a href="https://jquery.com/">jQuery</a>. Jupyter's front end already makes use of jQuery, so we can use the jQuery <code>$.getScript()</code> function to download whatever we need.</p>
<p><code>nbreader</code> uses <a href="http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library">howler.js</a> to create and trigger sounds when kernel events are fired. The code for grabbing the <code>howler.js</code> library is below:</p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="input_area">
<div class=" highlight"><pre><span class="o">%%</span><span class="nx">javascript</span>
<span class="kd">var</span> <span class="nx">howler</span> <span class="o">=</span> <span class="s1">'https://cdnjs.cloudflare.com/ajax/libs/howler/1.1.28/howler.min.js'</span><span class="p">;</span>
<span class="c1">// jQuery Deferreds</span>
<span class="kd">var</span> <span class="nx">$voices_loaded</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">$howler</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">getScript</span><span class="p">(</span><span class="nx">howler</span><span class="p">)</span>
<span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">script</span><span class="p">,</span> <span class="nx">textStatus</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Howler loaded"</span><span class="p">);</span>
<span class="nx">$howler</span><span class="p">.</span><span class="nx">resolve</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">jqxhr</span><span class="p">,</span> <span class="nx">settings</span><span class="p">,</span> <span class="nx">exception</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Howler failed to load"</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">exception</span><span class="p">)</span>
<span class="p">});</span>
</pre></div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>In addition to the <code>$.getScript()</code> function, we make use of jQuery Deferred objects. These are super useful abstractions that allow us to ensure the libraries load before the rest of the nbextension is loaded. In the <code>load_extension</code> function mentioned in the Installation post, we first wait on the Deferred objects to be resolved.</p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="input_area">
<div class="highlight"><pre><span class="o">%%</span><span class="nx">javascript</span>
<span class="kd">var</span> <span class="nx">load_extension</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="nx">$howler</span><span class="p">,</span> <span class="nx">$voices_loaded</span><span class="p">)</span>
<span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Scripts loaded"</span><span class="p">)</span>
<span class="p">...</span>
<span class="p">});</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p><code>$voices_loaded</code> is another Deferred object I use to make sure the Web Speech voices load before the rest of the extension is loaded. As you can see, the jQuery <code>$.when()</code> function blocks waiting for all the Deferred objects it is given as arguments. With the combination of <code>$.getScript()</code> and Deferred objects, we can expand notebook extensions to make use of any JavaScript library.</p>
</div>
</div>
</div>
</div>
<!--
=========================== End of including libraries ===========================
-->
<h3 data-target="#Events" data-toggle="collapse" class="post-title">Triggering events in the Kernel</h3>
View a list of events that are triggered by the kernel in Jupyter Notebook <br> <br>
<div id="Events" class="collapse">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>We previously showed you can bind actions of the Notebook to events that are triggered by the Kernel. We have started a running list of these events located <a href="http://jameslmartin.github.io/jupyter-a11y/events.html" target="_blank">here</a>. If you know what a specific event does, please contact me by finding my email address below.
</p>
</div>
</div>
</div>
</div>
<!--
=========================== End of listing events ===========================
-->
<h3 data-target="#Delegation" data-toggle="collapse" class="post-title">Delegation with jQuery and binding functions to events</h3>
Read how the nbreader extension uses delegation to read keystrokes<br> <br>
<div id="Delegation" class="collapse">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>In order to mimic Emacspeak's function of reading characters as they are typed, we use jQuery delegation to bind a listener to current selected cell in the notebook. The code is below:
</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'keypress'</span><span class="p">,</span> <span class="s1">'.code_cell.selected'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">charCode</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">charCode</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">mode</span> <span class="o">===</span> <span class="s1">'edit'</span> <span class="o">&&</span> <span class="nx">e</span><span class="p">.</span><span class="nx">ctrlKey</span> <span class="o">===</span> <span class="kc">false</span><span class="p">){</span>
<span class="nx">read_character</span><span class="p">(</span><span class="nx">charCode</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">})</span>
</pre></div>
<p>This listener allows us to capture keypress events. We filter out keypresses that are a result of keyboard shortcuts and send the character code to another function that creates a message for the WebSpeech API. Special messages for charactes such as braces and slashes are created, but alphanumeric characters can be converted to strings and read directly. As this extension progresses, we will add support for more ASCII characters.</p>
<p>One feature we are looking to implement would be to read an entire word whenever a whitespace is entered after a character.</p>
</div>
</div>
</div>
</div>
<!--
=========================== End of delegation ===========================
<h3 data-target="#WebAudio" data-toggle="collapse" class="post-title">Simple sounds using the WebAudio API</h3>
Read how the reader extension makes use of the WebAudio API to play simple sounds<br> <br>
<div id="WebAudio" class="collapse">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
</div>
</div>
</div>
=========================== End of WebAudio ===========================
-->
<!-- Footer Section -->
<div class="container">
<hr>
<div class="row" id="footer-section">
<div class="col-md-4" id="contact">
<h3>Contact</h3>
<div>
<i class="fa fa-envelope-o"></i> <a title="Email address" href="mailto:[email protected]"> [email protected]</a>
<br/>
<i class="fa fa-github"></i> <a title="GitHub account" href="http://github.com/jameslmartin">github.com/jameslmartin</a>
<br/>
<br/>
</div>
</div>
<!--
<div class="col-md-4">
<h3>Posts</h3>
Installing the extension <br>
Creating a new notebook extension <br>
Binding kernel events <br>
Expanding Web Speech API queue <br>
</div>
-->
</div>
</div>
</body>
</html>