dialog_prefs.html 25.6 KB
Newer Older
pokergaming's avatar
pokergaming committed
1
<!DOCTYPE html>
2
<html id="prefs_html_element">
pokergaming's avatar
pokergaming committed
3
  <head>
4
    <link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
pokergaming's avatar
pokergaming committed
5
  </head>
6
  <body class="dialog_body prefs_body">
7
8
9
10
11
12
13
14
15
    <div class="container noselect prefs_container">
      <div class="prefs_tab_group">
        <input type="radio"
               name="prefs_radio_group"
               id="audio_tab_radio"
               class="tab1 prefs_tab"
               checked="checked" />
        <label for="audio_tab_radio" data-i18n="[title]prefs.heading.audio_tt">
          <span data-i18n="prefs.heading.audio"></span>
16
        </label>
17
18
19
20
21
22
23

        <input type="radio"
               name="prefs_radio_group"
               id="midi_tab_radio"
               class="tab2 prefs_tab"/>
        <label for="midi_tab_radio" data-i18n="[title]prefs.heading.midi_tt">
          <span data-i18n="prefs.heading.midi"></span>
24
        </label>
25
26
27
28
29
30
31

        <input type="radio"
               name="prefs_radio_group"
               id="gui_tab_radio"
               class="tab3 prefs_tab"/>
        <label for="gui_tab_radio" data-i18n="[title]prefs.heading.gui_tt">
          <span data-i18n="prefs.heading.gui"></span>
32
        </label>
33
34

        <div class="tab1">
35
          <div class="tab_settings">
36
37
38
39
40
            <label data-i18n="[title]prefs.audio.api_tt">
              <span data-i18n="prefs.audio.api"></span>
              <select id="audio_api" onchange="change_api(this);">
              </select>
            </label>
41
42
          </div>
          <div class="tab_settings">
43
44
45
46
47
48
49
50
            <label data-i18n="[title]prefs.audio.sr_tt">
              <span data-i18n="prefs.audio.sr"></span>
              <input type="text"
                     id="rate"
                     name="rate"
                     onchange="attr_change(this);">
            </label>
          </div>
51
          <div class="tab_settings">
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
            <label data-i18n="[title]prefs.audio.blocksize_tt">
              <span data-i18n="prefs.audio.blocksize"></span>
              <select id="blocksize"
                      onchange="attr_change(this);">
                <option value="64">64</option>
                <option value="128">128</option>
                <option value="256">256</option>
                <option value="512">512</option>
                <option value="1024">1024</option>
                <option value="2048">2048</option>
              </select>
            </label>
            <label data-i18n="[title]prefs.audio.advance_tt">
              <span data-i18n="prefs.audio.advance"></span>
              <input type="text"
                     id="advance"
                     name="advance"
                     onchange="attr_change(this);">
70
71
            </label>
          </div>
72
          <div class="tab_settings">
73
74
75
76
77
78
79
80
81
82
83
84
85
            <span id="callback_container" class="hidden">
              <label data-i18n="[title]prefs.audio.callback_tt">
                <span data-i18n="prefs.audio.callback"></span>
                <input type="checkbox" id="callback" name="callback">
              </label>
            </span>
            <span id="multi_dev_container" class="hidden">
              <label data-i18n="[title]prefs.audio.callback_tt">
                <span data-i18n="prefs.audio.callback"></span>
                <input type="checkbox" id="multi-dev" name="multi-dev">
              </label>
            </span>
          </div>
86
          <table class="tab_settings">
87
            <tr>
88
89
              <td data-i18n="[title]prefs.audio.input_title_tt">
                <span data-i18n="prefs.audio.input_title"></span>
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
              </td>
              <td>
                <span data-i18n="prefs.audio.channels"></span>
              </td>
            </tr>
            <tr>
              <td>
                <select id="in1" onchange="dev_change(this);"></select>
              </td>
              <td>
                <label data-i18n="[title]prefs.audio.channels_tt">
                  <input type="text"
                   id="inchans1"
                   name="inchans1"
                   onchange="dev_change(this);">
                </label>
              </td>
            </tr>
            <tr>
              <td>
                <select id="in2" onchange="dev_change(this);"></select>
              </td>
              <td>
                <label data-i18n="[title]prefs.audio.channels_tt">
                  <input type="text"
                   id="inchans2"
                   name="inchans2"
                   onchange="dev_change(this);">
                </label>
              </td>
            </tr>
            <tr>
              <td>
                <select id="in3" onchange="dev_change(this);"></select>
              </td>
              <td>
                <label data-i18n="[title]prefs.audio.channels_tt">
                  <input type="text"
                   id="inchans3"
                   name="inchans3"
                   onchange="dev_change(this);">
                </label>
              </td>
            </tr>
            <tr>
              <td>
                <select id="in4" onchange="dev_change(this);"></select>
              </td>
              <td>
                <label data-i18n="[title]prefs.audio.channels_tt">
                  <input type="text"
                   id="inchans4"
                   name="inchans4"
                   onchange="dev_change(this);">
                </label>
              </td>
            </tr>
            <tr>
148
149
              <td data-i18n="[title]prefs.audio.output_title_tt">
                <span data-i18n="prefs.audio.output_title"></span>
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
              </td>
              <td>
                <span data-i18n="prefs.audio.channels"></span>
              </td>
            </tr>
            <tr>
              <td>
                <select id="out1" onchange="dev_change(this);"></select>
              </td>
              <td>
                <label data-i18n="[title]prefs.audio.channels_tt">
                  <input type="text"
                   id="outchans1"
                   name="outchans1"
                   onchange="dev_change(this);">
                </label>
              </td>
            </tr>
            <tr>
              <td>
                <select id="out2" onchange="dev_change(this);"></select>
              </td>
              <td>
                <label data-i18n="[title]prefs.audio.channels_tt">
                  <input type="text"
                   id="outchans2"
                   name="outchans2"
                   onchange="dev_change(this);">
                </label>
              </td>
            </tr>
            <tr>
              <td>
                <select id="out3" onchange="dev_change(this);"></select>
              </td>
              <td>
                <label data-i18n="[title]prefs.audio.channels_tt">
                  <input type="text"
                   id="outchans3"
                   name="outchans3"
                   onchange="dev_change(this);">
                </label>
              </td>
            </tr>
            <tr>
              <td>
                <select id="out4" onchange="dev_change(this);"></select>
              </td>
              <td>
                <label data-i18n="[title]prefs.audio.channels_tt">
                  <input type="text"
                   id="outchans4"
                   name="outchans4"
                   onchange="dev_change(this);">
                </label>
              </td>
            </tr>
          </table>
208
209
        </div>

210
        <div class="tab2">
211
          <div class="tab_settings">
212
213
214
215
216
217
            <label data-i18n="[title]prefs.midi.api_tt">
              <span data-i18n="prefs.midi.api"></span>
              <select id="midi_api" onchange="change_api(this);">
              </select>
            </label>
          </div>
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
          <div class="tab_settings alsa_midi">
            <label data-i18n="[title]prefs.midi.alsa_in_ports_tt">
              <span data-i18n="prefs.midi.alsa_in_ports"></span>
              <input type="text"
                     id="alsa_in_ports"
                     name="alsa_in_ports"
                     onchange="attr_change(this);">
            </label>
            <label data-i18n="[title]prefs.midi.alsa_out_ports_tt">
              <span data-i18n="prefs.midi.alsa_out_ports"></span>
              <input type="text"
                     id="alsa_out_ports"
                     name="alsa_out_ports"
                     onchange="attr_change(this);">
            </label>
          </div>
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
          <div class="tab_settings midi_devices">
            <span data-i18n="[title]prefs.midi.input_title_tt">
              <span data-i18n="prefs.midi.input_title"></span>
            </span>
            <br/>
            <select id="midi_in1" onchange="dev_change(this);"></select>
            <br/>
            <select id="midi_in2" onchange="dev_change(this);"></select>
            <br/>
            <select id="midi_in3" onchange="dev_change(this);"></select>
            <br/>
            <select id="midi_in4" onchange="dev_change(this);"></select>
            <br/>

            <span data-i18n="[title]prefs.midi.output_title_tt">
              <span data-i18n="prefs.midi.output_title"></span>
            </span>
            <br/>
            <select id="midi_out1" onchange="dev_change(this);"></select>
            <br/>
            <select id="midi_out2" onchange="dev_change(this);"></select>
            <br/>
            <select id="midi_out3" onchange="dev_change(this);"></select>
            <br/>
            <select id="midi_out4" onchange="dev_change(this);"></select>
            <br/>
          </div>
262
        </div>
263

264
        <div class="tab3">
265
          <div class="tab_settings">
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
            <label data-i18n="[title]prefs.gui.presets.gui_preset_tt">
              <span data-i18n="prefs.gui.presets.gui_preset"></span>
            </label>
            <select id="gui_preset" onchange="gui_preset_change(this);">
              <option data-i18n="prefs.gui.presets.default" value="default">
              </option>
              <option data-i18n="prefs.gui.presets.inverted" value="inverted">
              </option>
              <option data-i18n="prefs.gui.presets.vanilla" value="vanilla">
              </option>
              <option data-i18n="prefs.gui.presets.vanilla_inverted" value="vanilla_inverted">
              </option>
              <option data-i18n="prefs.gui.presets.extended" value="extended">
              </option>
              <option data-i18n="prefs.gui.presets.c64" value="c64">
              </option>
              <option data-i18n="prefs.gui.presets.subdued" value="subdued">
              </option>
              <option data-i18n="prefs.gui.presets.strongbad" value="strongbad">
              </option>
            </select>
          </div>
288
        </div>
289
      </div>
290

291
292
293
294
295
296
297
298
299
300
      <div class="submit_buttons prefs_buttons">
        <button type="button" onClick="ok()" data-i18n="[title]prefs.ok_tt">
          <span data-i18n="prefs.ok"></span>
        </button>
        <button type="button" onClick="apply()" data-i18n="[title]prefs.apply_tt">
        <span data-i18n="prefs.apply"></span>
        </button>
        <button type="button" onClick="cancel()" data-i18n="[title]prefs.close_tt">
        <span data-i18n="prefs.close"></span>
        </button>
301
      </div>
302
    </div>
pokergaming's avatar
pokergaming committed
303
  <script>
304
"use strict";
305
var gui = require("nw.gui");
306
var pdgui = require("./pdgui.js");
pokergaming's avatar
pokergaming committed
307

308
309
// For translations
var l = pdgui.get_local_string;
pokergaming's avatar
pokergaming committed
310

311
// Gui presets
312
pdgui.skin.apply(window);
pokergaming's avatar
pokergaming committed
313

314
var pd_object_callback;
pokergaming's avatar
pokergaming committed
315

316
317
var pd_audio_attrs;
var pd_midi_attrs;
pokergaming's avatar
pokergaming committed
318

319
320
321
322
function ok() {
    apply();
    cancel();
}
pokergaming's avatar
pokergaming committed
323

324
325
326
function gui_preset_change(elem) {
    pdgui.skin.set(elem.value);
}
pokergaming's avatar
pokergaming committed
327

328
329
330
331
332
333
334
335
// callbacks for devices and/or their number of channels
function dev_change(elem) {
    var attrs, id, direction, index;
    // the same logic works for both channels and
    // devices-- we use the variable 'type' to
    // choose the parameter acoordingly
    var type;
    id = elem.id;
336
337
    direction = id.slice(0,2) === "in" ? "in" : "out";
    type = id.indexOf("chans") !== -1 ? "chans" : "devs";
338
339
340
    // This would need to change if there could ever be more than
    // 9 devices
    index = +(id.slice(-1)) - 1;
341
    pdgui.post("direction is " + direction);
342
    attrs = get_attr("pd-" + direction + type, pd_audio_attrs);
343
    attrs[index] = elem.value;
344
345
    pdgui.post("id is " + elem.id);
    pdgui.post("new chan attrs is " + attrs);
346
347
348

    disable_unused_chans("in");
    disable_unused_chans("out");
349
}
350

351
352
353
354
355
function attr_change(elem) {
    var attr, id;
    attr = pd_audio_attrs;
    id = elem.id;
    attr[attr.indexOf(id) + 1] = elem.value;
356
357
    pdgui.post("id is " + elem.id);
    pdgui.post("value is " + elem.value);
358
}
pokergaming's avatar
pokergaming committed
359

360
361
function get_input(name) {
    var val = document.getElementsByName(name)[0].value;
362
    return val === 0 ? "0" : val;
363
}
pokergaming's avatar
pokergaming committed
364

365
366
367
368
// get a value from the garray attr array
function get_array_value(name, attrs) {
    return attrs[attrs.indexOf(name) + 1];
}
pokergaming's avatar
pokergaming committed
369

370
371
372
// If dev is -1, just change it to 0. Not sure if the Pd audio
// backend requires this, but it's how it works currently.
function kludge_dev(type, attrs, index) {
373
    var dev = get_attr("pd-" + type + "devs", attrs)[index];
374
375
376
    if (dev < 0) { dev = 0; }
    return dev;
}
pokergaming's avatar
pokergaming committed
377

378
379
380
381
382
// If the device is -1 ('None'), make the number of channels negative.
// This is the way Pd's audio back end turns off the device. (It works
// this way so you can remember your number of channels even if
// you turn off the device.)
function kludge_chans(type, attrs, index) {
383
384
    var dev = get_attr("pd-" + type + "devs", attrs)[index],
        chans = get_attr("pd-" + type + "chans", attrs)[index];
385
386
387
    if (dev < 0 && chans >= 0) { chans *= -1; }
    return chans;
}
pokergaming's avatar
pokergaming committed
388

389
390
function apply() {
    var attrs = pd_audio_attrs;
391
    pdgui.post("applying preferences");
392
393

    // Audio dialog
394
    pdgui.pdsend(
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
        "pd audio-dialog",
        kludge_dev("in", attrs, 0),
        kludge_dev("in", attrs, 1),
        kludge_dev("in", attrs, 2),
        kludge_dev("in", attrs, 3),
        kludge_chans("in", attrs, 0),
        kludge_chans("in", attrs, 1),
        kludge_chans("in", attrs, 2),
        kludge_chans("in", attrs, 3),
        kludge_dev("out", attrs, 0),
        kludge_dev("out", attrs, 1),
        kludge_dev("out", attrs, 2),
        kludge_dev("out", attrs, 3),
        kludge_chans("out", attrs, 0),
        kludge_chans("out", attrs, 1),
        kludge_chans("out", attrs, 2),
        kludge_chans("out", attrs, 3),
        get_attr("rate", attrs),
        get_attr("advance", attrs),
        get_attr("cancallback", attrs),
        get_attr("blocksize", attrs)
416
    );
pokergaming's avatar
pokergaming committed
417

418
419
    attrs = pd_midi_attrs;
    // Midi dialog
420
    pdgui.pdsend(
421
422
423
424
425
426
427
428
429
        "pd midi-dialog",
        get_attr("pd-indevs", attrs)[0],
        get_attr("pd-indevs", attrs)[1],
        get_attr("pd-indevs", attrs)[2],
        get_attr("pd-indevs", attrs)[3],
        get_attr("pd-outdevs", attrs)[0],
        get_attr("pd-outdevs", attrs)[1],
        get_attr("pd-outdevs", attrs)[2],
        get_attr("pd-outdevs", attrs)[3],
430
431
        0, // midi_alsain
        0  // midi_alsaout
432
    );
433
}
pokergaming's avatar
pokergaming committed
434

435
436
function cancel() {
    var i, attrs, gfxstub;
437
    pdgui.post("closing the window at this point");
438
439
440
441
442
443
    // There seems to be a bug in nwjs 0.13 beta3 that doesn't call the
    // "close" event below. This has the symptom of making it impossible
    // to click the "Ok" button and open the preferences dialog again after
    // that. To see if the bug is gone, try removing the next line and see
    // if you can open the Prefs dialog after clicking "Ok".
    pdgui.remove_dialogwin(pd_object_callback);
444
    window.close(true);
445
    //pdgui.pdsend(pd_object_callback, "cancel");
446
}
447

448
function change_api(elem) {
449
pdgui.post("elem is " + elem);
450
    var id = elem.getAttribute("id"),
451
        value = elem.value; // need js object property, DOM Attribute won't work
452
    if (id === "audio_api") {
453
        pdgui.pdsend("pd audio-setapi", value);
454
    } else {
455
        pdgui.pdsend("pd midi-setapi", value);
456
    }
457
}
458

459
460
461
462
463
function get_attr(name, attrs) {
    return attrs[attrs.indexOf(name) + 1];
}

function populate_apis(elem, apis, current_api) {
464
    pdgui.post("curent api is " + current_api);
465
    var i, opt, api_select = elem;
466
    pdgui.post("apis are " + apis);
467
    for (i = 0; i < apis.length; i += 2) {
468
        opt = document.createElement("option");
469
        opt.textContent = apis[i];
470
        opt.setAttribute("value", apis[i+1]);
471
        api_select.appendChild(opt);
pokergaming's avatar
pokergaming committed
472
    }
473
474
    api_select.value = current_api;
}
pokergaming's avatar
pokergaming committed
475

476
function populate_devs(type, attrs) {
477
    var devs = get_attr(type === "in" ? "sys-indevs" : "sys-outdevs", attrs);
478
    var i, j, opt, elem, chan_elem, chans;
479
480
    pdgui.post("devs are " + devs);
    pdgui.post("type is " + type + 1);
481
    chans = get_attr("pd-" + type + "chans", attrs);
482
483
    for (i = 0; i < 4; i++) {
        elem = document.getElementById(type + (i+1));
484
        chan_elem = document.getElementById(type + "chans" + (i+1));
485
        chan_elem.value = chans[i];
pokergaming's avatar
pokergaming committed
486
        // if the user changed the API, we need to remove the old devs
487
488
        while (elem.firstChild) {
            elem.removeChild(elem.firstChild);
489
        }
pokergaming's avatar
pokergaming committed
490
        // make a dummy device named 'None' with value -1
491
        opt = document.createElement("option");
pokergaming's avatar
pokergaming committed
492
        opt.value = -1;
493
        opt.textContent = "None";
pokergaming's avatar
pokergaming committed
494
        elem.appendChild(opt);
495
        for (j = 0; j < devs.length; j++) {
496
            opt = document.createElement("option");
497
            opt.value = j;
498
499
500
501
            opt.textContent = devs[j];
            elem.appendChild(opt);
        }
    }
502
503
}

504
function populate_midi_devs(type, attrs) {
505
506
507
508
509
    var dev_names = get_attr(type === "in" ?
        "midi-indev-names" : "midi-outdev-names", attrs);
    var i, j, opt, elem;
    pdgui.post("dev names are " + dev_names);
    pdgui.post("type is " + type);
510
    for (i = 0; i < 4; i++) {
511
        elem = document.getElementById("midi_" + type + (i+1));
512
513
514
515
516
        // if the user changed the API, we need to remove the old devs
        while (elem.firstChild) {
            elem.removeChild(elem.firstChild);
        }
        // make a dummy device named 'None' with value -1
517
        opt = document.createElement("option");
518
        opt.value = -1;
519
        opt.textContent = "None";
520
        elem.appendChild(opt);
521
        for (j = 0; j < dev_names.length; j++) {
522
            opt = document.createElement("option");
523
            opt.value = j;
524
            opt.textContent = dev_names[j];
525
526
527
528
529
            elem.appendChild(opt);
        }
    }
}

530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
function disable_unused_chans(type) {
    var i, chan_elem;
    for (i = 0; i < 4; i++) {
        chan_elem = document.getElementById(type + "chans" + (i+1));
        if (+document.getElementById(type + (i+1)).value === -1) {
            chan_elem.disabled = true;
        } else {
            chan_elem.disabled = false;
        }
    }
}

function disable_unused_devs(type, canmulti) {
    var i;
    if (+canmulti < 2) {
        for (i = 0; i < 3; i++) {
            document.getElementById(type + (i+2)).disabled = true;
        }
    } else {
        for (i = 0; i < 4; i++) {
            document.getElementById(type + (i+1)).disabled = false;
        }
    }
}

555
556
function audio_prefs_callback(attrs) {
    pd_audio_attrs = attrs;
557
    var api_select = document.getElementById("audio_api");
558
    var callback, i, j, elem, devs, opt;
559
560
    pdgui.post("audio attrs are " + attrs);
    pdgui.post("attrs length " + attrs.length);
561
562
563
564
    // We can get this callback multiple times while the dialog
    // is open.  This is because an API change requires a query
    // for new properties. So we only populate the api options
    // if they don't already exist
565
    if (api_select.getElementsByTagName("option").length < 1) {
566
567
        populate_apis(
            api_select,
568
569
            attrs[attrs.indexOf("audio-apis") + 1],
            attrs[attrs.indexOf("current-api") + 1]);
570
    }
571

572
573
574
    document.getElementById("rate").value = get_attr("rate", attrs);
    document.getElementById("blocksize").value = get_attr("blocksize", attrs);
    document.getElementById("advance").value = get_attr("advance", attrs);
575

576
577
    callback = get_attr("cancallback", attrs);
    //show the checkbox if the API allows
578
    if (callback !== -1) {
579
580
581
        document.getElementById("callback_container")
            .classList.remove("hidden");
        document.getElementById("callback").checked = !!callback;
582
    }
583

584
585
    populate_devs("in", attrs);
    populate_devs("out", attrs);
586

587
588
    set_devs("in", get_attr("pd-indevs", attrs));
    set_devs("out", get_attr("pd-outdevs", attrs));
pokergaming's avatar
pokergaming committed
589

590
591
    // Set chans after the devs (because they may
    // have the side-effect of setting the dev to 'None')
592
593
    set_chans("in", get_attr("pd-inchans", attrs));
    set_chans("out", get_attr("pd-outchans", attrs));
594

595
596
597
598
599
600
    disable_unused_chans("in");
    disable_unused_chans("out");

    disable_unused_devs("in", get_attr("canmulti", attrs));
    disable_unused_devs("out", get_attr("canmulti", attrs));

601
    pdgui.resize_window(pd_object_callback);
602
}
pokergaming's avatar
pokergaming committed
603

604
605
606
607
function set_devs(type, devs) {
    var i;
    for (i = 0; i < devs.length; i++) {
        document.getElementById(type + (i+1)).value = devs[i];
pokergaming's avatar
pokergaming committed
608
    }
609
}
pokergaming's avatar
pokergaming committed
610

611
612
613
function set_chans(type, chans_array) {
    var i;
    for (i = 0; i < chans_array.length; i++) {
614
        document.getElementById(type + "chans" + (i+1)).value = chans_array[i];
615
616
617
        // If no chans, set device to -1 (None)
        if (chans_array[i] < 1) {
            document.getElementById(type + (i+1)).value = -1;
pokergaming's avatar
pokergaming committed
618
        }
pokergaming's avatar
pokergaming committed
619
    }
620
}
pokergaming's avatar
pokergaming committed
621

622
623
function midi_prefs_callback(attrs) {
    pd_midi_attrs = attrs;
624
    var api_select = document.getElementById("midi_api");
625
626
    pdgui.post("midi attrs are " + attrs);
    pdgui.post("attrs length " + attrs.length);
627

628
    if (api_select.getElementsByTagName("option").length < 1) {
629
630
        populate_apis(
            api_select,
631
632
            get_attr("midi-apis", attrs),
            get_attr("current-api", attrs)
633
634
        );
    }
635

636
637
638
639
640
641
642
643
644
    // Hide devs and only show the alsa in/out boxes. In the future
    // we need an additional user friendly alsa interface here-- one that
    // just lets the user pick a single input device and single output
    // device, like LMMS does.
    if (+get_attr("current-api", attrs) === 1) { // ALSA API
        document.getElementsByClassName("midi_devices")[0]
            .style.setProperty("display", "none");
        document.getElementsByClassName("alsa_midi")[0]
            .style.setProperty("display", "inherit");
645
646
647
648
649
650
651
652
        // For ALSA, we just set the number of ports we want
        // for input and output. The tcl/tk interface just reused
        // the first of the "indevs" for this value, so (for now)
        // we repeat that mistake here...
        document.getElementById("alsa_in_ports").value =
            +get_attr("pd-indevs", attrs)[0];
        document.getElementById("alsa_out_ports").value =
            +get_attr("pd-outdevs", attrs)[0];
653
654
655
656
657
658
659
660
    } else {
        document.getElementsByClassName("midi_devices")[0]
            .style.setProperty("display", "inherit");
        document.getElementsByClassName("alsa_midi")[0]
            .style.setProperty("display", "none");
        populate_midi_devs("in", attrs);
        populate_midi_devs("out", attrs);
    }
661
    pdgui.resize_window(pd_object_callback);
662
}
663
664


665
666
667
// This gets called from the nw_create_window function in index.html
// It provides us with our window id from the C side.  Once we have it
// we can create the menu and register event callbacks
668
function register_window_id(gfxstub, attr_arrays) {
669
670
671
672
673
674
675
676
677
678
679
680
681
    pd_object_callback = gfxstub;
    add_events(gfxstub);
    translate_form();

    // We don't turn on rendering of the "container" div until
    // We've finished displaying all the spans and populating the
    // labels and form elements.  That makes it more efficient and
    // snappier, at least on older machines.  However, we still have
    // to asynchronously request the form values from Pd for audio
    // and MIDI...

    pdgui.pdsend("pd audio-properties"); // request audio pref attrs
    pdgui.pdsend("pd midi-properties");  // request midi pref attrs
682
    document.getElementsByClassName("container")[0].style.setProperty("display", "inline");
683
}
pokergaming's avatar
pokergaming committed
684
685

function tr_text(id) {
686
687
    var elem = document.getElementById("iem.prop." + id);
    elem.textContent = l("iem.prop." + id);
pokergaming's avatar
pokergaming committed
688
689
690
691
}

// Stop-gap translator
function translate_form() {
692
693
694
    var elements = document.querySelectorAll("[data-i18n]"),
        data,
        i;
pokergaming's avatar
pokergaming committed
695
    for (i = 0; i < elements.length; i++) {
696
        data = elements[i].dataset.i18n;
697
        if (data.slice(0,7) === "[title]") {
pokergaming's avatar
pokergaming committed
698
699
700
701
702
703
704
705
706
            elements[i].title = l(data.slice(7));
        } else {
            elements[i].textContent = l(data);
        }
    }
}

function populate_form(attr_array) {
    // First, let's put the translated text for the form labels:
707
708
    var i;
    for(i = 0; i < attr_array.length; i+=2) {
pokergaming's avatar
pokergaming committed
709
710
711
712
        // Unhide the span with the class with the same name as the id
        var prop_group = document.getElementsByClassName(attr_array[i])[0];
        if (prop_group !== undefined) {
            console.log("the thing here is " + attr_array[i]);
713
            prop_group.classList.remove("hidden");
pokergaming's avatar
pokergaming committed
714
        } else {
715
            pdgui.post("Error: couldn't find iemgui prop group for " + attr_array[i]);
pokergaming's avatar
pokergaming committed
716
717
718
719
        }

        var elem = document.getElementsByName(attr_array[i]);
        if (elem.length > 0) {
720
            if (elem[0].type === "checkbox") {
pokergaming's avatar
pokergaming committed
721
722
                // The attr here is a string, so we need to
                // force it to number, hence the "+" below
723
                pdgui.post("found a CHECKED ITEM!!!");
pokergaming's avatar
pokergaming committed
724
725
726
727
728
729
730
731
732
733
734
735
                elem[0].checked = +attr_array[i+1];
            } else {
                elem[0].value = attr_array[i+1];
            }
        }
    }
}

function add_events(name) {
    // let's handle some events for this window...

    // closing the Window
736
    gui.Window.get().on("close", function() {
pokergaming's avatar
pokergaming committed
737
738
        // this needs to do whatever the "cancel" button does
        pdgui.remove_dialogwin(pd_object_callback);
739
        gui.Window.get().close(true);
pokergaming's avatar
pokergaming committed
740
    });
741
    pdgui.dialog_bindings(name);
pokergaming's avatar
pokergaming committed
742
743
744
745
746
}

  </script>
  </body>
</html>