add taper tool type and tool rendering

js/kiri-conf.js

@@ -235,10 +235,12 @@ var gs_kiri_conf = exports;
                     type: "endmill",
                     name: "end 1/4",
                     metric: false,
-                    flute_diam: 0.25,
-                    flute_len: 0,
                     shaft_diam: 0.25,
-                    shaft_len: 0
+                    shaft_len:  1,
+                    flute_diam: 0.25,
+                    flute_len:  2,
+                    // taper_angle: 70,
+                    taper_tip: 0,
                 },
                 {
                     id: 1001,
@@ -246,10 +248,12 @@ var gs_kiri_conf = exports;
                     type: "endmill",
                     name: "end 1/8",
                     metric: false,
-                    flute_diam: 0.125,
-                    flute_len: 0,
                     shaft_diam: 0.125,
-                    shaft_len: 0
+                    shaft_len:  1,
+                    flute_diam: 0.125,
+                    flute_len:  1.5,
+                    // taper_angle: 70,
+                    taper_tip: 0,
                 },
                 {
                     id: 1002,
@@ -257,10 +261,12 @@ var gs_kiri_conf = exports;
                     type: "endmill",
                     name: "end 1/16",
                     metric: false,
-                    flute_diam: 0.0625,
-                    flute_len: 0,
                     shaft_diam: 0.0625,
-                    shaft_len: 0
+                    shaft_len:  1,
+                    flute_diam: 0.0625,
+                    flute_len:  1.5,
+                    // taper_angle: 70,
+                    taper_tip: 0,
                 }
             ],
             // FDM/CAM/Laser

js/kiri-export.js

@@ -10,13 +10,9 @@ let gs_kiri_export = exports;
     if (self.kiri.export) return;
 
     let KIRI = self.kiri,
-        WIN = self.window,
-        DOC = self.document,
-        LOC = self.location,
         API = KIRI.api,
         SDB = API.sdb,
         UI = API.ui,
-        UC = API.uc,
         STATS = API.stats,
         MODES = API.const.MODES,
         printSeq = parseInt(SDB['kiri-print-seq'] || SDB['print-seq'] || "0") + 1;
@@ -25,32 +21,31 @@ let gs_kiri_export = exports;
 
     function exportPrint() {
         let currentPrint = API.print.get();
-        if (!currentPrint) {
+        if (currentPrint) {
+            STATS.add(`ua_${API.mode.get_lower()}_export`);
+            switch (API.mode.get()) {
+                case 'LASER': return exportPrintLaser(currentPrint);
+                case 'FDM': return exportPrintGCODE(currentPrint);
+                case 'CAM': return exportPrintGCODE(currentPrint);
+            }
+        } else {
             API.function.print(exportPrint);
-            return;
-        }
-        STATS.add(`ua_${API.mode.get_lower()}_export`);
-        switch (API.mode.get()) {
-            case 'LASER': return exportPrintLaser(currentPrint);
-            case 'FDM': return exportPrintGCODE(currentPrint);
-            case 'CAM': return exportPrintGCODE(currentPrint);
         }
     }
 
     function exportPrintGCODE(currentPrint) {
-        if (!currentPrint) {
+        if (currentPrint) {
+            currentPrint.exportGCode(true, function(gcode) {
+                exportGCode(gcode,currentPrint);
+            });
+        } else {
             API.function.print(exportPrint);
-            return;
         }
-        currentPrint.exportGCode(true, function(gcode) {
-            exportGCode(gcode,currentPrint);
-        });
     }
 
     function exportPrintLaser(currentPrint) {
         if (!currentPrint) {
-            API.function.print(exportPrintLaser);
+            return API.function.print(exportPrintLaser);
-            return;
         }
 
         let filename = "laser-"+(new Date().getTime().toString(36));
@@ -341,7 +336,8 @@ let gs_kiri_export = exports;
                 "&image=" + filename
             );
             xhtr.setRequestHeader("Content-Type", "text/plain");
-            xhtr.send(screenShot ? [gcode,screenShot].join("\0") : gcode);
+            let snapshot = API.view.snapshot;
+            xhtr.send(snapshot ? [gcode,snapshot].join("\0") : gcode);
             API.modal.hide();
         }
 
@@ -390,7 +386,9 @@ let gs_kiri_export = exports;
             $('grid-host').onkeyup = gridhost_probe;
             $('grid-apik').onkeyup = gridhost_probe;
             calcTime();
-            if (MODE === MODES.FDM) calcWeight();
+            if (MODE === MODES.FDM) {
+                calcWeight();
+            }
             octo_host = $('octo-host');
             octo_apik = $('octo-apik');
             if (MODE === MODES.CAM) {

js/kiri-init.js

@@ -139,6 +139,8 @@ var gs_kiri_init = exports;
             toolFluteLen: $('tool-flen'),
             toolShaftDiam: $('tool-sdiam'),
             toolShaftLen: $('tool-slen'),
+            // toolTaperAngle: $('tool-tangle'),
+            toolTaperTip: $('tool-ttip'),
             toolMetric: $('tool-metric'),
 
             catalog: $('catalog'),
@@ -1147,12 +1149,94 @@ var gs_kiri_init = exports;
             UI.toolFluteLen.value = tool.flute_len;
             UI.toolShaftDiam.value = tool.shaft_diam;
             UI.toolShaftLen.value = tool.shaft_len;
+            // UI.toolTaperAngle.value = tool.taper_angle || 70;
+            UI.toolTaperTip.value = tool.taper_tip || 0;
             UI.toolMetric.checked = tool.metric;
-            UI.toolType.selectedIndex = (
+            UI.toolType.selectedIndex = ['endmill','ballmill','tapermill'].indexOf(tool.type);
-                tool.type === 'endmill' ? 0 :
+            renderTool(tool);
-                tool.type === 'ballmill' ? 1 :
+        }
-                -1
+
-            );
+        function otag(o) {
+            if (Array.isArray(o)) {
+                let out = []
+                o.forEach(oe => out.push(otag(oe)));
+                return out.join('');
+            }
+            let tags = [];
+            Object.keys(o).forEach(key => {
+                let val = o[key];
+                let att = [];
+                Object.keys(val).forEach(tk => {
+                    let tv = val[tk];
+                    att.push(`${tk.replace(/_/g,'-')}="${tv}"`);
+                });
+                tags.push(`<${key} ${att.join(' ')}></${key}>`);
+            });
+            return tags.join('');
+        }
+
+        function renderTool(tool) {
+            let type = selectedTool.type;
+            let taper = type === 'tapermill';
+            // UI.toolTaperAngle.disabled = taper ? undefined : 'true';
+            UI.toolTaperTip.disabled = taper ? undefined : 'true';
+            $('tool-view').innerHTML = '<svg id="tool-svg" width="100%" height="100%"></svg>';
+            setTimeout(() => {
+                let svg = $('tool-svg');
+                let pad = 10;
+                let dim = { w: svg.clientWidth, h: svg.clientHeight }
+                let max = { w: dim.w - pad * 2, h: dim.h - pad * 2};
+                let off = { x: pad, y: pad };
+                let shaft_fill = "#cccccc";
+                let flute_fill = "#dddddd";
+                let stroke = "#777777";
+                let stroke_width = 3;
+                let shaft = tool.shaft_len || 1;
+                let flute = tool.flute_len || 1;
+                let tip_len = type === "ballmill" ? tool.flute_diam / 2 : 0;
+                let total_len = shaft + flute + tip_len;
+                let shaft_len = (shaft / total_len) * max.h;
+                let flute_len = (flute / total_len) * max.h;
+                let total_wid = Math.max(tool.flute_diam, tool.shaft_diam, total_len/4);
+                let shaft_off = (max.w * (1 - (tool.shaft_diam / total_wid))) / 2;
+                let flute_off = (max.w * (1 - (tool.flute_diam / total_wid))) / 2;
+                let taper_off = (max.w * (1 - ((tool.taper_tip || 0) / total_wid))) / 2;
+                let parts = [
+                    { rect: {
+                        x:off.x + shaft_off, y:off.y,
+                        width:max.w - shaft_off * 2, height:shaft_len,
+                        stroke, fill: shaft_fill, stroke_width
+                    } }
+                ];
+                if (type === "tapermill") {
+                    let yoff = off.y + shaft_len;
+                    let mid = dim.w / 2;
+                    parts.push({path: {stroke_width, stroke, fill:flute_fill, d:[
+                        `M ${off.x + flute_off} ${yoff}`,
+                        `L ${off.x + taper_off} ${yoff + flute_len}`,
+                        `L ${dim.w - off.x - taper_off} ${yoff + flute_len}`,
+                        `L ${dim.w - off.x - flute_off} ${yoff}`,
+                        `z`
+                    ].join('\n')}});
+                } else {
+                    parts.push({ rect: {
+                        x:off.x + flute_off, y:off.y + shaft_len,
+                        width:max.w - flute_off * 2, height:flute_len,
+                        stroke, fill: flute_fill, stroke_width
+                    } });
+                }
+                if (type === "ballmill") {
+                    let rad = (max.w - flute_off * 2) / 2;
+                    let xend = dim.w - off.x - flute_off;
+                    let yoff = off.y + shaft_len + flute_len + stroke_width/2;
+                    parts.push({path: {stroke_width, stroke, fill:flute_fill, d:[
+                        `M ${off.x + flute_off} ${yoff}`,
+                        `A ${rad} ${rad} 0 0 0 ${xend} ${yoff}`,
+                        // `L ${off.x + flute_off} ${yoff}`
+                    ].join('\n')}})
+                }
+                svg.innerHTML = otag(parts);
+            }, 10);
         }
 
         function updateTool() {
@@ -1162,11 +1246,14 @@ var gs_kiri_init = exports;
             selectedTool.flute_len = parseFloat(UI.toolFluteLen.value);
             selectedTool.shaft_diam = parseFloat(UI.toolShaftDiam.value);
             selectedTool.shaft_len = parseFloat(UI.toolShaftLen.value);
+            // selectedTool.taper_angle = parseFloat(UI.toolTaperAngle.value);
+            selectedTool.taper_tip = parseFloat(UI.toolTaperTip.value);
             selectedTool.metric = UI.toolMetric.checked;
-            selectedTool.type = ['endmill','ballmill'][UI.toolType.selectedIndex];
+            selectedTool.type = ['endmill','ballmill','tapermill'][UI.toolType.selectedIndex];
             renderTools();
             UI.toolSelect.selectedIndex = selectedTool.order;
             setToolChanged(true);
+            renderTool(selectedTool);
         }
 
         function setToolChanged(changed) {
@@ -1191,14 +1278,16 @@ var gs_kiri_init = exports;
             };
             UI.toolAdd.onclick = function() {
                 editTools.push({
-                    id: UTIL.time(),
+                    id: Date.now(),
                     number: editTools.length,
                     name: "new",
                     type: "endmill",
-                    flute_diam: 0.25,
-                    flute_len: 1,
                     shaft_diam: 0.25,
-                    shaft_len: 3,
+                    shaft_len: 1,
+                    flute_diam: 0.25,
+                    flute_len: 2,
+                    // taper_angle: 70,
+                    taper_tip: 0,
                     metric: false
                 });
                 setToolChanged(true);
@@ -1237,8 +1326,6 @@ var gs_kiri_init = exports;
         function showDevices() {
             if (API.mode.get_id() === MODES.LASER || deviceLock) return;
 
-            API.view.set(VIEWS.ARRANGE);
-
             API.ajax("/api/filters-"+API.mode.get_lower(), function(flvalue) {
                 if (!flvalue) return;
                 renderDevices(js2o(flvalue));
@@ -1339,6 +1426,8 @@ var gs_kiri_init = exports;
             UI.toolFluteLen,     updateTool,
             UI.toolShaftDiam,    updateTool,
             UI.toolShaftLen,     updateTool,
+            // UI.toolTaperAngle,   updateTool,
+            UI.toolTaperTip,     updateTool,
 
             UI.bedWidth,         platform.update_size,
             UI.bedDepth,         platform.update_size
@@ -1552,6 +1641,8 @@ var gs_kiri_init = exports;
             UI.alert.dialog.onclick = function() {
                 API.event.alerts(true);
             };
+
+            API.view.set(VIEWS.ARRANGE);
         }
 
         API.space.restore(ondone) || checkSeed(ondone) || ondone();

js/kiri.js

@@ -45,7 +45,6 @@ self.kiri.license = exports.LICENSE;
         UC = MOTO.ui.prefix('kiri').inputAction(updateSettings).hideAction(updateDialogLeft),
         MODE = MODES.FDM,
         onEvent = {},
-        screenShot = null,
         currentPrint = null,
         selectedMeshes = [],
         localFilterKey ='kiri-gcode-filters',
@@ -79,9 +78,6 @@ self.kiri.license = exports.LICENSE;
     settings.cdev.FDM = clone(settings.device);
     settings.cdev.CAM = clone(settings.device);
 
-    // add show() to catalog
-    CATALOG.show = showCatalog;
-
     DBUG.enable();
 
     if (SETUP.rm) renderMode = parseInt(SETUP.rm[0]);
@@ -89,6 +85,9 @@ self.kiri.license = exports.LICENSE;
 
     let alerts = [ [ `${LANG.version} ${KIRI.version}`, Date.now() ] ];
 
+    // add show() to catalog for API
+    CATALOG.show = showCatalog;
+
     const selection = {
         opacity: setOpacity,
         move: moveSelection,
@@ -210,8 +209,8 @@ self.kiri.license = exports.LICENSE;
             clear: clearPrint
         },
         probe: {
-            local : function() { return false },
             grid : function() { return false },
+            local : function() { return false }
         },
         platform,
         selection,
@@ -234,7 +233,8 @@ self.kiri.license = exports.LICENSE;
             get: function() { return viewMode },
             set: setViewMode,
             update_fields: updateFields,
-            wireframe: toggleWireframe
+            wireframe: toggleWireframe,
+            snapshot: null
         },
         widgets: {
             new: newWidget,
@@ -639,7 +639,6 @@ self.kiri.license = exports.LICENSE;
         }
 
         setViewMode(VIEWS.PREVIEW);
-
         clearPrint();
         saveSettings();
 
@@ -702,8 +701,8 @@ self.kiri.license = exports.LICENSE;
      */
     function prepareSlices(callback) {
         if (viewMode == VIEWS.ARRANGE) {
-            screenShot = SPACE.screenshot();
+            let snap = SPACE.screenshot();
-            screenShot = screenShot.substring(screenShot.indexOf(",")+1);
+            API.view.snapshot = snap.substring(snap.indexOf(",")+1);
         }
 
         setViewMode(VIEWS.SLICE);
@@ -965,7 +964,7 @@ self.kiri.license = exports.LICENSE;
             widget.setColor(widget_selected_color);
             meshUpdateInfo(mesh);
         }
-        UI.selection.style.display = platform.selected_count() ? 'inline' : 'none';
+        platformUpdateSelected();
         SPACE.update();
     }
 
@@ -973,6 +972,10 @@ self.kiri.license = exports.LICENSE;
         return viewMode === VIEWS.ARRANGE ? selectedMeshes.length : 0;
     }
 
+    function platformUpdateSelected() {
+        UI.selection.style.display = platform.selected_count() ? 'inline' : 'none';
+    }
+
     function platformDeselect(widget) {
         // if (viewMode !== VIEWS.ARRANGE) return;
         if (!widget) {
@@ -986,7 +989,7 @@ self.kiri.license = exports.LICENSE;
             sel = (si >= 0);
         if (sel) selectedMeshes.splice(si,1);
         widget.setColor(widget_deselected_color);
-        UI.selection.style.display = platform.selected_count() ? 'inline' : 'none';
+        platformUpdateSelected();
         SPACE.update();
         meshUpdateInfo();
     }
@@ -1046,7 +1049,7 @@ self.kiri.license = exports.LICENSE;
         platform.compute_max_z();
         if (MODE !== MODES.FDM) platform.layout();
         SPACE.update();
-        UI.selection.style.display = platform.selected_count() ? 'inline' : 'none';
+        platformUpdateSelected();
     }
 
     function platformSelectAll() {
@@ -1712,7 +1715,6 @@ self.kiri.license = exports.LICENSE;
         }
         UI.ctrlLeft.focus();
         UI.container.focus();
-        //console.log({focus: DOC.activeElement});
     }
 
     function setViewMode(mode) {
@@ -1720,23 +1722,20 @@ self.kiri.license = exports.LICENSE;
         viewMode = mode;
         platform.deselect();
         meshUpdateInfo();
-        [ UI.modeArrange, UI.modeSlice, UI.modePreview ].forEach(function(b) {
-            b.removeAttribute("class");
-        });
         switch (mode) {
             case VIEWS.ARRANGE:
+                showLayerView(false);
                 updateSliderMax();
-                UI.layerView.style.display = 'none';
+                showModeActive(UI.modeArrange);
-                UI.modeArrange.setAttribute("class","buton");
                 break;
             case VIEWS.SLICE:
-                UI.layerView.style.display = 'flex';
+                showLayerView(true);
-                UI.modeSlice.setAttribute("class","buton");
                 updateSliderMax();
+                showModeActive(UI.modeSlice);
                 break;
             case VIEWS.PREVIEW:
-                UI.layerView.style.display = 'flex';
+                showLayerView(true);
-                UI.modePreview.setAttribute("class","buton");
+                showModeActive(UI.modePreview);
                 break;
             default:
                 DBUG.log("invalid view mode: "+mode);
@@ -1745,6 +1744,20 @@ self.kiri.license = exports.LICENSE;
         DOC.activeElement.blur();
     }
 
+    function showModeActive(el) {
+        [ UI.modeArrange, UI.modeSlice, UI.modePreview, UI.modeExport ].forEach(function(b) {
+            if (b === el) {
+                b.classList.add('buton');
+            } else {
+                b.classList.remove('buton');
+            }
+        });
+    }
+
+    function showLayerView(bool) {
+        UI.layerView.style.display = bool ? 'flex' : 'none';
+    }
+
     function getMode() {
         return settings.mode;
     }
@@ -1782,7 +1795,9 @@ self.kiri.license = exports.LICENSE;
         UI.modeCAM.setAttribute('class', MODE === MODES.CAM ? 'buton' : '');
         UI.mode.style.display = lock ? 'none' : '';
         UI.modeTable.style.display = lock ? 'none' : '';
-        if (camStock) camStock.material.visible = settings.mode === 'CAM';
+        if (camStock) {
+            camStock.material.visible = settings.mode === 'CAM';
+        }
         restoreWorkspace(null,true);
         // if (MODE !== MODES.FDM) platform.layout();
         if (then) then();

web/kiri/index.html

@@ -119,21 +119,21 @@
                         <select id="tool-type">
                             <option value="endmill" selected>end</option>
                             <option value="ballmill">ball</option>
-                            <option value="taper">taper</option>
+                            <option value="tapermill">taper</option>
                         </select>
                     </div>
                     <div class="flow-row"><label>name</label><input id="tool-name" size=8></input></div>
                     <div class="flow-row"><label>tool #</label><input id="tool-num" size=5></input></div>
                     <div class="flow-row"><label>metric</label><input id="tool-metric" type="checkbox"></input></div>
-                    <div class="grouphead">flute</div>
-                    <div class="flow-row" title="flute diameter"><label>diameter</label><input id="tool-fdiam" size=5></input></div>
-                    <div class="flow-row" title="flute length"><label>length</label><input id="tool-flen" size=5></input></div>
                     <div class="grouphead">shaft</div>
                     <div class="flow-row" title="shaft diameter"><label>diameter</label><input id="tool-sdiam" size=5></input></div>
                     <div class="flow-row" title="shaft length"><label>length</label><input id="tool-slen" size=5></input></div>
+                    <div class="grouphead">flute</div>
+                    <div class="flow-row" title="flute diameter"><label>diameter</label><input id="tool-fdiam" size=5></input></div>
+                    <div class="flow-row" title="flute length"><label>length</label><input id="tool-flen" size=5></input></div>
                     <div class="grouphead">taper</div>
-                    <div class="flow-row" title="taper angle"><label>angle</label><input id="tool-tangle" size=5></input></div>
+                    <!-- <div class="flow-row" title="taper angle"><label>angle</label><input id="tool-tangle" size=5></input></div> -->
-                    <div class="flow-row" title="tip width"><label>width</label><input id="tool-twidth" size=5></input></div>
+                    <div class="flow-row" title="tip width"><label>tip</label><input id="tool-ttip" size=5></input></div>
                 </div>
                 <div id="tool-view" class="flow-col"></div>
             </div>

web/kiri/style.css

@@ -415,6 +415,9 @@ button.selected {
 #tools input:focus {
     background-color: #dee;
 }
+#tools input:disabled {
+    color: #ddd;
+}
 #tool-list > select {
     flex-grow: 1;
     width: 100%;