First draft for iemgui properties dialog covering all iemguis

pd/nw/pdcanvas.html

@@ -494,7 +494,9 @@ function nw_create_patch_window_menus (name) {
     editMenu.append(new nw.MenuItem({
         label: 'Zoom In',
         click: function () {
-            nw.Window.get().zoomLevel += 1;
+            var z = nw.Window.get().zoomLevel;
+            if (z < 8) { z++; }
+            nw.Window.get().zoomLevel = z;
             pdgui.gui_post("zoom level is " + nw.Window.get().zoomLevel);
         },
         key: '=',
@@ -504,7 +506,9 @@ function nw_create_patch_window_menus (name) {
     editMenu.append(new nw.MenuItem({
         label: 'Zoom Out',
         click: function () {
-            nw.Window.get().zoomLevel -= 1;
+            var z = nw.Window.get().zoomLevel;
+            if (z > -7) { z--; } 
+            nw.Window.get().zoomLevel = z;
             pdgui.gui_post("zoom level is " + nw.Window.get().zoomLevel);
         },
         key: '-',

pd/nw/pdgui.js

@@ -1870,6 +1870,13 @@ function gui_canvas_drawio(cid, parenttag, tag, x1, y1, x2, y2, basex, basey) {
         class: 'xlet'
     });
     g.appendChild(rect);
+    gui_post("the tag for this XLET is " + tag);
+}
+
+function gui_eraseio(cid, tag) {
+    gui_post("the tag for this bout-to-ba-leted XLET is " + tag);
+    var xlet = get_item(cid, tag);
+    xlet.parentNode.removeChild(xlet);
 }
 
 function gui_message_drawborder(cid,tag,width,height) {
@@ -2143,7 +2150,7 @@ function gui_bng_flash(cid, tag, color) {
     configure_item(button, { fill: color });
 }
 
-function gui_create_toggle(cid, tag, color, width, p1,p2,p3,p4,p5,p6,p7,p8,basex,basey) {
+function gui_create_toggle(cid, tag, color, state, width, p1,p2,p3,p4,p5,p6,p7,p8,basex,basey) {
     var g = get_gobj(cid, tag);
     var points_array = [p1 - basex, p2 - basey,
                         p3 - basex, p4 - basey
@@ -2153,7 +2160,7 @@ function gui_create_toggle(cid, tag, color, width, p1,p2,p3,p4,p5,p6,p7,p8,basex
         stroke: color,
         fill: 'none',
         id: tag + 'cross1',
-        display: 'none',
+        display: state ? 'inline' : 'none',
         'stroke-width': width
     });
 
@@ -2165,7 +2172,7 @@ function gui_create_toggle(cid, tag, color, width, p1,p2,p3,p4,p5,p6,p7,p8,basex
         stroke: color,
         fill: 'none',
         id: tag + 'cross2',
-        display: 'none',
+        display: state ? 'inline' : 'none',
         'stroke-width': width
     });
     g.appendChild(cross1);
@@ -2206,7 +2213,8 @@ function gui_toggle_update(cid, tag, state, color) {
 }
 
 // Todo: send fewer parameters from c
-function gui_create_numbox(cid,tag,bgcolor,p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,basex,basey,half) {
+function gui_create_numbox(width,cid,tag,bgcolor,p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,basex,basey,half) {
+gui_post("numbox width is " + width);
     // numbox doesn't have a standard iemgui border, so we must create its gobj manually
     var g = gui_text_create_gobj(cid, tag, basex, basey)
     var data_array = ['M', p1 - basex, p2 - basey,
@@ -2228,12 +2236,13 @@ function gui_create_numbox(cid,tag,bgcolor,p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,basex,
     g.appendChild(border);
 }
 
-function gui_numbox_drawtext(cid,tag,text,color,xpos,ypos,basex,basey) {
+function gui_numbox_drawtext(cid,tag,text,font_size,color,xpos,ypos,basex,basey) {
     var g = get_gobj(cid, tag);
     var svg_text = create_item(cid, 'text', {
         x: xpos - basex,
         y: ypos - basey + 5,
-        'font-size': font,
+        'font-size': font_size,
+        fill: color,
         id: tag + 'text'
     });
 
@@ -2242,6 +2251,14 @@ function gui_numbox_drawtext(cid,tag,text,color,xpos,ypos,basex,basey) {
     g.appendChild(svg_text);
 }
 
+function gui_update_numbox(cid, tag, fcolor, bgcolor, font_name, font_size, font_weight) {
+gui_post("inside update_numbox fcolor is " + fcolor);
+    var b = get_item(cid, tag + 'border');
+    var text = get_item(cid, tag + 'text');
+    configure_item(b, { fill: bgcolor });
+    configure_item(text, { fill: fcolor, 'font-size': font_size });
+}
+
 function gui_create_slider(cid,tag,color,p1,p2,p3,p4,basex, basey) {
     var g = get_gobj(cid, tag);
     var indicator = create_item(cid, 'line', {
@@ -2268,6 +2285,13 @@ function gui_slider_update(cid,tag,p1,p2,p3,p4,basex,basey) {
     });
 }
 
+function gui_slider_indicator_color(cid, tag, color) {
+    var i = get_item(cid, tag + 'indicator');
+    configure_item(i, {
+        stroke: color
+    });
+}
+
 function gui_create_radio(cid,tag,p1,p2,p3,p4,i,basex,basey) {
     var g = get_gobj(cid, tag);
     var cell = create_item(cid, 'line', {
@@ -2288,7 +2312,7 @@ function gui_create_radio_buttons(cid,tag,color,p1,p2,p3,p4,basex,basey,i,state)
     var g = get_gobj(cid, tag);
     var b = create_item(cid, 'rect', {
         x: p1 - basex,
-        y: p2 -basey,
+        y: p2 - basey,
         width: p3 - p1,
         height: p4 - p2,
         stroke: color,
@@ -2299,11 +2323,32 @@ function gui_create_radio_buttons(cid,tag,color,p1,p2,p3,p4,basex,basey,i,state)
     g.appendChild(b);
 }
 
-function gui_radio_update(cid,tag,prev,next) {
+function gui_radio_button_coords(cid, tag, x1, y1, xi, yi, i, s, d, orient) {
+    var button = get_item(cid, tag + 'button_' + i);
+    var cell = get_item(cid, tag + 'cell_' + i);
+    // the line to draw the cell for i=0 doesn't exist. Probably was not worth
+    // the effort, but it's easier just to check for that here atm.
+    if (i > 0) {
+        configure_item(cell, {
+            x1: orient ? 0 : xi,
+            y1: orient ? yi : 0,
+            x2: orient ? d : xi,
+            y2: orient ? yi : d
+        });
+    }
+    configure_item(button, {
+        x: orient ? s : xi+s,
+        y: orient ? yi+s : s,
+        width: d-(s*2),
+        height: d-(s*2)
+    });
+}
+
+function gui_radio_update(cid,tag,bgcolor,prev,next) {
     var prev = get_item(cid, tag + 'button_' + prev);
     var next = get_item(cid, tag + 'button_' + next);
-    configure_item(prev, { display: 'none' });
-    configure_item(next, { display: 'inline' });
+    configure_item(prev, { display: 'none', fill: bgcolor, stroke: bgcolor });
+    configure_item(next, { display: 'inline', fill: bgcolor, stroke: bgcolor });
 }
 
 function gui_create_vumeter_text(cid,tag,color,xpos,ypos,text,index,basex,basey) {
@@ -2320,7 +2365,36 @@ function gui_create_vumeter_text(cid,tag,color,xpos,ypos,text,index,basex,basey)
     g.appendChild(svg_text);
 }
 
-function gui_create_vumeter_steps(cid,tag,color,p1,p2,p3,p4,width,index,basex,basey) {
+// Oh, what a terrible interface this is!
+// the c API for vumeter was just spewing all kinds of state changes
+// at tcl/tk, depending on it to just ignore non-existent objects.
+// On changes in the Properties dialog, it would
+// a) remove all the labels
+// b) configure a bunch of _non-existent_ labels
+// c) recreate all the missing labels
+// To get on to other work we just parrot the insanity here,
+// and silently ignore calls to update non-existent text.
+function gui_update_vumeter_text(cid, tag, text, font, selected, color, i) {
+    var svg_text = get_item(cid, tag + 'text_' + i);
+    if (!selected) {
+        // Hack...
+        if (svg_text !== null) {
+            configure_item(svg_text, { fill: color });
+        }
+    }
+}
+
+function gui_vumeter_text_coords(cid, tag, i, xpos, ypos, basex, basey) {
+    var t = get_item(cid, tag + 'text_' + i);
+    configure_item(t, { x: xpos - basex, y: ypos - basey });
+}
+
+function gui_erase_vumeter_text(cid, tag, i) {
+    var t = get_item(cid, tag + 'text_' + i);
+    t.parentNode.removeChild(t);
+}
+
+function gui_create_vumeter_steps(cid,tag,color,p1,p2,p3,p4,width,index,basex,basey,i) {
     var g = get_gobj(cid, tag);
     var l = create_item(cid, 'line', {
         x1: p1 - basex,
@@ -2334,6 +2408,22 @@ function gui_create_vumeter_steps(cid,tag,color,p1,p2,p3,p4,width,index,basex,ba
     g.appendChild(l);
 }
 
+function gui_update_vumeter_steps(cid, tag, i, width) {
+    var step = get_item(cid, tag + 'led_' + i);
+    configure_item(step, { 'stroke-width': width });
+}
+
+function gui_update_vumeter_step_coords(cid,tag,i,x1,y1,x2,y2,basex,basey) {
+gui_post("updating step coords...");
+    var l = get_item(cid, tag + 'led_' + i);
+    configure_item(l, {
+        x1: x1 - basex,
+        y1: y1 - basey,
+        x2: x2 - basex,
+        y2: y2 - basey
+    });
+}
+
 function gui_create_vumeter_rect(cid,tag,color,p1,p2,p3,p4,basex,basey) {
     var g = get_gobj(cid, tag);
     var rect = create_item(cid, 'rect', {
@@ -2348,6 +2438,22 @@ function gui_create_vumeter_rect(cid,tag,color,p1,p2,p3,p4,basex,basey) {
     g.appendChild(rect);
 }
 
+function gui_update_vumeter_rect(cid, tag, color) {
+    var r = get_item(cid, tag + 'rect');
+    configure_item(r, { fill: color, stroke: color });
+}
+
+/* Oh hack upon hack... why doesn't the iemgui base_config just take care of this? */
+function gui_vumeter_border_coords(cid, tag, width, height) {
+    var r = get_item(cid, tag + 'border');
+    configure_item(r, { width: width, height: height });
+}
+
+function gui_update_vumeter_peak(cid, tag, width) {
+    var r = get_item(cid, tag + 'rect');
+    configure_item(r, { 'stroke-width': width });
+}
+
 function gui_create_vumeter_peak(cid,tag,color,p1,p2,p3,p4,width,basex,basey) {
     var g = get_gobj(cid, tag);
     var line = create_item(cid, 'line', {
@@ -2362,9 +2468,9 @@ function gui_create_vumeter_peak(cid,tag,color,p1,p2,p3,p4,width,basex,basey) {
     g.appendChild(line);
 }
 
-// change tag from "rect" to "rms"
+// probably should change tag from "rect" to "cover"
 function gui_vumeter_update_rms(cid,tag,p1,p2,p3,p4,basex,basey) {
-    rect = get_item(cid, tag + 'rect');
+    var rect = get_item(cid, tag + 'rect');
     configure_item(rect, {
         x: p1 - basex,
         y: p2 - basey,
@@ -2374,7 +2480,7 @@ function gui_vumeter_update_rms(cid,tag,p1,p2,p3,p4,basex,basey) {
 }
 
 function gui_vumeter_update_peak(cid,tag,color,p1,p2,p3,p4,basex,basey) {
-    line = get_item(cid, tag + 'peak');
+    var line = get_item(cid, tag + 'peak');
     configure_item(line, {
         x1: p1 - basex,
         y1: p2 - basey,
@@ -2412,7 +2518,8 @@ function gui_create_mycanvas(cid,tag,color,x1,y1,x2_vis,y2_vis,x2,y2) {
         width: x2_vis - x1,
         height: y2_vis - y1,
         fill: color,
-        stroke: color
+        stroke: color,
+        id: tag + 'rect'
         }
     );
 
@@ -2421,7 +2528,7 @@ function gui_create_mycanvas(cid,tag,color,x1,y1,x2_vis,y2_vis,x2,y2) {
     var rect = create_item(cid,'rect', {
         width: x2 - x1,
         height: y2 - y1,
-        fill: color,
+        fill: 'none',
         stroke: color,
         id: tag + 'drag_handle'
         }
@@ -2431,8 +2538,24 @@ function gui_create_mycanvas(cid,tag,color,x1,y1,x2_vis,y2_vis,x2,y2) {
     g.appendChild(rect);
 }
 
+function gui_update_mycanvas(cid, tag, color, selected) {
+    var r = get_item(cid, tag + 'rect');
+    var h = get_item(cid, tag + 'drag_handle');
+    configure_item(r, { fill: color, stroke: color });
+    if (!selected) {
+        configure_item(h, { stroke: color });
+    }
+}
+
+function gui_mycanvas_coords(cid, tag, vis_width, vis_height, select_width, select_height) {
+    var r = get_item(cid, tag + 'rect');
+    var h = get_item(cid, tag + 'drag_handle');
+    configure_item(r, { width: vis_width, height: vis_height });
+    configure_item(h, { width: select_width, height: select_height });
+}
+
 function gui_mycanvas_select_color(cid,tag,color) {
-    item = get_item(cid,tag + 'drag_handle');
+    var item = get_item(cid,tag + 'drag_handle');
     configure_item(item, {stroke: color});
 }
 
@@ -2604,7 +2727,7 @@ function gui_draw_configure_all(cid, tag, attr_array) {
 }
 
 function add_popup(cid, popup) {
-    popup_menu[cid] = popup;    
+    popup_menu[cid] = popup;
 }
 
 exports.add_popup = add_popup;
@@ -2612,6 +2735,32 @@ exports.add_popup = add_popup;
 function gui_canvas_popup(cid, xpos, ypos, canprop, canopen, isobject) {
     gui_post("canvas_popup called... " + JSON.stringify(arguments));
     // Set the global popup x/y so they can be retrieved by the relevant doc's event handler
+    var zoom_level = patchwin[cid].zoomLevel;
+    gui_post("zoom level is " + zoom_level);
+    var zoom_factor = 1 + (zoom_level * (zoom_level * 0.02 + 0.18));
+    var zfactor;
+    switch(zoom_level) {
+        case -7: zfactor = 0.279; break;
+        case -6: zfactor = 0.335; break;
+        case -5: zfactor = 0.402; break;
+        case -4: zfactor = 0.483; break;
+        case -3: zfactor = 0.58; break;
+        case -2: zfactor = 0.695; break;
+        case -1: zfactor = 0.834; break;
+        case 1: zfactor = 1.2; break;
+        case 2: zfactor = 1.44; break;
+        case 3: zfactor = 1.73; break;
+        case 4: zfactor = 2.073; break;
+        case 5: zfactor = 2.485; break;
+        case 6: zfactor = 2.98; break;
+        case 7: zfactor = 3.6; break;
+        case 8: zfactor = 4.32; break;
+        default: zfactor = 1;
+    }
+
+    xpos = Math.floor(xpos * zfactor);
+    ypos = Math.floor(ypos * zfactor);
+    gui_post("xpos is " + xpos + " and ypos is " + ypos);
     popup_coords[0] = xpos;
     popup_coords[1] = ypos;
     popup_menu[cid].items[0].enabled = canprop;
@@ -2624,7 +2773,8 @@ function gui_canvas_popup(cid, xpos, ypos, canprop, canopen, isobject) {
     var left = patchwin[cid].window.document.body.scrollLeft;
     var top = patchwin[cid].window.document.body.scrollTop;
 
-    popup_menu[cid].popup(xpos - left, ypos - top);
+    popup_menu[cid].popup(xpos - Math.floor(left * zfactor),
+        ypos - Math.floor(top * zfactor));
 }
 
 function popup_action(cid, index) {

pd/nw/pdproperties.html

@@ -28,11 +28,35 @@ input[type="text"]{width:3em;}
           size <input type="text" name="size"></label><br>
       </span>
 
+      <span class="selection-size prop">
+        <label title="size of the selection rectangle used to select and drag the object">
+          selection size <input type="text" name="selection-size"></label><br>
+      </span>
+
+      <span class="width prop">
+        <label title="width of the iemgui">
+          width <input type="text" name="width"></label>
+        <label title="height of the iemgui">
+          height <input type="text" name="height"></label><br>
+      </span>
+
+      <span class="visible-width prop">
+        <label title="width of the rectangle">
+          width <input type="text" name="visible-width"></label>
+        <label title="height of the rectangle">
+          height <input type="text" name="visible-height"></label><br>
+      </span>
+
       <span class="nonzero-value prop">
         <label title="value to output when the toggle shows an 'x'">
           nonzero value <input type="text" name="nonzero-value"></label><br>
       </span>
 
+      <span class="number prop">
+        <label title="number of buttons">
+          number <input type="text" name="number"></label><br>
+      </span>
+
       <span class="flash-interrupt prop">
         <label title="the amount of time (in milliseconds) that Pd will wait before interrupting the flashing of the button">
           interrupt <input type="text" name="flash-interrupt"></label>
@@ -43,16 +67,37 @@ input[type="text"]{width:3em;}
           hold <input type="text" name="flash-hold"></label>  <br>
       </span>
 
-      <span class="min-range prop">
+      <span class="minimum-range prop">
         <label title="the lowest number to output. Anything lower will be replaced by this number">
-          minimum <input type="text" name="min-range"></label>
+          minimum <input type="text" name="minimum-range"></label>
         <label title="the largest number to output. Anything higher will be replaced by this number">
-          maximum <input type="text" name="max-range"></label>  <br>
+          maximum <input type="text" name="maximum-range"></label>  <br>
       </span>
 
       <span class="init prop">
         <label title="when checked, this will save the state of the iemgui with the patch, and output a value when the patch is loaded (as if you had an invisible [loadbang] connected to the input).">
-          init <input type="checkbox" name="init" value="on" ></label> <br>
+          init <input type="checkbox" name="init" value="on"></label><br>
+      </span>
+
+      <span class="vu-scale prop">
+        <label title="display scale (numbers) next to the meter">
+          scale <input type="checkbox" name="vu-scale" value="on"></label><br>
+      </span>
+
+
+      <span class="log-scaling prop">
+        <label title="logarithmic scale for values along the slider">
+          logarithmic scaling <input type="checkbox" name="log-scaling" value="on"></label><br>
+      </span>
+
+      <span class="log-height prop">
+        <label title="logarithmic scale for values along the slider">
+          log height<input type="text" name="log-height"></label><br>
+      </span>
+
+      <span class="steady-on-click prop">
+        <label title="don't move the slider on click, only on dragging.">
+          steady on click <input type="checkbox" name="steady-on-click" value="on"></label><br>
       </span>
      </fieldset> 
 
@@ -114,6 +159,7 @@ input[type="text"]{width:3em;}
      <span class="prop">
        <input type="hidden" name="minimum-size">
        <input type="hidden" name="range-schedule">
+       <input type="hidden" name="hide-frame">
      </span>
 
      <div style="text-align: center">
@@ -139,6 +185,10 @@ input[type="text"]{width:3em;}
         cancel();
     }
 
+//    function toggler(evt) {
+//        evt.value = evt.checked ? 1 : 0; 
+//    }
+
     function substitute_space(arg) {
         var fake_space = String.fromCharCode(11);
         return arg.split(' ').join(fake_space);
@@ -201,53 +251,94 @@ input[type="text"]{width:3em;}
 
         var height, width;
         var size = document.getElementsByName('size')[0].value;
-        if (size !== null) {
-            height = size;
-            width = size;
+        if (size === '') {
+            var size = document.getElementsByName('selection-size')[0].value;
         }
 
-        var slot3 = document.getElementsByName('min-range')[0].value;
-        var slot4 = document.getElementsByName('max-range')[0].value;
+        if (size !== '') {
+            width = size;
+            height = size;
+        } else {
+            width = document.getElementsByName('width')[0].value;
+            height = document.getElementsByName('height')[0].value;
+        }
 
-        pdgui.gui_post("min-range is " + slot3);
+        var slot3 = document.getElementsByName('minimum-range')[0].value;
+        var slot4 = document.getElementsByName('maximum-range')[0].value;
 
         if (slot3 === '') {
             slot3 = document.getElementsByName('flash-interrupt')[0].value;
             slot4 = document.getElementsByName('flash-hold')[0].value;
-         pdgui.gui_post("slot3 is now " + slot3);
+        }
+
+        if (slot3 === '') {
+            slot3 = document.getElementsByName('visible-width')[0].value;
+            slot4 = document.getElementsByName('visible-height')[0].value;
         }
 
         if (slot3 === '') { // toggle
             slot3 = document.getElementsByName('nonzero-value')[0].value;
+            if (slot3 === '') {
+                slot3 = 0;
+            }
             slot4 = 0;
         }
 
-        var init = document.getElementsByName('init')[0].value;
-        if (init !== null) { init = 0; }
+        var slot5 = +document.getElementsByName('log-scaling')[0].checked;
+        // Hack to accomodate the vu-scale property, which exists in the same
+        // slot as this one
+        var log_scaling_spanner = document.getElementsByClassName('log-scaling')[0];
+        var log_display = log_scaling_spanner.style.getPropertyValue('display');
+
+        if (log_display === null) {
+            slot5 = +document.getElementsByName('vu-scale')[0].checked;
+            pdgui.gui_post('slot five is ' + slot5);
+        }
+        pdgui.gui_post('slot five is ' + slot5);
+
+        var init = +document.getElementsByName('init')[0].checked;
+        if (init === '') { init = 0; }
+
+        var slot7 = document.getElementsByName('log-height')[0].value;
+        if (slot7 === '') {
+            slot7 = document.getElementsByName('number')[0].value;
+        }
+        if (slot7 === '') {
+            slot7 = 0;
+        }
 
         var font_style = document.getElementsByName('font-style')[0].value;
         if (font_style !== null) { font_style = 0; }
 
         var font_size = document.getElementsByName('font-size')[0].value;
-        if (font_size !== null) { font_size = 0; }
+        if (font_size === '') { font_size = 0; }
 
         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);
 
+        var slot18 = +document.getElementsByName('steady-on-click')[0].checked;
+
         pdgui.pdsend([pd_object_callback, 'dialog',
             width, height,
-            slot3, // flash-interrupt, min-range, or nonzero-value
-            slot4, // flash-hold or max-range
-            0, // this should be the lin/log thingy
+            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,
-            0, // this should be the number for toggle
+            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,
-            0, // steady on click
+            slot18, // steady on click
             0].join(' '));
 /*
 	pd [concat $id dialog \
@@ -309,6 +400,10 @@ function populate_form(attr_array) {
                     var color_string = "#" + (hex_string === '0' ? '000000' : hex_string);
                     pdgui.gui_post("color is " + color_string);
                     elem[0].value = color_string;
+                } else if (elem[0].type === 'checkbox') {
+                    // The attr here is a string, so we need to
+                    // force it to number, hence the "+" below
+                    elem[0].checked = +attr_array[i+1];
                 } else {
                     elem[0].value = attr_array[i+1];
                 }

pd/nw/todo.txt

@@ -88,3 +88,17 @@ Everything else:
 * implement the crappy iemgui color dialog presets
 * find a simple translation API
 * use underscores for iemgui dialog element names
+* revisit the x_thick logic in g_slider.c.  It thickens the indicator when it's
+  in the middle of the slider, but it's pretty obscure in the current impl.
+* for as many items as possible, hide them instead of removing from DOM (stuff
+  like xlets, etc.)
+* fix iemgui_font so it doesn't use tcl list syntax
+* change all the gui color char[MAXPDSTRING] junk to simple int, and do the conversion to
+  hex html string in the gui
+* implement iemgui labels and its ascetic font chooser
+* think about scaling the svg instead of the page, and making the selection
+  rectangle a div above that
+* change 'visible-width' to 'cnv-width'
+* in pdproperties.html, use an object to store all the prop/value pairs that
+  got sent.  That way we don't have to use all those awful tricks to
+  conditionally fill the slots

pd/src/g_all_guis.c

@@ -504,8 +504,8 @@ void iemgui_select(t_gobj *z, t_glist *glist, int selected)
         x->x_selected = canvas;
     else
         x->x_selected = NULL;
-    sys_vgui(".x%lx.c itemconfigure {x%lx&&border} -stroke %s\n", canvas, x,
-        x->x_selected && x->x_glist == canvas ? selection_color : border_color);
+    //sys_vgui(".x%lx.c itemconfigure {x%lx&&border} -stroke %s\n", canvas, x,
+    //  x->x_selected && x->x_glist == canvas ? selection_color : border_color);
     gui_vmess("gui_text_select_color", "ss", canvas_string(canvas), tagbuf);