dialog_iemgui.html 20.9 KB
Newer Older
1
2
3
<!DOCTYPE html>
<html>
  <head>
Jonathan Wilkes's avatar
Jonathan Wilkes committed
4
5
    <link id="page_style" rel="stylesheet"
          type="text/css" href="css/default.css">
6
  </head>
7
  <body id="iemgui_dialog_body">
8
9
10
11
12
13
14
15
16
17
18
19
20
    <div class="container">
    <form> 
      <fieldset> 
        <legend data-i18n="iem.prop.heading.size"></legend> 

        <table class="pairs">
          <tr class="size prop hidden">
            <td>
              <label data-i18n="[title]iem.prop.size_tt">
                <span data-i18n="iem.prop.size"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.size_tt">
21
22
              <input type="text" name="size"
                     onchange="update_attr(this);">
23
24
25
26
27
28
29
30
31
            </td>
          </tr>
          <tr class="selection-size prop hidden">
            <td>
              <label data-i18n="[title]iem.select_size_tt">
                <span data-i18n="iem.prop.select_size"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.select_size_tt">
32
33
              <input type="text" name="selection-size"
                     onchange="update_attr(this);">
34
35
36
37
38
39
40
41
42
            </td>
          </tr>
          <tr class="number prop hidden">
            <td>
              <label data-i18n="[title]iem.prop.number_tt">
                <span data-i18n="iem.prop.number"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.number_tt">
43
44
              <input type="number" name="number"
                     onchange="update_attr(this);">
45
46
47
48
49
50
51
52
53
            </td>
          </tr>
          <tr class="nonzero-value prop hidden">
            <td>
              <label data-i18n="[title]iem.prop.nonzero_value_tt">
                <span data-i18n="iem.prop.nonzero_value"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.nonzero_value_tt">
54
55
              <input type="text" name="nonzero-value"
                     onchange="update_attr(this);">
56
57
58
59
60
61
62
63
64
            </td>
          </tr>
          <tr class="width prop hidden">
            <td>
              <label data-i18n="[title]iem.prop.width_tt"> 
                <span data-i18n="iem.prop.width"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.width_tt">
65
66
              <input type="text" name="width"
                     onchange="update_attr(this);">
67
68
69
70
71
72
73
            </td>
            <td>
              <label data-i18n="[title]iem.prop.height_tt">
                <span data-i18n="iem.prop.height"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.height_tt">
74
75
              <input type="text" name="height"
                     onchange="update_attr(this);">
76
77
78
79
80
81
82
83
84
            </td>
          </tr>
          <tr class="visible-width prop hidden">
            <td>
              <label data-i18n="[title]iem.prop.visible_width_tt">
                <span data-i18n="iem.prop.visible_width"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.visible_width_tt">
85
86
              <input type="text" name="visible-width"
                     onchange="update_attr(this);">
87
88
89
90
91
92
93
            </td>
            <td>
              <label data-i18n="iem.prop.visible_height">
                <span data-i18n="iem.prop.visible_height"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.visible_height_tt">
94
95
              <input type="text" name="visible-height"
                     onchange="update_attr(this);">
96
97
98
99
100
101
102
103
104
            </td>
          </tr>
          <tr class="minimum-range prop pair hidden">
            <td>
              <label data-i18n="[title]iem.prop.minimum_tt">
                <span data-i18n="iem.prop.minimum"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.minimum_tt">
105
106
              <input type="text" name="minimum-range"
                     onchange="update_attr(this);">
107
108
109
110
111
112
113
            </td>
            <td>
              <label data-i18n="[title]iem.prop.maximum_tt">
                <span data-i18n="iem.prop.maximum"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.maximum_tt">
114
115
              <input type="text" name="maximum-range"
                     onchange="update_attr(this);">
116
117
118
119
120
121
122
123
124
            </td>
          </tr>
          <tr class="flash-interrupt prop hidden">
            <td>
              <label data-i18n="[title]iem.prop.flash_interrupt_tt">
                <span data-i18n="iem.prop.flash_interrupt"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.flash_interrupt_tt">
125
126
              <input type="text" name="flash-interrupt"
                     onchange="update_attr(this);">
127
128
129
130
131
132
133
            </td>
            <td>
              <label data-i18n="[title]iem.prop.flash_hold_tt">
                <span data-i18n="iem.prop.flash_hold"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.flash_hold_tt">
134
135
              <input type="text" name="flash-hold"
                     onchange="update_attr(this);">
136
137
138
139
140
141
142
143
144
145
            </td>
          </tr>
          <tr class="log-height prop hidden">
            <td></td><td></td>
            <td>
              <label data-i18n="[title]iem.prop.log_height_tt">
                <span data-i18n="iem.prop.log_height"></span>
              </label>
            </td>
            <td>
146
147
              <input type="text" name="log-height"
                     onchange="update_attr(this);">
148
149
150
151
152
153
            </td>
          </tr>
        </table>

        <div class="init prop hidden">
          <label data-i18n="[title]iem.prop.init_tt">
154
155
            <input type="checkbox" name="init" value="on"
                   onchange="update_attr(this);">
156
157
158
159
160
161
162
163
            <span data-i18n="iem.prop.init"></span>
          </label>
          <br>
        </div>

        <div class="vu-scale prop hidden">
          <label data-i18n="[title]iem.prop.vu_scale_tt">
            <span data-i18n="iem.prop.vu_scale"></span>
164
165
            <input type="checkbox" name="vu-scale" value="on"
                   onchange="update_attr(this);">
166
167
168
169
170
171
          </label>
          <br>
        </div>

        <div class="log-scaling prop hidden">
          <label data-i18n="[title]iem.prop.log_scale_tt">
172
173
            <input type="checkbox" name="log-scaling" value="on"
                   onchange="update_attr(this);">
174
175
176
177
178
179
180
            <span data-i18n="iem.prop.log_scale"></span>
          </label>
          <br>
        </div>

        <div class="steady-on-click prop hidden">
          <label data-i18n="[title]iem.prop.steady_tt">
181
182
            <input type="checkbox" name="steady-on-click" value="on"
                   onchange="update_attr(this);">
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
            <span data-i18n="iem.prop.steady"></span>
          </label>
          <br>
        </div>
      </fieldset> 

      <fieldset> 
        <legend data-i18n="iem.prop.heading.messages"></legend> 

        <table>
          <tr class="send-symbol prop hidden">
            <td>
              <label data-i18n="[title]iem.prop.send_tt">
                <span data-i18n="iem.prop.send"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.send_tt">
200
201
              <input type="text" name="send-symbol"
                     onchange="update_attr(this);">
202
203
204
205
206
207
208
209
210
            </td>
            <td>
          <tr class="receive-symbol prop hidden">
            <td>
              <label data-i18n="[title]iem.prop.receive_tt">
                <span data-i18n="iem.prop.receive"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.receive_tt">
211
212
              <input type="text" name="receive-symbol"
                     onchange="update_attr(this);">
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
            </td>
            <td>
          </tr>
        </table>
      </fieldset> 

      <fieldset> 
        <legend data-i18n="iem.prop.heading.label">wrong stuff</legend> 

        <table class="pairs">
          <tr class="label prop hidden">
            <td>
              <label data-i18n="[title]iem.prop.label_tt">
                <span data-i18n="iem.prop.label"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.label_tt">
230
231
              <input type="text" name="label"
                     onchange="update_attr(this);">
232
233
234
235
236
237
238
            </td>
            <td>
              <label data-i18n="[title]iem.prop.xoffset_tt">
                <span data-i18n="iem.prop.xoffset"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.xoffset_tt">
239
240
              <input type="text" name="x-offset"
                     onchange="update_attr(this);">
241
242
243
244
245
246
247
            </td>
            <td>
              <label data-i18n="[title]iem.prop.yoffset_tt">
                <span data-i18n="iem.prop.yoffset"></span>
              </label>
            </td>
            <td data-i18n="[title]iem.prop.yoffset_tt">
248
249
              <input type="text" name="y-offset"
                     onchange="update_attr(this);">
250
251
252
253
254
255
256
257
            </td>
          </tr>
          <tr class="font-style prop hidden">
            <td>
              <label data-i18n="[title]iem.prop.font_tt">
                <span data-i18n="iem.prop.font"></span>
            </td>
            <td data-i18n="[title]iem.prop.font_tt">
258
259
              <select name="font-style"
                      onchange="update_attr(this);">
260
261
262
                <option>DejaVu Sans Mono</option>
                <option>Helvetica</option>
                <option>Times</option>
263
264
265
266
267
              </select>
            </td>
            <td colspan="4">
              <label data-i18n="[title]iem.prop.fontsize_tt">
                <span data-i18n="iem.prop.fontsize"></span>
268
269
                <input type="text" name="font-size"
                       onchange="update_attr(this);">
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
              <label>
            </td>
          </tr>
        </table>
      </fieldset> 

      <fieldset> 
      <legend data-i18n="iem.prop.heading.colors"></legend> 

      <div class="background-color prop hidden">
        <label data-i18n="[title]iem.prop.bgcolor_tt">
          <input type="color" name="background-color">
          <span data-i18n="iem.prop.bgcolor"></span>
        </label>
        <br>
      </div>

      <div class="foreground-color prop hidden">
        <label data-i18n="[title]iem.prop.fgcolor_tt">
          <input type="color" name="foreground-color">
          <span data-i18n="iem.prop.fgcolor"></span>
        </label>
        <br>
      </div>

      <div class="label-color prop hidden">
        <label data-i18n="[title]iem.prop.label_color_tt">
          <input type="color" name="label-color">
          <span data-i18n="iem.prop.label_color"></span>
        </label>
        <br>
      </div>
    </fieldset> 

    <div class="prop hidden">
      <input type="hidden" name="minimum-size">
      <input type="hidden" name="range-schedule">
      <input type="hidden" name="hide-frame">
    </div>

    <div class="submit_buttons">
      <button type="button" onClick="ok()" data-i18n="[title]iem.prop.ok_tt">
        <span data-i18n="iem.prop.ok"></span>
      </button>
      <button type="button" onClick="apply()" data-i18n="[title]iem.prop.apply_tt">
        <span data-i18n="iem.prop.apply"></span>
      </button>
      <button type="button" onClick="cancel()" data-i18n="[title]iem.prop.cancel_tt">
        <span data-i18n="iem.prop.cancel"></span>
      </button>
    </div>

  </form> 
  </div>      

  <script>
326
"use strict";
327
var gui = require("nw.gui"); 
328
var pdgui = require("./pdgui.js");
329

330
331
// For translations
var l = pdgui.get_local_string;
332

Jonathan Wilkes's avatar
Jonathan Wilkes committed
333
334
335
// gui preset
pdgui.skin.apply(this);

336
337
338
var pd_object_callback,
    old_attrs = {}, // original state. Used if we cancel the dialog
    new_attrs = {}; // changed state. Used if we apply or click "Ok"
339

340
341
342
343
function ok() {
    apply();
    cancel();
}
344

345
346
function substitute_space(arg) {
    var fake_space = String.fromCharCode(11);
347
    return arg.split(" ").join(fake_space);
348
}
349

350
function strip_problem_chars(arg) {
351
    var problem_chars = [";", ",", "{", "}", "\\"];
352
353
    var ret = arg;
    for(var i = 0; i < problem_chars.length; i++) {
354
        ret = ret.split(";").join("");
355
    }
356
357
    return ret;
}
358

359
360
361
362
363
364
365
366
367
368
369
370
371
372
function update_attr(elem) {
    pdgui.post("updating attr " + elem.name);
    if (!new_attrs.hasOwnProperty(elem.name)) {
        pdgui.post("warning: new_attrs[" + elem.name + "] doesn't exist");
    }
    if (elem.type === "checkbox") {
        new_attrs[elem.name] = elem.checked ? 1 : 0;
    } else if (elem.type === "select-one") {
        new_attrs[elem] = elem.selectedIndex;
    } else {
        new_attrs[elem] = elem.value;
    }
}

373
function apply() {
374
    pdgui.post("we're applying iemgui changes!");
375
376
377
378
379
380
381
382
    /* Not sure what these are...
        iemgui_clip_dim $id
        iemgui_clip_num $id
        iemgui_sched_rng $id
        iemgui_verify_rng $id
        iemgui_sched_rng $id
        iemgui_clip_fontsize $id
    */
383
384
385
386
387
    var send_symbol = document.getElementsByName("send-symbol")[0].value;
    var receive_symbol = document.getElementsByName("receive-symbol")[0].value;
    var label =  document.getElementsByName("label")[0].value;
    if (send_symbol === null || send_symbol === "") {
        send_symbol = "empty";
388
    }
389
390
    if (receive_symbol === null || receive_symbol === "") {
        receive_symbol = "empty";
391
    }
392
393
    if (label === null || label === "") {
        label = "empty";
394
395
    }
    console.log("send_symbol is " + send_symbol);
396
397
    if (send_symbol.charAt(0) === "$") {
        send_symbol = "#" + send_symbol.slice(1);
398
    }
399
400
    if (receive_symbol.charAt(0) === "$") {
        receive_symbol = "#" + receive_symbol.slice(1);
401
    }
402
403
    if (label.charAt(0) === "$") {
        label = "#" + label.slice(1);
404
405
    }

406
407
408
    send_symbol = substitute_space(send_symbol);
    receive_symbol = substitute_space(receive_symbol);
    label = substitute_space(label);
409

410
411
412
    send_symbol = strip_problem_chars(send_symbol);
    receive_symbol = strip_problem_chars(receive_symbol);
    label = strip_problem_chars(label);
413

414
415
    var label_x_offset =  document.getElementsByName("x-offset")[0].value;
    var label_y_offset =  document.getElementsByName("y-offset")[0].value;
416

417
418
419
    // make sure the offset boxes have a value
    if (label_x_offset === null) { label_x_offset = 0; }
    if (label_y_offset === null) { label_y_offset = 0; }
420

421
    var height, width;
422
423
424
    var size = document.getElementsByName("size")[0].value;
    if (size === "") {
        var size = document.getElementsByName("selection-size")[0].value;
425
    }
426

427
    if (size !== "") {
428
429
430
        width = size;
        height = size;
    } else {
431
432
        width = document.getElementsByName("width")[0].value;
        height = document.getElementsByName("height")[0].value;
433
    }
434

435
436
    var slot3 = document.getElementsByName("minimum-range")[0].value;
    var slot4 = document.getElementsByName("maximum-range")[0].value;
437

438
439
440
    if (slot3 === "") {
        slot3 = document.getElementsByName("flash-interrupt")[0].value;
        slot4 = document.getElementsByName("flash-hold")[0].value;
441
    }
442

443
444
445
    if (slot3 === "") {
        slot3 = document.getElementsByName("visible-width")[0].value;
        slot4 = document.getElementsByName("visible-height")[0].value;
446
    }
447

448
449
450
    if (slot3 === "") { // toggle
        slot3 = document.getElementsByName("nonzero-value")[0].value;
        if (slot3 === "") {
451
            slot3 = 0;
452
        }
453
454
        slot4 = 0;
    }
455

456
    var slot5 = +document.getElementsByName("log-scaling")[0].checked;
457
458
    // Hack to accomodate the vu-scale property, which exists in the same
    // slot as this one
459
460
    var log_scaling_div = document.querySelector(".log-scaling");
    var no_log_display = log_scaling_div.classList.contains("hidden");
461

462
    if (no_log_display) {
463
        slot5 = +document.getElementsByName("vu-scale")[0].checked;
464
        pdgui.post("slot five is " + slot5);
465
    }
466
    pdgui.post("slot five is " + slot5);
467

468
469
    var init = +document.getElementsByName("init")[0].checked;
    if (init === "") { init = 0; }
470

471
472
473
    var slot7 = document.getElementsByName("log-height")[0].value;
    if (slot7 === "") {
        slot7 = document.getElementsByName("number")[0].value;
474
    }
475
    if (slot7 === "") {
476
        slot7 = 0;
477
478
    }

479
    var font_style = document.getElementsByName("font-style")[0].
480
481
        selectedIndex;
//    if (font_style !== null) { font_style = 0; }
482

483
484
    var font_size = document.getElementsByName("font-size")[0].value;
    if (font_size === "") { font_size = 0; }
485

486
487
488
    var foreground_color = parseInt(document.getElementsByName("foreground-color")[0].value.slice(1), 16);
    var background_color = parseInt(document.getElementsByName("background-color")[0].value.slice(1), 16);
    var label_color = parseInt(document.getElementsByName("label-color")[0].value.slice(1), 16);
489

490
    var slot18 = +document.getElementsByName("steady-on-click")[0].checked;
491

492
    pdgui.pdsend(pd_object_callback, "dialog",
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
        width, height,
        slot3, // bng: flash-interrupt
               // slider: min-range
               // toggle: nonzero-value
               // my_canvas: visible_width
        slot4, // bng: flash-hold
               // slider: max-range
               // my_canvas: visible_height
        slot5, // slider: lin/log thingy
               // nbx: lin/log
               // vu: vu-scale
        init,
        slot7, // log-height or vradio/hradio number
        send_symbol, receive_symbol, label,
        label_x_offset, label_y_offset,
        font_style, font_size,
        background_color, foreground_color,
        label_color,
        slot18, // steady on click
512
        0);
513
}
514

515
function cancel() {
516
    pdgui.post("closing the window at this point");
517
    //window.close(true);
518
    pdgui.pdsend(pd_object_callback, "cancel");
519
520
521
522
523
}

// 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
524
function register_window_id(gfxstub, attr_object) {
525
    var attr;
526
    pd_object_callback = gfxstub;
527
528
529
530
531
532
    old_attrs = attr_object;
    for (attr in old_attrs) {
        if (old_attrs.hasOwnProperty(attr)) {
            new_attrs[attr] = old_attrs[attr];
        }
    }
533
    console.log("attr object is " + attr_object.toString());
534
535
    add_events(gfxstub);
    translate_form();
536
    populate_form(attr_object);
537
538
539
540
    // 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.
541
542
    document.getElementsByClassName("container")[0]
        .style.setProperty("display", "inline");
543
    pdgui.resize_window(pd_object_callback);
544
}
545
546

function tr_text(id) {
547
548
    var elem = document.getElementById("iem.prop." + id);
    elem.textContent = l("iem.prop." + id);
549
550
551
552
553
}

// Stop-gap translator
function translate_form() {
    var i
554
    var elements = document.querySelectorAll("[data-i18n]");
555
556
    for (i = 0; i < elements.length; i++) {
        var data = elements[i].dataset.i18n;
557
        if (data.slice(0,7) === "[title]") {
558
559
560
561
562
563
564
            elements[i].title = l(data.slice(7));
        } else {
            elements[i].textContent = l(data);
        }
    }
}

565
566
567
function populate_form(attr_object) {
    var attr;
    for(attr in attr_object) {
568
        // Unhide the span with the class with the same name as the id
569
        var prop_group = document.getElementsByClassName(attr)[0];
570
        if (prop_group !== undefined) {
571
            console.log("the thing here is " + attr);
572
            prop_group.classList.remove("hidden");
573
        } else {
574
            pdgui.post("Error: couldn't find iemgui prop group for " +
575
                attr);
576
577
578
579
        }
        // iemguis use the string 'empty' for null because of
        // the limitations of Pd's state-saving API.  So we have
        // to filter that one out
580
        if(attr_object[attr] !== "empty") {
581
            var elem = document.getElementsByName(attr);
582
            if (elem.length > 0) {
583
                if(attr.slice(-5) === "color") {
584
                    var hex_string = Number(attr_object[attr]).toString(16);
585
                    var color_string = "#" +
586
                        (hex_string === "0" ? "000000" : hex_string);
587
                    pdgui.post("color is " + color_string);
588
                    elem[0].value = color_string;
589
                } else if (elem[0].type === "checkbox") {
590
591
                    // The attr here is a string, so we need to
                    // force it to number, hence the "+" below
592
                    elem[0].checked = +attr_object[attr];
593
                } else if (elem[0].type === "select-one") {
594
                    elem[0].selectedIndex = +attr_object[attr];
595
                } else {
596
                    elem[0].value = attr_object[attr];
597
598
599
600
601
602
603
604
                }
            }
        }
    }
}

function add_events(name) {
    // closing the Window
605
    gui.Window.get().on("close", function() {
606
        // this needs to do whatever the "cancel" button does
607
        //pdgui.pdsend(name, "menuclose 0");
608
        //cancel();
609
        pdgui.remove_dialogwin(pd_object_callback);
610
        gui.Window.get().close(true);
611
    });
612
    pdgui.dialog_bindings(name);
613
614
615
616
617
}

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