renamed some files for the sprite game

started working on port of [draw image]

pd/nw/pd_canvas.html

@@ -156,7 +156,7 @@ var canvas_events = (function() {
                     pdgui.gui_canvas_sendkey(name, 1, evt, hack);
                     pdgui.set_keymap(key_code, hack);
                 }
-                pdgui.gui_post("keydown time: keycode is " + evt.keyCode);
+//                pdgui.gui_post("keydown time: keycode is " + evt.keyCode);
                 last_keydown = evt.keyCode;
                 //evt.stopPropagation();
                 //evt.preventDefault();
@@ -176,7 +176,7 @@ var canvas_events = (function() {
 
                 pdgui.gui_canvas_sendkey(name, 1, evt, evt.charCode);
                 pdgui.set_keymap(last_keydown, evt.charCode);
-                pdgui.gui_post("keypress time: charcode is " + evt.charCode);
+//                pdgui.gui_post("keypress time: charcode is " + evt.charCode);
                 // Don't do things like scrolling on space, arrow keys, etc.
                 //evt.stopPropagation();
                 evt.preventDefault();
@@ -184,7 +184,7 @@ var canvas_events = (function() {
             keyup: function(evt) {
                 var my_char_code = pdgui.get_char_code(evt.keyCode);
                 pdgui.gui_canvas_sendkey(name, 0, evt, my_char_code);
-                pdgui.gui_post("keyup time: charcode is: " + my_char_code);
+//                pdgui.gui_post("keyup time: charcode is: " + my_char_code);
                 evt.stopPropagation();
                 evt.preventDefault();
             },

pd/nw/pdgui.js

@@ -13,7 +13,7 @@ exports.get_pwd = function() {
 }
 
 var fs = require('fs');     // for fs.existsSync
-var path = require('path'); // for path.dirname path.extname
+var path = require('path'); // for path.dirname path.extname path.join
 
 // local strings
 var lang = require('./pdlang.js');
@@ -3083,6 +3083,124 @@ function gui_drawnumber_vis(cid, parent_tag, tag, x, y, scale_x, scale_y,
     }
 }
 
+var drawimage_data = {}; // for storing base64 image data associated with
+                         // each [draw image] command
+exports.flub = drawimage_data;
+
+function gui_drawimage_new(obj_tag, file_path, canvasdir, flags) {
+    var drawsprite = 1,
+        image_seq,
+        i,
+        matchchar = '*',
+        files,
+        ext,
+        img; // dummy image to measure width and height
+    image_seq = flags & drawsprite;
+    if (!path.isAbsolute(file_path)) {
+        file_path = path.join(canvasdir, file_path);
+    }
+    file_path = path.normalize(file_path);
+    if (fs.existsSync(file_path) && fs.lstatSync(file_path).isDirectory()) {
+
+    }
+    files = fs.readdirSync(file_path)
+                .sort(); // Note that js's 'sort' method doesn't do the
+                         // "right thing" for numbers. For that we'd need
+                         // to provide our own sorting function
+    drawimage_data[obj_tag] = []; // create empty array for base64 image data
+    for (i = 0; i < files.length && i < 1000; i++) {
+        ext = path.extname(files[i]);
+
+// todo: tolower()
+
+        if (ext === '.gif' ||
+            ext === '.jpg' ||
+            ext === '.png' ||
+            ext === '.jpeg' ||
+            ext === '.svg') {
+
+            gui_post("we got an image at index " + i + ": " + files[i]);
+            // Now add an element to that array with the image data
+            drawimage_data[obj_tag].push({
+                type: ext === '.jpeg' ? 'jpg' : ext.slice(1),
+                data: fs.readFileSync(path.join(file_path, files[i]),'base64')
+            });
+        }
+    }
+    gui_post("no of files: " + i);
+    if (i > 0) {
+        img = new pd_window.Image(); // create an image in the pd_window context
+        img.onload = function() {
+            pdsend(obj_tag + ' size ' + this.width + ' ' + this.height);
+        };
+        img.src = 'data:image/' + drawimage_data[obj_tag][0].type +
+            ';base64,' + drawimage_data[obj_tag][0].data;
+    } else {
+        gui_post("drawimage: warning: no images loaded");
+    }
+}
+
+function gui_drawimage_vis(cid, x, y, obj_tag, seqno, parent_tag) {
+    var item,
+        g = get_item(cid, parent_tag), // main <g> within the scalar
+        len = drawimage_data[obj_tag].length,
+        i,
+        img,
+        image_container;
+    if (len < 1) {
+        return;
+    }
+    // Wrap around for out-of-bounds sequence numbers
+    if (seqno >= len || seqno < 0) {
+        seqno %= len;
+    }
+    image_container = create_item(cid, 'g', {
+        id: obj_tag + 'image_container'
+    });
+    for (i = 0; i < len; i++) {
+        item = create_item(cid, 'image', {
+            x: x,
+            y: y,
+            id: obj_tag + i,
+            visibility: seqno === i ? 'visible' : 'hidden',
+            preserveAspectRatio: "xMinYMin meet"
+        });
+        item.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 
+            'data:image/' + drawimage_data[obj_tag][i].type + ';base64,' +
+             drawimage_data[obj_tag][i].data);
+        image_container.appendChild(item);
+    }
+    g.appendChild(image_container);
+
+    // Hack to set correct width and height
+    img = new pd_window.Image();
+    img.onload = function() {
+        var w = this.width,
+            h = this.height;
+        for (i = 0; i < len; i++) {
+            configure_item(get_item(cid, obj_tag + i), {
+                width: w,
+                height: h
+            });
+        }
+    };
+    img.src = 'data:image/' + drawimage_data[obj_tag][0].type +
+        ';base64,' + drawimage_data[obj_tag][0].data;
+}
+
+function gui_drawimage_index(cid, obj_tag, index) {
+    var i,
+        len = drawimage_data[obj_tag].length,
+        image_container = get_item(cid, obj_tag + 'image_container'),
+        last_image,
+        image = image_container.childNodes[index],
+        last_image = image_container.querySelectorAll('[visibility="visible"]');
+        for (i = 0; i < last_image.length; i++) {
+            configure_item(last_image[i], { visibility: 'hidden' });
+        }
+    configure_item(image, { visibility: 'visible' });
+}
+
 function add_popup(cid, popup) {
     popup_menu[cid] = popup;
 }

pd/src/g_template.c

@@ -1678,9 +1678,11 @@ void svg_sendupdate(t_svg *x, t_canvas *c, t_symbol *s,
     }
     else if (s == gensym("index"))
     {
-        sys_vgui("pdtk_drawimage_index .x%lx.c .x%lx .draw%lx.%lx %d\n",
-            glist_getcanvas(c), parent, parent, data, drawimage_getindex(parent,
-                template, data)); 
+        //sys_vgui("pdtk_drawimage_index .x%lx.c .x%lx .draw%lx.%lx %d\n",
+        //    glist_getcanvas(c), parent, parent, data, drawimage_getindex(parent,
+        //        template, data)); 
+        gui_vmess("gui_drawimage_index", "xxi",
+            glist_getcanvas(c), parent, drawimage_getindex(parent, template, data));
     }
     else if (s == gensym("points"))
     {
@@ -6825,7 +6827,7 @@ static void *drawimage_new(t_symbol *classsym, int argc, t_atom *argv)
     x->x_deleteme = 0;
     char *classname = classsym->s_name;
     char buf[50];
-    sprintf(buf, ".x%lx", (t_int)x);
+    sprintf(buf, "x%lx", (t_int)x);
     pd_bind(&x->x_obj.ob_pd, gensym(buf));
     int flags = 0;
     
@@ -6848,8 +6850,13 @@ static void *drawimage_new(t_symbol *classsym, int argc, t_atom *argv)
        the source. ".x%lx" is the name for the parent tk image and
        ".x%lx.i" is the tag given to a scalar's canvas image item.
     */
-    sys_vgui("pdtk_drawimage_new .x%lx {%s} {%s} %d\n", (t_int)x,
-        x->x_img->s_name, dir->s_name, x->x_flags);
+    //sys_vgui("pdtk_drawimage_new .x%lx {%s} {%s} %d\n", (t_int)x,
+    //    x->x_img->s_name, dir->s_name, x->x_flags);
+    gui_vmess("gui_drawimage_new", "xssi",
+        x,
+        x->x_img->s_name,
+        dir->s_name,
+        x->x_flags);
     post("deleteme is %d", x->x_deleteme);
     return (x);
 }
@@ -6858,6 +6865,7 @@ void drawimage_size(t_drawimage *x, t_float w, t_float h)
 {
     x->x_w = w;
     x->x_h = h;
+post("w is %g and h is %g", w, h);
 }
 
 static int drawimage_getindex(void *z, t_template *template, t_word *data)
@@ -7068,17 +7076,31 @@ static void drawimage_vis(t_gobj *z, t_glist *glist, t_glist *parentglist,
         sys_vgui("pdtk_drawimage_vis .x%lx.c %d %d .x%lx .x%lx.i %d ",*/
         int xloc = fielddesc_getcoord(&x->x_xloc, template, data, 0);
         int yloc = fielddesc_getcoord(&x->x_yloc, template, data, 0);
-        sys_vgui("pdtk_drawimage_vis .x%lx.c %d %d .x%lx .x%lx.i %d \\\n",
-            glist_getcanvas(glist), xloc, yloc, x, data,
-            (int)fielddesc_getfloat(&x->x_value, template, data, 0));
-        //sys_vgui(".x%lx.x%lx.template%lx scalar%lx\n", glist_getcanvas(glist),
-        //    glist, data, sc);
-        sys_vgui(".x%lx.x%lx.template%lx scalar%lx %s%lx.%lx "
-                 ".draw%lx.%lx\n", glist_getcanvas(glist),
-            glist, data, sc,
-            (in_array ? ".scelem" : ".dgroup"),
-            (in_array ? parentglist : parent), data,
-            x, data);
+
+        //sys_vgui("pdtk_drawimage_vis .x%lx.c %d %d .x%lx .x%lx.i %d \\\n",
+        //    glist_getcanvas(glist), xloc, yloc, x, data,
+        //    (int)fielddesc_getfloat(&x->x_value, template, data, 0));
+        //sys_vgui(".x%lx.x%lx.template%lx scalar%lx %s%lx.%lx "
+        //         ".draw%lx.%lx\n", glist_getcanvas(glist),
+        //    glist, data, sc,
+        //    (in_array ? ".scelem" : ".dgroup"),
+        //    (in_array ? parentglist : parent), data,
+        //    x, data);
+
+        char parent_tagbuf[MAXPDSTRING];
+        sprintf(parent_tagbuf,"%s%lx.%lx",
+            in_array ? "scelem" : "dgroup",
+            in_array ? (long unsigned int)parentglist : (long unsigned int)parent,
+            (long unsigned int)data);
+
+        gui_vmess("gui_drawimage_vis", "xiixis",
+            glist_getcanvas(glist),
+            xloc,
+            yloc,
+            x,
+            (int)fielddesc_getfloat(&x->x_value, template, data, 0),
+            parent_tagbuf);
+
         /* need to revisit all these tags, they are getting confusing... */
 //        sys_vgui(".x%lx.c itemconfigure .x%lx.x%lx.template%lx\\\n",
 //            glist_getcanvas(glist), glist_getcanvas(glist), glist, data);