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
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html >
<head><title>nip2 for nerds</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="TeX4ht (http://www.tug.org/tex4ht/)">
<meta name="originator" content="TeX4ht (http://www.tug.org/tex4ht/)">
<!-- 3,html -->
<meta name="src" content="nipguide.tex">
<link rel="stylesheet" type="text/css" href="nipguide.css">
</head><body
>
<!--l. 317--><div class="crosslinks"><p class="noindent">[<a
href="nipguidese2.html" >prev</a>] [<a
href="nipguidese2.html#tailnipguidese2.html" >prev-tail</a>] [<a
href="#tailnipguidese3.html">tail</a>] [<a
href="nipguidech2.html#nipguidese3.html" >up</a>] </p></div>
<h3 class="sectionHead"><span class="titlemark">2.3 </span> <a
id="x9-80002.3"></a><span
class="phvr7t-x-x-80">nip2 </span>for nerds</h3>
<!--l. 318--><p class="noindent" ><a name="nip_label_sec:nerdtour"></a>
<!--l. 320--><p class="indent" > This section sprints through a bit of <span
class="phvr7t-x-x-80">nip2 </span>programming,
see <span
class="cmsy-10"></span><a
href="nipguidech6.html#x31-570006">6<!--tex4ht:ref: sec:program --></a> for full details and a more formal definition of the
language.
<!--l. 324--><p class="indent" > The insides of <span
class="phvr7t-x-x-80">nip2 </span>are built with <span
class="phvr7t-x-x-80">nip2</span>’s own programming
language. It’s a pure lazy functional language with classes.
It’s C’s expression syntax (more or less) plus approximately
Miranda/Haskell function syntax, plus some basic class
stuff. <span
class="phvr7t-x-x-80">nip2</span>’s main window is a class browser for this
programming language.
<!--l. 330--><p class="indent" > Click on <span
class="phvr7t-x-x-80">Toolkits </span>/ <span
class="phvr7t-x-x-80">Edit Toolkits </span>in <span
class="phvr7t-x-x-80">nip2</span>’s main window to
pop up the programming window (see <span
class="cmsy-10"></span><a
href="nipguidese12.html#x20-380004.4">4.4<!--tex4ht:ref: sec:progwin --></a> for details on
all the bits in the window), then in the edit area there
type:
<div class="verbatim" id="verbatim-1">
// add two things
 <br />
 <br />Fred a b = class {
 <br />  sum = a + b;
 <br />}
</div>
<!--l. 340--><p class="nopar" >
<!--l. 342--><p class="indent" > This defines a class called <span
class="phvr7t-x-x-80">Fred </span>whose constructor takes
two arguments, <span
class="phvr7t-x-x-80">a </span>and <span
class="phvr7t-x-x-80">b</span>. There’s one member, called <span
class="phvr7t-x-x-80">sum</span>,
which is <span
class="phvr7t-x-x-80">a </span>and <span
class="phvr7t-x-x-80">b </span>added together.
<!--l. 346--><p class="indent" > In the program window, click <span
class="phvr7t-x-x-80">File </span>/ <span
class="phvr7t-x-x-80">Process</span>. This
makes <span
class="phvr7t-x-x-80">nip2 </span>read what you typed, parse it, compile it and
update itself. The program window should now look like
Figure <a
href="#x9-800111">2.11<!--tex4ht:ref: fg:Fred --></a>.
<!--l. 350--><p class="indent" > <hr class="figure"><div class="figure"
>
<a
id="x9-800111"></a>
<div class="center"
>
<!--l. 351--><p class="noindent" >
<!--l. 351--><p class="noindent" ><img
src="figs/snap8.jpg" alt="PIC"
></div>
<br /> <div class="caption"
><span class="id">Figure 2.11: </span><span
class="content">Programming <span
class="phvr7t-x-x-80">Fred</span></span></div><!--tex4ht:label?: x9-800111 -->
<!--l. 353--><p class="noindent" ><a name="nip_label_fg:Fred"></a>
<!--l. 354--><p class="indent" > </div><hr class="endfigure">
<!--l. 356--><p class="indent" > If you look back at the main <span
class="phvr7t-x-x-80">nip2 </span>window, a new
menu will have appeared under <span
class="phvr7t-x-x-80">Toolkits </span>called <span
class="phvr7t-x-x-80">untitled</span>.
If you click on that, there will be a menu item called
<span
class="phvr7t-x-x-80">Fred</span>. Let your mouse linger, and you’ll see a tooltip
too.
<!--l. 361--><p class="indent" > In the main window, type <span
class="phvr7t-x-x-80">Fred 2 3 </span>into the box at the
bottom of the current column. Press Return and <span
class="phvr7t-x-x-80">nip2</span>
will make a <span
class="phvr7t-x-x-80">Fred </span>for you. Click on the down arrow to
the left of your new <span
class="phvr7t-x-x-80">Fred </span>once to see the members of
<span
class="phvr7t-x-x-80">Fred </span>(just <span
class="phvr7t-x-x-80">sum </span>in this case), click again to see the class
parameters too. The main window should look like
Figure <a
href="#x9-800212">2.12<!--tex4ht:ref: fg:mainFred --></a>.
<!--l. 367--><p class="indent" > <hr class="figure"><div class="figure"
>
<a
id="x9-800212"></a>
<div class="center"
>
<!--l. 368--><p class="noindent" >
<!--l. 368--><p class="noindent" ><img
src="figs/snap9.jpg" alt="PIC"
></div>
<br /> <div class="caption"
><span class="id">Figure 2.12: </span><span
class="content">Main window <span
class="phvr7t-x-x-80">Fred</span></span></div><!--tex4ht:label?: x9-800212 -->
<!--l. 370--><p class="noindent" ><a name="nip_label_fg:mainFred"></a>
<!--l. 371--><p class="indent" > </div><hr class="endfigure">
<!--l. 373--><p class="indent" > Click to the right of <span
class="phvr7t-x-x-80">b</span>, type in a new value and press
Return. The <span
class="phvr7t-x-x-80">sum </span>member should update. <span
class="phvr7t-x-x-80">nip2 </span>keeps track of
dependencies between rows, but it also tracks dependencies
inside rows, both ones that come from the class, and ones
created by any edits you do to the class instance after
creating it. You won’t see it in a simple example, but <span
class="phvr7t-x-x-80">nip2</span>
also discovers and tracks dependencies which can arise at
run time. Click on the text just to the right of the <span
class="phvr7t-x-x-80">b </span>button
again, type <span
class="phvr7t-x-x-80">a </span>and press Return. Now edit <span
class="phvr7t-x-x-80">a</span>: press Return and
both <span
class="phvr7t-x-x-80">b </span>and <span
class="phvr7t-x-x-80">sum </span>will update.
<!--l. 383--><p class="indent" > You can use <span
class="phvr7t-x-x-80">Fred </span>to add any two things together.
Click on <span
class="phvr7t-x-x-80">Toolkits </span>/ <span
class="phvr7t-x-x-80">Widgets </span>/ <span
class="phvr7t-x-x-80">Scale </span>to make a scale widget,
press Ctrl-U (the keyboard shortcut for <span
class="phvr7t-x-x-80">Edit </span>/ <span
class="phvr7t-x-x-80">Duplicate</span>)
to duplicate it, and finally click on <span
class="phvr7t-x-x-80">Toolkits </span>/ <span
class="phvr7t-x-x-80">untitled </span>/
<span
class="phvr7t-x-x-80">Fred</span>. Open up the new <span
class="phvr7t-x-x-80">Fred </span>and try dragging some of
the scales around. The main window will look like
Figure <a
href="#x9-800313">2.13<!--tex4ht:ref: fg:slideFred --></a>.
<!--l. 390--><p class="indent" > <hr class="figure"><div class="figure"
>
<a
id="x9-800313"></a>
<div class="center"
>
<!--l. 391--><p class="noindent" >
<!--l. 391--><p class="noindent" ><img
src="figs/snap10.jpg" alt="PIC"
></div>
<br /> <div class="caption"
><span class="id">Figure 2.13: </span><span
class="content">Scale <span
class="phvr7t-x-x-80">Fred</span></span></div><!--tex4ht:label?: x9-800313 -->
<!--l. 393--><p class="noindent" ><a name="nip_label_fg:slideFred"></a>
<!--l. 394--><p class="indent" > </div><hr class="endfigure">
<!--l. 396--><p class="indent" > The scales are classes too (instances of <span
class="phvr7t-x-x-80">Scale</span>). You can
open them up and do strange things with them as well. Open
up one of the scales you made (eg. <span
class="phvr7t-x-x-80">A2 </span>in Figure <a
href="#x9-800313">2.13<!--tex4ht:ref: fg:slideFred --></a>) and
change the <span
class="phvr7t-x-x-80">from </span>parameter to be <span
class="phvr7t-x-x-80">A3.value</span>. Now try dragging
the sliders again.
<!--l. 401--><p class="indent" > Try dragging the <span
class="phvr7t-x-x-80">sum </span>slider. Now go back and drag one of
the original sliders. You’ll see that <span
class="phvr7t-x-x-80">sum </span>no longer updates,
it’s stuck at the last position you dragged it to. This is
because there are now two things affecting the value of <span
class="phvr7t-x-x-80">sum</span>:
the underlying code (the <span
class="phvr7t-x-x-80">a + b </span>inside <span
class="phvr7t-x-x-80">Fred</span>), and the position
you dragged the slider representing <span
class="phvr7t-x-x-80">sum </span>to. <span
class="phvr7t-x-x-80">nip2 </span>has the rule
that graphical edits (dragging the slider) override code. To
make <span
class="phvr7t-x-x-80">sum </span>update again, right click on the <span
class="phvr7t-x-x-80">sum </span>button and
select <span
class="phvr7t-x-x-80">Reset </span>from the pop up menu. Now drag one of the
input sliders again, and <span
class="phvr7t-x-x-80">sum </span>will start updating once
more.
<!--l. 411--><p class="indent" > Classes can inherit from other classes. Go back to the
program window, click on <span
class="phvr7t-x-x-80">File </span>/ <span
class="phvr7t-x-x-80">New </span>/ <span
class="phvr7t-x-x-80">Tool </span>to clear the edit
window, and type:
<div class="verbatim" id="verbatim-2">
// multiply two things
 <br />
 <br />Jim a b = class Fred a b {
 <br />  product = a ⋆ b;
 <br />}
</div>
<!--l. 420--><p class="nopar" >
<!--l. 422--><p class="indent" > This defines a class called <span
class="phvr7t-x-x-80">Jim </span>which inherits from <span
class="phvr7t-x-x-80">Fred</span>.
Click <span
class="phvr7t-x-x-80">File </span>/ <span
class="phvr7t-x-x-80">Process</span>, then back in the main window, type <span
class="phvr7t-x-x-80">Jim 4</span>
<span
class="phvr7t-x-x-80">5 </span>into the bottom of the column. Click down once to expose
the members (just <span
class="phvr7t-x-x-80">product</span>), click again to expose the
parameters as well (<span
class="phvr7t-x-x-80">a </span>and <span
class="phvr7t-x-x-80">b</span>), and click a third time
to expose the superclass member (which should be
an instance of <span
class="phvr7t-x-x-80">Fred</span>). You can also open up the <span
class="phvr7t-x-x-80">super</span>
member and see inside the <span
class="phvr7t-x-x-80">Fred </span>that this <span
class="phvr7t-x-x-80">Jim </span>is using as its
superclass. <span
class="phvr7t-x-x-80">A5 </span>will respond to both <span
class="phvr7t-x-x-80">product </span>and <span
class="phvr7t-x-x-80">sum</span>. See
Figure <a
href="#x9-800414">2.14<!--tex4ht:ref: fg:Jim --></a>.
<!--l. 433--><p class="indent" > <hr class="figure"><div class="figure"
>
<a
id="x9-800414"></a>
<div class="center"
>
<!--l. 434--><p class="noindent" >
<!--l. 434--><p class="noindent" ><img
src="figs/snap11.jpg" alt="PIC"
></div>
<br /> <div class="caption"
><span class="id">Figure 2.14: </span><span
class="content">Browsing <span
class="phvr7t-x-x-80">Jim</span></span></div><!--tex4ht:label?: x9-800414 -->
<!--l. 436--><p class="noindent" ><a name="nip_label_fg:Jim"></a>
<!--l. 437--><p class="indent" > </div><hr class="endfigure">
<!--l. 439--><p class="indent" > <span
class="phvr7t-x-x-80">nip2 </span>has about 20 different graphical classes like
<span
class="phvr7t-x-x-80">Scale</span>. Whenever a row takes a new value, <span
class="phvr7t-x-x-80">nip2 </span>checks to
see if that value is an instance of one of these special
classes, and if it is, it will add a graphical element to
the row display which represents that class’s value. It
builds the graphical part by looking inside the class
for certain members (for example, the scale graphic
looks for members called <span
class="phvr7t-x-x-80">from</span>, <span
class="phvr7t-x-x-80">to </span>and <span
class="phvr7t-x-x-80">value</span>). When you
change the graphic (maybe by dragging the scale), <span
class="phvr7t-x-x-80">nip2</span>
rebuilds the class by looking inside for a edit member (eg.
<span
class="phvr7t-x-x-80">Scale</span><span
class="phvr7t-x-x-80">_edit</span>) or if that’s not defined, a constructor member (eg.
<span
class="phvr7t-x-x-80">Scale</span>).
<!--l. 449--><p class="indent" > You can make your own graphic widgets by subclassing
<span
class="phvr7t-x-x-80">nip2</span>’s built-in ones. By selectively overriding default
constructors and adding edit members, you can control how
your new widget will behave in expressions, and how it will
behave if it’s edited graphically.
<!--l. 454--><p class="indent" > Make a new column, load up an image (use <span
class="phvr7t-x-x-80">File </span>/ <span
class="phvr7t-x-x-80">Open</span>),
open an image viewer (double-click on the thumbnail), drag
out two regions on it (hold down Ctrl and the left mouse
button and drag down and right). Your main window should
look like Figure <a
href="#x9-800515">2.15<!--tex4ht:ref: fg:twomoreregions --></a>.
<!--l. 459--><p class="indent" > <hr class="figure"><div class="figure"
>
<a
id="x9-800515"></a>
<div class="center"
>
<!--l. 460--><p class="noindent" >
<!--l. 460--><p class="noindent" ><img
src="figs/snap12.jpg" alt="PIC"
></div>
<br /> <div class="caption"
><span class="id">Figure 2.15: </span><span
class="content">Two more regions</span></div><!--tex4ht:label?: x9-800515 -->
<!--l. 462--><p class="noindent" ><a name="nip_label_fg:twomoreregions"></a>
<!--l. 463--><p class="indent" > </div><hr class="endfigure">
<!--l. 465--><p class="indent" > <span
class="phvr7t-x-x-80">im</span><span
class="phvr7t-x-x-80">_insert </span>is a VIPS operation that puts one image inside
another at an (x, y) position. VIPS operations work on VIPS
images. The <span
class="phvr7t-x-x-80">value </span>member of an <span
class="phvr7t-x-x-80">Image </span>or <span
class="phvr7t-x-x-80">Region </span>is the VIPS
image that underlies the <span
class="phvr7t-x-x-80">nip2 </span>row.
<!--l. 469--><p class="indent" > You can use <span
class="phvr7t-x-x-80">im</span><span
class="phvr7t-x-x-80">_insert </span>to make a thing to join two images
together. Back in the program window, click on <span
class="phvr7t-x-x-80">File </span>/ <span
class="phvr7t-x-x-80">New </span>/
<span
class="phvr7t-x-x-80">Tool </span>and enter:
<div class="verbatim" id="verbatim-3">
// join two images left-right
 <br />
 <br />Join a b = class Image value {
 <br />  shim = Scale "Spacing" 0 1000 0;
 <br />  value = im_insert a.value b.value
 <br />    (a.width + shim.value) 0;
 <br />}
</div>
<!--l. 480--><p class="nopar" >
<!--l. 482--><p class="noindent" >Click <span
class="phvr7t-x-x-80">File </span>/ <span
class="phvr7t-x-x-80">Process</span>. This defines a class <span
class="phvr7t-x-x-80">Join </span>which subclasses
the <span
class="phvr7t-x-x-80">Image </span>graphic.
<!--l. 486--><p class="indent" > Now select your two regions (click on the first one,
shift-click on the second) and click on <span
class="phvr7t-x-x-80">Toolkits </span>/ <span
class="phvr7t-x-x-80">untitled </span>/ <span
class="phvr7t-x-x-80">Join</span>.
Alternatively, just click <span
class="phvr7t-x-x-80">Join </span>and it’ll be given the borrom
two items in the column. A new <span
class="phvr7t-x-x-80">Join </span>row will appear. Open
it up and drag the slider to set the spacing between the two
joined images. Go back to the image viewer for the image
file you loaded and try dragging one of the regions.
Figure <a
href="#x9-800616">2.16<!--tex4ht:ref: fg:myjoin --></a> shows this class in action. The thing in <span
class="phvr7t-x-x-80">Toolkits </span>/
<span
class="phvr7t-x-x-80">Image </span>/ <span
class="phvr7t-x-x-80">Join </span>/ <span
class="phvr7t-x-x-80">Left to Right </span>is just a slightly fancier version of
this.
<!--l. 497--><p class="indent" > <hr class="figure"><div class="figure"
>
<a
id="x9-800616"></a>
<div class="center"
>
<!--l. 498--><p class="noindent" >
<!--l. 498--><p class="noindent" ><img
src="figs/snap13.jpg" alt="PIC"
></div>
<br /> <div class="caption"
><span class="id">Figure 2.16: </span><span
class="content">Joining two images with <span
class="phvr7t-x-x-80">Join</span></span></div><!--tex4ht:label?: x9-800616 -->
<!--l. 500--><p class="noindent" ><a name="nip_label_fg:myjoin"></a>
<!--l. 501--><p class="indent" > </div><hr class="endfigure">
<!--l. 503--><p class="indent" > You can change how the graphic widgets behave by
subclassing them. Try:
<div class="verbatim" id="verbatim-4">
Scale_int c f t v = class
 <br />  scope.Scale c f t ((int) v) {
 <br />  Scale = Scale_int;
 <br />}
</div>
<!--l. 510--><p class="nopar" >
<!--l. 512--><p class="noindent" >This defines a new scale class called <span
class="phvr7t-x-x-80">Scale</span><span
class="phvr7t-x-x-80">_int </span>which can
only take integer values. The <span
class="phvr7t-x-x-80">Scale = Scale</span><span
class="phvr7t-x-x-80">_int; </span>line is
<span
class="phvr7t-x-x-80">Scale</span><span
class="phvr7t-x-x-80">_int </span>overriding <span
class="phvr7t-x-x-80">Scale</span>’s constructor, so that a <span
class="phvr7t-x-x-80">Scale</span><span
class="phvr7t-x-x-80">_int</span>
stays a <span
class="phvr7t-x-x-80">Scale</span><span
class="phvr7t-x-x-80">_int </span>when you drag. Because there’s a local
called <span
class="phvr7t-x-x-80">Scale</span>, <span
class="phvr7t-x-x-80">Scale</span><span
class="phvr7t-x-x-80">_int </span>needs to use <span
class="phvr7t-x-x-80">scope.Scale </span>to refer to the
superclass.
<!--l. 519--><p class="indent" > Here’s a version of <span
class="phvr7t-x-x-80">Mark </span>which can only be dragged in a
circle. You pass it an image to display on, an xy centre
position, a radius and a start angle.
<div class="verbatim" id="verbatim-5">
Mark_circle image x y r a = class
 <br />  scope.Mark image _x' _y' {
 <br />  // get rect cods for our point
 <br />  _pos = (x, y) + rectangular (r, a);
 <br />  _x' = re _pos;
 <br />  _y' = im _pos;
 <br />
 <br />  Mark i l t
 <br />    = this.Mark_circle i x y r a'
 <br />  {
 <br />    // vector from centre of
 <br />    // circle to new position
 <br />    u = (l, t) - (x, y);
 <br />
 <br />    // angle of vector
 <br />    a' = im (polar u);
 <br />  }
 <br />}
</div>
<!--l. 541--><p class="nopar" >
<!--l. 1--><div class="crosslinks"><p class="noindent">[<a
href="nipguidese2.html" >prev</a>] [<a
href="nipguidese2.html#tailnipguidese2.html" >prev-tail</a>] [<a
href="nipguidese3.html" >front</a>] [<a
href="nipguidech2.html#nipguidese3.html" >up</a>] </p></div>
<!--l. 1--><p class="indent" > <a
id="tailnipguidese3.html"></a>
</body></html>
|
