checkpoint image import

src/kiri/client.js

@@ -214,6 +214,17 @@ KIRI.work = {
                 done(KIRI.codec.decode(reply.parsed), reply.maxSpeed);
             }
         });
+    },
+
+    image2mesh: function(data, progress, output) {
+        send("image2mesh", data, reply => {
+            if (reply.progress) {
+                progress(reply.progress);
+            }
+            if (reply.done) {
+                output(reply.done);
+            }
+        }, [ data.png ]);
     }
 };
 

src/kiri/init.js

@@ -1125,10 +1125,6 @@
         });
     }
 
-    function deleteCatalogFile(e) {
-        CATALOG.deleteFile(e.target.getAttribute('del'));
-    }
-
     function updateCatalog(files) {
         let table = UI.catalogList,
             list = [];
@@ -1171,7 +1167,7 @@
 
             del.setAttribute('del', name);
             del.setAttribute('title', "remove '"+name+"'");
-            del.onclick = deleteCatalogFile;
+            del.onclick = () => { CATALOG.deleteFile(name) };
             del.innerHTML = '<i class="far fa-trash-alt"></i>';
 
             size.setAttribute("disabled", true);

src/kiri/main.js

@@ -945,6 +945,38 @@
         });
     }
 
+    function loadImage(image) {
+        KIRI.client.image2mesh({settings, png:image}, progress => {
+            console.log({i2m_progress: progress});
+        }, output => {
+            console.log({i2m_mesh: output});
+            let {verts, index, vi, ii} = output;
+
+            console.log({verts, index, vi, ii});
+
+            let mat = new THREE.MeshPhongMaterial({
+                shininess: 0x101010,
+                specular: 0x101010,
+                transparent: true,
+                opacity: 1,
+                color: 0x999999,
+                side: THREE.DoubleSide
+            });
+
+            let geo = new THREE.BufferGeometry();
+            geo.setAttribute('position', new THREE.BufferAttribute(verts, 3));
+            geo.setIndex([...index]); // doesn't like the Uint32Array
+            geo.computeFaceNormals();
+            geo.computeVertexNormals();
+
+            let mesh = new THREE.Mesh(geo, mat);
+            mesh.castShadow = true;
+            mesh.receiveShadow = true;
+
+            SPACE.platform.world.add(mesh);
+        });
+    }
+
     /** ******************************************************************
      * Selection Functions
      ******************************************************************* */
@@ -1695,6 +1727,7 @@
                 israw = lower.indexOf(".raw") > 0 || lower.indexOf('.') < 0,
                 isstl = lower.indexOf(".stl") > 0,
                 issvg = lower.indexOf(".svg") > 0,
+                ispng = lower.indexOf(".png") > 0,
                 isgcode = lower.indexOf(".gcode") > 0 || lower.indexOf(".nc") > 0,
                 isset = lower.indexOf(".b64") > 0 || lower.indexOf(".km") > 0;
             reader.file = files[i];
@@ -1717,11 +1750,16 @@
                 if (isgcode) loadCode(e.target.result, 'gcode');
                 if (issvg) loadCode(e.target.result, 'svg');
                 if (isset) settingsImport(e.target.result, true);
+                if (ispng) loadImage(e.target.result);
                 if (--loaded === 0) platform.group_done(isgcode);
             };
+            if (isstl || ispng) {
+                reader.readAsArrayBuffer(reader.file);
+            } else {
                 reader.readAsBinaryString(reader.file);
             }
         }
+    }
 
     function loadFile() {
         $('load-file').onchange = function(event) {

src/kiri/worker.js

@@ -238,6 +238,70 @@ KIRI.worker = {
             console.log({invalid:data});
         }
         send.done({config: update});
+    },
+
+    image2mesh: function(info, send) {
+        let img = new png.PNG();
+        img.parse(info.png, (err, output) => {
+            let { width, height, data } = output;
+            let { bedDepth, bedWidth } = info.settings.device;
+            let imageAspect = height / width;
+            let deviceAspect = bedDepth / bedWidth;
+            let div = 1;
+            if (imageAspect < deviceAspect) {
+                div = width / bedWidth;
+            } else {
+                div = height / bedDepth;
+            }
+            send.data({progress: { width, height }});
+            let points =
+                width * height + // grid
+                height * 2     + // left/right
+                width * 2      - // top/bottom
+                4                // base shared corners
+                ;
+            let lines =
+                ((height - 1) * (width - 1)) + // grid
+                ((height - 1) * (width    )) + // grid
+                ((height    ) * (width - 1)) + // grid
+                ((height * 3) - 2)           + // left/right
+                ((width * 3) - 2)            + // top/bottom
+                1                              // across base
+                ;
+            let verts = new Float32Array(points * 3);
+            let index = new Uint32Array(lines * 2);
+            let vi = 0;
+            let ii = 0;
+            let w2 = width / 2;
+            let h2 = height / 2;
+            for (let x = 0; x < width; x++) {
+                for (let y = 0; y < height; y++) {
+                    let di = (x + width * y) * 4;
+                    let r = data[di];
+                    let g = data[di+1];
+                    let b = data[di+2];
+                    let v = (r + g + b) / 3;
+                    verts[vi++] = (-w2 + x) / div;
+                    verts[vi++] = (h2 - y) / div;
+                    verts[vi++] = ((255 - v) / 50);
+                    if (x > 0 && y > 0) {
+                        let p1 = (x - 1) * height + (y - 0);
+                        let p2 = (x - 0) * height + (y - 1);
+                        let p3 = (x - 0) * height + (y - 0);
+                        let p4 = (x - 1) * height + (y - 1);
+                        index[ii++] = p1;
+                        index[ii++] = p2;
+                        index[ii++] = p3;
+                        index[ii++] = p1;
+                        index[ii++] = p4;
+                        index[ii++] = p2;
+                    }
+                }
+            }
+            verts = verts.slice(0, vi);
+            index = index.slice(0, ii);
+            send.done({done: {verts, index, vi, ii}});
+        });
     }
 };